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.
This commit is contained in:
Jason committed 2026-09-24 22:42:55 +08:00
1 parent f8788719a1
commit 3ed5892532
1 file changed
+10
+10
View File
@@ -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