better cancel click handler

.devcontainer/devcontainer.json

@@ -14,7 +14,10 @@
 	"customizations": {
 		"vscode": {
 			"extensions": [
-				"GitHub.vscode-pull-request-github"
+				"GitHub.vscode-pull-request-github",
+				"bradlc.vscode-tailwindcss",
+				"svelte.svelte-vscode",
+				"csstools.postcss"
 			]
 		}
 	},

frontend/src/lib/App.svelte

@@ -7,7 +7,7 @@
 	import PromptModal from '$lib/PromptModal.svelte';
 	import { COLORS, EMOJIS } from '$lib/constants';
 	import { PUBLIC_WS_INPAINTING } from '$env/static/public';
-	import type { PromptImgObject, PromptImgKey, Presence } from '$lib/types';
+	import type { PromptImgKey, Presence } from '$lib/types';
 	import { Status } from '$lib/types';
 	import { loadingState, currZoomTransform, maskEl } from '$lib/store';
 	import { useMyPresence, useObject, useOthers } from '$lib/liveblocks';
@@ -51,11 +51,9 @@
 	}
 	function onClose() {
 		showModal = false;
-		console.log('close Modal');
 	}
 
 	function onPaint() {
-		console.log('onPaint');
 		generateImage();
 		showModal = false;
 	}
@@ -74,10 +72,9 @@
 
 		const payload = {
 			fn_index: 0,
-			data: [base64Crop, prompt, 0.75, 7.5, 40, 'patchmatch'],
+			data: [base64Crop, prompt, 0.75, 7.5, 35, 'patchmatch'],
 			session_hash: sessionHash
 		};
-		console.log('payload', payload);
 
 		const websocket = new WebSocket(PUBLIC_WS_INPAINTING);
 		// websocket.onopen = async function (event) {
@@ -137,15 +134,18 @@
 							setTimeout(() => {
 								$loadingState = '';
 							}, 2000);
+							myPresence.update({
+								status: Status.ready,
+								currentPrompt: ''
+							});
 						} catch (err) {
 							const tError = err as Error;
 							$loadingState = tError?.message;
+							myPresence.update({
+								status: Status.ready
+							});
 						}
 						websocket.close();
-						myPresence.update({
-							status: Status.ready,
-							currentPrompt: ''
-						});
 						return;
 					case 'process_starts':
 						$loadingState = 'Processing';

frontend/src/lib/Buttons/PPButton.svelte

@@ -5,7 +5,7 @@
 <button
 	on:click
 	disabled={isLoading}
-	class="button-paint"
+	class="button-paint {isLoading ? 'cursor-wait' : 'cursor-pointer'}"
 	title="New Paint Frame"
 >
 	{#if isLoading}
@@ -24,6 +24,6 @@
 		@apply disabled:opacity-50 dark:bg-white dark:text-black bg-black text-white rounded-2xl text-xs shadow-sm focus:outline-none focus:border-gray-400;
 	} */
 	.button-paint {
-		@apply text-sm font-mono bg-violet-100 text-violet-900 min-w-[25ch] flex justify-center items-center disabled:opacity-50 dark:bg-white dark:text-black rounded-2xl px-3 py-1 shadow-sm focus:outline-none focus:border-gray-400;
+		@apply text-sm font-mono bg-violet-100 text-violet-900 min-w-[25ch] flex justify-center items-center disabled:opacity-50 rounded-xl px-3 py-1 shadow-sm focus:outline-none focus:border-gray-400;
 	}
 </style>

frontend/src/lib/Buttons/RoomsSelector.svelte

@@ -2,8 +2,10 @@
 	import Room from '$lib/Icons/Room.svelte';
 	import Pin from '$lib/Icons/Pin.svelte';
 	import People from '$lib/Icons/People.svelte';
+	import { onMount } from 'svelte';
 
 	export let isLoading = false;
+	let boxEl: HTMLElement;
 
 	let rooms = [
 		{ label: 'room 1', total: 11, capacity: 20 },
@@ -13,39 +15,77 @@
 		{ label: 'room 5', total: 11, capacity: 20 }
 	];
 
-	let selectedRoom = 0;
-</script>
+	let selectedRoomID = 0;
+	let collapsed = true;
+	$: selectedRoom = rooms[selectedRoomID];
 
-<button on:click disabled={isLoading} class="button-paint" title="New Paint Frame" />
+	function clickHandler(event: Event) {
+		if (!boxEl.contains(event.target as Node)) {
+			collapsed = true;
+		}
+	}
+	onMount(() => {
+		window.addEventListener('click', clickHandler, true);
+		return () => {
+			window.removeEventListener('click', clickHandler, true);
+		};
+	});
+</script>
 
