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_ZH.md

@@ -169,7 +169,7 @@ brew upgrade --cask cc-switch
 │                    前端 (React + TS)                         │
 │  ┌─────────────┐  ┌──────────────┐  ┌──────────────────┐    │
 │  │ Components  │  │    Hooks     │  │  TanStack Query  │    │
-│  │   (UI)      │──│ (业务逻辑)   │──│   (缓存/同步)    │  │
+│  │   （UI）     │──│ （业务逻辑）   │──│   （缓存/同步）    │    │
 │  └─────────────┘  └──────────────┘  └──────────────────┘    │
 └────────────────────────┬────────────────────────────────────┘
                          │ Tauri IPC
@@ -177,7 +177,7 @@ brew upgrade --cask cc-switch
 │                  后端 (Tauri + Rust)                         │
 │  ┌─────────────┐  ┌──────────────┐  ┌──────────────────┐    │
 │  │  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>
   );