From 7498d9066e94afaa46cddfe70fd44340d5cfc35b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrik=20T=C3=B8n=20L=C3=B8vhaug?=
 <henrik.lovhaug@gmail.com>
Date: Fri, 7 Mar 2025 15:40:42 +0100
Subject: [PATCH] Add modal confirmation to mode change

---
 frontend/src/components/Container.svelte |  2 ++
 frontend/src/components/Modal.svelte     | 36 +++++++++++++++++++++---
 frontend/src/components/Slider.svelte    |  5 +---
 3 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Container.svelte b/frontend/src/components/Container.svelte
index ad87e1f..1103e71 100644
--- a/frontend/src/components/Container.svelte
+++ b/frontend/src/components/Container.svelte
@@ -63,6 +63,8 @@
     width = image?.getBoundingClientRect().width ?? 0;
     height = image?.getBoundingClientRect().height ?? 0;
   });
+
+
 </script>
 
 <svelte:window onresize={resize} />
diff --git a/frontend/src/components/Modal.svelte b/frontend/src/components/Modal.svelte
index 772be1f..62a11bb 100644
--- a/frontend/src/components/Modal.svelte
+++ b/frontend/src/components/Modal.svelte
@@ -1,10 +1,38 @@
 <script lang="ts">
   type Props = {
-    open: boolean;
-    onClose: () => void;
+    action: () => void;
+  };
+
+  let { action }: Props = $props();
+
+  let dialog: HTMLDialogElement;
+  const openModal = () => {
+    dialog.showModal();
   };
 </script>
 
-<dialog>
-  <div></div>
+<button class="mb-24 rounded-md bg-red-400 p-2" onclick={openModal}>
+  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>
diff --git a/frontend/src/components/Slider.svelte b/frontend/src/components/Slider.svelte
index 6c4da98..679a811 100644
--- a/frontend/src/components/Slider.svelte
+++ b/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"
-    onclick={buttonAction}>Change mode</button>
+  <Modal action={buttonAction} />
   <input
     type="range"
     id="z"