From 54b9e1fc788b1bd4be0954f4659159e3425eebd6 Mon Sep 17 00:00:00 2001
From: 2mal3 <56305732+2mal3@users.noreply.github.com>
Date: Mon, 29 Dec 2025 18:26:54 +0100
Subject: [PATCH] refactor(frontend): small syntax improvements

---
 control/frontend/src/components/Button.svelte      |  3 +--
 control/frontend/src/components/ControlView.svelte |  1 -
 .../src/components/DisplayGroupObject.svelte       | 14 +++++++-------
 .../frontend/src/components/DisplayObject.svelte   |  4 ++--
 control/frontend/src/components/FileView.svelte    |  4 +---
 control/frontend/src/components/KeyInput.svelte    |  1 -
 .../frontend/src/components/Notification.svelte    |  7 ++-----
 control/frontend/src/components/PathBar.svelte     |  1 -
 control/frontend/src/components/PopUp.svelte       |  1 -
 control/frontend/src/components/TipTapInput.svelte |  3 +--
 10 files changed, 14 insertions(+), 25 deletions(-)

diff --git a/control/frontend/src/components/Button.svelte b/control/frontend/src/components/Button.svelte
index b92bf18..26923f1 100644
--- a/control/frontend/src/components/Button.svelte
+++ b/control/frontend/src/components/Button.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { flip } from 'svelte/animate';
 	import { get_shifted_color } from '../ts/stores/ui_behavior';
 	import type { MenuOption } from '../ts/types';
 	import { fade } from 'svelte/transition';
@@ -11,7 +10,7 @@
 		active_bg = get_shifted_color(bg, 200),
 		disabled = false,
 		title = '',
-		click_function = (e: MouseEvent) => {},
+		click_function = () => {},
 		menu_options = null,
 		menu_class = 'right-0',
 		div_class = '',
diff --git a/control/frontend/src/components/ControlView.svelte b/control/frontend/src/components/ControlView.svelte
index 0606d40..289f82c 100644
--- a/control/frontend/src/components/ControlView.svelte
+++ b/control/frontend/src/components/ControlView.svelte
@@ -18,7 +18,6 @@
 	import { send_keyboard_input, show_blackscreen } from '../ts/api_handler';
 	import { run_on_all_selected_displays } from '../ts/stores/displays';
 	import { selected_display_ids } from '../ts/stores/select';
