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/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>
+  );
+}