bump to version v0.0.13

Co-authored-by: 2mal3 <56305732+2mal3@users.noreply.github.com>

README.md

@@ -6,14 +6,7 @@ Open source solution for advanced remote control and coordination of one or more
 
 ## Display Requirements
 
-- Linux
+See [packages in the NixOS config](https://github.com/PLG-Development/PLG-MuDiCS/blob/b0a57f9c679e8c483d1a81cb3c749cf8555785f6/nixos/configuration.nix#L86).
-- Bash
-- Chromium
-- LibreOffice (optional, presentation view)
-- Xreader (optional, pdf view)
-- ImageMagick (optional, image preview)
-- ffmpeg (optional, video preview)
-- Ghostscript (optional, pdf preview)
 
 ## Contributing
 

control/frontend/package.json

@@ -16,40 +16,40 @@
 		"test": "deno task test:e2e"
 	},
 	"devDependencies": {
-		"@eslint/compat": "^1.2.5",
+		"@eslint/compat": "^1.4.1",
-		"@eslint/js": "^9.18.0",
+		"@eslint/js": "^9.39.2",
 		"@playwright/test": "1.56.1",
-		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/adapter-auto": "^6.1.1",
-		"@sveltejs/adapter-static": "^3.0.9",
+		"@sveltejs/adapter-static": "^3.0.10",
-		"@sveltejs/kit": "^2.22.0",
+		"@sveltejs/kit": "^2.49.3",
-		"@sveltejs/vite-plugin-svelte": "^6.0.0",
+		"@sveltejs/vite-plugin-svelte": "^6.2.3",
-		"@tailwindcss/vite": "^4.0.0",
+		"@tailwindcss/vite": "^4.1.18",
-		"@tiptap/extension-placeholder": "^3.11.0",
+		"@tiptap/extension-placeholder": "^3.15.3",
-		"eslint": "^9.18.0",
+		"eslint": "^9.39.2",
-		"eslint-config-prettier": "^10.0.1",
+		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.0.0",
+		"eslint-plugin-svelte": "^3.14.0",
-		"globals": "^16.0.0",
+		"globals": "^16.5.0",
-		"prettier": "^3.4.2",
+		"prettier": "^3.7.4",
-		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-svelte": "^3.4.1",
-		"sass-embedded": "^1.93.3",
+		"sass-embedded": "^1.97.2",
-		"svelte": "^5.0.0",
+		"svelte": "^5.46.1",
 		"svelte-check": "^4.3.5",
-		"svelte-dnd-action": "^0.9.65",
+		"svelte-dnd-action": "^0.9.69",
-		"tailwindcss": "^4.0.0",
+		"tailwindcss": "^4.1.18",
-		"typescript": "^5.0.0",
+		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.20.0",
+		"typescript-eslint": "^8.52.0",
-		"vite": "^7.0.4"
+		"vite": "^7.3.1"
 	},
 	"dependencies": {
 		"@thisux/sveltednd": "^0.0.20",
-		"@tiptap/core": "^3.11.0",
+		"@tiptap/core": "^3.15.3",
-		"@tiptap/extension-highlight": "^3.11.0",
+		"@tiptap/extension-highlight": "^3.15.3",
-		"@tiptap/extension-text-style": "^3.11.0",
+		"@tiptap/extension-text-style": "^3.15.3",
-		"@tiptap/extensions": "^3.11.0",
+		"@tiptap/extensions": "^3.15.3",
-		"@tiptap/pm": "^3.11.0",
+		"@tiptap/pm": "^3.15.3",
-		"@tiptap/starter-kit": "^3.11.0",
+		"@tiptap/starter-kit": "^3.15.3",
 		"dexie": "^4.2.1",
 		"lucide-svelte": "^0.545.0",
-		"svelte-splitpanes": "^8.0.9"
+		"svelte-splitpanes": "^8.0.12"
 	}
 }

control/frontend/src/app.css

@@ -26,7 +26,7 @@
 	}
 }
 
