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>
This commit is contained in:
2026-05-09 20:26:04 -04:00
parent 268e12a5eb
commit 1536860e59
2 changed files with 32 additions and 32 deletions
+5 -5
View File
@@ -181,6 +181,11 @@
{#each rows as r (r.track_id)} {#each rows as r (r.track_id)}
{@const isExpanded = !!expanded[r.track_id]} {@const isExpanded = !!expanded[r.track_id]}
{@const lidarrDisabled = !r.lidarr_album_mbid} {@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 <li
class="flex items-start gap-4 p-3" class="flex items-start gap-4 p-3"
data-testid="admin-quarantine-row" data-testid="admin-quarantine-row"
@@ -259,11 +264,6 @@
</div> </div>
<!-- Action cluster --> <!-- 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"> <div class="flex shrink-0 items-center gap-2">
<RowActionsMenu {primary} {secondary} /> <RowActionsMenu {primary} {secondary} />
+21 -21
View File
@@ -235,27 +235,6 @@
{:else} {:else}
<ul class="divide-y divide-border rounded-lg border border-border bg-surface"> <ul class="divide-y divide-border rounded-lg border border-border bg-surface">
{#each users as u (u.id)} {#each users as u (u.id)}
<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">
<span class="text-base font-medium text-text-primary">{u.username}</span>
{#if u.is_admin}
<span
class="inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent"
data-testid="admin-badge"
>admin</span>
{/if}
{#if u.auto_approve_requests}
<span
class="inline-flex items-center rounded-full border border-border px-2 py-0.5 text-xs text-text-secondary"
data-testid="auto-approve-badge"
>auto-approve</span>
{/if}
</div>
<div class="text-sm text-text-secondary">
{#if u.display_name}{u.display_name} · {/if}created {formatDate(u.created_at)}
</div>
</div>
{@const primary: RowAction = { {@const primary: RowAction = {
icon: u.is_admin ? ShieldOff : Shield, icon: u.is_admin ? ShieldOff : Shield,
label: u.is_admin ? 'Remove admin' : 'Make admin', label: u.is_admin ? 'Remove admin' : 'Make admin',
@@ -283,6 +262,27 @@
danger: true 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">
<span class="text-base font-medium text-text-primary">{u.username}</span>
{#if u.is_admin}
<span
class="inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent"
data-testid="admin-badge"
>admin</span>
{/if}
{#if u.auto_approve_requests}
<span
class="inline-flex items-center rounded-full border border-border px-2 py-0.5 text-xs text-text-secondary"
data-testid="auto-approve-badge"
>auto-approve</span>
{/if}
</div>
<div class="text-sm text-text-secondary">
{#if u.display_name}{u.display_name} · {/if}created {formatDate(u.created_at)}
</div>
</div>
<div class="shrink-0"> <div class="shrink-0">
<RowActionsMenu {primary} {secondary} /> <RowActionsMenu {primary} {secondary} />
</div> </div>