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

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>
---
 web/src/routes/admin/users/+page.svelte | 68 +++++++++++--------------
 1 file changed, 31 insertions(+), 37 deletions(-)

diff --git a/web/src/routes/admin/users/+page.svelte b/web/src/routes/admin/users/+page.svelte
index 2b7f4226..93d06797 100644
--- a/web/src/routes/admin/users/+page.svelte
+++ b/web/src/routes/admin/users/+page.svelte
@@ -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}