From e7588ce2d2f658832c6f2dcc1c73384f12b66fb0 Mon Sep 17 00:00:00 2001
From: E44 <129310925+programmer-44@users.noreply.github.com>
Date: Sat, 8 Nov 2025 22:15:33 +0100
Subject: [PATCH] improve ux design with disabled buttons and info texts while
 no display is selected

---
 .../src/components/ControlView.svelte         | 28 +++++++---
 .../frontend/src/components/FileView.svelte   | 56 ++++++++++++++-----
 2 files changed, 61 insertions(+), 23 deletions(-)

diff --git a/control/frontend/src/components/ControlView.svelte b/control/frontend/src/components/ControlView.svelte
index 9900a53..c6c97c2 100644
--- a/control/frontend/src/components/ControlView.svelte
+++ b/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"
-					><TextAlignStart /> Text anzeigen</Button
+				<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"
-						><Power /> PC hochfahren</Button
+					<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"
-						><PowerOff /> PC herunterfahren</Button
+					<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>
diff --git a/control/frontend/src/components/FileView.svelte b/control/frontend/src/components/FileView.svelte
index 22772ba..b422d44 100644
--- a/control/frontend/src/components/FileView.svelte
+++ b/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 { 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";
-
+	import {
+		ClipboardPaste,
+		Download,
+		FolderPlus,
+		Info,
+		Minus,
+		Pen,
+		Plus,
+		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">
-				{#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 $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}>