drizzle/schema.ts

@@ -78,6 +78,9 @@ export const user = pgTable("user", {
 	username: text(),
 	dashboardTheme: text("dashboard_theme").default('none'),
 	dashboardColor: text("dashboard_color"),
+	lastLogin: timestamp("last_login", { mode: 'string' }),
+	createdAt: timestamp("created_at", { mode: 'string' }).defaultNow().notNull(),
+	updatedAt: timestamp("updated_at", { mode: 'string' }).defaultNow().notNull(),
 }, (table) => [
 	unique("user_email_unique").on(table.email),
 	unique("user_username_unique").on(table.username),

src/auth.ts

@@ -103,6 +103,14 @@ const authConfig: SvelteKitAuthConfig = {
 		signIn: '/signin'
 	},
 	callbacks: {
+		async signIn({ user }) {
+			if (user?.id) {
+				await db.update(users)
+					.set({ lastLogin: new Date() })
+					.where(eq(users.id, user.id));
+			}
+			return true;
+		},
 		async jwt({ token, user }) {
 			if (user) {
 				token.id = user.id;

src/lib/components/wishlist/AddItemForm.svelte

@@ -8,12 +8,18 @@
 	import ColorPicker from '$lib/components/ui/ColorPicker.svelte';
 	import { enhance } from '$app/forms';
 	import { languageStore } from '$lib/stores/language.svelte';
+	import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
+	import { getCardStyle } from '$lib/utils/colors';
 
 	interface Props {
 		onSuccess?: () => void;
+		wishlistColor?: string | null;
+		wishlistTheme?: string | null;
 	}
 
-	let { onSuccess }: Props = $props();
+	let { onSuccess, wishlistColor = null, wishlistTheme = null }: Props = $props();
+
+	const cardStyle = $derived(getCardStyle(wishlistColor, null));
 
 	const t = $derived(languageStore.t);
 
@@ -53,11 +59,12 @@
 	}
 </script>
 
-<Card>
-	<CardHeader>
+<Card style={cardStyle} class="relative overflow-hidden">
+	<ThemeCard themeName={wishlistTheme} color={wishlistColor} showPattern={false} />
+	<CardHeader class="relative z-10">
 		<CardTitle>{t.form.addNewWish}</CardTitle>
 	</CardHeader>
-	<CardContent>
+	<CardContent class="relative z-10">
 		<form
 			method="POST"
 			action="?/addItem"

src/lib/components/wishlist/EditItemForm.svelte

@@ -9,6 +9,8 @@
 	import { enhance } from '$app/forms';
 	import type { Item } from '$lib/server/schema';
 	import { languageStore } from '$lib/stores/language.svelte';
+	import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
+	import { getCardStyle } from '$lib/utils/colors';
 
 	interface Props {
 		item: Item;
@@ -18,9 +20,13 @@
 		currentPosition?: number;
 		totalItems?: number;
 		onPositionChange?: (newPosition: number) => void;
+		wishlistColor?: string | null;
+		wishlistTheme?: string | null;
 	}
 
-	let { item, onSuccess, onCancel, onColorChange, currentPosition = 1, totalItems = 1, onPositionChange }: Props = $props();
+	let { item, onSuccess, onCancel, onColorChange, currentPosition = 1, totalItems = 1, onPositionChange, wishlistColor = null, wishlistTheme = null }: Props = $props();
+
+	const cardStyle = $derived(getCardStyle(wishlistColor, null));
 
 	const t = $derived(languageStore.t);
 
@@ -60,11 +66,12 @@
 	}
 </script>
 
-<Card>
-	<CardHeader>
+<Card style={cardStyle} class="relative overflow-hidden">
+	<ThemeCard themeName={wishlistTheme} color={wishlistColor} showPattern={false} />
+	<CardHeader class="relative z-10">
 		<CardTitle>{t.wishlist.editWish}</CardTitle>
 	</CardHeader>
-	<CardContent>
+	<CardContent class="relative z-10">
 		<form
 			method="POST"
 			action="?/updateItem"

src/lib/server/schema.ts

@@ -14,7 +14,10 @@ export const users = pgTable('user', {
 	password: text('password'),
 	username: text('username').unique(),
 	dashboardTheme: text('dashboard_theme').default('none'),
-	dashboardColor: text('dashboard_color')
+	dashboardColor: text('dashboard_color'),
+	lastLogin: timestamp('last_login', { mode: 'date' }),
+	createdAt: timestamp('created_at').defaultNow().notNull(),
+	updatedAt: timestamp('updated_at').defaultNow().notNull()
 });
 
 export const accounts = pgTable(

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

@@ -85,7 +85,7 @@ export const actions: Actions = {
 		}
 
 		await db.update(wishlists)
-			.set({ isFavorite: !isFavorite })
+			.set({ isFavorite: !isFavorite, updatedAt: new Date() })
 			.where(eq(wishlists.id, wishlistId));
 
 		return { success: true };
@@ -171,7 +171,7 @@ export const actions: Actions = {
 		}
 
 		await db.update(users)
-			.set({ dashboardTheme: theme })
+			.set({ dashboardTheme: theme, updatedAt: new Date() })
 			.where(eq(users.id, session.user.id));
 
 		return { success: true };
@@ -187,7 +187,7 @@ export const actions: Actions = {
 		const color = formData.get('color') as string | null;
 
 		await db.update(users)
-			.set({ dashboardColor: color })
+			.set({ dashboardColor: color, updatedAt: new Date() })
 			.where(eq(users.id, session.user.id));
 
 		return { success: true };

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

@@ -155,7 +155,7 @@
 
 	{#if showAddForm}
 		<div bind:this={addFormElement}>
-			<AddItemForm onSuccess={handleItemAdded} />
+			<AddItemForm onSuccess={handleItemAdded} wishlistColor={currentColor} wishlistTheme={currentTheme} />
 		</div>
 	{/if}
 
@@ -169,6 +169,8 @@
 				currentPosition={items.findIndex(item => item.id === editingItem.id) + 1}
 				totalItems={items.length}
 				onPositionChange={handlePositionChange}
+				wishlistColor={currentColor}
+				wishlistTheme={currentTheme}
 			/>
 		</div>
 	{/if}