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

@@ -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}

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>

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}