-main {
+html {
 	scrollbar-width: thin;
 	scrollbar-color: var(--color-stone-300) transparent;
 }

control/frontend/src/lib/components/DisplayGroupObject.svelte

@@ -11,22 +11,25 @@
 	import DisplayObject from './DisplayObject.svelte';
 	import {
 		all_displays_of_group_selected,
-		get_display_ids_in_group,
 		set_select_for_group,
+		update_db_displays,
+		local_displays,
 		set_new_display_order
 	} from '$lib/ts/stores/displays';
 	import DNDGrip from '$lib/components/DNDGrip.svelte';
 	import { fade } from 'svelte/transition';
-	import type { MenuOption } from '$lib/ts/types';
+	import type { Display, DisplayIdGroup, MenuOption } from '$lib/ts/types';
 	import { selected_display_ids } from '$lib/ts/stores/select';
 	import { liveQuery, type Observable } from 'dexie';
+	import { onMount } from 'svelte';
+	import { get_uuid } from '$lib/ts/utils';
 
 	let {
-		display_group_id,
+		display_id_group,
 		get_display_menu_options,
 		close_pinned_display
 	}: {
-		display_group_id: string;
+		display_id_group: DisplayIdGroup;
 		get_display_menu_options: (display_id: string) => MenuOption[];
 		close_pinned_display: () => void;
 	} = $props();
@@ -34,14 +37,14 @@
 	let all_selected: Observable<boolean> | undefined = $state();
 	$effect(() => {
 		const sdi = $selected_display_ids;
-		all_selected = liveQuery(() => all_displays_of_group_selected(display_group_id, sdi));
+		all_selected = liveQuery(() => all_displays_of_group_selected(display_id_group.id, sdi));
 	});
-	let display_ids_in_group = liveQuery(() => get_display_ids_in_group(display_group_id));
+
 	let hovering_selectable = $state(false);
 
 	async function select_all_of_this_group() {
 		const new_value = !($all_selected || false);
-		await set_select_for_group(display_group_id, new_value);
+		await set_select_for_group(display_id_group.id, new_value);
 	}
 
 	async function handle_consider(e: CustomEvent) {
@@ -49,14 +52,21 @@
 
 		if (items.length !== 1 && info.trigger === TRIGGERS.DRAG_STARTED) {
 			$is_display_drag = true;
-			// add_empty_display_group();
+			// add empty display group if its not just one group
+			if (!($local_displays.length === 1 && $local_displays[0].displays.length === 1)) {
+				$local_displays.push({
+					id: get_uuid(),
+					displays: []
+				});
+			}
 		}
-		await set_new_display_order(items);
+		set_new_display_order(display_id_group.id, items);
 	}
 
 	async function handle_finalize(e: CustomEvent) {
+		set_new_display_order(display_id_group.id, e.detail.items);
+		await update_db_displays();
 		$is_display_drag = false;
-		await set_new_display_order(e.detail.items);
 	}
 </script>
 
@@ -77,7 +87,7 @@
 	<div
 		class="flex flex-col min-w-0 pl-2 py-2 gap-2 w-full"
 		use:dragHandleZone={{
-			items: $display_ids_in_group || [],
+			items: display_id_group.displays,
 			type: 'item',
 			flipDurationMs: dnd_flip_duration_ms,
 			dropTargetStyle: { outline: 'none' }
@@ -85,18 +95,15 @@
 		onconsider={handle_consider}
 		onfinalize={handle_finalize}
 	>
-		{#each $display_ids_in_group || [] as display (display.id)}
+		{#each display_id_group.displays as display_id_object (display_id_object.id)}
 			<!-- Each Group -->
-			<section
+			<section class="outline-none" role="figure">
-				animate:flip={{ duration: $is_group_drag ? 0 : dnd_flip_duration_ms, easing: cubicOut }}
+				<!-- animate:flip={{ duration: $is_group_drag ? 0 : dnd_flip_duration_ms, easing: cubicOut }} -->
-				class="outline-none"
+				<DisplayObject {display_id_object} {get_display_menu_options} {close_pinned_display} />
-				role="figure"
-			>
-				<DisplayObject {display} {get_display_menu_options} {close_pinned_display} />
 			</section>
 		{/each}
 
-		{#if ($display_ids_in_group || []).length === 0}
+		{#if display_id_group.displays.length === 0}
 			<div class="min-h-10 h-full w-full pl-2 py-2 flex justify-center items-center">
 				Hier in leere neue Gruppe ablegen
 			</div>

control/frontend/src/lib/components/DisplayObject.svelte

@@ -8,38 +8,40 @@
 	import DNDGrip from '$lib/components/DNDGrip.svelte';
 	import { Menu, Pin, PinOff, VideoOff } from 'lucide-svelte';
 	import OnlineState from './OnlineState.svelte';
-	import type { Display, MenuOption } from '$lib/ts/types';
+	import type { Display, DisplayIdObject, MenuOption } from '$lib/ts/types';
 	import { is_selected, select, selected_display_ids } from '$lib/ts/stores/select';
-	import { screenshot_loop } from '$lib/ts/stores/displays';
+	import { get_display_by_id, screenshot_loop } from '$lib/ts/stores/displays';
 	import { change_file_path, current_file_path } from '$lib/ts/stores/files';
+	import { liveQuery } from 'dexie';
 
 	let {
-		display,
+		display_id_object,
 		get_display_menu_options,
 		close_pinned_display
 	}: {
-		display: Display;
+		display_id_object: DisplayIdObject;
 		get_display_menu_options: (display_id: string) => MenuOption[];
 		close_pinned_display: () => void;
 	} = $props();
 
 	let hovering_unselectable = $state(false);
+	let display = liveQuery(() => get_display_by_id(display_id_object.id));
 
 	async function onclick(e: Event) {
 		e.stopPropagation();
-		select(selected_display_ids, display.id, 'toggle');
+		select(selected_display_ids, display_id_object.id, 'toggle');
 
 		// force file view update
 		await change_file_path($current_file_path);
 	}
 
 	async function on_preview_click(e: MouseEvent) {
-		if ($pinned_display_id === display.id) {
+		if ($pinned_display_id === display_id_object.id) {
 			close_pinned_display();
 		} else {
-			$pinned_display_id = display.id;
+			$pinned_display_id = display_id_object.id;
 		}
-		await screenshot_loop(display.id);
+		await screenshot_loop(display_id_object.id);
 		e.stopPropagation();
 	}
 </script>
@@ -52,7 +54,7 @@
 		if (e.key === 'Enter' || e.key === ' ') onclick(e);
 	}}
 	{onclick}
-	class="p-1 {get_selectable_color_classes(is_selected(display.id, $selected_display_ids), {
+	class="p-1 {get_selectable_color_classes(is_selected(display_id_object.id, $selected_display_ids), {
 		bg: true,
 		hover: true,
 		active: !hovering_unselectable,
@@ -68,12 +70,12 @@
 			onclick={on_preview_click}
 		>
 			<div class="flex h-full w-full items-center justify-center">
-				{#if $pinned_display_id === display.id}
+				{#if $pinned_display_id === display_id_object.id}
 					<div class="size-[50%]">
 						<Pin class="size-full" />
 					</div>
-				{:else if display.preview.url}
+				{:else if $display && $display.preview.url}
-					<img src={display.preview.url} alt="preview" class="w-full object-cover bg-black" />
+					<img src={$display.preview.url} alt="preview" class="w-full object-cover bg-black" />
 				{:else}
 					<!-- No Signal -->
 					<div class="size-full bg-black flex justify-center items-center">
@@ -84,11 +86,11 @@
 
 			<!-- Hover Effect -->
 			<span
-				class="pointer-events-none absolute inset-0 {$pinned_display_id === display.id
+				class="pointer-events-none absolute inset-0 {$pinned_display_id === display_id_object.id
 					? 'bg-stone-700'
 					: 'bg-stone-700/70'} opacity-0 transition-opacity duration-200 flex items-center justify-center group-hover:opacity-100"
 			>
-				{#if $pinned_display_id === display.id}
+				{#if $pinned_display_id === display_id_object.id}
 					<PinOff class="size-[50%]" aria-hidden="true" />
 				{:else}
 					<Pin class="size-[50%]" aria-hidden="true" />
@@ -100,20 +102,20 @@
 			class="h-full flex flex-col justify-center gap-1 select-none
                 min-w-0 basis-0 flex-1"
 		>
-			<div class="text-xl font-bold truncate w-full" title={display.name}>
+			<div class="text-xl font-bold truncate w-full" title={$display?.name ?? ''}>
-				{display.name}
+				{$display?.name ?? ''}
 			</div>
 
 			<OnlineState
-				selected={is_selected(display.id, $selected_display_ids)}
+				selected={is_selected(display_id_object.id, $selected_display_ids)}
-				status={display.status}
+				status={$display?.status ?? null}
 			/>
 		</div>
 	</div>
 	<!-- Right Controls -->
 	<div class="flex flex-row h-full items-center gap-2 pr-3">
 		<DNDGrip
-			bg={get_selectable_color_classes(is_selected(display.id, $selected_display_ids), {
+			bg={get_selectable_color_classes(is_selected(display_id_object.id, $selected_display_ids), {
 				bg: true
 			})}
 		/>
@@ -125,16 +127,16 @@
 		>
 			<Button
 				bg="bg-transparent"
-				hover_bg={get_selectable_color_classes(is_selected(display.id, $selected_display_ids), {
+				hover_bg={get_selectable_color_classes(is_selected(display_id_object.id, $selected_display_ids), {
 					bg: true
 				})}
-				active_bg={get_selectable_color_classes(is_selected(display.id, $selected_display_ids), {
+				active_bg={get_selectable_color_classes(is_selected(display_id_object.id, $selected_display_ids), {
 					bg: true
 				})}
 				click_function={(e) => {
 					e.stopPropagation();
 				}}
-				menu_options={get_display_menu_options(display.id)}
+				menu_options={get_display_menu_options(display_id_object.id)}
 			>
 				<Menu />
 			</Button>

control/frontend/src/lib/components/TextInput.svelte

@@ -61,7 +61,7 @@
 	}
 
 	function handle_keydown(event: KeyboardEvent) {
-		if (event.key !== 'Enter') return;
+		if (event.key !== 'Enter' || !current_valid) return;
 
 		if (enter_mode === 'focus_next') {
 			event.preventDefault();

control/frontend/src/lib/ts/api_handler.ts

@@ -22,7 +22,10 @@ export async function open_file(ip: string, path_to_file: string): Promise<void>
 	await request_display(ip, get_sanitized_file_url(path_to_file), options);
 }
 
-export async function send_keyboard_input(ip: string, inputs: { key: string; action: 'press' | 'release'}[]): Promise<void> {
+export async function send_keyboard_input(
+	ip: string,
+	inputs: { key: string; action: 'press' | 'release' }[]
+): Promise<void> {
 	const options = {
 		method: 'PATCH',
 		headers: { 'content-type': 'application/json' },
@@ -294,7 +297,7 @@ async function run_shell_command(ip: string, command: string): Promise<RequestRe
 }
 
 export async function shutdown(ip: string): Promise<RequestResponse> {
-	return await run_shell_command(ip, 'shutdown -h now');
+	return await run_shell_command(ip, 'xfce4-session-logout --halt');
 }
 
 export async function startup(mac: string): Promise<RequestResponse> {

control/frontend/src/lib/ts/file_transfer_handler.ts

@@ -199,19 +199,10 @@ function generate_valid_file_name(original_file_name: string, used_file_names: s
 
 async function upload(task: FileTransferTask): Promise<void> {
 	const task_data = task.data;
-	if (task_data.type !== 'upload' || !task_data.file) return console.warn('Task cancelled: wrong task type:', task);
+	if (task_data.type !== 'upload' || !task_data.file)
+		return console.warn('Task cancelled: wrong task type:', task);
 
 	await upload_file_via_xhr(task, task.display, task_data.file);
-
-	// Generate Thumbnail if not done already
-	setTimeout(async () => {
-		const inode_element: Inode | undefined = await db.files.get(
-			JSON.parse(task.file_primary_key) as [string, string, number, string]
-		);
-		if (!!inode_element && inode_element.thumbnail === null) {
-			await generate_thumbnail(task.display.ip, task.path, inode_element);
-		}
-	}, 10);
 }
 
 export async function sync(task: FileTransferTask) {
@@ -254,7 +245,7 @@ export async function sync(task: FileTransferTask) {
 		await writable.close();
 
 		// 02 - send downloaded file to every destination_display
-		const temp_file = await file_handle.getFile(); 
+		const temp_file = await file_handle.getFile();
 
 		for (const current_short_display of task.data.destination_displays) {
 			await upload_file_via_xhr(task, current_short_display, temp_file);
@@ -271,7 +262,8 @@ export async function download_file(selected_file_id: string, selected_display_i
 		selected_file_id,
 		selected_display_ids
 	);
-	if (!file_data || file_data.file.type === 'inode/directory') return console.warn('Download cancelled: is folder');
+	if (!file_data || file_data.file.type === 'inode/directory')
+		return console.warn('Download cancelled: is folder');
 
 	try {
 		const url = `http://${file_data.short_display_with_file.ip}:1323/api${get_sanitized_file_url(file_data.file.path + file_data.file.name)}`;
@@ -301,12 +293,10 @@ async function start_task_processing() {
 
 async function start_task_loop() {
 	while (tasks.length > 0) {
-		console.log('NOCH', tasks.length, 'ZU TUN');
 		const current_task = tasks[0];
 		if (current_task.data.type === 'upload') {
 			await upload(current_task);
-		}
+		} else if (current_task.data.type === 'sync') {
-		else if (current_task.data.type === 'sync') {
 			await sync(current_task);
 		}
 		tasks.shift(); // Remove current_task from tasks
@@ -314,8 +304,13 @@ async function start_task_loop() {
 	is_processing = false;
 }
 
-async function upload_file_via_xhr(task: FileTransferTask, current_short_display: ShortDisplay, current_file: File) {
+async function upload_file_via_xhr(
+	task: FileTransferTask,
+	current_short_display: ShortDisplay,
+	current_file: File
+) {
 	const start_time = new Date();
+	const loading_type = task.data.type === 'upload' ? 'upload' : 'sync_upload';
 
 	return new Promise<void>((resolve) => {
 		const xhr = new XMLHttpRequest();
@@ -328,7 +323,13 @@ async function upload_file_via_xhr(task: FileTransferTask, current_short_display
 
 		xhr.upload.onprogress = (e) => {
 			const apply = async () => {
-				await update_current_loading_data(task.data.type === 'upload' ? 'upload' : 'sync_upload', task, e.loaded, start_time, current_short_display.id);
+				await update_current_loading_data(
+					loading_type,
+					task,
+					e.loaded,
+					start_time,
+					current_short_display.id
+				);
 			};
 			apply();
 		};
@@ -341,9 +342,20 @@ async function upload_file_via_xhr(task: FileTransferTask, current_short_display
 		xhr.onreadystatechange = async () => {
 			if (xhr.readyState === 4) {
 				if (xhr.status == 200) {
-					await db.files_on_display.update([current_short_display.ip, task.file_primary_key], {
+					// set loading_data to 100%
+					await db.files_on_display.update([current_short_display.id, task.file_primary_key], {
+						date_created: new Date(),
 						loading_data: null
-					}); // TODO: Stattdessen update machen und gucken, ob die Datei wirklich da ist
+					});
+					// Generate Thumbnail if not done already
+					setTimeout(async () => {
+						const inode_element: Inode | undefined = await db.files.get(
+							JSON.parse(task.file_primary_key) as [string, string, number, string]
+						);
+						if (!!inode_element && inode_element.thumbnail === null) {
+							await generate_thumbnail(task.display.ip, task.path, inode_element);
+						}
+					}, 10);
 				} else {
 					await show_error(task, `HTTP ${xhr.status}`);
 				}
@@ -352,21 +364,33 @@ async function upload_file_via_xhr(task: FileTransferTask, current_short_display
 		};
 
 		xhr.send(current_file);
-	})
+	});
 }
 
-async function update_current_loading_data(type: FileLoadingData['type'], task: FileTransferTask, current_bytes: number, start_time: Date, other_display_id: string | null = null) {
+async function update_current_loading_data(
-	const current_percentage = task.bytes_total > 0 ? Math.round((current_bytes / task.bytes_total) * 100) : 1;
+	type: FileLoadingData['type'],
+	task: FileTransferTask,
+	current_bytes: number,
+	start_time: Date,
+	other_display_id: string | null = null
+) {
+	const current_percentage = Math.min(
+		task.bytes_total > 0 ? Math.round((current_bytes / task.bytes_total) * 100) : 1,
+		99
+	); // calculate percantage, but maximum value is 99%
 	const prognosed_data = get_prognosed_data(start_time, current_bytes, task.bytes_total);
 
-	await db.files_on_display.update([other_display_id ? other_display_id : task.display.id, task.file_primary_key], {
+	await db.files_on_display.update(
-		loading_data: {
+		[other_display_id ? other_display_id : task.display.id, task.file_primary_key],
-			type,
+		{
-			percentage: current_percentage,
+			loading_data: {
-			bytes_per_second: prognosed_data.bytes_per_second,
+				type,
-			seconds_until_finish: prognosed_data.seconds_until_finish
+				percentage: current_percentage,
+				bytes_per_second: prognosed_data.bytes_per_second,
+				seconds_until_finish: prognosed_data.seconds_until_finish
+			}
 		}
-	});
+	);
 }
 
 function get_prognosed_data(

control/frontend/src/lib/ts/stores/displays.ts

@@ -1,10 +1,19 @@
-import { get } from 'svelte/store';
+import { get, writable, type Writable } from 'svelte/store';
-import type { Display, DisplayGroup, DisplayStatus } from '../types';
+import type {
+	Display,
+	DisplayGroup,
+	DisplayIdGroup,
+	DisplayIdObject,
+	DisplayStatus
+} from '../types';
 import { is_selected, select, selected_display_ids } from './select';
 import { get_uuid, image_content_hash } from '../utils';
 import { get_screenshot } from '../api_handler';
 import { delete_and_deselect_unique_files_from_display } from './files';
 import { db } from '../database';
+import { dev } from '$app/environment';
+
+export const local_displays: Writable<DisplayIdGroup[]> = writable<DisplayIdGroup[]>([]);
 
 export async function is_display_name_taken(name: string): Promise<boolean> {
 	const exists = await db.displays.where('name').equals(name).first();
@@ -168,30 +177,63 @@ export async function get_display_groups(): Promise<DisplayGroup[]> {
 	return await db.display_groups.orderBy('position').toArray();
 }
 
-export async function get_display_ids_in_group(display_group_id: string): Promise<Display[]> {
+export async function update_local_displays() {
-	const displays: Display[] = await db.displays
+	const display_groups = await db.display_groups.orderBy('position').toArray();
-		.where('group_id')
+	const displays = await db.displays.orderBy('position').toArray();
-		.equals(display_group_id)
+	const out: DisplayIdGroup[] = [];
-		.sortBy('position');
+	for (const group of display_groups) {
-	return displays;
+		out.push({
+			id: group.id,
+			displays: (await displays).filter((d) => d.group_id === group.id).map((d) => ({ id: d.id }))
+		});
+	}
+	return out;
 }
 
-export async function set_new_display_order(new_ordered_items: Display[]) {
+export async function update_db_displays() {
-	for (let i = 0; i < new_ordered_items.length; i++) {
+	local_displays.update((groups) => groups.filter((g) => g.displays.length !== 0));
-		new_ordered_items[i].position = i;
+	const filtered_local_display_groups = get(local_displays)
-		await db.displays.put(new_ordered_items[i]);
+	const db_display_group_ids = (await db.display_groups.toArray()).map((group) => group.id);
+	const local_display_group_ids = filtered_local_display_groups.map((group) => group.id);
+
+	const display_group_ids_to_delete = db_display_group_ids.filter(
+		(group) => !local_display_group_ids.includes(group)
+	);
+	await db.display_groups.where('id').anyOf(display_group_ids_to_delete).delete();
+
+	for (let i = 0; i < filtered_local_display_groups.length; i++) {
+		const group = filtered_local_display_groups[i];
+		if (db_display_group_ids.includes(group.id)) {
+			await db.display_groups.update(group.id, { position: i });
+		} else {
+			await db.display_groups.put({
+				id: group.id,
+				position: i
+			});
+		}
+
+		for (let j = 0; j < group.displays.length; j++) {
+			const display_id = group.displays[j].id;
+			await db.displays.update(display_id, { position: j, group_id: group.id });
+		}
 	}
 }
 
-export async function set_new_display_group_order(new_ordered_items: DisplayGroup[]) {
+export function set_new_display_order(display_id_group_id: string, new_data: DisplayIdObject[]) {
-	for (let i = 0; i < new_ordered_items.length; i++) {
+	local_displays.update((local_displays: DisplayIdGroup[]) => {
-		new_ordered_items[i].position = i;
+		for (const display_id_group of local_displays) {
-		await db.display_groups.put(new_ordered_items[i]);
+			if (display_id_group.id === display_id_group_id) {
-	}
+				display_id_group.displays = new_data;
+			}
+		}
+		return local_displays;
+	});
 }
 
-setTimeout(add_testing_displays, 0);
+if (dev) {
-async function add_testing_displays() {
+	setTimeout(add_testing_displays, 0);
-	await add_display('127.0.0.1', '00:1A:2B:3C:4D:5E', 'PC', 'host_offline');
+	async function add_testing_displays() {
-	// await add_display("192.168.178.111", "D4:81:D7:C0:DF:3C", "Laptop", "host_offline");
+		await add_display('127.0.0.1', '00:1A:2B:3C:4D:5E', 'PC', 'host_offline');
+		// await add_display("192.168.178.111", "D4:81:D7:C0:DF:3C", "Laptop", "host_offline");
+	}
 }

control/frontend/src/lib/ts/stores/files.ts

@@ -125,19 +125,23 @@ export async function get_displays_where_path_exists(
 	const path_without_last_part = path.slice(0, path.length - (last_path_part.length + 1));
 
 	const folders_of_current_path = await db.files
-		.where('[path+name+type]')
+		.where('name')
-		.equals([path_without_last_part, last_path_part, 'inode/directory'])
+		.equals(last_path_part)
+		.filter((inode) => inode.path === path_without_last_part && inode.type === 'inode/directory')
 		.first();
 	if (!folders_of_current_path)
 		return await db.displays.where('id').anyOf(selected_display_ids).toArray();
 	const folder_primary_key = get_file_primary_key(folders_of_current_path);
 
-	const display_ids = selected_display_ids.filter(async (display_id) => {
+	const display_ids_with_folder = (
-		const folder_exists = await db.files_on_display.get([display_id, folder_primary_key]);
+		await db.files_on_display.where('file_primary_key').equals(folder_primary_key).toArray()
+	).map((fod) => fod.display_id);
+
+	const display_ids = selected_display_ids.filter((display_id) => {
 		if (invert) {
-			return !folder_exists;
+			return !display_ids_with_folder.includes(display_id);
 		} else {
-			return folder_exists;
+			return display_ids_with_folder.includes(display_id);
 		}
 	});
 
@@ -211,17 +215,30 @@ export async function update_folder_elements_recursively(
 	const new_folder_elements = await get_file_data(display.ip, file_path);
 	if (!new_folder_elements) return;
 
-	const existing_file_keys_on_display_in_path: [string, string, number, string][] = (
+	const existing_files_on_display_in_path: FileOnDisplay[] = await db.files_on_display
-		await db.files_on_display.where('display_id').equals(display.id).toArray()
+		.where('display_id')
-	).map((e) => JSON.parse(e.file_primary_key) as [string, string, number, string]);
+		.equals(display.id)
-	const existing_files_on_display_in_path: Inode[] = await db.files
+		.toArray();
+	const existing_file_keys_on_display_in_path: [string, string, number, string][] =
+		existing_files_on_display_in_path.map(
+			(e) => JSON.parse(e.file_primary_key) as [string, string, number, string]
+		);
+	const existing_files: Inode[] = await db.files
 		.where('[path+name+size+type]')
 		.anyOf(existing_file_keys_on_display_in_path)
 		.filter((e) => e.path === file_path)
 		.toArray();
 
+	const existing_files_with_loading_state: { folder_element: Inode; is_loading: boolean }[] =
+		existing_files.map((folder_element) => ({
+			folder_element,
+			is_loading: !!existing_files_on_display_in_path.find(
+				(e) => e.file_primary_key === get_file_primary_key(folder_element)
+			)?.loading_data
+		}));
+
 	const diff = get_folder_elements_difference(
-		existing_files_on_display_in_path,
+		existing_files_with_loading_state,
 		new_folder_elements
 	);
 
@@ -262,13 +279,15 @@ export async function update_folder_elements_recursively(
 }
 
 function get_folder_elements_difference(
-	old_elements: Inode[],
+	old_elements: { folder_element: Inode; is_loading: boolean }[],
 	new_elements: { folder_element: Inode; date_created: Date }[]
 ): { deleted: Inode[]; new: { folder_element: Inode; date_created: Date }[] } {
-	const old_keys = new Set(old_elements.map((e) => get_file_primary_key(e)));
+	const old_keys = new Set(old_elements.map((e) => get_file_primary_key(e.folder_element)));
 	const new_keys = new Set(new_elements.map((e) => get_file_primary_key(e.folder_element)));
 
-	const only_in_old = old_elements.filter((e) => !new_keys.has(get_file_primary_key(e)));
+	const only_in_old = old_elements
+		.filter((e) => !new_keys.has(get_file_primary_key(e.folder_element)) && !e.is_loading)
+		.map((e) => e.folder_element);
 	const only_in_new = new_elements.filter(
 		(e) => !old_keys.has(get_file_primary_key(e.folder_element))
 	);

control/frontend/src/lib/ts/stores/ui_behavior.ts

@@ -1,72 +1,71 @@
-import { writable, type Writable } from "svelte/store";
+import { writable, type Writable } from 'svelte/store';
 
 export const dnd_flip_duration_ms = 300;
 
 const heights_options: Record<string, { min: number; max: number; step: number }> = {
-    display: {
+	display: {
-        min: 15,
+		min: 15,
-        max: 40,
+		max: 40,
-        step: 5,
+		step: 5
-    },
+	},
-    file: {
+	file: {
-        min: 10,
+		min: 10,
-        max: 20,
+		max: 20,
-        step: 5,
+		step: 5
-    }
+	}
-}
+};
 
 export const current_height: Writable<Record<string, number>> = writable<Record<string, number>>({
-    display: 25,
+	display: 25,
-    file: 10,
+	file: 10
 });
 
-
 export const is_group_drag: Writable<boolean> = writable<boolean>(false);
 export const is_display_drag: Writable<boolean> = writable<boolean>(false);
 
 export const pinned_display_id: Writable<string | null> = writable<string | null>(null);
 
-
 export function change_height(key: 'display' | 'file', factor: number) {
-    current_height.update((height) => {
+	current_height.update((height) => {
-        height[key] = next_height_step_size(key, height, factor) || height[key];
+		height[key] = next_height_step_size(key, height, factor) || height[key];
-        return height;
+		return height;
-    });
+	});
 }
 
-export function next_height_step_size(key: 'display' | 'file', current_height_array: Record<string, number>, factor: number): number {
+export function next_height_step_size(
-    const new_size = current_height_array[key] + (factor * heights_options[key].step);
+	key: 'display' | 'file',
-    if (new_size > heights_options[key].max || new_size < heights_options[key].min) {
+	current_height_array: Record<string, number>,
-        return 0;
+	factor: number
-    } else {
+): number {
-        return new_size;
+	const new_size = current_height_array[key] + factor * heights_options[key].step;
-    }
+	if (new_size > heights_options[key].max || new_size < heights_options[key].min) {
+		return 0;
+	} else {
+		return new_size;
+	}
 }
 
-
-
-
 export function get_selectable_color_classes(
-    selected: boolean,
+	selected: boolean,
-    returning_classes: { bg?: boolean; hover?: boolean; active?: boolean; text?: boolean } = {},
+	returning_classes: { bg?: boolean; hover?: boolean; active?: boolean; text?: boolean } = {},
-    base_bg_distance: number = 0,
+	base_bg_distance: number = 0,
-    shifted_distance: number = 0
+	shifted_distance: number = 0
 ) {
-    let base_bg = selected ? 'bg-stone-400' : 'bg-stone-600';
+	let base_bg = selected ? 'bg-stone-400' : 'bg-stone-600';
-    const base_text = selected ? 'text-stone-950' : 'text-stone-200';
+	const base_text = selected ? 'text-stone-950' : 'text-stone-200';
-    base_bg = get_shifted_color(base_bg, base_bg_distance);
+	base_bg = get_shifted_color(base_bg, base_bg_distance);
 
-    const { bg = false, hover = false, active = false, text = false } = returning_classes;
+	const { bg = false, hover = false, active = false, text = false } = returning_classes;
 
-    const out: string[] = [];
+	const out: string[] = [];
-    if (bg) out.push(base_bg);
+	if (bg) out.push(base_bg);
-    if (hover) out.push('hover:' + get_shifted_color(base_bg, 100 + shifted_distance));
+	if (hover) out.push('hover:' + get_shifted_color(base_bg, 100 + shifted_distance));
-    if (active) out.push('active:' + get_shifted_color(base_bg, 150 + shifted_distance));
+	if (active) out.push('active:' + get_shifted_color(base_bg, 150 + shifted_distance));
-    if (text) out.push(base_text);
+	if (text) out.push(base_text);
 
-    return out.join(' ');
+	return out.join(' ');
 }
 
 export function get_shifted_color(base_color: string, distance: number): string {
-    return base_color.replace(/(\d+)(?=(?:\/\d+)?$)/, (m: string) => String(+Number(m) - distance));
+	return base_color.replace(/(\d+)(?=(?:\/\d+)?$)/, (m: string) => String(+Number(m) - distance));
-}
+}

control/frontend/src/lib/ts/types.ts

@@ -37,20 +37,20 @@ export type FileTransferTask = {
 	bytes_total: number; // if type === 'sync' -> bytes_total = file_size * 2 (1x download + 1x upload)
 };
 
-export type FileTransferTaskData = {
+export type FileTransferTaskData =
-	type: 'upload',
+	| {
-	file: File,
+			type: 'upload';
-} | {
+			file: File;
-	type: "sync",
+	  }
-	destination_displays: ShortDisplay[],
+	| {
-}
+			type: 'sync';
-
+			destination_displays: ShortDisplay[];
+	  };
 
 export type ShortDisplay = {
 	id: string;
 	ip: string;
-}
+};
-
 
 export type FileOnDisplay = {
 	display_id: string;
@@ -64,7 +64,7 @@ export type FileLoadingData = {
 	percentage: number;
 	bytes_per_second: number;
 	seconds_until_finish: number;
-}
+};
 
 export type Inode = {
 	path: string;
@@ -101,6 +101,15 @@ export type DisplayGroup = {
 	position: number;
 };
 
+export type DisplayIdGroup = {
+	id: string;
+	displays: DisplayIdObject[];
+};
+
+export type DisplayIdObject = {
+	id: string;
+};
+
 export type PreviewObject = {
 	currently_updating: boolean;
 	url: string | null;

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

@@ -1,10 +1,29 @@
 <script lang="ts">
 	import '../app.css';
 	import Notification from './Notification.svelte';
+	import SplashScreen from './../../../../shared/splash_screen.html?raw';
+	import version from './../../../../shared/version.txt?raw';
+	import { dev } from '$app/environment';
 
 	let { children } = $props();
+
+	let versionSplashScreen = SplashScreen.replaceAll('%%APP-VERSION%%', version.trim());
 </script>
 
+<svelte:head>
+	<title>PLG MuDiCS Control</title>
+</svelte:head>
+
+{#if !dev}
+	{@html versionSplashScreen}
+{/if}
+
 {@render children()}
 
 <Notification />
+
+<style>
+	:root {
+		--splash-fade-out-delay: 3.5s !important;
+	}
+</style>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Monitor, Plus, Radio, Settings, Trash2, X } from 'lucide-svelte';
+	import { Monitor, Plus, Radio, Settings, Trash2, Menu } from 'lucide-svelte';
 	import Button from '$lib/components/Button.svelte';
 	import FileView from './FileView.svelte';
 	import ControlView from './ControlView.svelte';
@@ -185,7 +185,7 @@
 	<TextInput
 		bind:current_value={text_inputs_valid.mac.value}
 		bind:current_valid={text_inputs_valid.mac.valid}
-		title="MAC-Adresse (optional)"
+		title="MAC-Adresse (optional, wird zum aufwecken des Displays benötigt)"
 		placeholder="z.B. D4:81:A6:C4:BF:3F"
 		is_valid_function={(input: string) => {
 			return input === ''
@@ -221,8 +221,6 @@
 {/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} -->
-
 	<div class="w-[calc(100dvw-(8*var(--spacing)))] flex justify-between">
 		<span class="text-4xl font-bold content-center pl-1"> PLG MuDiCS </span>
 		<Button
@@ -240,7 +238,7 @@
 				}
 			]}
 		>
-			<Settings></Settings>
+			<Menu />
 		</Button>
 	</div>
 	<div class="w-[calc(100dvw-(8*var(--spacing)))] grid grid-cols-2 gap-2">

control/frontend/src/routes/ControlView.svelte

@@ -20,6 +20,13 @@
 	import { selected_display_ids } from '$lib/ts/stores/select';
 	import TipTapInput from './TipTapInput.svelte';
 	import { db } from '$lib/ts/database';
+	import { liveQuery, type Observable } from 'dexie';
+
+	let all_display_states: Observable<'on' | 'off' | 'mixed'> | undefined = $state();
+	$effect(() => {
+		const ids = $selected_display_ids;
+		all_display_states = liveQuery(() => all_state(ids));
+	});
 
 	let popup_content: PopupContent = $state({
 		open: false,
@@ -115,7 +122,7 @@
 	<p>Bist du sicher, dass du alle ausgewählten Displays herunterfahren möchtest?</p>
 
 	<div class="flex flex-row justify-end gap-2">
-		<Button className="button space" click_function={() => (popup_content.open = false)}>
+		<Button className="button space font-bold" click_function={() => (popup_content.open = false)}>
 			Abbrechen
 		</Button>
 		<Button click_function={shutdown_action} className="button error space">Herunterfahren</Button>
@@ -162,11 +169,13 @@
 						}}><ArrowBigRight /></Button
 					>
 				</div>
+
 				<Button
 					className="px-3 flex gap-3 w-75 justify-normal"
 					disabled={$selected_display_ids.length === 0}
 					click_function={show_text_popup}><TextAlignStart /> Text anzeigen</Button
 				>
+
 				<Button
 					className="px-3 flex gap-3 w-75 justify-normal"
 					disabled={$selected_display_ids.length === 0}
@@ -174,14 +183,14 @@
 						await run_on_all_selected_displays((d) => show_blackscreen(d.ip));
 					}}><Presentation />Blackout</Button
 				>
+
 				<div class="flex flex-row justify-normal">
-					<Button
+					<Button className="rounded-r-none pl-3 flex gap-3 grow w-65 justify-normal" disabled>
-						className="rounded-r-none pl-3 flex gap-3 grow w-65 justify-normal"
+						<TrafficCone /> Fallback-Bild anzeigen
-						disabled={$selected_display_ids.length === 0}
+					</Button>
-						><TrafficCone /> Fallback-Bild anzeigen</Button
+					<Button className="rounded-l-none flex grow-0 w-10" disabled><ChevronDown /></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}
@@ -190,29 +199,26 @@
 			</div>
 			<div class="flex flex-col gap-2 justify-between">
 				<div class="flex flex-col gap-2">
-					{#await all_state($selected_display_ids) then all}
+					<Button
-						<Button
+						className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
-							className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
+						disabled={$all_display_states === 'on' || $selected_display_ids.length === 0}
-							disabled={all === 'on' || $selected_display_ids.length === 0}
+						click_function={startup_action}
-							click_function={startup_action}
+					>
-						>
+						<Power /> PC hochfahren
-							<Power /> PC hochfahren
+					</Button>
-						</Button>
 
-						<Button
+					<Button
-							className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
+						className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
-							disabled={all === 'off' || $selected_display_ids.length === 0}
+						disabled={$all_display_states === 'off' || $selected_display_ids.length === 0}
-							click_function={ask_shutdonw}
+						click_function={ask_shutdonw}
-						>
+					>
-							<PowerOff /> PC herunterfahren</Button
+						<PowerOff /> PC herunterfahren</Button
-						>
+					>
-					{/await}
 				</div>
-				<Button
+				<Button className="px-3 flex gap-3 w-full xl:w-75 justify-normal" disabled>
-					className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
+					<SquareTerminal />
-					disabled={$selected_display_ids.length === 0}
+					Shell-Befehl ausführen
-					><SquareTerminal /> Shell-Befehl ausführen</Button
+				</Button>
-				>
 			</div>
 		</div>
 		<PopUp

control/frontend/src/routes/DisplayView.svelte

@@ -3,9 +3,11 @@
 	import {
 		all_displays_of_group_selected,
 		get_display_by_id,
-		get_display_groups,
 		set_select_for_group,
-		set_new_display_group_order
+		local_displays,
+		update_local_displays,
+		update_db_displays,
+		get_display_groups
 	} from '$lib/ts/stores/displays';
 	import {
 		change_height,
@@ -19,15 +21,16 @@
 	import { type Display, type DisplayGroup, type MenuOption } from '$lib/ts/types';
 	import Button from '$lib/components/Button.svelte';
 	import OnlineState from '../lib/components/OnlineState.svelte';
-	import { cubicOut } from 'svelte/easing';
+	import { Menu, Pencil, PinOff, Trash2, VideoOff, ZoomIn, ZoomOut } from 'lucide-svelte';
-	import { Menu, Pencil, PinOff, Settings, Trash2, VideoOff, ZoomIn, ZoomOut } from 'lucide-svelte';
 	import { selected_display_ids } from '$lib/ts/stores/select';
 	import { dragHandleZone } from 'svelte-dnd-action';
-	import { flip } from 'svelte/animate';
 	import DisplayGroupObject from '../lib/components/DisplayGroupObject.svelte';
 	import { Pane, Splitpanes } from 'svelte-splitpanes';
 	import HighlightedText from '$lib/components/HighlightedText.svelte';
 	import { liveQuery, type Observable } from 'dexie';
+	import { onMount } from 'svelte';
+	import { flip } from 'svelte/animate';
+	import { cubicOut } from 'svelte/easing';
 
 	let {
 		handle_display_deletion,
@@ -43,7 +46,16 @@
 		const pdi = $pinned_display_id;
 		pinned_display = liveQuery(() => get_display_by_id(pdi || ''));
 	});
+
 	let display_groups = liveQuery(() => get_display_groups());
+	let display_id_groups = liveQuery(() => update_local_displays());
+	$effect(() => {
+		const current_displays = $display_id_groups;
+		if (!$is_group_drag && !$is_display_drag && current_displays) {
+			$local_displays = current_displays;
+		}
+	});
+
 	let all_groups_selected: Observable<boolean> | undefined = $state();
 	$effect(() => {
 		const d = $display_groups;
@@ -234,51 +246,50 @@
 						</div>
 					</div>
 				</div>
-				<div class="min-h-0 overflow-y-auto" bind:this={displays_scroll_box}>
+				<div class="min-h-0 overflow-y-auto overflow-x-hidden" bind:this={displays_scroll_box}>
-					<div
+					{#if $local_displays.length === 0}
-						class="min-h-full p-2 flex flex-col gap-4"
+						<div class="text-stone-500 px-10 py-6 leading-relaxed text-center">
-						use:dragHandleZone={{
+							Es wurden noch keine Bildschirme hinzugefügt. Klicke oben rechts auf
-							items: $display_groups || [],
+							<HighlightedText fg="text-stone-450" className="p-1!">
-							type: 'group',
+								<Menu class="inline pb-1" />
-							flipDurationMs: dnd_flip_duration_ms,
+							</HighlightedText>
-							dropFromOthersDisabled: true,
+							und
-							dropTargetStyle: { outline: 'none' }
+							<HighlightedText fg="text-stone-450">Neuen Bildschirm hinzufügen</HighlightedText>.
-						}}
+						</div>
-						onconsider={async (e: CustomEvent) => {
+					{:else}
-							$is_group_drag = true;
+						<div
-							await set_new_display_group_order(e.detail.items);
+							class="min-h-full p-2 flex flex-col gap-4"
-						}}
+							use:dragHandleZone={{
-						onfinalize={async (e: CustomEvent) => {
+								items: $local_displays,
-							await set_new_display_group_order(e.detail.items);
+								type: 'group',
-							$is_group_drag = false;
+								flipDurationMs: dnd_flip_duration_ms,
-						}}
+								dropFromOthersDisabled: true,
-					>
+								dropTargetStyle: { outline: 'none' }
-						{#if ($display_groups || []).length === 0}
+							}}
-							<div class="text-stone-500 px-10 py-6 leading-relaxed text-center">
+							onconsider={(e: CustomEvent) => {
-								Es wurden noch keine Bildschirme hinzugefügt. Klicke oben rechts auf
+								$is_group_drag = true;
-								<HighlightedText fg="text-stone-450" className="p-1!"
+								$local_displays = e.detail.items;
-									><Settings class="inline pb-1" /></HighlightedText
+							}}
-								>
+							onfinalize={async (e: CustomEvent) => {
-								und
+								$local_displays = e.detail.items;
-								<HighlightedText fg="text-stone-450">Neuen Bildschirm hinzufügen</HighlightedText>.
+								await update_db_displays();
-							</div>
+								$is_group_drag = false;
-						{:else}
+							}}
-							{#each $display_groups || [] as display_group (display_group.id)}
+						>
+							{#each $local_displays as display_id_group (display_id_group.id)}
 								<!-- Each Group -->
-								<section
+								<section class="outline-none">
-									out:scale={{ duration: dnd_flip_duration_ms, easing: cubicOut }}
+									<!-- out:scale={{ duration: dnd_flip_duration_ms, easing: cubicOut }}
-									animate:flip={{ duration: dnd_flip_duration_ms, easing: cubicOut }}
+										animate:flip={{ duration: dnd_flip_duration_ms, easing: cubicOut }} -->
-									class="outline-none"
-								>
 									<DisplayGroupObject
-										display_group_id={display_group.id}
+										{display_id_group}
 										{get_display_menu_options}
 										{close_pinned_display}
 									/>
 								</section>
 							{/each}
-						{/if}
+						</div>
-					</div>
+					{/if}
 				</div>
 			</div>
 		</Pane>

control/frontend/src/routes/FileView.svelte

@@ -363,7 +363,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="min-h-0 h-full overflow-y-auto bg-stone-750 rounded-xl">
+		<div class="min-h-0 h-full overflow-y-auto overflow-x-hidden bg-stone-750 rounded-xl">
 			<div class="flex flex-col gap-2 p-2 min-h-0 max-w-full">
 				{#if $selected_display_ids.length === 0}
 					<span class="text-stone-450 px-10 py-6 leading-relaxed text-center">

control/frontend/src/routes/Notification.svelte

@@ -29,7 +29,7 @@
 				>
 			</div>
 
-			<span class="whitespace-break-spaces max-h-[60vh] overflow-y-auto">{n.message}</span>
+			<span class="max-h-[60vh] overflow-y-auto overflow-x-hidden whitespace-pre-line max-w-full break-normal wrap-anywhere">{n.message}</span>
 
 			<div class="absolute inset-x-0 bottom-0 h-1 bg-white/25">
 				<div class="block h-full w-full bg-white/80 origin-left animate-progress-bar"></div>

control/go.mod

@@ -3,7 +3,7 @@ module plg-mudics/control
 go 1.24.5
 
 require (
-	github.com/labstack/echo/v4 v4.13.4
+	github.com/labstack/echo/v4 v4.15.0
 	github.com/mdlayher/wol v0.0.0-20220221231636-b763a792253a
 )
 
@@ -17,10 +17,10 @@ require (
 	github.com/mdlayher/socket v0.2.1 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasttemplate v1.2.2 // indirect
-	golang.org/x/crypto v0.38.0 // indirect
+	golang.org/x/crypto v0.46.0 // indirect
-	golang.org/x/net v0.40.0 // indirect
+	golang.org/x/net v0.48.0 // indirect
-	golang.org/x/sync v0.14.0 // indirect
+	golang.org/x/sync v0.19.0 // indirect
-	golang.org/x/sys v0.33.0 // indirect
+	golang.org/x/sys v0.39.0 // indirect
-	golang.org/x/text v0.25.0 // indirect
+	golang.org/x/text v0.32.0 // indirect
-	golang.org/x/time v0.11.0 // indirect
+	golang.org/x/time v0.14.0 // indirect
 )

control/go.sum

@@ -8,6 +8,8 @@ github.com/josharian/native v1.0.0 h1:Ts/E8zCSEsG17dUqv7joXJFybuMLjQfWE04tsBODTx
 github.com/josharian/native v1.0.0/go.mod h1:7X/raswPFr05uY3HiLlYeyQntB6OO7E/d2Cu7qoaN2w=
 github.com/labstack/echo/v4 v4.13.4 h1:oTZZW+T3s9gAu5L8vmzihV7/lkXGZuITzTQkTEhcXEA=
 github.com/labstack/echo/v4 v4.13.4/go.mod h1:g63b33BZ5vZzcIUF8AtRH40DrTlXnx4UMC8rBdndmjQ=
+github.com/labstack/echo/v4 v4.15.0 h1:hoRTKWcnR5STXZFe9BmYun9AMTNeSbjHi2vtDuADJ24=
+github.com/labstack/echo/v4 v4.15.0/go.mod h1:xmw1clThob0BSVRX1CRQkGQ/vjwcpOMjQZSZa9fKA/c=
 github.com/labstack/gommon v0.4.2 h1:F8qTUNXgG1+6WQmqoUWnz8WiEU60mXVVw0P4ht1WRA0=
 github.com/labstack/gommon v0.4.2/go.mod h1:QlUFxVM+SNXhDL/Z7YhocGIBYOiwB0mXm1+1bAPHPyU=
 github.com/mattn/go-colorable v0.1.14 h1:9A9LHSqF/7dyVVX6g0U9cwm9pG3kP9gSzcuIPHPsaIE=
@@ -34,13 +36,18 @@ github.com/valyala/fasttemplate v1.2.2/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.38.0 h1:jt+WWG8IZlBnVbomuhg2Mdq0+BBQaHbtqHEFEigjUV8=
 golang.org/x/crypto v0.38.0/go.mod h1:MvrbAqul58NNYPKnOra203SB9vpuZW0e+RRZV+Ggqjw=
+golang.org/x/crypto v0.46.0 h1:cKRW/pmt1pKAfetfu+RCEvjvZkA9RimPbh7bhFjGVBU=
+golang.org/x/crypto v0.46.0/go.mod h1:Evb/oLKmMraqjZ2iQTwDwvCtJkczlDuTmdJXoZVzqU0=
 golang.org/x/net v0.0.0-20190313220215-9f648a60d977/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
 golang.org/x/net v0.0.0-20190503192946-f4e77d36d62c/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
 golang.org/x/net v0.40.0 h1:79Xs7wF06Gbdcg4kdCCIQArK11Z1hr5POQ6+fIYHNuY=
 golang.org/x/net v0.40.0/go.mod h1:y0hY0exeL2Pku80/zKK7tpntoX23cqL3Oa6njdgRtds=
+golang.org/x/net v0.48.0 h1:zyQRTTrjc33Lhh0fBgT/H3oZq9WuvRR5gPC70xpDiQU=
+golang.org/x/net v0.48.0/go.mod h1:+ndRgGjkh8FGtu1w1FGbEC31if4VrNVMuKTgcAAnQRY=
 golang.org/x/sync v0.0.0-20210220032951-036812b2e83c/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.14.0 h1:woo0S4Yywslg6hp4eUFjTVOyKt0RookbpAHG4c1HmhQ=
 golang.org/x/sync v0.14.0/go.mod h1:1dzgHSNfp02xaA81J2MS99Qcpr2w7fw1gpm99rleRqA=
+golang.org/x/sync v0.19.0/go.mod h1:9KTHXmSnoGruLpwFjVSX0lNNA75CykiMECbovNTZqGI=
 golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190312061237-fead79001313/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210927094055-39ccf1dd6fa6/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
@@ -48,11 +55,16 @@ golang.org/x/sys v0.0.0-20220209214540-3681064d5158/go.mod h1:oPkhp1MJrh7nUepCBc
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.33.0 h1:q3i8TbbEz+JRD9ywIRlyRAQbM0qF7hu24q3teo2hbuw=
 golang.org/x/sys v0.33.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
+golang.org/x/sys v0.39.0 h1:CvCKL8MeisomCi6qNZ+wbb0DN9E5AATixKsvNtMoMFk=
+golang.org/x/sys v0.39.0/go.mod h1:OgkHotnGiDImocRcuBABYBEXf8A9a87e/uXjp9XT3ks=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.25.0 h1:qVyWApTSYLk/drJRO5mDlNYskwQznZmkpV2c8q9zls4=
 golang.org/x/text v0.25.0/go.mod h1:WEdwpYrmk1qmdHvhkSTNPm3app7v4rsT8F2UD6+VHIA=
+golang.org/x/text v0.32.0 h1:ZD01bjUt1FQ9WJ0ClOL5vxgxOI/sVCNgX1YtKwcY0mU=
+golang.org/x/text v0.32.0/go.mod h1:o/rUWzghvpD5TXrTIBuJU77MTaN0ljMWE47kxGJQ7jY=
 golang.org/x/time v0.11.0 h1:/bpjEDfN9tkoN/ryeYHnv5hcMlc8ncjMcM4XBk5NWV0=
 golang.org/x/time v0.11.0/go.mod h1:CDIdPxbZBQxdj6cxyCIdrNogrJKMJ7pr37NYpMcMDSg=
+golang.org/x/time v0.14.0/go.mod h1:eL/Oa2bBBK0TkX57Fyni+NgnyQQN4LitPmob2Hjnqw4=
 golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

control/main.go

@@ -37,6 +37,9 @@ func main() {
 
 	e := echo.New()
 
+	// Allow requests from everywhere
+	e.Use(middleware.CORS())
+
 	// Serve the embedded SvelteKit frontend
 	e.Use(middleware.StaticWithConfig(middleware.StaticConfig{
 		Filesystem: http.FS(frontend.BuildDirFS),
@@ -61,7 +64,7 @@ func main() {
 			os.Exit(1)
 		}
 	}()
-	err = shared.OpenBrowserWindow("http://localhost:"+port, false, false)
+	err = shared.OpenBrowserWindow("http://localhost:"+port, false)
 	if err != nil {
 		slog.Error("Failed to open browser window", "error", err)
 		os.Exit(1)
@@ -105,14 +108,17 @@ func wakeOnLanRoute(ctx echo.Context) error {
 	}
 	mac, err := net.ParseMAC(data.MACAddress)
 	if err != nil {
+		slog.Warn("Invalid MAC address provided", "mac_address", data.MACAddress, "error", err)
 		return ctx.JSON(http.StatusBadRequest, shared.ErrorResponse{Description: "Invalid MAC address"})
 	}
 
 	client, err := wol.NewClient()
 	if err != nil {
+		slog.Error("Failed to create Wake-on-LAN client", "error", err)
 		return ctx.JSON(http.StatusInternalServerError, shared.ErrorResponse{Description: "Failed to create Wake-on-LAN client"})
 	}
-	if err := client.Wake("255.255.255.255", mac); err != nil {
+	if err := client.Wake("255.255.255.255:7", mac); err != nil {
+		slog.Error("Failed to send Wake-on-LAN packet", "error", err)
 		return ctx.JSON(http.StatusInternalServerError, shared.ErrorResponse{Description: "Failed to send Wake-on-LAN packet"})
 	}
 

display/go.mod

@@ -4,10 +4,10 @@ go 1.24.4
 
 require (
 	github.com/a-h/templ v0.3.960
-	github.com/labstack/echo/v4 v4.13.4
+	github.com/gabriel-vasile/mimetype v1.4.11
+	github.com/labstack/echo/v4 v4.15.0
 	github.com/micmonay/keybd_event v1.1.2
 	github.com/skip2/go-qrcode v0.0.0-20200617195104-da1b6568686e
-	github.com/gabriel-vasile/mimetype v1.4.11
 )
 
 require (
@@ -23,14 +23,14 @@ require (
 	github.com/natefinch/atomic v1.0.1 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasttemplate v1.2.2 // indirect
-	golang.org/x/crypto v0.40.0 // indirect
+	golang.org/x/crypto v0.46.0 // indirect
-	golang.org/x/mod v0.26.0 // indirect
+	golang.org/x/mod v0.30.0 // indirect
-	golang.org/x/net v0.42.0 // indirect
+	golang.org/x/net v0.48.0 // indirect
-	golang.org/x/sync v0.16.0 // indirect
+	golang.org/x/sync v0.19.0 // indirect
-	golang.org/x/sys v0.34.0 // indirect
+	golang.org/x/sys v0.39.0 // indirect
-	golang.org/x/text v0.27.0 // indirect
+	golang.org/x/text v0.32.0 // indirect
-	golang.org/x/time v0.11.0 // indirect
+	golang.org/x/time v0.14.0 // indirect
-	golang.org/x/tools v0.35.0 // indirect
+	golang.org/x/tools v0.39.0 // indirect
 )
 
 tool github.com/a-h/templ/cmd/templ

display/go.sum

@@ -20,6 +20,8 @@ github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
 github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/labstack/echo/v4 v4.13.4 h1:oTZZW+T3s9gAu5L8vmzihV7/lkXGZuITzTQkTEhcXEA=
 github.com/labstack/echo/v4 v4.13.4/go.mod h1:g63b33BZ5vZzcIUF8AtRH40DrTlXnx4UMC8rBdndmjQ=
+github.com/labstack/echo/v4 v4.15.0 h1:hoRTKWcnR5STXZFe9BmYun9AMTNeSbjHi2vtDuADJ24=
+github.com/labstack/echo/v4 v4.15.0/go.mod h1:xmw1clThob0BSVRX1CRQkGQ/vjwcpOMjQZSZa9fKA/c=
 github.com/labstack/gommon v0.4.2 h1:F8qTUNXgG1+6WQmqoUWnz8WiEU60mXVVw0P4ht1WRA0=
 github.com/labstack/gommon v0.4.2/go.mod h1:QlUFxVM+SNXhDL/Z7YhocGIBYOiwB0mXm1+1bAPHPyU=
 github.com/mattn/go-colorable v0.1.14 h1:9A9LHSqF/7dyVVX6g0U9cwm9pG3kP9gSzcuIPHPsaIE=
@@ -36,26 +38,43 @@ github.com/skip2/go-qrcode v0.0.0-20200617195104-da1b6568686e h1:MRM5ITcdelLK2j1
 github.com/skip2/go-qrcode v0.0.0-20200617195104-da1b6568686e/go.mod h1:XV66xRDqSt+GTGFMVlhk3ULuV0y9ZmzeVGR4mloJI3M=
 github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
 github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+github.com/stretchr/testify v1.11.1 h1:7s2iGBzp5EwR7/aIZr8ao5+dra3wiQyKjjFuvgVKu7U=
 github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
 github.com/valyala/fasttemplate v1.2.2 h1:lxLXG0uE3Qnshl9QyaK6XJxMXlQZELvChBOCmQD0Loo=
 github.com/valyala/fasttemplate v1.2.2/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
 golang.org/x/crypto v0.40.0 h1:r4x+VvoG5Fm+eJcxMaY8CQM7Lb0l1lsmjGBQ6s8BfKM=
 golang.org/x/crypto v0.40.0/go.mod h1:Qr1vMER5WyS2dfPHAlsOj01wgLbsyWtFn/aY+5+ZdxY=
+golang.org/x/crypto v0.46.0 h1:cKRW/pmt1pKAfetfu+RCEvjvZkA9RimPbh7bhFjGVBU=
+golang.org/x/crypto v0.46.0/go.mod h1:Evb/oLKmMraqjZ2iQTwDwvCtJkczlDuTmdJXoZVzqU0=
 golang.org/x/mod v0.26.0 h1:EGMPT//Ezu+ylkCijjPc+f4Aih7sZvaAr+O3EHBxvZg=
 golang.org/x/mod v0.26.0/go.mod h1:/j6NAhSk8iQ723BGAUyoAcn7SlD7s15Dp9Nd/SfeaFQ=
+golang.org/x/mod v0.30.0 h1:fDEXFVZ/fmCKProc/yAXXUijritrDzahmwwefnjoPFk=
+golang.org/x/mod v0.30.0/go.mod h1:lAsf5O2EvJeSFMiBxXDki7sCgAxEUcZHXoXMKT4GJKc=
 golang.org/x/net v0.42.0 h1:jzkYrhi3YQWD6MLBJcsklgQsoAcw89EcZbJw8Z614hs=
 golang.org/x/net v0.42.0/go.mod h1:FF1RA5d3u7nAYA4z2TkclSCKh68eSXtiFwcWQpPXdt8=
+golang.org/x/net v0.48.0 h1:zyQRTTrjc33Lhh0fBgT/H3oZq9WuvRR5gPC70xpDiQU=
+golang.org/x/net v0.48.0/go.mod h1:+ndRgGjkh8FGtu1w1FGbEC31if4VrNVMuKTgcAAnQRY=
 golang.org/x/sync v0.16.0 h1:ycBJEhp9p4vXvUZNszeOq0kGTPghopOL8q0fq3vstxw=
 golang.org/x/sync v0.16.0/go.mod h1:1dzgHSNfp02xaA81J2MS99Qcpr2w7fw1gpm99rleRqA=
+golang.org/x/sync v0.19.0 h1:vV+1eWNmZ5geRlYjzm2adRgW2/mcpevXNg50YZtPCE4=
+golang.org/x/sync v0.19.0/go.mod h1:9KTHXmSnoGruLpwFjVSX0lNNA75CykiMECbovNTZqGI=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.34.0 h1:H5Y5sJ2L2JRdyv7ROF1he/lPdvFsd0mJHFw2ThKHxLA=
 golang.org/x/sys v0.34.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
+golang.org/x/sys v0.39.0 h1:CvCKL8MeisomCi6qNZ+wbb0DN9E5AATixKsvNtMoMFk=
+golang.org/x/sys v0.39.0/go.mod h1:OgkHotnGiDImocRcuBABYBEXf8A9a87e/uXjp9XT3ks=
 golang.org/x/text v0.27.0 h1:4fGWRpyh641NLlecmyl4LOe6yDdfaYNrGb2zdfo4JV4=
 golang.org/x/text v0.27.0/go.mod h1:1D28KMCvyooCX9hBiosv5Tz/+YLxj0j7XhWjpSUF7CU=
+golang.org/x/text v0.32.0 h1:ZD01bjUt1FQ9WJ0ClOL5vxgxOI/sVCNgX1YtKwcY0mU=
+golang.org/x/text v0.32.0/go.mod h1:o/rUWzghvpD5TXrTIBuJU77MTaN0ljMWE47kxGJQ7jY=
 golang.org/x/time v0.11.0 h1:/bpjEDfN9tkoN/ryeYHnv5hcMlc8ncjMcM4XBk5NWV0=
 golang.org/x/time v0.11.0/go.mod h1:CDIdPxbZBQxdj6cxyCIdrNogrJKMJ7pr37NYpMcMDSg=
+golang.org/x/time v0.14.0 h1:MRx4UaLrDotUKUdCIqzPC48t1Y9hANFKIRpNx+Te8PI=
+golang.org/x/time v0.14.0/go.mod h1:eL/Oa2bBBK0TkX57Fyni+NgnyQQN4LitPmob2Hjnqw4=
 golang.org/x/tools v0.35.0 h1:mBffYraMEf7aa0sB+NuKnuCy8qI/9Bughn8dC2Gu5r0=
 golang.org/x/tools v0.35.0/go.mod h1:NKdj5HkL/73byiZSJjqJgKn3ep7KjFkBOkR/Hps3VPw=
+golang.org/x/tools v0.39.0 h1:ik4ho21kwuQln40uelmciQPp9SipgNDdrafrYA4TmQQ=
+golang.org/x/tools v0.39.0/go.mod h1:JnefbkDPyD8UU2kI5fuf8ZX4/yUeh9W877ZeBONxUqQ=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

display/main.go

@@ -9,8 +9,6 @@ import (
 	"plg-mudics/shared"
 )
 
-const VERSION = "0.1.0"
-
 //go:generate go tool templ generate
 
 func main() {
@@ -27,8 +25,8 @@ func main() {
 
 	// the order is important, the open browser command exitsts as soon as the winodw is closed
 	// and since its the last action in the main go func all other goroutines (e.g. the webserver) are killed
-	go web.StartWebServer(VERSION, port)
+	go web.StartWebServer(shared.Version, port)
-	err = shared.OpenBrowserWindow("http://localhost:"+port, true, true)
+	err = shared.OpenBrowserWindow("http://localhost:"+port, true)
 	if err != nil {
 		slog.Error("Failed to open browser window", "error", err)
 		os.Exit(1)

display/pkg/main.go

@@ -3,7 +3,6 @@ package pkg
 import (
 	"errors"
 	"fmt"
-	"log/slog"
 	"net"
 	"os"
 	"os/exec"
@@ -100,7 +99,6 @@ func TakeScreenshot() (string, error) {
 		if commandOutput.ExitCode == 0 {
 			return tempFilePath, nil
 		}
-		slog.Warn("Screenshot error", "error", commandOutput.Stderr)
 	}
 	return "", errors.New("no screenshot utility found or all failed")
 }

display/web/main.go

@@ -15,6 +15,7 @@ import (
 	"os/exec"
 	"path/filepath"
 	shared "plg-mudics/shared"
+	"strings"
 
 	"github.com/gabriel-vasile/mimetype"
 	"github.com/labstack/echo/v4"
@@ -35,7 +36,9 @@ func StartWebServer(v string, port string) {
 	e.GET("/", indexRoute)
 	e.GET("/sse", sseRoute)
 	e.GET("/splash", func(ctx echo.Context) error {
-		return ctx.HTML(http.StatusOK, shared.SplashScreenTemplate)
+		html := shared.SplashScreenTemplate
+		html = strings.ReplaceAll(html, "%%APP-VERSION%%", version)
+		return ctx.HTML(http.StatusOK, html)
 	})
 	e.GET("/qr", qrRoute)
 
@@ -325,7 +328,6 @@ func openFileRoute(ctx echo.Context) error {
 	err = resetView()
 	if err != nil {
 		slog.Error("Failed to reset view", "error", err)
-		return ctx.JSON(http.StatusInternalServerError, shared.ErrorResponse{Description: "Failed to reset view"})
 	}
 
 	mType, err := mimetype.DetectFile(fullPath)
@@ -372,7 +374,6 @@ func showHTMLRoute(ctx echo.Context) error {
 	err := resetView()
 	if err != nil {
 		slog.Error("Failed to reset view", "error", err)
-		return ctx.JSON(http.StatusInternalServerError, shared.ErrorResponse{Description: "Failed to reset view"})
 	}
 
 	sseConnection <- request.HTML

display/web/main.templ

@@ -1,16 +1,15 @@
 package web
 
 templ indexTemplate() {
-<!DOCTYPE html>
+	<!DOCTYPE html>
-<html lang="en">
+	<html lang="en">
-
+		<head>
-<head>
+			<meta charset="UTF-8"/>
-	<meta charset="UTF-8" />
+			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+			<title>PLG MuDiCS Display</title>
-	<title>PLG Connect Display</title>
+			<script src="/static/htmx.min.js"></script>
-	<script src="/static/htmx.min.js"></script>
+			<script src="/static/htmx-ext-sse.min.js"></script>
-	<script src="/static/htmx-ext-sse.min.js"></script>
+			<style>
-	<style>
 		:root {
 			--background-color: black;
 			--foreground-color: oklch(92.3% 0.003 48.717);
@@ -33,6 +32,7 @@ templ indexTemplate() {
 			background-color: var(--background-color);
 			color: var(--foreground-color);
 			font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+			cursor: none;
 		}
 
 		video,
@@ -60,7 +60,7 @@ templ indexTemplate() {
 			padding-left: calc(var(--font-size)*1.5);
 		}
 	</style>
-	<script>
+			<script>
 		document.addEventListener('keydown', function (event) {
 			if (event.code === 'Space') {
 				event.preventDefault();
@@ -75,46 +75,49 @@ templ indexTemplate() {
 			}
 		});
 	</script>
-</head>
+		</head>
-<bod>
+		<bod>
-	<div hx-get="/splash" hx-trigger="load"></div>
+			<div hx-get="/splash" hx-trigger="load"></div>
-	<main hx-ext="sse" sse-connect="/sse" sse-swap="message"></main>
+			<main hx-ext="sse" sse-connect="/sse" sse-swap="message"></main>
-</bod>
+		</bod>
-
+	</html>
-</html>
 }
 
 templ videoTemplate(path string) {
-<video autoplay>
+	<video autoplay>
-	<source src={ "/api/file/" + path } type="video/mp4" />
+		<source src={ "/api/file/" + path } type="video/mp4"/>
-</video>
+	</video>
 }
 
 templ imageTemplate(path string) {
-<img src={ "/api/file/" + path } />
+	<img src={ "/api/file/" + path }/>
 }
 
 templ deviceInfoTemplate(ip string, mac string, showQR bool) {
-<div style="width: 100vw; height: 100vh; display: flex; flex-direction: row; justify-content: space-between;">
+	<div style="width: 100vw; height: 100vh; display: flex; flex-direction: row; justify-content: space-between;">
-	<div
+		<div
-		style="display: flex; flex-direction: column; gap: 1rem; justify-content: end; padding: 2rem; font-size: 4rem;">
+			style="display: flex; flex-direction: column; gap: 1rem; justify-content: end; padding: 2rem; font-size: 4rem;"
-		{ ip }
+		>
-		<span style="text-transform: uppercase;">{ mac }</span>
+			{ ip }
-	</div>
+			<span style="text-transform: uppercase;">{ mac }</span>
-	if showQR {
-	<div style="display: flex; justify-content: end; align-items: end; padding: 2rem;">
-		<div style="padding: 1rem; background-color: var(--foreground-color); border-radius: 1rem;">
-			<img style="height: 30vh; width: auto; image-rendering: pixelated; image-rendering: crisp-edges;"
-				src={ "/qr?data=http://" + ip + ":8080" } alt="QR-Code" />
 		</div>
+		if showQR {
+			<div style="display: flex; justify-content: end; align-items: end; padding: 2rem;">
+				<div style="padding: 1rem; background-color: var(--foreground-color); border-radius: 1rem;">
+					<img
+						style="height: 30vh; width: auto; image-rendering: pixelated; image-rendering: crisp-edges;"
+						src={ "/qr?data=http://" + ip + ":8080" }
+						alt="QR-Code"
+					/>
+				</div>
+			</div>
+		}
 	</div>
-	}
+	<style>
-</div>
-<style>
 	:root {
 		--splash-bg: transparent !important;
 		--splash-fade-out-state: paused !important;
 		--background-color: oklch(21.6% 0.006 56.043);
 	}
 </style>
-}
+}

go.work.sum

@@ -1,24 +1,15 @@
 github.com/a-h/htmlformat v0.0.0-20250209131833-673be874c677/go.mod h1:FMIm5afKmEfarNbIXOaPHFY8X7fo+fRQB6I9MPG2nB0=
-github.com/a-h/templ v0.3.960 h1:trshEpGa8clF5cdI39iY4ZrZG8Z/QixyzEyUnA7feTM=
-github.com/a-h/templ v0.3.960/go.mod h1:oCZcnKRf5jjsGpf2yELzQfodLphd2mwecwG4Crk5HBo=
-github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/rs/cors v1.11.0/go.mod h1:XyqrcTp5zjWr1wsJ8PIRZssZ8b/WMcMf71DJnit4EMU=
+github.com/stretchr/testify v1.11.1/go.mod h1:wZwfW3scLgRK+23gO65QZefKpKQRnfz6sD981Nm4B6U=
 github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
-golang.org/x/crypto v0.40.0 h1:r4x+VvoG5Fm+eJcxMaY8CQM7Lb0l1lsmjGBQ6s8BfKM=
-golang.org/x/crypto v0.40.0/go.mod h1:Qr1vMER5WyS2dfPHAlsOj01wgLbsyWtFn/aY+5+ZdxY=
 golang.org/x/mod v0.25.0/go.mod h1:IXM97Txy2VM4PJ3gI61r1YEk/gAj6zAHN3AdZt6S9Ww=
-golang.org/x/mod v0.26.0/go.mod h1:/j6NAhSk8iQ723BGAUyoAcn7SlD7s15Dp9Nd/SfeaFQ=
 golang.org/x/net v0.41.0/go.mod h1:B/K4NNqkfmg07DQYrbwvSluqCJOOXwUjeb/5lOisjbA=
-golang.org/x/net v0.42.0 h1:jzkYrhi3YQWD6MLBJcsklgQsoAcw89EcZbJw8Z614hs=
+golang.org/x/net v0.47.0/go.mod h1:/jNxtkgq5yWUGYkaZGqo27cfGZ1c5Nen03aYrrKpVRU=
-golang.org/x/net v0.42.0/go.mod h1:FF1RA5d3u7nAYA4z2TkclSCKh68eSXtiFwcWQpPXdt8=
-golang.org/x/sync v0.16.0/go.mod h1:1dzgHSNfp02xaA81J2MS99Qcpr2w7fw1gpm99rleRqA=
-golang.org/x/sys v0.34.0 h1:H5Y5sJ2L2JRdyv7ROF1he/lPdvFsd0mJHFw2ThKHxLA=
-golang.org/x/sys v0.34.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
 golang.org/x/telemetry v0.0.0-20240521205824-bda55230c457/go.mod h1:pRgIJT+bRLFKnoM1ldnzKoxTIn14Yxz928LQRYYgIN0=
 golang.org/x/telemetry v0.0.0-20250710130107-8d8967aff50b/go.mod h1:4ZwOYna0/zsOKwuR5X/m0QFOJpSZvAxFfkQT+Erd9D4=
+golang.org/x/telemetry v0.0.0-20251111182119-bc8e575c7b54/go.mod h1:hKdjCMrbv9skySur+Nek8Hd0uJ0GuxJIoIX2payrIdQ=
 golang.org/x/term v0.32.0/go.mod h1:uZG1FhGx848Sqfsq4/DlJr3xGGsYMu/L5GW4abiaEPQ=
 golang.org/x/term v0.33.0/go.mod h1:s18+ql9tYWp1IfpV9DmCtQDDSRBUjKaw9M1eAv5UeF0=
-golang.org/x/text v0.27.0 h1:4fGWRpyh641NLlecmyl4LOe6yDdfaYNrGb2zdfo4JV4=
+golang.org/x/term v0.38.0/go.mod h1:bSEAKrOT1W+VSu9TSCMtoGEOUcKxOKgl3LE5QEF/xVg=
-golang.org/x/text v0.27.0/go.mod h1:1D28KMCvyooCX9hBiosv5Tz/+YLxj0j7XhWjpSUF7CU=
 golang.org/x/tools v0.34.0/go.mod h1:pAP9OwEaY1CAW3HOmg3hLZC5Z0CCmzjAF2UQMSqNARg=
-golang.org/x/tools v0.35.0/go.mod h1:NKdj5HkL/73byiZSJjqJgKn3ep7KjFkBOkR/Hps3VPw=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=

nixos/configuration.nix

@@ -86,7 +86,6 @@
   environment.systemPackages = with pkgs; [
     # Programs
     libreoffice
-    #rustdesk
     ungoogled-chromium
     xfce.thunar-archive-plugin
     git
@@ -94,6 +93,8 @@
     unzip
     iputils
     xreader
+    tree
+    jq
 
     # Libraries
     imagemagick
@@ -137,6 +138,7 @@
     environment = {
       DISPLAY = ":0";
       XDG_RUNTIME_DIR = "/run/user/1000";
+      XDG_DATA_DIRS = "/run/current-system/sw/share";
     };
   };
 

nixos/flake.lock

@@ -7,32 +7,32 @@
         ]
       },
       "locked": {
-        "lastModified": 1763992789,
+        "lastModified": 1767910483,
-        "narHash": "sha256-WHkdBlw6oyxXIra/vQPYLtqY+3G8dUVZM8bEXk0t8x4=",
+        "narHash": "sha256-MOU5YdVu4DVwuT5ztXgQpPuRRBjSjUGIdUzOQr9iQOY=",
         "owner": "nix-community",
         "repo": "home-manager",
-        "rev": "44831a7eaba4360fb81f2acc5ea6de5fde90aaa3",
+        "rev": "82fb7dedaad83e5e279127a38ef410bcfac6d77c",
         "type": "github"
       },
       "original": {
         "owner": "nix-community",
-        "ref": "release-25.05",
+        "ref": "release-25.11",
         "repo": "home-manager",
         "type": "github"
       }
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1761999846,
+        "lastModified": 1767799921,
-        "narHash": "sha256-IYlYnp4O4dzEpL77BD/lj5NnJy2J8qbHkNSFiPBCbqo=",
+        "narHash": "sha256-r4GVX+FToWVE2My8VVZH4V0pTIpnu2ZE8/Z4uxGEMBE=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "3de8f8d73e35724bf9abef41f1bdbedda1e14a31",
+        "rev": "d351d0653aeb7877273920cd3e823994e7579b0b",
         "type": "github"
       },
       "original": {
         "owner": "NixOS",
-        "ref": "nixos-25.05",
+        "ref": "nixos-25.11",
         "repo": "nixpkgs",
         "type": "github"
       }

nixos/flake.nix

@@ -1,9 +1,9 @@
 {
   inputs = {
-    nixpkgs.url = "github:NixOS/nixpkgs/nixos-25.05";
+    nixpkgs.url = "github:NixOS/nixpkgs/nixos-25.11";
 
     home-manager = {
-      url = "github:nix-community/home-manager/release-25.05";
+      url = "github:nix-community/home-manager/release-25.11";
       inputs.nixpkgs.follows = "nixpkgs";
     };
   };

shared/embed.go

@@ -2,7 +2,12 @@ package shared
 
 import (
 	_ "embed"
+	"strings"
 )
 
 //go:embed splash_screen.html
 var SplashScreenTemplate string
+
+//go:embed version.txt
+var versionNotTrimmed string
+var Version = strings.TrimSpace(versionNotTrimmed)

shared/open_browser.go

@@ -7,21 +7,17 @@ import (
 	"os/exec"
 )
 
-func OpenBrowserWindow(url string, fullscreen bool, temp bool) error {
+func OpenBrowserWindow(url string, fullscreen bool) error {
 	bins := []string{"chromium", "chromium-browser"}
 
-	args := []string{fmt.Sprintf("--app=%s", url), "--autoplay-policy=no-user-gesture-required"}
+	tempDirPath, err := os.MkdirTemp("", "plg-mudics-browser-")
+	if err != nil {
+		return err
+	}
+	args := []string{fmt.Sprintf("--app=%s", url), "--autoplay-policy=no-user-gesture-required", fmt.Sprintf("--user-data-dir=%s", tempDirPath)}
 	if fullscreen {
 		args = append(args, "--start-fullscreen")
 	}
-	if temp {
-		tempDirPath, err := os.MkdirTemp("", "plg-mudics-browser-")
-		if err != nil {
-			return err
-		}
-		arg := fmt.Sprintf("--user-data-dir=%s", tempDirPath)
-		args = append(args, arg)
-	}
 
 	errs := []string{}
 	for _, bin := range bins {

shared/splash_screen.html

@@ -1,267 +1,486 @@
 <div id="splash">
-	<svg id="splash-svg" viewBox="0 0 950 550">
+  <svg id="splash-svg" class="fade-in" viewBox="0 0 950 550">
-		<!-- Paths -->
+    <!-- Paths -->
-		<!-- Disabled Paths -->
+    <!-- Disabled Paths -->
-		<path class="splash-stroke" d="M 385 350 V 270 H 100 V 112.5" />
+    <path class="splash-stroke" d="M 385 350 V 270 H 100 V 112.5" />
-		<path class="splash-stroke" d="M 445 350 V 210 H 350 V 112.5" />
+    <path class="splash-stroke" d="M 445 350 V 210 H 350 V 112.5" />
-		<path class="splash-stroke" d="M 505 350 V 210 H 600 V 112.5" />
+    <path class="splash-stroke" d="M 505 350 V 210 H 600 V 112.5" />
-		<path class="splash-stroke" d="M 565 350 V 270 H 850 V 112.5" />
+    <path class="splash-stroke" d="M 565 350 V 270 H 850 V 112.5" />
-		<!-- Masks -->
+    <!-- Masks -->
-		<defs>
+    <defs>
-			<mask id="m1" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
+      <mask
-				<path class="splash-mask" pathLength="100" d="M 385 350 V 270 H 100 V 112.5" />
+        id="m1"
-			</mask>
+        maskUnits="userSpaceOnUse"
-			<mask id="m2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
+        maskContentUnits="userSpaceOnUse"
-				<path class="splash-mask" pathLength="100" d="M 445 350 V 210 H 350 V 112.5" />
+      >
-			</mask>
+        <path
-			<mask id="m3" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
+          class="splash-mask"
-				<path class="splash-mask" pathLength="100" d="M 505 350 V 210 H 600 V 112.5" />
+          pathLength="100"
-			</mask>
+          d="M 385 350 V 270 H 100 V 112.5"
-			<mask id="m4" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
+        />
-				<path class="splash-mask" pathLength="100" d="M 565 350 V 270 H 850 V 112.5" />
+      </mask>
-			</mask>
+      <mask
-		</defs>
+        id="m2"
-		<!-- Active Paths -->
+        maskUnits="userSpaceOnUse"
-		<path class="splash-stroke-active" mask="url(#m1)" d="M 385 350 V 270 H 100 V 112.5" />
+        maskContentUnits="userSpaceOnUse"
-		<path class="splash-stroke-active" mask="url(#m2)" d="M 445 350 V 210 H 350 V 112.5" />
+      >
-		<path class="splash-stroke-active" mask="url(#m3)" d="M 505 350 V 210 H 600 V 112.5" />
+        <path
-		<path class="splash-stroke-active" mask="url(#m4)" d="M 565 350 V 270 H 850 V 112.5" />
+          class="splash-mask"
+          pathLength="100"
+          d="M 445 350 V 210 H 350 V 112.5"
+        />
+      </mask>
+      <mask
+        id="m3"
+        maskUnits="userSpaceOnUse"
+        maskContentUnits="userSpaceOnUse"
+      >
+        <path
+          class="splash-mask"
+          pathLength="100"
+          d="M 505 350 V 210 H 600 V 112.5"
+        />
+      </mask>
+      <mask
+        id="m4"
+        maskUnits="userSpaceOnUse"
+        maskContentUnits="userSpaceOnUse"
+      >
+        <path
+          class="splash-mask"
+          pathLength="100"
+          d="M 565 350 V 270 H 850 V 112.5"
+        />
+      </mask>
+    </defs>
+    <!-- Active Paths -->
+    <path
+      class="splash-stroke-active"
+      mask="url(#m1)"
+      d="M 385 350 V 270 H 100 V 112.5"
+    />
+    <path
+      class="splash-stroke-active"
+      mask="url(#m2)"
+      d="M 445 350 V 210 H 350 V 112.5"
+    />
+    <path
+      class="splash-stroke-active"
+      mask="url(#m3)"
+      d="M 505 350 V 210 H 600 V 112.5"
+    />
+    <path
+      class="splash-stroke-active"
+      mask="url(#m4)"
+      d="M 565 350 V 270 H 850 V 112.5"
+    />
 
-		<!-- Displays -->
+    <!-- Displays -->
-		<rect x="0" y="0" width="200" height="112.5" rx="8" ry="8" class="splash-monitor" />
+    <rect
-		<rect x="250" y="0" width="200" height="112.5" rx="8" ry="8" class="splash-monitor" />
+      x="0"
-		<rect x="500" y="0" width="200" height="112.5" rx="8" ry="8" class="splash-monitor" />
+      y="0"
-		<rect x="750" y="0" width="200" height="112.5" rx="8" ry="8" class="splash-monitor" />
+      width="200"
+      height="112.5"
+      rx="8"
+      ry="8"
+      class="splash-monitor"
+    />
+    <rect
+      x="250"
+      y="0"
+      width="200"
+      height="112.5"
+      rx="8"
+      ry="8"
+      class="splash-monitor"
+    />
+    <rect
+      x="500"
+      y="0"
+      width="200"
+      height="112.5"
+      rx="8"
+      ry="8"
+      class="splash-monitor"
+    />
+    <rect
+      x="750"
+      y="0"
+      width="200"
+      height="112.5"
+      rx="8"
+      ry="8"
+      class="splash-monitor"
+    />
 
-		<!-- Text -->
+    <!-- Text -->
-		<text class="splash-text" x="100" y="66.25" font-size="90">Mu</text>
+    <text class="splash-text" x="100" y="66.25" font-size="90">Mu</text>
-		<text class="splash-text" x="350" y="66.25" font-size="90">Di</text>
+    <text class="splash-text" x="350" y="66.25" font-size="90">Di</text>
-		<text class="splash-text" x="600" y="66.25" font-size="90">C</text>
+    <text class="splash-text" x="600" y="66.25" font-size="90">C</text>
-		<text class="splash-text" x="850" y="66.25" font-size="90">S</text>
+    <text class="splash-text" x="850" y="66.25" font-size="90">S</text>
 
-		<!-- Controller -->
+    <!-- Controller -->
-		<rect x="325" y="350" width="300" height="168.75" rx="8" ry="8" class="splash-control-monitor" />
+    <rect
-		<rect x="335" y="390" width="135" height="120" rx="8" ry="8" class="splash-other-button" />
+      x="325"
-		<rect x="480" y="390" width="135" height="55" rx="8" ry="8" class="splash-other-button" />
+      y="350"
-		<rect x="480" y="455" width="135" height="55" rx="8" ry="8" class="splash-start-button" />
+      width="300"
+      height="168.75"
+      rx="8"
+      ry="8"
+      class="splash-control-monitor"
+    />
+    <rect
+      x="335"
+      y="390"
+      width="135"
+      height="120"
+      rx="8"
+      ry="8"
+      class="splash-other-button"
+    />
+    <rect
+      x="480"
+      y="390"
+      width="135"
+      height="55"
+      rx="8"
+      ry="8"
+      class="splash-other-button"
+    />
+    <rect
+      x="480"
+      y="455"
+      width="135"
+      height="55"
+      rx="8"
+      ry="8"
+      class="splash-start-button"
+    />
 
-		<!-- Window Controls -->
+    <!-- Window Controls -->
-		<path class="window-controls" d="M 600 360 L 615 375" />
+    <path class="window-controls" d="M 600 360 l 15 15" />
-		<path class="window-controls" d="M 600 375 L 615 360" />
+    <path class="window-controls" d="M 600 375 l 15 -15" />
-		<path class="window-controls" fill="none" d="M 575 360 H 590 V 375 H 575 V 360" />
+    <path
-		<path class="window-controls" d="M 550 375 H 565" />
+      class="window-controls"
+      fill="none"
+      d="M 575 360 h 15 v 15 h -15 v -15"
+    />
+    <path class="window-controls" d="M 550 375 h 15" />
+  </svg>
 
-		<svg class="cursor" width="50" height="50" viewBox="0 0 24 24" x="510" y="480" aria-hidden="true">
+  <span id="version-label" aria-label="Version">%%APP-VERSION%%</span>
-			<g stroke="#ffffff" fill="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+
-				<path stroke="#000000" d="M 6.5 10 H 18 V 19 H 6" />
+  <div class="fade-in">
-				<path d="M22 14a8 8 0 0 1-8 8" />
+    <div
-				<path d="M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2" />
+      class="cursor-x"
-				<path d="M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1" />
+      style="
-				<path d="M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10" />
+        position: absolute;
-				<path
+        left: calc(50cqw + var(--mouse-start-x));
-					d="M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" />
+        top: calc(50cqh + var(--mouse-start-y));
-			</g>
+      "
-		</svg>
+    >
-	</svg>
+      <svg class="cursor-y" width="50" height="50" viewBox="0 0 24 24">
+        <g
+          stroke="#ffffff"
+          fill="#000000"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path stroke="#000000" d="M 6.5 10 H 18 V 19 H 6" />
+          <path d="M22 14a8 8 0 0 1-8 8" />
+          <path d="M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2" />
+          <path d="M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1" />
+          <path d="M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10" />
+          <path
+            d="M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"
+          />
+        </g>
+      </svg>
+    </div>
+  </div>
 </div>
 
 <style>
-	:root {
+  :root {
-		--splash-fade-out-delay: 0s;
+    --splash-fade-out-delay: 0s;
-		--splash-fade-out-state: running;
+    --splash-fade-out-state: running;
 
-		--base-stroke: #444444;
+    --base-stroke: #444444;
-		--base-stroke-active: #109e00;
+    --base-stroke-active: #109e00;
 
-		--splash-bg: oklch(21.6% 0.006 56.043);
+    --splash-bg: oklch(21.6% 0.006 56.043);
-		--monitor-dark: #000000;
+    --monitor-dark: #000000;
-		--monitor-active: #ffffff;
+    --monitor-active: #ffffff;
-		--window-controls: #cccccc;
+    --window-controls: #cccccc;
-		--start-button-inactive: #cccccc;
+    --start-button-inactive: #cccccc;
-		--start-button-hover: #77a3b1;
+    --start-button-hover: #77a3b1;
-		--start-button-active: #2c819b;
+    --start-button-active: #2c819b;
-		--other-button: oklch(55.3% 0.013 58.071);
+    --other-button: oklch(55.3% 0.013 58.071);
-		--splash-control-monitor: oklch(44.4% 0.011 73.639);
+    --splash-control-monitor: oklch(44.4% 0.011 73.639);
 
-		--stroke-strength: 8;
+    --version-color: oklch(55.3% 0.013 58.071);
-		--dash: 16;
-		--gap: 20;
-	}
 
+    --mouse-size: 50px;
+    --mouse-bounce-delay: 5s;
+    --mouse-start-x: calc((35 * 100vw) / 1920);
+    --mouse-start-y: calc((60 * 100vh) / 1080);
 
-	#splash {
+    --dur-x: 16s;
-		position: fixed;
+    --dur-y: 9s;
-		inset: 0;
-		background: var(--splash-bg);
-		color: white;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: 9999;
-		/* animation: splash-fade 1s ease 4s forwards; */
-		height: 100vh;
-		width: 100vw;
 
-		animation-name: splash-fade;
+    --stroke-strength: 8;
-		animation-duration: 1s;
+    --dash: 16;
-		animation-timing-function: ease;
+    --gap: 20;
-		animation-fill-mode: forwards;
+  }
-		animation-delay: var(--splash-fade-out-delay);
-		animation-play-state: var(--splash-fade-out-state);
-	}
 
-	#splash-svg {
+  #version-label {
-		max-height: 50vh;
+    position: absolute;
-		max-width: 80vw;
+    right: 1rem;
-		opacity: 0;
+    top: 1rem;
-		animation: fade-in 1s ease 500ms forwards;
+    display: block;
-	}
+    color: var(--version-color);
+    padding: 0.4rem 0.8rem;
+    font-size: 1.4rem;
+    text-align: right;
+  }
 
-	.splash-monitor {
+  #splash {
-		aspect-ratio: 16/9;
+    position: fixed;
-		rx: 8;
+    inset: 0;
-		ry: 8;
+    background: var(--splash-bg);
-		width: 200;
+    color: white;
-		fill: var(--monitor-dark);
+    display: flex;
-	}
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    height: 100vh;
+    width: 100vw;
 
-	.splash-control-monitor {
+    animation-name: splash-fade;
-		fill: var(--splash-control-monitor);
+    animation-duration: 1s;
-	}
+    animation-timing-function: ease;
+    animation-fill-mode: forwards;
+    animation-delay: var(--splash-fade-out-delay);
+    animation-play-state: var(--splash-fade-out-state);
+  }
 
-	.splash-other-button {
+  #splash-svg {
-		fill: var(--other-button);
+    max-height: 50vh;
-	}
+    max-width: 80vw;
+    transform: translateY(-12cqh);
+  }
 
-	.splash-stroke,
+  .fade-in {
-	.splash-stroke-active {
+    opacity: 0;
-		fill: none;
+    animation: fade-in 1s ease 500ms forwards;
-		stroke-linecap: round;
+  }
-		stroke-linejoin: round;
-		stroke-width: var(--stroke-strength);
-		stroke-dasharray: var(--dash) var(--gap);
-	}
 
-	.window-controls {
+  .splash-monitor {
-		stroke: var(--window-controls);
+    aspect-ratio: 16/9;
-		stroke-width: 3;
+    rx: 8;
-	}
+    ry: 8;
+    width: 200;
+    fill: var(--monitor-dark);
+  }
 
-	.splash-stroke {
+  .splash-control-monitor {
-		stroke: var(--base-stroke);
+    fill: var(--splash-control-monitor);
-	}
+  }
 
-	.splash-stroke-active {
+  .splash-other-button {
-		stroke: var(--base-stroke-active);
+    fill: var(--other-button);
-	}
+  }
 
-	.splash-mask {
+  .splash-stroke,
-		fill: none;
+  .splash-stroke-active {
-		stroke: #fff;
+    fill: none;
-		stroke-linecap: round;
+    stroke-linecap: round;
-		stroke-width: var(--stroke-strength);
+    stroke-linejoin: round;
-		stroke-dasharray: 100;
+    stroke-width: var(--stroke-strength);
-		stroke-dashoffset: 100;
+    stroke-dasharray: var(--dash) var(--gap);
-		animation: draw 1s ease-in-out 1.35s forwards;
+  }
-	}
 
-	.splash-text {
+  .window-controls {
-		text-anchor: middle;
+    stroke: var(--window-controls);
-		dominant-baseline: middle;
+    stroke-width: 3;
-		fill: var(--monitor-dark);
+  }
-		user-select: none;
-		font-family: sans-serif;
-	}
 
-	.splash-monitor {
+  .splash-stroke {
-		fill: var(--monitor-dark);
+    stroke: var(--base-stroke);
-		animation: activate-monitor 0ms ease 2.35s forwards;
+  }
-	}
 
-	.splash-start-button {
+  .splash-stroke-active {
-		fill: var(--start-button-inactive);
+    stroke: var(--base-stroke-active);
-		animation: start-button-hover-press 1s ease-in-out 450ms forwards;
+  }
-	}
 
-	.cursor {
+  .splash-mask {
-		animation: move-mouse 1s ease-in-out 0ms forwards;
+    fill: none;
-	}
+    stroke: #fff;
+    stroke-linecap: round;
+    stroke-width: var(--stroke-strength);
+    stroke-dasharray: 100;
+    stroke-dashoffset: 100;
+    animation: draw 1s ease-in-out 1.35s forwards;
+  }
 
-	@keyframes fade-in {
+  .splash-text {
-		to {
+    text-anchor: middle;
-			opacity: 1;
+    dominant-baseline: middle;
-		}
+    fill: var(--monitor-dark);
-	}
+    user-select: none;
+    font-family: sans-serif;
+  }
 
-	@keyframes move-mouse {
+  .splash-monitor {
-		0% {
+    fill: var(--monitor-dark);
-			transform: translateX(-100px);
+    animation: activate-monitor 0ms ease 2.35s forwards;
-		}
+  }
 
-		50% {
+  .splash-start-button {
-			transform: translateX(-100px);
+    fill: var(--start-button-inactive);
-		}
+    animation: start-button-hover-press 1s ease-in-out 450ms forwards;
+  }
 
-		100% {
+  .cursor-x {
-			transform: translateX(0px);
+    animation-name: move-mouse, mouse-bounceX;
-		}
+    animation-duration: 1s, var(--dur-x);
-	}
+    animation-delay: 0s, var(--mouse-bounce-delay);
+    animation-iteration-count: 1, infinite;
+    animation-direction: normal, normal;
+    animation-timing-function: ease-in-out, linear;
+    animation-fill-mode: both, none;
+    will-change: transform;
+  }
 
-	@keyframes start-button-hover-press {
+  .cursor-y {
-		0% {
+    animation-name: mouse-bounceY;
-			fill: var(--start-button-inactive);
+    animation-duration: var(--dur-y);
-		}
+    animation-delay: var(--mouse-bounce-delay);
+    animation-iteration-count: infinite;
+    animation-direction: normal;
+    animation-timing-function: linear;
+    animation-fill-mode: none;
+    will-change: transform;
+  }
 
-		30% {
+  @keyframes fade-in {
-			fill: var(--start-button-inactive);
+    to {
-		}
+      opacity: 1;
+    }
+  }
 
-		40% {
+  @keyframes move-mouse {
-			fill: var(--start-button-hover);
+    0% {
-		}
+      transform: translateX(-100px);
+    }
 
-		70% {
+    50% {
-			fill: var(--start-button-hover);
+      transform: translateX(-100px);
-		}
+    }
 
-		80% {
+    100% {
-			fill: var(--start-button-active);
+      transform: translateX(0px);
-		}
+    }
+  }
 
-		90% {
+  @keyframes mouse-bounceX {
-			fill: var(--start-button-active);
+    0% {
-		}
+      transform: translateX(0);
+    }
 
-		100% {
+    26% {
-			fill: var(--start-button-hover);
+      transform: translateX(calc(-50cqw - var(--mouse-start-x)));
-		}
+    }
-	}
 
-	@keyframes draw {
+    76% {
-		to {
+      transform: translateX(
-			stroke-dashoffset: 0;
+        calc(50cqw - var(--mouse-size) - var(--mouse-start-x))
-		}
+      );
-	}
+    }
+  }
 
-	@keyframes activate-monitor {
+  @keyframes mouse-bounceY {
-		to {
+    0% {
-			fill: var(--monitor-active);
+      transform: translateY(0);
-		}
+    }
-	}
 
-	@keyframes splash-fade {
+    27% {
-		to {
+      transform: translateY(calc(-50cqh - var(--mouse-start-y)));
-			opacity: 0;
+    }
-			visibility: hidden;
-		}
-	}
 
-	rect {
+    77% {
-		vector-effect: non-scaling-stroke;
+      transform: translateY(
-	}
+        calc(50cqh - var(--mouse-size) - var(--mouse-start-y))
+      );
+    }
+  }
 
-	/* verhindert, dass die Linien beim Skalieren dicker werden */
+  @keyframes start-button-hover-press {
-	.cursor * {
+    0% {
-		vector-effect: non-scaling-stroke;
+      fill: var(--start-button-inactive);
-	}
+    }
-</style>
+
+    30% {
+      fill: var(--start-button-inactive);
+    }
+
+    40% {
+      fill: var(--start-button-hover);
+    }
+
+    70% {
+      fill: var(--start-button-hover);
+    }
+
+    80% {
+      fill: var(--start-button-active);
+    }
+
+    90% {
+      fill: var(--start-button-active);
+    }
+
+    100% {
+      fill: var(--start-button-hover);
+    }
+  }
+
+  @keyframes draw {
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes activate-monitor {
+    to {
+      fill: var(--monitor-active);
+    }
+  }
+
+  @keyframes splash-fade {
+    to {
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+
+  rect {
+    vector-effect: non-scaling-stroke;
+  }
+
+  /* verhindert, dass die Linien beim Skalieren dicker werden */
+  .cursor * {
+    vector-effect: non-scaling-stroke;
+  }
+</style>
+
+<script>
+  const r =
+    Math.random() < 0.01
+      ? 9 / 15.039473684
+      : 0.55 + (Math.random() - 0.5) * 0.18;
+  const tx = 13 + Math.random() * 5;
+  document.documentElement.style.setProperty("--dur-x", tx + "s");
+  document.documentElement.style.setProperty("--dur-y", tx * r + "s");
+</script>

shared/version.txt

@@ -0,0 +1 @@
+v0.0.13