From 1536860e5910c57b6b42d3be3d4babedef7a198e Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 9 May 2026 20:26:04 -0400
Subject: [PATCH] fix(web): move {@const} blocks to immediate children of
 {#each}

Svelte 5 requires {@const} to be a direct child of certain blocks
({#snippet}, {#if}, {#each}, etc.). Placing them inside <li>
bodies broke the build with const_tag_invalid_placement. Moved
the RowAction const declarations up so they sit between {#each}
and the <li> opener; the each-binding (u/r) is in scope for the
entire each block body, so the consts behave identically.

Caught by local docker build on dev:
  src/routes/admin/users/+page.svelte:259:12
  https://svelte.dev/e/const_tag_invalid_placement

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

diff --git a/web/src/routes/admin/quarantine/+page.svelte b/web/src/routes/admin/quarantine/+page.svelte
index e1645999..6569b360 100644
--- a/web/src/routes/admin/quarantine/+page.svelte
+++ b/web/src/routes/admin/quarantine/+page.svelte
@@ -181,6 +181,11 @@
       {#each rows as r (r.track_id)}
         {@const isExpanded = !!expanded[r.track_id]}
         {@const lidarrDisabled = !r.lidarr_album_mbid}
+        {@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 }
+        ]}
         <li
           class="flex items-start gap-4 p-3"
           data-testid="admin-quarantine-row"
@@ -259,11 +264,6 @@
           </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">
             <RowActionsMenu {primary} {secondary} />
 
diff --git a/web/src/routes/admin/users/+page.svelte b/web/src/routes/admin/users/+page.svelte
index 93d06797..95634ed2 100644
--- a/web/src/routes/admin/users/+page.svelte
+++ b/web/src/routes/admin/users/+page.svelte
@@ -235,6 +235,33 @@
     {:else}
       <ul class="divide-y divide-border rounded-lg border border-border bg-surface">
         {#each users as u (u.id)}
+          {@const primary: RowAction = {
+            icon: u.is_admin ? ShieldOff : Shield,
+            label: u.is_admin ? 'Remove admin' : 'Make admin',
+            onclick: () => onToggleAdmin(u),
+            disabled: saving
+          }}
+          {@const secondary: RowAction[] = [
+            {
+              icon: u.auto_approve_requests ? XCircle : CheckCircle2,
+              label: u.auto_approve_requests ? 'Disable auto-approve' : 'Enable auto-approve',
+              onclick: () => onToggleAutoApprove(u),
+              disabled: saving
+            },
+            {
+              icon: KeyRound,
+              label: 'Reset password',
+              onclick: () => { resetPasswordTarget = u; },
+              disabled: saving
+            },
+            {
+              icon: Trash2,
+              label: 'Delete',
+              onclick: () => { confirmDeleteTarget = u; },
+              disabled: saving,
+              danger: true
+            }
+          ]}
           <li class="flex flex-wrap items-center gap-2 p-3" data-testid="user-row" data-user-id={u.id}>
             <div class="min-w-0 flex-1 space-y-0.5">
               <div class="flex flex-wrap items-center gap-2">
@@ -256,33 +283,6 @@
                 {#if u.display_name}{u.display_name} · {/if}created {formatDate(u.created_at)}
               </div>
             </div>
-            {@const primary: RowAction = {
-              icon: u.is_admin ? ShieldOff : Shield,
-              label: u.is_admin ? 'Remove admin' : 'Make admin',
-              onclick: () => onToggleAdmin(u),
-              disabled: saving
-            }}
-            {@const secondary: RowAction[] = [
-              {
-                icon: u.auto_approve_requests ? XCircle : CheckCircle2,
-                label: u.auto_approve_requests ? 'Disable auto-approve' : 'Enable auto-approve',
-                onclick: () => onToggleAutoApprove(u),
-                disabled: saving
-              },
-              {
-                icon: KeyRound,
-                label: 'Reset password',
-                onclick: () => { resetPasswordTarget = u; },
-                disabled: saving
-              },
-              {
-                icon: Trash2,
-                label: 'Delete',
-                onclick: () => { confirmDeleteTarget = u; },
-                disabled: saving,
-                danger: true
-              }
-            ]}
             <div class="shrink-0">
               <RowActionsMenu {primary} {secondary} />
             </div>