From 4acbc96a58076cd9918818998f8f34a7e0a5f9f5 Mon Sep 17 00:00:00 2001
From: 2mal3 <56305732+2mal3@users.noreply.github.com>
Date: Mon, 19 Jan 2026 17:40:53 +0100
Subject: [PATCH] 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.
---
 .../frontend/src/lib/components/PopUp.svelte  | 20 +++++++------------
 control/frontend/src/lib/ts/types.ts          |  5 ++---
 control/frontend/src/routes/+page.svelte      |  6 ------
 .../frontend/src/routes/ControlView.svelte    |  5 -----
 control/frontend/src/routes/FileView.svelte   |  4 ----
 5 files changed, 9 insertions(+), 31 deletions(-)

diff --git a/control/frontend/src/lib/components/PopUp.svelte b/control/frontend/src/lib/components/PopUp.svelte
index a297e14..940e291 100644
--- a/control/frontend/src/lib/components/PopUp.svelte
+++ b/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}>
-								<X />
-							</Button>
-						{/if}
+						<Button className="aspect-square p-1.5!" click_function={try_to_close}>
+							<X />
+						</Button>
 					</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>
diff --git a/control/frontend/src/lib/ts/types.ts b/control/frontend/src/lib/ts/types.ts
index b64c0c2..187a9f0 100755
--- a/control/frontend/src/lib/ts/types.ts
+++ b/control/frontend/src/lib/ts/types.ts
@@ -126,13 +126,12 @@ export type MenuOption = {
 
 export type PopupContent = {
 	open: boolean;
-	snippet: Snippet<[string]> | null;
-	snippet_arg?: string;
+	snippet: Snippet<[any]> | Snippet<[]> | Snippet | null | any;
+	snippet_arg?: any;
 	title?: string;
 	title_class?: string;
 	title_icon?: typeof X | null;
 	window_class?: string;
-	closable?: boolean;
 };
 
 export type NumberSetting = {
diff --git a/control/frontend/src/routes/+page.svelte b/control/frontend/src/routes/+page.svelte
index a1d90f9..97baab8 100644
--- a/control/frontend/src/routes/+page.svelte
+++ b/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>
diff --git a/control/frontend/src/routes/ControlView.svelte b/control/frontend/src/routes/ControlView.svelte
index cdfe78f..accd15a 100644
--- a/control/frontend/src/routes/ControlView.svelte
+++ b/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
 		};
 	}
 
diff --git a/control/frontend/src/routes/FileView.svelte b/control/frontend/src/routes/FileView.svelte
index ecc8110..7895d31 100755
--- a/control/frontend/src/routes/FileView.svelte
+++ b/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
 		};
 	};