soconnor/beenvoice
1
0
Fork 0
mirror of https://github.com/soconnor0919/beenvoice.git synced 2025-12-13 01:24:44 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implement database persistence and synchronization for user theme preferences

Browse Source
This commit is contained in:
Sean O'Connor
2025-11-29 03:08:10 -05:00
parent a1c7b9223f
commit 03579bc625
6 changed files with 599 additions and 490 deletions
Download Patch File Download Diff File Expand all files Collapse all files

916
src/app/dashboard/settings/_components/settings-content.tsx
View File

@@ -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>
);
}

12
src/app/layout.tsx
View File

@@ -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>
);

68
src/components/providers/color-theme-provider.tsx
View File

@@ -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 (

50
src/components/providers/theme-provider.tsx
View File

@@ -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 (

40
src/server/api/routers/settings.ts
View File

@@ -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(

3
src/server/db/schema.ts
View File

@@ -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 }) => ({