Adding a dialog to the root layout.

src/lib/components/random/index.svelte

@@ -7,7 +7,7 @@
 
   async function getRandomCollectionGame() {
     if ($collectionStore.length > 0) {
-      boredState.set({ loading: true });
+      boredState.set({ loading: true, dialogOpen: false });
       let randomNumber: number = Math.round(Math.random() * $collectionStore.length - 1);
       if ($collectionStore.at(randomNumber)) {
         gameStore.removeAll();
@@ -19,11 +19,11 @@
         const responseData = await response.json();
         console.log('responseData', responseData);
         gameStore.add(responseData?.game);
-        boredState.set({ loading: false });
+        boredState.set({ loading: false, dialogOpen: false });
       } else {
         toast.send('Error!', { duration: 3000, type: ToastType.ERROR, dismissible: true });
       }
-      boredState.set({ loading: false });
+      boredState.set({ loading: false, dialogOpen: false });
     } else {
       toast.send('No items in your collection!', {
         duration: 3000,

src/lib/components/search/random/index.svelte

@@ -4,7 +4,7 @@
 
   async function handleSubmit(event: SubmitEvent) {
     // submitting = true;
-    boredState.set({ loading: true });
+    boredState.set({ loading: true, dialogOpen: false });
     const form = event.target as HTMLFormElement;
     console.log('form', form);
     const response = await fetch('/api/games', {
@@ -14,7 +14,7 @@
     });
     const responseData = await response.json();
     // submitting = false;
-    boredState.set({ loading: false });
+    boredState.set({ loading: false, dialogOpen: false });
     gameStore.removeAll();
     gameStore.addAll(responseData?.games);
     // games = responseData?.games;

src/lib/stores/boredState.ts

@@ -4,7 +4,7 @@ import { writable } from 'svelte/store';
 
 // Custom store
 const state = () => {
-  const { subscribe, set, update } = writable<BoredStore>({ loading: false });
+  const { subscribe, set, update } = writable<BoredStore>({ loading: false, dialogOpen: false });
 
   // function remove(id: string) {
   // 	update((store) => {
@@ -20,7 +20,7 @@ const state = () => {
   // }
 
   function clear() {
-    set({ loading: false });
+    set({ loading: false, dialogOpen: false });
   }
 
   return { subscribe, set, update, clear };

src/lib/types.ts

@@ -1,5 +1,6 @@
 export type BoredStore = {
   loading: boolean;
+  dialogOpen: boolean;
 };
 
 export enum ToastType {

src/lib/util/manipulateCollection.ts

@@ -1,9 +1,8 @@
 import { collectionStore } from '$lib/stores/collectionStore';
 import { toast } from '$lib/components/toast/toast';
 import { ToastType, type GameType, type SavedGameType } from '$lib/types';
-import { browser } from '$app/environment';
 
-function convertToSavedGame(game: GameType): SavedGameType {
+function convertToSavedGame(game: GameType | SavedGameType): SavedGameType {
   return {
     id: game.id,
     name: game.name,
@@ -11,12 +10,12 @@ function convertToSavedGame(game: GameType): SavedGameType {
   };
 }
 
-export function addToCollection(game: GameType) {
+export function addToCollection(game: GameType | SavedGameType) {
   collectionStore.add(convertToSavedGame(game));
   toast.send("Added to collection", { duration: 3000, type: ToastType.INFO });
 }
 
-export function removeFromCollection(game: GameType) {
+export function removeFromCollection(game: GameType | SavedGameType) {
   collectionStore.remove(game.id);
   toast.send("Removed from collection", { duration: 3000, type: ToastType.INFO });
 }

src/routes/+layout.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
   import { browser } from '$app/environment';
+  import { fade } from 'svelte/transition';
   import { navigating } from '$app/stores';
   import debounce from 'just-debounce-it';
   import { Toy } from '@leveluptuts/svelte-toy';
+  import {
+    Dialog,
+    DialogOverlay,
+    DialogTitle,
+    DialogDescription
+  } from '@rgossiaux/svelte-headlessui';
   import Header from '$lib/components/header/Header.svelte';
   import Loading from '$lib/components/loading.svelte';
   import Transition from '$lib/components/transition/index.svelte';
@@ -17,11 +24,11 @@
   $: {
     if ($navigating) {
       debounce(() => {
-        boredState.set({ loading: true });
+        boredState.set({ loading: true, dialogOpen: false });
       }, 250);
     }
     if (!$navigating) {
-      boredState.set({ loading: false });
+      boredState.set({ loading: false, dialogOpen: false });
     }
   }
 
@@ -74,10 +81,51 @@
       <div class="background" />
     </Portal>
   {/if}
+  {#if $boredState?.dialogOpen}
+    <div transition:fade>
+      <Dialog
+        open={$boredState?.dialogOpen}
+        on:close={() => boredState.set({ loading: false, dialogOpen: false })}
+        static
+      >
+        <DialogOverlay
+          style={'position: fixed; inset: 0; z-index: 100; background-color: rgb(0 0 0); opacity: 0.3;'}
+        />
+        <div class="dialog">
+          <DialogTitle>Deactivate account</DialogTitle>
+          <DialogDescription>This will permanently deactivate your account</DialogDescription>
+
+          <p>
+            Are you sure you want to deactivate your account? All of your data will be permanently
+            removed. This action cannot be undone.
+          </p>
+
+          <button on:click={() => boredState.set({ loading: false, dialogOpen: false })}
+            >Deactivate</button
+          >
+          <button on:click={() => boredState.set({ loading: false, dialogOpen: false })}
+            >Cancel</button
+          >
+        </div>
+      </Dialog>
+    </div>
+  {/if}
   <Toast />
 </Transition>
 
 <style lang="scss">
+  :global(.dialog) {
+    position: fixed;
+    top: 25%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 101;
+    border-radius: 10px;
+    background-color: var(--primary);
+    padding: 2rem;
+    /* max-width: 400px; */
+  }
+
   .loading {
     position: fixed;
     top: 50%;

src/routes/+page.svelte

@@ -8,7 +8,7 @@
   import { boredState } from '$root/lib/stores/boredState';
 
   async function handleSearch(event: SubmitEvent) {
-    boredState.set({ loading: true });
+    boredState.set({ loading: true, dialogOpen: false });
     const form = event.target as HTMLFormElement;
     console.log('form', form);
     const response = await fetch('/api/game', {
@@ -17,7 +17,7 @@
       body: new FormData(form)
     });
     const responseData = await response.json();
-    boredState.set({ loading: false });
+    boredState.set({ loading: false, dialogOpen: false });
     gameStore.removeAll();
     gameStore.addAll(responseData?.games);
   }