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,15 +178,25 @@
   {#each groups as group (group.peerId)}
     <section class="group">
       <header class="group-head">
-        <Avatar
+        <button
-          name={group.name}
+          type="button"
-          colorKey={group.peerId}
+          class="group-toggle"
-          size={2}
+          aria-expanded={Boolean(expanded[group.peerId])}
-          avatar={{ kind: group.kind, id: group.peerId }}
+          onclick={() => toggle(group.peerId)}
-          hasAvatar={group.hasAvatar}
+        >
-        />
+          <Avatar
-        <span class="group-name">{group.name}</span>
+            name={group.name}
-        <span class="group-count">{group.stories.length}</span>
+            colorKey={group.peerId}
+            size={2}
+            avatar={{ kind: group.kind, id: group.peerId }}
+            hasAvatar={group.hasAvatar}
+          />
+          <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,38 +208,40 @@
           <Icon name="cloud-download" />
         </Button>
       </header>
-      <div class="grid">
+      {#if expanded[group.peerId]}
-        {#each group.stories as item, index (item.story_id)}
+        <div class="grid">
-          <button
+          {#each group.stories as item, index (item.story_id)}
-            type="button"
+            <button
-            class="tile"
+              type="button"
-            class:expired={item.deleted}
+              class="tile"
-            onclick={() => openViewer(group, index)}
+              class:expired={item.deleted}
-          >
+              onclick={() => openViewer(group, index)}
-            {#if previews[item.story_id]}
+            >
-              {#if item.media_kind === "video"}
+              {#if previews[item.story_id]}
-                <video
+                {#if item.media_kind === "video"}
-                  src={previews[item.story_id]}
+                  <video
-                  muted
+                    src={previews[item.story_id]}
-                  playsinline
+                    muted
-                  preload="metadata"
+                    playsinline
-                  use:poster
+                    preload="metadata"
-                ></video>
+                    use:poster
-                <span class="play"><Icon name="play" size="1.5rem" /></span>
+                  ></video>
+                  <span class="play"><Icon name="play" size="1.5rem" /></span>
+                {:else}
+                  <img src={previews[item.story_id]} alt="">
+                {/if}
               {:else}
-                <img src={previews[item.story_id]} alt="">
+                <span class="ph"><Icon name="play-story" /></span>
               {/if}
-            {:else}
+              {#if item.views}
-              <span class="ph"><Icon name="play-story" /></span>
+                <span class="badge views">
-            {/if}
+                  <Icon name="eye" size="0.875rem" />{item.views}
-            {#if item.views}
+                </span>
-              <span class="badge views">
+              {/if}
-                <Icon name="eye" size="0.875rem" />{item.views}
+            </button>
-              </span>
+          {/each}
-            {/if}
+        </div>
-          </button>
+      {/if}
-        {/each}
-      </div>
     </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) {