feat(web): wire RowActionsMenu in users admin page

Primary: toggle admin (most semantically distinct per-user action).
Secondary: toggle auto-approve, reset password, delete (danger).
'Delete' was previously styled as a regular border button — now
correctly marked danger. No Edit action existed; not adding one.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-09 20:21:17 -04:00
parent e266a0f2dc
commit f03a0042e8
+31 -37
View File
@@ -19,6 +19,8 @@
import { errCode } from '$lib/api/errors';
import { pushToast } from '$lib/stores/toast.svelte';
import Modal from '$lib/components/Modal.svelte';
import RowActionsMenu, { type RowAction } from '$lib/components/RowActionsMenu.svelte';
import { Shield, ShieldOff, CheckCircle2, XCircle, KeyRound, Trash2 } from 'lucide-svelte';
const client = useQueryClient();
@@ -254,43 +256,35 @@
{#if u.display_name}{u.display_name} · {/if}created {formatDate(u.created_at)}
</div>
</div>
<div class="flex shrink-0 flex-wrap items-center gap-2">
<button
type="button"
disabled={saving}
aria-label={u.is_admin ? `Remove admin from ${u.username}` : `Make ${u.username} admin`}
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:bg-surface-hover hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-50"
onclick={() => onToggleAdmin(u)}
>
{u.is_admin ? 'Remove admin' : 'Make admin'}
</button>
<button
type="button"
disabled={saving}
aria-label={u.auto_approve_requests ? `Disable auto-approve for ${u.username}` : `Enable auto-approve for ${u.username}`}
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:bg-surface-hover hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-50"
onclick={() => onToggleAutoApprove(u)}
>
{u.auto_approve_requests ? 'Disable auto-approve' : 'Enable auto-approve'}
</button>
<button
type="button"
disabled={saving}
aria-label={`Reset password for ${u.username}`}
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:bg-surface-hover hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-50"
onclick={() => { resetPasswordTarget = u; }}
>
Reset password
</button>
<button
type="button"
disabled={saving}
aria-label={`Delete ${u.username}`}
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:bg-surface-hover hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-50"
onclick={() => { confirmDeleteTarget = u; }}
>
Delete
</button>
{@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>
</li>
{/each}