feat: refactor role system to is_admin flag, add Badge component, fix native dialogs

- Separate admin identity from role: viewer|model + is_admin boolean flag
- DB migration 0001_is_admin: adds column, migrates former admin role users
- Update ACL helpers, auth session, GraphQL types and all resolvers
- Admin layout guard and header links check is_admin instead of role
- Admin users table: show Admin badge next to name, remove admin from role select
- Admin user edit page: is_admin checkbox toggle
- Install shadcn Badge component; use in admin users table
- Fix duplicate photo keys in adminGetUser resolver
- Replace confirm() in /me recordings with Dialog component

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

packages/frontend/src/routes/admin/+layout.server.ts

@@ -1,7 +1,7 @@
 import { redirect } from "@sveltejs/kit";
 
 export async function load({ locals }) {
-  if (!locals.authStatus.authenticated || locals.authStatus.user?.role !== "admin") {
+  if (!locals.authStatus.authenticated || !locals.authStatus.user?.is_admin) {
     throw redirect(302, "/");
   }
   return { authStatus: locals.authStatus };

packages/frontend/src/routes/admin/users/+page.svelte

@@ -8,6 +8,7 @@
   import { Button } from "$lib/components/ui/button";
   import { Input } from "$lib/components/ui/input";
   import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
+  import { Badge } from "$lib/components/ui/badge";
   import * as Dialog from "$lib/components/ui/dialog";
   import type { User } from "$lib/types";
 
@@ -22,7 +23,7 @@
 
   const currentUserId = page.data.authStatus?.user?.id;
 
-  const roles = ["", "viewer", "model", "admin"] as const;
+  const roles = ["", "viewer", "model"] as const;
 
   function debounceSearch(value: string) {
     clearTimeout(searchTimeout);
@@ -144,7 +145,12 @@
                   </div>
                 {/if}
                 <div class="min-w-0">
-                  <span class="font-medium block truncate">{user.artist_name || user.first_name || "—"}</span>
+                  <div class="flex items-center gap-1.5">
+                    <span class="font-medium truncate">{user.artist_name || user.first_name || "—"}</span>
+                    {#if user.is_admin}
+                      <Badge variant="default" class="shrink-0 text-[10px] px-1.5 py-0">Admin</Badge>
+                    {/if}
+                  </div>
                   <span class="text-xs text-muted-foreground sm:hidden truncate block">{user.email}</span>
                 </div>
               </div>
@@ -163,7 +169,6 @@
                 <SelectContent>
                   <SelectItem value="viewer">Viewer</SelectItem>
                   <SelectItem value="model">Model</SelectItem>
-                  <SelectItem value="admin">Admin</SelectItem>
                 </SelectContent>
               </Select>
             </td>

packages/frontend/src/routes/admin/users/[id]/+page.svelte

@@ -20,6 +20,7 @@
   let artistName = $state(data.user.artist_name ?? "");
   let avatarId = $state<string | null>(data.user.avatar ?? null);
   let bannerId = $state<string | null>(data.user.banner ?? null);
+  let isAdmin = $state(data.user.is_admin ?? false);
   let saving = $state(false);
 
   async function handleAvatarUpload(files: File[]) {
@@ -86,6 +87,7 @@
         artistName: artistName || undefined,
         avatarId: avatarId || undefined,
         bannerId: bannerId || undefined,
+        isAdmin,
       });
       toast.success("Saved");
     } catch (e: any) {
@@ -103,7 +105,7 @@
     </Button>
     <div>
       <h1 class="text-2xl font-bold">{data.user.artist_name || data.user.email}</h1>
-      <p class="text-xs text-muted-foreground">{data.user.email} · {data.user.role}</p>
+      <p class="text-xs text-muted-foreground">{data.user.email} · {data.user.role}{data.user.is_admin ? " · admin" : ""}</p>
     </div>
   </div>
 
@@ -151,6 +153,15 @@
       <FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleBannerUpload} />
     </div>
 
+    <!-- Admin flag -->
+    <label class="flex items-center gap-3 rounded-lg border border-border/40 px-4 py-3 cursor-pointer hover:bg-muted/20 transition-colors">
+      <input type="checkbox" bind:checked={isAdmin} class="h-4 w-4 rounded accent-primary shrink-0" />
+      <div>
+        <span class="text-sm font-medium">Administrator</span>
+        <p class="text-xs text-muted-foreground">Grants full admin access to the dashboard</p>
+      </div>
+    </label>
+
     <div class="flex gap-3">
       <Button onclick={handleSave} disabled={saving}>
         {saving ? "Saving…" : "Save changes"}

packages/frontend/src/routes/me/+page.svelte

@@ -18,6 +18,7 @@
   import * as Alert from "$lib/components/ui/alert";
   import { toast } from "svelte-sonner";
   import { deleteRecording, removeFile, updateProfile, uploadFile } from "$lib/services";
+  import * as Dialog from "$lib/components/ui/dialog";
   import { Textarea } from "$lib/components/ui/textarea";
   import Meta from "$lib/components/meta/meta.svelte";
   import { TagsInput } from "$lib/components/ui/tags-input";
@@ -27,6 +28,9 @@
   const { data } = $props();
 
   let recordings = $state(data.recordings);
+  let deleteTarget = $state<string | null>(null);
+  let deleteOpen = $state(false);
+  let deleting = $state(false);
 
   let activeTab = $state("settings");
 
@@ -153,17 +157,24 @@
     }
   }
 
-  async function handleDeleteRecording(id: string) {
-    if (!confirm($_("me.recordings.delete_confirm"))) {
-      return;
-    }
+  function handleDeleteRecording(id: string) {
+    deleteTarget = id;
+    deleteOpen = true;
+  }
 
+  async function confirmDeleteRecording() {
+    if (!deleteTarget) return;
+    deleting = true;
     try {
-      await deleteRecording(id);
-      recordings = recordings.filter((r) => r.id !== id);
+      await deleteRecording(deleteTarget);
+      recordings = recordings.filter((r) => r.id !== deleteTarget);
       toast.success($_("me.recordings.delete_success"));
+      deleteOpen = false;
+      deleteTarget = null;
     } catch {
       toast.error($_("me.recordings.delete_error"));
+    } finally {
+      deleting = false;
     }
   }
 
@@ -641,3 +652,18 @@
     </Tabs>
   </div>
 </div>
+
+<Dialog.Root bind:open={deleteOpen}>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>{$_("me.recordings.delete_confirm")}</Dialog.Title>
+      <Dialog.Description>This cannot be undone.</Dialog.Description>
+    </Dialog.Header>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (deleteOpen = false)}>Cancel</Button>
+      <Button variant="destructive" disabled={deleting} onclick={confirmDeleteRecording}>
+        {deleting ? "Deleting…" : "Delete"}
+      </Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>