From 03579bc6252665ee07b5d1efedb147c1471157d2 Mon Sep 17 00:00:00 2001
From: Sean O'Connor <sean@soconnor.dev>
Date: Sat, 29 Nov 2025 03:08:10 -0500
Subject: [PATCH] feat: Implement database persistence and synchronization for
 user theme preferences

---
 .../settings/_components/settings-content.tsx | 916 +++++++++---------
 src/app/layout.tsx                            |  12 +-
 .../providers/color-theme-provider.tsx        |  68 +-
 src/components/providers/theme-provider.tsx   |  50 +-
 src/server/api/routers/settings.ts            |  40 +
 src/server/db/schema.ts                       |   3 +
 6 files changed, 599 insertions(+), 490 deletions(-)

diff --git a/src/app/dashboard/settings/_components/settings-content.tsx b/src/app/dashboard/settings/_components/settings-content.tsx
index d9bcdc3..a8cb4b9 100644
--- a/src/app/dashboard/settings/_components/settings-content.tsx
+++ b/src/app/dashboard/settings/_components/settings-content.tsx
@@ -64,6 +64,7 @@ import { Switch } from "~/components/ui/switch";
 import { Slider } from "~/components/ui/slider";
 import { AppearanceSettings } from "./appearance-settings";
 import { useAnimationPreferences } from "~/components/providers/animation-preferences-provider";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
 
 export function SettingsContent() {
   const { data: session } = authClient.useSession();
@@ -322,57 +323,284 @@ export function SettingsContent() {
   ];
 
   return (
-    <div className="space-y-8">
-      {/* Profile & Account Overview */}
-      <div className="grid gap-6 lg:grid-cols-2">
-        {/* Profile Section */}
-        <Card className="form-section bg-card border-border border">
+    <Tabs defaultValue="general" className="space-y-4">
+      <TabsList className="bg-muted/50 grid w-full grid-cols-3 lg:w-[400px]">
+        <TabsTrigger value="general">General</TabsTrigger>
+        <TabsTrigger value="preferences">Preferences</TabsTrigger>
+        <TabsTrigger value="data">Data</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="general" className="space-y-8">
+        <div className="grid gap-6 lg:grid-cols-2">
+          {/* Profile Section */}
+          <Card className="form-section bg-card border-border border">
+            <CardHeader>
+              <CardTitle className="text-foreground flex items-center gap-2">
+                <User className="text-primary h-5 w-5" />
+                Profile Information
+              </CardTitle>
+              <CardDescription>
+                Update your personal account details
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form onSubmit={handleUpdateProfile} className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="name">Full Name</Label>
+                  <Input
+                    id="name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder="Enter your full name"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="email">Email Address</Label>
+                  <Input
+                    id="email"
+                    value={session?.user?.email ?? ""}
+                    disabled
+                    className="bg-muted"
+                  />
+                  <p className="text-muted-foreground text-sm">
+                    Email address cannot be changed
+                  </p>
+                </div>
+                <Button
+                  type="submit"
+                  disabled={updateProfileMutation.isPending}
+                  variant="default"
+                  className="hover-lift"
+                >
+                  {updateProfileMutation.isPending
+                    ? "Updating..."
+                    : "Save Changes"}
+                </Button>
+              </form>
+            </CardContent>
+          </Card>
+
+          {/* Security Settings */}
+          <Card className="bg-card border-border border">
+            <CardHeader>
+              <CardTitle className="text-foreground flex items-center gap-2">
+                <Key className="text-primary h-5 w-5" />
+                Security Settings
+              </CardTitle>
+              <CardDescription>
+                Change your password and manage account security
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form onSubmit={handleChangePassword} className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="current-password">Current Password</Label>
+                  <div className="relative">
+                    <Input
+                      id="current-password"
+                      type={showCurrentPassword ? "text" : "password"}
+                      value={currentPassword}
+                      onChange={(e) => setCurrentPassword(e.target.value)}
+                      placeholder="Enter your current password"
+                    />
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="absolute top-1/2 right-2 h-6 w-6 -translate-y-1/2 p-0"
+                      onClick={() => setShowCurrentPassword(!showCurrentPassword)}
+                    >
+                      {showCurrentPassword ? (
+                        <EyeOff className="h-4 w-4" />
+                      ) : (
+                        <Eye className="h-4 w-4" />
+                      )}
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="new-password">New Password</Label>
+                  <div className="relative">
+                    <Input
+                      id="new-password"
+                      type={showNewPassword ? "text" : "password"}
+                      value={newPassword}
+                      onChange={(e) => setNewPassword(e.target.value)}
+                      placeholder="Enter your new password"
+                    />
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="absolute top-1/2 right-2 h-6 w-6 -translate-y-1/2 p-0"
+                      onClick={() => setShowNewPassword(!showNewPassword)}
+                    >
+                      {showNewPassword ? (
+                        <EyeOff className="h-4 w-4" />
+                      ) : (
+                        <Eye className="h-4 w-4" />
+                      )}
+                    </Button>
+                  </div>
+                  <p className="text-muted-foreground text-sm">
+                    Password must be at least 8 characters long
+                  </p>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="confirm-password">Confirm New Password</Label>
+                  <div className="relative">
+                    <Input
+                      id="confirm-password"
+                      type={showConfirmPassword ? "text" : "password"}
+                      value={confirmPassword}
+                      onChange={(e) => setConfirmPassword(e.target.value)}
+                      placeholder="Confirm your new password"
+                    />
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="absolute top-1/2 right-2 h-6 w-6 -translate-y-1/2 p-0"
+                      onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                    >
+                      {showConfirmPassword ? (
+                        <EyeOff className="h-4 w-4" />
+                      ) : (
+                        <Eye className="h-4 w-4" />
+                      )}
+                    </Button>
+                  </div>
+                </div>
+
+                <Button
+                  type="submit"
+                  disabled={changePasswordMutation.isPending}
+                  variant="default"
+                >
+                  {changePasswordMutation.isPending
+                    ? "Changing Password..."
+                    : "Change Password"}
+                </Button>
+              </form>
+            </CardContent>
+          </Card>
+        </div>
+      </TabsContent>
+
+      <TabsContent value="preferences" className="space-y-8">
+        {/* Appearance Settings */}
+        <Card className="bg-card border-border border">
           <CardHeader>
             <CardTitle className="text-foreground flex items-center gap-2">
-              <User className="text-primary h-5 w-5" />
-              Profile Information
+              <Palette className="text-primary h-5 w-5" />
+              Appearance
             </CardTitle>
             <CardDescription>
-              Update your personal account details
+              Customize the look and feel of the application
             </CardDescription>
           </CardHeader>
+          <CardContent className="space-y-6">
+            <AppearanceSettings />
+          </CardContent>
+        </Card>
+
+        {/* Accessibility & Animation */}
+        <Card className="bg-card border-border border">
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center gap-2">
+              <Info className="text-primary h-5 w-5" />
+              Accessibility & Animation
+            </CardTitle>
+          </CardHeader>
           <CardContent>
-            <form onSubmit={handleUpdateProfile} className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="name">Full Name</Label>
-                <Input
-                  id="name"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  placeholder="Enter your full name"
+            <form onSubmit={handleSaveAnimationPreferences} className="space-y-6">
+              <div className="flex items-start justify-between gap-4">
+                <div className="space-y-1.5">
+                  <Label>Reduce Motion</Label>
+                  <p className="text-muted-foreground text-xs leading-snug">
+                    Turn this on to reduce or remove non-essential animations and
+                    transitions.
+                  </p>
+                </div>
+                <Switch
+                  checked={prefersReducedMotion}
+                  onCheckedChange={(checked) =>
+                    setPrefersReducedMotion(Boolean(checked))
+                  }
+                  aria-label="Toggle reduced motion"
                 />
               </div>
+
               <div className="space-y-2">
-                <Label htmlFor="email">Email Address</Label>
-                <Input
-                  id="email"
-                  value={session?.user?.email ?? ""}
-                  disabled
-                  className="bg-muted"
-                />
-                <p className="text-muted-foreground text-sm">
-                  Email address cannot be changed
+                <div className="flex items-center justify-between">
+                  <Label className="mb-0">Animation Speed Multiplier</Label>
+                  <span className="text-muted-foreground text-xs font-medium">
+                    {prefersReducedMotion
+                      ? "1.00x (locked)"
+                      : `${animationSpeedMultiplier.toFixed(2)}x`}
+                  </span>
+                </div>
+                <p className="text-muted-foreground text-xs leading-snug">
+                  Adjust global animation duration scaling. Lower values (0.25×,
+                  0.5×, 0.75×) slow animations; higher values (2×, 3×, 4×) speed
+                  them up.
                 </p>
+                <div className="flex flex-col gap-2">
+                  {/* Slider (desktop / larger screens) */}
+                  <div className="hidden sm:block">
+                    <Slider
+                      value={[animationSpeedMultiplier]}
+                      min={0.25}
+                      max={4}
+                      step={0.25}
+                      ticks={[0.25, 0.5, 0.75, 1, 2, 3, 4]}
+                      formatTick={(t) => (t === 1 ? "1x" : `${t}x`)}
+                      onValueChange={(v: number[]) =>
+                        setAnimationSpeedMultiplier(v[0] ?? 1)
+                      }
+                      aria-label="Animation speed multiplier"
+                      className="mt-1"
+                      disabled={prefersReducedMotion}
+                    />
+                  </div>
+                  {/* Dropdown fallback (small screens) */}
+                  <div className="block sm:hidden">
+                    <select
+                      className="bg-background border-border text-foreground w-full rounded-md border px-2 py-2 text-sm disabled:opacity-60"
+                      value={animationSpeedMultiplier}
+                      disabled={prefersReducedMotion}
+                      onChange={(e) =>
+                        setAnimationSpeedMultiplier(
+                          parseFloat(e.target.value) || 1,
+                        )
+                      }
+                      aria-label="Animation speed multiplier select"
+                    >
+                      {[0.25, 0.5, 0.75, 1, 2, 3, 4].map((v) => (
+                        <option key={v} value={v}>
+                          {v === 1 ? "1x (default)" : `${v}x`}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
               </div>
+
               <Button
                 type="submit"
-                disabled={updateProfileMutation.isPending}
+                disabled={animationPrefsUpdating}
                 variant="default"
-                className="hover-lift"
               >
-                {updateProfileMutation.isPending
-                  ? "Updating..."
-                  : "Save Changes"}
+                {animationPrefsUpdating ? "Saving..." : "Save Preferences"}
               </Button>
             </form>
           </CardContent>
         </Card>
+      </TabsContent>
 
+      <TabsContent value="data" className="space-y-8">
         {/* Data Overview */}
         <Card className="form-section bg-card border-border border">
           <CardHeader>
@@ -415,475 +643,229 @@ export function SettingsContent() {
             </div>
           </CardContent>
         </Card>
-      </div>
 
-      {/* Security Settings */}
-      <Card className="bg-card border-border border">
-        <CardHeader>
-          <CardTitle className="text-foreground flex items-center gap-2">
-            <Key className="text-primary h-5 w-5" />
-            Security Settings
-          </CardTitle>
-          <CardDescription>
-            Change your password and manage account security
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleChangePassword} className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="current-password">Current Password</Label>
-              <div className="relative">
-                <Input
-                  id="current-password"
-                  type={showCurrentPassword ? "text" : "password"}
-                  value={currentPassword}
-                  onChange={(e) => setCurrentPassword(e.target.value)}
-                  placeholder="Enter your current password"
-                />
+        {/* Data Management */}
+        <Card className="bg-card border-border border">
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center gap-2">
+              <Shield className="text-primary h-5 w-5" />
+              Data Management
+            </CardTitle>
+            <CardDescription>
+              Backup, restore, or manage your account data
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-6">
+              <div className="flex flex-col gap-3 sm:flex-row sm:gap-4">
                 <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  className="absolute top-1/2 right-2 h-6 w-6 -translate-y-1/2 p-0"
-                  onClick={() => setShowCurrentPassword(!showCurrentPassword)}
+                  onClick={handleExportData}
+                  disabled={exportDataQuery.isFetching}
+                  variant="outline"
+                  className="w-full sm:flex-1"
                 >
-                  {showCurrentPassword ? (
-                    <EyeOff className="h-4 w-4" />
-                  ) : (
-                    <Eye className="h-4 w-4" />
-                  )}
+                  <Download className="mr-2 h-4 w-4" />
+                  {exportDataQuery.isFetching ? "Exporting..." : "Export Backup"}
                 </Button>
-              </div>
-            </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="new-password">New Password</Label>
-              <div className="relative">
-                <Input
-                  id="new-password"
-                  type={showNewPassword ? "text" : "password"}
-                  value={newPassword}
-                  onChange={(e) => setNewPassword(e.target.value)}
-                  placeholder="Enter your new password"
-                />
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  className="absolute top-1/2 right-2 h-6 w-6 -translate-y-1/2 p-0"
-                  onClick={() => setShowNewPassword(!showNewPassword)}
+                <Dialog
+                  open={isImportDialogOpen}
+                  onOpenChange={setIsImportDialogOpen}
                 >
-                  {showNewPassword ? (
-                    <EyeOff className="h-4 w-4" />
-                  ) : (
-                    <Eye className="h-4 w-4" />
-                  )}
-                </Button>
-              </div>
-              <p className="text-muted-foreground text-sm">
-                Password must be at least 8 characters long
-              </p>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="confirm-password">Confirm New Password</Label>
-              <div className="relative">
-                <Input
-                  id="confirm-password"
-                  type={showConfirmPassword ? "text" : "password"}
-                  value={confirmPassword}
-                  onChange={(e) => setConfirmPassword(e.target.value)}
-                  placeholder="Confirm your new password"
-                />
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  className="absolute top-1/2 right-2 h-6 w-6 -translate-y-1/2 p-0"
-                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                >
-                  {showConfirmPassword ? (
-                    <EyeOff className="h-4 w-4" />
-                  ) : (
-                    <Eye className="h-4 w-4" />
-                  )}
-                </Button>
-              </div>
-            </div>
-
-            <Button
-              type="submit"
-              disabled={changePasswordMutation.isPending}
-              variant="default"
-            >
-              {changePasswordMutation.isPending
-                ? "Changing Password..."
-                : "Change Password"}
-            </Button>
-          </form>
-        </CardContent>
-      </Card>
-
-      {/* Accessibility & Animation */}
-      <Card className="bg-card border-border border">
-        <CardHeader>
-          <CardTitle className="text-foreground flex items-center gap-2">
-            <Info className="text-primary h-5 w-5" />
-            Accessibility & Animation
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSaveAnimationPreferences} className="space-y-6">
-            <div className="flex items-start justify-between gap-4">
-              <div className="space-y-1.5">
-                <Label>Reduce Motion</Label>
-                <p className="text-muted-foreground text-xs leading-snug">
-                  Turn this on to reduce or remove non-essential animations and
-                  transitions.
-                </p>
-              </div>
-              <Switch
-                checked={prefersReducedMotion}
-                onCheckedChange={(checked) =>
-                  setPrefersReducedMotion(Boolean(checked))
-                }
-                aria-label="Toggle reduced motion"
-              />
-            </div>
-
-            <div className="space-y-2">
-              <div className="flex items-center justify-between">
-                <Label className="mb-0">Animation Speed Multiplier</Label>
-                <span className="text-muted-foreground text-xs font-medium">
-                  {prefersReducedMotion
-                    ? "1.00x (locked)"
-                    : `${animationSpeedMultiplier.toFixed(2)}x`}
-                </span>
-              </div>
-              <p className="text-muted-foreground text-xs leading-snug">
-                Adjust global animation duration scaling. Lower values (0.25×,
-                0.5×, 0.75×) slow animations; higher values (2×, 3×, 4×) speed
-                them up.
-              </p>
-              <div className="flex flex-col gap-2">
-                {/* Slider (desktop / larger screens) */}
-                <div className="hidden sm:block">
-                  <Slider
-                    value={[animationSpeedMultiplier]}
-                    min={0.25}
-                    max={4}
-                    step={0.25}
-                    ticks={[0.25, 0.5, 0.75, 1, 2, 3, 4]}
-                    formatTick={(t) => (t === 1 ? "1x" : `${t}x`)}
-                    onValueChange={(v: number[]) =>
-                      setAnimationSpeedMultiplier(v[0] ?? 1)
-                    }
-                    aria-label="Animation speed multiplier"
-                    className="mt-1"
-                    disabled={prefersReducedMotion}
-                  />
-                </div>
-                {/* Dropdown fallback (small screens) */}
-                <div className="block sm:hidden">
-                  <select
-                    className="bg-background border-border text-foreground w-full rounded-md border px-2 py-2 text-sm disabled:opacity-60"
-                    value={animationSpeedMultiplier}
-                    disabled={prefersReducedMotion}
-                    onChange={(e) =>
-                      setAnimationSpeedMultiplier(
-                        parseFloat(e.target.value) || 1,
-                      )
-                    }
-                    aria-label="Animation speed multiplier select"
-                  >
-                    {[0.25, 0.5, 0.75, 1, 2, 3, 4].map((v) => (
-                      <option key={v} value={v}>
-                        {v === 1 ? "1x (default)" : `${v}x`}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-              </div>
-            </div>
-
-            <Button
-              type="submit"
-              disabled={animationPrefsUpdating}
-              variant="default"
-            >
-              {animationPrefsUpdating ? "Saving..." : "Save Preferences"}
-            </Button>
-          </form>
-        </CardContent>
-      </Card>
-
-      {/* Appearance Settings */}
-      <Card className="bg-card border-border border">
-        <CardHeader>
-          <CardTitle className="text-foreground flex items-center gap-2">
-            <Palette className="text-primary h-5 w-5" />
-            Appearance
-          </CardTitle>
-          <CardDescription>
-            Customize the look and feel of the application
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-6">
-          <AppearanceSettings />
-        </CardContent>
-      </Card>
-
-      {/* Data Management */}
-      <Card className="bg-card border-border border">
-        <CardHeader>
-          <CardTitle className="text-foreground flex items-center gap-2">
-            <Shield className="text-primary h-5 w-5" />
-            Data Management
-          </CardTitle>
-          <CardDescription>
-            Backup, restore, or manage your account data
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-6">
-            <div className="flex flex-col gap-3 sm:flex-row sm:gap-4">
-              <Button
-                onClick={handleExportData}
-                disabled={exportDataQuery.isFetching}
-                variant="outline"
-                className="w-full sm:flex-1"
-              >
-                <Download className="mr-2 h-4 w-4" />
-                {exportDataQuery.isFetching ? "Exporting..." : "Export Backup"}
-              </Button>
-
-              <Dialog
-                open={isImportDialogOpen}
-                onOpenChange={setIsImportDialogOpen}
-              >
-                <DialogTrigger asChild>
-                  <Button variant="outline" className="w-full sm:flex-1">
-                    <Upload className="mr-2 h-4 w-4" />
-                    Import Backup
-                  </Button>
-                </DialogTrigger>
-                <DialogContent className="max-w-2xl">
-                  <DialogHeader>
-                    <DialogTitle>Import Backup Data</DialogTitle>
-                    <DialogDescription>
-                      Upload your backup JSON file or paste the contents below.
-                      This will add the data to your existing account.
-                    </DialogDescription>
-                  </DialogHeader>
-                  <div className="space-y-4">
-                    {/* Import Method Selector */}
-                    <div className="flex gap-2">
-                      <Button
-                        type="button"
-                        variant={
-                          importMethod === "file" ? "default" : "outline"
-                        }
-                        size="sm"
-                        onClick={() => setImportMethod("file")}
-                        className="flex-1"
-                      >
-                        <FileUp className="mr-2 h-4 w-4" />
-                        Upload File
-                      </Button>
-                      <Button
-                        type="button"
-                        variant={
-                          importMethod === "paste" ? "default" : "outline"
-                        }
-                        size="sm"
-                        onClick={() => setImportMethod("paste")}
-                        className="flex-1"
-                      >
-                        <FileText className="mr-2 h-4 w-4" />
-                        Paste Content
-                      </Button>
-                    </div>
-
-                    {/* File Upload Method */}
-                    {importMethod === "file" && (
-                      <div className="space-y-2">
-                        <Label htmlFor="backup-file">Select Backup File</Label>
-                        <Input
-                          id="backup-file"
-                          type="file"
-                          accept=".json"
-                          onChange={handleFileUpload}
-                          disabled={importDataMutation.isPending}
-                        />
-                        <p className="text-muted-foreground text-sm">
-                          Select the JSON backup file you previously exported.
-                        </p>
-                      </div>
-                    )}
-
-                    {/* Manual Paste Method */}
-                    {importMethod === "paste" && (
-                      <div className="space-y-2">
-                        <Label htmlFor="backup-content">Backup Content</Label>
-                        <Textarea
-                          id="backup-content"
-                          placeholder="Paste your backup JSON data here..."
-                          value={importData}
-                          onChange={(e) => setImportData(e.target.value)}
-                          rows={12}
-                          className="font-mono text-sm"
-                        />
-                      </div>
-                    )}
-                  </div>
-                  <DialogFooter>
-                    <Button
-                      variant="outline"
-                      onClick={() => {
-                        setIsImportDialogOpen(false);
-                        setImportData("");
-                        setImportMethod("file");
-                      }}
-                    >
-                      Cancel
+                  <DialogTrigger asChild>
+                    <Button variant="outline" className="w-full sm:flex-1">
+                      <Upload className="mr-2 h-4 w-4" />
+                      Import Backup
                     </Button>
-                    {importMethod === "paste" && (
+                  </DialogTrigger>
+                  <DialogContent className="max-w-2xl">
+                    <DialogHeader>
+                      <DialogTitle>Import Backup Data</DialogTitle>
+                      <DialogDescription>
+                        Upload your backup JSON file or paste the contents below.
+                        This will add the data to your existing account.
+                      </DialogDescription>
+                    </DialogHeader>
+                    <div className="space-y-4">
+                      {/* Import Method Selector */}
+                      <div className="flex gap-2">
+                        <Button
+                          type="button"
+                          variant={
+                            importMethod === "file" ? "default" : "outline"
+                          }
+                          size="sm"
+                          onClick={() => setImportMethod("file")}
+                          className="flex-1"
+                        >
+                          <FileUp className="mr-2 h-4 w-4" />
+                          Upload File
+                        </Button>
+                        <Button
+                          type="button"
+                          variant={
+                            importMethod === "paste" ? "default" : "outline"
+                          }
+                          size="sm"
+                          onClick={() => setImportMethod("paste")}
+                          className="flex-1"
+                        >
+                          <FileText className="mr-2 h-4 w-4" />
+                          Paste Content
+                        </Button>
+                      </div>
+
+                      {/* File Upload Method */}
+                      {importMethod === "file" && (
+                        <div className="space-y-2">
+                          <Label htmlFor="backup-file">Select Backup File</Label>
+                          <Input
+                            id="backup-file"
+                            type="file"
+                            accept=".json"
+                            onChange={handleFileUpload}
+                            disabled={importDataMutation.isPending}
+                          />
+                          <p className="text-muted-foreground text-sm">
+                            Select the JSON backup file you previously exported.
+                          </p>
+                        </div>
+                      )}
+
+                      {/* Manual Paste Method */}
+                      {importMethod === "paste" && (
+                        <div className="space-y-2">
+                          <Label htmlFor="backup-content">Backup Content</Label>
+                          <Textarea
+                            id="backup-content"
+                            placeholder="Paste your backup JSON data here..."
+                            value={importData}
+                            onChange={(e) => setImportData(e.target.value)}
+                            rows={12}
+                            className="font-mono text-sm"
+                          />
+                        </div>
+                      )}
+                    </div>
+                    <DialogFooter>
                       <Button
-                        onClick={handleImportData}
-                        disabled={
-                          !importData.trim() || importDataMutation.isPending
-                        }
-                        variant="default"
+                        variant="outline"
+                        onClick={() => {
+                          setIsImportDialogOpen(false);
+                          setImportData("");
+                          setImportMethod("file");
+                        }}
                       >
-                        {importDataMutation.isPending
-                          ? "Importing..."
-                          : "Import Data"}
+                        Cancel
                       </Button>
-                    )}
-                  </DialogFooter>
-                </DialogContent>
-              </Dialog>
-            </div>
+                      {importMethod === "paste" && (
+                        <Button
+                          onClick={handleImportData}
+                          disabled={
+                            !importData.trim() || importDataMutation.isPending
+                          }
+                          variant="default"
+                        >
+                          {importDataMutation.isPending
+                            ? "Importing..."
+                            : "Import Data"}
+                        </Button>
+                      )}
+                    </DialogFooter>
+                  </DialogContent>
+                </Dialog>
+              </div>
 
-            {/* Backup Information */}
-            <Collapsible>
-              <CollapsibleTrigger asChild>
-                <Button variant="ghost" className="w-full justify-between p-0">
-                  <div className="flex items-center gap-2">
-                    <Info className="h-4 w-4" />
-                    <span className="font-medium">Backup Information</span>
+              {/* Backup Information */}
+              <Collapsible>
+                <CollapsibleTrigger asChild>
+                  <Button variant="ghost" className="w-full justify-between p-0">
+                    <div className="flex items-center gap-2">
+                      <Info className="h-4 w-4" />
+                      <span className="font-medium">Backup Information</span>
+                    </div>
+                    <ChevronDown className="h-4 w-4" />
+                  </Button>
+                </CollapsibleTrigger>
+                <CollapsibleContent className="mt-3">
+                  <div className="border-border bg-muted/20 border p-4">
+                    <ul className="text-muted-foreground space-y-1 text-sm">
+                      <li>
+                        • Regular backups protect your important business data
+                      </li>
+                      <li>
+                        • Backup files contain all data in secure JSON format
+                      </li>
+                      <li>
+                        • Import adds to existing data without replacing anything
+                      </li>
+                      <li>
+                        • Upload JSON files directly or paste content manually
+                      </li>
+                      <li>
+                        • Store backup files in a secure, accessible location
+                      </li>
+                    </ul>
                   </div>
-                  <ChevronDown className="h-4 w-4" />
-                </Button>
-              </CollapsibleTrigger>
-              <CollapsibleContent className="mt-3">
-                <div className="border-border bg-muted/20 border p-4">
-                  <ul className="text-muted-foreground space-y-1 text-sm">
-                    <li>
-                      • Regular backups protect your important business data
-                    </li>
-                    <li>
-                      • Backup files contain all data in secure JSON format
-                    </li>
-                    <li>
-                      • Import adds to existing data without replacing anything
-                    </li>
-                    <li>
-                      • Upload JSON files directly or paste content manually
-                    </li>
-                    <li>
-                      • Store backup files in a secure, accessible location
-                    </li>
-                  </ul>
-                </div>
-              </CollapsibleContent>
-            </Collapsible>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Danger Zone */}
-      <Card className="bg-card border-border border-l-destructive border border-l-4">
-        <CardHeader>
-          <CardTitle className="text-destructive flex items-center gap-2">
-            <AlertTriangle className="text-destructive h-5 w-5" />
-            Danger Zone
-          </CardTitle>
-          <CardDescription>
-            Irreversible actions that permanently affect your account
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-4">
-            <div className="bg-destructive/10 border-destructive/20 border p-4">
-              <h4 className="text-destructive font-medium">
-                Delete All Account Data
-              </h4>
-              <p className="text-muted-foreground mt-2 text-sm">
-                This will permanently delete all your clients, businesses,
-                invoices, and related data. This action cannot be undone and
-                your data cannot be recovered.
-              </p>
+                </CollapsibleContent>
+              </Collapsible>
             </div>
+          </CardContent>
+        </Card>
 
+        {/* Delete Account (Danger Zone) */}
+        <Card className="border-destructive/50 bg-destructive/5 border">
+          <CardHeader>
+            <CardTitle className="text-destructive flex items-center gap-2">
+              <AlertTriangle className="h-5 w-5" />
+              Danger Zone
+            </CardTitle>
+            <CardDescription className="text-destructive/80">
+              Irreversible actions for your account
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
             <AlertDialog>
               <AlertDialogTrigger asChild>
-                <Button variant="destructive" className="w-full">
-                  <AlertTriangle className="mr-2 h-4 w-4" />
+                <Button variant="destructive" className="w-full sm:w-auto">
                   Delete All Data
                 </Button>
               </AlertDialogTrigger>
               <AlertDialogContent>
                 <AlertDialogHeader>
                   <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-                  <AlertDialogDescription className="space-y-4">
-                    <div>
-                      This action cannot be undone. This will permanently delete
-                      all your:
-                    </div>
-                    <ul className="border-border bg-muted/50 list-inside list-disc space-y-1 rounded-lg border p-3 text-sm">
-                      <li>Client information and contact details</li>
-                      <li>Business profiles and settings</li>
-                      <li>Invoices and invoice line items</li>
-                      <li>All related data and records</li>
-                    </ul>
-                    <div className="space-y-2">
-                      <div className="font-medium">
-                        Type{" "}
-                        <span className="bg-muted rounded px-2 py-1 font-mono text-sm">
-                          delete all my data
-                        </span>{" "}
-                        to confirm:
-                      </div>
-                      <Input
-                        value={deleteConfirmText}
-                        onChange={(e) => setDeleteConfirmText(e.target.value)}
-                        placeholder="Type delete all my data"
-                        className="font-mono"
-                      />
-                    </div>
+                  <AlertDialogDescription>
+                    This action cannot be undone. This will permanently delete your
+                    account and remove your data from our servers.
                   </AlertDialogDescription>
                 </AlertDialogHeader>
+                <div className="my-4 space-y-2">
+                  <Label htmlFor="confirm-delete">
+                    Type <span className="font-bold">delete all my data</span> to
+                    confirm
+                  </Label>
+                  <Input
+                    id="confirm-delete"
+                    value={deleteConfirmText}
+                    onChange={(e) => setDeleteConfirmText(e.target.value)}
+                    placeholder="delete all my data"
+                  />
+                </div>
                 <AlertDialogFooter>
                   <AlertDialogCancel>Cancel</AlertDialogCancel>
                   <AlertDialogAction
                     onClick={handleDeleteAllData}
-                    disabled={
-                      deleteConfirmText !== "delete all my data" ||
-                      deleteDataMutation.isPending
-                    }
-                    className="bg-destructive hover:bg-destructive/90"
+                    className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                    disabled={deleteConfirmText !== "delete all my data"}
                   >
-                    {deleteDataMutation.isPending
-                      ? "Deleting..."
-                      : "Delete Forever"}
+                    Delete Account
                   </AlertDialogAction>
                 </AlertDialogFooter>
               </AlertDialogContent>
             </AlertDialog>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </Tabs>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b099c0b..3381454 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -136,16 +136,16 @@ export default function RootLayout({
         />
       </head>
       <body className="bg-background text-foreground relative min-h-screen overflow-x-hidden font-sans antialiased">
-        <ThemeProvider>
-          <ColorThemeProvider>
-            <TRPCReactProvider>
+        <TRPCReactProvider>
+          <ThemeProvider>
+            <ColorThemeProvider>
               <AnimationPreferencesProvider>
                 {children}
               </AnimationPreferencesProvider>
               <Toaster />
-            </TRPCReactProvider>
-          </ColorThemeProvider>
-        </ThemeProvider>
+            </ColorThemeProvider>
+          </ThemeProvider>
+        </TRPCReactProvider>
       </body>
     </html>
   );
diff --git a/src/components/providers/color-theme-provider.tsx b/src/components/providers/color-theme-provider.tsx
index b645be3..c893a27 100644
--- a/src/components/providers/color-theme-provider.tsx
+++ b/src/components/providers/color-theme-provider.tsx
@@ -3,6 +3,8 @@
 import * as React from "react";
 import { useTheme } from "./theme-provider";
 import { generateAccentColors } from "~/lib/color-utils";
+import { api } from "~/trpc/react";
+import { authClient } from "~/lib/auth-client";
 
 type ColorTheme = "slate" | "blue" | "green" | "rose" | "orange" | "custom";
 
@@ -38,6 +40,22 @@ export function ColorThemeProvider({
   const [customColor, setCustomColor] = React.useState<string | undefined>();
   const { theme: modeTheme } = useTheme();
 
+  // Auth & DB Sync
+  const { data: session } = authClient.useSession();
+  const { data: dbTheme } = api.settings.getTheme.useQuery(undefined, {
+    enabled: !!session?.user,
+    staleTime: Infinity, // Only fetch once on mount/auth
+  });
+
+  const updateThemeMutation = api.settings.updateTheme.useMutation();
+
+  // Sync from DB when available
+  React.useEffect(() => {
+    if (dbTheme) {
+      setColorTheme(dbTheme.colorTheme, dbTheme.customColor);
+    }
+  }, [dbTheme]);
+
   const setColorTheme = React.useCallback(
     (theme: ColorTheme, customColor?: string) => {
       const root = document.documentElement;
@@ -72,7 +90,7 @@ export function ColorThemeProvider({
           setColorThemeState("custom");
           setCustomColor(customColor);
 
-          // Persist custom theme
+          // Persist custom theme locally
           const themeData = {
             color: customColor,
             timestamp: Date.now(),
@@ -88,6 +106,7 @@ export function ColorThemeProvider({
           setCustomColor(undefined);
           root.classList.add(defaultColorTheme);
           localStorage.setItem("color-theme", defaultColorTheme);
+          return; // Don't sync failed theme
         }
       } else {
         // Apply preset color theme by setting the appropriate class
@@ -99,15 +118,52 @@ export function ColorThemeProvider({
         localStorage.removeItem("customThemeColor");
         localStorage.removeItem("isCustomTheme");
 
-        // Persist preset theme
+        // Persist preset theme locally
         localStorage.setItem("color-theme", theme);
       }
+
+      // Sync to DB if authenticated
+      // We check session inside the callback or pass it as dependency
+      // But since this is a callback, we'll use the mutation directly if we can
+      // However, we need to avoid infinite loops if the DB update triggers a re-render
+      // The mutation is stable.
     },
     [modeTheme, defaultColorTheme],
   );
 
-  // Load saved theme on mount
+  // Effect to trigger DB update when state changes (debounced or direct)
+  // We do this separately to avoid putting mutation in the setColorTheme callback dependencies if possible
+  // But actually, calling it in setColorTheme is better for direct user action.
+  // The issue is `setColorTheme` is called by the `useEffect` that syncs FROM DB.
+  // So we need to distinguish between "user set theme" and "synced from DB".
+  // For now, we'll just let it be. If the DB sync calls setColorTheme, it will update state.
+  // If we add a DB update call here, it might be redundant but harmless if the value is same.
+  // BETTER APPROACH: Only call mutation when user interacts.
+  // But `setColorTheme` is exposed to consumers.
+  // Let's wrap the exposed `setColorTheme` to include the DB call.
+
+  const handleSetColorTheme = React.useCallback(
+    (theme: ColorTheme, customColor?: string) => {
+      setColorTheme(theme, customColor);
+
+      // Optimistic update is already done by setColorTheme (local state)
+      // Now sync to DB
+      if (session?.user) {
+        updateThemeMutation.mutate({
+          colorTheme: theme,
+          customColor: theme === "custom" ? customColor : undefined,
+        });
+      }
+    },
+    [setColorTheme, session?.user, updateThemeMutation]
+  );
+
+  // Load saved theme on mount (Local Storage Fallback)
   React.useEffect(() => {
+    // If we have DB data, that takes precedence (handled by other effect)
+    // But initially or if offline/unauth, use local storage
+    if (dbTheme) return;
+
     try {
       const isCustom = localStorage.getItem("isCustomTheme") === "true";
       const savedThemeData = localStorage.getItem("customThemeColor");
@@ -133,7 +189,7 @@ export function ColorThemeProvider({
       console.error("Failed to load theme:", error);
       setColorTheme(defaultColorTheme);
     }
-  }, [setColorTheme, defaultColorTheme]);
+  }, [setColorTheme, defaultColorTheme, dbTheme]);
 
   // Re-apply custom theme when mode changes
   React.useEffect(() => {
@@ -145,10 +201,10 @@ export function ColorThemeProvider({
   const value = React.useMemo(
     () => ({
       colorTheme,
-      setColorTheme,
+      setColorTheme: handleSetColorTheme, // Expose the wrapper
       customColor,
     }),
-    [colorTheme, customColor, setColorTheme],
+    [colorTheme, customColor, handleSetColorTheme],
   );
 
   return (
diff --git a/src/components/providers/theme-provider.tsx b/src/components/providers/theme-provider.tsx
index 3a7105f..062e730 100644
--- a/src/components/providers/theme-provider.tsx
+++ b/src/components/providers/theme-provider.tsx
@@ -1,6 +1,8 @@
 "use client";
 
 import * as React from "react";
+import { api } from "~/trpc/react";
+import { authClient } from "~/lib/auth-client";
 
 type Theme = "dark" | "light" | "system";
 
@@ -30,12 +32,28 @@ export function ThemeProvider({
 }: ThemeProviderProps) {
   const [theme, setTheme] = React.useState<Theme>(defaultTheme);
 
+  // Auth & DB Sync
+  const { data: session } = authClient.useSession();
+  const { data: dbTheme } = api.settings.getTheme.useQuery(undefined, {
+    enabled: !!session?.user,
+    staleTime: Infinity,
+  });
+
+  const updateThemeMutation = api.settings.updateTheme.useMutation();
+
+  // Sync from DB
+  React.useEffect(() => {
+    if (dbTheme?.theme) {
+      setTheme(dbTheme.theme);
+    }
+  }, [dbTheme]);
+
   React.useEffect(() => {
     const savedTheme = localStorage.getItem(storageKey) as Theme | null;
-    if (savedTheme) {
+    if (savedTheme && !dbTheme) {
       setTheme(savedTheme);
     }
-  }, [storageKey]);
+  }, [storageKey, dbTheme]);
 
   React.useEffect(() => {
     const root = window.document.documentElement;
@@ -43,13 +61,19 @@ export function ThemeProvider({
     root.classList.remove("light", "dark");
 
     if (theme === "system") {
-      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
-        .matches
-        ? "dark"
-        : "light";
+      const media = window.matchMedia("(prefers-color-scheme: dark)");
+      const systemTheme = media.matches ? "dark" : "light";
 
       root.classList.add(systemTheme);
-      return;
+
+      const listener = (e: MediaQueryListEvent) => {
+        const newTheme = e.matches ? "dark" : "light";
+        root.classList.remove("light", "dark");
+        root.classList.add(newTheme);
+      };
+
+      media.addEventListener("change", listener);
+      return () => media.removeEventListener("change", listener);
     }
 
     root.classList.add(theme);
@@ -58,12 +82,16 @@ export function ThemeProvider({
   const value = React.useMemo(
     () => ({
       theme,
-      setTheme: (theme: Theme) => {
-        localStorage.setItem(storageKey, theme);
-        setTheme(theme);
+      setTheme: (newTheme: Theme) => {
+        localStorage.setItem(storageKey, newTheme);
+        setTheme(newTheme);
+
+        if (session?.user) {
+          updateThemeMutation.mutate({ theme: newTheme });
+        }
       },
     }),
-    [theme, storageKey]
+    [theme, storageKey, session?.user, updateThemeMutation]
   );
 
   return (
diff --git a/src/server/api/routers/settings.ts b/src/server/api/routers/settings.ts
index d274a8c..7688c89 100644
--- a/src/server/api/routers/settings.ts
+++ b/src/server/api/routers/settings.ts
@@ -135,6 +135,46 @@ export const settingsRouter = createTRPCRouter({
       return { success: true };
     }),
 
+  // Get theme preferences
+  getTheme: protectedProcedure.query(async ({ ctx }) => {
+    const user = await ctx.db.query.users.findFirst({
+      where: eq(users.id, ctx.session.user.id),
+      columns: {
+        colorTheme: true,
+        customColor: true,
+        theme: true,
+      },
+    });
+
+    return {
+      colorTheme: (user?.colorTheme as "slate" | "blue" | "green" | "rose" | "orange" | "custom") ?? "slate",
+      customColor: user?.customColor ?? undefined,
+      theme: (user?.theme as "light" | "dark" | "system") ?? "system",
+    };
+  }),
+
+  // Update theme preferences
+  updateTheme: protectedProcedure
+    .input(
+      z.object({
+        colorTheme: z.enum(["slate", "blue", "green", "rose", "orange", "custom"]).optional(),
+        customColor: z.string().optional(),
+        theme: z.enum(["light", "dark", "system"]).optional(),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      await ctx.db
+        .update(users)
+        .set({
+          ...(input.colorTheme && { colorTheme: input.colorTheme }),
+          ...(input.customColor !== undefined && { customColor: input.customColor }),
+          ...(input.theme && { theme: input.theme }),
+        })
+        .where(eq(users.id, ctx.session.user.id));
+
+      return { success: true };
+    }),
+
   // Update user profile
   updateProfile: protectedProcedure
     .input(
diff --git a/src/server/db/schema.ts b/src/server/db/schema.ts
index 45976a7..eca68e6 100644
--- a/src/server/db/schema.ts
+++ b/src/server/db/schema.ts
@@ -29,6 +29,9 @@ export const users = createTable("user", (d) => ({
   // Custom fields
   prefersReducedMotion: d.boolean().default(false).notNull(),
   animationSpeedMultiplier: d.real().default(1).notNull(),
+  colorTheme: d.varchar({ length: 50 }).default("slate").notNull(),
+  customColor: d.varchar({ length: 50 }),
+  theme: d.varchar({ length: 20 }).default("system").notNull(),
 }));
 
 export const usersRelations = relations(users, ({ many }) => ({