Adding wishlist route, store, localstorage store, and adding all dialogs/headers/etc. needed.

src/lib/components/dialog/ClearWishlistDialog.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import {
+		Dialog,
+		DialogDescription,
+		DialogOverlay,
+		DialogTitle
+	} from '@rgossiaux/svelte-headlessui';
+	import { boredState } from '$root/lib/stores/boredState';
+	import { wishlistStore } from '$root/lib/stores/wishlistStore';
+	import { browser } from '$app/environment';
+
+	function clearWishlist() {
+		if (browser) {
+			localStorage.wishlist = JSON.stringify([]);
+			wishlistStore.removeAll();
+		}
+		boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
+	}
+
+	$: isOpen = $boredState?.dialog?.isOpen;
+</script>
+
+<Dialog
+	open={isOpen}
+	on:close={() => {
+		boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
+	}}
+	static
+>
+	<div transition:fade>
+		<DialogOverlay class="dialog-overlay" />
+		<div class="dialog">
+			<DialogTitle>Clear wishlist</DialogTitle>
+			<DialogDescription>Are you sure you want to clear your wishlist?</DialogDescription>
+
+			<div class="dialog-footer">
+				<button on:click={clearWishlist}>Clear</button>
+				<button
+					on:click={() => {
+						boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
+					}}>Cancel</button
+				>
+			</div>
+		</div>
+	</div>
+</Dialog>
+
+<style lang="scss">
+	.dialog {
+		display: grid;
+		gap: 1.5rem;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		z-index: 101;
+		border-radius: 10px;
+		background-color: var(--clr-input-bg);
+		padding: 2rem;
+		min-width: 400px;
+
+		.dialog-footer {
+			display: flex;
+			justify-content: space-between;
+			gap: 2rem;
+			margin: 1rem 0;
+
+			button {
+				display: flex;
+				place-content: center;
+				gap: 1rem;
+				width: 100%;
+				border-radius: 10px;
+				padding: 1rem;
+				background-color: var(--color-btn-primary-active);
+
+				&:hover {
+					background-color: var(--color-btn-primary-active-hover);
+				}
+			}
+		}
+	}
+</style>

src/lib/components/dialog/RemoveWishlistDialog.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import {
+		Dialog,
+		DialogDescription,
+		DialogOverlay,
+		DialogTitle
+	} from '@rgossiaux/svelte-headlessui';
+	import { boredState } from '$root/lib/stores/boredState';
+	import { wishlistStore } from '$root/lib/stores/wishlistStore';
+	import { removeFromWishlist } from '$root/lib/util/manipulateWishlist';
+	import { browser } from '$app/environment';
+
+	function removeGame() {
+		if ($boredState?.dialog?.additionalData) {
+			removeFromWishlist($boredState?.dialog?.additionalData);
+		}
+		if (browser) {
+			localStorage.wishlist = JSON.stringify($wishlistStore);
+		}
+		boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
+	}
+
+	$: isOpen = $boredState?.dialog?.isOpen;
+</script>
+
+<Dialog
+	open={isOpen}
+	on:close={() => {
+		boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
+	}}
+	static
+>
+	<div transition:fade>
+		<DialogOverlay class="dialog-overlay" />
+		<div class="dialog">
+			<DialogTitle>Remove from wishlist</DialogTitle>
+			<DialogDescription>Are you sure you want to remove from your wishlist?</DialogDescription>
+
+			<div class="dialog-footer">
+				<button on:click={removeGame}>Remove</button>
+				<button
+					on:click={() => {
+						boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
+					}}>Cancel</button
+				>
+			</div>
+		</div>
+	</div>
+</Dialog>
+
+<style lang="scss">
+	.dialog {
+		display: grid;
+		gap: 1.5rem;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		z-index: 101;
+		border-radius: 10px;
+		background-color: var(--clr-input-bg);
+		padding: 2rem;
+		min-width: 400px;
+
+		.dialog-footer {
+			display: flex;
+			justify-content: space-between;
+			gap: 2rem;
+			margin: 1rem 0;
+
+			button {
+				display: flex;
+				place-content: center;
+				gap: 1rem;
+				width: 100%;
+				border-radius: 10px;
+				padding: 1rem;
+				background-color: var(--color-btn-primary-active);
+
+				&:hover {
+					background-color: var(--color-btn-primary-active-hover);
+				}
+			}
+		}
+	}
+</style>

src/lib/components/game/index.svelte

