Quick and dirty copy paste add of modal to main page.

src/routes/+page.svelte

@@ -1,11 +1,19 @@
 <script lang="ts">
-  // import { Checkbox, NumberInput } from 'carbon-components-svelte';
+  import { fade } from 'svelte/transition';
+  import {
+    Dialog,
+    DialogDescription,
+    DialogOverlay,
+    DialogTitle
+  } from '@rgossiaux/svelte-headlessui';
   import Game from '$lib/components/game/index.svelte';
   import TextSearch from '$lib/components/search/textSearch/index.svelte';
   import RandomSearch from '$lib/components/search/random/index.svelte';
   import Random from '$lib/components/random/index.svelte';
   import { gameStore } from '$lib/stores/gameSearchStore';
   import { boredState } from '$root/lib/stores/boredState';
+  import { removeFromCollection } from '$root/lib/util/manipulateCollection';
+  import type { GameType, SavedGameType } from '$root/lib/types';
 
   async function handleSearch(event: SubmitEvent) {
     boredState.set({ loading: true });
@@ -21,6 +29,25 @@
     gameStore.removeAll();
     gameStore.addAll(responseData?.games);
   }
+
+  let isOpen: boolean = false;
+  let gameToRemove: GameType | SavedGameType;
+  console.log('isOpen', isOpen);
+
+  interface RemoveGameEvent extends Event {
+    detail: GameType | SavedGameType;
+  }
+
+  function handleRemoveGame(event: RemoveGameEvent) {
+    console.log('event', event);
+    gameToRemove = event?.detail;
+    isOpen = true;
+  }
+
+  function removeGame() {
+    removeFromCollection(gameToRemove);
+    isOpen = false;
+  }
 </script>
 
 <svelte:head>
@@ -39,14 +66,38 @@
   </div>
 </div>
 
-<div class="games">
+{#if $gameStore?.length > 0}
-  <h1>Games Found:</h1>
+  <div class="games">
-  <div class="games-list">
+    <h1>Games Found:</h1>
-    {#each $gameStore as game}
+    <div class="games-list">
-      <Game {game} />
+      {#each $gameStore as game}
-    {/each}
+        <Game on:removeGameEvent={handleRemoveGame} {game} />
+      {/each}
+    </div>
   </div>
-</div>
+{/if}
+{#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">
   .games {
@@ -81,4 +132,47 @@
       grid-template-columns: 1fr 1fr;
     }
   }
+
+  .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

@@ -98,7 +98,7 @@
     display: grid;
     gap: 1.5rem;
     position: absolute;
-    top: 50%;
+    top: 35%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 101;