Add modal confirmation to mode change

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>