feat(dashboard): adopt ActionMenu for user row actions

Replaces the inline row-action buttons on the Users page with the new
shared ActionMenu kebab. Drops the redundant `is_active` toggle from the
edit form (Activate/Deactivate already lives in the kebab).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

dashboard/src/lib/ActionMenu.svelte

@@ -0,0 +1,256 @@
+<!--
+  Per-row "⋮" kebab menu. Hides secondary actions (edit, deactivate,
+  delete, etc.) behind a single trigger so list rows stay tidy.
+
+  Usage:
+    <ActionMenu
+      items={[
+        { label: 'Edit', onClick: () => openEdit(row) },
+        { label: row.is_active ? 'Deactivate' : 'Reactivate',
+          onClick: () => toggleActive(row) },
+        { label: 'Delete', danger: true, onClick: () => openDelete(row),
+          disabled: !canDelete(row) },
+      ]}
+    />
+
+  Closes on: item click, click outside, ESC, scroll/resize. Keyboard:
+  Enter/Space opens; Up/Down navigate; Enter activates; ESC closes and
+  re-focuses the trigger. The popover is absolutely positioned relative
+  to the trigger and right-anchored — the parent must allow overflow
+  (`overflow: visible`) for it to extend past the row.
+-->
+<script lang="ts">
+	export interface MenuItem {
+		label: string;
+		onClick: () => void;
+		danger?: boolean;
+		disabled?: boolean;
+	}
+
+	interface Props {
+		items: MenuItem[];
+		/** Accessible label for the trigger button. */
+		label?: string;
+	}
+
+	let { items, label = 'More actions' }: Props = $props();
+
+	let open = $state(false);
+	let triggerEl = $state<HTMLButtonElement | null>(null);
+	let menuEl = $state<HTMLDivElement | null>(null);
+	let activeIndex = $state(-1);
+
+	let enabledIndices = $derived(
+		items
+			.map((it, i) => (it.disabled ? -1 : i))
+			.filter((i) => i >= 0)
+	);
+
+	function toggle() {
+		open ? close() : openMenu();
+	}
+
+	function openMenu() {
+		open = true;
+		activeIndex = enabledIndices[0] ?? -1;
+	}
+
+	function close(refocus = false) {
+		open = false;
+		activeIndex = -1;
+		if (refocus) triggerEl?.focus();
+	}
+
+	function activate(index: number) {
+		const item = items[index];
+		if (!item || item.disabled) return;
+		close();
+		item.onClick();
+	}
+
+	function moveActive(step: 1 | -1) {
+		if (enabledIndices.length === 0) return;
+		const cur = enabledIndices.indexOf(activeIndex);
+		const next =
+			cur === -1
+				? enabledIndices[0]
+				: enabledIndices[(cur + step + enabledIndices.length) % enabledIndices.length];
+		activeIndex = next;
+	}
+
+	function onTriggerKeydown(e: KeyboardEvent) {
+		if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			if (!open) openMenu();
+		}
+	}
+
+	function onMenuKeydown(e: KeyboardEvent) {
+		switch (e.key) {
+			case 'ArrowDown':
+				e.preventDefault();
+				moveActive(1);
+				break;
+			case 'ArrowUp':
+				e.preventDefault();
+				moveActive(-1);
+				break;
+			case 'Enter':
+			case ' ':
+				e.preventDefault();
+				if (activeIndex >= 0) activate(activeIndex);
+				break;
+			case 'Escape':
+				e.preventDefault();
+				close(true);
+				break;
+			case 'Tab':
+				close();
+				break;
+		}
+	}
+
+	function onWindowMouseDown(e: MouseEvent) {
+		if (!open) return;
+		const target = e.target as Node;
+		if (menuEl?.contains(target) || triggerEl?.contains(target)) return;
+		close();
+	}
+
+	// Close on viewport changes — naive but enough; without a portal a
+	// scrolling list would otherwise leave the popover drifting away from
+	// its row.
+	function onViewportChange() {
+		if (open) close();
+	}
+</script>
+
+<svelte:window
+	onmousedown={onWindowMouseDown}
+	onscroll={onViewportChange}
+	onresize={onViewportChange}
+/>
+
+<div class="wrap">
+	<button
+		bind:this={triggerEl}
+		type="button"
+		class="trigger"
+		class:open
+		aria-label={label}
+		aria-haspopup="menu"
+		aria-expanded={open}
+		onclick={toggle}
+		onkeydown={onTriggerKeydown}
+	>
+		<!-- vertical ellipsis ⋮ — kept inline as text so it inherits color -->
+		<span aria-hidden="true">⋮</span>
+	</button>
+
+	{#if open}
+		<div
+			bind:this={menuEl}
+			class="menu"
+			role="menu"
+			tabindex="-1"
+			onkeydown={onMenuKeydown}
+		>
+			{#each items as item, i (i)}
+				<button
+					type="button"
+					role="menuitem"
+					class="item"
+					class:danger={item.danger}
+					class:active={i === activeIndex}
+					disabled={item.disabled}
+					onclick={() => activate(i)}
+					onmouseenter={() => {
+						if (!item.disabled) activeIndex = i;
+					}}
+				>
+					{item.label}
+				</button>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.wrap {
+		position: relative;
+		display: inline-flex;
+		justify-content: flex-end;
+	}
+
+	.trigger {
+		background: transparent;
+		color: #94a3b8;
+		border: 1px solid transparent;
+		width: 1.75rem;
+		height: 1.75rem;
+		border-radius: 0.25rem;
+		font: inherit;
+		font-size: 1.1rem;
+		line-height: 1;
+		cursor: pointer;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0;
+	}
+
+	.trigger:hover,
+	.trigger:focus-visible,
+	.trigger.open {
+		background: #1e293b;
+		color: #e2e8f0;
+		border-color: #334155;
+		outline: none;
+	}
+
+	.menu {
+		position: absolute;
+		top: calc(100% + 4px);
+		right: 0;
+		min-width: 9rem;
+		background: #0f172a;
+		border: 1px solid #334155;
+		border-radius: 0.375rem;
+		box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.6);
+		padding: 0.25rem;
+		display: flex;
+		flex-direction: column;
+		z-index: 50;
+	}
+
+	.item {
+		background: transparent;
+		color: #cbd5e1;
+		border: none;
+		text-align: left;
+		padding: 0.4rem 0.6rem;
+		font: inherit;
+		font-size: 0.8rem;
+		border-radius: 0.25rem;
+		cursor: pointer;
+	}
+
+	.item.active:not(:disabled) {
+		background: #1e293b;
+		color: #e2e8f0;
+	}
+
+	.item.danger {
+		color: #fca5a5;
+	}
+
+	.item.danger.active:not(:disabled) {
+		background: #450a0a;
+		color: #fecaca;
+	}
+
+	.item:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+</style>

dashboard/src/routes/users/+page.svelte

@@ -16,6 +16,7 @@
 	import { currentUser } from '$lib/auth';
 	import RoleChip from '$lib/RoleChip.svelte';
 	import ConfirmModal from '$lib/ConfirmModal.svelte';
+	import ActionMenu from '$lib/ActionMenu.svelte';
 	import { generatePassword } from '$lib/password-gen';
 
 	const me = $derived($currentUser);
@@ -70,8 +71,7 @@
 		username: string;
 		email: string;
 		instance_role: InstanceRole;
-		is_active: boolean;
+	}>({ username: '', email: '', instance_role: 'admin' });
-	}>({ username: '', email: '', instance_role: 'admin', is_active: true });
 	let editPending = $state(false);
 	let editError = $state<string | null>(null);
 
