feat(i18n): add i18next foundation with English + zh-CN locales (#508)

* feat(i18n): add i18next foundation with English + zh-CN locales Installs i18next + react-i18next + language detector and wires up a language selector in the General settings page. Extracts strings from the highest-visibility surfaces: all settings tabs, model management, sidebar nav, main editor, and the floating generate box. Remaining strings (profile forms, history, stories/effects/voices/audio tabs) can land in follow-up PRs. Closes #411. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * fix(i18n): ensure language switch actually re-renders the tree - `nonExplicitSupportedLngs: true` was normalizing `zh-CN` → `zh` in some code paths; since we have explicit `zh-CN` resources, swap it for `load: 'currentOnly'` which keeps the code as-is. - `react: { useSuspense: false }` — react-i18next v17 defaults Suspense on, which can silently suspend components mid-switch and look like "nothing happens" to the user. - Use `i18n.language` (the raw current code) instead of `resolvedLanguage` in the selector so the dropdown always mirrors what we just set. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * feat(i18n): localize ProfileCard, HistoryTable, and relative dates - ProfileCard: "No description", "designed" badge, aria-labels, and delete dialog. - HistoryTable: delete / clear-failed / import / effects dialogs. - formatDate: switch date-fns `formatDistance` locale based on `i18n.language` so "5 minutes ago" becomes "5 分钟前" under zh-CN. HistoryTable now subscribes via useTranslation so the table re-renders when language flips. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * feat(i18n): localize Stories tab (list, content, dialogs, toasts) Covers the title + "New Story" button, empty states, story row metadata (item count, updated time), the create/edit/delete dialogs, and all toast notifications. Also handles StoryContent: "Select a story" placeholder, search popover, "Export Audio" button, and the "Generating N audios" pending indicator. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * feat(i18n): localize history item and story item dropdown menus Covers the "..." action menu on both the History table (Play, Export Audio, Export Package, Apply Effects, Regenerate, Delete) and on individual story chat items (Play from here, Remove from Story). Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * feat(i18n): localize Effects tab (list, detail, dialogs, toasts) Covers EffectsList (title, "New Preset", section headers, preset cards) and EffectsDetail (header buttons for Save / Save as Custom / Delete, name/description fields, preview section, Save as Custom dialog, all toasts). Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * feat(i18n): localize EffectsChainEditor and built-in preset names - Effect type labels (Chorus/Flanger, Reverb, Delay, Compressor, Gain, High-Pass, Low-Pass, Pitch Shift) and every param label (LFO speed, Modulation depth, Threshold, Ratio, etc.) go through `effects.types.<type>.{label,params.<param>}` with the backend string as defaultValue fallback. - Chain-level controls: "Load preset…", "Add effect…", "Clear", Power/Remove button titles. - Built-in preset names + descriptions (Robotic, Radio, Echo Chamber, Deep Voice) are translated client-side; user-created presets keep their original names. Backend keeps returning English — frontend intercepts and translates via key lookup, defaulting to the backend string so unknown effects/params don't break. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * feat(i18n): localize Create/Edit Voice modal and audio sample panels ProfileForm now routes its title, description, voice-source toggle (Clone from audio / Built-in voice), field labels (Name, Description, Language, Engine, Voice, Reference Text, Default Engine, Default Effects), sample tabs (Upload / Record / System Audio), action buttons, and every toast + Zod validation message through i18n. Also covers the three AudioSample panels (Upload/Record/System) — the choose-file / start-recording / start-capture call-to-actions, the "N remaining" countdown, "Recording complete" / "Capture complete" states, and the Play / Transcribe / Remove / Record Again buttons. SampleList too — the "No samples yet" empty state, per-sample edit mode, mini-player aria labels, Delete Sample dialog, and toasts. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * feat(i18n): localize Audio Channels tab (list, dialogs, device picker) Covers the "Audio Channels" title and "New Channel" button, the empty state, per-channel section labels (Output Devices / Assigned Voices), the Available Devices right pane with its three contextual hints, the "No voices assigned" fallback, and both Create/Edit dialogs (titles, descriptions, field labels, Select placeholders, and the "(default)" badge). Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * feat(i18n): localize Voices tab (table header, search, inspector) VoicesTab now translates the "Voices" title, search placeholder, "New Voice" button, all six table column headers (Name, Language, Generations, Samples, Effects, Channels), the avatar alt text, and the per-row channel MultiSelect (placeholder + "(Default)" suffix). VoiceInspector routes its form labels through the existing `profileForm.fields.*` keys, has its own "Default Effects" hint and avatar/save toasts, and reuses the ProfileForm Zod validation. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * feat(i18n): localize ProfileList unsupported-model note and empty state Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * feat(i18n): add Traditional Chinese (zh-TW) locale Adds a zh-TW translation with Taiwan vocabulary conventions (e.g. 預設 / 儲存 / 載入 / 匯入 / 匯出 / 設定 / 檔案 / 伺服器 / 裝置 / 網路). Registers it alongside en and zh-CN; the language dropdown picks it up automatically from SUPPORTED_LANGUAGES. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * feat(i18n): add Japanese (ja) locale Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * fix(i18n): localize relative dates for ja and zh-TW formatDate only mapped zh-CN, so history timestamps stayed in English for ja and zh-TW users even after the rest of the UI translated. Extend the switch to ja and zhTW from date-fns/locale. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * fix(i18n): address PR review feedback Bugs: - GeneralPage: network access toast used the keep-server-running title key (wrong semantic scope). Add networkAccess.updatedTitle and use it. - GeneralPage: fallback "Unknown" version was stored as a translated string in state, so it stayed stale across language switches. Store null, resolve the label at render time. - GeneralPage: memoize the zod resolver on t and retrigger validation when the locale changes so existing error messages retranslate. - GpuPage: adding t to the CUDA progress EventSource effect deps caused the SSE connection to be torn down and reopened on every language change, potentially dropping in-flight download events. Capture t in a ref. - HistoryTable: Effects dialog still rendered English "Source" / "Select source version" / "Cancel" / "Apply" / "Applying..." — localize them. - Locales: zh-CN / zh-TW / ja devSuffix was missing the leading space before "(开发版)"/"(開發版)"/"(開発版)", so dev builds rendered "v0.4.2(开发版)" instead of "v0.4.2 (开发版)". Nits: - ModelManagement: rename .find((t) => ...) callback param to avoid shadowing useTranslation().t. - GenerationPage: rename chunkLimit.value interpolation key from count → chars so i18next doesn't silently activate pluralization if a translator later adds _one/_other forms. - LanguageSelect: narrow onValueChange handler param to LanguageCode. Key count now 559 across en/zh-CN/zh-TW/ja (added 4 effectsDialog keys plus networkAccess.updatedTitle). Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> --------- Co-authored-by: Claude Opus 4.7 (1M context) <[email protected]>
2026-09-28 22:55:15 -07:00 · 2026-04-20 16:49:35 -07:00
parent 21dd3b8315
commit a72ef81dc1
38 changed files with 4409 additions and 772 deletions
@@ -2,6 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Edit2, Mic, X } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import * as z from 'zod';
 import { EffectsChainEditor } from '@/components/Effects/EffectsChainEditor';
 import { Button } from '@/components/ui/button';
