refactor(appearance): organize components and hooks

2026-09-29 22:12:40 +08:00
parent 352db2c4c0
commit 642cb71b93
32 changed files with 497 additions and 161 deletions
@@ -0,0 +1,66 @@
+import { useMessage } from "@workspace/i18n"
+import { SunIcon } from "@workspace/ui/components/icon"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@workspace/ui/components/select"
+import { cn } from "@workspace/ui/lib/utils"
+
+import type { Brightness } from "../../display"
+import { appearanceMessages } from "../../messages"
+
+export interface BrightnessFieldProps {
+  className?: string
+  onValueChange: (value: Brightness) => void
+  value: Brightness
+}
+
+export function BrightnessField({
+  className,
+  onValueChange,
+  value,
+}: BrightnessFieldProps) {
+  const title = useMessage(appearanceMessages.brightness)
+  const dim = useMessage(appearanceMessages.brightnessDim)
+  const normal = useMessage(appearanceMessages.brightnessNormal)
+  const bright = useMessage(appearanceMessages.brightnessBright)
+  const description = useMessage(appearanceMessages.brightnessDescription)
+  const items: ReadonlyArray<{ label: string; value: Brightness }> = [
+    { label: dim, value: "dim" },
+    { label: normal, value: "normal" },
+    { label: bright, value: "bright" },
+  ]
+
+  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">{description}</p>
+      <Select
+        items={items}
+        value={value}
+        onValueChange={(brightness) => {
+          if (brightness) onValueChange(brightness)
+        }}
+      >
+        <SelectTrigger aria-label={title} className="mt-2 w-full max-w-40">
+          <SunIcon />
+          <SelectValue>
+            {(selectedValue: Brightness | null) =>
+              items.find((item) => item.value === selectedValue)?.label
+            }
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent alignItemWithTrigger={false}>
+          {items.map((item) => (
+            <SelectItem key={item.value} value={item.value}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}