Fix inconsistent naming and empty displaygroup visual bug

control/frontend/src/components/ControlView.svelte

@@ -8,7 +8,7 @@
 
 <div class="grid grid-rows-[2.5rem_auto] bg-stone-800 rounded-2xl min-w-0">
 	<div class="text-xl font-bold pl-3 content-center bg-stone-700 rounded-t-2xl truncate min-w-0">
-		{'Bildschirme steuern (' + $selected_display_ids.length + ' ausgewählt)'}
+		Bildschirme steuern
 	</div>
 	<div class="flex flex-col gap-2 p-2 overflow-auto">
 		<div class="flex flex-row justify-between gap-2">

control/frontend/src/components/DisplayView.svelte

@@ -20,14 +20,16 @@
 	import Button from './Button.svelte';
 	import OnlineState from './OnlineState.svelte';
 	import { cubicOut } from 'svelte/easing';
-	import { Menu, Minus, Pencil, PinOff, Plus, Trash2, VideoOff } from 'lucide-svelte';
+	import { Menu, Minus, Pencil, PinOff, Plus, Settings, Trash2, VideoOff } from 'lucide-svelte';
 	import { selected_display_ids } from '../ts/stores/select';
 	import { dragHandleZone } from 'svelte-dnd-action';
 	import { flip } from 'svelte/animate';
 	import DisplayGroupObject from './DisplayGroupObject.svelte';
 
 	let displays_scroll_box: HTMLElement;
-	let pinned_display: Display | null = $derived(get_display_by_id($pinned_display_id || '', $displays));
+	let pinned_display: Display | null = $derived(
+		get_display_by_id($pinned_display_id || '', $displays)
+	);
 
 	function select_all(current_displays: DisplayGroup[], current_selected_display_ids: string[]) {
 		const new_value = !all_selected(current_displays, current_selected_display_ids);
@@ -136,7 +138,7 @@
 		<!-- Normal Heading Left -->
 		<div class="bg-stone-700 flex justify-between w-full p-1 gap-2 min-w-0">
 			<span class="text-xl font-bold pl-2 content-center truncate min-w-0">
-				Bereits verbundene Displays
+				Verbundene Bildschirme
 			</span>
 			<div class="flex flex-row gap-1">
 				<button
@@ -202,16 +204,23 @@
 					$is_group_drag = false;
 				}}
 			>
-				{#each $displays as display_group (display_group.id)}
+				{#if $displays.length === 1 && $displays[0].data.length === 0}
-					<!-- Each Group -->
+					<div class="text-stone-500 px-10 py-6 leading-relaxed text-center">
-					<section
+						Es wurden noch keine Bildschirme hinzugefügt. Klicke oben rechts auf <Settings class="inline pb-1"/> und "Neuen
-						out:scale={{ duration: dnd_flip_duration_ms, easing: cubicOut }}
+						Bildschirm hinzufügen".
-						animate:flip={{ duration: dnd_flip_duration_ms, easing: cubicOut }}
+					</div>
-						class="outline-none"
+				{:else}
-					>
+					{#each $displays as display_group (display_group.id)}
-						<DisplayGroupObject {display_group} />
+						<!-- Each Group -->
-					</section>
+						<section
-				{/each}
+							out:scale={{ duration: dnd_flip_duration_ms, easing: cubicOut }}
+							animate:flip={{ duration: dnd_flip_duration_ms, easing: cubicOut }}
+							class="outline-none"
+						>
+							<DisplayGroupObject {display_group} />
+						</section>
+					{/each}
+				{/if}
 			</div>
 		</div>
 	</div>

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

@@ -122,7 +122,7 @@
 {/snippet}
 
 <main class="bg-stone-900 h-dvh w-dvw text-stone-200 px-4 py-2 gap-2 grid grid-rows-[3rem_auto]">
-	<!-- {@html SplashScreen} -->
+	{@html SplashScreen}
 
 	<div class="w-[calc(100dvw-(8*var(--spacing)))] flex justify-between">
 		<span class="text-4xl font-bold content-center pl-1"> PLG MuDiCS </span>