From c8e7a11af77417d835c2f9991ba591b3bc5ced10 Mon Sep 17 00:00:00 2001
From: Tormak <63308171+Tormak9970@users.noreply.github.com>
Date: Wed, 10 Jan 2024 12:17:33 -0500
Subject: [PATCH] feat: app window is slightly rounded to match design language

---
 src-tauri/tauri.conf.json                          |  1 +
 src/components/Footer.svelte                       |  2 +-
 src/components/Titlebar.svelte                     |  3 +--
 src/components/layout/PaddedScrollContainer.svelte |  2 +-
 src/components/layout/VirtualGrid.svelte           |  2 +-
 src/components/layout/VirtualList.svelte           |  2 +-
 .../{PrivacyModal.svelte => InfoModal.svelte}      |  0
 .../modals/current-grids/CurrentGridsModal.svelte  |  2 +-
 src/components/modals/modal-utils/ModalBody.svelte | 10 +++++++++-
 src/{components => lib}/directives/scrollShadow.ts |  0
 src/stores/AppState.ts                             |  1 +
 src/windows/main/Main.svelte                       | 14 ++++++++++----
 12 files changed, 27 insertions(+), 12 deletions(-)
 rename src/components/modals/{PrivacyModal.svelte => InfoModal.svelte} (100%)
 rename src/{components => lib}/directives/scrollShadow.ts (100%)

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index ade536dd..23da0d9a 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -153,6 +153,7 @@
 				"fullscreen": false,
 				"resizable": true,
 				"decorations": false,
+        "transparent": true,
 				"center": true,
 				"visible": true
 			}
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index b6a076a4..80f50148 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -41,7 +41,7 @@
       <Spacer orientation="HORIZONTAL" />
     {/if}
     
-    <IconButton label="Connectivity Info" onClick={() => $showInfoModal = true} width="auto" tooltipPosition="auto">
+    <IconButton label="Info" onClick={() => $showInfoModal = true} width="auto" tooltipPosition="auto">
       <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512" style="height: 12px; width: 12px;">
         <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
         <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/>
diff --git a/src/components/Titlebar.svelte b/src/components/Titlebar.svelte
index 8e341335..a80ac32a 100644
--- a/src/components/Titlebar.svelte
+++ b/src/components/Titlebar.svelte
@@ -9,13 +9,12 @@
   let windowCloseUnsub: () => void;
 
   export let title: string;
+  export let isMaxed = false;
 
   let minimize: HTMLDivElement;
   let maximize: HTMLDivElement;
   let close: HTMLDivElement;
 
-  let isMaxed = false;
-
   /**
    * Function to run when the user attempts to close the main window.
    */
diff --git a/src/components/layout/PaddedScrollContainer.svelte b/src/components/layout/PaddedScrollContainer.svelte
index 872b86ba..f81df356 100644
--- a/src/components/layout/PaddedScrollContainer.svelte
+++ b/src/components/layout/PaddedScrollContainer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { debounce } from "../../lib/utils/Utils";
-  import { scrollShadow } from "../directives/scrollShadow";
+  import { scrollShadow } from "../../lib/directives/scrollShadow";
 
   export let width = "100%";
   export let height = "auto";
diff --git a/src/components/layout/VirtualGrid.svelte b/src/components/layout/VirtualGrid.svelte
index c2903984..e47eba9f 100644
--- a/src/components/layout/VirtualGrid.svelte
+++ b/src/components/layout/VirtualGrid.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount, tick } from "svelte";
   import { debounce } from "../../lib/utils/Utils";
-  import { scrollShadow } from "../directives/scrollShadow";
+  import { scrollShadow } from "../../lib/directives/scrollShadow";
 
 	// * Component Props.
 	export let items: any[];
diff --git a/src/components/layout/VirtualList.svelte b/src/components/layout/VirtualList.svelte
index edb39b8c..32293b71 100644
--- a/src/components/layout/VirtualList.svelte
+++ b/src/components/layout/VirtualList.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount, tick } from "svelte";
-  import { scrollShadow } from "../directives/scrollShadow";
+  import { scrollShadow } from "../../lib/directives/scrollShadow";
 
 	// * Component Props.
 	export let items: any[];
diff --git a/src/components/modals/PrivacyModal.svelte b/src/components/modals/InfoModal.svelte
similarity index 100%
rename from src/components/modals/PrivacyModal.svelte
rename to src/components/modals/InfoModal.svelte
diff --git a/src/components/modals/current-grids/CurrentGridsModal.svelte b/src/components/modals/current-grids/CurrentGridsModal.svelte
index 2759522b..009fbab0 100644
--- a/src/components/modals/current-grids/CurrentGridsModal.svelte
+++ b/src/components/modals/current-grids/CurrentGridsModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { GridTypes, appLibraryCache, gridType, manualSteamGames, nonSteamGames, steamGames, unfilteredLibraryCache } from "../../../stores/AppState";
+  import { GridTypes, appLibraryCache, manualSteamGames, nonSteamGames, steamGames, unfilteredLibraryCache } from "../../../stores/AppState";
   import ModalBody from "../modal-utils/ModalBody.svelte";
   import { currentGridsAppid, showCurrentGridsModal } from "../../../stores/Modals";
   import CurrentGridImage from "./CurrentGridImage.svelte";
