Pass current state to peek modals when opening them via query param

packages/client/src/components/Router.svelte

@@ -1,8 +1,9 @@
 <script>
-  import { setContext, getContext } from "svelte"
+  import { setContext, getContext, onMount } from "svelte"
   import Router, { querystring } from "svelte-spa-router"
-  import { routeStore } from "stores"
+  import { routeStore, stateStore } from "stores"
   import Screen from "./Screen.svelte"
+  import { get } from "svelte/store"
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")
@@ -17,15 +18,17 @@
   }
 
   // Keep query params up to date
-  $: {
+  $: routeStore.actions.setQueryParams(parseQueryString($querystring))
+
+  const parseQueryString = query => {
     let queryParams = {}
-    if ($querystring) {
-      const urlSearchParams = new URLSearchParams($querystring)
+    if (query) {
+      const urlSearchParams = new URLSearchParams(query)
       for (const [key, value] of urlSearchParams) {
         queryParams[key] = value
       }
     }
-    routeStore.actions.setQueryParams(queryParams)
+    return queryParams
   }
 
   const getRouterConfig = routes => {
@@ -42,6 +45,19 @@
   const onRouteLoading = ({ detail }) => {
     routeStore.actions.setActiveRoute(detail.route)
   }
+
+  // Initialise state store from query string on initial load
+  onMount(() => {
+    const queryParams = parseQueryString(get(querystring))
+    if (queryParams.state) {
+      try {
+        const state = JSON.parse(atob(queryParams.state))
+        stateStore.actions.initialise(state)
+      } catch (error) {
+        // Swallow error and do nothing
+      }
+    }
+  })
 </script>
 
 {#key config.id}

packages/client/src/stores/peek.js

@@ -1,4 +1,5 @@
-import { writable } from "svelte/store"
+import { writable, get } from "svelte/store"
+import { stateStore } from "./state.js"
 
 const initialState = {
   showPeek: false,
@@ -14,7 +15,10 @@ const createPeekStore = () => {
     let href = url
     let external = !url.startsWith("/")
     if (!external) {
-      href = `${window.location.href.split("#")[0]}#${url}?peek=true`
+      const state = get(stateStore)
+      const serialised = encodeURIComponent(btoa(JSON.stringify(state)))
+      const query = `peek=true&state=${serialised}`
+      href = `${window.location.href.split("#")[0]}#${url}?${query}`
     }
     store.set({
       showPeek: true,

packages/client/src/stores/state.js

@@ -34,6 +34,9 @@ const createStateStore = () => {
     })
   }
 
+  // Initialises the temporary state store with a certain value
+  const initialise = tempStore.set
+
   // Derive the combination of both persisted and non persisted stores
   const store = derived(
     [tempStore, persistentStore],
@@ -47,7 +50,7 @@ const createStateStore = () => {
 
   return {
     subscribe: store.subscribe,
-    actions: { setValue, deleteValue },
+    actions: { setValue, deleteValue, initialise },
   }
 }