use location hash to store current tab

iBicha · Jan 9, 2024 · 29969db · 29969db
1 parent 5335a02
commit 29969db
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/playlet-web/src/lib/BottomNavigation.svelte b/playlet-web/src/lib/BottomNavigation.svelte
@@ -7,7 +7,8 @@
   import RemoteIcon from "../assets/remote-control.svg.svelte";
 
   import { appStateStore } from "lib/Stores";
-  import type { AppState } from "lib/Types";
+  import { ScreenNames, type AppState } from "lib/Types";
+  import { onMount } from "svelte";
 
   function setScreen(screen: AppState["screen"]) {
     appStateStore.update((state) => {
@@ -20,6 +21,31 @@
       state.screen = screen;
       return state;
     });
+    setScreenNameInUrl(screen);
+  }
+
+  onMount(() => {
+    const screen = getScreenNameInUrl();
+    if (screen) {
+      setScreen(screen);
+    } else {
+      setScreenNameInUrl("home");
+    }
+  });
+
+  function getScreenNameInUrl(): AppState["screen"] | undefined {
+    const hash = window.location.hash;
+    if (hash) {
+      const screen = hash.substring(1) as AppState["screen"];
+      if (!ScreenNames.includes(screen)) {
+        return;
+      }
+      return screen;
+    }
+  }
+
+  function setScreenNameInUrl(screen: AppState["screen"]) {
+    window.location.hash = screen;
   }
 </script>
 

diff --git a/playlet-web/src/lib/Types.ts b/playlet-web/src/lib/Types.ts
@@ -1,3 +1,5 @@
+export const ScreenNames = ["search", "home", "bookmarks", "settings", "info", "remote"] as const;
+
 export type AppState = {
     screen: "search" | "home" | "bookmarks" | "settings" | "info" | "remote"
 }