From 919bba7c2ee8a099c8be9e802abb42170e5c8610 Mon Sep 17 00:00:00 2001
From: E44 <129310925+programmer-44@users.noreply.github.com>
Date: Tue, 9 Jun 2026 22:00:36 +0200
Subject: [PATCH] refactor(control): implement ESLint -> remove unnecessary
 imports, improve general code quality

---
 .../frontend/src/lib/components/Button.svelte  |  7 ++++---
 .../lib/components/DisplayGroupObject.svelte   |  8 ++------
 .../src/lib/components/DisplayObject.svelte    |  2 +-
 .../src/lib/components/HighlightedText.svelte  |  4 +++-
 .../src/lib/components/InodeElement.svelte     | 18 +++++++-----------
 .../lib/components/NumberSettingInput.svelte   |  2 +-
 control/frontend/src/lib/ts/types.ts           |  4 ++--
 control/frontend/src/routes/+layout.svelte     |  1 +
 control/frontend/src/routes/+page.svelte       | 11 +++++------
 control/frontend/src/routes/ControlView.svelte |  3 +--
 control/frontend/src/routes/DisplayView.svelte | 13 +++++--------
 control/frontend/src/routes/FileView.svelte    | 10 +++++-----
 control/frontend/src/routes/KeyInput.svelte    |  2 +-
 control/frontend/src/routes/TipTapInput.svelte |  7 +++----
 14 files changed, 41 insertions(+), 51 deletions(-)

diff --git a/control/frontend/src/lib/components/Button.svelte b/control/frontend/src/lib/components/Button.svelte
index 1257421..f4c4251 100644
--- a/control/frontend/src/lib/components/Button.svelte
+++ b/control/frontend/src/lib/components/Button.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { get_shifted_color } from '$lib/ts/stores/ui_behavior';
 	import type { MenuOption } from '$lib/ts/types';
+	import type { Snippet } from 'svelte';
 	import { fade } from 'svelte/transition';
 
 	let {
@@ -26,7 +27,7 @@
 		menu_options?: MenuOption[];
 		menu_class?: string;
 		div_class?: string;
-		children?: any;
+		children: Snippet;
 	} = $props();
 
 	let menu_shown = $state(false);
@@ -158,14 +159,14 @@
 				e.stopPropagation();
 			}}
 		>
