feat: add Chinese (简体中文) i18n support (tinyhumansai#1518)

Co-authored-by: Steven Enamakel <enamakel@tinyhumans.ai>

Author: LuoYe17

app/src/App.tsx

@@ -19,6 +19,7 @@ import PersistRehydrationScreen from './components/PersistRehydrationScreen';
 import GlobalUpsellBanner from './components/upsell/GlobalUpsellBanner';
 import AppWalkthrough from './components/walkthrough/AppWalkthrough';
 import { MascotFrameProducer } from './features/meet/MascotFrameProducer';
+import { I18nProvider } from './lib/i18n/I18nContext';
 // [#1123] Commented out — welcome-agent onboarding replaced by Joyride walkthrough
 // import { isWelcomeLocked } from './lib/coreState/store';
 import { startNativeNotificationsService } from './lib/nativeNotifications';
@@ -58,24 +59,26 @@ function App() {
       )}>
       <Provider store={store}>
         <PersistGate loading={<PersistRehydrationScreen />} persistor={persistor}>
-          <BootCheckGate>
-            <CoreStateProvider>
-              <SocketProvider>
-                <ChatRuntimeProvider>
-                  <Router>
-                    <CommandProvider>
-                      <ServiceBlockingGate>
-                        <AppShell />
-                        <DictationHotkeyManager />
-                        <LocalAIDownloadSnackbar />
-                        <AppUpdatePrompt />
-                      </ServiceBlockingGate>
-                    </CommandProvider>
-                  </Router>
-                </ChatRuntimeProvider>
-              </SocketProvider>
-            </CoreStateProvider>
-          </BootCheckGate>
+          <I18nProvider>
+            <BootCheckGate>
+              <CoreStateProvider>
+                <SocketProvider>
+                  <ChatRuntimeProvider>
+                    <Router>
+                      <CommandProvider>
+                        <ServiceBlockingGate>
+                          <AppShell />
+                          <DictationHotkeyManager />
+                          <LocalAIDownloadSnackbar />
+                          <AppUpdatePrompt />
+                        </ServiceBlockingGate>
+                      </CommandProvider>
+                    </Router>
+                  </ChatRuntimeProvider>
+                </SocketProvider>
+              </CoreStateProvider>
+            </BootCheckGate>
+          </I18nProvider>
         </PersistGate>
       </Provider>
     </Sentry.ErrorBoundary>

app/src/components/BootCheckGate/BootCheckGate.tsx

@@ -1,17 +1,18 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
+import { useT } from '../lib/i18n/I18nContext';
 // [#1123] Commented out — welcome-agent onboarding replaced by Joyride walkthrough
 // import { isWelcomeLocked } from '../lib/coreState/store';
 import { useCoreState } from '../providers/CoreStateProvider';
 import { useAppSelector } from '../store/hooks';
 import { selectUnreadCount } from '../store/notificationSlice';
 import { isAccountsFullscreen } from '../utils/accountsFullscreen';
 
