@kyro-cms/admin 0.12.4 → 0.12.5

package/src/components/GraphQLPlayground.tsx

@@ -197,6 +197,7 @@ import { javascript } from "@codemirror/lang-javascript";
 import { json } from "@codemirror/lang-json";
 import { CompletionContext, autocompletion } from "@codemirror/autocomplete";
 import { aura } from "@uiw/codemirror-theme-aura";
+import { useTranslation } from "react-i18next";
 
 function prettifyQuery(query: string): string {
   let indent = 0;
@@ -421,6 +422,7 @@ export function GraphQLPlayground({
   initialVariables,
   initialShowDocs = false,
 }: GraphQLPlaygroundProps) {
+    const { t } = useTranslation();
   const [token, setToken] = useState<string>("");
   const [showToken, setShowToken] = useState(false);
   const [isConnected, setIsConnected] = useState(false);
@@ -837,7 +839,7 @@ export function GraphQLPlayground({
               type={showToken ? "text" : "password"}
               value={token}
               onChange={(e) => setToken(e.target.value)}
-              placeholder="API key"
+              placeholder={t("fields.apiKey", { defaultValue: "API key" })}
               className="w-24 px-2 py-1 text-[10px] font-mono bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-md text-[var(--kyro-text-primary)] placeholder:text-[var(--kyro-text-muted)] focus:outline-none focus:border-[var(--kyro-primary)]"
             />
             <button onClick={() => setShowToken(!showToken)} className="p-1 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)]">
@@ -846,22 +848,22 @@ export function GraphQLPlayground({
           </div>
         )}
         <div className="ml-auto flex items-center gap-1 flex-wrap justify-end">
-          <button onClick={() => { setShowDocs(!showDocs); setRightTab("docs"); }} className={`p-1.5 rounded-lg transition-all ${rightTab === "docs" && showDocs ? "bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)]" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`} title="Schema docs">
+          <button onClick={() => { setShowDocs(!showDocs); setRightTab("docs"); }} className={`p-1.5 rounded-lg transition-all ${rightTab === "docs" && showDocs ? "bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)]" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`} title={t("tooltips.schemaDocs", { defaultValue: "Schema docs" })}>
             <Book className="w-3.5 h-3.5" />
           </button>
-          <button onClick={() => setRightTab("history")} className={`p-1.5 rounded-lg transition-all ${rightTab === "history" ? "bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)]" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`} title="History">
+          <button onClick={() => setRightTab("history")} className={`p-1.5 rounded-lg transition-all ${rightTab === "history" ? "bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)]" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`} title={t("tooltips.history", { defaultValue: "History" })}>
             <Clock className="w-3.5 h-3.5" />
           </button>
-          <button onClick={handlePrettify} className="p-1.5 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]" title="Prettify (Cmd+Shift+P)">
+          <button onClick={handlePrettify} className="p-1.5 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]" title={t("tooltips.prettifyCmdshiftp", { defaultValue: "Prettify (Cmd+Shift+P)" })}>
             <Code2 className="w-3.5 h-3.5" />
           </button>
-          <button onClick={handleCopyResponse} className="p-1.5 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]" title="Copy response">
+          <button onClick={handleCopyResponse} className="p-1.5 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]" title={t("tooltips.copyResponse", { defaultValue: "Copy response" })}>
             {copied ? <Check className="w-3.5 h-3.5 text-[var(--kyro-success)]" /> : <Copy className="w-3.5 h-3.5" />}
           </button>
-          <button onClick={handleDownloadResponse} className="p-1.5 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]" title="Download response">
+          <button onClick={handleDownloadResponse} className="p-1.5 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]" title={t("tooltips.downloadResponse", { defaultValue: "Download response" })}>
             <Download className="w-3.5 h-3.5" />
           </button>
-          <button onClick={handleClearEditor} className="p-1.5 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-danger)] hover:bg-[var(--kyro-danger-bg)]" title="Clear editor">
+          <button onClick={handleClearEditor} className="p-1.5 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-danger)] hover:bg-[var(--kyro-danger-bg)]" title={t("tooltips.clearEditor", { defaultValue: "Clear editor" })}>
             <Trash2 className="w-3.5 h-3.5" />
           </button>
           <div className="h-4 w-px bg-[var(--kyro-border)] mx-1" />
@@ -977,7 +979,7 @@ export function GraphQLPlayground({
                       type="text"
                       value={searchQuery}
                       onChange={(e) => setSearchQuery(e.target.value)}
-                      placeholder="Search types and fields..."
+                      placeholder={t("fields.searchTypesAndFields", { defaultValue: "Search types and fields..." })}
                       className="w-full pl-7 pr-6 py-1 text-[10px] bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-md text-[var(--kyro-text-primary)] placeholder:text-[var(--kyro-text-muted)] focus:outline-none focus:border-[var(--kyro-primary)]"
                     />
                     {searchQuery && (

package/src/components/ListView.tsx

@@ -11,7 +11,8 @@ import { adminPath as ADMIN_BASE } from "../lib/paths";
 import { PageHeader } from "./ui/PageHeader";
 import { Badge } from "./ui/Badge";
 import { Pagination } from "./ui/Pagination";
-
+import { useTranslation } from "react-i18next";
+import "../lib/i18n";
 
 import type { CollectionConfig, Field } from "@kyro-cms/core";
 import { resolveFieldValue } from "../lib/resolve-field-value";
@@ -60,6 +61,7 @@ export function ListView({
   onEdit: providedOnEdit,
   config,
 }: ListViewProps) {
+  const { t } = useTranslation();
   const collectionSlug = providedSlug || collection.slug;
   const { permissions } = useAuthStore();
   const canCreate = permissions?.collections?.[collectionSlug]?.create !== false;
@@ -71,7 +73,13 @@ export function ListView({
     if (providedOnCreate) {
       providedOnCreate();
     } else {
-      window.location.href = `${ADMIN_BASE}/${collectionSlug}/new`;
+      const href = `${ADMIN_BASE}/${collectionSlug}/new`;
+      // @ts-ignore
+      import("astro:transitions/client").then(({ navigate }) => {
+        navigate(href);
+      }).catch(() => {
+        window.location.href = href;
+      });
     }
   };
 
@@ -79,7 +87,13 @@ export function ListView({
     if (providedOnEdit) {
       providedOnEdit(id);
     } else {
-      window.location.href = `${ADMIN_BASE}/${collectionSlug}/${id}`;
+      const href = `${ADMIN_BASE}/${collectionSlug}/${id}`;
+      // @ts-ignore
+      import("astro:transitions/client").then(({ navigate }) => {
+        navigate(href);
+      }).catch(() => {
+        window.location.href = href;
+      });
     }
   };
 
@@ -201,17 +215,24 @@ export function ListView({
 
   const displayFields = useMemo(
     () => {
-      const fields = allFields.filter((f): f is typeof f & { name: string } => !!f.name && visibleColumns.has(f.name));
-      if (visibleColumns.has("status")) {
-        fields.push({
-          name: "status",
-          type: "select",
-          label: "Status",
-          options: [
-            { value: "draft", label: "Draft" },
-            { value: "published", label: "Published" },
-          ],
-        } as any);
+      const fields: (FieldConfig & { name: string })[] = [];
+      for (const colName of Array.from(visibleColumns)) {
+        if (colName === "status") {
+          fields.push({
+            name: "status",
+            type: "select",
+            label: "Status",
+            options: [
+              { value: "draft", label: "Draft" },
+              { value: "published", label: "Published" },
+            ],
+          } as any);
+        } else {
+          const field = allFields.find((f) => f.name === colName);
+          if (field && field.name) {
+            fields.push(field as typeof field & { name: string });
+          }
+        }
       }
       return fields;
     },
@@ -297,8 +318,8 @@ export function ListView({
 
   const handleBulkDelete = () => {
     confirm({
-      title: "Delete Documents",
-      message: `Are you sure you want to delete ${selectedIds.size} document(s)? This cannot be undone.`,
+      title: t("listView.deleteBulkTitle", { defaultValue: "Delete Documents" }),
+      message: t("listView.deleteBulkMessage", { defaultValue: "Are you sure you want to delete {{count}} document(s)? This cannot be undone.", count: selectedIds.size }),
       variant: "danger",
       onConfirm: async () => {
         try {
@@ -318,8 +339,8 @@ export function ListView({
 
   const handleDeleteSingle = (id: string) => {
     confirm({
-      title: "Delete Document",
-      message: "Are you sure you want to delete this document? This cannot be undone.",
+      title: t("listView.deleteTitle", { defaultValue: "Delete Document" }),
+      message: t("listView.deleteMessage", { defaultValue: "Are you sure you want to delete this document? This cannot be undone." }),
       variant: "danger",
       onConfirm: async () => {
         try {
@@ -348,8 +369,9 @@ export function ListView({
           </span>
         ] : undefined}
         action={canCreate ? {
-          label: `Create ${collection.singularLabel || collection.label || collectionSlug}`,
-          onClick: handleCreate,
+          label: t("actions.create", { defaultValue: "Create {{item}}", item: collection.singularLabel || collection.label || collectionSlug }),
+          href: providedOnCreate ? undefined : `${ADMIN_BASE}/${collectionSlug}/new`,
+          onClick: providedOnCreate ? handleCreate : undefined,
           icon: Plus,
         } : undefined}
 
@@ -363,7 +385,7 @@ export function ListView({
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-muted)]" />
           <input
             type="text"
-            placeholder="Search..."
+            placeholder={t("listView.searchPlaceholder", { defaultValue: "Search..." })}
             value={search}
             onChange={(e) => setSearch(e.target.value)}
             className="w-full pl-10 pr-4 py-2.5 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl text-sm font-medium text-[var(--kyro-text-primary)] placeholder:text-[var(--kyro-text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
@@ -381,7 +403,7 @@ export function ListView({
               }`}
           >
             <Filter className="w-4 h-4" />
-            Filters
+            {t("listView.filters", { defaultValue: "Filters" })}
             {filters.length > 0 && (
               <span className="ml-1 px-1.5 py-0.5 bg-[var(--kyro-sidebar-text-active)] text-[var(--kyro-sidebar-active)] rounded-full text-xs">
                 {filters.length}
@@ -397,13 +419,13 @@ export function ListView({
               className="flex items-center gap-2 px-4 py-2 rounded-xl font-bold text-sm bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-all"
             >
               <Columns3 className="w-4 h-4" />
-              Columns
+              {t("listView.columns", { defaultValue: "Columns" })}
             </button>
             {showColumns && (
               <div className="absolute right-0 top-full mt-2 w-56 surface-tile border border-[var(--kyro-border)] rounded-lg shadow-xl z-50 overflow-hidden">
                 <div className="p-3 border-b border-[var(--kyro-border)]">
                   <span className="text-xs font-bold  tracking-wider text-[var(--kyro-text-secondary)]">
-                    Toggle Columns
+                    {t("listView.toggleColumns", { defaultValue: "Toggle Columns" })}
                   </span>
                 </div>
                 <div className="p-2 max-h-64 overflow-y-auto">
@@ -438,7 +460,7 @@ export function ListView({
               onClick={clearAll}
               className="px-4 py-2 rounded-xl font-bold text-sm text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 transition-all"
             >
-              Clear All
+              {t("listView.clearAll", { defaultValue: "Clear All" })}
             </button>
           )}
         </div>
@@ -449,7 +471,7 @@ export function ListView({
         <div className="surface-tile p-4 border-l-4 border-[var(--kyro-sidebar-active)]">
           <div className="flex items-center justify-between mb-4">
             <h3 className="font-medium text-[var(--kyro-text-primary)]">
-              Advanced Filters
+              {t("listView.advancedFilters", { defaultValue: "Advanced Filters" })}
             </h3>
             <button
               type="button"
@@ -457,7 +479,7 @@ export function ListView({
               className="flex items-center gap-2 px-3 py-1.5 text-sm font-bold text-[var(--kyro-sidebar-active)] hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-all"
             >
               <Plus className="w-4 h-4" />
-              Add Filter
+              {t("listView.addFilter", { defaultValue: "Add Filter" })}
             </button>
           </div>
           <div className="space-y-3">
@@ -498,7 +520,7 @@ export function ListView({
                   onChange={(e) =>
                     updateFilter(index, { value: e.target.value })
                   }
-                  placeholder="Value..."
+                  placeholder={t("fields.value", { defaultValue: "Value..." })}
                   className="flex-1 min-w-[150px] px-3 py-2 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-lg text-sm font-medium text-[var(--kyro-text-primary)]"
                 />
                 <button
@@ -512,7 +534,7 @@ export function ListView({
             ))}
             {filters.length === 0 && (
               <p className="text-sm text-[var(--kyro-text-muted)]">
-                No filters applied. Click "Add Filter" to create one.
+                {t("listView.noFilters", { defaultValue: 'No filters applied. Click "Add Filter" to create one.' })}
               </p>
             )}
           </div>
@@ -523,7 +545,7 @@ export function ListView({
       {selectedIds.size > 0 && (
         <div className="surface-tile p-4 flex items-center justify-between border-l-4 border-[var(--kyro-sidebar-active)]">
           <span className="text-sm font-medium text-[var(--kyro-text-primary)]">
-            {selectedIds.size} selected
+            {t("listView.selectedCount", { defaultValue: "{{count}} selected", count: selectedIds.size })}
           </span>
           <div className="flex gap-2">
             {canDelete && (
@@ -533,7 +555,7 @@ export function ListView({
                 className="flex items-center gap-2 px-4 py-2 bg-red-500 text-white rounded-lg font-bold text-sm hover:bg-red-600 transition-all"
               >
                 <Trash2 className="w-4 h-4" />
-                Delete Selected
+                {t("listView.deleteSelected", { defaultValue: "Delete Selected" })}
               </button>
             )}
             <button
@@ -541,7 +563,7 @@ export function ListView({
               onClick={() => setSelectedIds(new Set())}
               className="px-4 py-2 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] font-bold text-sm transition-all"
             >
-              Cancel
+              {t("actions.cancel", { defaultValue: "Cancel" })}
             </button>
           </div>
         </div>
@@ -559,12 +581,12 @@ export function ListView({
               <Archive className="w-4 h-4" />
             </div>
             <p className="font-medium text-[var(--kyro-text-primary)] text-base">
-              No documents found
+              {t("listView.noDocuments", { defaultValue: "No documents found" })}
             </p>
             <p className="text-sm text-[var(--kyro-text-secondary)] mt-1">
               {hasActiveFilters
-                ? "Try adjusting your filters or search query."
-                : `Get started by creating your first ${((collection.singularLabel || collection.label || collectionSlug) as string).toLowerCase()}.`}
+                ? t("listView.tryAdjustingFilters", { defaultValue: "Try adjusting your filters or search query." })
+                : t("listView.getStartedCreate", { defaultValue: "Get started by creating your first {{item}}.", item: ((collection.singularLabel || collection.label || collectionSlug) as string).toLowerCase() })}
             </p>
             {!hasActiveFilters && canCreate && (
               <button
@@ -573,8 +595,7 @@ export function ListView({
                 className="mt-4 kyro-btn kyro-btn-md kyro-btn-primary shadow-md flex items-center gap-2"
               >
                 <Plus className="w-4 h-4" />
-                Create{" "}
-{String(collection.singularLabel || collection.label || collectionSlug)}
+                {t("actions.create", { defaultValue: "Create {{item}}", item: String(collection.singularLabel || collection.label || collectionSlug) })}
               </button>
             )}
           </div>
@@ -609,12 +630,12 @@ export function ListView({
                     </th>
                   ))}
                   {collection.timestamps ? (
-                    <th className="px-4 py-4">Created</th>
+                    <th className="px-4 py-4">{t("listView.createdCol", { defaultValue: "Created" })}</th>
                   ) : null}
                   {collection.timestamps ? (
-                    <th className="px-4 py-4">Last Modified</th>
+                    <th className="px-4 py-4">{t("listView.lastModifiedCol", { defaultValue: "Last Modified" })}</th>
                   ) : null}
-                  <th className="px-4 py-4 text-right">Actions</th>
+                  <th className="px-4 py-4 text-right">{t("listView.actionsCol", { defaultValue: "Actions" })}</th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-[var(--kyro-border)]">
@@ -641,7 +662,7 @@ export function ListView({
                         field.type === "select" && rawValue && Array.isArray(field.options)
                           ? field.options.find((o: any) => o.value === rawValue)
                             ?.label || rawValue
-                          : formatCellValue(rawValue, field.type);
+                          : formatCellValue(rawValue, field.type, t);
                       return (
                         <td
                           key={field.name}
@@ -688,7 +709,7 @@ export function ListView({
                           type="button"
                           onClick={() => handleEdit(doc.id)}
                           className="flex items-center gap-2 px-3 py-1.5 hover:bg-[var(--kyro-surface-accent)] rounded-lg text-sm font-bold text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-all"
-                          title={canUpdate ? "Edit" : "View"}
+                          title={canUpdate ? t("actions.edit", { defaultValue: "Edit" }) : t("actions.view", { defaultValue: "View" })}
                         >
                           <Edit2 className="w-4 h-4" />
                         </button>
@@ -697,7 +718,7 @@ export function ListView({
                             type="button"
                             onClick={() => handleDeleteSingle(doc.id)}
                             className="inline-flex items-center justify-center w-8 h-8 rounded-md text-[var(--kyro-text-muted)] hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-500/10 transition-colors"
-                            title="Delete"
+                            title={t("actions.delete", { defaultValue: "Delete" })}
                           >
                             <Trash2 className="w-4 h-4" />
                           </button>
@@ -728,9 +749,9 @@ export function ListView({
   );
 }
 
-function formatCellValue(value: any, type?: string): string {
+function formatCellValue(value: any, type?: string, t?: any): string {
   if (value === null || value === undefined) return "—";
-  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (typeof value === "boolean") return value ? (t ? t("common.yes", { defaultValue: "Yes" }) : "Yes") : (t ? t("common.no", { defaultValue: "No" }) : "No");
   if (type === "number" || type === "price") return String(value);
   if (type === "date" || type === "datetime") {
     return new Date(value).toLocaleDateString("en-US", {

package/src/components/LoginPage.tsx

@@ -3,6 +3,7 @@ import { apiGet, apiPost } from "../lib/api";
 import { ThemeProvider, type ThemeMode } from "./ThemeProvider";
 import { Toaster } from "./ui/Toaster";
 import { useToastStore } from "../lib/stores";
+import { useTranslation } from "react-i18next";
 
 interface LoginPageProps {
   onAuth: (token: string, user: Record<string, unknown>) => void;
@@ -12,6 +13,7 @@ interface LoginPageProps {
 type AuthMode = "login" | "register";
 
 export function LoginPage({ onAuth, theme = "light" }: LoginPageProps) {
+  const { t } = useTranslation();
   const [mode, setMode] = useState<AuthMode>("login");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -54,11 +56,11 @@ export function LoginPage({ onAuth, theme = "light" }: LoginPageProps) {
       localStorage.setItem("kyro_user", JSON.stringify(data.user));
       addToast(
         "success",
-        mode === "login" ? "Welcome back!" : "Account created!",
+        mode === "login" ? t("toast.welcomeBack", { defaultValue: "Welcome back!" }) : t("toast.accountCreated", { defaultValue: "Account created!" }),
       );
       onAuth(data.token, data.user);
     } catch {
-      addToast("error", "Connection failed");
+      addToast("error", t("toast.connectionFailed", { defaultValue: "Connection failed" }));
     } finally {
       setLoading(false);
     }
@@ -71,23 +73,23 @@ export function LoginPage({ onAuth, theme = "light" }: LoginPageProps) {
             <div className="kyro-login-header">
               <h1 className="kyro-login-title">
                 {isFirstUser
-                  ? "Create Admin Account"
+                  ? t("login.createAdminAccount", { defaultValue: "Create Admin Account" })
                   : mode === "login"
-                    ? "Sign In"
-                    : "Create Account"}
+                    ? t("login.signIn", { defaultValue: "Sign In" })
+                    : t("login.createAccount", { defaultValue: "Create Account" })}
               </h1>
               <p className="kyro-login-subtitle">
                 {isFirstUser
-                  ? "Set up your admin account to get started"
+                  ? t("login.setupAdmin", { defaultValue: "Set up your admin account to get started" })
                   : mode === "login"
-                    ? "Enter your credentials to access the admin"
-                    : "Create an account to access the admin"}
+                    ? t("login.enterCredentials", { defaultValue: "Enter your credentials to access the admin" })
+                    : t("login.createAccountDesc", { defaultValue: "Create an account to access the admin" })}
               </p>
             </div>
 
             <form onSubmit={handleSubmit} className="kyro-login-form">
               <div className="kyro-form-group">
-                <label htmlFor="email">Email</label>
+                <label htmlFor="email">{t("login.email", { defaultValue: "Email" })}</label>
                 <input
                   id="email"
                   type="email"
@@ -100,7 +102,7 @@ export function LoginPage({ onAuth, theme = "light" }: LoginPageProps) {
               </div>
 
               <div className="kyro-form-group">
-                <label htmlFor="password">Password</label>
+                <label htmlFor="password">{t("login.password", { defaultValue: "Password" })}</label>
                 <input
                   id="password"
                   type="password"
@@ -117,7 +119,7 @@ export function LoginPage({ onAuth, theme = "light" }: LoginPageProps) {
 
               {mode === "register" && (
                 <div className="kyro-form-group">
-                  <label htmlFor="confirmPassword">Confirm Password</label>
+                  <label htmlFor="confirmPassword">{t("login.confirmPassword", { defaultValue: "Confirm Password" })}</label>
                   <input
                     id="confirmPassword"
                     type="password"
@@ -138,11 +140,11 @@ export function LoginPage({ onAuth, theme = "light" }: LoginPageProps) {
               >
                 {loading
                   ? mode === "login"
-                    ? "Signing in..."
-                    : "Creating account..."
+                    ? t("login.signingIn", { defaultValue: "Signing in..." })
+                    : t("login.creatingAccount", { defaultValue: "Creating account..." })
                   : mode === "login"
-                    ? "Sign In"
-                    : "Create Account"}
+                    ? t("login.signIn", { defaultValue: "Sign In" })
+                    : t("login.createAccount", { defaultValue: "Create Account" })}
               </button>
             </form>
 
@@ -151,24 +153,24 @@ export function LoginPage({ onAuth, theme = "light" }: LoginPageProps) {
                 <p>
                   {mode === "login" ? (
                     <>
-                      Don't have an account?{" "}
+                      {t("login.noAccount", { defaultValue: "Don't have an account?" })}{" "}
                       <button
                         type="button"
                         className="kyro-login-link"
                         onClick={() => setMode("register")}
                       >
-                        Sign up
+                        {t("login.signUp", { defaultValue: "Sign up" })}
                       </button>
                     </>
                   ) : (
                     <>
-                      Already have an account?{" "}
+                      {t("login.hasAccount", { defaultValue: "Already have an account?" })}{" "}
                       <button
                         type="button"
                         className="kyro-login-link"
                         onClick={() => setMode("login")}
                       >
-                        Sign in
+                        {t("login.signInAction", { defaultValue: "Sign in" })}
                       </button>
                     </>
                   )}

package/src/components/MarketplaceManager.tsx

@@ -12,6 +12,7 @@ import {
 } from "./ui/icons";
 import { useUIStore, toast } from "../lib/stores";
 import { Badge } from "./ui/Badge";
+import { useTranslation } from "react-i18next";
 
 interface Extension {
   id: string;
@@ -98,6 +99,7 @@ const mockExtensions: Extension[] = [
 ];
 
 export function MarketplaceManager() {
+    const { t } = useTranslation();
   const [extensions, setExtensions] = useState<Extension[]>(mockExtensions);
   const [searchQuery, setSearchQuery] = useState("");
   const [activeCategory, setActiveCategory] = useState("All");
@@ -152,7 +154,7 @@ export function MarketplaceManager() {
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[var(--kyro-text-secondary)] opacity-40 group-focus-within:opacity-100 transition-opacity" />
             <input
               type="text"
-              placeholder="Search marketplace..."
+              placeholder={t("fields.searchMarketplace", { defaultValue: "Search marketplace..." })}
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               className="pl-9 pr-4 py-2 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-xl text-xs font-bold w-64 focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] transition-all"

package/src/components/MediaGallery.tsx

@@ -34,7 +34,9 @@ import {
   withCacheBust,
   apiUpload,
 } from "../lib/api";
+import { adminPath } from "../lib/paths";
 import { useAuthStore, useUIStore, toast } from "../lib/stores";
+import { useTranslation } from "react-i18next";
 
 interface MediaItem {
   id: string;
@@ -141,6 +143,7 @@ export function MediaGallery({
   multiple?: boolean;
   pickerMode?: boolean;
 }) {
+    const { t } = useTranslation();
   const { permissions } = useAuthStore();
   const canUpload = permissions?.media?.create !== false;
   const canDelete = permissions?.media?.delete !== false;
@@ -490,7 +493,7 @@ export function MediaGallery({
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-muted)]" />
             <input
               type="text"
-              placeholder="Search assets..."
+              placeholder={t("fields.searchAssets", { defaultValue: "Search assets..." })}
               value={search}
               onChange={(e) => setSearch(e.target.value)}
               className="w-full pl-10 pr-4 py-2.5 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-xl focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] transition-all text-xs font-bold"
@@ -968,7 +971,7 @@ export function MediaGallery({
       <SlidePanel
         open={!!panelItem}
         onClose={() => setPanelItem(null)}
-        title="Asset Details"
+        title={t("tooltips.assetDetails", { defaultValue: "Asset Details" })}
         subtitle={panelItem?.filename}
       >
         {panelItem && (
@@ -1064,7 +1067,7 @@ export function MediaGallery({
                         updateMetadata(panelItem.id, { alt: e.target.value })
                       }
                       className="w-full px-4 py-3 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg text-xs font-bold transition-all resize-none min-h-[80px] focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
-                      placeholder="Describe this asset..."
+                      placeholder={t("fields.describeThisAsset", { defaultValue: "Describe this asset..." })}
                     />
                   </div>
                   <div>
@@ -1079,7 +1082,7 @@ export function MediaGallery({
                         })
                       }
                       className="w-full px-4 py-3 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg text-xs font-bold transition-all resize-none min-h-[80px] focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
-                      placeholder="Add a caption..."
+                      placeholder={t("fields.addACaption", { defaultValue: "Add a caption..." })}
                     />
                   </div>
                 </div>
@@ -1119,7 +1122,7 @@ export function MediaGallery({
                           try {
                             await apiDelete(`/api/media/${panelItem.id}`);
                             setPanelItem(null);
-                            loadMedia();
+                            loadMedia(1);
                           } catch (error) {
                             console.error("Delete failed:", error);
                             toast.error("Failed to delete asset");
@@ -1213,15 +1216,15 @@ export function MediaGallery({
           open={showNewFolderModal}
           onClose={() => setShowNewFolderModal(false)}
           onSubmit={createFolder}
-          title="Create New Folder"
-          placeholder="Folder name"
+          title={t("tooltips.createNewFolder", { defaultValue: "Create New Folder" })}
+          placeholder={t("fields.folderName", { defaultValue: "Folder name" })}
         />
       )}
       {!pickerMode && (
         <Modal
           open={showStorageConfigModal}
           onClose={() => setShowStorageConfigModal(false)}
-          title="Storage Not Configured"
+          title={t("tooltips.storageNotConfigured", { defaultValue: "Storage Not Configured" })}
           size="md"
         >
           <div className="text-center">
@@ -1235,7 +1238,7 @@ export function MediaGallery({
             </p>
             <div className="flex gap-3">
               <a
-                href="/settings/storage-settings"
+                href={`${adminPath}/settings/storage-settings`}
                 className="flex-1 px-4 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-bold text-center hover:opacity-90 transition-colors"
               >
                 Configure Storage