Add modal confirmation to mode change

frontend/src/components/Container.svelte

@@ -63,6 +63,8 @@
     width = image?.getBoundingClientRect().width ?? 0;
     height = image?.getBoundingClientRect().height ?? 0;
   });
+
+
 </script>
 
 <svelte:window onresize={resize} />

frontend/src/components/Modal.svelte

@@ -1,10 +1,38 @@
 <script lang="ts">
   type Props = {
-    open: boolean;
+    action: () => void;
-    onClose: () => void;
+  };
+
+  let { action }: Props = $props();
+
+  let dialog: HTMLDialogElement;
+  const openModal = () => {
+    dialog.showModal();
   };
 </script>
 
-<dialog>
+<button class="mb-24 rounded-md bg-red-400 p-2" onclick={openModal}>
-  <div></div>
+  Change mode
+</button>
+
+<dialog
+  open={false}
+  bind:this={dialog}
+  class="absolute left-0 top-0 z-50 m-0 h-full max-h-full w-full max-w-full p-0 open:bg-black/80"
+>
+  <div class="flex h-full w-full flex-col items-center justify-center">
+    <h1 class="text-red-600 text-8xl">THIS GONNA FUCK THINGS UP</h1>
+    <div class="flex  items-center justify-center gap-6">
+      <button class="rounded-md bg-gray-400 p-4" onclick={() => dialog.close()}
+        >Close</button
+      >
+      <button
+        class="rounded-md bg-red-400 p-4"
+        onclick={() => {
+          action();
+          dialog.close();
+        }}>Change mode</button
+      >
+    </div>
+  </div>
 </dialog>

frontend/src/components/Slider.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { TrackerData } from "$lib/utils/types";
-  import { onMount } from "svelte";
   import Modal from "./Modal.svelte";
 
   type Props = {
@@ -56,10 +55,8 @@
   let z_viz = $derived(trackers[selected].z.toFixed(2));
 </script>
 
-<Modal />
 <div class="slider-container ml-auto">
-  <button class="bg-red-400 rounded-md p-2 mb-24"
+  <Modal action={buttonAction} />
-    onclick={buttonAction}>Change mode</button>
   <input
     type="range"
     id="z"