feat: complete stage 2 core refactor

src/components/mode-toggle.tsx

@@ -0,0 +1,58 @@
+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);
+    }
+  };
+
+  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>
+  );
+}