@@ -4,7 +4,9 @@
 	import { MinusCircleIcon, PlusCircleIcon } from '@rgossiaux/svelte-heroicons/outline';
 	import type { GameType, SavedGameType } from '$lib/types';
 	import { collectionStore } from '$lib/stores/collectionStore';
+	import { wishlistStore } from '$root/lib/stores/wishlistStore';
 	import { addToCollection, removeFromCollection } from '$lib/util/manipulateCollection';
+	import { addToWishlist } from '$lib/util/manipulateWishlist';
 	import { browser } from '$app/environment';
 
 	export let game: GameType | SavedGameType;
@@ -13,11 +15,16 @@
 
 	const dispatch = createEventDispatcher();
 
-	function removeGame() {
-		dispatch('removeGameEvent', game);
+	function removeGameFromWishlist() {
+		dispatch('handleRemoveWishlist', game);
+	}
+
+	function removeGameFromCollection() {
+		dispatch('handleRemoveCollection', game);
 	}
 
 	$: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id);
+	$: existsInWishlist = $wishlistStore.find((item: SavedGameType) => item.id === game.id);
 </script>
 
 <article class="game-container" transition:fade>
@@ -48,8 +55,8 @@
 			class="btn"
 			type="button"
 			on:click={() => {
-				removeGame();
-			}}>Remove <MinusCircleIcon width="24" height="24" /></button
+				removeGameFromCollection();
+			}}>Remove from Collection <MinusCircleIcon width="24" height="24" /></button
 		>
 	{:else}
 		<button
@@ -64,6 +71,28 @@
 			}}>Add to collection <PlusCircleIcon width="24" height="24" /></button
 		>
 	{/if}
+	{#if existsInWishlist}
+		<button
+			aria-label="Remove from wishlist"
+			class="btn"
+			type="button"
+			on:click={() => {
+				removeGameFromWishlist();
+			}}>Remove from Wishlist <MinusCircleIcon width="24" height="24" /></button
+		>
+	{:else}
+		<button
+			aria-label="Add to wishlist"
+			class="btn"
+			type="button"
+			on:click={() => {
+				addToWishlist(game);
+				if (browser) {
+					localStorage.wishlist = JSON.stringify($wishlistStore);
+				}
+			}}>Add to wishlist <PlusCircleIcon width="24" height="24" /></button
+		>
+	{/if}
 </article>
 
 <style lang="scss">

src/lib/components/header/Header.svelte

@@ -1,78 +1,79 @@
 <script lang="ts">
-  import Profile from '../preferences/profile.svelte';
-  import logo from './bored-game.png';
+	import Profile from '../preferences/profile.svelte';
+	import logo from './bored-game.png';
 </script>
 
 <header>
-  <div class="corner">
-    <a href="/" title="Home">
-      <img src={logo} alt="Bored Game Home" />
-    </a>
-  </div>
+	<div class="corner">
+		<a href="/" title="Home">
+			<img src={logo} alt="Bored Game Home" />
+		</a>
+	</div>
 
-  <nav>
-    <a href="/collection" title="Go to your collection">Your Collection</a>
-    <Profile />
-  </nav>
+	<nav>
+		<a href="/collection" title="Go to your collection">Collection</a>
+		<a href="/wishlist" title="Go to your collection">Wishlist</a>
+		<Profile />
+	</nav>
 </header>
 
 <style lang="scss">
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: var(--containerPadding);
-    font-size: 1.6rem;
+	header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: var(--containerPadding);
+		font-size: 1.6rem;
 
-    @media (max-width: 1000px) {
-      padding-top: 1.25rem;
-    }
-  }
+		@media (max-width: 1000px) {
+			padding-top: 1.25rem;
+		}
+	}
 
-  .corner {
-    width: 3em;
-    height: 3em;
-  }
+	.corner {
+		width: 3em;
+		height: 3em;
+	}
 
-  .corner a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-  }
+	.corner a {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+	}
 
-  .corner img {
-    width: 2em;
-    height: 2em;
-    object-fit: contain;
-  }
+	.corner img {
+		width: 2em;
+		height: 2em;
+		object-fit: contain;
+	}
 
-  nav {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 2rem;
-    margin: 1rem;
-    --background: rgba(255, 255, 255, 0.7);
-  }
+	nav {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 1rem;
+		margin: 1rem;
+		--background: rgba(255, 255, 255, 0.7);
+	}
 
