feat(settings): add app visibility settings

Allow users to choose which apps (Claude, Codex, Gemini, OpenCode) to display on the homepage.

- Add VisibleApps type and settings field in both frontend and backend
- Refactor AppSwitcher to render apps dynamically based on visibility
- Extract ToggleRow component for reuse
- Add i18n support for app visibility settings

src-tauri/src/settings.rs

@@ -16,6 +16,35 @@ pub struct CustomEndpoint {
     pub last_used: Option<i64>,
 }
 
+fn default_true() -> bool {
+    true
+}
+
+/// 主页面显示的应用配置
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct VisibleApps {
+    #[serde(default = "default_true")]
+    pub claude: bool,
+    #[serde(default = "default_true")]
+    pub codex: bool,
+    #[serde(default = "default_true")]
+    pub gemini: bool,
+    #[serde(default = "default_true")]
+    pub opencode: bool,
+}
+
+impl Default for VisibleApps {
+    fn default() -> Self {
+        Self {
+            claude: true,
+            codex: true,
+            gemini: true,
+            opencode: true,
+        }
+    }
+}
+
 /// 应用设置结构
 ///
 /// 存储设备级别设置，保存在本地 `~/.cc-switch/settings.json`，不随数据库同步。
@@ -40,6 +69,10 @@ pub struct AppSettings {
     #[serde(default, skip_serializing_if = "Option::is_none")]
     pub language: Option<String>,
 
+    // ===== 主页面显示的应用 =====
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub visible_apps: Option<VisibleApps>,
+
     // ===== 设备级目录覆盖 =====
     #[serde(default, skip_serializing_if = "Option::is_none")]
     pub claude_config_dir: Option<String>,
@@ -73,10 +106,6 @@ fn default_minimize_to_tray_on_close() -> bool {
     true
 }
 
-fn default_true() -> bool {
-    true
-}
-
 impl Default for AppSettings {
     fn default() -> Self {
         Self {
@@ -86,6 +115,7 @@ impl Default for AppSettings {
             skip_claude_onboarding: true,
             launch_on_startup: false,
             language: None,
+            visible_apps: None,
             claude_config_dir: None,
             codex_config_dir: None,
             gemini_config_dir: None,

src/App.tsx

@@ -17,9 +17,9 @@ import {
   Download,
   BarChart2,
 } from "lucide-react";
-import type { Provider } from "@/types";
+import type { Provider, VisibleApps } from "@/types";
 import type { EnvConflict } from "@/types/env";
-import { useProvidersQuery } from "@/lib/query";
+import { useProvidersQuery, useSettingsQuery } from "@/lib/query";
 import {
   providersApi,
   settingsApi,
@@ -78,6 +78,31 @@ function App() {
   const [settingsDefaultTab, setSettingsDefaultTab] = useState("general");
   const [isAddOpen, setIsAddOpen] = useState(false);
 
+  // Get settings for visibleApps
+  const { data: settingsData } = useSettingsQuery();
+  const visibleApps: VisibleApps = settingsData?.visibleApps ?? {
+    claude: true,
+    codex: true,
+    gemini: true,
+    opencode: true,
+  };
+
+  // Get first visible app for fallback
+  const getFirstVisibleApp = (): AppId => {
+    if (visibleApps.claude) return "claude";
+    if (visibleApps.codex) return "codex";
+    if (visibleApps.gemini) return "gemini";
+    if (visibleApps.opencode) return "opencode";
+    return "claude"; // fallback
+  };
+
+  // If current active app is hidden, switch to first visible app
+  useEffect(() => {
+    if (!visibleApps[activeApp]) {
+      setActiveApp(getFirstVisibleApp());
+    }
+  }, [visibleApps, activeApp]);
+
   const [editingProvider, setEditingProvider] = useState<Provider | null>(null);
   const [usageProvider, setUsageProvider] = useState<Provider | null>(null);
   // Confirm action state: 'remove' = remove from live config, 'delete' = delete from database
@@ -864,7 +889,7 @@ function App() {
                   </>
                 )}
 
-                <AppSwitcher activeApp={activeApp} onSwitch={setActiveApp} />
+                <AppSwitcher activeApp={activeApp} onSwitch={setActiveApp} visibleApps={visibleApps} />
 
                 <div className="flex items-center gap-1 p-1 bg-muted rounded-xl">
                   <Button

src/components/AppSwitcher.tsx

@@ -1,12 +1,16 @@
 import type { AppId } from "@/lib/api";
+import type { VisibleApps } from "@/types";
 import { ProviderIcon } from "@/components/ProviderIcon";
 
 interface AppSwitcherProps {
   activeApp: AppId;
   onSwitch: (app: AppId) => void;
+  visibleApps?: VisibleApps;
 }
 
-export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
+const ALL_APPS: AppId[] = ["claude", "codex", "gemini", "opencode"];
+
+export function AppSwitcher({ activeApp, onSwitch, visibleApps }: AppSwitcherProps) {
   const handleSwitch = (app: AppId) => {
     if (app === activeApp) return;
     onSwitch(app);
@@ -25,95 +29,38 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
     opencode: "OpenCode",
   };
 
+  // Filter apps based on visibility settings (default all visible)
+  const appsToShow = ALL_APPS.filter((app) => {
+    if (!visibleApps) return true;
+    return visibleApps[app];
+  });
+
   return (
     <div className="inline-flex bg-muted rounded-xl p-1 gap-1">
-      <button
-        type="button"
-        onClick={() => handleSwitch("claude")}
-        className={`group inline-flex items-center gap-2 px-3 h-8 rounded-md text-sm font-medium transition-all duration-200 ${
-          activeApp === "claude"
-            ? "bg-background text-foreground shadow-sm"
-            : "text-muted-foreground hover:text-foreground hover:bg-background/50"
-        }`}
-      >
-        <ProviderIcon
-          icon={appIconName.claude}
-          name={appDisplayName.claude}
-          size={iconSize}
-          className={
-            activeApp === "claude"
-              ? "text-foreground"
-              : "text-muted-foreground group-hover:text-foreground transition-colors"
-          }
-        />
-        <span>{appDisplayName.claude}</span>
-      </button>
-
-      <button
-        type="button"
-        onClick={() => handleSwitch("codex")}
-        className={`group inline-flex items-center gap-2 px-3 h-8 rounded-md text-sm font-medium transition-all duration-200 ${
-          activeApp === "codex"
-            ? "bg-background text-foreground shadow-sm"
-            : "text-muted-foreground hover:text-foreground hover:bg-background/50"
-        }`}
-      >
-        <ProviderIcon
-          icon={appIconName.codex}
-          name={appDisplayName.codex}
-          size={iconSize}
-          className={
-            activeApp === "codex"
-              ? "text-foreground"
-              : "text-muted-foreground group-hover:text-foreground transition-colors"
-          }
-        />
-        <span>{appDisplayName.codex}</span>
-      </button>
-
-      <button
-        type="button"
-        onClick={() => handleSwitch("gemini")}
-        className={`group inline-flex items-center gap-2 px-3 h-8 rounded-md text-sm font-medium transition-all duration-200 ${
-          activeApp === "gemini"
-            ? "bg-background text-foreground shadow-sm"
-            : "text-muted-foreground hover:text-foreground hover:bg-background/50"
-        }`}
-      >
-        <ProviderIcon
-          icon={appIconName.gemini}
-          name={appDisplayName.gemini}
-          size={iconSize}
-          className={
-            activeApp === "gemini"
-              ? "text-foreground"
-              : "text-muted-foreground group-hover:text-foreground transition-colors"
-          }
-        />
-        <span>{appDisplayName.gemini}</span>
-      </button>
-
-      <button
-        type="button"
-        onClick={() => handleSwitch("opencode")}
-        className={`group inline-flex items-center gap-2 px-3 h-8 rounded-md text-sm font-medium transition-all duration-200 ${
-          activeApp === "opencode"
-            ? "bg-background text-foreground shadow-sm"
-            : "text-muted-foreground hover:text-foreground hover:bg-background/50"
-        }`}
-      >
-        <ProviderIcon
-          icon={appIconName.opencode}
-          name={appDisplayName.opencode}
-          size={iconSize}
-          className={
-            activeApp === "opencode"
-              ? "text-foreground"
-              : "text-muted-foreground group-hover:text-foreground transition-colors"
-          }
-        />
-        <span>{appDisplayName.opencode}</span>
-      </button>
+      {appsToShow.map((app) => (
+        <button
+          key={app}
+          type="button"
+          onClick={() => handleSwitch(app)}
+          className={`group inline-flex items-center gap-2 px-3 h-8 rounded-md text-sm font-medium transition-all duration-200 ${
+            activeApp === app
+              ? "bg-background text-foreground shadow-sm"
+              : "text-muted-foreground hover:text-foreground hover:bg-background/50"
+          }`}
+        >
+          <ProviderIcon
+            icon={appIconName[app]}
+            name={appDisplayName[app]}
+            size={iconSize}
+            className={
+              activeApp === app
+                ? "text-foreground"
+                : "text-muted-foreground group-hover:text-foreground transition-colors"
+            }
+          />
+          <span>{appDisplayName[app]}</span>
+        </button>
+      ))}
     </div>
   );
 }

src/components/settings/SettingsPage.tsx

@@ -34,6 +34,7 @@ import { settingsApi } from "@/lib/api";
 import { LanguageSettings } from "@/components/settings/LanguageSettings";
 import { ThemeSettings } from "@/components/settings/ThemeSettings";
 import { WindowSettings } from "@/components/settings/WindowSettings";
+import { AppVisibilitySettings } from "@/components/settings/AppVisibilitySettings";
 import { DirectorySettings } from "@/components/settings/DirectorySettings";
 import { ImportExportSection } from "@/components/settings/ImportExportSection";
 import { AboutSection } from "@/components/settings/AboutSection";
@@ -240,6 +241,10 @@ export function SettingsPage({
                     onChange={(lang) => handleAutoSave({ language: lang })}
                   />
                   <ThemeSettings />
+                  <AppVisibilitySettings
+                    settings={settings}
+                    onChange={handleAutoSave}
+                  />
                   <WindowSettings
                     settings={settings}
                     onChange={handleAutoSave}

src/components/settings/WindowSettings.tsx

@@ -1,7 +1,7 @@
-import { Switch } from "@/components/ui/switch";
 import { useTranslation } from "react-i18next";
 import type { SettingsFormState } from "@/hooks/useSettings";
 import { AppWindow, MonitorUp, Power } from "lucide-react";
+import { ToggleRow } from "@/components/ui/toggle-row";
 
 interface WindowSettingsProps {
   settings: SettingsFormState;
@@ -58,40 +58,3 @@ export function WindowSettings({ settings, onChange }: WindowSettingsProps) {
     </section>
   );
 }
-
-interface ToggleRowProps {
-  icon: React.ReactNode;
-  title: string;
-  description?: string;
-  checked: boolean;
-  onCheckedChange: (value: boolean) => void;
-}
-
-function ToggleRow({
-  icon,
-  title,
-  description,
-  checked,
-  onCheckedChange,
-}: ToggleRowProps) {
-  return (
-    <div className="flex items-center justify-between gap-4 rounded-xl border border-border bg-card/50 p-4 transition-colors hover:bg-muted/50">
-      <div className="flex items-center gap-3">
-        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-background ring-1 ring-border">
-          {icon}
-        </div>
-        <div className="space-y-1">
-          <p className="text-sm font-medium leading-none">{title}</p>
-          {description ? (
-            <p className="text-xs text-muted-foreground">{description}</p>
-          ) : null}
-        </div>
-      </div>
-      <Switch
-        checked={checked}
-        onCheckedChange={onCheckedChange}
-        aria-label={title}
-      />
-    </div>
-  );
-}

src/components/ui/toggle-row.tsx

@@ -0,0 +1,41 @@
+import { Switch } from "@/components/ui/switch";
+
+export interface ToggleRowProps {
+  icon: React.ReactNode;
+  title: string;
+  description?: string;
+  checked: boolean;
+  onCheckedChange: (value: boolean) => void;
+  disabled?: boolean;
+}
+
+export function ToggleRow({
+  icon,
+  title,
+  description,
+  checked,
+  onCheckedChange,
+  disabled,
+}: ToggleRowProps) {
+  return (
+    <div className="flex items-center justify-between gap-4 rounded-xl border border-border bg-card/50 p-4 transition-colors hover:bg-muted/50">
+      <div className="flex items-center gap-3">
+        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-background ring-1 ring-border">
+          {icon}
+        </div>
+        <div className="space-y-1">
+          <p className="text-sm font-medium leading-none">{title}</p>
+          {description ? (
+            <p className="text-xs text-muted-foreground">{description}</p>
+          ) : null}
+        </div>
+      </div>
+      <Switch
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+        disabled={disabled}
+        aria-label={title}
+      />
+    </div>
+  );
+}

src/i18n/locales/en.json

@@ -272,6 +272,14 @@
     "enableClaudePluginIntegrationDescription": "When enabled, the VS Code Claude Code extension provider will switch with this app",
     "skipClaudeOnboarding": "Skip Claude Code first-run confirmation",
     "skipClaudeOnboardingDescription": "When enabled, Claude Code will skip the first-run confirmation",
+    "appVisibility": {
+      "title": "Homepage Display",
+      "description": "Choose which apps to show on the homepage",
+      "claudeDesc": "Anthropic Claude Code CLI",
+      "codexDesc": "OpenAI Codex CLI",
+      "geminiDesc": "Google Gemini CLI",
+      "opencodeDesc": "OpenCode CLI"
+    },
     "configDirectoryOverride": "Configuration Directory Override (Advanced)",
     "configDirectoryDescription": "When using Claude Code or Codex in environments like WSL, you can manually specify the configuration directory to the one in WSL to keep provider data consistent with the main environment.",
     "appConfigDir": "CC Switch Configuration Directory",
@@ -333,7 +341,7 @@
     }
   },
   "apps": {
-    "claude": "Claude Code",
+    "claude": "Claude",
     "codex": "Codex",
     "gemini": "Gemini",
     "opencode": "OpenCode"

src/i18n/locales/ja.json

@@ -272,6 +272,14 @@
     "enableClaudePluginIntegrationDescription": "オンにすると VS Code の Claude Code 拡張のプロバイダーも同期します",
     "skipClaudeOnboarding": "Claude Code の初回確認をスキップ",
     "skipClaudeOnboardingDescription": "オンにすると Claude Code の初回インストール確認をスキップします",
+    "appVisibility": {
+      "title": "ホームページ表示",
+      "description": "ホームページに表示するアプリを選択",
+      "claudeDesc": "Anthropic Claude Code CLI",
+      "codexDesc": "OpenAI Codex CLI",
+      "geminiDesc": "Google Gemini CLI",
+      "opencodeDesc": "OpenCode CLI"
+    },
     "configDirectoryOverride": "設定ディレクトリの上書き（詳細）",
     "configDirectoryDescription": "WSL などで Claude Code や Codex を使う場合、ここで設定ディレクトリを WSL 側に合わせるとデータを揃えられます。",
     "appConfigDir": "CC Switch 設定ディレクトリ",
@@ -333,7 +341,7 @@
     }
   },
   "apps": {
-    "claude": "Claude Code",
+    "claude": "Claude",
     "codex": "Codex",
     "gemini": "Gemini",
     "opencode": "OpenCode"

src/i18n/locales/zh.json

@@ -272,6 +272,14 @@
     "enableClaudePluginIntegrationDescription": "开启后 Vscode Claude Code 插件的供应商将随本软件切换",
     "skipClaudeOnboarding": "跳过 Claude Code 初次安装确认",
     "skipClaudeOnboardingDescription": "开启后跳过 Claude Code 初次安装确认",
+    "appVisibility": {
+      "title": "主页面显示",
+      "description": "选择在主页面显示的应用",
+      "claudeDesc": "Anthropic Claude Code CLI",
+      "codexDesc": "OpenAI Codex CLI",
+      "geminiDesc": "Google Gemini CLI",
+      "opencodeDesc": "OpenCode CLI"
+    },
     "configDirectoryOverride": "配置目录覆盖（高级）",
     "configDirectoryDescription": "在 WSL 等环境使用 Claude Code 或 Codex 的时候，可手动指定为 WSL 里的配置目录，供应商数据与主环境保持一致。",
     "appConfigDir": "CC Switch 配置目录",
@@ -333,7 +341,7 @@
     }
   },
   "apps": {
-    "claude": "Claude Code",
+    "claude": "Claude",
     "codex": "Codex",
     "gemini": "Gemini",
     "opencode": "OpenCode"

src/types.ts

@@ -137,6 +137,14 @@ export interface ProviderMeta {
   proxyConfig?: ProviderProxyConfig;
 }
 
+// 主页面显示的应用配置
+export interface VisibleApps {
+  claude: boolean;
+  codex: boolean;
+  gemini: boolean;
+  opencode: boolean;
+}
+
 // 应用设置类型（用于设置对话框与 Tauri API）
 // 存储在本地 ~/.cc-switch/settings.json，不随数据库同步
 export interface Settings {
@@ -154,6 +162,9 @@ export interface Settings {
   // 首选语言（可选，默认中文）
   language?: "en" | "zh" | "ja";
 
+  // 主页面显示的应用（默认全部显示）
+  visibleApps?: VisibleApps;
+
   // ===== 设备级目录覆盖 =====
   // 覆盖 Claude Code 配置目录（可选）
   claudeConfigDir?: string;