fix(i18n): add internationalization support for app names

- Add i18n for Claude/Codex/Gemini app names in AppSwitcher
- Use useTranslation hook with existing translation keys
- Fix ASCII diagram alignment in README files

README.md

@@ -167,18 +167,18 @@ Download the latest `CC-Switch-v{version}-Linux.deb` package or `CC-Switch-v{ver
 ```
 ┌─────────────────────────────────────────────────────────────┐
 │                    Frontend (React + TS)                    │
-│  ┌─────────────┐  ┌──────────────┐  ┌──────────────────┐  │
+│  ┌─────────────┐  ┌──────────────┐  ┌──────────────────┐    │
-│  │ Components  │  │    Hooks     │  │  TanStack Query  │  │
+│  │ Components  │  │    Hooks     │  │  TanStack Query  │    │
-│  │   (UI)      │──│ (Bus. Logic) │──│   (Cache/Sync)   │  │
+│  │   (UI)      │──│ (Bus. Logic) │──│   (Cache/Sync)   │    │
-│  └─────────────┘  └──────────────┘  └──────────────────┘  │
+│  └─────────────┘  └──────────────┘  └──────────────────┘    │
 └────────────────────────┬────────────────────────────────────┘
                          │ Tauri IPC
 ┌────────────────────────▼────────────────────────────────────┐
 │                  Backend (Tauri + Rust)                     │
-│  ┌─────────────┐  ┌──────────────┐  ┌──────────────────┐  │
+│  ┌─────────────┐  ┌──────────────┐  ┌──────────────────┐    │
-│  │  Commands   │  │   Services   │  │  Models/Config   │  │
+│  │  Commands   │  │   Services   │  │  Models/Config   │    │
-│  │ (API Layer) │──│ (Bus. Layer) │──│     (Data)       │  │
+│  │ (API Layer) │──│ (Bus. Layer) │──│     (Data)       │    │
-│  └─────────────┘  └──────────────┘  └──────────────────┘  │
+│  └─────────────┘  └──────────────┘  └──────────────────┘    │
 └─────────────────────────────────────────────────────────────┘
 ```
 

README_ZH.md

@@ -166,19 +166,19 @@ brew upgrade --cask cc-switch
 
 ```
 ┌─────────────────────────────────────────────────────────────┐
-│                    前端 (React + TS)                        │
+│                    前端 (React + TS)                         │
-│  ┌─────────────┐  ┌──────────────┐  ┌──────────────────┐  │
+│  ┌─────────────┐  ┌──────────────┐  ┌──────────────────┐    │
-│  │ Components  │  │    Hooks     │  │  TanStack Query  │  │
+│  │ Components  │  │    Hooks     │  │  TanStack Query  │    │
-│  │   (UI)      │──│ (业务逻辑)   │──│   (缓存/同步)    │  │
+│  │   （UI）     │──│ （业务逻辑）   │──│   （缓存/同步）    │    │
-│  └─────────────┘  └──────────────┘  └──────────────────┘  │
+│  └─────────────┘  └──────────────┘  └──────────────────┘    │
 └────────────────────────┬────────────────────────────────────┘
                          │ Tauri IPC
 ┌────────────────────────▼────────────────────────────────────┐
-│                  后端 (Tauri + Rust)                        │
+│                  后端 (Tauri + Rust)                         │
-│  ┌─────────────┐  ┌──────────────┐  ┌──────────────────┐  │
+│  ┌─────────────┐  ┌──────────────┐  ┌──────────────────┐    │
-│  │  Commands   │  │   Services   │  │  Models/Config   │  │
+│  │  Commands   │  │   Services   │  │  Models/Config   │    │
-│  │  (API 层)   │──│  (业务层)    │──│     (数据)       │  │
+│  │ （API 层）   │──│  （业务层）    │──│    （数据）       │    │
-│  └─────────────┘  └──────────────┘  └──────────────────┘  │
+│  └─────────────┘  └──────────────┘  └──────────────────┘    │
 └─────────────────────────────────────────────────────────────┘
 ```
 

src/components/AppSwitcher.tsx

@@ -1,5 +1,6 @@
 import type { AppId } from "@/lib/api";
 import { ClaudeIcon, CodexIcon, GeminiIcon } from "./BrandIcons";
+import { useTranslation } from "react-i18next";
 
 interface AppSwitcherProps {
   activeApp: AppId;
@@ -7,6 +8,7 @@ interface AppSwitcherProps {
 }
 
 export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
+  const { t } = useTranslation();
   const handleSwitch = (app: AppId) => {
     if (app === activeApp) return;
     onSwitch(app);
@@ -31,7 +33,7 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
               : "text-gray-500 dark:text-gray-400 group-hover:text-[#D97757] dark:group-hover:text-[#D97757] transition-colors duration-200"
           }
         />
-        <span>Claude</span>
+        <span>{t("apps.claude")}</span>
       </button>
 
       <button
@@ -44,7 +46,7 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
         }`}
       >
         <CodexIcon size={16} />
-        <span>Codex</span>
+        <span>{t("apps.codex")}</span>
       </button>
 
       <button
@@ -64,7 +66,7 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
               : "text-gray-500 dark:text-gray-400 group-hover:text-[#4285F4] dark:group-hover:text-[#4285F4] transition-colors duration-200"
           }
         />
-        <span>Gemini</span>
+        <span>{t("apps.gemini")}</span>
       </button>
     </div>
   );