minor UI

frontend/src/lib/App.svelte

@@ -41,11 +41,8 @@
 
 	$: isLoading = $myPresence?.status === Status.loading || false;
 
-	$: {
-		console.log($myPresence.status);
-	}
 	function onPrompt() {
-		if (!isLoading) {
+		if (!isLoading && !showModal) {
 			showModal = true;
 			myPresence.update({
 				status: Status.prompting

frontend/src/lib/Buttons/DragButton.svelte

@@ -2,12 +2,13 @@
 	import Move from '$lib/Icons/Move.svelte';
 	export let isActive = false;
 	export let isLoading = false;
+	export let className = '';
 </script>
 
 <button
 	on:click
 	disabled={isLoading}
-	class="bg-white rounded-full p-2 {isActive ? 'text-blue-700' : 'text-gray-800'}"
+	class="{className} shadow-lg bg-white rounded-full {isActive ? 'text-blue-700' : 'text-gray-800'}"
 	title="Enable Dragging"
 >
 	<Move />

frontend/src/lib/Buttons/MaskButton.svelte

@@ -2,12 +2,14 @@
 	import Mask from '$lib/Icons/Mask.svelte';
 	export let isActive = false;
 	export let isLoading = false;
+	export let className = '';
+
 </script>
 
 <button
 	on:click
 	disabled={isLoading}
-	class="bg-white rounded-full p-2 {isActive ? 'text-blue-700' : 'text-gray-800'}"
+	class="{className} rounded-full {isActive ? 'text-blue-700' : 'text-gray-800'}"
 	title="Enable Masking"
 >
 	<Mask />

frontend/src/lib/Buttons/PPButton.svelte

@@ -5,11 +5,11 @@
 <button
 	on:click
 	disabled={isLoading}
-	class="button-paint bg-violet-100 text-violet-900 min-w-[25ch] "
+	class="button-paint"
 	title="New Paint Frame"
 >
 	{#if isLoading}
-		<span class="font-mono">paiting... </span>{:else}
+		<span>paiting... </span>{:else}
 		<span
 			class="rounded-sm h-6 w-6 flex justify-center items-center border-2 border-dashed border-violet-700 mr-2"
 		>
@@ -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 font-mono flex justify-center items-center disabled:opacity-80  dark:bg-white dark:text-black rounded-2xl px-3 py-1 shadow-sm focus:outline-none focus:border-gray-400;
+		@apply text-lg font-mono bg-violet-100 text-violet-900 min-w-[25ch] flex justify-center items-center disabled:opacity-80  dark:bg-white dark:text-black rounded-2xl px-3 py-1 shadow-sm focus:outline-none focus:border-gray-400;
 	}
 </style>

frontend/src/lib/Buttons/UndoButton.svelte

@@ -2,12 +2,15 @@
 	import Undo from '$lib/Icons/Undo.svelte';
 	export let isActive = false;
 	export let isLoading = false;
+	export let className = '';
 </script>
 
 <button
 	on:click
 	disabled={isLoading}
-	class="bg-white rounded-full p-2 {isActive ? 'text-blue-700' : 'text-gray-800'}"
+	class="{className} bg-white rounded-full bg-white rounded-full {isActive
+		? 'text-blue-700'
+		: 'text-gray-800'}"
 	title="Clear Masking"
 >
 	<Undo />

frontend/src/lib/Icons/Mask.svelte

@@ -4,8 +4,8 @@
 
 <svg
 	class={classList}
-	width="20"
-	height="20"
+	width="50"
+	height="50"
 	viewBox="0 0 11 11"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"

frontend/src/lib/Icons/Move.svelte

@@ -4,8 +4,8 @@
 
 <svg
 	class={classList}
-	width="20"
-	height="20"
+	width="50"
+	height="50"
 	viewBox="0 0 11 11"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"

frontend/src/lib/PaintFrame.svelte

@@ -36,6 +36,11 @@
 	$: isLoading =
 		$myPresence?.status === Status.loading || $myPresence?.status === Status.prompting || false;
 
+	$: {
+		if (!dragEnabled && $myPresence.status === Status.loading) {
+			dragEnabled = true;
+		}
+	}
 	$: coord = {
 		x: transform.applyX(position.x),
 		y: transform.applyY(position.y)
@@ -207,18 +212,23 @@
 			{/if}
 			{#if !isDragging}
 				<div class="absolute top-full ">
-					<div class="py-2">
+					<div class="py-3">
 						<PPButton {isLoading} on:click={() => dispatch('prompt')} />
 					</div>
 				</div>
 				<div class="absolute left-full bottom-0">
-					<div class="px-2">
-						<DragButton {isLoading} isActive={dragEnabled} on:click={toggleDrag} />
-						<div class="flex bg-white rounded-full mt-3">
-							<MaskButton {isLoading} isActive={!dragEnabled} on:click={toggleDrawMask} />
+					<div class="mx-4">
+						<DragButton
+							className={'p-1'}
+							{isLoading}
+							isActive={dragEnabled}
+							on:click={toggleDrag}
+						/>
+						<div class="flex bg-white rounded-full mt-3 shadow-lg">
+							<MaskButton className={'p-1'} isActive={!dragEnabled} on:click={toggleDrawMask} />
 							{#if !dragEnabled}
 								<span class="border-gray-800 border-opacity-50 border-r-2 my-2" />
-								<UndoButton {isLoading} on:click={cleanMask} />
+								<UndoButton className={'p-1 px-4'} {isLoading} on:click={cleanMask} />
 							{/if}
 						</div>
 					</div>

frontend/src/lib/PromptModal.svelte

@@ -15,10 +15,12 @@
 	};
 	onMount(() => {
 		inputEl.focus();
+		inputEl.addEventListener('focusout', cancel);
 		prompt = '';
 		window.addEventListener('keyup', onKeyup);
 		return () => {
 			window.removeEventListener('keyup', onKeyup);
+			inputEl.removeEventListener('focusout', cancel);
 		};
 	});
 
@@ -55,7 +57,6 @@
 <form
 	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}
-	on:click={cancel}
 >
 	<div class="flex bg-white rounded-2xl px-2 w-full max-w-md">
 		<input