-const tabs = [
+const makeTabs = (t: (key: string) => string) => [
   {
     id: 'home',
-    label: 'Home',
+    label: t('nav.home'),
     path: '/home',
     icon: (
       <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -26,7 +27,7 @@ const tabs = [
   },
   {
     id: 'human',
-    label: 'Human',
+    label: t('nav.human'),
     path: '/human',
     icon: (
       <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -41,7 +42,7 @@ const tabs = [
   },
   {
     id: 'chat',
-    label: 'Chat',
+    label: t('nav.chat'),
     path: '/chat',
     icon: (
       <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -56,7 +57,7 @@ const tabs = [
   },
   {
     id: 'skills',
-    label: 'Connections',
+    label: t('nav.connections'),
     path: '/skills',
     icon: (
       <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -71,7 +72,7 @@ const tabs = [
   },
   {
     id: 'intelligence',
-    label: 'Memory',
+    label: t('nav.memory'),
     path: '/intelligence',
     icon: (
       <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -86,7 +87,7 @@ const tabs = [
   },
   {
     id: 'notifications',
-    label: 'Alerts',
+    label: t('nav.alerts'),
     path: '/notifications',
     icon: (
       <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -101,7 +102,7 @@ const tabs = [
   },
   {
     id: 'rewards',
-    label: 'Rewards',
+    label: t('nav.rewards'),
     path: '/rewards',
     icon: (
       <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -116,7 +117,7 @@ const tabs = [
   },
   {
     id: 'settings',
-    label: 'Settings',
+    label: t('nav.settings'),
     path: '/settings',
     icon: (
       <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -138,6 +139,8 @@ const tabs = [
 ];
 
 const BottomTabBar = () => {
+  const { t } = useT();
+  const tabs = useMemo(() => makeTabs(t), [t]);
   const location = useLocation();
   const navigate = useNavigate();
   const { snapshot } = useCoreState();
@@ -230,7 +233,7 @@ const BottomTabBar = () => {
                 }`}
                 aria-label={
                   tab.id === 'notifications' && unreadCount > 0
-                    ? `${tab.label} (${unreadCount} unread)`
+                    ? `${tab.label} (${unreadCount} ${t('alerts.unread')})`
                     : tab.label
                 }>
                 <span className="relative inline-flex flex-shrink-0">

app/src/components/BottomTabBar.tsx

@@ -5,6 +5,7 @@
 import { useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
+import { useT } from '../../lib/i18n/I18nContext';
 import type { ChannelDefinition, ChannelType } from '../../types/channels';
 import DiscordConfig from './DiscordConfig';
 import TelegramConfig from './TelegramConfig';
@@ -21,6 +22,7 @@ interface ChannelSetupModalProps {
 }
 
 function ChannelConfigContent({ definition }: { definition: ChannelDefinition }) {
+  const { t } = useT();
   const channelId = definition.id as ChannelType;
   switch (channelId) {
     case 'telegram':
@@ -30,13 +32,14 @@ function ChannelConfigContent({ definition }: { definition: ChannelDefinition })
     default:
       return (
         <p className="text-sm text-stone-400 py-4">
-          Configuration for {definition.display_name} is not available yet.
+          {t('channels.configNotAvailable')} {definition.display_name}
         </p>
       );
   }
 }
 
 export default function ChannelSetupModal({ definition, onClose }: ChannelSetupModalProps) {
+  const { t } = useT();
   const modalRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -88,7 +91,7 @@ export default function ChannelSetupModal({ definition, onClose }: ChannelSetupM
                   {definition.display_name}
                 </h2>
                 <span className="px-1.5 py-0.5 text-[10px] font-medium rounded-md bg-primary-500/15 text-primary-600">
-                  channel
+                  {t('channels.channel')}
                 </span>
               </div>
               <p className="text-xs text-stone-500 mt-1.5">{definition.description}</p>

app/src/components/channels/ChannelSetupModal.tsx

@@ -1,4 +1,5 @@
 import { useUsageState } from '../../hooks/useUsageState';
+import { useT } from '../../lib/i18n/I18nContext';
 import { useAppSelector } from '../../store/hooks';
 import { BILLING_DASHBOARD_URL } from '../../utils/links';
 import { openUrl } from '../../utils/openUrl';
@@ -42,6 +43,7 @@ function severityFromPct(pct: number): PillSeverity {
 }
 
 const TokenUsagePill = () => {
+  const { t } = useT();
   const sessionTokens = useAppSelector(state => state.chatRuntime.sessionTokenUsage);
   const { usagePct10h, usagePct7d, isAtLimit, isNearLimit, currentTier, teamUsage } =
     useUsageState();
@@ -54,9 +56,9 @@ const TokenUsagePill = () => {
   const showPlanPill = teamUsage !== null;
 
   const planTitle = (() => {
-    if (isAtLimit) return 'Usage limit reached — click to top up';
-    if (isNearLimit) return 'Approaching usage limit';
-    return `${currentTier.toLowerCase()} plan — click for details`;
+    if (isAtLimit) return t('token.usageLimitReached');
+    if (isNearLimit) return t('token.approachingLimit');
+    return `${currentTier.toLowerCase()} ${t('token.planClickForDetails')}`;
   })();
 
   if (!showSessionCounter && !showPlanPill) return null;
@@ -66,7 +68,10 @@ const TokenUsagePill = () => {
       {showSessionCounter ? (
         <span
           className="inline-flex items-center gap-1 rounded-full bg-stone-100 px-2 py-1 font-mono text-stone-600 ring-1 ring-stone-200/60"
-          title={`Session tokens: ${sessionTokens.inputTokens.toLocaleString()} in / ${sessionTokens.outputTokens.toLocaleString()} out across ${sessionTokens.turns} turn(s)`}>
+          title={t('token.sessionTokens')
+            .replace('{in}', sessionTokens.inputTokens.toLocaleString())
+            .replace('{out}', sessionTokens.outputTokens.toLocaleString())
+            .replace('{turns}', String(sessionTokens.turns))}>
           <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path
               strokeLinecap="round"
@@ -86,7 +91,7 @@ const TokenUsagePill = () => {
           }}
           title={planTitle}
           className={`inline-flex items-center gap-1 rounded-full px-2 py-1 font-medium ring-1 transition-colors ${planSeverity.bg} ${planSeverity.text} ${planSeverity.ring} hover:opacity-80`}>
-          {isAtLimit ? 'Limit' : planSeverity.label}
+          {isAtLimit ? t('token.limit') : planSeverity.label}
         </button>
       ) : null}
     </div>

app/src/components/chat/TokenUsagePill.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
+import { useT } from '../../lib/i18n/I18nContext';
 import type { ActionableItem, SnoozeOption } from '../../types/intelligence';
 
 interface ActionableCardProps {
@@ -207,6 +208,7 @@ export function ActionableCard({
   onSnooze,
   className = '',
 }: ActionableCardProps) {
+  const { t } = useT();
   const [showSnoozeMenu, setShowSnoozeMenu] = useState(false);
   const [isAnimatingOut, setIsAnimatingOut] = useState(false);
   const snoozeButtonRef = useRef<HTMLButtonElement>(null);
@@ -284,7 +286,7 @@ export function ActionableCard({
                 <button
                   onClick={handleComplete}
                   className="w-6 h-6 flex items-center justify-center rounded-md text-stone-400 hover:text-sage-400 hover:bg-sage-400/10 transition-all duration-150"
-                  title="Complete">
+                  title={t('actionable.complete')}>
                   <svg
                     className="w-3.5 h-3.5"
                     fill="none"
@@ -303,7 +305,7 @@ export function ActionableCard({
                 <button
                   onClick={handleDismiss}
                   className="w-6 h-6 flex items-center justify-center rounded-md text-stone-400 hover:text-coral-400 hover:bg-coral-400/10 transition-all duration-150"
-                  title="Dismiss">
+                  title={t('actionable.dismiss')}>
                   <svg
                     className="w-3.5 h-3.5"
                     fill="none"
@@ -324,7 +326,7 @@ export function ActionableCard({
                     ref={snoozeButtonRef}
                     onClick={() => setShowSnoozeMenu(!showSnoozeMenu)}
                     className="w-6 h-6 flex items-center justify-center rounded-md text-stone-400 hover:text-amber-400 hover:bg-amber-400/10 transition-all duration-150"
-                    title="Snooze">
+                    title={t('actionable.snooze')}>
                     <svg
                       className="w-3.5 h-3.5"
                       fill="none"
@@ -354,7 +356,7 @@ export function ActionableCard({
                 <>
                   <span className="text-xs text-stone-600">•</span>
                   <span className="text-xs bg-sage-500 text-white px-1.5 py-0.5 rounded-sm font-medium">
-                    New
+                    {t('actionable.new')}
                   </span>
                 </>
               )}

app/src/components/intelligence/ActionableCard.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 
+import { useT } from '../../lib/i18n/I18nContext';
 import type { ConfirmationModal as ConfirmationModalType } from '../../types/intelligence';
 
 interface ConfirmationModalProps {
@@ -8,6 +9,7 @@ interface ConfirmationModalProps {
 }
 
 export function ConfirmationModal({ modal, onClose }: ConfirmationModalProps) {
+  const { t } = useT();
   const [dontShowAgain, setDontShowAgain] = useState(false);
 
   if (!modal.isOpen) return null;
@@ -73,7 +75,7 @@ export function ConfirmationModal({ modal, onClose }: ConfirmationModalProps) {
                 onChange={e => setDontShowAgain(e.target.checked)}
                 className="rounded border-stone-300 bg-stone-100 text-primary-500 focus:ring-primary-500 focus:ring-offset-0"
               />
-              Don't show similar suggestions
+              {t('modal.dontShowAgain')}
             </label>
           </div>
         )}
@@ -83,7 +85,7 @@ export function ConfirmationModal({ modal, onClose }: ConfirmationModalProps) {
           <button
             onClick={handleCancel}
             className="px-4 py-2 text-sm font-medium text-stone-600 hover:text-stone-900 rounded-lg hover:bg-stone-100 transition-colors">
-            {modal.cancelText || 'Cancel'}
+            {modal.cancelText || t('common.cancel')}
           </button>
           <button
             onClick={handleConfirm}
@@ -95,7 +97,7 @@ export function ConfirmationModal({ modal, onClose }: ConfirmationModalProps) {
                   : 'bg-primary-500 hover:bg-primary-600 text-white'
               }
             `}>
-            {modal.confirmText || 'Confirm'}
+            {modal.confirmText || t('common.confirm')}
           </button>
         </div>
       </div>