feat: panel positions are now consistent

Tormak9970 · Oct 29, 2023 · 398e5d7 · 398e5d7
1 parent fafa86a
commit 398e5d7
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 11 deletions.
diff --git a/src/components/core/filters/Options.svelte b/src/components/core/filters/Options.svelte
@@ -6,7 +6,7 @@
   import { SettingsManager } from "../../../lib/utils/SettingsManager";
   import { LogController } from "../../../lib/controllers/LogController";
   import Divider from "../Divider.svelte";
-  import { dbFilters, gridType, theme } from "../../../stores/AppState";
+  import { dbFilters, gridType, optionsSize, theme } from "../../../stores/AppState";
   import Spacer from "../../layout/Spacer.svelte";
   import PaddedScrollContainer from "../../layout/PaddedScrollContainer.svelte";
 
@@ -51,7 +51,7 @@
   }
 </script>
 
-<Pane minSize={15} size={16}>
+<Pane minSize={15} size={$optionsSize}>
   <div class="inner">
     <SectionTitle title="Options" />
 

diff --git a/src/components/core/games/Games.svelte b/src/components/core/games/Games.svelte
@@ -2,7 +2,7 @@
   import { onDestroy, onMount } from "svelte";
   import { Pane } from "svelte-splitpanes";
   import type { Unsubscriber } from "svelte/store";
-  import { Platforms, currentPlatform, hiddenGameIds, loadingGames, manualSteamGames, nonSteamGames, renderGamesInList, showHidden, steamGames } from "../../../stores/AppState";
+  import { Platforms, currentPlatform, gamesSize, hiddenGameIds, loadingGames, manualSteamGames, nonSteamGames, renderGamesInList, showHidden, steamGames } from "../../../stores/AppState";
   import SearchBar from "../../interactables/SearchBar.svelte";
   import Toggle from "../../interactables/Toggle.svelte";
   import SectionTitle from "../SectionTitle.svelte";
@@ -143,7 +143,7 @@
 
 <svelte:window on:keydown={overwriteCtrlF} />
 
-<Pane minSize={20}>
+<Pane minSize={20} size={$gamesSize}>
   <SectionTitle title="Games" />
 
   <div class="content">

diff --git a/src/components/core/grids/Grids.svelte b/src/components/core/grids/Grids.svelte
@@ -5,7 +5,7 @@
   import type { Unsubscriber } from "svelte/store";
   import { AppController } from "../../../lib/controllers/AppController";
   import type { SGDBGame, SGDBImage } from "../../../lib/models/SGDB";
-  import { dbFilters, gridType, GridTypes, isOnline, needsSGDBAPIKey, selectedGameAppId, selectedGameName, steamGridDBKey, type DBFilters, currentPlatform, selectedSteamGridGameId, steamGridSearchCache, Platforms, selectedResultPage, appLibraryCache, manualSteamGames, customGameNames, steamGames, nonSteamGames } from "../../../stores/AppState";
+  import { dbFilters, gridType, GridTypes, isOnline, needsSGDBAPIKey, selectedGameAppId, selectedGameName, steamGridDBKey, type DBFilters, currentPlatform, selectedSteamGridGameId, steamGridSearchCache, Platforms, selectedResultPage, appLibraryCache, manualSteamGames, customGameNames, steamGames, nonSteamGames, gridsSize } from "../../../stores/AppState";
   import SectionTitle from "../SectionTitle.svelte";
   import Grid from "./Grid.svelte";
   import DropDown from "../../interactables/DropDown.svelte";
@@ -258,7 +258,7 @@
 
 <svelte:window on:resize={debouncedWidthUpdate} />
 
-<Pane minSize={20}>
+<Pane minSize={20} size={$gridsSize}>
   <div class="inner">
     <SectionTitle title="Grids" />
 

diff --git a/src/lib/controllers/AppController.ts b/src/lib/controllers/AppController.ts
@@ -20,7 +20,7 @@ import { ToastController } from "./ToastController";
 import { SettingsManager } from "../utils/SettingsManager";
 import { LogController } from "./LogController";
 import { get } from "svelte/store";