-			{#each menu_options as option}
+			{#each menu_options as option, i (i)}
 				<button
 					disabled={option.disabled ?? false}
 					class="bg-white/15 {option.disabled
 						? 'text-stone-500 cursor-not-allowed'
 						: 'hover:bg-white/35 active:bg-white/60 cursor-pointer ' +
 							option.class} rounded-lg p-2 transition-colors duration-200 select-none flex flex-row gap-2 items-center"
-					onclick={async (e) => {
+					onclick={async () => {
 						if (option.on_select) await option.on_select();
 						close_menu();
 					}}
diff --git a/control/frontend/src/lib/components/DisplayGroupObject.svelte b/control/frontend/src/lib/components/DisplayGroupObject.svelte
index 1eb1542..cc0c6e0 100644
--- a/control/frontend/src/lib/components/DisplayGroupObject.svelte
+++ b/control/frontend/src/lib/components/DisplayGroupObject.svelte
@@ -3,11 +3,8 @@
 	import {
 		dnd_flip_duration_ms,
 		get_selectable_color_classes,
-		is_display_drag,
-		is_group_drag
+		is_display_drag
 	} from '$lib/ts/stores/ui_behavior';
-	import { cubicOut } from 'svelte/easing';
-	import { flip } from 'svelte/animate';
 	import DisplayObject from './DisplayObject.svelte';
 	import {
 		all_displays_of_group_selected,
@@ -18,10 +15,9 @@
 	} from '$lib/ts/stores/displays';
 	import DNDGrip from '$lib/components/DNDGrip.svelte';
 	import { fade } from 'svelte/transition';
-	import type { Display, DisplayIdGroup, MenuOption } from '$lib/ts/types';
+	import type { DisplayIdGroup, MenuOption } from '$lib/ts/types';
 	import { selected_display_ids } from '$lib/ts/stores/select';
 	import { liveQuery, type Observable } from 'dexie';
-	import { onMount } from 'svelte';
 	import { get_uuid } from '$lib/ts/utils';
 
 	let {
diff --git a/control/frontend/src/lib/components/DisplayObject.svelte b/control/frontend/src/lib/components/DisplayObject.svelte
index 47aba60..66b8af0 100755
--- a/control/frontend/src/lib/components/DisplayObject.svelte
+++ b/control/frontend/src/lib/components/DisplayObject.svelte
@@ -8,7 +8,7 @@
 	import DNDGrip from '$lib/components/DNDGrip.svelte';
 	import { Menu, Pin, PinOff, VideoOff } from 'lucide-svelte';
 	import OnlineState from './OnlineState.svelte';
-	import type { Display, DisplayIdObject, MenuOption } from '$lib/ts/types';
+	import type { DisplayIdObject, MenuOption } from '$lib/ts/types';
 	import { is_selected, select, selected_display_ids } from '$lib/ts/stores/select';
 	import { get_display_by_id, screenshot_loop } from '$lib/ts/stores/displays';
 	import { change_file_path, current_file_path } from '$lib/ts/stores/files';
diff --git a/control/frontend/src/lib/components/HighlightedText.svelte b/control/frontend/src/lib/components/HighlightedText.svelte
index 43c3fcd..1fddfff 100644
--- a/control/frontend/src/lib/components/HighlightedText.svelte
+++ b/control/frontend/src/lib/components/HighlightedText.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
+	import type { Snippet } from "svelte";
+
 	let {
 		children,
 		bg = 'bg-stone-750',
 		fg = 'text-stone-200',
 		className = ''
 	}: {
-		children: any;
+		children: Snippet;
 		bg?: string;
 		fg?: string;
 		className?: string;
diff --git a/control/frontend/src/lib/components/InodeElement.svelte b/control/frontend/src/lib/components/InodeElement.svelte
index f4d7012..8dd76c3 100755
--- a/control/frontend/src/lib/components/InodeElement.svelte
+++ b/control/frontend/src/lib/components/InodeElement.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ArrowRight, Ban, FileIcon, Folder, Play, Triangle, TriangleAlert } from 'lucide-svelte';
+	import { ArrowRight, Ban, FileIcon, Folder, Play, TriangleAlert } from 'lucide-svelte';
 	import {
 		current_height,
 		get_selectable_color_classes,
@@ -10,7 +10,6 @@
 		supported_file_type_icon,
 		type Inode,
 		get_file_primary_key,
-		type FileOnDisplay,
 		type FileTransferTask,
 		is_folder
 	} from '$lib/ts/types';
@@ -18,7 +17,6 @@
 	import {
 		is_selected,
 		select,
-		selected_display_ids,
 		selected_file_ids
 	} from '$lib/ts/stores/select';
 	import {
@@ -32,13 +30,11 @@
 	import { get_file_size_display_string, get_file_type } from '$lib/ts/utils';
 	import { open_file } from '$lib/ts/api_handler';
 	import {
-		get_display_by_id,
 		run_on_all_selected_displays,
 		selected_online_display_ids
 	} from '$lib/ts/stores/displays';
 	import { get_thumbnail_url } from '$lib/ts/stores/thumbnails';
 	import { liveQuery, type Observable } from 'dexie';
-	import { db } from '$lib/ts/database';
 	import { add_sync_recursively, file_transfer_tasks } from '$lib/ts/file_transfer_handler';
 
 	let { file, not_interactable = false }: { file: Inode; not_interactable?: boolean } = $props();
@@ -65,7 +61,7 @@
 	});
 
 	let file_transfer_task: FileTransferTask | null = $derived(
-		$file_transfer_tasks.hasOwnProperty(file_primary_key)
+		Object.hasOwn($file_transfer_tasks, file_primary_key)
 			? $file_transfer_tasks[file_primary_key]
 			: null
 	);
@@ -145,7 +141,7 @@
 
 	function get_grayed_out_text_color_strings(is_selected: boolean): string {
 		if (not_interactable) return 'text-stone-400';
-		if (!!file_transfer_task) return 'text-white/20';
+		if (file_transfer_task) return 'text-white/20';
 		const color = is_selected ? 'text-stone-600' : 'text-stone-400';
 		const factor = is_selected ? -1 : 1;
 		return `${color} group-hover:${get_shifted_color(color, factor * 100)} group-active:${get_shifted_color(color, factor * 150)}`;
@@ -153,14 +149,14 @@
 
 	function get_grayed_out_border_color_strings(is_selected: boolean): string {
 		if (not_interactable) return 'border-stone-550';
-		if (!!file_transfer_task) return 'border-white/10';
+		if (file_transfer_task) return 'border-white/10';
 		const color = is_selected ? 'border-stone-450' : 'border-stone-550';
 		const factor = is_selected ? 1 : 1;
 		return `${color} group-hover:${get_shifted_color(color, factor * 100)} group-active:${get_shifted_color(color, factor * 150)}`;
 	}
 
 	function onclick(e: Event) {
-		if (not_interactable || !!file_transfer_task) return;
+		if (not_interactable || file_transfer_task) return;
 		select(selected_file_ids, file_primary_key, 'toggle');
 		e.stopPropagation();
 	}
@@ -184,7 +180,7 @@
 
 		if (loading_finished) {
 			out += 'bg-stone-500 text-white/30';
-		} else if (!!file_transfer_task) {
+		} else if (file_transfer_task) {
 			out += 'bg-stone-700 text-white/30';
 		} else {
 			out += get_selectable_color_classes(
@@ -200,7 +196,7 @@
 
 		if (not_interactable) {
 			out += ' rounded-lg';
-		} else if (!!file_transfer_task) {
+		} else if (file_transfer_task) {
 			out += ' rounded-r-lg';
 		} else {
 			out += ' rounded-r-lg cursor-pointer';
diff --git a/control/frontend/src/lib/components/NumberSettingInput.svelte b/control/frontend/src/lib/components/NumberSettingInput.svelte
index 70c0213..9b3cd18 100644
--- a/control/frontend/src/lib/components/NumberSettingInput.svelte
+++ b/control/frontend/src/lib/components/NumberSettingInput.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { NumberSetting } from '$lib/ts/types';
-	import { ChevronDown, ChevronUp, Minus, Plus } from 'lucide-svelte';
+	import { ChevronDown, ChevronUp } from 'lucide-svelte';
 	import Button from './Button.svelte';
 
 	let {
diff --git a/control/frontend/src/lib/ts/types.ts b/control/frontend/src/lib/ts/types.ts
index f66a7a8..c892b86 100755
--- a/control/frontend/src/lib/ts/types.ts
+++ b/control/frontend/src/lib/ts/types.ts
@@ -127,8 +127,8 @@ export type MenuOption = {
 
 export type PopupContent = {
 	open: boolean;
-	snippet: Snippet<[any]> | Snippet<[]> | Snippet | null | any;
-	snippet_arg?: any;
+	snippet: Snippet<[string]> | Snippet<[]> | null;
+	snippet_arg?: string;
 	title?: string;
 	title_class?: string;
 	title_icon?: typeof X | null;
diff --git a/control/frontend/src/routes/+layout.svelte b/control/frontend/src/routes/+layout.svelte
index 03a29bc..60a2fb9 100644
--- a/control/frontend/src/routes/+layout.svelte
+++ b/control/frontend/src/routes/+layout.svelte
@@ -15,6 +15,7 @@
 </svelte:head>
 
 {#if !dev}
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html versionSplashScreen}
 {/if}
 
diff --git a/control/frontend/src/routes/+page.svelte b/control/frontend/src/routes/+page.svelte
index b98220a..e688ab1 100644
--- a/control/frontend/src/routes/+page.svelte
+++ b/control/frontend/src/routes/+page.svelte
@@ -7,10 +7,8 @@
 		Trash2,
 		Menu,
 		ChevronDown,
-		icons,
 		SquareCheckBig,
 		Square,
-		X,
 		Info
 	} from 'lucide-svelte';
 	import Button from '$lib/components/Button.svelte';
@@ -73,13 +71,13 @@
 		const mac = text_inputs_valid.mac.value === '' ? null : text_inputs_valid.mac.value;
 		const name = text_inputs_valid.name.value;
 		let display: Display | null = null;
-		if (!!existing_display_id) {
+		if (existing_display_id) {
 			display = await edit_display_data(existing_display_id, ip, mac, name);
 		} else {
 			const status = await ping_ip(text_inputs_valid.ip.value);
 			display = await add_display(ip, mac, name, status);
 		}
-		if (!!display) {
+		if (display) {
 			await update_display_status(display);
 		}
 	}
@@ -179,6 +177,7 @@
 	};
 </script>
 
+<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
 {#snippet about_popup(_: string)}
 	<div class="px-2">
 		<p>
@@ -253,7 +252,7 @@
 		title="Anzeigename"
 		placeholder="z.B. Beamer vorne links"
 		is_valid_function={async (input: string) => {
-			if (!!existing_display_id) {
+			if (existing_display_id) {
 				if (input === (await get_display_by_id(existing_display_id))?.name)
 					return [true, 'Gültiger Name'];
 			}
@@ -317,7 +316,7 @@
 		{/if}
 		<Button
 			disabled={!all_text_inputs_valid()}
-			className="{!!existing_display_id ? 'px-4' : 'pl-3 pr-4 gap-2'} font-bold"
+			className="{existing_display_id ? 'px-4' : 'pl-3 pr-4 gap-2'} font-bold"
 			bg="bg-stone-650"
 			click_function={async () => {
 				await finalize_add_edit_display(existing_display_id);
diff --git a/control/frontend/src/routes/ControlView.svelte b/control/frontend/src/routes/ControlView.svelte
index 75fa07b..3b5ca46 100644
--- a/control/frontend/src/routes/ControlView.svelte
+++ b/control/frontend/src/routes/ControlView.svelte
@@ -21,7 +21,6 @@
 		show_blackscreen,
 		shutdown,
 		startup,
-		show_html,
 		open_website
 	} from '$lib/ts/api_handler';
 	import {
@@ -135,7 +134,7 @@
 
 	function validate_website_url(url: string): [boolean, string] {
 		if (url === '') return [true, ''];
-		const regex = /^https?:\/\/[\w\-]+(\.[\w\-]+)+([\w\-\._~:/?#\[\]@!$&'\(\)\*\+,;=.])*/;
+		const regex = /^https?:\/\/[\w-]+(\.[\w-]+)+([\w\-._~:/?#[\]@!$&'()*+,;=.])*/;
 		if (regex.test(url)) {
 			return [true, ''];
 		}
diff --git a/control/frontend/src/routes/DisplayView.svelte b/control/frontend/src/routes/DisplayView.svelte
index 4e65d72..4b1d86e 100755
--- a/control/frontend/src/routes/DisplayView.svelte
+++ b/control/frontend/src/routes/DisplayView.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { fade, scale } from 'svelte/transition';
+	import { fade } from 'svelte/transition';
 	import {
 		all_displays_of_group_selected,
 		get_display_by_id,
@@ -25,12 +25,9 @@
 	import { selected_display_ids } from '$lib/ts/stores/select';
 	import { dragHandleZone } from 'svelte-dnd-action';
 	import DisplayGroupObject from '../lib/components/DisplayGroupObject.svelte';
-	import { Pane, Splitpanes } from 'svelte-splitpanes';
+	import { Pane, Splitpanes, type IPaneSizingEvent } from 'svelte-splitpanes';
 	import HighlightedText from '$lib/components/HighlightedText.svelte';
 	import { liveQuery, type Observable } from 'dexie';
-	import { onMount } from 'svelte';
-	import { flip } from 'svelte/animate';
-	import { cubicOut } from 'svelte/easing';
 
 	let {
 		handle_display_deletion,
@@ -110,7 +107,7 @@
 		return true;
 	}
 
-	function handle_splitpane_resize(e: any) {
+	function handle_splitpane_resize(e: CustomEvent<IPaneSizingEvent[]>) {
 		if (e.detail[0].size === 0) {
 			$pinned_display_id = null;
 			pinned_pane_size = last_pinned_pane_size;
@@ -225,7 +222,7 @@
 								title="Bildschirme größer darstellen"
 								className="aspect-square p-1.5! pr-1! rounded-r-none"
 								bg="bg-stone-600"
-								disabled={!Boolean(next_height_step_size('display', $current_height, 1))}
+								disabled={!next_height_step_size('display', $current_height, 1)}
 								click_function={() => {
 									change_height('display', 1);
 								}}
@@ -236,7 +233,7 @@
 								title="Bildschirme kleiner darstellen"
 								className="aspect-square p-1.5! pl-1! rounded-l-none"
 								bg="bg-stone-600"
-								disabled={!Boolean(next_height_step_size('display', $current_height, -1))}
+								disabled={!next_height_step_size('display', $current_height, -1)}
 								click_function={() => {
 									change_height('display', -1);
 								}}
diff --git a/control/frontend/src/routes/FileView.svelte b/control/frontend/src/routes/FileView.svelte
index 7305b35..ad42363 100755
--- a/control/frontend/src/routes/FileView.svelte
+++ b/control/frontend/src/routes/FileView.svelte
@@ -78,7 +78,7 @@
 			const results = await Promise.all(selected_file_ids.map((id) => get_file_by_id(id)));
 			return results.filter((element) => element !== null);
 		} catch (e: unknown) {
-			console.error('Error on generating selected_files');
+			console.error('Error on generating selected_files', e);
 			return [];
 		}
 	}
@@ -172,7 +172,7 @@
 			> existiert nicht auf {display_names_where_path_does_not_exist.length === 1
 				? 'dem Bildschirm'
 				: 'den Bildschirmen'}
-			{#each display_names_where_path_does_not_exist as display_name, i}
+			{#each display_names_where_path_does_not_exist as display_name, i (i)}
 				{#if i !== 0}
 					,
 				{/if}
@@ -247,7 +247,7 @@
 			>{`${$selected_file_ids.length === 1 ? 'Folgendes Objekt' : `Folgende ${$selected_file_ids.length} Objekte`} löschen? (Wiederherstellung nicht möglich)`}</span
 		>
 		<div class="flex flex-col gap-2 overflow-y-auto h-full min-h-0 grow-0">
-			{#each $selected_files || [] as file}
+			{#each $selected_files || [] as file, i (i)}
 				<InodeElement {file} not_interactable />
 			{/each}
 		</div>
@@ -294,7 +294,7 @@
 				title="Dateien größer darstellen"
 				className="aspect-square p-1.5! pr-1! rounded-r-none"
 				bg="bg-stone-600"
-				disabled={!Boolean(next_height_step_size('file', $current_height, 1))}
+				disabled={!next_height_step_size('file', $current_height, 1)}
 				click_function={() => {
 					change_height('file', 1);
 				}}
@@ -305,7 +305,7 @@
 				title="Dateien kleiner darstellen"
 				className="aspect-square p-1.5! pl-1! rounded-l-none"
 				bg="bg-stone-600"
-				disabled={!Boolean(next_height_step_size('file', $current_height, -1))}
+				disabled={!next_height_step_size('file', $current_height, -1)}
 				click_function={() => {
 					change_height('file', -1);
 				}}
diff --git a/control/frontend/src/routes/KeyInput.svelte b/control/frontend/src/routes/KeyInput.svelte
index 7ace3ec..fefe10b 100644
--- a/control/frontend/src/routes/KeyInput.svelte
+++ b/control/frontend/src/routes/KeyInput.svelte
@@ -4,7 +4,7 @@
 	import { fade } from 'svelte/transition';
 	import { run_on_all_selected_displays } from '$lib/ts/stores/displays';
 	import { send_keyboard_input } from '$lib/ts/api_handler';
-	import { ArrowDownToLine, ArrowUpFromLine, Grid2x2, Grid2X2, Option } from 'lucide-svelte';
+	import { ArrowDownToLine, ArrowUpFromLine, Grid2x2, Option } from 'lucide-svelte';
 	import Button from '$lib/components/Button.svelte';
 	import { onDestroy } from 'svelte';
 	import { add_to_keyboard_queue } from '$lib/ts/utils';
diff --git a/control/frontend/src/routes/TipTapInput.svelte b/control/frontend/src/routes/TipTapInput.svelte
index f2b78cd..c6b0d71 100644
--- a/control/frontend/src/routes/TipTapInput.svelte
+++ b/control/frontend/src/routes/TipTapInput.svelte
@@ -9,7 +9,6 @@
 		Highlighter,
 		Italic,
 		PaintBucket,
-		QrCode,
 		Strikethrough
 	} from 'lucide-svelte';
 	import Button from '$lib/components/Button.svelte';
@@ -149,7 +148,7 @@
 	});
 </script>
 
-{#each Object.values(color_states) as color_state}
+{#each Object.values(color_states) as color_state, i (i)}
 	<input type="color" bind:this={color_state.el} bind:value={color_state.value} class="hidden" />
 {/each}
 
@@ -163,9 +162,9 @@
 
 	<div class="flex flex-col gap-2 justify-between">
 		<div class="flex flex-col gap-2">
-			{#each text_edit_options as edit_row}
+			{#each text_edit_options as edit_row, i (i)}
 				<div class="flex flex-row gap-1">
-					{#each edit_row as option}
+					{#each edit_row as option, j (j)}
 						<div class="flex flex-row">
 							<button
 								title={option.title}