fix(frontend): restore outside-click dismiss, collapse story groups by default

frontend/src/lib/components/stories/AllStoriesArchive.svelte

@@ -32,6 +32,7 @@
   let groups = $state<Group[]>([]);
   let loading = $state(false);
   const previews = $state<Record<number, string | null>>({});
+  const expanded = $state<Record<number, boolean>>({});
   let token = 0;
 
   let viewerOpen = $state(false);
@@ -110,12 +111,17 @@
       for (const key of Object.keys(previews)) {
         delete previews[Number(key)];
       }
+      for (const key of Object.keys(expanded)) {
+        delete expanded[Number(key)];
+      }
       load().catch(() => undefined);
     });
   });
 
   $effect(() => {
-    const list = groups.flatMap((group) => group.stories);
+    const list = groups
+      .filter((group) => expanded[group.peerId])
+      .flatMap((group) => group.stories);
     let active = true;
     untrack(() => {
       for (const item of list) {
@@ -156,6 +162,10 @@
     viewerIndex = index;
     viewerOpen = true;
   }
+
+  function toggle(peerId: number) {
+    expanded[peerId] = !expanded[peerId];
+  }
 </script>
 
 {#if groups.length === 0}
@@ -168,6 +178,12 @@
   {#each groups as group (group.peerId)}
     <section class="group">
       <header class="group-head">
+        <button
+          type="button"
+          class="group-toggle"
+          aria-expanded={Boolean(expanded[group.peerId])}
+          onclick={() => toggle(group.peerId)}
+        >
           <Avatar
             name={group.name}
             colorKey={group.peerId}
@@ -177,6 +193,10 @@
           />
           <span class="group-name">{group.name}</span>
           <span class="group-count">{group.stories.length}</span>
+          <span class="chevron" class:open={expanded[group.peerId]}>
+            <Icon name="down" size="1.25rem" />
+          </span>
+        </button>
         <Button
           variant="translucent"
           round
@@ -188,6 +208,7 @@
           <Icon name="cloud-download" />
         </Button>
       </header>
+      {#if expanded[group.peerId]}
         <div class="grid">
           {#each group.stories as item, index (item.story_id)}
             <button
@@ -220,6 +241,7 @@
             </button>
           {/each}
         </div>
+      {/if}
     </section>
   {/each}
 
@@ -249,6 +271,31 @@
     padding: 0.625rem 0.75rem;
   }
 
+  .group-toggle {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: 0.625rem;
+
+    min-width: 0;
+    padding: 0;
+    border: 0;
+
+    text-align: left;
+    cursor: pointer;
+    background: transparent;
+  }
+
+  .chevron {
+    display: flex;
+    color: var(--color-text-secondary);
+    transition: transform 0.2s ease;
+
+    &.open {
+      transform: rotate(180deg);
+    }
+  }
+
   .group-name {
     flex: 1;
     overflow: hidden;

frontend/src/lib/components/ui/ContextMenu.svelte

@@ -1,3 +1,9 @@
+<script lang="ts" module>
+  type PointerHandler = (event: PointerEvent) => void;
+
+  const claimed = new WeakSet<Event>();
+</script>
+
 <script lang="ts">
   import { ContextMenu } from "bits-ui";
   import type { Snippet } from "svelte";
@@ -9,8 +15,6 @@
 
   const { children, menu }: Props = $props();
 
-  type PointerHandler = (event: PointerEvent) => void;
-
   let open = $state(false);
   let suppressClick = false;
 
@@ -21,7 +25,10 @@
       ...props,
       onpointerdown(event: PointerEvent) {
         suppressClick = false;
-        event.stopPropagation();
+        if (claimed.has(event)) {
+          return;
+        }
+        claimed.add(event);
         onpointerdown(event);
       },
       onpointerup(event: PointerEvent) {