style: apply prettier formatting across frontend components and pages
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -320,6 +320,5 @@
|
|||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -5,8 +5,7 @@
|
|||||||
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",
|
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: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default:
|
default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
|
||||||
"bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
|
|
||||||
secondary:
|
secondary:
|
||||||
"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
|
"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
|
||||||
destructive:
|
destructive:
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
bind:ref
|
bind:ref
|
||||||
class={cn(
|
class={cn(
|
||||||
"relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-md [&:last-child[data-selected]_[data-bits-day]]:rounded-e-md",
|
"relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-md [&:last-child[data-selected]_[data-bits-day]]:rounded-e-md",
|
||||||
className
|
className,
|
||||||
)}
|
)}
|
||||||
{...restProps}
|
{...restProps}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -29,7 +29,7 @@
|
|||||||
"focus:border-ring focus:ring-ring/50 focus:relative",
|
"focus:border-ring focus:ring-ring/50 focus:relative",
|
||||||
// inner spans
|
// inner spans
|
||||||
"[&>span]:text-xs [&>span]:opacity-70",
|
"[&>span]:text-xs [&>span]:opacity-70",
|
||||||
className
|
className,
|
||||||
)}
|
)}
|
||||||
{...restProps}
|
{...restProps}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
bind:ref
|
bind:ref
|
||||||
class={cn(
|
class={cn(
|
||||||
"text-muted-foreground w-(--cell-size) rounded-md text-[0.8rem] font-normal",
|
"text-muted-foreground w-(--cell-size) rounded-md text-[0.8rem] font-normal",
|
||||||
className
|
className,
|
||||||
)}
|
)}
|
||||||
{...restProps}
|
{...restProps}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
bind:ref
|
bind:ref
|
||||||
class={cn(
|
class={cn(
|
||||||
"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
|
"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
|
||||||
className
|
className,
|
||||||
)}
|
)}
|
||||||
{...restProps}
|
{...restProps}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -15,7 +15,7 @@
|
|||||||
<span
|
<span
|
||||||
class={cn(
|
class={cn(
|
||||||
"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
|
"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
|
||||||
className
|
className,
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<CalendarPrimitive.MonthSelect
|
<CalendarPrimitive.MonthSelect
|
||||||
|
|||||||
@@ -24,7 +24,7 @@
|
|||||||
class={cn(
|
class={cn(
|
||||||
buttonVariants({ variant }),
|
buttonVariants({ variant }),
|
||||||
"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
|
"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
|
||||||
className
|
className,
|
||||||
)}
|
)}
|
||||||
children={children || Fallback}
|
children={children || Fallback}
|
||||||
{...restProps}
|
{...restProps}
|
||||||
|
|||||||
@@ -24,7 +24,7 @@
|
|||||||
class={cn(
|
class={cn(
|
||||||
buttonVariants({ variant }),
|
buttonVariants({ variant }),
|
||||||
"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
|
"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
|
||||||
className
|
className,
|
||||||
)}
|
)}
|
||||||
children={children || Fallback}
|
children={children || Fallback}
|
||||||
{...restProps}
|
{...restProps}
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
<span
|
<span
|
||||||
class={cn(
|
class={cn(
|
||||||
"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
|
"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
|
||||||
className
|
className,
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<CalendarPrimitive.YearSelect
|
<CalendarPrimitive.YearSelect
|
||||||
|
|||||||
@@ -51,7 +51,7 @@ get along, so we shut typescript up by casting `value` to `never`.
|
|||||||
{disableDaysOutsideMonth}
|
{disableDaysOutsideMonth}
|
||||||
class={cn(
|
class={cn(
|
||||||
"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
|
"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
|
||||||
className
|
className,
|
||||||
)}
|
)}
|
||||||
{locale}
|
{locale}
|
||||||
{monthFormat}
|
{monthFormat}
|
||||||
|
|||||||
@@ -24,7 +24,7 @@
|
|||||||
{align}
|
{align}
|
||||||
class={cn(
|
class={cn(
|
||||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
|
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
|
||||||
className
|
className,
|
||||||
)}
|
)}
|
||||||
{...restProps}
|
{...restProps}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -17,10 +17,12 @@
|
|||||||
|
|
||||||
<div class="min-h-screen bg-background">
|
<div class="min-h-screen bg-background">
|
||||||
<div class="container mx-auto px-4">
|
<div class="container mx-auto px-4">
|
||||||
|
|
||||||
<!-- Mobile top nav -->
|
<!-- Mobile top nav -->
|
||||||
<div class="lg:hidden flex items-center gap-2 py-3 border-b border-border/40">
|
<div class="lg:hidden flex items-center gap-2 py-3 border-b border-border/40">
|
||||||
<a href="/" class="text-xs text-muted-foreground hover:text-foreground transition-colors shrink-0 mr-2">
|
<a
|
||||||
|
href="/"
|
||||||
|
class="text-xs text-muted-foreground hover:text-foreground transition-colors shrink-0 mr-2"
|
||||||
|
>
|
||||||
{$_("admin.nav.back_mobile")}
|
{$_("admin.nav.back_mobile")}
|
||||||
</a>
|
</a>
|
||||||
{#each navLinks as link (link.href)}
|
{#each navLinks as link (link.href)}
|
||||||
|
|||||||
@@ -5,7 +5,10 @@ export async function load({ params, fetch, cookies }) {
|
|||||||
const token = cookies.get("session_token") || "";
|
const token = cookies.get("session_token") || "";
|
||||||
const [articles, modelsResult] = await Promise.all([
|
const [articles, modelsResult] = await Promise.all([
|
||||||
adminListArticles(fetch, token).catch(() => []),
|
adminListArticles(fetch, token).catch(() => []),
|
||||||
adminListUsers({ role: "model", limit: 200 }, fetch, token).catch(() => ({ items: [], total: 0 })),
|
adminListUsers({ role: "model", limit: 200 }, fetch, token).catch(() => ({
|
||||||
|
items: [],
|
||||||
|
total: 0,
|
||||||
|
})),
|
||||||
]);
|
]);
|
||||||
const article = articles.find((a) => a.id === params.id);
|
const article = articles.find((a) => a.id === params.id);
|
||||||
if (!article) throw error(404, "Article not found");
|
if (!article) throw error(404, "Article not found");
|
||||||
|
|||||||
@@ -107,13 +107,13 @@
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class={`px-3 py-1 transition-colors ${editorTab === "write" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
|
class={`px-3 py-1 transition-colors ${editorTab === "write" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
|
||||||
onclick={() => (editorTab = "write")}
|
onclick={() => (editorTab = "write")}>{$_("admin.common.write")}</button
|
||||||
>{$_("admin.common.write")}</button>
|
>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class={`px-3 py-1 transition-colors ${editorTab === "preview" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
|
class={`px-3 py-1 transition-colors ${editorTab === "preview" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
|
||||||
onclick={() => (editorTab = "preview")}
|
onclick={() => (editorTab = "preview")}>{$_("admin.common.preview")}</button
|
||||||
>{$_("admin.common.preview")}</button>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sm:grid sm:grid-cols-2 sm:gap-4 min-h-96">
|
<div class="sm:grid sm:grid-cols-2 sm:gap-4 min-h-96">
|
||||||
@@ -127,7 +127,9 @@
|
|||||||
{#if preview}
|
{#if preview}
|
||||||
{@html preview}
|
{@html preview}
|
||||||
{:else}
|
{:else}
|
||||||
<p class="text-muted-foreground italic text-sm">{$_("admin.article_form.preview_placeholder")}</p>
|
<p class="text-muted-foreground italic text-sm">
|
||||||
|
{$_("admin.article_form.preview_placeholder")}
|
||||||
|
</p>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -152,7 +154,11 @@
|
|||||||
<SelectTrigger class="w-full">
|
<SelectTrigger class="w-full">
|
||||||
{#if selectedAuthor}
|
{#if selectedAuthor}
|
||||||
{#if selectedAuthor.avatar}
|
{#if selectedAuthor.avatar}
|
||||||
<img src={getAssetUrl(selectedAuthor.avatar, "mini")} alt="" class="h-5 w-5 rounded-full object-cover shrink-0" />
|
<img
|
||||||
|
src={getAssetUrl(selectedAuthor.avatar, "mini")}
|
||||||
|
alt=""
|
||||||
|
class="h-5 w-5 rounded-full object-cover shrink-0"
|
||||||
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
{selectedAuthor.artist_name}
|
{selectedAuthor.artist_name}
|
||||||
{:else}
|
{:else}
|
||||||
@@ -164,7 +170,11 @@
|
|||||||
{#each data.authors as author (author.id)}
|
{#each data.authors as author (author.id)}
|
||||||
<SelectItem value={author.id}>
|
<SelectItem value={author.id}>
|
||||||
{#if author.avatar}
|
{#if author.avatar}
|
||||||
<img src={getAssetUrl(author.avatar, "mini")} alt="" class="h-5 w-5 rounded-full object-cover shrink-0" />
|
<img
|
||||||
|
src={getAssetUrl(author.avatar, "mini")}
|
||||||
|
alt=""
|
||||||
|
class="h-5 w-5 rounded-full object-cover shrink-0"
|
||||||
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
{author.artist_name}
|
{author.artist_name}
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
@@ -195,7 +205,11 @@
|
|||||||
</label>
|
</label>
|
||||||
|
|
||||||
<div class="flex gap-3 pt-2">
|
<div class="flex gap-3 pt-2">
|
||||||
<Button onclick={handleSubmit} disabled={saving} class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
|
<Button
|
||||||
|
onclick={handleSubmit}
|
||||||
|
disabled={saving}
|
||||||
|
class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
|
||||||
|
>
|
||||||
{saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
|
{saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outline" href="/admin/articles">{$_("common.cancel")}</Button>
|
<Button variant="outline" href="/admin/articles">{$_("common.cancel")}</Button>
|
||||||
|
|||||||
@@ -98,13 +98,22 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="space-y-1.5">
|
<div class="space-y-1.5">
|
||||||
<Label for="slug">{$_("admin.common.slug_field")}</Label>
|
<Label for="slug">{$_("admin.common.slug_field")}</Label>
|
||||||
<Input id="slug" bind:value={slug} placeholder={$_("admin.article_form.slug_placeholder")} />
|
<Input
|
||||||
|
id="slug"
|
||||||
|
bind:value={slug}
|
||||||
|
placeholder={$_("admin.article_form.slug_placeholder")}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="space-y-1.5">
|
<div class="space-y-1.5">
|
||||||
<Label for="excerpt">{$_("admin.article_form.excerpt")}</Label>
|
<Label for="excerpt">{$_("admin.article_form.excerpt")}</Label>
|
||||||
<Textarea id="excerpt" bind:value={excerpt} placeholder={$_("admin.article_form.excerpt_placeholder")} rows={2} />
|
<Textarea
|
||||||
|
id="excerpt"
|
||||||
|
bind:value={excerpt}
|
||||||
|
placeholder={$_("admin.article_form.excerpt_placeholder")}
|
||||||
|
rows={2}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Markdown editor with live preview -->
|
<!-- Markdown editor with live preview -->
|
||||||
@@ -115,13 +124,13 @@
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class={`px-3 py-1 transition-colors ${editorTab === "write" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
|
class={`px-3 py-1 transition-colors ${editorTab === "write" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
|
||||||
onclick={() => (editorTab = "write")}
|
onclick={() => (editorTab = "write")}>{$_("admin.common.write")}</button
|
||||||
>{$_("admin.common.write")}</button>
|
>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class={`px-3 py-1 transition-colors ${editorTab === "preview" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
|
class={`px-3 py-1 transition-colors ${editorTab === "preview" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
|
||||||
onclick={() => (editorTab = "preview")}
|
onclick={() => (editorTab = "preview")}>{$_("admin.common.preview")}</button
|
||||||
>{$_("admin.common.preview")}</button>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Mobile: single pane toggled; Desktop: side by side -->
|
<!-- Mobile: single pane toggled; Desktop: side by side -->
|
||||||
@@ -137,7 +146,9 @@
|
|||||||
{#if preview}
|
{#if preview}
|
||||||
{@html preview}
|
{@html preview}
|
||||||
{:else}
|
{:else}
|
||||||
<p class="text-muted-foreground italic text-sm">{$_("admin.article_form.preview_placeholder")}</p>
|
<p class="text-muted-foreground italic text-sm">
|
||||||
|
{$_("admin.article_form.preview_placeholder")}
|
||||||
|
</p>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -146,13 +157,19 @@
|
|||||||
<div class="space-y-1.5">
|
<div class="space-y-1.5">
|
||||||
<Label>{$_("admin.common.cover_image")}</Label>
|
<Label>{$_("admin.common.cover_image")}</Label>
|
||||||
<FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleImageUpload} />
|
<FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleImageUpload} />
|
||||||
{#if imageId}<p class="text-xs text-green-600 mt-1">{$_("admin.common.image_uploaded")} ✓</p>{/if}
|
{#if imageId}<p class="text-xs text-green-600 mt-1">
|
||||||
|
{$_("admin.common.image_uploaded")} ✓
|
||||||
|
</p>{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
<div class="space-y-1.5">
|
<div class="space-y-1.5">
|
||||||
<Label for="category">{$_("admin.article_form.category")}</Label>
|
<Label for="category">{$_("admin.article_form.category")}</Label>
|
||||||
<Input id="category" bind:value={category} placeholder={$_("admin.article_form.category_placeholder")} />
|
<Input
|
||||||
|
id="category"
|
||||||
|
bind:value={category}
|
||||||
|
placeholder={$_("admin.article_form.category_placeholder")}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-1.5">
|
<div class="space-y-1.5">
|
||||||
<Label>{$_("admin.common.publish_date")}</Label>
|
<Label>{$_("admin.common.publish_date")}</Label>
|
||||||
@@ -171,7 +188,11 @@
|
|||||||
</label>
|
</label>
|
||||||
|
|
||||||
<div class="flex gap-3 pt-2">
|
<div class="flex gap-3 pt-2">
|
||||||
<Button onclick={handleSubmit} disabled={saving} class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
|
<Button
|
||||||
|
onclick={handleSubmit}
|
||||||
|
disabled={saving}
|
||||||
|
class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
|
||||||
|
>
|
||||||
{saving ? $_("admin.common.creating") : $_("admin.article_form.create")}
|
{saving ? $_("admin.common.creating") : $_("admin.article_form.create")}
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outline" href="/admin/articles">{$_("common.cancel")}</Button>
|
<Button variant="outline" href="/admin/articles">{$_("common.cancel")}</Button>
|
||||||
|
|||||||
@@ -87,7 +87,9 @@
|
|||||||
<div class="py-3 sm:py-6 sm:pl-6">
|
<div class="py-3 sm:py-6 sm:pl-6">
|
||||||
<div class="flex items-center justify-between mb-6 px-3 sm:px-0">
|
<div class="flex items-center justify-between mb-6 px-3 sm:px-0">
|
||||||
<h1 class="text-2xl font-bold">{$_("admin.users.title")}</h1>
|
<h1 class="text-2xl font-bold">{$_("admin.users.title")}</h1>
|
||||||
<span class="text-sm text-muted-foreground">{$_("admin.users.total", { values: { total: data.total } })}</span>
|
<span class="text-sm text-muted-foreground"
|
||||||
|
>{$_("admin.users.total", { values: { total: data.total } })}</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Filters -->
|
<!-- Filters -->
|
||||||
@@ -120,11 +122,21 @@
|
|||||||
<table class="w-full text-sm">
|
<table class="w-full text-sm">
|
||||||
<thead class="bg-muted/30">
|
<thead class="bg-muted/30">
|
||||||
<tr>
|
<tr>
|
||||||
<th class="px-4 py-3 text-left font-medium text-muted-foreground">{$_("admin.users.col_user")}</th>
|
<th class="px-4 py-3 text-left font-medium text-muted-foreground"
|
||||||
<th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell">{$_("admin.users.col_email")}</th>
|
>{$_("admin.users.col_user")}</th
|
||||||
<th class="px-4 py-3 text-left font-medium text-muted-foreground">{$_("admin.users.col_role")}</th>
|
>
|
||||||
<th class="px-4 py-3 text-left font-medium text-muted-foreground hidden md:table-cell">{$_("admin.users.col_joined")}</th>
|
<th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell"
|
||||||
<th class="px-4 py-3 text-right font-medium text-muted-foreground">{$_("admin.users.col_actions")}</th>
|
>{$_("admin.users.col_email")}</th
|
||||||
|
>
|
||||||
|
<th class="px-4 py-3 text-left font-medium text-muted-foreground"
|
||||||
|
>{$_("admin.users.col_role")}</th
|
||||||
|
>
|
||||||
|
<th class="px-4 py-3 text-left font-medium text-muted-foreground hidden md:table-cell"
|
||||||
|
>{$_("admin.users.col_joined")}</th
|
||||||
|
>
|
||||||
|
<th class="px-4 py-3 text-right font-medium text-muted-foreground"
|
||||||
|
>{$_("admin.users.col_actions")}</th
|
||||||
|
>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody class="divide-y divide-border/30">
|
<tbody class="divide-y divide-border/30">
|
||||||
@@ -147,12 +159,18 @@
|
|||||||
{/if}
|
{/if}
|
||||||
<div class="min-w-0">
|
<div class="min-w-0">
|
||||||
<div class="flex items-center gap-1.5">
|
<div class="flex items-center gap-1.5">
|
||||||
<span class="font-medium truncate">{user.artist_name || user.first_name || "—"}</span>
|
<span class="font-medium truncate"
|
||||||
|
>{user.artist_name || user.first_name || "—"}</span
|
||||||
|
>
|
||||||
{#if user.is_admin}
|
{#if user.is_admin}
|
||||||
<Badge variant="default" class="shrink-0 text-[10px] px-1.5 py-0">{$_("admin.users.admin_badge")}</Badge>
|
<Badge variant="default" class="shrink-0 text-[10px] px-1.5 py-0"
|
||||||
|
>{$_("admin.users.admin_badge")}</Badge
|
||||||
|
>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<span class="text-xs text-muted-foreground sm:hidden truncate block">{user.email}</span>
|
<span class="text-xs text-muted-foreground sm:hidden truncate block"
|
||||||
|
>{user.email}</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
@@ -173,7 +191,9 @@
|
|||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
</td>
|
</td>
|
||||||
<td class="px-4 py-3 text-muted-foreground hidden md:table-cell">{formatDate(user.date_created)}</td>
|
<td class="px-4 py-3 text-muted-foreground hidden md:table-cell"
|
||||||
|
>{formatDate(user.date_created)}</td
|
||||||
|
>
|
||||||
<td class="px-4 py-3 text-right">
|
<td class="px-4 py-3 text-right">
|
||||||
<div class="flex items-center justify-end gap-1">
|
<div class="flex items-center justify-end gap-1">
|
||||||
<Button size="sm" variant="ghost" href="/admin/users/{user.id}">
|
<Button size="sm" variant="ghost" href="/admin/users/{user.id}">
|
||||||
@@ -195,7 +215,9 @@
|
|||||||
|
|
||||||
{#if data.items.length === 0}
|
{#if data.items.length === 0}
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="5" class="px-4 py-8 text-center text-muted-foreground">{$_("admin.users.no_results")}</td>
|
<td colspan="5" class="px-4 py-8 text-center text-muted-foreground"
|
||||||
|
>{$_("admin.users.no_results")}</td
|
||||||
|
>
|
||||||
</tr>
|
</tr>
|
||||||
{/if}
|
{/if}
|
||||||
</tbody>
|
</tbody>
|
||||||
@@ -206,7 +228,13 @@
|
|||||||
{#if data.total > data.limit}
|
{#if data.total > data.limit}
|
||||||
<div class="flex items-center justify-between mt-4 px-3 sm:px-0">
|
<div class="flex items-center justify-between mt-4 px-3 sm:px-0">
|
||||||
<span class="text-sm text-muted-foreground">
|
<span class="text-sm text-muted-foreground">
|
||||||
{$_("admin.users.showing", { values: { start: data.offset + 1, end: Math.min(data.offset + data.limit, data.total), total: data.total } })}
|
{$_("admin.users.showing", {
|
||||||
|
values: {
|
||||||
|
start: data.offset + 1,
|
||||||
|
end: Math.min(data.offset + data.limit, data.total),
|
||||||
|
total: data.total,
|
||||||
|
},
|
||||||
|
})}
|
||||||
</span>
|
</span>
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
<Button
|
<Button
|
||||||
@@ -244,7 +272,9 @@
|
|||||||
<Dialog.Header>
|
<Dialog.Header>
|
||||||
<Dialog.Title>{$_("admin.users.delete_title")}</Dialog.Title>
|
<Dialog.Title>{$_("admin.users.delete_title")}</Dialog.Title>
|
||||||
<Dialog.Description>
|
<Dialog.Description>
|
||||||
{$_("admin.users.delete_description", { values: { name: deleteTarget?.artist_name || deleteTarget?.email } })}
|
{$_("admin.users.delete_description", {
|
||||||
|
values: { name: deleteTarget?.artist_name || deleteTarget?.email },
|
||||||
|
})}
|
||||||
</Dialog.Description>
|
</Dialog.Description>
|
||||||
</Dialog.Header>
|
</Dialog.Header>
|
||||||
<Dialog.Footer>
|
<Dialog.Footer>
|
||||||
|
|||||||
@@ -106,7 +106,11 @@
|
|||||||
</Button>
|
</Button>
|
||||||
<div>
|
<div>
|
||||||
<h1 class="text-2xl font-bold">{data.user.artist_name || data.user.email}</h1>
|
<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}{data.user.is_admin ? " · " + $_("admin.users.admin_badge").toLowerCase() : ""}</p>
|
<p class="text-xs text-muted-foreground">
|
||||||
|
{data.user.email} · {data.user.role}{data.user.is_admin
|
||||||
|
? " · " + $_("admin.users.admin_badge").toLowerCase()
|
||||||
|
: ""}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -155,8 +159,14 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Admin flag -->
|
<!-- 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">
|
<label
|
||||||
<input type="checkbox" bind:checked={isAdmin} class="h-4 w-4 rounded accent-primary shrink-0" />
|
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>
|
<div>
|
||||||
<span class="text-sm font-medium">{$_("admin.user_edit.is_admin")}</span>
|
<span class="text-sm font-medium">{$_("admin.user_edit.is_admin")}</span>
|
||||||
<p class="text-xs text-muted-foreground">{$_("admin.user_edit.is_admin_hint")}</p>
|
<p class="text-xs text-muted-foreground">{$_("admin.user_edit.is_admin_hint")}</p>
|
||||||
@@ -164,7 +174,11 @@
|
|||||||
</label>
|
</label>
|
||||||
|
|
||||||
<div class="flex gap-3">
|
<div class="flex gap-3">
|
||||||
<Button onclick={handleSave} disabled={saving} class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
|
<Button
|
||||||
|
onclick={handleSave}
|
||||||
|
disabled={saving}
|
||||||
|
class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
|
||||||
|
>
|
||||||
{saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
|
{saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -97,7 +97,11 @@
|
|||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
<div class="space-y-1.5">
|
<div class="space-y-1.5">
|
||||||
<Label for="title">{$_("admin.common.title_field")}</Label>
|
<Label for="title">{$_("admin.common.title_field")}</Label>
|
||||||
<Input id="title" bind:value={title} placeholder={$_("admin.video_form.title_placeholder")} />
|
<Input
|
||||||
|
id="title"
|
||||||
|
bind:value={title}
|
||||||
|
placeholder={$_("admin.video_form.title_placeholder")}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-1.5">
|
<div class="space-y-1.5">
|
||||||
<Label for="slug">{$_("admin.common.slug_field")}</Label>
|
<Label for="slug">{$_("admin.common.slug_field")}</Label>
|
||||||
@@ -107,7 +111,12 @@
|
|||||||
|
|
||||||
<div class="space-y-1.5">
|
<div class="space-y-1.5">
|
||||||
<Label for="description">{$_("admin.video_form.description")}</Label>
|
<Label for="description">{$_("admin.video_form.description")}</Label>
|
||||||
<Textarea id="description" bind:value={description} placeholder={$_("admin.video_form.description_placeholder")} rows={3} />
|
<Textarea
|
||||||
|
id="description"
|
||||||
|
bind:value={description}
|
||||||
|
placeholder={$_("admin.video_form.description_placeholder")}
|
||||||
|
rows={3}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="space-y-1.5">
|
<div class="space-y-1.5">
|
||||||
@@ -127,7 +136,7 @@
|
|||||||
{#if movieId}
|
{#if movieId}
|
||||||
<video
|
<video
|
||||||
src={getAssetUrl(movieId)}
|
src={getAssetUrl(movieId)}
|
||||||
poster={imageId ? getAssetUrl(imageId, "preview") ?? undefined : undefined}
|
poster={imageId ? (getAssetUrl(imageId, "preview") ?? undefined) : undefined}
|
||||||
controls
|
controls
|
||||||
class="w-full rounded-lg bg-black max-h-72 mb-2"
|
class="w-full rounded-lg bg-black max-h-72 mb-2"
|
||||||
></video>
|
></video>
|
||||||
@@ -142,7 +151,11 @@
|
|||||||
|
|
||||||
<div class="space-y-1.5">
|
<div class="space-y-1.5">
|
||||||
<Label>{$_("admin.common.publish_date")}</Label>
|
<Label>{$_("admin.common.publish_date")}</Label>
|
||||||
<DatePicker bind:value={uploadDate} placeholder={$_("admin.common.publish_date")} showTime={false} />
|
<DatePicker
|
||||||
|
bind:value={uploadDate}
|
||||||
|
placeholder={$_("admin.common.publish_date")}
|
||||||
|
showTime={false}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex gap-6">
|
<div class="flex gap-6">
|
||||||
@@ -162,7 +175,9 @@
|
|||||||
<Select type="multiple" bind:value={selectedModelIds}>
|
<Select type="multiple" bind:value={selectedModelIds}>
|
||||||
<SelectTrigger class="w-full">
|
<SelectTrigger class="w-full">
|
||||||
{#if selectedModelIds.length}
|
{#if selectedModelIds.length}
|
||||||
{$_("admin.video_form.models_selected", { values: { count: selectedModelIds.length } })}
|
{$_("admin.video_form.models_selected", {
|
||||||
|
values: { count: selectedModelIds.length },
|
||||||
|
})}
|
||||||
{:else}
|
{:else}
|
||||||
<span class="text-muted-foreground">{$_("admin.video_form.no_models")}</span>
|
<span class="text-muted-foreground">{$_("admin.video_form.no_models")}</span>
|
||||||
{/if}
|
{/if}
|
||||||
@@ -171,7 +186,11 @@
|
|||||||
{#each data.models as model (model.id)}
|
{#each data.models as model (model.id)}
|
||||||
<SelectItem value={model.id}>
|
<SelectItem value={model.id}>
|
||||||
{#if model.avatar}
|
{#if model.avatar}
|
||||||
<img src={getAssetUrl(model.avatar, "mini")} alt="" class="h-5 w-5 rounded-full object-cover shrink-0" />
|
<img
|
||||||
|
src={getAssetUrl(model.avatar, "mini")}
|
||||||
|
alt=""
|
||||||
|
class="h-5 w-5 rounded-full object-cover shrink-0"
|
||||||
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
{model.artist_name}
|
{model.artist_name}
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
@@ -182,7 +201,11 @@
|
|||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="flex gap-3 pt-2">
|
<div class="flex gap-3 pt-2">
|
||||||
<Button onclick={handleSubmit} disabled={saving} class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
|
<Button
|
||||||
|
onclick={handleSubmit}
|
||||||
|
disabled={saving}
|
||||||
|
class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
|
||||||
|
>
|
||||||
{saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
|
{saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outline" href="/admin/videos">{$_("common.cancel")}</Button>
|
<Button variant="outline" href="/admin/videos">{$_("common.cancel")}</Button>
|
||||||
|
|||||||
@@ -137,13 +137,17 @@
|
|||||||
<div class="space-y-1.5">
|
<div class="space-y-1.5">
|
||||||
<Label>{$_("admin.common.cover_image")}</Label>
|
<Label>{$_("admin.common.cover_image")}</Label>
|
||||||
<FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleImageUpload} />
|
<FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleImageUpload} />
|
||||||
{#if imageId}<p class="text-xs text-green-600 mt-1">{$_("admin.common.image_uploaded")} ✓</p>{/if}
|
{#if imageId}<p class="text-xs text-green-600 mt-1">
|
||||||
|
{$_("admin.common.image_uploaded")} ✓
|
||||||
|
</p>{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="space-y-1.5">
|
<div class="space-y-1.5">
|
||||||
<Label>{$_("admin.video_form.video_file")}</Label>
|
<Label>{$_("admin.video_form.video_file")}</Label>
|
||||||
<FileDropZone accept="video/*" maxFileSize={2000 * MEGABYTE} onUpload={handleVideoUpload} />
|
<FileDropZone accept="video/*" maxFileSize={2000 * MEGABYTE} onUpload={handleVideoUpload} />
|
||||||
{#if movieId}<p class="text-xs text-green-600 mt-1">{$_("admin.video_form.video_uploaded")} ✓</p>{/if}
|
{#if movieId}<p class="text-xs text-green-600 mt-1">
|
||||||
|
{$_("admin.video_form.video_uploaded")} ✓
|
||||||
|
</p>{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="space-y-1.5">
|
<div class="space-y-1.5">
|
||||||
@@ -153,7 +157,11 @@
|
|||||||
|
|
||||||
<div class="space-y-1.5">
|
<div class="space-y-1.5">
|
||||||
<Label>{$_("admin.common.publish_date")}</Label>
|
<Label>{$_("admin.common.publish_date")}</Label>
|
||||||
<DatePicker bind:value={uploadDate} placeholder={$_("admin.common.publish_date")} showTime={false} />
|
<DatePicker
|
||||||
|
bind:value={uploadDate}
|
||||||
|
placeholder={$_("admin.common.publish_date")}
|
||||||
|
showTime={false}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex gap-6">
|
<div class="flex gap-6">
|
||||||
@@ -189,7 +197,11 @@
|
|||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="flex gap-3 pt-2">
|
<div class="flex gap-3 pt-2">
|
||||||
<Button onclick={handleSubmit} disabled={saving} class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
|
<Button
|
||||||
|
onclick={handleSubmit}
|
||||||
|
disabled={saving}
|
||||||
|
class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
|
||||||
|
>
|
||||||
{saving ? $_("admin.common.creating") : $_("admin.video_form.create")}
|
{saving ? $_("admin.common.creating") : $_("admin.video_form.create")}
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outline" href="/admin/videos">{$_("common.cancel")}</Button>
|
<Button variant="outline" href="/admin/videos">{$_("common.cancel")}</Button>
|
||||||
|
|||||||
Reference in New Issue
Block a user