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>
2026-03-06 16:14:00 +01:00
parent 9ef490c1e5
commit 670c18bcb7
19 changed files with 162 additions and 43 deletions
--- a/packages/backend/src/db/schema/users.ts
+++ b/packages/backend/src/db/schema/users.ts
@@ -29,6 +29,7 @@ export const users = pgTable(
    role: roleEnum("role").notNull().default("viewer"),
    avatar: text("avatar").references(() => files.id, { onDelete: "set null" }),
    banner: text("banner").references(() => files.id, { onDelete: "set null" }),
+    is_admin: boolean("is_admin").notNull().default(false),
    email_verified: boolean("email_verified").notNull().default(false),
    email_verify_token: text("email_verify_token"),
    password_reset_token: text("password_reset_token"),
--- a/packages/backend/src/graphql/resolvers/articles.ts
+++ b/packages/backend/src/graphql/resolvers/articles.ts
@@ -2,7 +2,7 @@ import { builder } from "../builder";
 import { ArticleType } from "../types/index";
 import { articles, users } from "../../db/schema/index";
 import { eq, and, lte, desc } from "drizzle-orm";
-import { requireRole } from "../../lib/acl";
+import { requireAdmin } from "../../lib/acl";

 async function enrichArticle(db: any, article: any) {
  let author = null;
@@ -78,7 +78,7 @@ builder.queryField("adminListArticles", (t) =>
  t.field({
    type: [ArticleType],
    resolve: async (_root, _args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
      const articleList = await ctx.db.select().from(articles).orderBy(desc(articles.publish_date));
      return Promise.all(articleList.map((article: any) => enrichArticle(ctx.db, article)));
    },
@@ -100,7 +100,7 @@ builder.mutationField("createArticle", (t) =>
      publishDate: t.arg.string(),
    },
    resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
      const inserted = await ctx.db
        .insert(articles)
        .values({
@@ -138,7 +138,7 @@ builder.mutationField("updateArticle", (t) =>
      publishDate: t.arg.string(),
    },
    resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
      const updates: Record<string, unknown> = { date_updated: new Date() };
      if (args.title !== undefined && args.title !== null) updates.title = args.title;
      if (args.slug !== undefined && args.slug !== null) updates.slug = args.slug;
@@ -169,7 +169,7 @@ builder.mutationField("deleteArticle", (t) =>
      id: t.arg.string({ required: true }),
    },
    resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
      await ctx.db.delete(articles).where(eq(articles.id, args.id));
      return true;
    },
--- a/packages/backend/src/graphql/resolvers/auth.ts
+++ b/packages/backend/src/graphql/resolvers/auth.ts
@@ -32,7 +32,8 @@ builder.mutationField("login", (t) =>
      const sessionUser = {
        id: user[0].id,
        email: user[0].email,
-        role: user[0].role,
+        role: (user[0].role === "admin" ? "viewer" : user[0].role) as "model" | "viewer",
+        is_admin: user[0].is_admin,
        first_name: user[0].first_name,
        last_name: user[0].last_name,
        artist_name: user[0].artist_name,
--- a/packages/backend/src/graphql/resolvers/users.ts
+++ b/packages/backend/src/graphql/resolvers/users.ts
@@ -3,7 +3,7 @@ import { builder } from "../builder";
 import { CurrentUserType, UserType, AdminUserListType, AdminUserDetailType } from "../types/index";
 import { users, user_photos, files } from "../../db/schema/index";
 import { eq, ilike, or, count, and } from "drizzle-orm";
-import { requireRole } from "../../lib/acl";
+import { requireAdmin } from "../../lib/acl";

 builder.queryField("me", (t) =>
  t.field({
@@ -86,7 +86,7 @@ builder.queryField("adminListUsers", (t) =>
      offset: t.arg.int(),
    },
    resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);

      const limit = args.limit ?? 50;
      const offset = args.offset ?? 0;
@@ -126,6 +126,7 @@ builder.mutationField("adminUpdateUser", (t) =>
    args: {
      userId: t.arg.string({ required: true }),
      role: t.arg.string(),
+      isAdmin: t.arg.boolean(),
      firstName: t.arg.string(),
      lastName: t.arg.string(),
      artistName: t.arg.string(),
@@ -133,10 +134,11 @@ builder.mutationField("adminUpdateUser", (t) =>
      bannerId: t.arg.string(),
    },
    resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);

      const updates: Record<string, unknown> = { date_updated: new Date() };
      if (args.role !== undefined && args.role !== null) updates.role = args.role as any;
+      if (args.isAdmin !== undefined && args.isAdmin !== null) updates.is_admin = args.isAdmin;
      if (args.firstName !== undefined && args.firstName !== null)
        updates.first_name = args.firstName;
      if (args.lastName !== undefined && args.lastName !== null) updates.last_name = args.lastName;
@@ -163,7 +165,7 @@ builder.mutationField("adminDeleteUser", (t) =>
      userId: t.arg.string({ required: true }),
    },
    resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
      if (args.userId === ctx.currentUser!.id) throw new GraphQLError("Cannot delete yourself");
      await ctx.db.delete(users).where(eq(users.id, args.userId));
      return true;
@@ -179,7 +181,7 @@ builder.queryField("adminGetUser", (t) =>
      userId: t.arg.string({ required: true }),
    },
    resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
      const user = await ctx.db.select().from(users).where(eq(users.id, args.userId)).limit(1);
      if (!user[0]) return null;
      const photoRows = await ctx.db
@@ -188,10 +190,11 @@ builder.queryField("adminGetUser", (t) =>
        .leftJoin(files, eq(user_photos.file_id, files.id))
        .where(eq(user_photos.user_id, args.userId))
        .orderBy(user_photos.sort);
-      return {
-        ...user[0],
-        photos: photoRows.map((p: any) => ({ id: p.id, filename: p.filename })),
-      };
+      const seen = new Set<string>();
+      const photos = photoRows
+        .filter((p: any) => p.id && !seen.has(p.id) && seen.add(p.id))
+        .map((p: any) => ({ id: p.id, filename: p.filename }));
+      return { ...user[0], photos };
    },
  }),
 );
@@ -204,7 +207,7 @@ builder.mutationField("adminAddUserPhoto", (t) =>
      fileId: t.arg.string({ required: true }),
    },
    resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
      await ctx.db.insert(user_photos).values({ user_id: args.userId, file_id: args.fileId });
      return true;
    },
@@ -219,7 +222,7 @@ builder.mutationField("adminRemoveUserPhoto", (t) =>
      fileId: t.arg.string({ required: true }),
    },
    resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
      await ctx.db
        .delete(user_photos)
        .where(and(eq(user_photos.user_id, args.userId), eq(user_photos.file_id, args.fileId)));
--- a/packages/backend/src/graphql/resolvers/videos.ts
+++ b/packages/backend/src/graphql/resolvers/videos.ts
@@ -15,7 +15,7 @@ import {
  files,
 } from "../../db/schema/index";
 import { eq, and, lte, desc, inArray, count } from "drizzle-orm";
-import { requireRole } from "../../lib/acl";
+import { requireAdmin } from "../../lib/acl";

 async function enrichVideo(db: any, video: any) {
  // Fetch models
@@ -432,7 +432,7 @@ builder.queryField("adminListVideos", (t) =>
  t.field({
    type: [VideoType],
    resolve: async (_root, _args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
      const rows = await ctx.db.select().from(videos).orderBy(desc(videos.upload_date));
      return Promise.all(rows.map((v: any) => enrichVideo(ctx.db, v)));
    },
@@ -454,7 +454,7 @@ builder.mutationField("createVideo", (t) =>
      uploadDate: t.arg.string(),
    },
    resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
      const inserted = await ctx.db
        .insert(videos)
        .values({
@@ -491,7 +491,7 @@ builder.mutationField("updateVideo", (t) =>
      uploadDate: t.arg.string(),
    },
    resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
      const updates: Record<string, unknown> = {};
      if (args.title !== undefined && args.title !== null) updates.title = args.title;
      if (args.slug !== undefined && args.slug !== null) updates.slug = args.slug;
@@ -522,7 +522,7 @@ builder.mutationField("deleteVideo", (t) =>
      id: t.arg.string({ required: true }),
    },
    resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
      await ctx.db.delete(videos).where(eq(videos.id, args.id));
      return true;
    },
@@ -537,7 +537,7 @@ builder.mutationField("setVideoModels", (t) =>
      userIds: t.arg.stringList({ required: true }),
    },
    resolve: async (_root, args, ctx) => {
-      requireRole(ctx, "admin");
+      requireAdmin(ctx);
      await ctx.db.delete(video_models).where(eq(video_models.video_id, args.videoId));
      if (args.userIds.length > 0) {
        await ctx.db.insert(video_models).values(
--- a/packages/backend/src/graphql/types/index.ts
+++ b/packages/backend/src/graphql/types/index.ts
@@ -53,6 +53,7 @@ export const UserType = builder.objectRef<User>("User").implement({
    description: t.exposeString("description", { nullable: true }),
    tags: t.exposeStringList("tags", { nullable: true }),
    role: t.exposeString("role"),
+    is_admin: t.exposeBoolean("is_admin"),
    avatar: t.exposeString("avatar", { nullable: true }),
    banner: t.exposeString("banner", { nullable: true }),
    email_verified: t.exposeBoolean("email_verified"),
@@ -72,6 +73,7 @@ export const CurrentUserType = builder.objectRef<User>("CurrentUser").implement(
    description: t.exposeString("description", { nullable: true }),
    tags: t.exposeStringList("tags", { nullable: true }),
    role: t.exposeString("role"),
+    is_admin: t.exposeBoolean("is_admin"),
    avatar: t.exposeString("avatar", { nullable: true }),
    banner: t.exposeString("banner", { nullable: true }),
    email_verified: t.exposeBoolean("email_verified"),
@@ -359,6 +361,7 @@ export const AdminUserDetailType = builder
      description: t.exposeString("description", { nullable: true }),
      tags: t.exposeStringList("tags", { nullable: true }),
      role: t.exposeString("role"),
+      is_admin: t.exposeBoolean("is_admin"),
      avatar: t.exposeString("avatar", { nullable: true }),
      banner: t.exposeString("banner", { nullable: true }),
      email_verified: t.exposeBoolean("email_verified"),
--- a/packages/backend/src/lib/acl.ts
+++ b/packages/backend/src/lib/acl.ts
@@ -1,20 +1,18 @@
 import { GraphQLError } from "graphql";
 import type { Context } from "../graphql/builder";

-type UserRole = "viewer" | "model" | "admin";
-
 export function requireAuth(ctx: Context): void {
  if (!ctx.currentUser) throw new GraphQLError("Unauthorized");
 }

-export function requireRole(ctx: Context, ...roles: UserRole[]): void {
+export function requireAdmin(ctx: Context): void {
  requireAuth(ctx);
-  if (!roles.includes(ctx.currentUser!.role)) throw new GraphQLError("Forbidden");
+  if (!ctx.currentUser!.is_admin) throw new GraphQLError("Forbidden");
 }

 export function requireOwnerOrAdmin(ctx: Context, ownerId: string): void {
  requireAuth(ctx);
-  if (ctx.currentUser!.id !== ownerId && ctx.currentUser!.role !== "admin") {
+  if (ctx.currentUser!.id !== ownerId && !ctx.currentUser!.is_admin) {
    throw new GraphQLError("Forbidden");
  }
 }
--- a/packages/backend/src/lib/auth.ts
+++ b/packages/backend/src/lib/auth.ts
@@ -3,7 +3,8 @@ import Redis from "ioredis";
 export type SessionUser = {
  id: string;
  email: string;
-  role: "model" | "viewer" | "admin";
+  role: "model" | "viewer";
+  is_admin: boolean;
  first_name: string | null;
  last_name: string | null;
  artist_name: string | null;
--- a/packages/backend/src/migrations/0001_is_admin.sql
+++ b/packages/backend/src/migrations/0001_is_admin.sql
@@ -0,0 +1,3 @@
+ALTER TABLE "users" ADD COLUMN "is_admin" boolean NOT NULL DEFAULT false;--> statement-breakpoint
+UPDATE "users" SET "is_admin" = true WHERE "role" = 'admin';--> statement-breakpoint
+UPDATE "users" SET "role" = 'viewer' WHERE "role" = 'admin';
--- a/packages/backend/src/migrations/meta/_journal.json
+++ b/packages/backend/src/migrations/meta/_journal.json
@@ -8,6 +8,13 @@
      "when": 1772645674513,
      "tag": "0000_pale_hellion",
      "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "7",
+      "when": 1772645674514,
+      "tag": "0001_is_admin",
+      "breakpoints": true
    }
  ]
 }
--- a/packages/frontend/src/lib/components/header/header.svelte
+++ b/packages/frontend/src/lib/components/header/header.svelte
@@ -109,7 +109,7 @@
              <span class="sr-only">{$_("header.play")}</span>
            </Button>

-            {#if authStatus.user?.role === "admin"}
+            {#if authStatus.user?.is_admin}
              <Button
                variant="link"
                size="icon"
@@ -278,7 +278,7 @@
            <span class="icon-[ri--arrow-right-s-line] h-4 w-4 text-muted-foreground"></span>
          </a>

-          {#if authStatus.user?.role === "admin"}
+          {#if authStatus.user?.is_admin}
            <a
              class={`flex items-center gap-3 rounded-xl border px-4 py-3 transition-all duration-200 group hover:border-primary/30 hover:bg-primary/5 ${isActiveLink({ href: "/admin" }) ? "border-primary/40 bg-primary/8" : "border-border/40 bg-card/50"}`}
              href="/admin/users"
--- a/packages/frontend/src/lib/components/ui/badge/badge.svelte
+++ b/packages/frontend/src/lib/components/ui/badge/badge.svelte
@@ -0,0 +1,50 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const badgeVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
+				secondary:
+					"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
+				destructive:
+					"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
+				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>
--- a/packages/frontend/src/lib/components/ui/badge/index.ts
+++ b/packages/frontend/src/lib/components/ui/badge/index.ts
@@ -0,0 +1,2 @@
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";
--- a/packages/frontend/src/lib/services.ts
+++ b/packages/frontend/src/lib/services.ts
@@ -62,6 +62,7 @@ const ME_QUERY = gql`
      description
      tags
      role
+      is_admin
      avatar
      banner
      email_verified
@@ -1022,6 +1023,7 @@ const ADMIN_LIST_USERS_QUERY = gql`
        artist_name
        slug
        role
+        is_admin
        avatar
        email_verified
        date_created
@@ -1052,6 +1054,7 @@ const ADMIN_UPDATE_USER_MUTATION = gql`
  mutation AdminUpdateUser(
    $userId: String!
    $role: String
+    $isAdmin: Boolean
    $firstName: String
    $lastName: String
    $artistName: String
@@ -1061,6 +1064,7 @@ const ADMIN_UPDATE_USER_MUTATION = gql`
    adminUpdateUser(
      userId: $userId
      role: $role
+      isAdmin: $isAdmin
      firstName: $firstName
      lastName: $lastName
      artistName: $artistName
@@ -1073,6 +1077,7 @@ const ADMIN_UPDATE_USER_MUTATION = gql`
      last_name
      artist_name
      role
+      is_admin
      avatar
      banner
      date_created
@@ -1083,6 +1088,7 @@ const ADMIN_UPDATE_USER_MUTATION = gql`
 export async function adminUpdateUser(input: {
  userId: string;
  role?: string;
+  isAdmin?: boolean;
  firstName?: string;
  lastName?: string;
  artistName?: string;
@@ -1128,6 +1134,7 @@ const ADMIN_GET_USER_QUERY = gql`
      artist_name
      slug
      role
+      is_admin
      avatar
      banner
      description
--- a/packages/frontend/src/routes/admin/+layout.server.ts
+++ b/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 };
--- a/packages/frontend/src/routes/admin/users/+page.svelte
+++ b/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>
--- a/packages/frontend/src/routes/admin/users/[id]/+page.svelte
+++ b/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"}
--- a/packages/frontend/src/routes/me/+page.svelte
+++ b/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>
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -21,7 +21,8 @@ export interface User {
  slug: string | null;
  description: string | null;
  tags: string[] | null;
-  role: "model" | "viewer" | "admin";
+  role: "model" | "viewer";
+  is_admin: boolean;
  /** UUID of the avatar file */
  avatar: string | null;
  /** UUID of the banner file */