From ea4cdaad270fa26246d02cc8bab785d316841b36 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Tue, 12 May 2026 16:43:03 +0800
Subject: [PATCH] fix(ui): center Monitor badge icon in app switcher

The Monitor glyph's visual weight skews upward (screen rect dominates
while the stand is two thin lines), making it appear off-center inside
the 11px Claude Desktop badge. Add a per-badge offsetY config and
apply translateY(0.5px) to compensate.
---
 src/components/AppSwitcher.tsx | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/AppSwitcher.tsx b/src/components/AppSwitcher.tsx
index dfc920bcd..5328562f2 100644
--- a/src/components/AppSwitcher.tsx
+++ b/src/components/AppSwitcher.tsx
@@ -4,9 +4,11 @@ import { ProviderIcon } from "@/components/ProviderIcon";
 import { cn } from "@/lib/utils";
 import { Monitor, Terminal } from "lucide-react";
 
-const APP_BADGE_ICON: Partial<Record<AppId, typeof Terminal>> = {
-  claude: Terminal,
-  "claude-desktop": Monitor,
+const APP_BADGE_ICON: Partial<
+  Record<AppId, { icon: typeof Terminal; offsetY?: number }>
+> = {
+  claude: { icon: Terminal },
+  "claude-desktop": { icon: Monitor, offsetY: 0.5 },
 };
 
 interface AppSwitcherProps {
@@ -67,7 +69,8 @@ export function AppSwitcher({
   return (
     <div className="inline-flex bg-muted rounded-xl p-1 gap-1">
       {appsToShow.map((app) => {
-        const BadgeIcon = APP_BADGE_ICON[app];
+        const badgeConfig = APP_BADGE_ICON[app];
+        const BadgeIcon = badgeConfig?.icon;
         const isActive = activeApp === app;
         return (
           <button
@@ -97,7 +100,15 @@ export function AppSwitcher({
                   )}
                   aria-hidden="true"
                 >
-                  <BadgeIcon className="h-[8px] w-[8px]" strokeWidth={2.5} />
+                  <BadgeIcon
+                    className="h-[8px] w-[8px]"
+                    strokeWidth={2.5}
+                    style={
+                      badgeConfig?.offsetY
+                        ? { transform: `translateY(${badgeConfig.offsetY}px)` }
+                        : undefined
+                    }
+                  />
                 </span>
               )}
             </span>