refactor(control): add HighlightedText

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>