Creating specific id collection and wishlist pages as well as name to both.

.eslintrc.cjs

@@ -1,3 +1,4 @@
+/** @type { import("eslint").Linter.Config } */
 module.exports = {
 	root: true,
 	extends: [

drizzle/0011_charming_bucky.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "collections" ADD COLUMN "name" text DEFAULT 'My Collection' NOT NULL;--> statement-breakpoint
+ALTER TABLE "wishlists" ADD COLUMN "name" text DEFAULT 'My Wishlist' NOT NULL;

drizzle/meta/_journal.json

@@ -78,6 +78,13 @@
       "when": 1712271520175,
       "tag": "0010_wakeful_metal_master",
       "breakpoints": true
+    },
+    {
+      "idx": 11,
+      "version": "5",
+      "when": 1713311328819,
+      "tag": "0011_charming_bucky",
+      "breakpoints": true
     }
   ]
 }

package.json

@@ -23,17 +23,17 @@
 	"devDependencies": {
 		"@melt-ui/pp": "^0.3.0",
 		"@melt-ui/svelte": "^0.76.3",
-		"@playwright/test": "^1.43.0",
+		"@playwright/test": "^1.43.1",
 		"@resvg/resvg-js": "^2.6.2",
 		"@sveltejs/adapter-auto": "^3.2.0",
-		"@sveltejs/enhanced-img": "^0.1.9",
-		"@sveltejs/kit": "^2.5.5",
+		"@sveltejs/enhanced-img": "^0.2.0",
+		"@sveltejs/kit": "^2.5.6",
 		"@sveltejs/vite-plugin-svelte": "^3.1.0",
 		"@types/cookie": "^0.6.0",
 		"@types/node": "^20.12.6",
 		"@types/pg": "^8.11.5",
-		"@typescript-eslint/eslint-plugin": "^6.21.0",
-		"@typescript-eslint/parser": "^6.21.0",
+		"@typescript-eslint/eslint-plugin": "^7.7.0",
+		"@typescript-eslint/parser": "^7.7.0",
 		"autoprefixer": "^10.4.19",
 		"dotenv": "^16.4.5",
 		"drizzle-kit": "^0.20.14",
@@ -47,18 +47,18 @@
 		"postcss-load-config": "^5.0.3",
 		"postcss-preset-env": "^9.5.4",
 		"prettier": "^3.2.5",
-		"prettier-plugin-svelte": "^3.2.2",
+		"prettier-plugin-svelte": "^3.2.3",
 		"sass": "^1.74.1",
 		"satori": "^0.10.13",
 		"satori-html": "^0.3.2",
-		"svelte": "^4.2.12",
+		"svelte": "^4.2.14",
 		"svelte-check": "^3.6.9",
 		"svelte-headless-table": "^0.18.2",
 		"svelte-meta-tags": "^3.1.2",
 		"svelte-preprocess": "^5.1.3",
 		"svelte-sequential-preprocessor": "^2.0.1",
 		"sveltekit-flash-message": "^2.4.4",
-		"sveltekit-rate-limiter": "^0.4.3",
+		"sveltekit-rate-limiter": "^0.5.1",
 		"sveltekit-superforms": "^2.12.4",
 		"tailwindcss": "^3.4.3",
 		"ts-node": "^10.9.2",
@@ -80,26 +80,26 @@
 		"@iconify-icons/mdi": "^1.2.47",
 		"@lucia-auth/adapter-drizzle": "^1.0.7",
 		"@lukeed/uuid": "^2.0.1",
-		"@neondatabase/serverless": "^0.9.0",
+		"@neondatabase/serverless": "^0.9.1",
 		"@paralleldrive/cuid2": "^2.2.2",
 		"@sveltejs/adapter-vercel": "^5.2.0",
 		"@types/feather-icons": "^4.29.4",
 		"@vercel/og": "^0.5.20",
-		"bits-ui": "^0.19.7",
+		"bits-ui": "^0.21.3",
 		"boardgamegeekclient": "^1.9.1",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.0",
 		"cookie": "^0.6.0",
 		"drizzle-orm": "^0.30.7",
 		"feather-icons": "^4.29.1",
-		"formsnap": "^0.5.1",
+		"formsnap": "^1.0.0",
 		"html-entities": "^2.5.2",
-		"iconify-icon": "^2.0.0",
+		"iconify-icon": "^2.1.0",
 		"just-capitalize": "^3.2.0",
 		"just-kebab-case": "^4.2.0",
 		"loader": "^2.1.1",
 		"lucia": "3.1.1",
-		"lucide-svelte": "^0.358.0",
+		"lucide-svelte": "^0.368.0",
 		"open-props": "^1.7.2",
 		"oslo": "^1.2.0",
 		"pg": "^8.11.5",

src/routes/(app)/(protected)/wishlists/+page.server.ts

@@ -0,0 +1,164 @@
+import { error, type Actions } from '@sveltejs/kit';
+import { and, eq } from 'drizzle-orm';
+import { zod } from 'sveltekit-superforms/adapters';
+import { superValidate } from 'sveltekit-superforms/server';
+import { redirect } from 'sveltekit-flash-message/server';
+import { modifyListGameSchema } from '$lib/validations/zod-schemas';
+import db from '$lib/drizzle.js';
+import { notSignedInMessage } from '$lib/flashMessages.js';
+import { games, wishlist_items, wishlists } from '../../../../schema.js';
+
+export async function load(event) {
+	const { params, locals } = event;
+	if (!locals.user) {
+		redirect(302, '/login', notSignedInMessage, event);
+	}
+
+	console.log('Wishlist load User id', locals.user.id);
+
+	try {
+		const wishlist = await db.query.wishlists.findFirst({
+			where: eq(wishlists.user_id, locals.user.id)
+		});
+
+		if (!wishlist) {
+			redirect(302, '/404');
+		}
+
+		const items = await db.query.wishlist_items.findMany({
+			where: eq(wishlist_items.wishlist_id, wishlist.id),
+			with: {
+				game: {
+					columns: {
+						id: true,
+						name: true,
+						thumb_url: true
+					}
+				}
+			}
+		});
+
+		console.log('wishlist', wishlist);
+
+		return {
+			items
+		};
+	} catch (e) {
+		console.error(e);
+	}
+	redirect(302, '/404');
+}
+
+export const actions: Actions = {
+	// Add game to a wishlist
+	add: async (event) => {
+		const { locals } = event;
+		const form = await superValidate(event, zod(modifyListGameSchema));
+
+		try {
+			if (!locals.user) {
+				redirect(302, '/login', notSignedInMessage, event);
+			}
+
+			const game = await db.query.games.findFirst({
+				where: eq(games.id, form.data.id)
+			});
+
+			if (!game) {
+				// game = await prisma.game.create({
+				// 	data: {
+				// 		name: form.name
+				// 	}
+				// });
+				console.log('game not found');
+				redirect(302, '/404');
+			}
+
+			if (game) {
+				const wishlist = await db.query.wishlists.findFirst({
+					where: eq(wishlists.user_id, locals.user.id)
+				});
+
+				if (!wishlist) {
+					console.log('Wishlist not found');
+					return error(404, 'Wishlist not found');
+				}
+
+				await db.insert(wishlist_items).values({
+						game_id: game.id,
+						wishlist_id: wishlist.id
+				});
+			}
+
+			return {
+				form
+			};
+		} catch (e) {
+			console.error(e);
+			return error(500, 'Something went wrong');
+		}
+	},
+	// Create new wishlist
+	create: async (event) => {
+		const { locals } = event;
+		if (!locals.user) {
+			redirect(302, '/login', notSignedInMessage, event);
+		}
+		return error(405, 'Method not allowed');
+	},
+	// Delete a wishlist
+	delete: async ({ locals }) => {
+		if (!locals.user) {
+			redirect(302, '/login');
+		}
+		return error(405, 'Method not allowed');
+	},
+	// Remove game from a wishlist
+	remove: async (event) => {
+		const { locals } = event;
+		const form = await superValidate(event, zod(modifyListGameSchema));
+
+		try {
+			if (!locals.user) {
+				redirect(302, '/login', notSignedInMessage, event);
+			}
+
+			const game = await db.query.games.findFirst({
+				where: eq(games.id, form.data.id)
+			});
+
+			if (!game) {
+				// game = await prisma.game.create({
+				// 	data: {
+				// 		name: form.name
+				// 	}
+				// });
+				console.log('game not found');
+				redirect(302, '/404');
+			}
+
+			if (game) {
+				const wishlist = await db.query.wishlists.findFirst({
+					where: eq(wishlists.user_id, locals.user.id)
+				});
+
+				if (!wishlist) {
+					console.log('Wishlist not found');
+					return error(404, 'Wishlist not found');
+				}
+
+				await db.delete(wishlist_items).where(and(
+					eq(wishlist_items.wishlist_id, wishlist.id),
+					eq(wishlist_items.game_id, game.id)
+				));
+			}
+
+			return {
+				form
+			};
+		} catch (e) {
+			console.error(e);
+			return error(500, 'Something went wrong');
+		}
+	}
+};

src/routes/(app)/(protected)/wishlists/[id]/+page.server.ts

@@ -0,0 +1,164 @@
+import { error, type Actions } from '@sveltejs/kit';
+import { and, eq } from 'drizzle-orm';
+import { zod } from 'sveltekit-superforms/adapters';
+import { superValidate } from 'sveltekit-superforms/server';
+import { redirect } from 'sveltekit-flash-message/server';
+import { modifyListGameSchema } from '$lib/validations/zod-schemas';
+import db from '$lib/drizzle.js';
+import { notSignedInMessage } from '$lib/flashMessages.js';
+import { games, wishlist_items, wishlists } from '../../../../schema.js';
+
+export async function load(event) {
+	const { params, locals } = event;
+	if (!locals.user) {
+		redirect(302, '/login', notSignedInMessage, event);
+	}
+
+	console.log('Wishlist load User id', locals.user.id);
+
+	try {
+		const wishlist = await db.query.wishlists.findFirst({
+			where: eq(wishlists.user_id, locals.user.id)
+		});
+
+		if (!wishlist) {
+			redirect(302, '/404');
+		}
+
+		const items = await db.query.wishlist_items.findMany({
+			where: eq(wishlist_items.wishlist_id, wishlist.id),
+			with: {
+				game: {
+					columns: {
+						id: true,
+						name: true,
+						thumb_url: true
+					}
+				}
+			}
+		});
+
+		console.log('wishlist', wishlist);
+
+		return {
+			items
+		};
+	} catch (e) {
+		console.error(e);
+	}
+	redirect(302, '/404');
+}
+
+export const actions: Actions = {
+	// Add game to a wishlist
+	add: async (event) => {
+		const { locals } = event;
+		const form = await superValidate(event, zod(modifyListGameSchema));
+
+		try {
+			if (!locals.user) {
+				redirect(302, '/login', notSignedInMessage, event);
+			}
+
+			const game = await db.query.games.findFirst({
+				where: eq(games.id, form.data.id)
+			});
+
+			if (!game) {
+				// game = await prisma.game.create({
+				// 	data: {
+				// 		name: form.name
+				// 	}
+				// });
+				console.log('game not found');
+				redirect(302, '/404');
+			}
+
+			if (game) {
+				const wishlist = await db.query.wishlists.findFirst({
+					where: eq(wishlists.user_id, locals.user.id)
+				});
+
+				if (!wishlist) {
+					console.log('Wishlist not found');
+					return error(404, 'Wishlist not found');
+				}
+
+				await db.insert(wishlist_items).values({
+						game_id: game.id,
+						wishlist_id: wishlist.id
+				});
+			}
+
+			return {
+				form
+			};
+		} catch (e) {
+			console.error(e);
+			return error(500, 'Something went wrong');
+		}
+	},
+	// Create new wishlist
+	create: async (event) => {
+		const { locals } = event;
+		if (!locals.user) {
+			redirect(302, '/login', notSignedInMessage, event);
+		}
+		return error(405, 'Method not allowed');
+	},
+	// Delete a wishlist
+	delete: async ({ locals }) => {
+		if (!locals.user) {
+			redirect(302, '/login');
+		}
+		return error(405, 'Method not allowed');
+	},
+	// Remove game from a wishlist
+	remove: async (event) => {
+		const { locals } = event;
+		const form = await superValidate(event, zod(modifyListGameSchema));
+
+		try {
+			if (!locals.user) {
+				redirect(302, '/login', notSignedInMessage, event);
+			}
+
+			const game = await db.query.games.findFirst({
+				where: eq(games.id, form.data.id)
+			});
+
+			if (!game) {
+				// game = await prisma.game.create({
+				// 	data: {
+				// 		name: form.name
+				// 	}
+				// });
+				console.log('game not found');
+				redirect(302, '/404');
+			}
+
+			if (game) {
+				const wishlist = await db.query.wishlists.findFirst({
+					where: eq(wishlists.user_id, locals.user.id)
+				});
+
+				if (!wishlist) {
+					console.log('Wishlist not found');
+					return error(404, 'Wishlist not found');
+				}
+
+				await db.delete(wishlist_items).where(and(
+					eq(wishlist_items.wishlist_id, wishlist.id),
+					eq(wishlist_items.game_id, game.id)
+				));
+			}
+
+			return {
+				form
+			};
+		} catch (e) {
+			console.error(e);
+			return error(500, 'Something went wrong');
+		}
+	}
+};

src/routes/(app)/+page.server.ts

@@ -1,13 +1,16 @@
 import type { MetaTagsProps } from 'svelte-meta-tags';
+import { eq } from 'drizzle-orm';
 import type { PageServerLoad } from './$types';
+import db from '$lib/drizzle';
+import { collections, wishlists } from '../../schema';
 
-export const load: PageServerLoad = async ({ fetch, url }) => {
+export const load: PageServerLoad = async ({ locals, url }) => {
 	const image = {
 		url: `${
 			new URL(url.pathname, url.origin).href
 		}og?header=Bored Game&page=Home&content=Keep track of your games`,
 		width: 1200,
-		height: 630
+		height: 630,
 	};
 	const metaTags: MetaTagsProps = Object.freeze({
 		title: 'Home',
@@ -19,7 +22,7 @@ export const load: PageServerLoad = async ({ fetch, url }) => {
 			title: 'Home',
 			description: 'Bored Game, keep track of your games',
 			images: [image],
-			siteName: 'Bored Game'
+			siteName: 'Bored Game',
 		},
 		twitter: {
 			handle: '@boredgame',
@@ -30,9 +33,31 @@ export const load: PageServerLoad = async ({ fetch, url }) => {
 			image: `${
 				new URL(url.pathname, url.origin).href
 			}og?header=Bored Game&page=Home&content=Keep track of your games`,
-			imageAlt: 'Home | Bored Game'
-		}
+			imageAlt: 'Home | Bored Game',
+		},
 	});
 
-	return { metaTagsChild: metaTags };
+	const user = locals.user;
+	if (user) {
+		const userWishlists = await db.query.wishlists.findMany({
+			columns: {
+				cuid: true,
+				name: true,
+			},
+			where: eq(wishlists.user_id, user.id),
+		});
+		const userCollection = await db.query.collections.findMany({
+			columns: {
+				cuid: true,
+				name: true,
+			},
+			where: eq(collections.user_id, user.id),
+		});
+
+		console.log('Wishlists', userWishlists);
+		console.log('Collections', userCollection);
+		return { metaTagsChild: metaTags, user, wishlists: userWishlists, collections: userCollection };
+	}
+
+	return { metaTagsChild: metaTags, user: locals.user, wishlists: [], collections: [] };
 };

src/routes/(app)/+page.svelte

@@ -1,17 +1,29 @@
 <script lang="ts">
-	import Logo from "$components/logo.svelte";
+	export let data;
+
+	const { user, wishlists = [], collections = []} = data;
 </script>
 
 <div class="container">
-	<div class="site-logo">
-		<div class="logo">
-			<Logo />
+	{#if user}
+		<h1>Welcome, {user.username}!</h1>
+		<div>
+			<h2>You wishlists:</h2>
+			{#each wishlists as wishlist}
+				<a href="/wishlists/{wishlist.cuid}">{wishlist.name}</a>
+			{/each}
 		</div>
-		Bored Game
+		<div>
+			<h2>Your collections:</h2>
+			{#each collections as collection}
+				<a href="/collections/{collection.cuid}">{collection.name}</a>
+			{/each}
 		</div>
+	{:else}
 		<h1>Welcome to Bored Game!</h1>
 		<h2>Track the board games you own, the ones you want, and whether you play them enough.</h2>
 		<p>Get started by joining the <a href="/waitlist">wait list</a> or <a href="/login">log in</a> if you already have an account.</p>
+	{/if}
 </div>
 
 <style lang="postcss">
@@ -19,22 +31,10 @@
 		text-decoration: underline;
 	}
 
-	.site-logo {
-		display: flex;
-		place-items: center;
-	}
-
 	.container {
 		display: grid;
 		place-content: center;
 		max-width: 900px;
 		gap: 0.25rem;
 	}
-
-	.logo {
-		display: flex;
-		align-items: center;
-		width: 4rem;
-		height: 4rem;
-	}
 </style>

src/schema.ts

@@ -140,6 +140,7 @@ export const collections = pgTable('collections', {
 	user_id: uuid('user_id')
 		.notNull()
 		.references(() => users.id, { onDelete: 'cascade' }),
+	name: text('name').notNull().default('My Collection'),
 	created_at: timestamp('created_at').notNull().defaultNow(),
 	updated_at: timestamp('updated_at').notNull().defaultNow(),
 });
@@ -188,6 +189,7 @@ export const wishlists = pgTable('wishlists', {
 	user_id: uuid('user_id')
 		.notNull()
 		.references(() => users.id, { onDelete: 'cascade' }),
+	name: text('name').notNull().default('My Wishlist'),
 	created_at: timestamp('created_at').notNull().defaultNow(),
 	updated_at: timestamp('updated_at').notNull().defaultNow(),
 });