-<ul class="font-mono font-medium tracking-tight bg-violet-100">
-	<li class="grid-row gap-2">
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+	class="bg-violet-100 text-violet-900 px-3 py-1 font-mono font-medium tracking-tight relative z-0 
+	{isLoading ? 'opacity-50' : ''}
+	{collapsed ? 'rounded-xl' : 'rounded-b-xl'}"
+	bind:this={boxEl}
+>
+	{#if !collapsed}
+		<div class="absolute z-10 left-0 right-0 bottom-full rounded-t-xl bg-violet-100 px-3 py-1">
+			<ul>
+				<li class="grid-row gap-2 pb-3">
+					<Room />
+					<span> room </span>
+					<People />
+					<span> players </span>
+				</li>
+				{#each rooms as room, i}
+					<li>
+						<!-- svelte-ignore a11y-invalid-attribute -->
+						<a
+							href="#"
+							on:click|preventDefault={() => (selectedRoomID = i)}
+							class="grid-row gap-2 hover:bg-gray-300
+						   {i === selectedRoomID ? 'text-green-600' : ''}"
+						>
+							<span>
+								{#if i === selectedRoomID}
+									<Pin />
+								{/if}
+							</span>
+							<span> {room.label} </span>
+							<span />
+							<span>{room.total} / {room.capacity}</span>
+						</a>
+					</li>
+				{/each}
+			</ul>
+			<div class="border-t-2 border-t-gray-400 border-opacity-50" />
+		</div>
+	{/if}
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div
+		class="grid-row gap-2 relative
+		{isLoading ? 'cursor-wait' : 'cursor-pointer'}"
+		on:click={() => (isLoading ? null : (collapsed = !collapsed))}
+	>
 		<Room />
-		<span> room </span>
+		<span> {selectedRoom.label} </span>
 		<People />
-		<span> players </span>
-	</li>
-	{#each rooms as room, i}
-		<li class="grid-row  gap-2">
-			<span>
-				{#if i === selectedRoom}
-					<Pin />
-				{/if}
-			</span>
-			<span> {room.label} </span>
-			<span />
-			<span>{room.total} / {room.capacity}</span>
-		</li>
-	{/each}
-</ul>
+		<span> {selectedRoom.total} / {selectedRoom.capacity} </span>
+	</div>
+</div>
 
 <style lang="postcss" scoped>
-	/* .button {
-		@apply disabled:opacity-50 dark:bg-white dark:text-black bg-black text-white rounded-2xl text-xs shadow-sm focus:outline-none focus:border-gray-400;
-	} */
-	.button-paint {
-		@apply text-sm font-mono bg-violet-100 text-violet-900 min-w-[25ch] flex justify-center items-center disabled:opacity-50 dark:bg-white dark:text-black rounded-2xl px-3 py-1 shadow-sm focus:outline-none focus:border-gray-400;
-	}
 	.grid-row {
 		display: grid;
 		grid-template-columns: 0.5fr 2fr 0.5fr 2fr;

frontend/src/lib/PromptModal.svelte

@@ -7,25 +7,29 @@
 	export let initPrompt = '';
 	let prompt: string;
 	let inputEl: HTMLInputElement;
+	let boxEl: HTMLDivElement;
 	const myPresence = useMyPresence();
 
 	const onKeyup = (e: KeyboardEvent) => {
 		if (e.key === 'Escape') {
-			cancel(e);
+			myPresence.update({
+				status: Status.ready
+			});
+			dispatch('close');
 		}
 	};
 
 	onMount(() => {
 		inputEl.focus();
-		inputEl.addEventListener('focusout', cancel);
 		prompt = initPrompt;
 		window.addEventListener('keyup', onKeyup);
+		window.addEventListener('click', cancelHandler, true);
+
 		return () => {
 			window.removeEventListener('keyup', onKeyup);
-			inputEl.removeEventListener('focusout', cancel);
+			window.removeEventListener('click', cancelHandler, true);
 		};
 	});
-
 	let timer: NodeJS.Timeout;
 	function debouce(newPrompt: string) {
 		clearTimeout(timer);
@@ -39,7 +43,6 @@
 	}
 	function onPrompt() {
 		if (prompt.trim() !== '') {
-			console.log('Prompting with: ', prompt);
 			dispatch('paint');
 			dispatch('close');
 		}
@@ -48,9 +51,10 @@
 		const target = event.target as HTMLInputElement;
 		debouce(target.value);
 	}
-	function cancel(event?: Event) {
-		if (!(event instanceof KeyboardEvent) && event?.relatedTarget !== null) return;
-
+	function cancelHandler(event: Event) {
+		if (boxEl.contains(event.target as Node)) {
+			return;
+		}
 		myPresence.update({
 			status: Status.ready
 		});
@@ -62,7 +66,7 @@
 	class="fixed w-screen top-0 left-0 bottom-0 right-0 max-h-screen z-50 flex items-center justify-center bg-black bg-opacity-80 px-3"
 	on:submit|preventDefault={onPrompt}
 >
-	<div class="flex bg-white rounded-2xl px-2 w-full max-w-md">
+	<div class="flex bg-white rounded-2xl px-2 w-full max-w-md" bind:this={boxEl}>
 		<input
 			value={prompt}
 			bind:this={inputEl}