mirror of
https://github.com/farion1231/cc-switch.git
synced 2026-06-16 13:34:04 +08:00
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.
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user