From 3ed5892532dca889a3f99e350b48077c7bc4b3c6 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Wed, 23 Sep 2026 23:47:55 +0800
Subject: [PATCH] fix(ui): desaturate inactive brand-colored icons in app
 switcher

Colored brand icons (Claude, Gemini, OpenCode, OpenClaw, Hermes,
MiniMax Code) kept their full color when inactive, so only the pill
background distinguished selected vs unselected. Monochrome icons
(Codex, Grok Build, Pi) already dimmed via currentColor.

Apply grayscale + reduced opacity to inactive colored icons, restoring
full color on hover or when active.
---
 src/components/AppSwitcher.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/AppSwitcher.tsx b/src/components/AppSwitcher.tsx
index a4843d84e..d23fab570 100644
--- a/src/components/AppSwitcher.tsx
+++ b/src/components/AppSwitcher.tsx
@@ -53,6 +53,10 @@ const APP_DISPLAY_NAME: Record<AppId, string> = {
   mcode: "MiniMax Code",
 };
 
+// 单色图标经 currentColor 继承按钮的 muted 文字色，未选中时自然变灰；
+// 其余为固定品牌色，需要显式去色才能和选中态区分
+const CURRENT_COLOR_APPS = new Set<AppId>(["codex", "grokbuild", "pi"]);
+
 /** 应用图标 + 角标（Claude Code / Desktop 用角标区分终端与桌面） */
 function AppGlyph({ app, isActive }: { app: AppId; isActive: boolean }) {
   const badgeConfig = APP_BADGE_ICON[app];
@@ -63,6 +67,12 @@ function AppGlyph({ app, isActive }: { app: AppId; isActive: boolean }) {
         icon={APP_ICON_NAME[app]}
         name={APP_DISPLAY_NAME[app]}
         size={20}
+        className={cn(
+          "transition-[filter,opacity] duration-200",
+          !isActive &&
+            !CURRENT_COLOR_APPS.has(app) &&
+            "grayscale opacity-60 group-hover:grayscale-0 group-hover:opacity-100",
+        )}
       />
       {BadgeIcon && (
         <span