click outside for deletion confirmation

src/components/DeleteButton.svelte

@@ -1,11 +1,24 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
+  import type { ActionReturn } from 'svelte/action';
+  import { clickOutside } from '../utils/clickOutside';
 	import type { Session } from '../types/session';
+
 	export let session: Session;
 
 	const dispatch = createEventDispatcher();
+	let confirmation: boolean = false;
+
+	const confirm = (): void => {
+		confirmation = true;
+	};
+
+  const handleClick = () => {
+    confirmation = false;
+	}
 
 	const deleteSession = (session: Session) => async () => {
+		if (!confirmation) return;
 		const res = await fetch('http://localhost:8000/sessions', {
 			method: 'DELETE',
 			body: JSON.stringify(session._id)
@@ -19,9 +32,20 @@
 </script>
 
 <div class="ml-auto">
-	<button
-		on:click={deleteSession(session)}
-		class="bg-red-500 p-[10px] text-white font-semibold rounded-sm hover:bg-red-600 transition"
-		>Delete Session</button
-	>
+	{#if !confirmation}
+		<button
+			on:click={() => {
+				confirm();
+			}}
+			class="bg-red-500 p-[10px] text-white font-semibold rounded-sm hover:bg-red-600 transition"
+			>Delete Session</button
+		>
+	{:else}
+		<button
+			on:click={deleteSession(session)}
+      use:clickOutside on:click_outside={handleClick}
+			class="bg-red-500 p-[10px] text-white font-semibold rounded-sm hover:bg-red-600 transition"
+			>Are you sure?</button
+		>
+	{/if}
 </div>

src/typings/additional-svelte-typings.d.ts

@@ -0,0 +1,6 @@
+declare namespace svelteHTML {
+    // enhance attributes
+    interface HTMLAttributes {
+        'on:click_outside'?: () => void;
+    }
+}

src/utils/clickOutside.ts

@@ -0,0 +1,20 @@
+export function clickOutside<T extends HTMLElement>(node: T) {
+    const handleClick = (event: MouseEvent) => {
+        if (
+            node &&
+            event.target instanceof Element &&
+            !node.contains(event.target) &&
+            !event.defaultPrevented
+        ) {
+            node.dispatchEvent(new CustomEvent<T>('click_outside', { detail: node }))
+        }
+    }
+
+    document.addEventListener('click', handleClick, true)
+
+    return {
+        destroy() {
+            document.removeEventListener('click', handleClick, true)
+        }
+    }
+}