feat(appearance): expand preference controls

2026-09-29 21:29:38 +08:00
parent 9a6ec3a396
commit 983ebead02
8 changed files with 346 additions and 113 deletions
@@ -0,0 +1,53 @@
+import { useMessage } from "@workspace/i18n"
+import { MonitorIcon, MoonIcon, SunIcon } from "@workspace/ui/components/icon"
+import { cn } from "@workspace/ui/lib/utils"
+
+import { appearanceMessages } from "../messages"
+import type { ThemeMode } from "../preferences"
+import {
+  AppearanceOptionList,
+  type AppearanceOption,
+} from "./appearance-option-list"
+
+export interface ThemeModeOptionListProps {
+  className?: string
+  onValueChange: (value: ThemeMode) => void
+  value: ThemeMode
+}
+
+export function ThemeModeOptionList({
+  className,
+  onValueChange,
+  value,
+}: ThemeModeOptionListProps) {
+  const title = useMessage(appearanceMessages.themeMode)
+  const lightLabel = useMessage(appearanceMessages.lightMode)
+  const darkLabel = useMessage(appearanceMessages.darkMode)
+  const systemLabel = useMessage(appearanceMessages.followSystem)
+  const descriptions: Record<ThemeMode, string> = {
+    light: useMessage(appearanceMessages.lightModeDescription),
+    dark: useMessage(appearanceMessages.darkModeDescription),
+    system: useMessage(appearanceMessages.followSystemDescription),
+  }
+  const items: readonly AppearanceOption<ThemeMode>[] = [
+    { icon: <SunIcon />, label: lightLabel, value: "light" },
+    { icon: <MoonIcon />, label: darkLabel, value: "dark" },
+    { icon: <MonitorIcon />, label: systemLabel, value: "system" },
+  ]
+
+  return (
+    <div className={cn("min-w-0 lg:flex-1", className)}>
+      <h2 className="font-semibold">{title}</h2>
+      <p className="mt-1 text-sm text-muted-foreground">
+        {descriptions[value]}
+      </p>
+      <AppearanceOptionList
+        className="mt-2 w-full max-w-64"
+        items={items}
+        label={title}
+        value={value}
+        onValueChange={onValueChange}
+      />
+    </div>
+  )
+}