proper open/close modal

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -40,6 +40,7 @@
 	let hfToken: string | null = import.meta.env.VITE_HF_TOKEN;
 	let viewCode = false;
 	let showTokenModal = false;
+	let showModelPickerModal = true;
 	let loading = false;
 	let tokens = 0;
 	let latency = 0;
@@ -218,6 +219,14 @@
 	/>
 {/if}
 
+{#if showModelPickerModal}
+	<ModelPickerModal
+		{models}
+		on:modelSelected={(e) => changeModel(e.detail)}
+		on:close={(e) => (showModelPickerModal = false)}
+	/>
+{/if}
+
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	class="w-dvh grid divide-gray-200 overflow-hidden bg-gray-100/50 max-md:divide-y md:h-dvh dark:[color-scheme:dark]
@@ -395,5 +404,3 @@
 		</div>
 	{/if}
 </div>
-
-<ModelPickerModal {models} on:modelSelected={(e) => changeModel(e.detail)} />

src/lib/components/InferencePlayground/InferencePlaygroundModelPickerModal.svelte

@@ -4,10 +4,35 @@
 
 	export let models: ModelEntryWithTokenizer[];
 
-	const dispatch = createEventDispatcher<{ modelSelected: string }>();
+	let backdropEl: HTMLDivElement;
+
+	const dispatch = createEventDispatcher<{ modelSelected: string; close: void }>();
+
+	function handleKeydown(event: KeyboardEvent) {
+		// close on ESC
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			dispatch('close');
+		}
+	}
+
+	function handleBackdropClick(event: MouseEvent) {
+		if (window?.getSelection()?.toString()) {
+			return;
+		}
+		if (event.target === backdropEl) {
+			dispatch('close');
+		}
+	}
 </script>
 
-<div class="fixed inset-0 flex h-screen items-start justify-center bg-black/85 pt-32">
+<svelte:window on:keydown={handleKeydown} />
+
+<div
+	class="fixed inset-0 z-10 flex h-screen items-start justify-center bg-black/85 pt-32"
+	bind:this={backdropEl}
+	on:click|stopPropagation={handleBackdropClick}
+>
 	<div class="flex w-full max-w-[600px] items-start justify-center p-10">
 		<div
 			class="flex h-full w-full flex-col overflow-hidden rounded-lg border bg-white text-gray-900 shadow-md"