refactor: remove unused import in form page and modularize theme toggle component logic

app/admin/form/[id]/page.tsx

@@ -1,5 +1,4 @@
 import { db } from "@/db";
-import { forms } from "@/db/schema";
 import FormEditorClient from "./client";
 import { notFound } from "next/navigation";
 

components/theme-toggle.tsx

@@ -12,6 +12,20 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 
+const THEME_ICONS = {
+  light: Sun,
+  dark: Moon,
+  system: Monitor,
+} as const
+
+type ThemeOption = keyof typeof THEME_ICONS
+
+const THEME_OPTIONS: { value: ThemeOption; label: string }[] = [
+  { value: "light", label: "Light theme" },
+  { value: "dark", label: "Dark theme" },
+  { value: "system", label: "System" },
+]
+
 export function ThemeToggle() {
   const { setTheme, theme, resolvedTheme } = useTheme()
   const [mounted, setMounted] = React.useState(false)
@@ -20,36 +34,32 @@ export function ThemeToggle() {
     setMounted(true)
   }, [])
 
+  // Once mounted, resolve "system" to its actual rendered theme for the icon
+  const activeIcon = !mounted
+    ? Sun
+    : THEME_ICONS[theme === "system" ? (resolvedTheme as ThemeOption) : (theme as ThemeOption)] ?? Sun
+
+  const Icon = activeIcon
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" size="icon" className="w-9 h-9">
-          {!mounted ? (
-            <Sun className="h-[1.2rem] w-[1.2rem]" />
-          ) : theme === "system" ? (
-            <Monitor className="h-[1.2rem] w-[1.2rem]" />
-          ) : resolvedTheme === "dark" ? (
-            <Moon className="h-[1.2rem] w-[1.2rem]" />
-          ) : (
-            <Sun className="h-[1.2rem] w-[1.2rem]" />
-          )}
+          <Icon className="h-[1.2rem] w-[1.2rem]" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          <Sun className="mr-2 h-4 w-4" />
-          Light theme
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          <Moon className="mr-2 h-4 w-4" />
-          Dark theme
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          <Monitor className="mr-2 h-4 w-4" />
-          System
-        </DropdownMenuItem>
+        {THEME_OPTIONS.map(({ value, label }) => {
+          const OptionIcon = THEME_ICONS[value]
+          return (
+            <DropdownMenuItem key={value} onClick={() => setTheme(value)}>
+              <OptionIcon className="h-4 w-4" />
+              {label}
+            </DropdownMenuItem>
+          )
+        })}
       </DropdownMenuContent>
     </DropdownMenu>
   )
-}
+}