return to last page viewed when opening app again

package.json

@@ -36,6 +36,7 @@
   "dependencies": {
     "bootstrap-icons": "^1.10.4",
     "eva-icons": "^1.1.3",
+    "idb-keyval": "^6.2.1",
     "nanoid": "^4.0.2",
     "navaid": "^1.2.0",
     "regexparam": "^2.0.1",

pnpm-lock.yaml

@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
   bootstrap-icons:
     specifier: ^1.10.4
@@ -7,6 +11,9 @@ dependencies:
   eva-icons:
     specifier: ^1.1.3
     version: 1.1.3
+  idb-keyval:
+    specifier: ^6.2.1
+    version: 6.2.1
   nanoid:
     specifier: ^4.0.2
     version: 4.0.2
@@ -686,6 +693,10 @@ packages:
       function-bind: 1.1.1
     dev: true
 
+  /idb-keyval@6.2.1:
+    resolution: {integrity: sha512-8Sb3veuYCyrZL+VBt9LJfZjLUPWVvqn8tG28VqYNFCo43KHcKuq+b4EiXGeuaLAQWL2YmyDgMp2aSpH9JHsEQg==}
+    dev: false
+
   /ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
     dev: false

src/App.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
-  import { currentRoute } from "./lib/router";
+  import { setRouteToLastPagePromise, currentRoute } from "./lib/router";
 </script>
 
 <main>
-  <svelte:component this={$currentRoute.component} {...$currentRoute.params} />
+  {#await setRouteToLastPagePromise then}
+    <svelte:component
+      this={$currentRoute.component}
+      {...$currentRoute.params}
+    />
+  {/await}
 </main>
 
 <style>

src/lib/idbValStore.ts

@@ -0,0 +1,14 @@
+import { get, set } from "idb-keyval";
+
+export default class IdbValStore<T> {
+  name: string;
+  constructor(name: string) {
+    this.name = name;
+  }
+  get(): Promise<T | undefined> {
+    return get<T>(this.name);
+  }
+  set(val: T): Promise<void> {
+    return set(this.name, val);
+  }
+}

src/lib/router.ts

@@ -1,5 +1,6 @@
 import navaid from "navaid";
 import { writable } from "svelte/store";
+import { inject } from "regexparam";
 
 import ChooseWorld from "../views/ChooseWorld.svelte";
 import CreateWorld from "../views/CreateWorld.svelte";
@@ -8,8 +9,11 @@ import NotFound from "../views/NotFound.svelte";
 import Page from "../views/Page.svelte";
 import ShareWorld from "../views/ShareWorld.svelte";
 import { routes } from "./routes";
+import IdbValStore from "./idbValStore";
 
-export let currentRoute = writable<{
+export const lastPageStore = new IdbValStore("schreiben-last-page");
+
+export const currentRoute = writable<{
   // XXX: in lack of a better type for Svelte components
   component: any;
   params?: Record<string, string>;
@@ -34,4 +38,14 @@ router.on(routes.Page, (params) =>
   currentRoute.set({ component: Page, params })
 );
 
+async function setRouteToLastPage() {
+  if (location.pathname === "/") {
+    const lastPage = await lastPageStore.get();
+    if (lastPage) {
+      router.route(inject(routes.Page, lastPage), true);
+    }
+  }
+}
+export const setRouteToLastPagePromise = setRouteToLastPage();
+
 router.listen();

src/views/Page.svelte

@@ -5,6 +5,7 @@
   import { getWorldPage, getWorldY, type WorldY } from "../lib/doc";
   import { routes } from "../lib/routes";
   import { loadWorlds } from "../lib/worldStorage";
+  import { lastPageStore } from "../lib/router";
 
   export let worldId: string;
   export let pageId: string;
@@ -32,6 +33,11 @@
       })
       .catch((error) => (state = { error }));
   }
+
+  async function saveLastPage() {
+    await lastPageStore.set({ worldId, pageId });
+  }
+  saveLastPage();
 </script>
 
 <nav>