From 5c4a1e8994b9c75cb7bb9c8f896459596d596b44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E9=98=BF=E6=B1=9F=28Relakkes?=
 =?UTF-8?q?=29?= <relakkes@gmail.com>
Date: Thu, 9 Apr 2026 10:26:38 +0800
Subject: [PATCH] style: improve TabBar visual design and Settings sidebar
 alignment

- TabBar: darker background (surface-container), active tab uses top brand
  accent + lighter bg, consistent bottom border, draggable empty area
- Settings sidebar width matches TAB_WIDTH (180px) for vertical alignment
- Remove rounded corners and side borders from tabs for cleaner look

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 desktop/src/components/layout/TabBar.tsx | 15 ++++++++-------
 desktop/src/pages/Settings.tsx           |  2 +-
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/desktop/src/components/layout/TabBar.tsx b/desktop/src/components/layout/TabBar.tsx
index 788677e5..78eb614f 100644
--- a/desktop/src/components/layout/TabBar.tsx
+++ b/desktop/src/components/layout/TabBar.tsx
@@ -99,14 +99,15 @@ export function TabBar() {
   if (tabs.length === 0) return null
 
   return (
-    <div className="flex items-center border-b border-[var(--color-border)] bg-[var(--color-surface)] min-h-[36px] select-none" data-tauri-drag-region>
+    <div className="flex items-center bg-[var(--color-surface-container)] min-h-[37px] select-none border-b border-[var(--color-border)]" data-tauri-drag-region>
+
       {canScrollLeft && (
-        <button onClick={() => scroll('left')} className="flex-shrink-0 w-7 h-full flex items-center justify-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]">
+        <button onClick={() => scroll('left')} className="flex-shrink-0 w-7 h-[37px] flex items-center justify-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]">
           <span className="material-symbols-outlined text-[16px]">chevron_left</span>
         </button>
       )}
 
-      <div ref={scrollRef} className="flex-1 flex overflow-x-hidden">
+      <div ref={scrollRef} className="flex-1 flex items-center overflow-x-hidden" data-tauri-drag-region>
         {tabs.map((tab) => (
           <TabItem
             key={tab.sessionId}
@@ -120,7 +121,7 @@ export function TabBar() {
       </div>
 
       {canScrollRight && (
-        <button onClick={() => scroll('right')} className="flex-shrink-0 w-7 h-full flex items-center justify-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]">
+        <button onClick={() => scroll('right')} className="flex-shrink-0 w-7 h-[37px] flex items-center justify-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]">
           <span className="material-symbols-outlined text-[16px]">chevron_right</span>
         </button>
       )}
@@ -197,10 +198,10 @@ function TabItem({ tab, isActive, onClick, onClose, onContextMenu }: {
       onClick={onClick}
       onContextMenu={onContextMenu}
       className={`
-        flex-shrink-0 flex items-center gap-1.5 px-3 h-[36px] border-r border-[var(--color-border)] cursor-pointer group transition-colors
+        flex-shrink-0 flex items-center gap-1.5 px-3 cursor-pointer group transition-colors
         ${isActive
-          ? 'bg-[var(--color-surface)] border-b-2 border-b-[var(--color-brand)]'
-          : 'bg-[var(--color-surface-container-low)] hover:bg-[var(--color-surface-hover)]'
+          ? 'h-[37px] bg-[var(--color-surface)] border-t-2 border-t-[var(--color-brand)]'
+          : 'h-[37px] bg-transparent hover:bg-[var(--color-surface-hover)]'
         }
       `}
       style={{ width: TAB_WIDTH, maxWidth: TAB_WIDTH }}
diff --git a/desktop/src/pages/Settings.tsx b/desktop/src/pages/Settings.tsx
index 0c09a1a1..2d225b68 100644
--- a/desktop/src/pages/Settings.tsx
+++ b/desktop/src/pages/Settings.tsx
@@ -22,7 +22,7 @@ export function Settings() {
     <div className="flex-1 flex flex-col overflow-hidden bg-[var(--color-surface)]">
       <div className="flex-1 flex overflow-hidden">
         {/* Tab navigation */}
-        <div className="w-48 border-r border-[var(--color-border)] py-3 flex-shrink-0">
+        <div className="w-[180px] border-r border-[var(--color-border)] py-3 flex-shrink-0">
           <TabButton icon="dns" label={t('settings.tab.providers')} active={activeTab === 'providers'} onClick={() => setActiveTab('providers')} />
           <TabButton icon="shield" label={t('settings.tab.permissions')} active={activeTab === 'permissions'} onClick={() => setActiveTab('permissions')} />
           <TabButton icon="tune" label={t('settings.tab.general')} active={activeTab === 'general'} onClick={() => setActiveTab('general')} />