refactor(control): add HighlightedText

control/frontend/package-lock.json

@@ -5360,8 +5360,7 @@
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.14.tgz",
 			"integrity": "sha512-b7pCxjGO98LnxVkKjaZSDeNuljC4ueKUddjENJOADtubtdo8llTaJy7HwBMeLNSSo2N5QIAgklslK1+Ir8r6CA==",
 			"dev": true,
-			"license": "MIT",
-			"peer": true
+			"license": "MIT"
 		},
 		"node_modules/tapable": {
 			"version": "2.3.0",

control/frontend/src/components/Button.svelte

@@ -154,7 +154,7 @@
 			transition:fade={{ duration: 50 }}
 			class="absolute {position_bottom
 				? 'top-full'
-				: 'bottom-full'} {menu_class} z-100 my-1.5 min-w-64 rounded-xl backdrop-blur bg-black/20 border border-stone-400/10 shadow-xl/20 p-2 flex flex-col gap-2 text-stone-200 cursor-auto"
+				: 'bottom-full'} {menu_class} z-100 my-1.5 min-w-64 rounded-xl backdrop-blur bg-stone-800/45 border border-stone-400/10 shadow-xl/20 p-2 flex flex-col gap-2 text-stone-200 cursor-auto"
 			onclick={(e) => {
 				e.stopPropagation();
 			}}

control/frontend/src/components/DisplayView.svelte

@@ -26,6 +26,7 @@
 	import { flip } from 'svelte/animate';
 	import DisplayGroupObject from './DisplayGroupObject.svelte';
 	import { Pane, Splitpanes } from 'svelte-splitpanes';
+	import HighlightedText from './HighlightedText.svelte';
 
 	let { handle_display_deletion, handle_display_editing } = $props<{
 		handle_display_deletion: (display_id: string) => void;
@@ -104,7 +105,12 @@
 <svelte:window on:wheel={on_wheel} />
 
 <div class="h-[calc(100dvh-3rem-(6*var(--spacing)))] flex flex-col gap-2">
-	<Splitpanes horizontal theme="mudics-stone-theme" on:resized={handle_splitpane_resize} dblClickSplitter={false}>
+	<Splitpanes
+		horizontal
+		theme="mudics-stone-theme"
+		on:resized={handle_splitpane_resize}
+		dblClickSplitter={false}
+	>
 		{#if $pinned_display_id}
 			<!-- Pinned Item -->
 			<Pane maxSize={60} snapSize={20} bind:size={pinned_pane_size}>
@@ -245,9 +251,10 @@
 					>
 						{#if $displays.length === 1 && $displays[0].data.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 <Settings
-									class="inline pb-1"
-								/> und "Neuen Bildschirm hinzufügen".
+								Es wurden noch keine Bildschirme hinzugefügt. Klicke oben rechts auf
+								<HighlightedText fg="text-stone-450" className="!p-1"><Settings class="inline pb-1" /></HighlightedText>
+								und
+								<HighlightedText fg="text-stone-450">Neuen Bildschirm hinzufügen</HighlightedText>.
 							</div>
 						{:else}
 							{#each $displays as display_group (display_group.id)}
@@ -257,7 +264,11 @@
 									animate:flip={{ duration: dnd_flip_duration_ms, easing: cubicOut }}
 									class="outline-none"
 								>
-									<DisplayGroupObject {display_group} {get_display_menu_options} {close_pinned_display} />
+									<DisplayGroupObject
+										{display_group}
+										{get_display_menu_options}
+										{close_pinned_display}
+									/>
 								</section>
 							{/each}
 						{/if}

control/frontend/src/components/FileView.svelte

@@ -23,6 +23,7 @@
 	import type { PopupContent } from '../ts/types';
 	import TextInput from './TextInput.svelte';
 	import { is_valid_name } from '../ts/utils';
+	import HighlightedText from './HighlightedText.svelte';
 
 	let current_name: string = '';
 	let current_valid: boolean = false;
@@ -169,12 +170,14 @@
 						</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
+						<span class="text-stone-450 px-10 py-6 leading-relaxed text-center max-w-full">
+							Es existieren 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.
+								: '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
+							> um Datei(en) hochzuladen.
 						</span>
 					{/if}
 				{/if}

control/frontend/src/components/HighlightedText.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	let {
+		children,
+		bg = 'bg-stone-750',
+		fg = 'text-stone-200',
+		className = ''
+	} = $props<{ children: any; bg?: string; fg?: string; className?: string }>();
+</script>
+
+<div class="{bg} {fg} {className} rounded-lg py-0.5 px-1 inline-block truncate min-w-0 max-w-full align-middle my-[1.5px]">
+	{@render children()}
+</div>

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

@@ -22,6 +22,7 @@
 	import { onMount } from 'svelte';
 	import { on_start } from '../ts/main';
 	import { display_status_to_info } from '../ts/utils';
+	import HighlightedText from '../components/HighlightedText.svelte';
 
 	const ip_regex =
 		/^(?:(?:10|127)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)|192\.168\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)|172\.(?:1[6-9]|2\d|3[0-1])\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d))$/;
@@ -118,9 +119,10 @@
 
 {#snippet remove_display_popup(display_id: string)}
 	<div class="max-w-prose px-2">
-		Soll der Bildschirm "{get_display_by_id(display_id, $displays)?.name || '?'}" wirklich gelöscht
-		werden? Dadurch wird es von diesem Controller nicht mehr erreichbar. Die Installation auf dem
-		Gerät bleibt bestehen. Mit dem erneuten Hinzufügen des Bildschirms wird er wieder steuerbar.
+		Soll der Bildschirm <HighlightedText
+			>{get_display_by_id(display_id, $displays)?.name || '?'}</HighlightedText
+		> wirklich gelöscht werden? Dadurch wird es von diesem Controller nicht mehr erreichbar. Die Installation
+		auf dem Gerät bleibt bestehen. Mit dem erneuten Hinzufügen des Bildschirms wird er wieder steuerbar.
 	</div>
 	<div class="flex flex-row justify-end gap-2">
 		<Button className="px-4 font-bold" click_function={popup_close_function}>Abbrechen</Button>
@@ -216,11 +218,6 @@
 	</div>
 {/snippet}
 
-<style>
-	:root {
-		--splash-fade-out-delay: 4s !important;
-	}
-</style>
 
 <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} -->
@@ -258,5 +255,11 @@
 			<FileView />
 		</div>
 	</div>
-	<PopUp content={popup_content} close_function={popup_close_function} className="bg-white/10" snippet_container_class="min-w-115" />
+	<PopUp
+		content={popup_content}
+		close_function={popup_close_function}
+		className="bg-white/10"
+		snippet_container_class="min-w-115"
+	/>
 </main>
+