refactor(frontend)

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

@@ -11,7 +11,7 @@
 		disabled = false,
 		title = '',
 		click_function = () => {},
-		menu_options = null,
+		menu_options = [],
 		menu_class = 'right-0',
 		div_class = '',
 		children
@@ -23,7 +23,7 @@
 		disabled?: boolean;
 		title?: string;
 		click_function?: (e: MouseEvent) => void;
-		menu_options?: MenuOption[] | null;
+		menu_options?: MenuOption[];
 		menu_class?: string;
 		div_class?: string;
 		children?: any;

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

@@ -52,20 +52,20 @@
 			{#if content.title}
 				<div class="font-bold bg-stone-700 p-1.5 flex flex-row justify-between gap-8 w-full">
 					<div
-						class="flex flex-row flex-1 gap-3 pl-2 py-1 items-center grow whitespace-nowrap min-w-0 flex-shrink-0 text-lg {content.title_class ??
+						class="flex flex-row flex-1 gap-3 pl-2 py-1 items-center grow whitespace-nowrap min-w-0 shrink-0 text-lg {content.title_class ??
 							''}"
 					>
 						{#if content.title_icon}
 							{@const Icon = content.title_icon}
-							<Icon strokeWidth="2" class="flex-shrink-0" />
+							<Icon strokeWidth="2" class="shrink-0" />
 						{/if}
-						<div class="flex-shrink-0">
+						<div class="shrink-0">
 							{content.title}
 						</div>
 					</div>
-					<div class="flex aspect-square flex-shrink-0">
+					<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 />
 							</Button>
 						{/if}

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

@@ -122,7 +122,7 @@
 			onkeydown={handle_keydown}
 			oninput={validate_input}
 			type="text"
-			class=" outline-none py-2 px-3 transition-all duration-100 flex-grow group"
+			class=" outline-none py-2 px-3 transition-all duration-100 grow group"
 			{placeholder}
 		/>
 		{#if extension}

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

@@ -14,7 +14,6 @@
 		is_display_name_taken,
 		remove_display
 	} from '$lib/ts/stores/displays';
-	import { text } from '@sveltejs/kit';
 	import { notifications } from '$lib/ts/stores/notification';
 	import { ping_ip } from '$lib/ts/api_handler';
 	import { onMount } from 'svelte';

control/frontend/src/routes/ControlView.svelte

@@ -11,7 +11,6 @@
 		TextAlignStart,
 		TrafficCone
 	} from 'lucide-svelte';
-	import { onMount } from 'svelte';
 	import Button from '$lib/components/Button.svelte';
 	import PopUp from '$lib/components/PopUp.svelte';
 	import type { PopupContent } from '$lib/ts/types';

control/frontend/src/routes/DisplayView.svelte

@@ -150,7 +150,7 @@
 									/>
 								</div>
 								<Button
-									className="aspect-square !p-1"
+									className="aspect-square p-1!"
 									bg="bg-stone-600"
 									click_function={(e) => {
 										e.stopPropagation();
@@ -162,7 +162,7 @@
 
 								<Button
 									title="Bildschirm nicht mehr anpinnen"
-									className="aspect-square !p-1"
+									className="aspect-square p-1!"
 									bg="bg-stone-600"
 									click_function={close_pinned_display}
 								>
@@ -218,7 +218,7 @@
 						<div class="flex flex-row">
 							<Button
 								title="Bildschirme größer darstellen"
-								className="aspect-square !p-1 rounded-r-none"
+								className="aspect-square p-1! rounded-r-none"
 								bg="bg-stone-600"
 								disabled={!Boolean(next_height_step_size('display', $current_height, 1))}
 								click_function={() => {
@@ -229,7 +229,7 @@
 							</Button>
 							<Button
 								title="Bildschirme kleiner darstellen"
-								className="aspect-square !p-1 rounded-l-none"
+								className="aspect-square p-1! rounded-l-none"
 								bg="bg-stone-600"
 								disabled={!Boolean(next_height_step_size('display', $current_height, -1))}
 								click_function={() => {
@@ -263,7 +263,7 @@
 						{#if ($display_groups || []).length === 0}
 							<div class="text-stone-500 px-10 py-6 leading-relaxed text-center">
 								Es wurden noch keine Bildschirme hinzugefügt. Klicke oben rechts auf
-								<HighlightedText fg="text-stone-450" className="!p-1"
+								<HighlightedText fg="text-stone-450" className="p-1!"
 									><Settings class="inline pb-1" /></HighlightedText
 								>
 								und

control/frontend/src/routes/FileView.svelte

@@ -246,7 +246,7 @@
 		<div class="flex flex-ro">
 			<Button
 				title="Dateien größer darstellen"
-				className="aspect-square !p-1 rounded-r-none"
+				className="aspect-square p-1! rounded-r-none"
 				bg="bg-stone-600"
 				disabled={!Boolean(next_height_step_size('file', $current_height, 1))}
 				click_function={() => {
@@ -257,7 +257,7 @@
 			</Button>
 			<Button
 				title="Dateien kleiner darstellen"
-				className="aspect-square !p-1 rounded-l-none"
+				className="aspect-square p-1! rounded-l-none"
 				bg="bg-stone-600"
 				disabled={!Boolean(next_height_step_size('file', $current_height, -1))}
 				click_function={() => {
@@ -349,7 +349,7 @@
 								: 'den ausgewählten Bildschirmen'} im aktuellen Ordner. Klicke auf <HighlightedText
 								bg="bg-stone-700"
 								fg="text-stone-400"
-								className="!p-1"><Upload class="inline pb-1" /></HighlightedText
+								className="p-1!"><Upload class="inline pb-1" /></HighlightedText
 							> um Datei(en) hochzuladen.
 						</span>
 					{/if}