From 4496110dd81908d03b8aac36f2a993ac56feca98 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Tue, 20 Jan 2026 22:02:13 +0800
Subject: [PATCH] feat(app-switcher): add compact mode for takeover with 3+
 visible apps

---
 src/App.tsx                    |  7 ++++++-
 src/components/AppSwitcher.tsx | 10 +++-------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7b92c8fd..e857e152 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -889,7 +889,12 @@ function App() {
                   </>
                 )}
 
-                <AppSwitcher activeApp={activeApp} onSwitch={setActiveApp} visibleApps={visibleApps} />
+                <AppSwitcher
+                  activeApp={activeApp}
+                  onSwitch={setActiveApp}
+                  visibleApps={visibleApps}
+                  compact={isCurrentAppTakeoverActive && Object.values(visibleApps).filter(Boolean).length >= 3}
+                />
 
                 <div className="flex items-center gap-1 p-1 bg-muted rounded-xl">
                   <Button
diff --git a/src/components/AppSwitcher.tsx b/src/components/AppSwitcher.tsx
index 017ae8a1..6ee8ce0a 100644
--- a/src/components/AppSwitcher.tsx
+++ b/src/components/AppSwitcher.tsx
@@ -6,11 +6,12 @@ interface AppSwitcherProps {
   activeApp: AppId;
   onSwitch: (app: AppId) => void;
   visibleApps?: VisibleApps;
+  compact?: boolean;
 }
 
 const ALL_APPS: AppId[] = ["claude", "codex", "gemini", "opencode"];
 
-export function AppSwitcher({ activeApp, onSwitch, visibleApps }: AppSwitcherProps) {
+export function AppSwitcher({ activeApp, onSwitch, visibleApps, compact }: AppSwitcherProps) {
   const handleSwitch = (app: AppId) => {
     if (app === activeApp) return;
     onSwitch(app);
@@ -52,13 +53,8 @@ export function AppSwitcher({ activeApp, onSwitch, visibleApps }: AppSwitcherPro
             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>
+          {!compact && <span>{appDisplayName[app]}</span>}
         </button>
       ))}
     </div>