@@ -161,8 +161,7 @@
 		editForm = {
 			username: row.username,
 			email: row.email ?? '',
-			instance_role: row.instance_role,
+			instance_role: row.instance_role
-			is_active: row.is_active
 		};
 		editError = null;
 	}
@@ -176,7 +175,6 @@
 			username?: string;
 			email?: string | null;
 			instance_role?: InstanceRole;
-			is_active?: boolean;
 		} = {};
 		if (editForm.username !== editTarget.username) patch.username = editForm.username;
 		if ((editTarget.email ?? '') !== editForm.email.trim()) {
@@ -185,7 +183,6 @@
 		if (editForm.instance_role !== editTarget.instance_role) {
 			patch.instance_role = editForm.instance_role;
 		}
-		if (editForm.is_active !== editTarget.is_active) patch.is_active = editForm.is_active;
 		try {
 			const updated = await api.admins.update(editTarget.id, patch);
 			admins = admins
@@ -350,19 +347,22 @@
 				<div>{shortDate(row.created_at)}</div>
 				<div title={row.last_login_at ?? ''}>{relative(row.last_login_at)}</div>
 				<div class="actions-col">
-					<button type="button" class="row-action" onclick={() => openEdit(row)}>Edit</button>
+					<ActionMenu
-					<button type="button" class="row-action" onclick={() => toggleActive(row)}>
+						label="User actions for {row.username}"
-						{row.is_active ? 'Deactivate' : 'Reactivate'}
+						items={[
-					</button>
+							{ label: 'Edit', onClick: () => openEdit(row) },
-					{#if canDelete(row)}
+							{
-						<button
+								label: row.is_active ? 'Deactivate' : 'Reactivate',
-							type="button"
+								onClick: () => toggleActive(row)
-							class="row-action danger-link"
+							},
-							onclick={() => openDelete(row)}
+							{
-						>
+								label: 'Delete',
-							Delete
+								danger: true,
-						</button>
+								disabled: !canDelete(row),
-					{/if}
+								onClick: () => openDelete(row)
+							}
+						]}
+					/>
 				</div>
 			</div>
 		{/each}
@@ -514,11 +514,6 @@
 					{/if}
 				</small>
 			</label>
-			<label class="toggle">
-				<input type="checkbox" bind:checked={editForm.is_active} />
-				<span>Active</span>
-				<small>Unchecking signs the user out and expires all their API keys immediately.</small>
-			</label>
 			{#if editError}
 				<div class="error">{editError}</div>
 			{/if}
@@ -682,7 +677,7 @@
 	}
 	.row {
 		display: grid;
-		grid-template-columns: 1.3fr 0.7fr 1.5fr 0.9fr 0.8fr 0.9fr 1.6fr;
+		grid-template-columns: 1.3fr 0.7fr 1.5fr 0.9fr 0.8fr 0.9fr 2.5rem;
 		align-items: center;
 		gap: 0.75rem;
 		padding: 0.7rem 1rem;
@@ -737,29 +732,6 @@
 	.actions-col {
 		display: flex;
 		justify-content: flex-end;
-		gap: 0.25rem;
-		flex-wrap: wrap;
-	}
-	.row-action {
-		background: transparent;
-		color: #cbd5e1;
-		border: 1px solid #334155;
-		padding: 0.25rem 0.55rem;
-		border-radius: 0.25rem;
-		font-size: 0.75rem;
-		cursor: pointer;
-	}
-	.row-action:hover {
-		background: #1e293b;
-		color: #e2e8f0;
-	}
-	.danger-link {
-		color: #fca5a5;
-		border-color: #7f1d1d;
-	}
-	.danger-link:hover {
-		background: #450a0a;
-		color: #fecaca;
 	}
 
 	button.primary {
@@ -923,21 +895,6 @@
 		color: #cbd5e1;
 	}
 
-	.toggle {
-		display: flex;
-		flex-direction: column;
-		gap: 0.25rem;
-		font-size: 0.85rem;
-		color: #cbd5e1;
-	}
-	.toggle :global(input[type='checkbox']) {
-		margin-right: 0.4rem;
-	}
-	.toggle small {
-		color: #64748b;
-		font-size: 0.72rem;
-		margin-left: 1.3rem;
-	}
 
 	.token-row {
 		display: flex;