refactor: view_store for persistant quib view

Author: stabldev

frontend/src/lib/components/quib.svelte

@@ -64,7 +64,7 @@
       </p>
     {:else}
       <img
-        class="relative rounded-2xl outline outline-1 outline-offset-[-1px] outline-base-content/15"
+        class="rounded-2xl inner-border inner-border-base-content/15"
         src={quib.cover}
         alt=""
       />

frontend/src/lib/components/quibs_header.svelte

@@ -6,13 +6,16 @@
   import RocketIcon from '$lib/components/icons/rocket.svelte';
   import TopIcon from '$lib/components/icons/top.svelte';
   import { cn } from '$lib/functions/classnames';
+  import { createViewStore } from '$lib/stores/view.svelte';
 
-  let active_mapping = $state<{
+  const viewStore = createViewStore();
+
+  let active_mapping = $derived<{
     filter: keyof typeof mapping.filters;
     view: keyof typeof mapping.view;
   }>({
     filter: 'best',
-    view: 'card'
+    view: viewStore.state
   });
 
   const mapping = {
@@ -25,11 +28,11 @@
     view: {
       card: {
         icon: CardIcon,
-        onclick: () => (active_mapping.view = 'card')
+        onclick: () => viewStore.update('card')
       },
       compact: {
         icon: CompactIcon,
-        onclick: () => (active_mapping.view = 'compact')
+        onclick: () => viewStore.update('compact')
       }
     }
   };

frontend/src/lib/stores/view.svelte.ts

@@ -0,0 +1,29 @@
+import { browser } from '$app/environment';
+
+type ViewState = 'card' | 'compact';
+
+const default_view: ViewState = 'card';
+
+const stored_view_state: ViewState = browser
+  ? ((localStorage.getItem('view') as ViewState) ?? default_view)
+  : default_view;
+
+let view_state = $state<ViewState>(stored_view_state);
+
+$effect.root(() => {
+  $effect(() => {
+    // auto sync to localStorage on state update
+    localStorage.setItem('view', view_state);
+  });
+});
+
+export function createViewStore() {
+  return {
+    get state() {
+      return view_state;
+    },
+    update(view: ViewState) {
+      view_state = view;
+    }
+  };
+}