feat: expand theme system to 10 full-skin palettes with light and dark modes

src/components/theme-picker.tsx

@@ -67,28 +67,39 @@ export function ThemePicker({
   return (
     <div className="space-y-5">
       <div className="space-y-1.5">
-        <Label>Palette</Label>
-        <div className="flex gap-2">
-          {PALETTES.map((p) => (
-            <button
-              key={p.id}
-              type="button"
-              onClick={() => t.setPalette(p.id)}
-              aria-pressed={t.palette === p.id}
-              title={p.label}
-              className={cn(
-                "size-7 rounded-md border-[0.5px] cursor-pointer transition-transform",
-                t.palette === p.id ? "scale-110" : "hover:scale-105",
-              )}
-              style={{
-                background: p.hex,
-                borderColor: "var(--hair-2)",
-                outline: t.palette === p.id ? "2px solid var(--ink)" : "none",
-                outlineOffset: 2,
-              }}
-            />
-          ))}
-        </div>
+        <Label>Theme</Label>
+        <Select value={t.palette} onValueChange={(v) => t.setPalette(v as Palette)}>
+          <SelectTrigger className="w-56">
+            <div className="flex items-center gap-2 min-w-0">
+              <span
+                className="inline-block w-5 h-4 rounded-sm shrink-0 overflow-hidden border-[0.5px]"
+                style={{
+                  background: `linear-gradient(to bottom, ${
+                    PALETTES.find((p) => p.id === t.palette)?.paper ?? "#fff"
+                  } 55%, ${PALETTES.find((p) => p.id === t.palette)?.hex ?? "#888"} 55%)`,
+                  borderColor: "var(--hair-2)",
+                }}
+              />
+              <SelectValue />
+            </div>
+          </SelectTrigger>
+          <SelectContent>
+            {PALETTES.map((p) => (
+              <SelectItem key={p.id} value={p.id}>
+                <div className="flex items-center justify-between gap-6 w-40">
+                  <span>{p.label}</span>
+                  <span
+                    className="inline-block w-5 h-4 rounded-sm shrink-0 overflow-hidden border-[0.5px]"
+                    style={{
+                      background: `linear-gradient(to bottom, ${p.paper} 55%, ${p.hex} 55%)`,
+                      borderColor: "var(--hair-2)",
+                    }}
+                  />
+                </div>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       </div>
 
       <div className="space-y-1.5">