I fixed the lightmode on the sidebar and added

more colour themes. I fixed the settings buttons.

src/components/settings/user-preferences-form.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useEffect, useState } from "react"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Label } from "@/components/ui/label"
 import { Button } from "@/components/ui/button"
@@ -12,7 +13,58 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 
+interface Preferences {
+  timezone: string
+  dateFormat: string
+  itemsPerPage: number
+}
+
 export function UserPreferencesForm() {
+  const [prefs, setPrefs] = useState<Preferences>({
+    timezone: "america-los_angeles",
+    dateFormat: "mdy",
+    itemsPerPage: 20,
+  })
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const res = await fetch("/api/settings/preferences")
+        if (res.ok) {
+          const json = await res.json()
+          setPrefs(json)
+        }
+      } catch {
+        // ignore
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+  }, [])
+
+  async function handleSave() {
+    setSaving(true)
+    try {
+      const res = await fetch("/api/settings/preferences", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(prefs),
+      })
+      if (res.ok) {
+        toast.success("Preferences saved")
+      } else {
+        toast.error("Failed to save preferences")
+      }
+    } catch {
+      toast.error("Failed to save preferences")
+    } finally {
+      setSaving(false)
+    }
+  }
+
   return (
     <Card>
       <CardHeader>
@@ -25,7 +77,7 @@ export function UserPreferencesForm() {
         <div className="grid gap-4 sm:grid-cols-2">
           <div className="space-y-2">
             <Label htmlFor="timezone">Timezone</Label>
-            <Select defaultValue="america-los_angeles">
+            <Select disabled={loading} value={prefs.timezone} onValueChange={(v) => setPrefs((p) => ({ ...p, timezone: v }))}>
               <SelectTrigger id="timezone">
                 <SelectValue />
               </SelectTrigger>
@@ -39,7 +91,7 @@ export function UserPreferencesForm() {
           </div>
           <div className="space-y-2">
             <Label htmlFor="date-format">Date Format</Label>
-            <Select defaultValue="mdy">
+            <Select disabled={loading} value={prefs.dateFormat} onValueChange={(v) => setPrefs((p) => ({ ...p, dateFormat: v }))}>
               <SelectTrigger id="date-format">
                 <SelectValue />
               </SelectTrigger>
@@ -52,7 +104,7 @@ export function UserPreferencesForm() {
           </div>
           <div className="space-y-2">
             <Label htmlFor="items-per-page">Items Per Page</Label>
-            <Select defaultValue="20">
+            <Select disabled={loading} value={String(prefs.itemsPerPage)} onValueChange={(v) => setPrefs((p) => ({ ...p, itemsPerPage: parseInt(v) }))}>
               <SelectTrigger id="items-per-page">
                 <SelectValue />
               </SelectTrigger>
@@ -66,7 +118,9 @@ export function UserPreferencesForm() {
           </div>
         </div>
         <div className="flex justify-end pt-4">
-          <Button onClick={() => toast.success("Preferences saved")}>Save Preferences</Button>
+          <Button onClick={handleSave} disabled={loading || saving}>
+            {saving ? "Saving..." : "Save Preferences"}
+          </Button>
         </div>
       </CardContent>
     </Card>