diff --git a/src/components/modals/modal-utils/ModalBody.svelte b/src/components/modals/modal-utils/ModalBody.svelte
index f51745b3..00ccb887 100644
--- a/src/components/modals/modal-utils/ModalBody.svelte
+++ b/src/components/modals/modal-utils/ModalBody.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { windowIsMaximized } from "../../../stores/AppState";
+
   export let title: string;
   export let onClose: () => void = () => {};
   export let canClose = true;
@@ -22,7 +24,7 @@
   }
 </script>
 
-<div class="blur" />
+<div class="blur" class:rounded={!$windowIsMaximized} />
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="background" on:mousedown={checkCanQuit} on:mouseup={closeWrapper} on:contextmenu|preventDefault|stopPropagation>
   <div class="modal-body" on:contextmenu|stopPropagation>
@@ -60,6 +62,12 @@
     backdrop-filter: blur(1px);
   }
 
+  .rounded {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    overflow: hidden;
+  }
+
   .border {
     margin-top: 7px;
     border-bottom: 1px solid var(--foreground);
diff --git a/src/components/directives/scrollShadow.ts b/src/lib/directives/scrollShadow.ts
similarity index 100%
rename from src/components/directives/scrollShadow.ts
rename to src/lib/directives/scrollShadow.ts
diff --git a/src/stores/AppState.ts b/src/stores/AppState.ts
index 4ff615cf..2b49370c 100644
--- a/src/stores/AppState.ts
+++ b/src/stores/AppState.ts
@@ -30,6 +30,7 @@ export enum Theme {
   LIGHT
 }
 
+export const windowIsMaximized = writable(false);
 export const theme = writable(Theme.DARK);
 export const renderGamesInList = writable(false);
 export const optionsSize = writable(16);
diff --git a/src/windows/main/Main.svelte b/src/windows/main/Main.svelte
index 2bd3e0f2..38c6a0ba 100644
--- a/src/windows/main/Main.svelte
+++ b/src/windows/main/Main.svelte
@@ -10,7 +10,7 @@
 	import Grids from "../../components/core/grids/Grids.svelte";
   import { AppController } from "../../lib/controllers/AppController";
   import { exit } from "@tauri-apps/api/process";
-  import { activeUserId, dbFilters, isOnline, showHidden, steamUsers } from "../../stores/AppState";
+  import { activeUserId, dbFilters, isOnline, showHidden, steamUsers, windowIsMaximized } from "../../stores/AppState";
   import { showManualGamesModal, showBatchApplyModal, showBatchApplyProgress, showGridModal, showLogoPositionModal, showSettingsModal, showCleanGridsModal, showCleanConflictDialog, showUpdateModal, updateManifest, showDialogModal, showSteamPathModal, showGameSearchModal, showInfoModal, showCurrentGridsModal } from "../../stores/Modals";
 	import DropDown from "../../components/interactables/DropDown.svelte";
 	import type { Unsubscriber } from "svelte/store";
@@ -27,7 +27,7 @@
   import DialogModal from "../../components/modals/DialogModal.svelte";
   import SteamPathModal from "../../components/modals/SteamPathModal.svelte";
   import GameSearchModal from "../../components/modals/game-search/GameSearchModal.svelte";
-  import PrivacyModal from "../../components/modals/PrivacyModal.svelte";
+  import PrivacyModal from "../../components/modals/InfoModal.svelte";
   import { SettingsManager } from "../../lib/utils/SettingsManager";
   import CurrentGridsModal from "../../components/modals/current-grids/CurrentGridsModal.svelte";
 	
@@ -133,8 +133,8 @@
 	});
 </script>
 
-<main>
-	<Titlebar title="Steam Art Manager">
+<main class:rounded={!$windowIsMaximized}>
+	<Titlebar title="Steam Art Manager" bind:isMaxed={$windowIsMaximized}>
 		<DropDown
       label="User"
       options={users}
@@ -218,6 +218,12 @@
 		transition: opacity 0.1s ease-in-out;
 	}
 
+  .rounded {
+    border-radius: 4px;
+    overflow: hidden;
+    background-color: transparent;
+  }
+
   .core-toast {
     font-size: 14px;
     --toastBorderRadius: 2px;