-  nav a {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    padding: 0 1em;
-    color: var(--heading-color);
-    font-weight: 700;
-    /* font-size: 0.8rem; */
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    text-decoration: none;
-    transition: color 0.2s linear;
-  }
+	nav a {
+		display: flex;
+		height: 100%;
+		align-items: center;
+		padding: 0 1em;
+		color: var(--heading-color);
+		font-weight: 700;
+		/* font-size: 0.8rem; */
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+		text-decoration: none;
+		transition: color 0.2s linear;
+	}
 
-  a:hover {
-    text-decoration: underline;
-    color: var(--accent-color);
-  }
+	a:hover {
+		text-decoration: underline;
+		color: var(--accent-color);
+	}
 </style>

src/lib/components/preferences/gameCollection.svelte

@@ -42,7 +42,9 @@
 
 <div>
 	<div>
-		<span class="collection-title">Your Collection</span>
+		<span class="collection-title"
+			><a href="/collection" title="Go to your collection">Your Collection</a></span
+		>
 	</div>
 	<div class="collection-buttons">
 		<button type="button" aria-label="Export Collection" on:click={() => exportCollection()}

src/lib/components/preferences/gameWishlist.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { boredState } from '$root/lib/stores/boredState';
+	import { wishlistStore } from '$root/lib/stores/wishlistStore';
+	import { ToastType } from '$root/lib/types';
+	import { SaveIcon, ShareIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline';
+	import ClearWishlistDialog from '../dialog/ClearWishlistDialog.svelte';
+	import { toast } from '../toast/toast';
+
+	function saveWishlist() {
+		if (!browser) return;
+		localStorage.wishlist = JSON.stringify($wishlistStore);
+		toast.send('Saved wishlist', { duration: 3000, type: ToastType.INFO });
+	}
+
+	function exportWishlist() {
+		if (!browser) return;
+		const wishlistBlob = new Blob([JSON.stringify($wishlistStore)], {
+			type: 'application/json;charset=utf-8'
+		});
+		let url = window.URL || window.webkitURL;
+		let link = url.createObjectURL(wishlistBlob);
+		let a = document.createElement('a');
+		a.setAttribute('download', `wishlist.json`);
+		a.setAttribute('href', link);
+		a.click();
+		document.body.removeChild(a);
+		toast.send('Exported wishlist', { duration: 3000, type: ToastType.INFO });
+	}
+
+	function clearWishlist() {
+		if ($wishlistStore.length > 0) {
+			boredState.update((n) => ({
+				...n,
+				dialog: { isOpen: true, content: ClearWishlistDialog }
+			}));
+		} else {
+			toast.send('Nothing to clear', { duration: 3000, type: ToastType.ERROR });
+		}
+	}
+</script>
+
+<div>
+	<div>
+		<span class="wishlist-title"
+			><a href="/wishlist" title="Go to your wishlist">Your Wishlist</a></span
+		>
+	</div>
+	<div class="wishlist-buttons">
+		<button type="button" aria-label="Export Wishlist" on:click={() => exportWishlist()}
+			><ShareIcon width="24" height="24" />Export</button
+		>
+		<button type="button" aria-label="Save Wishlist" on:click={() => saveWishlist()}
+			><SaveIcon width="24" height="24" />Save</button
+		>
+		<button type="button" aria-label="Clear saved wishlist" on:click={() => clearWishlist()}>
+			<TrashIcon width="24" height="24" />Clear
+		</button>
+	</div>
+</div>
+
+<style lang="scss">
+	:global(.wishlist-title) {
+		padding-bottom: var(--spacing-8);
+		font-size: var(--font-24);
+		font-weight: 700;
+		line-height: 32px;
+	}
+
+	:global(.wishlist-buttons) {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		// gap: 6rem;
+
+		@media (min-width: 480px) {
+			gap: 3rem;
+		}
+	}
+
+	button {
+		display: grid;
+		place-items: center;
+		gap: 0.25rem;
+	}
+</style>

src/lib/components/preferences/profile.svelte

@@ -5,6 +5,7 @@
 	import { collectionStore } from '$root/lib/stores/collectionStore';
 	import Themes from './themes.svelte';
 	import GameCollection from './gameCollection.svelte';
+	import GameWishlist from './gameWishlist.svelte';
 </script>
 
 <div class="container">
@@ -41,9 +42,8 @@
 
 						<div class="options">
 							<Themes />
-							{#if $collectionStore.length > 0}
-								<GameCollection />
-							{/if}
+							<GameCollection />
+							<GameWishlist />
 						</div>
 					</div>
 				</PopoverPanel>

src/lib/stores/wishlistStore.ts

@@ -0,0 +1,34 @@
+import { writable } from 'svelte/store';
+import type { SavedGameType } from '$lib/types';
+
+// Custom store
+const state = () => {
+  const { subscribe, set, update } = writable<SavedGameType[]>([]);
+
+  function addAll(games: SavedGameType[]) {
+    for (const game of games) {
+      add(game);
+    }
+  }
+
+  function add(game: SavedGameType) {
+    update((store) => [...store, game]);
+  }
+
+  function remove(id: string) {
+    update((store) => {
+      const newStore = store.filter((item: SavedGameType) => item.id !== id);
+      return [...newStore];
+    });
+  }
+
+  function removeAll() {
+    update(() => {
+      return [];
+    });
+  }
+
+  return { subscribe, set, update, add, addAll, remove, removeAll };
+};
+
+export const wishlistStore = state();

src/lib/util/manipulateWishlist.ts

@@ -0,0 +1,21 @@
+import { wishlistStore } from '$lib/stores/wishlistStore';
+import { toast } from '$lib/components/toast/toast';
+import { ToastType, type GameType, type SavedGameType } from '$lib/types';
+
+function convertToSavedGame(game: GameType | SavedGameType): SavedGameType {
+  return {
+    id: game.id,
+    name: game.name,
+    thumb_url: game.thumb_url,
+  };
+}
+
+export function addToWishlist(game: GameType | SavedGameType) {
+  wishlistStore.add(convertToSavedGame(game));
+  toast.send("Added to wishlist", { duration: 3000, type: ToastType.INFO });
+}
+
+export function removeFromWishlist(game: GameType | SavedGameType) {
+  wishlistStore.remove(game.id);
+  toast.send("Removed from wishlist", { duration: 3000, type: ToastType.INFO });
+}

src/routes/+layout.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
 	import { navigating } from '$app/stores';
-	import { fade } from 'svelte/transition';
 	import debounce from 'just-debounce-it';
 	import { Toy } from '@leveluptuts/svelte-toy';
 	import Analytics from '$lib/components/analytics.svelte';
@@ -11,6 +10,7 @@
 	import Portal from '$lib/Portal.svelte';
 	import { boredState } from '$lib/stores/boredState';
 	import { collectionStore } from '$lib/stores/collectionStore';
+	import { wishlistStore } from '$root/lib/stores/wishlistStore';
 	import { gameStore } from '$lib/stores/gameSearchStore';
 	import { toast } from '$lib/components/toast/toast';
 	import Toast from '$lib/components/toast/Toast.svelte';
@@ -31,8 +31,13 @@
 
 	if (browser) {
 		let collectionEmpty = $collectionStore.length === 0 || false;
-		console.log('collectionEmpty', collectionEmpty);
-		console.log('localStorage.collection', localStorage.collection);
+		let wishlistEmpty = $wishlistStore.length === 0 || false;
+		if (wishlistEmpty && localStorage?.wishlist && localStorage?.wishlist?.length !== 0) {
+			const wishlist = JSON.parse(localStorage.wishlist);
+			if (wishlist?.length !== 0) {
+				wishlistStore.addAll(wishlist);
+			}
+		}
 		if (collectionEmpty && localStorage?.collection && localStorage?.collection?.length !== 0) {
 			const collection = JSON.parse(localStorage.collection);
 			console.log('collection', collection);
@@ -50,7 +55,7 @@
 {/if}
 
 {#if dev}
-	<Toy register={{ boredState, collectionStore, gameStore, toast }} />
+	<Toy register={{ boredState, collectionStore, wishlistStore, gameStore, toast }} />
 {/if}
 
 <Transition transition={{ type: 'fade', duration: 250 }}>

src/routes/+page.svelte

@@ -58,6 +58,7 @@
 	}
 
 	function handleRemoveGame(event: RemoveGameEvent) {
+		console.log('Base Page handle remove');
 		console.log('event', event);
 		gameToRemove = event?.detail;
 		boredState.update((n) => ({

src/routes/about/+page.svelte

@@ -5,26 +5,22 @@
 
 <div class="content">
 	<h1>About Bored Game</h1>
-        <article>
-	<p>
-		One day we were bored and wanted to play one of our board games.
-	</p>
-        <p>
-                Our problem was that we didn't know which one to play.
-        </p>
-	<p>
-                Rather than just pick one I decided to make this overcomplicated solution.
-        </p>
-        </article>
+	<article>
+		<p>One day we were bored and wanted to play one of our board games.</p>
+		<p>Our problem was that we didn't know which one to play.</p>
+		<p>Rather than just pick a game I decided to make this overcomplicated solution.</p>
+		<p>I hope you enjoy using it!</p>
+	</article>
 </div>
 
 <style>
-    .content, article {
-        display: grid;
-        gap: 1.5rem;
-    }
+	.content,
+	article {
+		display: grid;
+		gap: 1rem;
+	}
 
-    p {
-        line-height: 2;
-    }
+	p {
+		line-height: 1.5;
+	}
 </style>

src/routes/collection/+page.svelte

@@ -4,6 +4,7 @@
 	import type { GameType, SavedGameType } from '$root/lib/types';
 	import { boredState } from '$root/lib/stores/boredState';
 	import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
+	import RemoveWishlistDialog from '$root/lib/components/dialog/RemoveWishlistDialog.svelte';
 
 	let isOpen: boolean = false;
 	let gameToRemove: GameType | SavedGameType;
@@ -13,7 +14,8 @@
 		detail: GameType | SavedGameType;
 	}
 
-	function handleRemoveGame(event: RemoveGameEvent) {
+	function handleRemoveCollection(event: RemoveGameEvent) {
+		console.log('Remove collection event handler');
 		console.log('event', event);
 		gameToRemove = event?.detail;
 		boredState.update((n) => ({
@@ -21,6 +23,16 @@
 			dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove }
 		}));
 	}
+
+	function handleRemoveWishlist(event: RemoveGameEvent) {
+		console.log('Remove wishlist event handler');
+		console.log('event', event);
+		gameToRemove = event?.detail;
+		boredState.update((n) => ({
+			...n,
+			dialog: { isOpen: true, content: RemoveWishlistDialog, additionalData: gameToRemove }
+		}));
+	}
 </script>
 
 <svelte:head>
@@ -35,7 +47,12 @@
 			<h2>No games in your collection</h2>
 		{:else}
 			{#each $collectionStore as game}
-				<Game on:removeGameEvent={handleRemoveGame} minimal {game} />
+				<Game
+					on:handleRemoveWishlist={handleRemoveWishlist}
+					on:handleRemoveCollection={handleRemoveCollection}
+					minimal
+					{game}
+				/>
 			{/each}
 		{/if}
 	</div>

src/routes/headless/+page.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">
-  import Listbox from '$lib/components/listbox.svelte';
-</script>
-
-<Listbox />

src/routes/wishlist/+page.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import Game from '$lib/components/game/index.svelte';
+	import { wishlistStore } from '$lib/stores/wishlistStore';
+	import type { GameType, SavedGameType } from '$root/lib/types';
+	import { boredState } from '$root/lib/stores/boredState';
+	import RemoveWishlistDialog from '$root/lib/components/dialog/RemoveWishlistDialog.svelte';
+	import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
+
+	let isOpen: boolean = false;
+	let gameToRemove: GameType | SavedGameType;
+	console.log('isOpen', isOpen);
+
+	interface RemoveGameEvent extends Event {
+		detail: GameType | SavedGameType;
+	}
+
+	function handleRemoveCollection(event: RemoveGameEvent) {
+		gameToRemove = event?.detail;
+		boredState.update((n) => ({
+			...n,
+			dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove }
+		}));
+	}
+
+	function handleRemoveWishlist(event: RemoveGameEvent) {
+		gameToRemove = event?.detail;
+		boredState.update((n) => ({
+			...n,
+			dialog: { isOpen: true, content: RemoveWishlistDialog, additionalData: gameToRemove }
+		}));
+	}
+</script>
+
+<svelte:head>
+	<title>Your Wishlist | Bored Game</title>
+</svelte:head>
+
+<h1>Your Wishlist</h1>
+
+<div class="games">
+	<div class="games-list">
+		{#if $wishlistStore.length === 0}
+			<h2>No games in your wishlist</h2>
+		{:else}
+			{#each $wishlistStore as game}
+				<Game
+					on:handleRemoveWishlist={handleRemoveWishlist}
+					on:handleRemoveCollection={handleRemoveCollection}
+					minimal
+					{game}
+				/>
+			{/each}
+		{/if}
+	</div>
+</div>
+
+<style lang="scss">
+	h1 {
+		width: 100%;
+	}
+
+	.games {
+		margin: 2rem 0rem;
+	}
+
+	.games-list {
+		display: grid;
+		grid-template-columns: repeat(3, minmax(200px, 1fr));
+		gap: 2rem;
+
+		@media (max-width: 800px) {
+			grid-template-columns: 1fr 1fr;
+		}
+
+		@media (max-width: 550px) {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>