theming, date, time localisation, additional features, seeding initial cleanup

2025-09-26 21:12:59 +01:00
parent b89d91ade2
commit 22c462c61c
43 changed files with 2647 additions and 550 deletions
@@ -0,0 +1,52 @@
+'use client';
+
+import * as React from 'react';
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+
+import { Button } from '@/components/ui/button';
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+export function ModeToggle() {
+	const { setTheme } = useTheme();
+
+	const handleThemeChange = async (newTheme: 'light' | 'dark' | 'system') => {
+		// Update next-themes immediately for UI responsiveness
+		setTheme(newTheme);
+
+		// Sync with database in background
+		try {
+			await fetch('/api/users/theme', {
+				method: 'PUT',
+				headers: {
+					'Content-Type': 'application/json',
+				},
+				body: JSON.stringify({ themePreference: newTheme }),
+			});
+		} catch (error) {
+			console.error('Failed to sync theme preference:', error);
+		}
+	};
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button variant='outline' size='icon'>
+					<Sun className='h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0' />
+					<Moon className='absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100' />
+					<span className='sr-only'>Toggle theme</span>
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align='end'>
+				<DropdownMenuItem onClick={() => handleThemeChange('light')}>Light</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => handleThemeChange('dark')}>Dark</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => handleThemeChange('system')}>System</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}