Front UI v2 changes

frontend/package.json

@@ -12,8 +12,10 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.90.21",
+    "i18next": "^26.3.6",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-i18next": "^17.0.9",
     "react-router-dom": "^6.28.2",
     "zod": "^4.3.6"
   },

frontend/src/components/i18n/language-switcher.tsx

@@ -0,0 +1,35 @@
+import { useTranslation } from 'react-i18next'
+import { persistLanguage, SUPPORTED_LANGUAGES, type SupportedLanguage } from '../../i18n'
+
+const languageLabels: Record<SupportedLanguage, 'language.spanish' | 'language.english'> = {
+    es: 'language.spanish',
+    en: 'language.english',
+}
+
+export function LanguageSwitcher() {
+    const { i18n, t } = useTranslation()
+    const currentLanguage = (i18n.resolvedLanguage ?? i18n.language) as SupportedLanguage
+
+    const handleLanguageChange = async (language: SupportedLanguage) => {
+        await i18n.changeLanguage(language)
+        persistLanguage(language)
+    }
+
+    return (
+        <label className="language-switcher">
+            <span className="sr-only">{t('language.label')}</span>
+            <select
+                aria-label={t('language.label')}
+                className="input language-select"
+                value={currentLanguage}
+                onChange={(event) => handleLanguageChange(event.target.value as SupportedLanguage)}
+            >
+                {SUPPORTED_LANGUAGES.map((language) => (
+                    <option key={language} value={language}>
+                        {t(languageLabels[language])}
+                    </option>
+                ))}
+            </select>
+        </label>
+    )
+}

frontend/src/components/layout/app-shell.tsx

@@ -1,50 +1,41 @@
-import { useState, type ReactNode } from 'react'
+import type { ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
 import { NavLink } from 'react-router-dom'
 import { useAuth } from '../../features/auth/auth-store'
-import { applyTheme, getInitialTheme, type ThemeMode } from '../../lib/utils/theme'
+import { LanguageSwitcher } from '../i18n/language-switcher'
 import { Button } from '../ui/button'
 import { Badge } from '../ui/badge'
+import { ThemeToggle } from '../ui/theme-toggle'
 
 type AppShellProps = {
     children: ReactNode
 }
 
 export function AppShell({ children }: AppShellProps) {
+    const { t } = useTranslation()
     const { session, logout } = useAuth()
-    const [theme, setTheme] = useState<ThemeMode>(() => {
-        const initial = getInitialTheme()
-        applyTheme(initial)
-        return initial
-    })
-
-    const toggleTheme = () => {
-        const nextTheme: ThemeMode = theme === 'light' ? 'dark' : 'light'
-        setTheme(nextTheme)
-        applyTheme(nextTheme)
-    }
 
     return (
         <div className="page">
             <header className="topbar app-topbar">
                 <div>
-                    <strong>Prompt Catalog</strong>
-                    <p className="muted">Personal library for prompts that work</p>
+                    <strong>{t('app.name')}</strong>
+                    <p className="muted">{t('app.tagline')}</p>
                 </div>
                 <div className="topbar-actions">
                     <NavLink className="nav-link" to="/app/prompts">
-                        Catalog
+                        {t('nav.catalog')}
                     </NavLink>
                     {session.role === 'admin' || session.role === 'god' ? (
                         <NavLink className="nav-link" to="/app/admin/prompts">
-                            Admin
+                            {t('nav.admin')}
                         </NavLink>
                     ) : null}
                     <Badge tone="accent">{session.username} · {session.role}</Badge>
-                    <Button variant="ghost" onClick={toggleTheme}>
-                        {theme === 'light' ? 'Dark' : 'Light'}
-                    </Button>
+                    <LanguageSwitcher />
+                    <ThemeToggle />
                     <Button variant="ghost" onClick={logout}>
-                        Logout
+                        {t('nav.logout')}
                     </Button>
                 </div>
             </header>

frontend/src/components/prompts/prompt-detail-dialog.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next'
 import type { PromptRecord } from '../../features/prompts/prompts-types'
 import { Button } from '../ui/button'
 
@@ -14,6 +15,8 @@ export function PromptDetailDialog({
     onEdit,
     onDelete,
 }: PromptDetailDialogProps) {
+    const { t } = useTranslation()
+
     if (!prompt) return null
 
     const handleEdit = () => {
@@ -35,30 +38,36 @@ export function PromptDetailDialog({
                 aria-labelledby="prompt-detail-title"
                 onMouseDown={(event) => event.stopPropagation()}
             >
-                <h2 id="prompt-detail-title">Prompt details</h2>
+                <h2 id="prompt-detail-title">{t('prompts.detail.title')}</h2>
                 <div className="prompt-detail-body">
-                    <div className="prompt-detail-field">
-                        <span className="label">Model</span>
-                        <p>{prompt.model_name}</p>
+                    <div className="prompt-detail-meta prompt-detail-summary">
+                        <div className="prompt-detail-field">
+                            <span className="label">{t('prompts.detail.model')}</span>
+                            <strong>{prompt.model_name}</strong>
+                        </div>
+                        <div className="prompt-detail-field">
+                            <span className="label">{t('prompts.detail.category')}</span>
+                            <span className="badge">{prompt.category}</span>
+                        </div>
+                        <div className="prompt-detail-field">
+                            <span className="label">{t('prompts.detail.rating')}</span>
+                            <span>{t('common.rating', { value: prompt.rate })}</span>
+                        </div>
                     </div>
                     <div className="prompt-detail-field">
-                        <span className="label">Prompt</span>
+                        <span className="label">{t('prompts.detail.prompt')}</span>
                         <p className="prompt-detail-text">{prompt.prompt_text}</p>
                     </div>
-                    <div className="prompt-detail-meta">
-                        <span className="badge">{prompt.category}</span>
-                        <span className="muted">Rating {prompt.rate}/5</span>
-                    </div>
                 </div>
                 <div className="dialog-actions">
                     <Button variant="ghost" onClick={onClose}>
-                        Close
+                        {t('common.close')}
                     </Button>
                     <Button variant="ghost" onClick={handleEdit}>
-                        Edit
+                        {t('common.edit')}
                     </Button>
                     <Button variant="danger" onClick={handleDelete}>
-                        Delete
+                        {t('common.delete')}
                     </Button>
                 </div>
             </div>