feat(desktop): add zh locale support and localize navigation/menu labels

ui/desktop/src/components/Layout/NavigationPanel.tsx

@@ -8,8 +8,20 @@ import { AppEvents } from '../../constants/events';
 import { CondensedRenderer } from './CondensedRenderer';
 import { ExpandedRenderer } from './ExpandedRenderer';
 import { NavigationOverlay } from './navigation';
+import { defineMessages, useIntl } from '../../i18n';
 import type { SessionStatus, DragHandlers } from './navigation/types';
 
+const i18n = defineMessages({
+  home: { id: 'navigationCustomization.itemHome', defaultMessage: 'Home' },
+  chat: { id: 'navigationCustomization.itemChat', defaultMessage: 'Chat' },
+  recipes: { id: 'navigationCustomization.itemRecipes', defaultMessage: 'Recipes' },
+  skills: { id: 'skillsView.skillsTitle', defaultMessage: 'Skills' },
+  apps: { id: 'navigationCustomization.itemApps', defaultMessage: 'Apps' },
+  scheduler: { id: 'navigationCustomization.itemScheduler', defaultMessage: 'Scheduler' },
+  extensions: { id: 'navigationCustomization.itemExtensions', defaultMessage: 'Extensions' },
+  settings: { id: 'navigationCustomization.itemSettings', defaultMessage: 'Settings' },
+});
+
 export const Navigation: React.FC<{ className?: string }> = ({ className }) => {
   const {
     isNavExpanded,
@@ -26,6 +38,21 @@ export const Navigation: React.FC<{ className?: string }> = ({ className }) => {
 
   const location = useLocation();
   const { extensionsList } = useConfig();
+  const intl = useIntl();
+
+  const translatedLabels = useMemo(
+    () => ({
+      home: intl.formatMessage(i18n.home),
+      chat: intl.formatMessage(i18n.chat),
+      recipes: intl.formatMessage(i18n.recipes),
+      skills: intl.formatMessage(i18n.skills),
+      apps: intl.formatMessage(i18n.apps),
+      scheduler: intl.formatMessage(i18n.scheduler),
+      extensions: intl.formatMessage(i18n.extensions),
+      settings: intl.formatMessage(i18n.settings),
+    }),
+    [intl]
+  );
 
   const appsExtensionEnabled = !!extensionsList?.find((ext) => ext.name === 'apps')?.enabled;
 
@@ -37,8 +64,12 @@ export const Navigation: React.FC<{ className?: string }> = ({ className }) => {
       .filter((item) => {
         if (item.path === '/apps') return appsExtensionEnabled;
         return true;
-      });
-  }, [preferences.itemOrder, preferences.enabledItems, appsExtensionEnabled]);
+      })
+      .map((item) => ({
+        ...item,
+        label: translatedLabels[item.id as keyof typeof translatedLabels] ?? item.label,
+      }));
+  }, [preferences.itemOrder, preferences.enabledItems, appsExtensionEnabled, translatedLabels]);
 
   const isActive = useCallback((path: string) => location.pathname === path, [location.pathname]);
 
@@ -202,7 +233,6 @@ export const Navigation: React.FC<{ className?: string }> = ({ className }) => {
 
   if (isOverlayMode) {
     if (effectiveNavigationStyle === 'expanded') {
-      // Expanded overlay uses its own AnimatePresence layout
       return content;
     }
     return (

ui/desktop/src/i18n/index.ts

@@ -11,7 +11,7 @@
 export { defineMessages, useIntl } from 'react-intl';
 
 /** The set of locales that have translation catalogs. */
-const SUPPORTED_LOCALES = new Set(['en']);
+const SUPPORTED_LOCALES = new Set(['en', 'zh', 'zh-CN']);
 
 /**
  * Detect the user's preferred locale.
@@ -36,23 +36,30 @@ export function getLocale(): { locale: string; messageLocale: string } {
     candidates.push(navigator.language);
   }
 
-  for (const tag of candidates) {
+  for (const candidate of candidates) {
+    const normalized = candidate.replace(/_/g, '-');
+
+    let canonical: string | undefined;
+    try {
+      [canonical] = Intl.getCanonicalLocales(normalized);
+    } catch {
+      canonical = undefined;
+    }
+
+    const resolved = canonical ?? normalized;
+
     // Exact match first
-    if (SUPPORTED_LOCALES.has(tag)) return { locale: tag, messageLocale: tag };
+    if (SUPPORTED_LOCALES.has(resolved)) {
+      return { locale: resolved, messageLocale: resolved };
+    }
+
     // Try base language (e.g. "pt-BR" → "pt") for the catalog, but keep the
     // full regional tag for formatting so date/number output respects the region.
-    const base = tag.split('-')[0];
+    const base = resolved.split('-')[0];
     if (SUPPORTED_LOCALES.has(base)) {
-      // Validate the full tag is a well-formed BCP 47 locale before using it
-      // for formatting. Invalid tags (e.g. "en-") would cause RangeError in
-      // Intl APIs, so fall back to the base language in that case.
-      let locale = base;
-      try {
-        [locale] = Intl.getCanonicalLocales(tag);
-      } catch {
-        // tag is not valid BCP 47 — use the base language instead
-      }
-      return { locale, messageLocale: base };
+      // If canonicalization fails, return the base locale so downstream Intl APIs
+      // never receive malformed tags like "en-".
+      return { locale: canonical ?? base, messageLocale: base };
     }
   }