feat: app window is slightly rounded to match design language

src-tauri/tauri.conf.json

@@ -153,6 +153,7 @@
 				"fullscreen": false,
 				"resizable": true,
 				"decorations": false,
+        "transparent": true,
 				"center": true,
 				"visible": true
 			}

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"/>

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.
    */

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";

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[];

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[];

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";

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);

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);

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;