feat: added focus indication to windows

Tormak9970 · Apr 10, 2023 · efa8fb9 · efa8fb9
1 parent e2f1fba
commit efa8fb9
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 25 deletions.
diff --git a/src/Stores.ts b/src/Stores.ts
@@ -20,8 +20,6 @@ export enum GridTypes {
   ICON="Icon"
 }
 
-export const focusedWindow = sharedStore("main", "focusedWindow");
-
 export const needsSGDBAPIKey = sharedStore(true, "needsSGDBAPIKey");
 export const needsSteamKey = sharedStore(true, "needsSteamKey");
 

diff --git a/src/lib/controllers/AppController.ts b/src/lib/controllers/AppController.ts
@@ -206,9 +206,9 @@ export class AppController {
     const res = await http.fetch<any>(`http://api.steampowered.com/IPlayerService/GetOwnedGames/v0001/?key=${get(steamKey)}&steamid=${bUserId}&format=json&include_appinfo=true&include_played_free_games=true`);
 
     if (res.ok) {
-      return Object.entries(res.data.response).map(([appid, game]: [any, any]) => {
+      return res.data.response.games.map((game: any) => {
         return {
-          "appid": appid,
+          "appid": game.appid,
           "name": game.name
         }
       }).sort((gameA: SteamGame, gameB: SteamGame) => gameA.name.localeCompare(gameB.name));

diff --git a/src/lib/controllers/WindowController.ts b/src/lib/controllers/WindowController.ts
@@ -18,14 +18,13 @@
 
 import { WebviewWindow } from "@tauri-apps/api/window";
 import { LogController } from "./LogController";
-import { focusedWindow } from "../../Stores";
 
 /**
  * Controller class for managing app windows.
  */
 export class WindowController {
-  private static mainWindow = WebviewWindow.getByLabel('main');
-  private static settingsWindow = WebviewWindow.getByLabel('settings');
+  static mainWindow = WebviewWindow.getByLabel('main');
+  static settingsWindow = WebviewWindow.getByLabel('settings');
 
   /**
    * Closes the window with the provided label.
@@ -47,7 +46,6 @@ export class WindowController {
     LogController.log("Opening settings window.");
     await this.settingsWindow.show();
     await this.settingsWindow.setFocus();
-    focusedWindow.set("settings");
   }
 
   /**
@@ -57,6 +55,5 @@ export class WindowController {
   static async closeSettingsWindow(): Promise<void> {
     LogController.log("Closing settings window.");
     await this.settingsWindow.hide();
-    focusedWindow.set("main");
   }
 }
diff --git a/src/windows/main/Main.svelte b/src/windows/main/Main.svelte
@@ -10,11 +10,19 @@
 	import Grids from "../../components/core/grids/Grids.svelte";
   import { AppController } from "../../lib/controllers/AppController";
   import { exit } from "@tauri-apps/api/process";
-  import { activeUserId, focusedWindow, isOnline } from "../../Stores";
+  import { activeUserId, isOnline } from "../../Stores";
   import { ToastController } from "../../lib/controllers/ToastController";
-    import { appWindow } from "@tauri-apps/api/window";
+	import { WindowController } from "../../lib/controllers/WindowController";
+	
+	let mainFocusUnsub: any;
+
+	let isFocused = false;
 
 	onMount(async () => {
+    mainFocusUnsub = await WindowController.mainWindow.onFocusChanged(({ payload: focused }) => {
+      isFocused = focused;
+    });
+
     await AppController.setup();
     
 		if (navigator.onLine) {
@@ -34,15 +42,15 @@
 
 	onDestroy(async () => {
 		await AppController.destroy();
+
+		if (mainFocusUnsub) mainFocusUnsub();
 	});
 </script>
 
-<svelte:window on:click={() => $focusedWindow = "main"} />
-
 <div class="wrap">
 	<SvelteToast target="top" options={{ initial: 0, intro: { y: -64 } }} />
 </div>
-<main class:dim={$focusedWindow != "main"}>
+<main class:dim={!isFocused}>
 	<Titlebar title="Steam Art Manager" />
 	<div class="content">
 		<Splitpanes>
@@ -70,6 +78,8 @@
 		align-items: center;
 
 		color: var(--font-color);
+
+		transition: opacity 0.1s ease-in-out;
 	}
 
 	.wrap {
@@ -102,6 +112,6 @@
 	}
 
 	.dim {
-		/* opacity: 0.7; */
+		opacity: 0.7;
 	}
 </style>
diff --git a/src/windows/settings/Settings.svelte b/src/windows/settings/Settings.svelte
@@ -1,27 +1,34 @@
 <script lang="ts">
   import { open } from "@tauri-apps/api/shell"
-  import { onMount } from "svelte";
-  import { focusedWindow, steamGridDBKey, steamKey } from "../../Stores";
+  import { onDestroy, onMount } from "svelte";
+  import { needsSGDBAPIKey, needsSteamKey, steamGridDBKey, steamKey } from "../../Stores";
 	import Titlebar from "../../components/Titlebar.svelte";
   import Button from "../../components/interactables/Button.svelte";
   import HorizontalSpacer from "../../components/spacers/HorizontalSpacer.svelte";
   import TextInput from "../../components/interactables/TextInput.svelte";
   import VerticalSpacer from "../../components/spacers/VerticalSpacer.svelte";
   import { LogController } from "../../lib/controllers/LogController";
   import { SettingsManager } from "../../lib/utils/SettingsManager";
+  import { WindowController } from "../../lib/controllers/WindowController";
+
+  let settingsFocusUnsub;
 
   let canSave = false;
+  let isFocused = false;
 
   let steamGridKey = "";
   let steamAPIKey = "";
 
 	async function saveSettings() {
     LogController.log("Saving settings...");
     
-    $steamGridDBKey = steamGridKey;
+    $steamGridDBKey = steamGridKey !== "" ? steamGridKey : $steamGridDBKey;
+    if ($steamGridDBKey !== "" && $needsSGDBAPIKey) $needsSGDBAPIKey = false;
+
     await SettingsManager.updateSetting("steamGridDbApiKey", steamGridKey);
     
-    $steamKey = steamAPIKey;
+    $steamKey = steamAPIKey !== "" ? steamAPIKey : $steamKey;
+    if ($steamKey !== "" && $needsSteamKey) $needsSteamKey = false;
     await SettingsManager.updateSetting("steamApiKey", steamAPIKey);
 
     LogController.log("Saved settings.");
@@ -68,17 +75,23 @@
     }
   }
 
-  onMount(() => {
+  onMount(async () => {
     steamGridKey = $steamGridDBKey;
     steamAPIKey = $steamKey;
 
-    SettingsManager.setSettingsPath();
+    settingsFocusUnsub = await WindowController.settingsWindow.onFocusChanged(({ payload: focused }) => {
+      isFocused = focused;
+    });
+
+    await SettingsManager.setSettingsPath();
   });
-</script>
 
-<svelte:window on:click={() => $focusedWindow = "settings"} />
+  onDestroy(() => {
+    if (settingsFocusUnsub) settingsFocusUnsub();
+  });
+</script>
 
-<div id="settings" class:dim={$focusedWindow != "settings"}>
+<div id="settings" class:dim={!isFocused}>
 	<Titlebar title="Settings" />
 	<div class="content">
     <VerticalSpacer />
@@ -138,6 +151,8 @@
 		align-items: center;
 
 		color: var(--font-color);
+
+    transition: opacity 0.1s ease-in-out;
 	}
 
 	.content {
@@ -188,6 +203,6 @@
   }
 
   .dim {
-    /* opacity: 0.7; */
+    opacity: 0.7;
   }
 </style>