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