Refactoring the resource details page

src/lib/components/Modal/Modal.svelte

@@ -1,14 +1,34 @@
 <script lang="ts">
 	import classNames from 'classnames';
 	import { fade } from 'svelte/transition';
+	import { modalStack } from './Modal';
 
 	export let visible = false;
 	export let close: () => void;
+
+	const modalId = Symbol();
+
+	$: {
+		if (visible) {
+			modalStack.push(modalId);
+		} else {
+			modalStack.remove(modalId);
+		}
+	}
+	function handleShortcuts(event: KeyboardEvent) {
+		if (event.key === 'Escape' && visible && $modalStack.top === modalId) {
+			close();
+		}
+	}
 </script>
 
-{#if visible}
+<svelte:window on:keydown={handleShortcuts} />
+
+{#if visible && $modalStack.top === modalId}
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
-		class={classNames('fixed inset-0 bg-[#00000088] justify-center items-center z-20', {
+		class={classNames('fixed inset-0 bg-stone-900 bg-opacity-50 justify-center items-center z-20', {
 			hidden: !visible,
 			'flex overflow-hidden': visible
 		})}

src/lib/components/Modal/Modal.ts

@@ -0,0 +1,28 @@
+import { writable } from 'svelte/store';
+
+function createModalStack() {
+	const store = writable<{ stack: Symbol[]; top: Symbol | undefined }>({
+		stack: [],
+		top: undefined
+	});
+
+	return {
+		...store,
+		push: (symbol: Symbol) => {
+			store.update((s) => {
+				s.stack.push(symbol);
+				s.top = symbol;
+				return s;
+			});
+		},
+		remove: (symbol: Symbol) => {
+			store.update((s) => {
+				s.stack = s.stack.filter((x) => x !== symbol);
+				s.top = s.stack[s.stack.length - 1];
+				return s;
+			});
+		}
+	};
+}
+
+export const modalStack = createModalStack();