feat(web): TrackMenu overflow + FlagPopover for the quarantine flow

2026-04-30 20:29:07 -04:00
parent b653e83478
commit 8da4a3f9c0
4 changed files with 310 additions and 0 deletions
@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { MoreVertical, Flag } from 'lucide-svelte';
+  import FlagPopover from './FlagPopover.svelte';
+  import type { TrackRef } from '$lib/api/types';
+
+  let { track }: { track: TrackRef } = $props();
+
+  let menuOpen = $state(false);
+  let popoverOpen = $state(false);
+
+  function toggleMenu(e: MouseEvent) {
+    e.stopPropagation();
+    menuOpen = !menuOpen;
+  }
+
+  function openFlag() {
+    menuOpen = false;
+    popoverOpen = true;
+  }
+
+  function closeAll() {
+    menuOpen = false;
+    popoverOpen = false;
+  }
+</script>
+
+<svelte:window
+  onclick={() => (menuOpen = false)}
+  onkeydown={(e) => e.key === 'Escape' && closeAll()}
+/>
+
+<div class="relative inline-block">
+  <button
+    type="button"
+    aria-label={`Track actions for ${track.title}`}
+    aria-haspopup="menu"
+    aria-expanded={menuOpen}
+    onclick={toggleMenu}
+    class="rounded p-1 text-text-muted hover:text-text-primary"
+  >
+    <MoreVertical size={16} strokeWidth={1} />
+  </button>
+
+  {#if menuOpen}
+    <div
+      role="menu"
+      class="absolute right-0 z-20 mt-1 w-48 rounded-md border border-border bg-surface p-1 shadow-lg"
+      onclick={(e) => e.stopPropagation()}
+    >
+      <button
+        type="button"
+        role="menuitem"
+        onclick={openFlag}
+        class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm text-text-primary hover:bg-surface-hover"
+      >
+        <Flag size={14} strokeWidth={1} />
+        Flag this track…
+      </button>
+    </div>
+  {/if}
+
+  {#if popoverOpen}
+    <FlagPopover {track} onClose={closeAll} />
+  {/if}
+</div>