Testing base dialog at layout level using svelte component.

src/lib/components/dialog/DefaultDialog.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+  import {
+    Dialog,
+    DialogDescription,
+    DialogOverlay,
+    DialogTitle
+  } from '@rgossiaux/svelte-headlessui';
+  import { boredState } from '$root/lib/stores/boredState';
+
+  $: isOpen = $boredState?.dialog?.isOpen;
+</script>
+
+<Dialog
+  open={isOpen}
+  on:close={() => {
+    boredState.update((n) => ({ ...n, dialog: { ...n.dialog, isOpen: false } }));
+  }}
+  static
+>
+  <div transition:fade>
+    <DialogOverlay class="dialog-overlay" />
+    <div class="dialog">
+      <DialogTitle>Default Dialog</DialogTitle>
+      <DialogDescription>Dialog Description</DialogDescription>
+
+      <div class="dialog-footer" />
+    </div>
+  </div>
+</Dialog>
+
+<style lang="scss">
+  .dialog {
+    display: grid;
+    gap: 1.5rem;
+    position: absolute;
+    top: 35%;
+    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/RemoveCollectionDialog.svelte

@@ -0,0 +1,82 @@
+<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 { removeFromCollection } from '$root/lib/util/manipulateCollection';
+
+  function removeGame() {
+    if ($boredState?.dialog?.additionalData) {
+      removeFromCollection($boredState?.dialog?.additionalData);
+    }
+    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 collection</DialogTitle>
+      <DialogDescription>Are you sure you want to remove from your collection?</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: 35%;
+    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/stores/boredState.ts

@@ -1,26 +1,19 @@
-import type { BoredStore } from '$lib/types';
+import type { BoredStore, Dialog } from '$lib/types';
 import { writable } from 'svelte/store';
+import DefaultDialog from '../components/dialog/DefaultDialog.svelte';
 // import { BoredStore } from '$lib/types';
 
 // Custom store
 const state = () => {
-  const { subscribe, set, update } = writable<BoredStore>({ loading: false });
+  const initialDialog: Dialog = {
-
+    isOpen: false,
-  // function remove(id: string) {
+    content: DefaultDialog
-  // 	update((store) => {
+  }
-  // 		const newStore = store.filter((item: GameType) => item.id !== id);
+  const initial = { loading: false, dialog: initialDialog }
-  // 		return [...newStore];
+  const { subscribe, set, update } = writable<BoredStore>(initial);
-  // 	});
-  // }
-
-  // function removeAll() {
-  // 	update(() => {
-  // 		return [];
-  // 	});
-  // }
 
   function clear() {
-    set({ loading: false });
+    set(initial);
   }
 
   return { subscribe, set, update, clear };

src/lib/types.ts

@@ -1,5 +1,14 @@
+import type { SvelteComponent } from "svelte";
+
+export type Dialog = {
+  isOpen: boolean;
+  content?: typeof SvelteComponent;
+  additionalData?: SavedGameType | GameType;
+}
+
 export type BoredStore = {
   loading: boolean;
+  dialog: Dialog;
 };
 
 export enum ToastType {

src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <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 Header from '$lib/components/header/Header.svelte';
@@ -25,6 +26,8 @@
     }
   }
 
+  $: isOpen = $boredState?.dialog?.isOpen;
+
   if (browser) {
     let collectionEmpty = $collectionStore.length === 0 || false;
     console.log('collectionEmpty', collectionEmpty);
@@ -74,6 +77,13 @@
       <div class="background" />
     </Portal>
   {/if}
+  {#if isOpen}
+    <div class="container">
+      <div transition:fade>
+        <svelte:component this={$boredState?.dialog?.content} />
+      </div>
+    </div>
+  {/if}
   <Toast />
 </Transition>
 
@@ -140,4 +150,47 @@
       padding: 40px 0;
     }
   }
+
+  .dialog {
+    display: grid;
+    gap: 1.5rem;
+    position: absolute;
+    top: 35%;
+    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);
+        }
+      }
+    }
+  }
+
+  :global(.dialog-overlay) {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    background-color: rgb(0 0 0);
+    opacity: 0.8;
+  }
 </style>

src/routes/collection/+page.svelte

@@ -1,15 +1,10 @@
 <script lang="ts">
-  import { fade } from 'svelte/transition';
-  import {
-    Dialog,
-    DialogDescription,
-    DialogOverlay,
-    DialogTitle
-  } from '@rgossiaux/svelte-headlessui';
   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';
 
   let isOpen: boolean = false;
   let gameToRemove: GameType | SavedGameType;
@@ -22,12 +17,10 @@
   function handleRemoveGame(event: RemoveGameEvent) {
     console.log('event', event);
     gameToRemove = event?.detail;
-    isOpen = true;
+    boredState.update((n) => ({
-  }
+      ...n,
-
+      dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove }
-  function removeGame() {
+    }));
-    removeFromCollection(gameToRemove);
-    isOpen = false;
   }
 </script>
 
@@ -48,28 +41,6 @@
     {/if}
   </div>
 </div>
-{#if isOpen}
-  <div class="container">
-    <div transition:fade>
-      <Dialog open={isOpen} on:close={() => (isOpen = false)} static>
-        <div transition:fade>
-          <DialogOverlay class="dialog-overlay" />
-          <div class="dialog">
-            <DialogTitle>Remove from collection</DialogTitle>
-            <DialogDescription
-              >Are you sure you want to remove from your collection?</DialogDescription
-            >
-
-            <div class="dialog-footer">
-              <button on:click={() => removeGame()}>Remove</button>
-              <button on:click={() => (isOpen = false)}>Cancel</button>
-            </div>
-          </div>
-        </div>
-      </Dialog>
-    </div>
-  </div>
-{/if}
 
 <style lang="scss">
   h1 {
@@ -94,7 +65,7 @@
     }
   }
 
-  .dialog {
+  /* .dialog {
     display: grid;
     gap: 1.5rem;
     position: absolute;
@@ -135,7 +106,7 @@
     z-index: 100;
     background-color: rgb(0 0 0);
     opacity: 0.8;
-  }
+  } */
 
   /* 
   .container > .button {