refactor(frontend): small syntax improvements

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 = '',

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({

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,

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}

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';

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);

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
+	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"
-		? 'top-[41%]'
-		: 'top-2'} 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'}

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';
 

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';

control/frontend/src/components/TipTapInput.svelte

@@ -6,7 +6,6 @@
 	import {
 		Baseline,
 		Bold,
-		Code,
 		Highlighter,
 		Italic,
 		PaintBucket,
@@ -154,7 +153,7 @@
 {/each}
 
 <div data-testid="text-popup" class="flex flex-row gap-2 size-full">
-	<div
+	<div
 		class="rounded-xl size-full shrink min-w-0 flex"
 		style="background-color: {color_states.bg.value};"
 	>