i18n: internationalize all admin pages

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>

packages/frontend/src/routes/admin/users/+page.svelte

@@ -3,6 +3,7 @@
   import { page } from "$app/state";
   import { SvelteURLSearchParams } from "svelte/reactivity";
   import { toast } from "svelte-sonner";
+  import { _ } from "svelte-i18n";
   import { adminUpdateUser, adminDeleteUser } from "$lib/services";
   import { getAssetUrl } from "$lib/api";
   import { Button } from "$lib/components/ui/button";
@@ -48,10 +49,10 @@
     updatingId = user.id;
     try {
       await adminUpdateUser({ userId: user.id, role: newRole });
-      toast.success(`Role updated to ${newRole}`);
+      toast.success($_("admin.users.role_updated", { values: { role: newRole } }));
       await invalidateAll();
     } catch {
-      toast.error("Failed to update role");
+      toast.error($_("admin.users.role_update_failed"));
     } finally {
       updatingId = null;
     }
@@ -67,12 +68,12 @@
     deleting = true;
     try {
       await adminDeleteUser(deleteTarget.id);
-      toast.success("User deleted");
+      toast.success($_("admin.users.delete_success"));
       deleteOpen = false;
       deleteTarget = null;
       await invalidateAll();
     } catch {
-      toast.error("Failed to delete user");
+      toast.error($_("admin.users.delete_error"));
     } finally {
       deleting = false;
     }
@@ -85,14 +86,14 @@
 
 <div class="p-3 sm:p-6">
   <div class="flex items-center justify-between mb-6">
-    <h1 class="text-2xl font-bold">Users</h1>
-    <span class="text-sm text-muted-foreground">{data.total} total</span>
+    <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>
   </div>
 
   <!-- Filters -->
   <div class="flex flex-wrap gap-3 mb-4">
     <Input
-      placeholder="Search email or name…"
+      placeholder={$_("admin.users.search_placeholder")}
       class="max-w-xs"
       value={searchValue}
       oninput={(e) => {
@@ -108,7 +109,7 @@
           variant={data.role === role || (!data.role && role === "") ? "default" : "outline"}
           onclick={() => setRole(role)}
         >
-          {role || "All"}
+          {role ? $_(`admin.users.role_${role}`) : $_("admin.users.filter_all")}
         </Button>
       {/each}
     </div>
@@ -119,11 +120,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">User</th>
-          <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell">Email</th>
-          <th class="px-4 py-3 text-left font-medium text-muted-foreground">Role</th>
-          <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden md:table-cell">Joined</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.users.col_user")}</th>
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell">{$_("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>
       </thead>
       <tbody class="divide-y divide-border/30">
@@ -148,7 +149,7 @@
                   <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>
+                      <Badge variant="default" class="shrink-0 text-[10px] px-1.5 py-0">{$_("admin.users.admin_badge")}</Badge>
                     {/if}
                   </div>
                   <span class="text-xs text-muted-foreground sm:hidden truncate block">{user.email}</span>
@@ -167,8 +168,8 @@
                   {user.role}
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="viewer">Viewer</SelectItem>
-                  <SelectItem value="model">Model</SelectItem>
+                  <SelectItem value="viewer">{$_("admin.users.role_viewer")}</SelectItem>
+                  <SelectItem value="model">{$_("admin.users.role_model")}</SelectItem>
                 </SelectContent>
               </Select>
             </td>
@@ -194,7 +195,7 @@
 
         {#if data.items.length === 0}
           <tr>
-            <td colspan="5" class="px-4 py-8 text-center text-muted-foreground">No users found</td>
+            <td colspan="5" class="px-4 py-8 text-center text-muted-foreground">{$_("admin.users.no_results")}</td>
           </tr>
         {/if}
       </tbody>
@@ -205,7 +206,7 @@
   {#if data.total > data.limit}
     <div class="flex items-center justify-between mt-4">
       <span class="text-sm text-muted-foreground">
-        Showing {data.offset + 1}–{Math.min(data.offset + data.limit, data.total)} of {data.total}
+        {$_("admin.users.showing", { values: { start: data.offset + 1, end: Math.min(data.offset + data.limit, data.total), total: data.total } })}
       </span>
       <div class="flex gap-2">
         <Button
@@ -218,7 +219,7 @@
             goto(`?${params.toString()}`);
           }}
         >
-          Previous
+          {$_("common.previous")}
         </Button>
         <Button
           size="sm"
@@ -230,7 +231,7 @@
             goto(`?${params.toString()}`);
           }}
         >
-          Next
+          {$_("common.next")}
         </Button>
       </div>
     </div>
@@ -241,17 +242,15 @@
 <Dialog.Root bind:open={deleteOpen}>
   <Dialog.Content>
     <Dialog.Header>
-      <Dialog.Title>Delete user</Dialog.Title>
+      <Dialog.Title>{$_("admin.users.delete_title")}</Dialog.Title>
       <Dialog.Description>
-        Are you sure you want to permanently delete <strong
-          >{deleteTarget?.artist_name || deleteTarget?.email}</strong
-        >? This cannot be undone.
+        {$_("admin.users.delete_description", { values: { name: deleteTarget?.artist_name || deleteTarget?.email } })}
       </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>

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