-import { GridTypes, Platforms, activeUserId, appLibraryCache, canSave, currentPlatform, customGameNames, dbFilters, gridType, hiddenGameIds, isOnline, loadingGames, manualSteamGames, needsSGDBAPIKey, needsSteamKey, nonSteamGames, originalAppLibraryCache, originalLogoPositions, originalSteamShortcuts, renderGamesInList, selectedGameAppId, selectedGameName, showHidden, steamGames, steamGridDBKey, steamKey, steamLogoPositions, steamShortcuts, steamUsers, theme } from "../../stores/AppState";
+import { GridTypes, Platforms, activeUserId, appLibraryCache, canSave, currentPlatform, customGameNames, dbFilters, gamesSize, gridType, gridsSize, hiddenGameIds, isOnline, loadingGames, manualSteamGames, needsSGDBAPIKey, needsSteamKey, nonSteamGames, optionsSize, originalAppLibraryCache, originalLogoPositions, originalSteamShortcuts, renderGamesInList, selectedGameAppId, selectedGameName, showHidden, steamGames, steamGridDBKey, steamKey, steamLogoPositions, steamShortcuts, steamUsers, theme } from "../../stores/AppState";
 import { cleanConflicts, gameSearchModalCancel, gameSearchModalDefault, gameSearchModalSelect, gridModalInfo, showCleanConflictDialog, showGameSearchModal, showGridModal, showSettingsModal } from "../../stores/Modals";
 import { CacheController } from "./CacheController";
 import { RustInterop } from "./RustInterop";
@@ -73,6 +73,10 @@ export class AppController {
     showHidden.set(settings.showHiddenGames);
     dbFilters.set(settings.filters);
 
+    optionsSize.set(settings.panels.options);
+    gamesSize.set(settings.panels.games);
+    gridsSize.set(settings.panels.grids);
+
     await findSteamPath(settings.steamInstallPath);
 
     const users = await RustInterop.getSteamUsers();

diff --git a/src/lib/utils/SettingsManager.ts b/src/lib/utils/SettingsManager.ts
@@ -32,7 +32,12 @@ const DEFAULT_SETTINGS = `{
   "theme": 0,
   "gameViewType": 0,
   "showHiddenGames": false,
-  "filters": ${JSON.stringify(DEFAULT_FILTERS, null, "\t")}
+  "filters": ${JSON.stringify(DEFAULT_FILTERS, null, "\t")},
+  "panels": {
+    "options": 16,
+    "games": 42,
+    "grids": 42
+  }
 }`;
 
 /**

diff --git a/src/stores/AppState.ts b/src/stores/AppState.ts
@@ -32,6 +32,9 @@ export enum Theme {
 
 export const theme = writable(Theme.DARK);
 export const renderGamesInList = writable(false);
+export const optionsSize = writable(16);
+export const gamesSize = writable(42);
+export const gridsSize = writable(42);
 
 export const requestTimeoutLength = writable(5000);
 

diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -16,7 +16,12 @@ type AppSettings = {
   theme: number,
   gameViewType: number,
   showHiddenGames: boolean,
-  filters: any
+  filters: any,
+  panels: {
+    options: number,
+    games: number,
+    grids: number
+  }
 };
 
 type LibraryCacheEntry = {

diff --git a/src/windows/main/Main.svelte b/src/windows/main/Main.svelte
@@ -3,7 +3,7 @@
 	import { SvelteToast } from "@zerodevx/svelte-toast";
 	import { onDestroy, onMount } from "svelte";
 	import Titlebar from "../../components/Titlebar.svelte";
-	import { Splitpanes } from "svelte-splitpanes";
+	import { Splitpanes, type IPaneSizingEvent } from "svelte-splitpanes";
 	import Footer from "../../components/Footer.svelte";
 	import Options from "../../components/core/filters/Options.svelte";
 	import Games from "../../components/core/games/Games.svelte";
@@ -56,6 +56,17 @@
     LogController.error(`MainWindow: ${message} in ${fileName} at ${lineNumber}:${columnNumber}.`);
   }
 
+  async function handlePanelResize(event: CustomEvent<IPaneSizingEvent[]>) {
+    console.log("Resize event:", event);
+    if (event.detail) {
+      await SettingsManager.updateSetting("panels", {
+        "options": event.detail[0].size,
+        "games": event.detail[1].size,
+        "grids": event.detail[2].size
+      })
+    }
+  }
+
 	onMount(async () => {
     window.addEventListener("error", onError);
 
@@ -167,7 +178,7 @@
     {#if $showUpdateModal}
       <UpdateModal />
     {/if}
-		<Splitpanes>
+		<Splitpanes dblClickSplitter={false} on:resized={handlePanelResize}>
 			<Options />
 
 			<Games />