From e6b66f425ac73207b41ab9a9b04a1ee7d8ccd7f5 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Fri, 17 Oct 2025 23:40:07 +0800
Subject: [PATCH] refine: enhance settings dialog UI with improved visual
 feedback

Improve the visual hierarchy and interaction feedback in the settings dialog:

1. Tab navigation enhancement:
   - Active tabs now use blue background (blue-500/600) with white text
   - Add shadow effect to active tabs for better depth perception
   - Inactive tabs show hover effects (opacity + background)
   - Consistent with app's primary blue theme color

2. Switch component visual improvement:
   - Checked state: blue background (blue-500/600) for clear indication
   - Unchecked state: gray background (gray-300/700) for neutral appearance
   - White thumb color for better contrast on both states
   - Enhanced focus ring (ring-2 + offset-2) for accessibility

3. Layout spacing refinement:
   - Change content area padding from pb-4 to py-4 for symmetrical spacing
   - Ensure consistent 4-unit spacing between all dialog sections

4. Clarify plugin integration description:
   - Update description to accurately reflect that provider switching
     in this app will sync with VS Code Claude Code extension
   - Previous wording was ambiguous about the synchronization behavior

Files changed:
- src/components/ui/tabs.tsx: Enhanced tab visual states
- src/components/ui/switch.tsx: Improved switch contrast
- src/components/settings/SettingsDialog.tsx: Fixed spacing
- src/i18n/locales/{zh,en}.json: Updated plugin description
---
 src/components/settings/SettingsDialog.tsx | 2 +-
 src/components/ui/switch.tsx               | 4 ++--
 src/components/ui/tabs.tsx                 | 2 +-
 src/i18n/locales/en.json                   | 2 +-
 src/i18n/locales/zh.json                   | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/settings/SettingsDialog.tsx b/src/components/settings/SettingsDialog.tsx
index 24d6a4c..b1aace9 100644
--- a/src/components/settings/SettingsDialog.tsx
+++ b/src/components/settings/SettingsDialog.tsx
@@ -181,7 +181,7 @@ export function SettingsDialog({
             <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
           </div>
         ) : (
-          <div className="flex-1 overflow-y-scroll px-6 pb-4">
+          <div className="flex-1 overflow-y-scroll px-6 py-4">
             <Tabs
               value={activeTab}
               onValueChange={setActiveTab}
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
index 8185b5b..edc2441 100644
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -9,14 +9,14 @@ const Switch = React.forwardRef<
   <SwitchPrimitives.Root
     ref={ref}
     className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-input shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-500 dark:data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-gray-300 dark:data-[state=unchecked]:bg-gray-700",
       className,
     )}
     {...props}
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+        "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index 6e46cc3..c40996c 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex min-w-[120px] items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=inactive]:opacity-60",
+      "inline-flex min-w-[120px] items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:shadow-sm dark:data-[state=active]:bg-blue-600 data-[state=inactive]:opacity-60 data-[state=inactive]:hover:opacity-100 data-[state=inactive]:hover:bg-muted/50",
       className,
     )}
     {...props}
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index bb7acec..f922eef 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -106,7 +106,7 @@
     "minimizeToTray": "Minimize to tray on close",
     "minimizeToTrayDescription": "When checked, clicking the close button will hide to system tray, otherwise the app will exit directly.",
     "enableClaudePluginIntegration": "Apply to Claude Code extension",
-    "enableClaudePluginIntegrationDescription": "When enabled, you can use third-party providers in the VS Code Claude Code extension",
+    "enableClaudePluginIntegrationDescription": "When enabled, the VS Code Claude Code extension provider will switch with this app",
     "configFileLocation": "Configuration File Location",
     "openFolder": "Open Folder",
     "configDirectoryOverride": "Configuration Directory Override (Advanced)",
diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json
index 8ff2b19..d55ecf1 100644
--- a/src/i18n/locales/zh.json
+++ b/src/i18n/locales/zh.json
@@ -106,7 +106,7 @@
     "minimizeToTray": "关闭时最小化到托盘",
     "minimizeToTrayDescription": "勾选后点击关闭按钮会隐藏到系统托盘，取消则直接退出应用。",
     "enableClaudePluginIntegration": "应用到 Claude Code 插件",
-    "enableClaudePluginIntegrationDescription": "开启后可以在 Vscode Claude Code 插件里使用第三方供应商",
+    "enableClaudePluginIntegrationDescription": "开启后 Vscode Claude Code 插件的供应商将随本软件切换",
     "configFileLocation": "配置文件位置",
     "openFolder": "打开文件夹",
     "configDirectoryOverride": "配置目录覆盖（高级）",