valknar/sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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>
This commit is contained in:
Sebastian Krüger
2026-03-06 16:14:00 +01:00
parent 9ef490c1e5
commit 670c18bcb7
19 changed files with 162 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/src/lib/components/header/header.svelte
View File

@@ -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"

50
packages/frontend/src/lib/components/ui/badge/badge.svelte Normal file
View File

@@ -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>

2
packages/frontend/src/lib/components/ui/badge/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { default as Badge } from "./badge.svelte";
export { badgeVariants, type BadgeVariant } from "./badge.svelte";

7
packages/frontend/src/lib/services.ts
View File

@@ -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

2
packages/frontend/src/routes/admin/+layout.server.ts
View File

@@ -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 };

11
packages/frontend/src/routes/admin/users/+page.svelte
View File

@@ -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>

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

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

38
packages/frontend/src/routes/me/+page.svelte
View File

@@ -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>