fix: global sidebar_state and reactivity

Author: stabldev

frontend/src/lib/components/sidebar.svelte

@@ -5,8 +5,6 @@
   import { createSidebarStore } from '$lib/stores/sidebar.svelte';
 
   const sidebarStore = createSidebarStore();
-
-  $inspect(sidebarStore.state);
 </script>
 
 <div
@@ -59,7 +57,7 @@
         {/each}
       </div>
     {:else}
-      <span class="text-sm font-medium">quite! check some.</span>
+      <span class="text-sm font-medium">Just in—take a peek.</span>
     {/if}
   </div>
   <div class="collapse gap-2 overflow-visible rounded-none">
@@ -87,7 +85,7 @@
         {/each}
       </div>
     {:else}
-      <span class="text-sm font-medium">join some.</span>
+      <span class="text-sm font-medium">Ready to quibble? Join in.</span>
     {/if}
   </div>
   <div class="collapse gap-2 overflow-visible rounded-none">

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

@@ -8,38 +8,38 @@ type IQuiblets = {
   starred: boolean;
 }[];
 
-export function createSidebarStore() {
-  const stored_sidebar_store = browser ? localStorage.getItem('sidebar_store') : null;
+const stored_sidebar_store = browser ? localStorage.getItem('sidebar_store') : null;
 
-  const parsed_stored_quiblets: ISidebarStore = stored_sidebar_store
-    ? JSON.parse(stored_sidebar_store)
-    : {};
+const parsed_stored_quiblets: ISidebarStore = stored_sidebar_store
+  ? JSON.parse(stored_sidebar_store)
+  : {};
 
-  const sidebar_state = $state<ISidebarStore>(
-    // sort initial data
-    Object.fromEntries(
-      Object.entries(parsed_stored_quiblets).map(([key, quiblets]) => [
-        key,
-        sort_quiblets(quiblets)
-      ])
-    )
-  );
+const sidebar_state = $state<ISidebarStore>(
+  // sort initial data
+  Object.fromEntries(
+    Object.entries(parsed_stored_quiblets).map(([key, quiblets]) => [
+      key,
+      sort_quiblets(quiblets)
+    ])
+  )
+);
 
-  function sync_localstorage() {
-    if (browser) {
-      localStorage.setItem('sidebar_store', JSON.stringify(sidebar_state));
-    }
+function sync_localstorage() {
+  if (browser) {
+    localStorage.setItem('sidebar_store', JSON.stringify(sidebar_state));
   }
+}
 
-  function sort_quiblets(quiblets: IQuiblets) {
-    return [...quiblets].sort((a, b) => {
-      if (a.starred !== b.starred) {
-        return b.starred ? 1 : -1;
-      }
-      return a.name.localeCompare(b.name);
-    });
-  }
+function sort_quiblets(quiblets: IQuiblets) {
+  return [...quiblets].sort((a, b) => {
+    if (a.starred !== b.starred) {
+      return b.starred ? 1 : -1;
+    }
+    return a.name.localeCompare(b.name);
+  });
+}
 
+export function createSidebarStore() {
   return {
     get state() {
       return sidebar_state;
@@ -57,6 +57,10 @@ export function createSidebarStore() {
       if (exists) return;
 
       sidebar_state[type] = sort_quiblets([...state, quiblet]);
+      // sidebar_state = {
+      //   ...sidebar_state,
+      //   [type]: sort_quiblets([...state, quiblet])
+      // }
       sync_localstorage();
     },
     toggle_star(name: string, type: string) {