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

i18n: internationalize all admin pages

Browse Source 
Add full i18n coverage for the admin section — locale keys, layout nav,
users, videos, and articles pages (list, new, edit).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-03-06 16:49:30 +01:00
parent 95fd9f48fc
commit 7d373b3aa3
10 changed files with 330 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
packages/frontend/src/routes/admin/videos/+page.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
import { invalidateAll } from "$app/navigation";
import { toast } from "svelte-sonner";
import { _ } from "svelte-i18n";
import { deleteVideo } from "$lib/services";
import { getAssetUrl } from "$lib/api";
import { Button } from "$lib/components/ui/button";
@@ -24,12 +25,12 @@
deleting = true;
try {
await deleteVideo(deleteTarget.id);
toast.success("Video deleted");
toast.success($_("admin.videos.delete_success"));
deleteOpen = false;
deleteTarget = null;
await invalidateAll();
} catch {
toast.error("Failed to delete video");
toast.error($_("admin.videos.delete_error"));
} finally {
deleting = false;
}
@@ -38,9 +39,9 @@
<div class="p-3 sm:p-6">
<div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold">Videos</h1>
<h1 class="text-2xl font-bold">{$_("admin.videos.title")}</h1>
<Button href="/admin/videos/new">
<span class="icon-[ri--add-line] h-4 w-4 mr-1"></span>New video
<span class="icon-[ri--add-line] h-4 w-4 mr-1"></span>{$_("admin.videos.new_video")}
</Button>
</div>
@@ -48,11 +49,11 @@
<table class="w-full text-sm">
<thead class="bg-muted/30">
<tr>
<th class="px-4 py-3 text-left font-medium text-muted-foreground">Video</th>
<th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell">Badges</th>
<th class="px-4 py-3 text-left font-medium text-muted-foreground hidden md:table-cell">Plays</th>
<th class="px-4 py-3 text-left font-medium text-muted-foreground hidden md:table-cell">Likes</th>
<th class="px-4 py-3 text-right font-medium text-muted-foreground">Actions</th>
<th class="px-4 py-3 text-left font-medium text-muted-foreground">{$_("admin.videos.col_video")}</th>
<th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell">{$_("admin.videos.col_badges")}</th>
<th class="px-4 py-3 text-left font-medium text-muted-foreground hidden md:table-cell">{$_("admin.videos.col_plays")}</th>
<th class="px-4 py-3 text-left font-medium text-muted-foreground hidden md:table-cell">{$_("admin.videos.col_likes")}</th>
<th class="px-4 py-3 text-right font-medium text-muted-foreground">{$_("admin.users.col_actions")}</th>
</tr>
</thead>
<tbody class="divide-y divide-border/30">
@@ -82,10 +83,10 @@
<td class="px-4 py-3 hidden sm:table-cell">
<div class="flex gap-1">
{#if video.premium}
<Badge variant="outline" class="text-yellow-600 border-yellow-500/40 bg-yellow-500/10">Premium</Badge>
<Badge variant="outline" class="text-yellow-600 border-yellow-500/40 bg-yellow-500/10">{$_("admin.common.premium")}</Badge>
{/if}
{#if video.featured}
<Badge variant="default">Featured</Badge>
<Badge variant="default">{$_("admin.common.featured")}</Badge>
{/if}
</div>
</td>
@@ -111,7 +112,7 @@
{#if data.videos.length === 0}
<tr>
<td colspan="5" class="px-4 py-8 text-center text-muted-foreground">No videos yet</td>
<td colspan="5" class="px-4 py-8 text-center text-muted-foreground">{$_("admin.videos.no_results")}</td>
</tr>
{/if}
</tbody>
@@ -122,15 +123,15 @@
<Dialog.Root bind:open={deleteOpen}>
<Dialog.Content>
<Dialog.Header>
<Dialog.Title>Delete video</Dialog.Title>
<Dialog.Title>{$_("admin.videos.delete_title")}</Dialog.Title>
<Dialog.Description>
Permanently delete <strong>{deleteTarget?.title}</strong>? This cannot be undone.
{$_("admin.videos.delete_description", { values: { title: deleteTarget?.title } })}
</Dialog.Description>
</Dialog.Header>
<Dialog.Footer>
<Button variant="outline" onclick={() => (deleteOpen = false)}>Cancel</Button>
<Button variant="outline" onclick={() => (deleteOpen = false)}>{$_("common.cancel")}</Button>
<Button variant="destructive" disabled={deleting} onclick={handleDelete}>
{deleting ? "Deleting…" : "Delete"}
{deleting ? $_("admin.common.deleting") : $_("common.delete")}
</Button>
</Dialog.Footer>
</Dialog.Content>

53
packages/frontend/src/routes/admin/videos/[id]/+page.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
import { goto } from "$app/navigation";
import { toast } from "svelte-sonner";
import { _ } from "svelte-i18n";
import { updateVideo, setVideoModels, uploadFile } from "$lib/services";
import { Button } from "$lib/components/ui/button";
import { Input } from "$lib/components/ui/input";
@@ -37,9 +38,9 @@
try {
const res = await uploadFile(fd);
imageId = res.id;
toast.success("Cover image uploaded");
toast.success($_("admin.video_form.cover_uploaded"));
} catch {
toast.error("Image upload failed");
toast.error($_("admin.common.image_upload_failed"));
}
}
@@ -51,9 +52,9 @@
try {
const res = await uploadFile(fd);
movieId = res.id;
toast.success("Video uploaded");
toast.success($_("admin.video_form.video_uploaded"));
} catch {
toast.error("Video upload failed");
toast.error($_("admin.video_form.video_upload_failed"));
}
}
@@ -73,10 +74,10 @@
uploadDate: uploadDate || undefined,
});
await setVideoModels(data.video.id, selectedModelIds);
toast.success("Video updated");
toast.success($_("admin.video_form.update_success"));
goto("/admin/videos");
} catch (e: any) {
toast.error(e?.message ?? "Failed to update video");
toast.error(e?.message ?? $_("admin.video_form.update_error"));
} finally {
saving = false;
}
@@ -86,30 +87,30 @@
<div class="p-3 sm:p-6 max-w-2xl">
<div class="flex items-center gap-4 mb-6">
<Button variant="ghost" href="/admin/videos" size="sm">
<span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>Back
<span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>{$_("common.back")}
</Button>
<h1 class="text-2xl font-bold">Edit video</h1>
<h1 class="text-2xl font-bold">{$_("admin.video_form.edit_title")}</h1>
</div>
<div class="space-y-5">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="space-y-1.5">
<Label for="title">Title *</Label>
<Input id="title" bind:value={title} placeholder="Video title" />
<Label for="title">{$_("admin.common.title_field")}</Label>
<Input id="title" bind:value={title} placeholder={$_("admin.video_form.title_placeholder")} />
</div>
<div class="space-y-1.5">
<Label for="slug">Slug *</Label>
<Input id="slug" bind:value={slug} placeholder="video-slug" />
<Label for="slug">{$_("admin.common.slug_field")}</Label>
<Input id="slug" bind:value={slug} placeholder={$_("admin.video_form.slug_placeholder")} />
</div>
</div>
<div class="space-y-1.5">
<Label for="description">Description</Label>
<Textarea id="description" bind:value={description} rows={3} />
<Label for="description">{$_("admin.video_form.description")}</Label>
<Textarea id="description" bind:value={description} placeholder={$_("admin.video_form.description_placeholder")} rows={3} />
</div>
<div class="space-y-1.5">
<Label>Cover image</Label>
<Label>{$_("admin.common.cover_image")}</Label>
{#if imageId}
<img
src={getAssetUrl(imageId, "thumbnail")}
@@ -121,43 +122,43 @@
</div>
<div class="space-y-1.5">
<Label>Video file</Label>
<Label>{$_("admin.video_form.video_file")}</Label>
{#if movieId}
<p class="text-xs text-muted-foreground mb-1">Current file: {movieId}</p>
<p class="text-xs text-muted-foreground mb-1">{$_("admin.video_form.current_file", { values: { id: movieId } })}</p>
{/if}
<FileDropZone accept="video/*" maxFileSize={2000 * MEGABYTE} onUpload={handleVideoUpload} />
</div>
<div class="space-y-1.5">
<Label>Tags</Label>
<Label>{$_("admin.common.tags")}</Label>
<TagsInput bind:value={tags} />
</div>
<div class="space-y-1.5">
<Label for="uploadDate">Publish date</Label>
<Label for="uploadDate">{$_("admin.common.publish_date")}</Label>
<Input id="uploadDate" type="datetime-local" bind:value={uploadDate} />
</div>
<div class="flex gap-6">
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" bind:checked={premium} class="rounded" />
<span class="text-sm">Premium</span>
<span class="text-sm">{$_("admin.common.premium")}</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" bind:checked={featured} class="rounded" />
<span class="text-sm">Featured</span>
<span class="text-sm">{$_("admin.common.featured")}</span>
</label>
</div>
{#if data.models.length > 0}
<div class="space-y-1.5">
<Label>Models</Label>
<Label>{$_("admin.video_form.models")}</Label>
<Select type="multiple" bind:value={selectedModelIds}>
<SelectTrigger class="w-full">
{#if selectedModelIds.length}
{selectedModelIds.length} model{selectedModelIds.length > 1 ? "s" : ""} selected
{$_("admin.video_form.models_selected", { values: { count: selectedModelIds.length } })}
{:else}
<span class="text-muted-foreground">No models</span>
<span class="text-muted-foreground">{$_("admin.video_form.no_models")}</span>
{/if}
</SelectTrigger>
<SelectContent>
@@ -176,9 +177,9 @@
<div class="flex gap-3 pt-2">
<Button onclick={handleSubmit} disabled={saving}>
{saving ? "Saving…" : "Save changes"}
{saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
</Button>
<Button variant="outline" href="/admin/videos">Cancel</Button>
<Button variant="outline" href="/admin/videos">{$_("common.cancel")}</Button>
</div>
</div>
</div>

51
packages/frontend/src/routes/admin/videos/new/+page.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
import { goto } from "$app/navigation";
import { toast } from "svelte-sonner";
import { _ } from "svelte-i18n";
import { createVideo, setVideoModels, uploadFile } from "$lib/services";
import { Button } from "$lib/components/ui/button";
import { Input } from "$lib/components/ui/input";
@@ -38,9 +39,9 @@
try {
const res = await uploadFile(fd);
imageId = res.id;
toast.success("Cover image uploaded");
toast.success($_("admin.video_form.cover_uploaded"));
} catch {
toast.error("Image upload failed");
toast.error($_("admin.common.image_upload_failed"));
}
}
@@ -52,9 +53,9 @@
try {
const res = await uploadFile(fd);
movieId = res.id;
toast.success("Video uploaded");
toast.success($_("admin.video_form.video_uploaded"));
} catch {
toast.error("Video upload failed");
toast.error($_("admin.video_form.video_upload_failed"));
}
}
@@ -66,7 +67,7 @@
async function handleSubmit() {
if (!title || !slug) {
toast.error("Title and slug are required");
toast.error($_("admin.common.title_slug_required"));
return;
}
saving = true;
@@ -85,10 +86,10 @@
if (selectedModelIds.length > 0) {
await setVideoModels(video.id, selectedModelIds);
}
toast.success("Video created");
toast.success($_("admin.video_form.create_success"));
goto("/admin/videos");
} catch (e: any) {
toast.error(e?.message ?? "Failed to create video");
toast.error(e?.message ?? $_("admin.video_form.create_error"));
} finally {
saving = false;
}
@@ -98,70 +99,70 @@
<div class="p-3 sm:p-6 max-w-2xl">
<div class="flex items-center gap-4 mb-6">
<Button variant="ghost" href="/admin/videos" size="sm">
<span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>Back
<span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>{$_("common.back")}
</Button>
<h1 class="text-2xl font-bold">New video</h1>
<h1 class="text-2xl font-bold">{$_("admin.video_form.new_title")}</h1>
</div>
<div class="space-y-5">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="space-y-1.5">
<Label for="title">Title *</Label>
<Label for="title">{$_("admin.common.title_field")}</Label>
<Input
id="title"
bind:value={title}
oninput={() => {
if (!slug) slug = generateSlug(title);
}}
placeholder="Video title"
placeholder={$_("admin.video_form.title_placeholder")}
/>
</div>
<div class="space-y-1.5">
<Label for="slug">Slug *</Label>
<Input id="slug" bind:value={slug} placeholder="video-slug" />
<Label for="slug">{$_("admin.common.slug_field")}</Label>
<Input id="slug" bind:value={slug} placeholder={$_("admin.video_form.slug_placeholder")} />
</div>
</div>
<div class="space-y-1.5">
<Label for="description">Description</Label>
<Label for="description">{$_("admin.video_form.description")}</Label>
<Textarea
id="description"
bind:value={description}
placeholder="Optional description"
placeholder={$_("admin.video_form.description_placeholder")}
rows={3}
/>
</div>
<div class="space-y-1.5">
<Label>Cover image</Label>
<Label>{$_("admin.common.cover_image")}</Label>
<FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleImageUpload} />
{#if imageId}<p class="text-xs text-green-600 mt-1">Image uploaded ✓</p>{/if}
{#if imageId}<p class="text-xs text-green-600 mt-1">{$_("admin.common.image_uploaded")} ✓</p>{/if}
</div>
<div class="space-y-1.5">
<Label>Video file</Label>
<Label>{$_("admin.video_form.video_file")}</Label>
<FileDropZone accept="video/*" maxFileSize={2000 * MEGABYTE} onUpload={handleVideoUpload} />
{#if movieId}<p class="text-xs text-green-600 mt-1">Video uploaded ✓</p>{/if}
{#if movieId}<p class="text-xs text-green-600 mt-1">{$_("admin.video_form.video_uploaded")} ✓</p>{/if}
</div>
<div class="space-y-1.5">
<Label>Tags</Label>
<Label>{$_("admin.common.tags")}</Label>
<TagsInput bind:value={tags} />
</div>
<div class="space-y-1.5">
<Label for="uploadDate">Publish date</Label>
<Label for="uploadDate">{$_("admin.common.publish_date")}</Label>
<Input id="uploadDate" type="datetime-local" bind:value={uploadDate} />
</div>
<div class="flex gap-6">
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" bind:checked={premium} class="rounded" />
<span class="text-sm">Premium</span>
<span class="text-sm">{$_("admin.common.premium")}</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" bind:checked={featured} class="rounded" />
<span class="text-sm">Featured</span>
<span class="text-sm">{$_("admin.common.featured")}</span>
</label>
</div>
@@ -188,9 +189,9 @@
<div class="flex gap-3 pt-2">
<Button onclick={handleSubmit} disabled={saving}>
{saving ? "Creating…" : "Create video"}
{saving ? $_("admin.common.creating") : $_("admin.video_form.create")}
</Button>
<Button variant="outline" href="/admin/videos">Cancel</Button>
<Button variant="outline" href="/admin/videos">{$_("common.cancel")}</Button>
</div>
</div>
</div>