Complete client UI i18n migration

Adds client-side i18n support, language settings, translated UI copy, and locale parity coverage.
2026-06-11 14:15:35 +08:00
parent 41cf070fd8
commit 08ebe5e7e1
199 changed files with 16426 additions and 1821 deletions
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import {
  View,
  Text,
@@ -144,6 +145,7 @@ function ModelRow({
  onToggleFavorite?: (provider: string, modelId: string) => void;
 }) {
  const { theme } = useUnistyles();
+  const { t } = useTranslation();
  const ProviderIcon = getProviderIcon(row.provider);

  const handleToggleFavorite = useCallback(
@@ -166,7 +168,9 @@ function ModelRow({
          hitSlop={8}
          style={favoriteButtonStyle}
          accessibilityRole="button"
-          accessibilityLabel={isFavorite ? "Unfavorite model" : "Favorite model"}
+          accessibilityLabel={
+            isFavorite ? t("modelSelector.unfavoriteModel") : t("modelSelector.favoriteModel")
+          }
          testID={`favorite-model-${row.provider}-${row.modelId}`}
        >
          {({ hovered }) => {
@@ -193,6 +197,7 @@ function ModelRow({
      theme.colors.palette.amber,
      theme.colors.foregroundMuted,
      theme.colors.border,
+      t,
    ],
  );

@@ -256,6 +261,7 @@ function FavoritesSection({
  onSelect: (provider: string, modelId: string) => void;
  onToggleFavorite?: (provider: string, modelId: string) => void;
 }) {
+  const { t } = useTranslation();
  if (favoriteRows.length === 0) {
    return null;
  }
@@ -263,7 +269,7 @@ function FavoritesSection({
  return (
    <View style={styles.favoritesContainer}>
      <View style={styles.sectionHeading}>
-        <Text style={styles.sectionHeadingText}>Favorites</Text>
+        <Text style={styles.sectionHeadingText}>{t("modelSelector.favorites")}</Text>
      </View>
      {favoriteRows.map((row) => (
        <SelectableModelRow
@@ -295,6 +301,7 @@ function iconButtonStyle({ hovered, pressed }: PressableStateCallbackType & { ho

 function GroupProviderButton({ provider, onDrillDown }: GroupProviderButtonProps) {
  const { theme } = useUnistyles();
+  const { t } = useTranslation();
  const ProvIcon = getProviderIcon(provider.id);
  const selection = provider.modelSelection;

@@ -306,7 +313,11 @@ function GroupProviderButton({ provider, onDrillDown }: GroupProviderButtonProps
  if (selection.kind === "models") {
    const count = selection.rows.length;
    stateNode = (
-      <Text style={styles.drillDownCount}>{`${count} ${count === 1 ? "model" : "models"}`}</Text>
+      <Text style={styles.drillDownCount}>
+        {t(count === 1 ? "modelSelector.modelCount" : "modelSelector.modelCountPlural", {
+          count,
+        })}
+      </Text>
    );
  } else if (selection.kind === "loading") {
    stateNode = (
@@ -316,14 +327,14 @@ function GroupProviderButton({ provider, onDrillDown }: GroupProviderButtonProps
          color={theme.colors.foregroundMuted}
          style={styles.rowSpinner}
        />
-        <Text style={styles.drillDownCount}>Loading</Text>
+        <Text style={styles.drillDownCount}>{t("modelSelector.loadingShort")}</Text>
      </View>
    );
  } else {
    stateNode = (
      <View style={styles.rowStateInline}>
        <AlertTriangle size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
-        <Text style={styles.drillDownCount}>Error</Text>
+        <Text style={styles.drillDownCount}>{t("modelSelector.error")}</Text>
      </View>
    );
  }
@@ -431,6 +442,7 @@ function ProviderErrorEmptyState({
  isRetryingProvider: boolean;
 }) {
  const { theme } = useUnistyles();
+  const { t } = useTranslation();
  const handleRetry = useCallback(() => {
    onRetryProvider?.(providerId);
  }, [onRetryProvider, providerId]);
@@ -440,7 +452,7 @@ function ProviderErrorEmptyState({
      <Text style={styles.emptyStateText}>{message}</Text>
      {onRetryProvider ? (
        <Button variant="default" size="sm" onPress={handleRetry} disabled={isRetryingProvider}>
-          {isRetryingProvider ? "Retrying…" : "Retry"}
+          {isRetryingProvider ? t("modelSelector.retrying") : t("modelSelector.retry")}
        </Button>
      ) : null}
    </View>
@@ -461,6 +473,7 @@ function SelectorContent({
  isRetryingProvider,
 }: SelectorContentProps) {
  const { theme } = useUnistyles();
+  const { t } = useTranslation();
  const normalizedQuery = useMemo(() => normalizeSearchQuery(searchQuery), [searchQuery]);
  const selectedViewProvider = useMemo(
    () =>
@@ -484,7 +497,7 @@ function SelectorContent({
  const emptyState = (
    <View style={styles.emptyState}>
      <Search size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
-      <Text style={styles.emptyStateText}>No models match your search</Text>
+      <Text style={styles.emptyStateText}>{t("modelSelector.noMatches")}</Text>
    </View>
  );

@@ -501,7 +514,7 @@ function SelectorContent({
            color={theme.colors.foregroundMuted}
            style={styles.rowSpinner}
          />
-          <Text style={styles.emptyStateText}>Loading</Text>
+          <Text style={styles.emptyStateText}>{t("modelSelector.loadingShort")}</Text>
        </View>
      );
    }
@@ -569,6 +582,7 @@ export function CombinedModelSelector({
  serverId = null,
 }: CombinedModelSelectorProps) {
  const { theme } = useUnistyles();
+  const { t } = useTranslation();
  const anchorRef = useRef<View>(null);
  const [isOpen, setIsOpen] = useState(false);
  const [isContentReady, setIsContentReady] = useState(platformIsWeb);
@@ -653,12 +667,15 @@ export function CombinedModelSelector({
  }, [providers, view]);

  const triggerLabel = useMemo(() => {
-    if (selectedModelLabel === "Loading..." || selectedModelLabel === "Select model") {
+    if (
+      selectedModelLabel === t("modelSelector.loading") ||
+      selectedModelLabel === t("modelSelector.selectModel")
+    ) {
      return selectedModelLabel;
    }

    return buildSelectedTriggerLabel(selectedModelLabel);
-  }, [selectedModelLabel]);
+  }, [selectedModelLabel, t]);

  useEffect(() => {
    if (platformIsWeb) {
@@ -713,7 +730,7 @@ export function CombinedModelSelector({

  const sheetHeader = useMemo<SheetHeader>(() => {
    if (view.kind === "all") {
-      return { title: "Select provider" };
+      return { title: t("modelSelector.title") };
    }
    const ProviderIconForView = getProviderIcon(view.providerId);
    const headerActions = (
@@ -723,7 +740,9 @@ export function CombinedModelSelector({
        hitSlop={8}
        style={iconButtonStyle}
        accessibilityRole="button"
-        accessibilityLabel={`Open ${view.providerLabel} settings`}
+        accessibilityLabel={t("modelSelector.openProviderSettings", {
+          provider: view.providerLabel,
+        })}
        testID={`selector-header-settings-${view.providerId}`}
      >
        <Settings
@@ -742,7 +761,7 @@ export function CombinedModelSelector({
      search: {
        onChange: handleSearchQueryChange,
        resetKey: `${view.providerId}:${searchResetKey}`,
-        placeholder: "Search models...",
+        placeholder: t("modelSelector.searchPlaceholder"),
        autoFocus: platformIsWeb,
        testID: "model-search-input",
      },
@@ -757,6 +776,7 @@ export function CombinedModelSelector({
    handleBackToAll,
    handleSearchQueryChange,
    searchResetKey,
+    t,
    theme.iconSize.md,
    theme.iconSize.sm,
    theme.colors.foreground,
@@ -771,7 +791,7 @@ export function CombinedModelSelector({
        onPress={handleTriggerPress}
        style={triggerStyle}
        accessibilityRole="button"
-        accessibilityLabel={`Select model (${selectedModelLabel})`}
+        accessibilityLabel={t("modelSelector.selectedModel", { model: selectedModelLabel })}
        testID="combined-model-selector"
      >
        {renderTrigger ? (
@@ -823,7 +843,7 @@ export function CombinedModelSelector({
        ) : (
          <View style={styles.sheetLoadingState}>
            <ActivityIndicator size="small" color={theme.colors.foregroundMuted} />
-            <Text style={styles.sheetLoadingText}>Loading model selector…</Text>
+            <Text style={styles.sheetLoadingText}>{t("modelSelector.loadingSelector")}</Text>
          </View>
        )}
      </Combobox>