Adding collection dialog, showing dialog on clear click.

src/lib/components/dialog/ClearCollectionDialog.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 { collectionStore } from '$root/lib/stores/collectionStore';
+	import { browser } from '$app/environment';
+
+	function clearCollection() {
+		if (browser) {
+			localStorage.collection = JSON.stringify([]);
+			collectionStore.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 collection</DialogTitle>
+			<DialogDescription>Are you sure you want to clear your collection?</DialogDescription>
+
+			<div class="dialog-footer">
+				<button on:click={clearCollection}>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/preferences/gameCollection.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
+	import { boredState } from '$root/lib/stores/boredState';
 	import { collectionStore } from '$root/lib/stores/collectionStore';
 	import { ToastType } from '$root/lib/types';
 	import { SaveIcon, ShareIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline';
+	import ClearCollectionDialog from '../dialog/ClearCollectionDialog.svelte';
 	import { toast } from '../toast/toast';
 
 	function saveCollection() {
@@ -27,9 +29,14 @@
 	}
 
 	function clearCollection() {
-		if (!browser) return;
+		if ($collectionStore.length > 0) {
-		localStorage.collection = [];
+			boredState.update((n) => ({
-		toast.send('Cleared collection', { duration: 3000, type: ToastType.INFO });
+				...n,
+				dialog: { isOpen: true, content: ClearCollectionDialog }
+			}));
+		} else {
+			toast.send('Nothing to clear', { duration: 3000, type: ToastType.ERROR });
+		}
 	}
 </script>
 
@@ -44,9 +51,9 @@
 		<button type="button" aria-label="Save Collection" on:click={() => saveCollection()}
 			><SaveIcon width="24" height="24" />Save</button
 		>
-		<button type="button" aria-label="Clear saved collection" on:click={() => clearCollection()}
+		<button type="button" aria-label="Clear saved collection" on:click={() => clearCollection()}>
-			><TrashIcon width="24" height="24" />Clear</button
+			<TrashIcon width="24" height="24" />Clear
-		>
+		</button>
 	</div>
 </div>
 

src/lib/components/preferences/profile.svelte

@@ -2,6 +2,7 @@
 	import { fade } from 'svelte/transition';
 	import { Popover, PopoverButton, PopoverPanel } from '@rgossiaux/svelte-headlessui';
 	import { CogIcon } from '@rgossiaux/svelte-heroicons/outline';
+	import { collectionStore } from '$root/lib/stores/collectionStore';
 	import Themes from './themes.svelte';
 	import GameCollection from './gameCollection.svelte';
 </script>
@@ -40,7 +41,9 @@
 
 						<div class="options">
 							<Themes />
+							{#if $collectionStore.length > 0}
 								<GameCollection />
+							{/if}
 						</div>
 					</div>
 				</PopoverPanel>

src/routes/collection/+page.svelte

@@ -2,7 +2,6 @@
 	import Game from '$lib/components/game/index.svelte';
 	import { collectionStore } from '$lib/stores/collectionStore';
 	import type { GameType, SavedGameType } from '$root/lib/types';
-  import { removeFromCollection } from '$root/lib/util/manipulateCollection';
 	import { boredState } from '$root/lib/stores/boredState';
 	import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';