@@ -38,19 +39,26 @@ import { cn } from '@/lib/utils/cn';
 import { usePlayerStore } from '@/stores/playerStore';
 import { useServerStore } from '@/stores/serverStore';

-const profileSchema = z.object({
-  name: z.string().min(1, 'Name is required').max(100),
-  description: z.string().max(500).optional(),
-  language: z.enum(LANGUAGE_CODES as [LanguageCode, ...LanguageCode[]]),
-});
+function makeProfileSchema(t: (key: string) => string) {
+  return z.object({
+    name: z.string().min(1, t('profileForm.validation.nameRequired')).max(100),
+    description: z.string().max(500).optional(),
+    language: z.enum(LANGUAGE_CODES as [LanguageCode, ...LanguageCode[]]),
+  });
+}

-type ProfileFormValues = z.infer<typeof profileSchema>;
+type ProfileFormValues = {
+  name: string;
+  description?: string;
+  language: LanguageCode;
+};

 interface VoiceInspectorProps {
  profileId: string;
 }

 export function VoiceInspector({ profileId }: VoiceInspectorProps) {
+  const { t } = useTranslation();
  const { data: profile } = useProfile(profileId);
  const audioUrl = usePlayerStore((state) => state.audioUrl);
  const isPlayerVisible = !!audioUrl;
@@ -68,7 +76,7 @@ export function VoiceInspector({ profileId }: VoiceInspectorProps) {
  const [effectsDirty, setEffectsDirty] = useState(false);

  const form = useForm<ProfileFormValues>({
-    resolver: zodResolver(profileSchema),
+    resolver: zodResolver(makeProfileSchema(t)),
    defaultValues: {
      name: '',
      description: '',
@@ -104,32 +112,31 @@ export function VoiceInspector({ profileId }: VoiceInspectorProps) {
    if (!file) return;
    if (!file.type.startsWith('image/')) {
      toast({
-        title: 'Invalid file type',
-        description: 'Please select PNG, JPG, or WebP',
+        title: t('profileForm.toast.invalidFile'),
+        description: t('voiceInspector.toast.invalidImageFormat'),
        variant: 'destructive',
      });
      return;
    }
    if (file.size > 5 * 1024 * 1024) {
      toast({
-        title: 'File too large',
-        description: 'Image must be less than 5MB',
+        title: t('profileForm.toast.fileTooLarge'),
+        description: t('profileForm.toast.imageTooLargeDescription'),
        variant: 'destructive',
      });
      return;
    }
-    // Upload immediately
    uploadAvatar.mutate(
      { profileId, file },
      {
        onSuccess: () => {
          setAvatarPreview(URL.createObjectURL(file));
-          toast({ title: 'Avatar updated' });
+          toast({ title: t('voiceInspector.toast.avatarUpdated') });
        },
        onError: (err) => {
          toast({
-            title: 'Avatar upload failed',
-            description: err instanceof Error ? err.message : 'Unknown error',
+            title: t('profileForm.toast.avatarUploadFailed'),
+            description: err instanceof Error ? err.message : t('common.unknownError'),
            variant: 'destructive',
          });
        },
@@ -141,11 +148,11 @@ export function VoiceInspector({ profileId }: VoiceInspectorProps) {
    if (profile?.avatar_path) {
      try {
        await deleteAvatar.mutateAsync(profileId);
-        toast({ title: 'Avatar removed' });
+        toast({ title: t('profileForm.toast.avatarRemoved') });
      } catch (err) {
        toast({
-          title: 'Failed to remove avatar',
-          description: err instanceof Error ? err.message : 'Unknown error',
+          title: t('profileForm.toast.avatarRemoveFailed'),
+          description: err instanceof Error ? err.message : t('common.unknownError'),
          variant: 'destructive',
        });
      }
@@ -174,19 +181,25 @@ export function VoiceInspector({ profileId }: VoiceInspectorProps) {
          setEffectsDirty(false);
        } catch (fxError) {
          toast({
-            title: 'Effects update failed',
-            description: fxError instanceof Error ? fxError.message : 'Failed to save effects',
+            title: t('profileForm.toast.effectsUpdateFailed'),
+            description:
+              fxError instanceof Error
+                ? fxError.message
+                : t('profileForm.toast.effectsUpdateFailedFallback'),
            variant: 'destructive',
          });
          return;
        }
      }

-      toast({ title: 'Voice updated', description: `"${data.name}" saved.` });
+      toast({
+        title: t('profileForm.toast.voiceUpdated'),
+        description: t('voiceInspector.toast.savedDescription', { name: data.name }),
+      });
    } catch (error) {
      toast({
-        title: 'Error',
-        description: error instanceof Error ? error.message : 'Failed to save profile',
+        title: t('common.error'),
+        description: error instanceof Error ? error.message : t('profileForm.toast.saveFailed'),
        variant: 'destructive',
      });
    }
@@ -195,7 +208,7 @@ export function VoiceInspector({ profileId }: VoiceInspectorProps) {
  if (!profile) {
    return (
      <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
-        Loading...
+        {t('voiceInspector.loading')}
      </div>
    );
  }
@@ -256,9 +269,9 @@ export function VoiceInspector({ profileId }: VoiceInspectorProps) {
                name="name"
                render={({ field }) => (
                  <FormItem>
-                    <FormLabel>Name</FormLabel>
+                    <FormLabel>{t('profileForm.fields.name')}</FormLabel>
                    <FormControl>
-                      <Input placeholder="My Voice" {...field} />
+                      <Input placeholder={t('profileForm.fields.namePlaceholder')} {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
@@ -270,9 +283,13 @@ export function VoiceInspector({ profileId }: VoiceInspectorProps) {
                name="description"
                render={({ field }) => (
                  <FormItem>
-                    <FormLabel>Description</FormLabel>
+                    <FormLabel>{t('voiceInspector.fields.description')}</FormLabel>
                    <FormControl>
-                      <Textarea placeholder="Describe this voice..." rows={2} {...field} />
+                      <Textarea
+                        placeholder={t('profileForm.fields.descriptionPlaceholder')}
+                        rows={2}
+                        {...field}
+                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
@@ -284,7 +301,7 @@ export function VoiceInspector({ profileId }: VoiceInspectorProps) {
                name="language"
                render={({ field }) => (
                  <FormItem>
-                    <FormLabel>Language</FormLabel>
+                    <FormLabel>{t('profileForm.fields.language')}</FormLabel>
                    <Select onValueChange={field.onChange} value={field.value}>
                      <FormControl>
                        <SelectTrigger>
@@ -306,9 +323,9 @@ export function VoiceInspector({ profileId }: VoiceInspectorProps) {

              {/* Effects */}
              <div className="space-y-2">
-                <FormLabel>Default Effects</FormLabel>
+                <FormLabel>{t('profileForm.fields.defaultEffects')}</FormLabel>
                <p className="text-xs text-muted-foreground">
-                  Applied automatically to new generations with this voice.
+                  {t('voiceInspector.defaultEffectsHint')}
                </p>
                <EffectsChainEditor
                  value={effectsChain}
@@ -323,7 +340,9 @@ export function VoiceInspector({ profileId }: VoiceInspectorProps) {
              {/* Save */}
              {isDirty && (
                <Button type="submit" className="w-full" disabled={updateProfile.isPending}>
-                  {updateProfile.isPending ? 'Saving...' : 'Save Changes'}
+                  {updateProfile.isPending
+                    ? t('profileForm.actions.saving')
+                    : t('profileForm.actions.saveChanges')}
                </Button>
              )}
            </div>
@@ -1,6 +1,7 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { Mic, Plus, Search, Sparkles } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';

@@ -25,6 +26,7 @@ import { useUIStore } from '@/stores/uiStore';
 import { VoiceInspector } from './VoiceInspector';

 export function VoicesTab() {
+  const { t } = useTranslation();
  const { data: profiles, isLoading } = useProfiles();
  const queryClient = useQueryClient();
  const setDialogOpen = useUIStore((state) => state.setProfileDialogOpen);
@@ -95,7 +97,7 @@ export function VoicesTab() {
  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-full">
-        <div className="text-muted-foreground">Loading voices...</div>
+        <div className="text-muted-foreground">{t('voicesTab.loading')}</div>
      </div>
    );
  }
@@ -110,12 +112,12 @@ export function VoicesTab() {
        {/* Fixed Header */}
        <div className="absolute top-0 left-0 right-0 z-20 pl-8 pr-8">
          <div className="flex items-center gap-3 mb-6">
-            <h1 className="text-2xl font-bold">Voices</h1>
+            <h1 className="text-2xl font-bold">{t('voicesTab.title')}</h1>
            <div className="flex-1" />
            <div className="relative w-[240px]">
              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
              <Input
-                placeholder="Search voices..."
+                placeholder={t('voicesTab.searchPlaceholder')}
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                className="h-10 pl-8 text-sm rounded-full focus-visible:ring-0 focus-visible:ring-offset-0"
@@ -123,7 +125,7 @@ export function VoicesTab() {
            </div>
            <Button onClick={() => setDialogOpen(true)}>
              <Plus className="h-4 w-4 mr-2" />
-              New Voice
+              {t('voicesTab.newVoice')}
            </Button>
          </div>
        </div>
@@ -139,12 +141,12 @@ export function VoicesTab() {
          <Table className="table-fixed [&_td:first-child]:pl-8 [&_th:first-child]:pl-8">
            <TableHeader>
              <TableRow>
-                <TableHead className="w-[30%]">Name</TableHead>
-                <TableHead className="w-[10%]">Language</TableHead>
-                <TableHead className="w-[10%]">Generations</TableHead>
-                <TableHead className="w-[8%]">Samples</TableHead>
-                <TableHead className="w-[8%]">Effects</TableHead>
-                <TableHead className="w-[24%]">Channels</TableHead>
+                <TableHead className="w-[30%]">{t('voicesTab.columns.name')}</TableHead>
+                <TableHead className="w-[10%]">{t('voicesTab.columns.language')}</TableHead>
+                <TableHead className="w-[10%]">{t('voicesTab.columns.generations')}</TableHead>
+                <TableHead className="w-[8%]">{t('voicesTab.columns.samples')}</TableHead>
+                <TableHead className="w-[8%]">{t('voicesTab.columns.effects')}</TableHead>
+                <TableHead className="w-[24%]">{t('voicesTab.columns.channels')}</TableHead>
                <TableHead className="w-6"></TableHead>
              </TableRow>
            </TableHeader>
@@ -194,6 +196,7 @@ function VoiceRow({
  channels,
  onChannelChange,
 }: VoiceRowProps) {
+  const { t } = useTranslation();
  const serverUrl = useServerStore((state) => state.serverUrl);
  const [avatarError, setAvatarError] = useState(false);
  const avatarUrl = profile.avatar_path ? `${serverUrl}/profiles/${profile.id}/avatar` : null;
@@ -212,7 +215,7 @@ function VoiceRow({
            {avatarUrl && !avatarError ? (
              <img
                src={avatarUrl}
-                alt={`${profile.name} avatar`}
+                alt={t('voicesTab.avatarAlt', { name: profile.name })}
                className="h-full w-full object-cover"
                onError={() => setAvatarError(true)}
              />
@@ -248,11 +251,11 @@ function VoiceRow({
        <MultiSelect
          options={channels.map((ch) => ({
            value: ch.id,
-            label: `${ch.name}${ch.is_default ? ' (Default)' : ''}`,
+            label: ch.is_default ? t('voicesTab.channelDefaultLabel', { name: ch.name }) : ch.name,
          }))}
          value={channelIds}
          onChange={onChannelChange}
-          placeholder="Select channels..."
+          placeholder={t('voicesTab.selectChannels')}
          className="w-full"
        />
      </TableCell>