From 5fe5ed98be9289703db17e3342360986cba4421c Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Sat, 20 Dec 2025 16:24:25 +0800
Subject: [PATCH] style(header): unify height and styling of header toolbar
 sections

- Use consistent h-8 fixed height for all inner elements
- Standardize border-radius to rounded-xl across all sections
- Remove background from ProxyToggle for cleaner appearance
- Simplify ProxyToggle structure with nested container
---
 src/components/AppSwitcher.tsx       |  8 ++---
 src/components/proxy/ProxyToggle.tsx | 53 ++++++++++++++--------------
 2 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/src/components/AppSwitcher.tsx b/src/components/AppSwitcher.tsx
index 76c4da5d3..7f2f86d19 100644
--- a/src/components/AppSwitcher.tsx
+++ b/src/components/AppSwitcher.tsx
@@ -24,11 +24,11 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
   };
 
   return (
-    <div className="inline-flex bg-muted rounded-lg p-1 gap-1">
+    <div className="inline-flex bg-muted rounded-xl p-1 gap-1">
       <button
         type="button"
         onClick={() => handleSwitch("claude")}
-        className={`group inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
+        className={`group inline-flex items-center gap-2 px-3 h-8 rounded-md text-sm font-medium transition-all duration-200 ${
           activeApp === "claude"
             ? "bg-background text-foreground shadow-sm"
             : "text-muted-foreground hover:text-foreground hover:bg-background/50"
@@ -50,7 +50,7 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
       <button
         type="button"
         onClick={() => handleSwitch("codex")}
-        className={`group inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
+        className={`group inline-flex items-center gap-2 px-3 h-8 rounded-md text-sm font-medium transition-all duration-200 ${
           activeApp === "codex"
             ? "bg-background text-foreground shadow-sm"
             : "text-muted-foreground hover:text-foreground hover:bg-background/50"
@@ -72,7 +72,7 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
       <button
         type="button"
         onClick={() => handleSwitch("gemini")}
-        className={`group inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
+        className={`group inline-flex items-center gap-2 px-3 h-8 rounded-md text-sm font-medium transition-all duration-200 ${
           activeApp === "gemini"
             ? "bg-background text-foreground shadow-sm"
             : "text-muted-foreground hover:text-foreground hover:bg-background/50"
diff --git a/src/components/proxy/ProxyToggle.tsx b/src/components/proxy/ProxyToggle.tsx
index 0d3be3851..631ce7c71 100644
--- a/src/components/proxy/ProxyToggle.tsx
+++ b/src/components/proxy/ProxyToggle.tsx
@@ -50,42 +50,41 @@ export function ProxyToggle({ className, activeApp }: ProxyToggleProps) {
   return (
     <div
       className={cn(
-        "flex items-center gap-2 px-3 py-1.5 rounded-lg transition-all cursor-default",
-        takeoverEnabled
-          ? "bg-emerald-500/10 border border-emerald-500/30"
-          : "bg-muted/50 hover:bg-muted",
+        "p-1 rounded-xl transition-all",
         className,
       )}
       title={tooltipText}
     >
-      {isPending ? (
-        <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-      ) : (
-        <Radio
+      <div className="flex items-center gap-2 px-2 h-8 rounded-md cursor-default">
+        {isPending ? (
+          <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+        ) : (
+          <Radio
+            className={cn(
+              "h-4 w-4 transition-colors",
+              takeoverEnabled
+                ? "text-emerald-500 animate-pulse"
+                : "text-muted-foreground",
+            )}
+          />
+        )}
+        <span
           className={cn(
-            "h-4 w-4 transition-colors",
+            "text-sm font-medium transition-colors select-none",
             takeoverEnabled
-              ? "text-emerald-500 animate-pulse"
+              ? "text-emerald-600 dark:text-emerald-400"
               : "text-muted-foreground",
           )}
+        >
+          Proxy
+        </span>
+        <Switch
+          checked={takeoverEnabled}
+          onCheckedChange={handleToggle}
+          disabled={isPending}
+          className="ml-1"
         />
-      )}
-      <span
-        className={cn(
-          "text-sm font-medium transition-colors select-none",
-          takeoverEnabled
-            ? "text-emerald-600 dark:text-emerald-400"
-            : "text-muted-foreground",
-        )}
-      >
-        Proxy
-      </span>
-      <Switch
-        checked={takeoverEnabled}
-        onCheckedChange={handleToggle}
-        disabled={isPending}
-        className="ml-1"
-      />
+      </div>
     </div>
   );
 }