From 31f56f7c86663cf4f733239e2b8bdeddd6c7c540 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Thu, 16 Oct 2025 16:39:03 +0800
Subject: [PATCH] fix: add scrollbars to provider dialogs and simplify theme
 toggle

## Changes

### Add scrollbars to provider dialogs
- **AddProviderDialog.tsx**: Add max-h-[90vh], flex flex-col layout, and scrollable content wrapper
- **EditProviderDialog.tsx**: Add max-h-[90vh], flex flex-col layout, and scrollable content wrapper
- Both dialogs now follow the same scrolling pattern as other dialogs in the app
- Wrap ProviderForm in `<div className="flex-1 overflow-y-auto -mx-6 px-6">` for proper scrolling

### Simplify theme toggle
- **mode-toggle.tsx**: Change from dropdown menu to direct toggle button
- Remove DropdownMenu and related imports
- Click now directly toggles between light and dark mode
- Simpler UX: one click to switch themes instead of opening a menu
- Remove "system" theme option from quick toggle (still available in settings if needed)

## Benefits
- **Consistent scrolling**: All dialogs now have proper scroll behavior when content exceeds viewport height
- **Better UX**: Theme toggle is faster and more intuitive with direct click
- **Code simplification**: Removed unnecessary dropdown menu complexity from theme toggle

All TypeScript type checks and Prettier formatting checks pass.
---
 src/components/mode-toggle.tsx                | 54 +++++--------------
 .../providers/AddProviderDialog.tsx           | 16 +++---
 .../providers/EditProviderDialog.tsx          | 26 ++++-----
 3 files changed, 37 insertions(+), 59 deletions(-)

diff --git a/src/components/mode-toggle.tsx b/src/components/mode-toggle.tsx
index 95a81a1..a099afd 100644
--- a/src/components/mode-toggle.tsx
+++ b/src/components/mode-toggle.tsx
@@ -1,55 +1,29 @@
 import { Moon, Sun } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 import { useTheme } from "@/components/theme-provider";
 
 export function ModeToggle() {
   const { theme, setTheme } = useTheme();
   const { t } = useTranslation();
 
-  const handleChange = (value: string) => {
-    if (value === "light" || value === "dark" || value === "system") {
-      setTheme(value);
+  const toggleTheme = () => {
+    // 如果当前是 dark 或 system（且系统是暗色），切换到 light
+    // 否则切换到 dark
+    if (theme === "dark") {
+      setTheme("light");
+    } else {
+      setTheme("dark");
     }
   };
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
-          <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">
-            {t("common.toggleTheme", { defaultValue: "切换主题" })}
-          </span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuLabel>
-          {t("common.theme", { defaultValue: "主题" })}
-        </DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuRadioGroup value={theme} onValueChange={handleChange}>
-          <DropdownMenuRadioItem value="light">
-            {t("common.lightMode", { defaultValue: "浅色" })}
-          </DropdownMenuRadioItem>
-          <DropdownMenuRadioItem value="dark">
-            {t("common.darkMode", { defaultValue: "深色" })}
-          </DropdownMenuRadioItem>
-          <DropdownMenuRadioItem value="system">
-            {t("common.systemMode", { defaultValue: "跟随系统" })}
-          </DropdownMenuRadioItem>
-        </DropdownMenuRadioGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <Button variant="outline" size="icon" onClick={toggleTheme}>
+      <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">
+        {t("common.toggleTheme", { defaultValue: "切换主题" })}
+      </span>
+    </Button>
   );
 }
diff --git a/src/components/providers/AddProviderDialog.tsx b/src/components/providers/AddProviderDialog.tsx
index b49c05d..e8ddfe0 100644
--- a/src/components/providers/AddProviderDialog.tsx
+++ b/src/components/providers/AddProviderDialog.tsx
@@ -56,7 +56,7 @@ export function AddProviderDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl">
+      <DialogContent className="max-w-2xl max-h-[90vh] flex flex-col">
         <DialogHeader>
           <DialogTitle>{submitLabel}</DialogTitle>
           <DialogDescription>
@@ -66,12 +66,14 @@ export function AddProviderDialog({
           </DialogDescription>
         </DialogHeader>
 
-        <ProviderForm
-          appType={appType}
-          submitLabel={t("common.add", { defaultValue: "添加" })}
-          onSubmit={handleSubmit}
-          onCancel={() => onOpenChange(false)}
-        />
+        <div className="flex-1 overflow-y-auto -mx-6 px-6">
+          <ProviderForm
+            appType={appType}
+            submitLabel={t("common.add", { defaultValue: "添加" })}
+            onSubmit={handleSubmit}
+            onCancel={() => onOpenChange(false)}
+          />
+        </div>
       </DialogContent>
     </Dialog>
   );
diff --git a/src/components/providers/EditProviderDialog.tsx b/src/components/providers/EditProviderDialog.tsx
index e620455..c10955b 100644
--- a/src/components/providers/EditProviderDialog.tsx
+++ b/src/components/providers/EditProviderDialog.tsx
@@ -60,7 +60,7 @@ export function EditProviderDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl">
+      <DialogContent className="max-w-2xl max-h-[90vh] flex flex-col">
         <DialogHeader>
           <DialogTitle>
             {t("provider.editProvider", { defaultValue: "编辑供应商" })}
@@ -72,17 +72,19 @@ export function EditProviderDialog({
           </DialogDescription>
         </DialogHeader>
 
-        <ProviderForm
-          appType={appType}
-          submitLabel={t("common.save", { defaultValue: "保存" })}
-          onSubmit={handleSubmit}
-          onCancel={() => onOpenChange(false)}
-          initialData={{
-            name: provider.name,
-            websiteUrl: provider.websiteUrl,
-            settingsConfig: provider.settingsConfig,
-          }}
-        />
+        <div className="flex-1 overflow-y-auto -mx-6 px-6">
+          <ProviderForm
+            appType={appType}
+            submitLabel={t("common.save", { defaultValue: "保存" })}
+            onSubmit={handleSubmit}
+            onCancel={() => onOpenChange(false)}
+            initialData={{
+              name: provider.name,
+              websiteUrl: provider.websiteUrl,
+              settingsConfig: provider.settingsConfig,
+            }}
+          />
+        </div>
       </DialogContent>
     </Dialog>
   );