From e266a0f2dc312708fb5254c5edf0d84c6b8a95c0 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 9 May 2026 20:20:43 -0400
Subject: [PATCH] feat(web): wire RowActionsMenu in requests + quarantine
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Requests: primary Approve, secondary [Override, Reject].
Quarantine: primary Resolve, secondary [Play, Delete file]; the
Delete-via-Lidarr conditional stays inline above md (preserves the
disabled-with-tooltip semantics) and hides below md to avoid
crowding — the operator can still trigger it from the desktop view.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 web/src/routes/admin/quarantine/+page.svelte | 39 +++++---------------
 web/src/routes/admin/requests/+page.svelte   | 36 ++++--------------
 2 files changed, 17 insertions(+), 58 deletions(-)

diff --git a/web/src/routes/admin/quarantine/+page.svelte b/web/src/routes/admin/quarantine/+page.svelte
index 6e369b88..e1645999 100644
--- a/web/src/routes/admin/quarantine/+page.svelte
+++ b/web/src/routes/admin/quarantine/+page.svelte
@@ -2,6 +2,7 @@
   import { pageTitle } from '$lib/branding';
   import { Music2, RotateCcw, Trash2, Cloud, Play, ChevronRight } from 'lucide-svelte';
   import { useQueryClient } from '@tanstack/svelte-query';
+  import RowActionsMenu, { type RowAction } from '$lib/components/RowActionsMenu.svelte';
   import {
     createAdminQuarantineQuery,
     resolveQuarantine,
@@ -258,41 +259,19 @@
           </div>
 
           <!-- Action cluster -->
+          {@const primary: RowAction = { icon: RotateCcw, label: 'Resolve', onclick: () => onResolve(r) }}
+          {@const secondary: RowAction[] = [
+            { icon: Play, label: 'Play', onclick: () => onPlay(r) },
+            { icon: Trash2, label: 'Delete file', onclick: () => openDeleteFile(r), danger: true }
+          ]}
           <div class="flex shrink-0 items-center gap-2">
-            <button
-              type="button"
-              aria-label={`Play ${r.track_title}`}
-              class="inline-flex items-center justify-center rounded-md p-2 text-accent hover:bg-accent-tint"
-              onclick={() => onPlay(r)}
-            >
-              <Play size={16} strokeWidth={2} />
-            </button>
-
-            <button
-              type="button"
-              aria-label={`Resolve ${r.track_title}`}
-              class="inline-flex items-center gap-1 rounded-md border border-border bg-transparent px-3 py-1.5 text-sm text-text-secondary hover:text-text-primary hover:bg-surface-hover"
-              onclick={() => onResolve(r)}
-            >
-              <RotateCcw size={14} strokeWidth={1.5} />
-              Resolve
-            </button>
-
-            <button
-              type="button"
-              aria-label={`Delete file for ${r.track_title}`}
-              class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
-              onclick={() => openDeleteFile(r)}
-            >
-              <Trash2 size={14} strokeWidth={2} />
-              Delete file
-            </button>
+            <RowActionsMenu {primary} {secondary} />
 
             {#if lidarrDisabled}
               <span
                 aria-label={`Delete via Lidarr disabled for ${r.track_title}`}
                 title="Local-only track — no Lidarr album to remove."
-                class="inline-flex items-center gap-1 rounded-md bg-action-destructive px-3 py-1.5 text-sm text-action-fg opacity-50 cursor-not-allowed"
+                class="hidden md:inline-flex items-center gap-1 rounded-md bg-action-destructive px-3 py-1.5 text-sm text-action-fg opacity-50 cursor-not-allowed"
                 data-testid="delete-lidarr-disabled"
               >
                 <Trash2 size={14} strokeWidth={2} />
@@ -303,7 +282,7 @@
               <button
                 type="button"
                 aria-label={`Delete via Lidarr for ${r.track_title}`}
-                class="inline-flex items-center gap-1 rounded-md bg-action-destructive px-3 py-1.5 text-sm text-action-fg"
+                class="hidden md:inline-flex items-center gap-1 rounded-md bg-action-destructive px-3 py-1.5 text-sm text-action-fg"
                 onclick={() => openDeleteLidarr(r)}
               >
                 <Trash2 size={14} strokeWidth={2} />
diff --git a/web/src/routes/admin/requests/+page.svelte b/web/src/routes/admin/requests/+page.svelte
index 0742cceb..cf55868a 100644
--- a/web/src/routes/admin/requests/+page.svelte
+++ b/web/src/routes/admin/requests/+page.svelte
@@ -2,6 +2,7 @@
   import { pageTitle } from '$lib/branding';
   import { Disc3, Album, Music2, Check, X, SlidersHorizontal } from 'lucide-svelte';
   import { useQueryClient } from '@tanstack/svelte-query';
+  import RowActionsMenu, { type RowAction } from '$lib/components/RowActionsMenu.svelte';
   import {
     createAdminRequestsQuery,
     createQualityProfilesQuery,
@@ -246,34 +247,13 @@
           </div>
 
           {#if r.status === 'pending'}
-            <div class="flex shrink-0 items-center gap-2">
-              <button
-                type="button"
-                aria-label={`Override ${rowAccessibleName(r)}`}
-                class="inline-flex items-center gap-1 rounded-md border border-border bg-transparent px-3 py-1.5 text-sm text-text-secondary hover:text-text-primary hover:bg-surface-hover"
-                onclick={() => openOverride(r)}
-              >
-                <SlidersHorizontal size={14} strokeWidth={1.5} />
-                Override
-              </button>
-              <button
-                type="button"
-                aria-label={`Approve ${rowAccessibleName(r)}`}
-                class="inline-flex items-center gap-1 rounded-md bg-action-primary px-3 py-1.5 text-sm text-action-fg"
-                onclick={() => onApprove(r)}
-              >
-                <Check size={14} strokeWidth={2} />
-                Approve
-              </button>
-              <button
-                type="button"
-                aria-label={`Reject ${rowAccessibleName(r)}`}
-                class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
-                onclick={() => openReject(r)}
-              >
-                <X size={14} strokeWidth={2} />
-                Reject
-              </button>
+            {@const primary: RowAction = { icon: Check, label: 'Approve', onclick: () => onApprove(r) }}
+            {@const secondary: RowAction[] = [
+              { icon: SlidersHorizontal, label: 'Override', onclick: () => openOverride(r) },
+              { icon: X, label: 'Reject', onclick: () => openReject(r), danger: true }
+            ]}
+            <div class="shrink-0">
+              <RowActionsMenu {primary} {secondary} />
             </div>
           {/if}
         </li>