@@ -8,6 +8,7 @@
     uploadFile,
   } from "$lib/services";
   import { getAssetUrl } from "$lib/api";
+  import { _ } from "svelte-i18n";
   import { Button } from "$lib/components/ui/button";
   import { Input } from "$lib/components/ui/input";
   import { Label } from "$lib/components/ui/label";
@@ -31,9 +32,9 @@
     try {
       const res = await uploadFile(fd);
       avatarId = res.id;
-      toast.success("Avatar uploaded");
+      toast.success($_("admin.user_edit.avatar_uploaded"));
     } catch {
-      toast.error("Avatar upload failed");
+      toast.error($_("admin.user_edit.avatar_failed"));
     }
   }
 
@@ -45,9 +46,9 @@
     try {
       const res = await uploadFile(fd);
       bannerId = res.id;
-      toast.success("Banner uploaded");
+      toast.success($_("admin.user_edit.banner_uploaded"));
     } catch {
-      toast.error("Banner upload failed");
+      toast.error($_("admin.user_edit.banner_failed"));
     }
   }
 
@@ -59,21 +60,21 @@
         const res = await uploadFile(fd);
         await adminAddUserPhoto(data.user.id, res.id);
       } catch {
-        toast.error(`Failed to upload ${file.name}`);
+        toast.error($_("admin.user_edit.photo_upload_failed", { values: { name: file.name } }));
         return;
       }
     }
-    toast.success(`${files.length} photo${files.length > 1 ? "s" : ""} added`);
+    toast.success($_("admin.user_edit.photos_added", { values: { count: files.length } }));
     await invalidateAll();
   }
 
   async function removePhoto(fileId: string) {
     try {
       await adminRemoveUserPhoto(data.user.id, fileId);
-      toast.success("Photo removed");
+      toast.success($_("admin.user_edit.save_success"));
       await invalidateAll();
     } catch {
-      toast.error("Failed to remove photo");
+      toast.error($_("admin.user_edit.photo_remove_failed"));
     }
   }
 
@@ -89,9 +90,9 @@
         bannerId: bannerId || undefined,
         isAdmin,
       });
-      toast.success("Saved");
+      toast.success($_("admin.user_edit.save_success"));
     } catch (e: any) {
-      toast.error(e?.message ?? "Save failed");
+      toast.error(e?.message ?? $_("admin.user_edit.save_error"));
     } finally {
       saving = false;
     }
@@ -101,11 +102,11 @@
 <div class="p-3 sm:p-6 max-w-2xl">
   <div class="flex items-center gap-4 mb-6">
     <Button variant="ghost" href="/admin/users" 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>
     <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}{data.user.is_admin ? " · admin" : ""}</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>
 
@@ -113,23 +114,23 @@
     <!-- Basic info -->
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
       <div class="space-y-1.5">
-        <Label for="firstName">First name</Label>
+        <Label for="firstName">{$_("admin.user_edit.first_name")}</Label>
         <Input id="firstName" bind:value={firstName} />
       </div>
       <div class="space-y-1.5">
-        <Label for="lastName">Last name</Label>
+        <Label for="lastName">{$_("admin.user_edit.last_name")}</Label>
         <Input id="lastName" bind:value={lastName} />
       </div>
     </div>
 
     <div class="space-y-1.5">
-      <Label for="artistName">Artist name</Label>
+      <Label for="artistName">{$_("admin.user_edit.artist_name")}</Label>
       <Input id="artistName" bind:value={artistName} />
     </div>
 
     <!-- Avatar -->
     <div class="space-y-1.5">
-      <Label>Avatar</Label>
+      <Label>{$_("admin.user_edit.avatar")}</Label>
       {#if avatarId}
         <img
           src={getAssetUrl(avatarId, "thumbnail")}
@@ -142,7 +143,7 @@
 
     <!-- Banner -->
     <div class="space-y-1.5">
-      <Label>Banner</Label>
+      <Label>{$_("admin.user_edit.banner")}</Label>
       {#if bannerId}
         <img
           src={getAssetUrl(bannerId, "preview")}
@@ -157,20 +158,20 @@
     <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>
+        <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>
       </div>
     </label>
 
     <div class="flex gap-3">
       <Button onclick={handleSave} disabled={saving}>
-        {saving ? "Saving…" : "Save changes"}
+        {saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
       </Button>
     </div>
 
     <!-- Photo gallery -->
     <div class="space-y-3 pt-4 border-t border-border/40">
-      <Label>Photo gallery</Label>
+      <Label>{$_("admin.user_edit.photos")}</Label>
 
       {#if data.user.photos && data.user.photos.length > 0}
         <div class="grid grid-cols-3 gap-2">
@@ -192,7 +193,7 @@
           {/each}
         </div>
       {:else}
-        <p class="text-sm text-muted-foreground">No photos yet.</p>
+        <p class="text-sm text-muted-foreground">{$_("admin.user_edit.no_photos")}</p>
       {/if}
 
       <FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handlePhotoUpload} />