improve ux design with disabled buttons and info texts while no display is selected

control/frontend/src/components/ControlView.svelte

@@ -17,6 +17,7 @@
 	import KeyInput from './KeyInput.svelte';
 	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';
 
 	let popup_content: PopupContent = $state({
 		open: false,
@@ -60,6 +61,7 @@
 					<Button
 						title="Vorherige Folie (Pfeil nach Links)"
 						className="px-9"
+						disabled={$selected_display_ids.length === 0}
 						click_function={() => {
 							run_on_all_selected_displays(
 								() => {
@@ -73,6 +75,7 @@
 					<Button
 						title="Nächste Folie (Pfeil nach Rechts)"
 						className="px-9"
+						disabled={$selected_display_ids.length === 0}
 						click_function={() => {
 							run_on_all_selected_displays(
 								() => {
@@ -84,36 +87,45 @@
 						}}><ArrowBigRight /></Button
 					>
 				</div>
-				<Button className="px-3 flex gap-3 w-75 justify-normal"
+				<Button
-					><TextAlignStart /> Text anzeigen</Button
+					className="px-3 flex gap-3 w-75 justify-normal"
+					disabled={$selected_display_ids.length === 0}><TextAlignStart /> Text anzeigen</Button
 				>
 				<Button
 					className="px-3 flex gap-3 w-75 justify-normal"
+					disabled={$selected_display_ids.length === 0}
 					click_function={() => {
 						run_on_all_selected_displays(show_blackscreen, true);
 					}}><Presentation />Blackout</Button
 				>
 				<div class="flex flex-row justify-normal">
-					<Button className="rounded-r-none pl-3 flex gap-3 grow w-65 justify-normal"
+					<Button
+						className="rounded-r-none pl-3 flex gap-3 grow w-65 justify-normal"
+						disabled={$selected_display_ids.length === 0}
 						><TrafficCone /> Fallback-Bild anzeigen</Button
 					>
 					<Button className="rounded-l-none flex grow-0 w-10"><ChevronDown /></Button>
 				</div>
 				<Button
 					className="px-3 flex gap-3 w-75 justify-normal"
+					disabled={$selected_display_ids.length === 0}
 					click_function={show_send_keys_popup}><Keyboard /> Tastatur-Eingaben durchgeben</Button
 				>
 			</div>
 			<div class="flex flex-col gap-2 justify-between">
 				<div class="flex flex-col gap-2">
-					<Button className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
+					<Button
-						><Power /> PC hochfahren</Button
+						className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
+						disabled={$selected_display_ids.length === 0}><Power /> PC hochfahren</Button
 					>
-					<Button className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
+					<Button
-						><PowerOff /> PC herunterfahren</Button
+						className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
+						disabled={$selected_display_ids.length === 0}><PowerOff /> PC herunterfahren</Button
 					>
 				</div>
-				<Button className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
+				<Button
+					className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
+					disabled={$selected_display_ids.length === 0}
 					><SquareTerminal /> Shell-Befehl ausführen</Button
 				>
 			</div>

control/frontend/src/components/FileView.svelte

@@ -1,14 +1,25 @@
 <script lang="ts">
-	import { ClipboardPaste, Download, FolderPlus, Info, Minus, Pen, Plus, RefreshCcw, Scissors, Trash2, Upload } from "lucide-svelte";
+	import {
-	import { change_height, current_height, next_height_step_size } from "../ts/stores/ui_behavior";
+		ClipboardPaste,
-	import Button from "./Button.svelte";
+		Download,
-	import PathBar from "./PathBar.svelte";
+		FolderPlus,
-	import { selected_display_ids, selected_file_ids } from "../ts/stores/select";
+		Info,
-	import { all_files, current_file_path, get_current_folder_elements } from "../ts/stores/files";
+		Minus,
-	import { slide } from "svelte/transition";
+		Pen,
-	import FolderElementObject from "./FolderElementObject.svelte";
+		Plus,
-	import PopUp from "./PopUp.svelte";
+		RefreshCcw,
-
+		Scissors,
+		Trash2,
+		Upload
+	} from 'lucide-svelte';
+	import { change_height, current_height, next_height_step_size } from '../ts/stores/ui_behavior';
+	import Button from './Button.svelte';
+	import PathBar from './PathBar.svelte';
+	import { selected_display_ids, selected_file_ids } from '../ts/stores/select';
+	import { all_files, current_file_path, get_current_folder_elements } from '../ts/stores/files';
+	import { slide } from 'svelte/transition';
+	import FolderElementObject from './FolderElementObject.svelte';
+	import PopUp from './PopUp.svelte';
 </script>
 
 <div class="bg-stone-800 h-full rounded-2xl grid grid-rows-[2.5rem_1fr] min-h-0">
@@ -92,11 +103,26 @@
 		</div>
 		<div class="min-h-0 h-full overflow-y-auto bg-stone-750 rounded-xl">
 			<div class="flex flex-col gap-2 p-2 min-h-0">
+				{#if $selected_display_ids.length === 0}
+					<span class="text-stone-450 px-10 py-6 leading-relaxed text-center">
+						Es wurden keine Bildschirme ausgewählt.
+					</span>
+				{:else}
 					{#each get_current_folder_elements($all_files, $current_file_path, $selected_display_ids) as folder_element (folder_element.id)}
 						<section in:slide={{ duration: 100 }} class="outline-none">
 							<FolderElementObject file={folder_element} />
 						</section>
 					{/each}
+					{#if get_current_folder_elements($all_files, $current_file_path, $selected_display_ids).length === 0}
+						<span class="text-stone-450 px-10 py-6 leading-relaxed text-center">
+							Es sind keine Dateien auf {$selected_display_ids.length === 1
+								? 'dem ausgewähltem Bildchirm'
+								: 'den ausgewählten Bildschirmen'} vorhanden. Klicke auf <Upload
+								class="inline pb-1"
+							/> um Datei(en) hochzuladen.
+						</span>
+					{/if}
+				{/if}
 			</div>
 		</div>
 		<!-- <PopUp title="Test" title_icon={Info}>