dialog update

src/global.css

@@ -9,12 +9,6 @@
 
 * {
     -webkit-tap-highlight-color: transparent;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
     outline: none !important;
 
     font-family: JetBrainsMono;

src/ui/Dialog.svelte

@@ -5,15 +5,46 @@
 	export let name = "";
 	export let class_name = "";
 	export let on_close = () => {};
+
+	let dialog;
+	let local_open = false;
+
+	function toggle_dialog(_) {
+		if (is_open && local_open) {
+			dialog.showModal();
+			document.addEventListener("keydown", (event) => {
+				if (event.key === "Escape") {
+					is_open = false;
+				}
+			});
+		} else if (local_open === true) {
+			dialog.close();
+			document.removeEventListener(
+				"keydown",
+				(event) => {
+					if (event.key === "Escape") {
+						is_open = false;
+					}
+				},
+				true,
+			);
+		} else if (!local_open) {
+			local_open = true;
+		}
+	}
+
+	$: _ = toggle_dialog(is_open);
 </script>
 
-<div
-	class="fixed top-0 left-0 w-full h-svh z-20
+<dialog
+	bind:this={dialog}
+	class="top-0 left-0 w-full h-svh z-20
+	fixed overflow-hidden
 	max-w-full max-h-full
 	flex justify-center items-center
+	{is_open ? 'visible opacity-100' : 'invisible opacity-0'}
 	backdrop-blur-sm
 	bg-[#00000022]
-	{is_open ? 'opacity-100 visible' : 'invisible opacity-0'}
 	transition-all duration-300"
 >
 	<div
@@ -21,9 +52,8 @@
 		border-[var(--w-border)] dark:border-[var(--b-border)] border-2 rounded-xl
 		bg-[var(--w-bg)] dark:bg-[var(--b-bg)]
 		text-[var(--w-text)] dark:text-[var(--b-text)] text-2xl
-		overflow-auto
-		{class_name}
-		"
+		overflow-hidden
+		{class_name}"
 	>
 		<div
 			class="ml-2 relative flex flex-initial justify-between items-center"
@@ -55,4 +85,4 @@
 		</div>
 		<slot></slot>
 	</div>
-</div>
+</dialog>