31f56f7c86
## 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.
30 lines
960 B
TypeScript
30 lines
960 B
TypeScript
import { Moon, Sun } from "lucide-react";
|
||
import { useTranslation } from "react-i18next";
|
||
import { Button } from "@/components/ui/button";
|
||
import { useTheme } from "@/components/theme-provider";
|
||
|
||
export function ModeToggle() {
|
||
const { theme, setTheme } = useTheme();
|
||
const { t } = useTranslation();
|
||
|
||
const toggleTheme = () => {
|
||
// 如果当前是 dark 或 system（且系统是暗色），切换到 light
|
||
// 否则切换到 dark
|
||
if (theme === "dark") {
|
||
setTheme("light");
|
||
} else {
|
||
setTheme("dark");
|
||
}
|
||
};
|
||
|
||
return (
|
||
<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>
|
||
);
|
||
}
|