wip: not loading themes until reload, missing in dashboard, bad alignment and scaling

src/routes/dashboard/+page.server.ts

@@ -1,7 +1,7 @@
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad, Actions } from './$types';
 import { db } from '$lib/server/db';
-import { wishlists, savedWishlists } from '$lib/server/schema';
+import { wishlists, savedWishlists, users } from '$lib/server/schema';
 import { eq, and } from 'drizzle-orm';
 
 export const load: PageServerLoad = async (event) => {
@@ -149,6 +149,26 @@ export const actions: Actions = {
 				eq(wishlists.userId, session.user.id)
 			));
 
+		return { success: true };
+	},
+
+	updateDashboardTheme: async ({ request, locals }) => {
+		const session = await locals.auth();
+		if (!session?.user?.id) {
+			throw redirect(303, '/signin');
+		}
+
+		const formData = await request.formData();
+		const theme = formData.get('theme') as string;
+
+		if (!theme) {
+			return { success: false, error: 'Theme is required' };
+		}
+
+		await db.update(users)
+			.set({ dashboardTheme: theme })
+			.where(eq(users.id, session.user.id));
+
 		return { success: true };
 	}
 };

src/routes/dashboard/+page.svelte

@@ -34,8 +34,12 @@
 	});
 </script>
 
-<PageContainer>
-	<DashboardHeader userName={data.user?.name} userEmail={data.user?.email} />
+<PageContainer theme={data.user?.dashboardTheme} themeColor="hsl(var(--primary))">
+	<DashboardHeader
+		userName={data.user?.name}
+		userEmail={data.user?.email}
+		dashboardTheme={data.user?.dashboardTheme || 'none'}
+	/>
 
 	<!-- Local Wishlists Section (for anonymous and authenticated users) -->
 	<LocalWishlistsSection isAuthenticated={data.isAuthenticated} />

src/routes/wishlist/[token]/+page.svelte

@@ -35,7 +35,7 @@
 	);
 </script>
 
-<PageContainer maxWidth="4xl">
+<PageContainer maxWidth="4xl" theme={data.wishlist.theme} themeColor={data.wishlist.color}>
 	<Navigation
 		isAuthenticated={data.isAuthenticated}
 		showDashboardLink={true}
@@ -110,7 +110,7 @@
 	<div class="space-y-4">
 		{#if filteredItems.length > 0}
 			{#each filteredItems as item}
-				<WishlistItem {item}>
+				<WishlistItem {item} theme={data.wishlist.theme}>
 					<ReservationButton
 						itemId={item.id}
 						isReserved={item.isReserved}

src/routes/wishlist/[token]/edit/+page.server.ts

@@ -203,6 +203,7 @@ export const actions: Actions = {
 		const title = formData.get('title');
 		const description = formData.get('description');
 		const endDate = formData.get('endDate');
+		const theme = formData.get('theme');
 
 		const wishlist = await db.query.wishlists.findFirst({
 			where: eq(wishlists.ownerToken, params.token)
@@ -237,6 +238,10 @@ export const actions: Actions = {
 			updates.endDate = endDateStr ? new Date(endDateStr) : null;
 		}
 
+		if (theme !== null) {
+			updates.theme = theme?.toString().trim() || 'none';
+		}
+
 		await db.update(wishlists)
 			.set(updates)
 			.where(eq(wishlists.id, wishlist.id));

src/routes/wishlist/[token]/edit/+page.svelte

@@ -107,7 +107,7 @@
 	}
 </script>
 
-<PageContainer maxWidth="4xl">
+<PageContainer maxWidth="4xl" theme={data.wishlist.theme} themeColor={data.wishlist.color}>
 	<Navigation
 		isAuthenticated={data.isAuthenticated}
 		showDashboardLink={true}
@@ -119,6 +119,7 @@
 		onDescriptionUpdate={wishlistUpdates.updateDescription}
 		onColorUpdate={wishlistUpdates.updateColor}
 		onEndDateUpdate={wishlistUpdates.updateEndDate}
+		onThemeUpdate={wishlistUpdates.updateTheme}
 	/>
 
 	<ShareLinks
@@ -168,6 +169,7 @@
 		{rearranging}
 		onStartEditing={startEditing}
 		onReorder={handleReorder}
+		theme={data.wishlist.theme}
 	/>
 
 	<DangerZone bind:unlocked={rearranging} />