-	import { onMount } from 'svelte';
 	import TipTapInput from './TipTapInput.svelte';
 
 	let popup_content: PopupContent = $state({
diff --git a/control/frontend/src/components/DisplayGroupObject.svelte b/control/frontend/src/components/DisplayGroupObject.svelte
index 7ceac9c..e312916 100644
--- a/control/frontend/src/components/DisplayGroupObject.svelte
+++ b/control/frontend/src/components/DisplayGroupObject.svelte
@@ -17,18 +17,19 @@
 	} from '../ts/stores/displays';
 	import DNDGrip from './DNDGrip.svelte';
 	import { fade } from 'svelte/transition';
-	import type { DisplayGroup, MenuOption } from '../ts/types';
+	import type { MenuOption } from '../ts/types';
 	import { selected_display_ids } from '../ts/stores/select';
 	import { liveQuery } from 'dexie';
-	import { onMount } from 'svelte';
-
-	let { display_group_id, get_display_menu_options, close_pinned_display }: {
 
+	let {
+		display_group_id,
+		get_display_menu_options,
+		close_pinned_display
+	}: {
 		display_group_id: string;
 		get_display_menu_options: (display_id: string) => MenuOption[];
 		close_pinned_display: () => void;
-	} = $props
-	();
+	} = $props();
 
 	let all_selected = liveQuery(() =>
 		all_displays_of_group_selected(display_group_id, $selected_display_ids)
@@ -36,7 +37,6 @@
 	let display_ids_in_group = liveQuery(() => get_display_ids_in_group(display_group_id));
 	let hovering_selectable = $state(false);
 
-
 	async function select_all_of_this_group() {
 		const new_value = !(await all_displays_of_group_selected(
 			display_group_id,
diff --git a/control/frontend/src/components/DisplayObject.svelte b/control/frontend/src/components/DisplayObject.svelte
index 4af293a..bdb9455 100755
--- a/control/frontend/src/components/DisplayObject.svelte
+++ b/control/frontend/src/components/DisplayObject.svelte
@@ -6,7 +6,7 @@
 		pinned_display_id
 	} from '../ts/stores/ui_behavior';
 	import DNDGrip from './DNDGrip.svelte';
-	import { Menu, Pencil, Pin, PinOff, Trash2, VideoOff, X } from 'lucide-svelte';
+	import { Menu, Pin, PinOff, VideoOff } from 'lucide-svelte';
 	import OnlineState from './OnlineState.svelte';
 	import type { Display, MenuOption } from '../ts/types';
 	import { is_selected, select, selected_display_ids } from '../ts/stores/select';
@@ -62,7 +62,7 @@
 	<div class="flex flex-row gap-4 min-w-0 flex-1">
 		<!-- Left Preview Screen -->
 		<button
-			class="group relative aspect-16/9 bg-stone-800 h-full rounded-lg overflow-hidden cursor-pointer text-stone-200 transition-colors duration-200"
+			class="group relative aspect-video bg-stone-800 h-full rounded-lg overflow-hidden cursor-pointer text-stone-200 transition-colors duration-200"
 			onmouseenter={() => (hovering_unselectable = true)}
 			onmouseleave={() => (hovering_unselectable = false)}
 			onclick={on_preview_click}
diff --git a/control/frontend/src/components/FileView.svelte b/control/frontend/src/components/FileView.svelte
index 09061a5..70f7629 100755
--- a/control/frontend/src/components/FileView.svelte
+++ b/control/frontend/src/components/FileView.svelte
@@ -3,15 +3,13 @@
 		ClipboardPaste,
 		Download,
 		FolderPlus,
-		Minus,
-		Info,
 		Pen,
 		RefreshCcw,
 		Scissors,
 		Trash2,
 		Upload,
 		ZoomIn,
-		ZoomOut,
+		ZoomOut
 	} from 'lucide-svelte';
 	import { change_height, current_height, next_height_step_size } from '../ts/stores/ui_behavior';
 	import Button from './Button.svelte';
diff --git a/control/frontend/src/components/KeyInput.svelte b/control/frontend/src/components/KeyInput.svelte
index 5dfd0f8..e98591c 100644
--- a/control/frontend/src/components/KeyInput.svelte
+++ b/control/frontend/src/components/KeyInput.svelte
@@ -6,7 +6,6 @@
 	import { run_on_all_selected_displays } from '../ts/stores/displays';
 	import { send_keyboard_input } from '../ts/api_handler';
 
-	const bg = 'bg-stone-700';
 	const key_map: Record<string, string> = key_map_json as Record<string, string>;
 
 	let active = $state(false);
diff --git a/control/frontend/src/components/Notification.svelte b/control/frontend/src/components/Notification.svelte
index 7cd4dc6..3991c54 100644
--- a/control/frontend/src/components/Notification.svelte
+++ b/control/frontend/src/components/Notification.svelte
@@ -3,19 +3,16 @@
 	import Button from './Button.svelte';
 	import { X } from 'lucide-svelte';
 	import { notifications } from '../ts/stores/notification';
-	import { get_shifted_color } from '../ts/stores/ui_behavior';
 </script>
 
 <div
 	data-testid="notification"
-	class="fixed flex flex-col gap-2 {true
-		? 'top-[41%]'
-		: 'top-2'} right-2 left-2 md:top-auto md:left-auto md:bottom-2 md:w-100 z-50"
+	class="fixed flex flex-col gap-2 top-[41%] right-2 left-2 md:top-auto md:left-auto md:bottom-2 md:w-100 z-50"
 >
 	{#each $notifications as n (n.id)}
 		<div
 			transition:fade={{ duration: 200 }}
-			class="p-2 pl-4 pb-3 rounded-lg shadow-xl/30 text-white flex flex-col gap-2 overflow-hidden relative border-1 border-black/20 {n.className}"
+			class="p-2 pl-4 pb-3 rounded-lg shadow-xl/30 text-white flex flex-col gap-2 overflow-hidden relative border border-black/20 {n.className}"
 			class:bg-red-900={n.type === 'error'}
 			class:bg-green-900={n.type === 'success'}
 			class:bg-sky-900={n.type === 'info'}
diff --git a/control/frontend/src/components/PathBar.svelte b/control/frontend/src/components/PathBar.svelte
index 548a788..aa7b4b0 100644
--- a/control/frontend/src/components/PathBar.svelte
+++ b/control/frontend/src/components/PathBar.svelte
@@ -4,7 +4,6 @@
 	import { onDestroy, onMount } from 'svelte';
 	import type { MenuOption } from '../ts/types';
 	import { change_file_path, current_file_path } from '../ts/stores/files';
-	import { fade } from 'svelte/transition';
 	import { flip } from 'svelte/animate';
 	import { cubicOut } from 'svelte/easing';
 
diff --git a/control/frontend/src/components/PopUp.svelte b/control/frontend/src/components/PopUp.svelte
index 854406b..efe809f 100644
--- a/control/frontend/src/components/PopUp.svelte
+++ b/control/frontend/src/components/PopUp.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { X } from 'lucide-svelte';
-	import { onDestroy, onMount } from 'svelte';
 	import Button from './Button.svelte';
 	import type { PopupContent } from '../ts/types';
 	import { fade } from 'svelte/transition';
diff --git a/control/frontend/src/components/TipTapInput.svelte b/control/frontend/src/components/TipTapInput.svelte
index 6c0260b..de2bb55 100644
--- a/control/frontend/src/components/TipTapInput.svelte
+++ b/control/frontend/src/components/TipTapInput.svelte
@@ -6,7 +6,6 @@
 	import {
 		Baseline,
 		Bold,
-		Code,
 		Highlighter,
 		Italic,
 		PaintBucket,
@@ -154,7 +153,7 @@
 
 <div data-testid="text-popup" class="flex flex-row gap-2 size-full">
 	<div
-		class="rounded-xl size-full flex-shrink min-w-0 flex"
+		class="rounded-xl size-full shrink min-w-0 flex"
 		style="background-color: {color_states.bg.value};"
 	>
 		<div bind:this={element} class="size-full overflow-auto px-3 py-2"></div>