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/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"}