chore(control): prevent closing popups by clicking outside (#20)

Multiple test users closed various popups accidentally by clicking outside and rarely used the feature to close the popup.

control/frontend/src/lib/components/PopUp.svelte

@@ -18,7 +18,7 @@
 	} = $props();
 
 	function try_to_close() {
-		if (!content.closable || !content.open) return;
+		if (!content.open) return;
 		close_function();
 	}
 
@@ -35,19 +35,13 @@
 </script>
 
 {#if content.open}
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<div
 		class="absolute inset-0 backdrop-blur flex justify-center items-center z-50 {className}"
-		onclick={try_to_close}
 		transition:fade={{ duration: 100 }}
 	>
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<div
 			class="bg-stone-800 rounded-2xl min-w-[30%] max-w-[90%] max-h-[85%] flex flex-col shadow-2xl/60 overflow-hidden {content.window_class ??
 				''}"
-			onclick={(e) => e.stopPropagation()}
 		>
 			{#if content.title}
 				<div class="font-bold bg-stone-700 p-1.5 flex flex-row justify-between gap-8 w-full">
@@ -64,16 +58,16 @@
 						</div>
 					</div>
 					<div class="flex aspect-square shrink-0">
-						{#if content.closable}
+						<Button className="aspect-square p-1.5!" click_function={try_to_close}>
-							<Button className="aspect-square p-1.5!" click_function={try_to_close}>
+							<X />
-								<X />
+						</Button>
-							</Button>
-						{/if}
 					</div>
 				</div>
 			{/if}
 			<div class="p-2 min-h-0 overflow-auto flex flex-col gap-2 {snippet_container_class}">
-				{@render content.snippet(content.snippet_arg)}
+				{#if content.snippet}
+					{@render content.snippet(content.snippet_arg ?? '')}
+				{/if}
 			</div>
 		</div>
 	</div>

control/frontend/src/lib/ts/types.ts

@@ -126,13 +126,12 @@ export type MenuOption = {
 
 export type PopupContent = {
 	open: boolean;
-	snippet: Snippet<[string]> | null;
+	snippet: Snippet<[any]> | Snippet<[]> | Snippet | null | any;
-	snippet_arg?: string;
+	snippet_arg?: any;
 	title?: string;
 	title_class?: string;
 	title_icon?: typeof X | null;
 	window_class?: string;
-	closable?: boolean;
 };
 
 export type NumberSetting = {

control/frontend/src/routes/+page.svelte

@@ -47,7 +47,6 @@
 		snippet: null,
 		title: '',
 		title_class: '!text-xl',
-		closable: true
 	});
 	let remove_display_name = $state('');
 
@@ -122,7 +121,6 @@
 			title_icon: Monitor,
 			title_class: '!text-xl',
 			window_class: 'w-3xl',
-			closable: true
 		};
 	};
 
@@ -134,7 +132,6 @@
 			title_icon: Settings,
 			title_class: '!text-xl',
 			window_class: 'w-3xl',
-			closable: true
 		};
 	};
 
@@ -147,7 +144,6 @@
 			title: 'Bildschirm wirklich löschen?',
 			title_class: 'text-red-400 !text-xl',
 			title_icon: Trash2,
-			closable: true
 		};
 	};
 
@@ -166,7 +162,6 @@
 			title: 'Bildschirm bearbeiten',
 			title_icon: Monitor,
 			title_class: '!text-xl',
-			closable: true
 		};
 	};
 
@@ -179,7 +174,6 @@
 			title: 'Über PLG MuDiCS',
 			title_icon: Info,
 			title_class: '!text-xl',
-			closable: true
 		};
 	};
 </script>

control/frontend/src/routes/ControlView.svelte

@@ -45,7 +45,6 @@
 		open: false,
 		snippet: null,
 		title: '',
-		closable: true
 	});
 
 	function popup_close_function() {
@@ -58,7 +57,6 @@
 			snippet: send_keys_popup,
 			title: 'Tastatur-Eingaben Senden',
 			title_icon: Keyboard,
-			closable: true
 		};
 	};
 
@@ -68,7 +66,6 @@
 			snippet: text_popup,
 			title: 'Text Anzeigen',
 			title_icon: TextAlignStart,
-			closable: true,
 			window_class: 'size-full'
 		};
 	};
@@ -80,7 +77,6 @@
 			title: 'Webseite Anzeigen',
 			window_class: 'w-xl',
 			title_icon: Globe,
-			closable: true
 		};
 	};
 
@@ -104,7 +100,6 @@
 			snippet: ask_shutdown_popup,
 			title: 'Bildschirm Herunterfahren',
 			title_icon: PowerOff,
-			closable: true
 		};
 	}
 

control/frontend/src/routes/FileView.svelte

@@ -67,7 +67,6 @@
 		open: false,
 		snippet: null,
 		title: '',
-		closable: true
 	});
 
 	let file_input: HTMLInputElement;
@@ -121,7 +120,6 @@
 			title: `${is_folder ? 'Ordner' : 'Datei'} umbenennen`,
 			title_icon: FolderPlus,
 			snippet_arg: extension,
-			closable: true
 		};
 	};
 
@@ -136,7 +134,6 @@
 			snippet: new_folder_popup,
 			title: 'Neuen Ordner erstellen',
 			title_icon: FolderPlus,
-			closable: true
 		};
 	};
 
@@ -146,7 +143,6 @@
 			snippet: delete_request_popup,
 			title: `${$selected_file_ids.length} ${$selected_file_ids.length === 1 ? 'Objekt' : 'Objekte'} wirklich löschen?`,
 			title_icon: Trash2,
-			closable: true
 		};
 	};