chore: bump to version v0.1.5

closes #54

README.md

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

control/frontend/e2e/basic.test.ts

@@ -1,39 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-test('page loads', async ({ page }) => {
-	await page.goto('/');
-	await expect(page.getByText('PLG MuDiCS')).toBeVisible();
-});
-
-test('page loads without problems', async ({ page }) => {
-	await page.goto('/');
-	await expect(page.getByText('PLG MuDiCS')).toBeVisible();
-	await expect(page.getByTestId('notification')).not.toBeVisible();
-});
-
-test('diplay click shows files', async ({ page }) => {
-	await page.goto('/');
-	await page.getByTestId('display').click();
-	await expect(page.getByTestId('inode').first()).toBeVisible();
-});
-
-test('show text', async ({ page }) => {
-	await page.goto('/');
-	await page.getByTestId('display').click();
-
-	const controlButton = page.getByText('Text anzeigen');
-	await expect(controlButton).toBeVisible();
-	await controlButton.click();
-
-	const textPopup = page.getByTestId('text-popup');
-	await expect(textPopup).toBeVisible();
-	const textArea = textPopup.getByRole('textbox');
-	await expect(textArea).toBeVisible();
-	await textArea.fill('Hello, world!');
-
-	const submitButton = textPopup.locator('button').filter({ hasText: 'Text anzeigen' });
-	await submitButton.click();
-	await expect(
-		page.locator('[data-testid="notification"]:not(:has-text("Fehler 500"))')
-	).not.toBeVisible();
-});

control/frontend/embed.go

@@ -5,9 +5,6 @@ import (
 	"io/fs"
 )
 
-//go:generate deno install
-//go:generate deno task build
-
 //go:embed all:build
 var buildDir embed.FS
 

control/frontend/package.json

@@ -11,45 +11,42 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "eslint . && prettier --check .",
-		"format": "prettier --write .",
-		"test:e2e": "playwright test",
-		"test": "deno task test:e2e"
+		"format": "prettier --write ."
 	},
 	"devDependencies": {
-		"@eslint/compat": "^1.2.5",
-		"@eslint/js": "^9.18.0",
-		"@playwright/test": "1.56.1",
-		"@sveltejs/adapter-auto": "^6.0.0",
-		"@sveltejs/adapter-static": "^3.0.9",
-		"@sveltejs/kit": "^2.22.0",
-		"@sveltejs/vite-plugin-svelte": "^6.0.0",
-		"@tailwindcss/vite": "^4.0.0",
-		"@tiptap/extension-placeholder": "^3.11.0",
-		"eslint": "^9.18.0",
-		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-svelte": "^3.0.0",
-		"globals": "^16.0.0",
-		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.3",
-		"sass-embedded": "^1.93.3",
-		"svelte": "^5.0.0",
+		"@eslint/compat": "^1.4.1",
+		"@eslint/js": "^9.39.2",
+		"@sveltejs/adapter-auto": "^6.1.1",
+		"@sveltejs/adapter-static": "^3.0.10",
+		"@sveltejs/kit": "^2.49.3",
+		"@sveltejs/vite-plugin-svelte": "^6.2.3",
+		"@tailwindcss/vite": "^4.1.18",
+		"@tiptap/extension-placeholder": "^3.15.3",
+		"eslint": "^9.39.2",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.14.0",
+		"globals": "^16.5.0",
+		"prettier": "^3.7.4",
+		"prettier-plugin-svelte": "^3.4.1",
+		"sass-embedded": "^1.97.2",
+		"svelte": "^5.46.1",
 		"svelte-check": "^4.3.5",
-		"svelte-dnd-action": "^0.9.65",
-		"tailwindcss": "^4.0.0",
-		"typescript": "^5.0.0",
-		"typescript-eslint": "^8.20.0",
-		"vite": "^7.0.4"
+		"svelte-dnd-action": "^0.9.69",
+		"tailwindcss": "^4.1.18",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.52.0",
+		"vite": "^7.3.1"
 	},
 	"dependencies": {
 		"@thisux/sveltednd": "^0.0.20",
-		"@tiptap/core": "^3.11.0",
-		"@tiptap/extension-highlight": "^3.11.0",
-		"@tiptap/extension-text-style": "^3.11.0",
-		"@tiptap/extensions": "^3.11.0",
-		"@tiptap/pm": "^3.11.0",
-		"@tiptap/starter-kit": "^3.11.0",
+		"@tiptap/core": "^3.15.3",
+		"@tiptap/extension-highlight": "^3.15.3",
+		"@tiptap/extension-text-style": "^3.15.3",
+		"@tiptap/extensions": "^3.15.3",
+		"@tiptap/pm": "^3.15.3",
+		"@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/playwright.config.ts

@@ -1,10 +0,0 @@
-import { defineConfig } from '@playwright/test';
-
-export default defineConfig({
-	fullyParallel: true,
-	webServer: {
-		command: 'deno task build && deno task preview',
-		port: 4173
-	},
-	testDir: 'e2e'
-});

control/frontend/src/app.css

@@ -12,6 +12,14 @@
 	--color-stone-850: oklch(0.242 0.0065 45.171);
 }
 
+.link {
+	@apply text-blue-300 underline;
+
+	&:hover {
+		@apply text-blue-400;
+	}
+}
+
 .button {
 	&.space {
 		@apply px-4;
@@ -26,7 +34,7 @@
 	}
 }
 
-main {
+html {
 	scrollbar-width: thin;
 	scrollbar-color: var(--color-stone-300) transparent;
 }

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { get_shifted_color } from '$lib/ts/stores/ui_behavior';
 	import type { MenuOption } from '$lib/ts/types';
+	import type { Snippet } from 'svelte';
 	import { fade } from 'svelte/transition';
 
 	let {
@@ -26,7 +27,7 @@
 		menu_options?: MenuOption[];
 		menu_class?: string;
 		div_class?: string;
-		children?: any;
+		children: Snippet;
 	} = $props();
 
 	let menu_shown = $state(false);
@@ -158,14 +159,14 @@
 				e.stopPropagation();
 			}}
 		>
-			{#each menu_options as option}
+			{#each menu_options as option, i (i)}
 				<button
 					disabled={option.disabled ?? false}
 					class="bg-white/15 {option.disabled
 						? 'text-stone-500 cursor-not-allowed'
 						: 'hover:bg-white/35 active:bg-white/60 cursor-pointer ' +
 							option.class} rounded-lg p-2 transition-colors duration-200 select-none flex flex-row gap-2 items-center"
-					onclick={async (e) => {
+					onclick={async () => {
 						if (option.on_select) await option.on_select();
 						close_menu();
 					}}

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

@@ -3,45 +3,44 @@
 	import {
 		dnd_flip_duration_ms,
 		get_selectable_color_classes,
-		is_display_drag,
-		is_group_drag
+		is_display_drag
 	} from '$lib/ts/stores/ui_behavior';
-	import { cubicOut } from 'svelte/easing';
-	import { flip } from 'svelte/animate';
 	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 { DisplayIdGroup, MenuOption } from '$lib/ts/types';
 	import { selected_display_ids } from '$lib/ts/stores/select';
 	import { liveQuery, type Observable } from 'dexie';
+	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;
-		get_display_menu_options: (display_id: string) => MenuOption[];
+		display_id_group: DisplayIdGroup;
+		get_display_menu_options: (display_id: string, display_version: string|undefined) => MenuOption[];
 		close_pinned_display: () => void;
 	} = $props();
 
 	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 +48,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 +83,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 +91,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
-				animate:flip={{ duration: $is_group_drag ? 0 : dnd_flip_duration_ms, easing: cubicOut }}
-				class="outline-none"
-				role="figure"
-			>
-				<DisplayObject {display} {get_display_menu_options} {close_pinned_display} />
+			<section class="outline-none" role="figure">
+				<!-- animate:flip={{ duration: $is_group_drag ? 0 : dnd_flip_duration_ms, easing: cubicOut }} -->
+				<DisplayObject {display_id_object} {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 { 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;
-		get_display_menu_options: (display_id: string) => MenuOption[];
+		display_id_object: DisplayIdObject;
+		get_display_menu_options: (display_id: string, display_version: string|undefined) => 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);
+		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}
-					<img src={display.preview.url} alt="preview" class="w-full object-cover bg-black" />
+				{:else if $display && $display.preview.url}
+					<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}>
-				{display.name}
+			<div class="text-xl font-bold truncate w-full" title={$display?.name ?? ''}>
+				{$display?.name ?? ''}
 			</div>
 
 			<OnlineState
-				selected={is_selected(display.id, $selected_display_ids)}
-				status={display.status}
+				selected={is_selected(display_id_object.id, $selected_display_ids)}
+				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, $display?.version)}
 			>
 				<Menu />
 			</Button>

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

@@ -1,11 +1,13 @@
 <script lang="ts">
+	import type { Snippet } from "svelte";
+
 	let {
 		children,
 		bg = 'bg-stone-750',
 		fg = 'text-stone-200',
 		className = ''
 	}: {
-		children: any;
+		children: Snippet;
 		bg?: string;
 		fg?: string;
 		className?: string;

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ArrowRight, Ban, FileIcon, Folder, Play } from 'lucide-svelte';
+	import { ArrowRight, Ban, FileIcon, Folder, Play, TriangleAlert } from 'lucide-svelte';
 	import {
 		current_height,
 		get_selectable_color_classes,
@@ -10,73 +10,79 @@
 		supported_file_type_icon,
 		type Inode,
 		get_file_primary_key,
-		type FileOnDisplay,
-		type FileLoadingData
+		type FileTransferTask,
+		is_folder
 	} from '$lib/ts/types';
 
 	import {
 		is_selected,
 		select,
-		selected_display_ids,
 		selected_file_ids
 	} from '$lib/ts/stores/select';
 	import {
 		change_file_path,
 		current_file_path,
 		get_date_mapping,
+		get_folder_elements,
 		get_missing_colliding_display_ids
 	} from '$lib/ts/stores/files';
 	import RefreshPlay from '../svgs/RefreshPlay.svelte';
 	import { get_file_size_display_string, get_file_type } from '$lib/ts/utils';
 	import { open_file } from '$lib/ts/api_handler';
-	import { run_on_all_selected_displays } from '$lib/ts/stores/displays';
+	import {
+		run_on_all_selected_displays,
+		selected_online_display_ids
+	} from '$lib/ts/stores/displays';
 	import { get_thumbnail_url } from '$lib/ts/stores/thumbnails';
 	import { liveQuery, type Observable } from 'dexie';
-	import { db } from '$lib/ts/database';
+	import { add_sync_recursively, file_transfer_tasks } from '$lib/ts/file_transfer_handler';
 
 	let { file, not_interactable = false }: { file: Inode; not_interactable?: boolean } = $props();
 
+	let file_primary_key = $derived(get_file_primary_key(file));
+
 	let missing_colliding_displays_ids:
 		| Observable<{ missing: string[]; colliding: string[] }>
 		| undefined = $state();
 	$effect(() => {
-		const s = $selected_file_ids;
-		missing_colliding_displays_ids = liveQuery(() => get_missing_colliding_display_ids(file, s));
+		const f = file;
+		const s = $selected_online_display_ids;
+		missing_colliding_displays_ids = liveQuery(() => get_missing_colliding_display_ids(f, s));
 	});
 
-	let loading_data:
-		| Observable<{
-				is_loading: boolean;
-				total_percentage: number;
-				total_seconds_until_finish: number;
-				display_data: FileLoadingData[];
-		  }>
-		| undefined = $state();
-	$effect(() => {
-		const d = $selected_display_ids;
-		loading_data = liveQuery(() => get_loading_data(get_file_primary_key(file), d));
-	});
-
-	let loading_finished = $state(false);
-	$effect(() => {
-		if (!loading_data) return;
-		let prev: boolean | undefined;
-		const sub = loading_data.subscribe((v) => {
-			if (prev === true && v.is_loading === false) {
-				loading_finished = true;
-				setTimeout(() => (loading_finished = false), 200);
-			}
-			prev = v.is_loading;
-		});
-		return () => sub.unsubscribe();
-	});
-
-	let thumbnail_url = liveQuery(() => get_thumbnail_url(get_file_primary_key(file)));
-	let date_mapping: Observable<Record<string, Date>> = liveQuery(() =>
-		get_date_mapping(get_file_primary_key(file))
+	let colliding_warning: boolean = $derived(
+		!!$missing_colliding_displays_ids && $missing_colliding_displays_ids.colliding.length !== 0
 	);
 
-	const is_folder = file.type === 'inode/directory';
+	let file_size: Observable<number> | undefined = $state();
+	$effect(() => {
+		const f = file;
+		file_size = liveQuery(() => get_size_recursively(f));
+	});
+
+	let file_transfer_task_list: FileTransferTask[] | null = $derived(
+		Object.hasOwn($file_transfer_tasks, file_primary_key)
+			? $file_transfer_tasks[file_primary_key]
+			: null
+	);
+
+	let loading_finished = $state(false);
+	let previous_loading_state = $state(false);
+	$effect(() => {
+		const ftt = file_transfer_task_list;
+		if (previous_loading_state && !ftt) {
+			loading_finished = true;
+			setTimeout(() => (loading_finished = false), 200);
+		}
+		previous_loading_state = !!ftt;
+	});
+
+	let thumbnail_url = liveQuery(() => get_thumbnail_url(file_primary_key));
+	let date_mapping: Observable<Record<string, Date>> = liveQuery(() =>
+		get_date_mapping(file_primary_key)
+	);
+
+	const file_is_folder = $derived(is_folder(file));
 
 	function get_created_info(date_mapping: Record<string, Date> | undefined, full_string = false) {
 		if (!date_mapping) return '';
@@ -135,7 +141,7 @@
 
 	function get_grayed_out_text_color_strings(is_selected: boolean): string {
 		if (not_interactable) return 'text-stone-400';
-		if ($loading_data?.is_loading) return 'text-white/20';
+		if (file_transfer_task_list) return 'text-white/20';
 		const color = is_selected ? 'text-stone-600' : 'text-stone-400';
 		const factor = is_selected ? -1 : 1;
 		return `${color} group-hover:${get_shifted_color(color, factor * 100)} group-active:${get_shifted_color(color, factor * 150)}`;
@@ -143,21 +149,26 @@
 
 	function get_grayed_out_border_color_strings(is_selected: boolean): string {
 		if (not_interactable) return 'border-stone-550';
-		if ($loading_data?.is_loading) return 'border-white/10';
+		if (file_transfer_task_list) return 'border-white/10';
 		const color = is_selected ? 'border-stone-450' : 'border-stone-550';
 		const factor = is_selected ? 1 : 1;
 		return `${color} group-hover:${get_shifted_color(color, factor * 100)} group-active:${get_shifted_color(color, factor * 150)}`;
 	}
 
 	function onclick(e: Event) {
-		if (not_interactable || $loading_data?.is_loading) return;
-		select(selected_file_ids, get_file_primary_key(file), 'toggle');
+		if (not_interactable || file_transfer_task_list) return;
+		select(selected_file_ids, file_primary_key, 'toggle');
 		e.stopPropagation();
 	}
 
 	async function open() {
-		if (is_folder) {
+		if (file_is_folder) {
 			await change_file_path($current_file_path + file.name + '/');
+		} else if (
+			!!$missing_colliding_displays_ids &&
+			$missing_colliding_displays_ids.missing.length !== 0
+		) {
+			await add_sync_recursively(get_file_primary_key(file), $selected_online_display_ids, true);
 		} else {
 			const path_to_file = $current_file_path + file.name;
 			await run_on_all_selected_displays((d) => open_file(d.ip, path_to_file));
@@ -169,11 +180,11 @@
 
 		if (loading_finished) {
 			out += 'bg-stone-500 text-white/30';
-		} else if ($loading_data?.is_loading) {
+		} else if (file_transfer_task_list) {
 			out += 'bg-stone-700 text-white/30';
 		} else {
 			out += get_selectable_color_classes(
-				!not_interactable && is_selected(get_file_primary_key(file), $selected_file_ids),
+				!not_interactable && is_selected(file_primary_key, $selected_file_ids),
 				{
 					bg: true,
 					hover: !not_interactable,
@@ -185,7 +196,7 @@
 
 		if (not_interactable) {
 			out += ' rounded-lg';
-		} else if ($loading_data?.is_loading) {
+		} else if (file_transfer_task_list) {
 			out += ' rounded-r-lg';
 		} else {
 			out += ' rounded-r-lg cursor-pointer';
@@ -194,49 +205,45 @@
 		return out;
 	}
 
-	async function get_loading_data(
-		file_primary_key: string,
-		selected_display_ids: string[]
-	): Promise<{
-		is_loading: boolean;
-		total_percentage: number;
-		total_seconds_until_finish: number;
-		display_data: FileLoadingData[];
-	}> {
-		const file_on_display_data: FileOnDisplay[] = await db.files_on_display
-			.where('file_primary_key')
-			.equals(file_primary_key)
-			.filter((e) => selected_display_ids.includes(e.display_id))
-			.toArray();
-		if (file_on_display_data.length === 0) {
-			return {
-				is_loading: true,
-				total_percentage: 0,
-				total_seconds_until_finish: -1,
-				display_data: []
-			};
-		}
-		const display_data = [];
-		let is_loading = false;
+	function get_total_percentage(ftt_list: FileTransferTask[]): number {
 		let percentage_sum = 0;
-		let total_seconds_until_finish = 0;
-		for (const fod of file_on_display_data) {
-			if (!!fod.loading_data) {
-				if (!is_loading) is_loading = true;
-				percentage_sum += fod.loading_data.percentage;
-				total_seconds_until_finish += fod.loading_data.seconds_until_finish;
-				display_data.push(fod.loading_data);
-			} else {
-				percentage_sum += 100;
-			}
+		for (const ftt of ftt_list) {
+			percentage_sum += get_percentage(ftt);
+		}
+		return Math.round(percentage_sum / ftt_list.length);
+	}
+
+
+	function get_percentage(ftt: FileTransferTask): number {
+		let total_percentage: number;
+		if (ftt.data.type === 'upload') {
+			total_percentage = ftt.loading_data.percentage;
+		} else {
+			const percentage_array = ftt.data.destination_display_data.map(
+				(dd) => dd.loading_data.percentage
+			);
+			total_percentage =
+				(ftt.loading_data.percentage + percentage_array.reduce((total, n) => total + n, 0)) /
+				(1 + percentage_array.length);
+		}
+
+		return Math.min(total_percentage, 100);
+	}
+
+	async function get_size_recursively(file: Inode): Promise<number> {
+		if (is_folder(file)) {
+			const folder_elements = await get_folder_elements(
+				file.path + file.name + '/',
+				$selected_online_display_ids
+			);
+			let out: number = 0;
+			for (const el of folder_elements) {
+				out += await get_size_recursively(el);
+			}
+			return out;
+		} else {
+			return file.size;
 		}
-		let total_percentage = percentage_sum / display_data.length;
-		return {
-			is_loading,
-			total_percentage,
-			total_seconds_until_finish,
-			display_data
-		};
 	}
 </script>
 
@@ -249,46 +256,58 @@
 	{#if !not_interactable}
 		<div class="h-{$current_height.file} aspect-square max-w-15 flex">
 			<Button
-				disabled={!is_folder && get_file_type(file) === null}
-				title={!is_folder && get_file_type(file) === null ? 'Dateityp nicht unterstützt' : ''}
-				className="flex rounded-l-lg rounded-r-none {is_folder
+				disabled={(!file_is_folder && get_file_type(file) === null) || colliding_warning}
+				title={!file_is_folder && get_file_type(file) === null
+					? 'Dateityp nicht unterstützt'
+					: colliding_warning
+						? 'Dateien kollidieren auf verschiedenen Bildschirmen'
+						: ''}
+				className="flex rounded-l-lg rounded-r-none {file_is_folder
 					? 'text-stone-450'
 					: 'text-stone-800'} w-full"
 				div_class="w-full"
-				bg={get_selectable_color_classes(
-					!is_folder && get_file_type(file) !== null,
-					{
-						bg: true
-					},
-					-50
-				)}
-				hover_bg={get_selectable_color_classes(
-					!is_folder,
-					{
-						bg: true
-					},
-					50
-				)}
-				active_bg={get_selectable_color_classes(
-					!is_folder,
-					{
-						bg: true
-					},
-					100
-				)}
+				bg={colliding_warning
+					? 'bg-red-400'
+					: get_selectable_color_classes(
+							!file_is_folder && get_file_type(file) !== null,
+							{
+								bg: true
+							},
+							-50
+						)}
+				hover_bg={colliding_warning
+					? 'bg-red-500'
+					: get_selectable_color_classes(
+							!file_is_folder,
+							{
+								bg: true
+							},
+							50
+						)}
+				active_bg={colliding_warning
+					? 'bg-red-500'
+					: get_selectable_color_classes(
+							!file_is_folder,
+							{
+								bg: true
+							},
+							100
+						)}
 				click_function={(e) => {
 					open();
 					e.stopPropagation();
 				}}
 			>
-				{#if is_folder}
+				{#if file_is_folder}
 					<ArrowRight class="size-full" strokeWidth="3" />
-				{:else if $missing_colliding_displays_ids && $missing_colliding_displays_ids.missing.length !== 0}
-					<RefreshPlay className="size-full" />
-				{:else if get_file_type(file) !== null}
-					<Play class="size-full" strokeWidth="3" />
-				{:else}
+				{:else if get_file_type(file) === null}
 					<Ban class="size-full" strokeWidth="3" />
+				{:else if colliding_warning}
+					<TriangleAlert class="size-full" strokeWidth="3" />
+				{:else if !!$missing_colliding_displays_ids && $missing_colliding_displays_ids.missing.length !== 0}
+					<RefreshPlay className="size-full" />
+				{:else}
+					<Play class="size-full" strokeWidth="3" />
 				{/if}
 			</Button>
 		</div>
@@ -302,17 +321,15 @@
 		{onclick}
 		class="{get_main_classes()} relative transition-colors duration-200 gap-4 flex flex-row justify-between group w-full min-w-0"
 	>
-		{#if $loading_data?.is_loading}
-			<!-- <div class="pointer-events-none absolute inset-0"> -->
+		{#if !!file_transfer_task_list}
 			<div
-				class="absolute pointer-events-none inset-y-0 left-0 transition-[width] duration-200 bg-stone-600 rounded-r-lg"
-				style={`width: ${$loading_data.total_percentage}%;`}
+				class="absolute pointer-events-none inset-y-0 left-0 transition-[width] duration-400 bg-stone-600 rounded-r-lg"
+				style={`width: ${get_total_percentage(file_transfer_task_list)}%;`}
 			></div>
-			<!-- </div> -->
 		{/if}
 		<div class="flex flex-row gap-2 min-w-0 w-full z-10">
 			<div class="aspect-square rounded-md flex justify-center items-center">
-				{#if is_folder}
+				{#if file_is_folder}
 					<Folder class="size-full p-2" />
 				{:else if $thumbnail_url || null}
 					<img
@@ -329,43 +346,16 @@
 				{/if}
 			</div>
 			<div class="content-center truncate select-none w-full" title={file.name}>
-				{file.name.includes('.') && !is_folder && get_file_type(file)
+				{file.name.includes('.') && !file_is_folder && get_file_type(file)
 					? file.name.slice(0, file.name.lastIndexOf('.'))
 					: file.name}
 			</div>
 		</div>
 		<div
 			class=" p-1 flex flex-row items-center gap-1 pr-1 z-10 {get_grayed_out_text_color_strings(
-				is_selected(get_file_primary_key(file), $selected_file_ids)
+				is_selected(file_primary_key, $selected_file_ids)
 			)} duration-200 transition-colors"
 		>
-			<!-- {#if get_display_ids_where_file_is_missing($current_file_path, file, $selected_display_ids, $all_files)[1].length !== 0}
-				<Button
-					className="h-8 aspect-square transition-colors duration-200 !p-1.5 text-stone-100"
-					bg="bg-red-500"
-					click_function={(e) => {
-						e.stopPropagation();
-					}}
-				>
-					<TriangleAlert class="size-full" />
-				</Button>
-			{:else if get_display_ids_where_file_is_missing($current_file_path, file, $selected_display_ids, $all_files)[0].length !== 0}
-				<Button
-					className="h-8 aspect-square transition-colors duration-200 !p-1.5"
-					bg="bg-transparent"
-					hover_bg={get_selectable_color_classes(false, {
-						bg: true
-					})}
-					active_bg={get_selectable_color_classes(false, {
-						bg: true
-					})}
-					click_function={(e) => {
-						e.stopPropagation();
-					}}
-				>
-					<RefreshCcwDot class="size-full" />
-				</Button>
-			{/if} -->
 			<div
 				class="w-14 content-center text-center select-none text-xs whitespace-nowrap"
 				title={get_created_info($date_mapping, true)}
@@ -374,25 +364,25 @@
 			</div>
 			<div
 				class="h-[70%] border {get_grayed_out_border_color_strings(
-					is_selected(get_file_primary_key(file), $selected_file_ids)
+					is_selected(file_primary_key, $selected_file_ids)
 				)} duration-200 transition-colors my-1"
 			></div>
 			<div
 				class="w-12 content-center text-center select-none text-xs whitespace-nowrap truncate"
 				title={file.type}
 			>
-				{is_folder ? 'Ordner' : (get_file_type(file)?.display_name ?? '?')}
+				{file_is_folder ? 'Ordner' : (get_file_type(file)?.display_name ?? '?')}
 			</div>
 			<div
 				class="h-[70%] border {get_grayed_out_border_color_strings(
-					is_selected(get_file_primary_key(file), $selected_file_ids)
+					is_selected(file_primary_key, $selected_file_ids)
 				)} duration-200 transition-colors"
 			></div>
 			<div
 				class="w-12 content-center text-center select-none text-xs whitespace-nowrap"
-				title={get_file_size_display_string(file.size, 3)}
+				title={get_file_size_display_string($file_size ?? -1, 3)}
 			>
-				{get_file_size_display_string(file.size)}
+				{get_file_size_display_string($file_size ?? -1)}
 			</div>
 		</div>
 	</div>

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

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import type { NumberSetting } from '$lib/ts/types';
+	import { ChevronDown, ChevronUp } from 'lucide-svelte';
+	import Button from './Button.svelte';
+
+	let {
+		number_setting,
+		on_change,
+		className = '',
+        disabled = false,
+	}: {
+		number_setting: NumberSetting;
+		on_change: (new_value: number) => void;
+		className?: string;
+        disabled?: boolean;
+	} = $props();
+
+	let el: HTMLInputElement | null = null;
+
+	function increase() {
+        if (!el) return;
+		el.stepUp();
+		el.dispatchEvent(new Event('input', { bubbles: true }));
+		on_change(Number(el.value));
+	}
+
+	function decrease() {
+        if (!el) return;
+		el.stepDown();
+		el.dispatchEvent(new Event('input', { bubbles: true }));
+        on_change(Number(el.value));
+	}
+
+    function on_blur() {
+        if (!el) return;
+        let value = Number(el.value);
+        if (value > number_setting.max) value = number_setting.max;
+        else if (value < number_setting.min) value = number_setting.min;
+        el.value = String(value);
+        on_change(value);
+    }
+</script>
+
+<div class="flex flex-row {className}">
+	<Button click_function={increase} className="rounded-r-none" disabled={disabled}>
+        <ChevronUp />
+    </Button>
+	<input
+        bind:this={el}
+		class="bg-stone-700 focus:bg-stone-550 focus:outline-none transition-colors duration-200 py-2 px-4 w-15 text-center
+        {disabled ? 'text-stone-500 cursor-not-allowed' : 'hover:bg-stone-600'}
+        [appearance:textfield]
+        [&::-webkit-outer-spin-button]:appearance-none
+        [&::-webkit-inner-spin-button]:appearance-none"
+		type="number"
+        disabled={disabled}
+		max={number_setting.max}
+		min={number_setting.min}
+		value={number_setting.now}
+		step={number_setting.step}
+        onblur={on_blur}
+	/>
+    <Button click_function={decrease} className="rounded-l-none" disabled={disabled}>
+        <ChevronDown />
+    </Button>
+</div>

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

@@ -18,7 +18,7 @@
 	} = $props();
 
 	function try_to_close() {
-		if (!content.closable || !content.open) return;
+		if (!content.open) return;
 		close_function();
 	}
 
@@ -35,19 +35,13 @@
 </script>
 
 {#if content.open}
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<div
 		class="absolute inset-0 backdrop-blur flex justify-center items-center z-50 {className}"
-		onclick={try_to_close}
 		transition:fade={{ duration: 100 }}
 	>
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<div
 			class="bg-stone-800 rounded-2xl min-w-[30%] max-w-[90%] max-h-[85%] flex flex-col shadow-2xl/60 overflow-hidden {content.window_class ??
 				''}"
-			onclick={(e) => e.stopPropagation()}
 		>
 			{#if content.title}
 				<div class="font-bold bg-stone-700 p-1.5 flex flex-row justify-between gap-8 w-full">
@@ -64,16 +58,16 @@
 						</div>
 					</div>
 					<div class="flex aspect-square shrink-0">
-						{#if content.closable}
-							<Button className="aspect-square p-1.5!" click_function={try_to_close}>
-								<X />
-							</Button>
-						{/if}
+						<Button className="aspect-square p-1.5!" click_function={try_to_close}>
+							<X />
+						</Button>
 					</div>
 				</div>
 			{/if}
 			<div class="p-2 min-h-0 overflow-auto flex flex-col gap-2 {snippet_container_class}">
-				{@render content.snippet(content.snippet_arg)}
+				{#if content.snippet}
+					{@render content.snippet(content.snippet_arg ?? '')}
+				{/if}
 			</div>
 		</div>
 	</div>

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

@@ -30,7 +30,7 @@
 		enter_function?: (() => void) | null;
 	} = $props();
 
-	let focus_bg = get_shifted_color(bg, 100);
+	let focus_bg = $derived(get_shifted_color(bg, 100));
 	let focused: boolean = $state(false);
 	let current_info = $state('');
 	let input_element: HTMLInputElement;
@@ -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

@@ -1,5 +1,6 @@
 import { notifications } from './stores/notification';
 import {
+	is_folder,
 	to_display_status,
 	type DisplayStatus,
 	type Inode,
@@ -9,6 +10,9 @@ import {
 } from './types';
 import { dev } from '$app/environment';
 import { get_sanitized_file_url } from './utils';
+import { online_displays } from './stores/displays';
+import { get } from 'svelte/store';
+import { update_display_status } from './main';
 
 export async function get_screenshot(ip: string): Promise<Blob | null> {
 	const options = { method: 'PATCH' };
@@ -22,7 +26,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' },
@@ -33,7 +40,7 @@ export async function send_keyboard_input(ip: string, inputs: { key: string; act
 	await request_display(ip, '/keyboardInput', options);
 }
 
-export async function show_html(ip: string, html: string) {
+export async function show_html(ip: string, html: string): Promise<void> {
 	const options = {
 		method: 'PATCH',
 		headers: { 'content-type': 'application/json' },
@@ -44,6 +51,17 @@ export async function show_html(ip: string, html: string) {
 	await request_display(ip, '/showHTML', options);
 }
 
+export async function open_website(ip: string, url: string): Promise<void> {
+	const options = {
+		method: 'PATCH',
+		headers: { 'content-type': 'application/json' },
+		body: JSON.stringify({
+			url: url
+		})
+	};
+	await request_display(ip, '/openWebsite', options);
+}
+
 export async function get_file_data(
 	ip: string,
 	path: string
@@ -69,6 +87,7 @@ export async function get_file_data(
 	const json_response = raw_response.json as ShellCommandResponse;
 	if (json_response.exitCode === 0 && json_response.stdout.trim() === '') return [];
 	if (handle_shell_error(ip, json_response, command, true)) return null;
+	if (json_response.stdout.trim() === '') return null;
 
 	const response: FileInfo[] = json_response.stdout
 		.trim()
@@ -88,6 +107,7 @@ export async function get_file_data(
 			size: Number(response_element.size),
 			thumbnail: null
 		};
+		if (is_folder(folder_element)) folder_element.size = 0;
 		folder_element_list.push({ folder_element, date_created: new Date(response_element.created) });
 	}
 	return folder_element_list;
@@ -106,16 +126,8 @@ export async function get_file_tree_data(ip: string, path: string): Promise<Tree
 	return tree_element?.contents || null;
 }
 
-export async function create_folders(
-	ip: string,
-	path: string,
-	folder_names: string[]
-): Promise<void> {
-	let command = `cd ".${path}"`;
-
-	for (const part of folder_names) {
-		command += ` && mkdir "${part}" && cd "${part}/"`;
-	}
+export async function create_path(ip: string, path: string): Promise<void> {
+	const command = `mkdir -p ".${path}"`;
 
 	const raw_response = await run_shell_command(ip, command);
 	if (!raw_response.ok || !raw_response.json) return;
@@ -174,15 +186,21 @@ export async function get_thumbnail_blob(ip: string, path_to_file: string): Prom
 	return raw_response.blob;
 }
 
-export async function ping_ip(ip: string): Promise<DisplayStatus> {
+export async function ping_ip(ip: string): Promise<{ status: DisplayStatus; version?: string }> {
 	const raw_response = await request_control(`/ping?ip=${ip}`, { method: 'GET' });
-	if (!raw_response.ok || !raw_response.json) return null;
+	if (!raw_response.ok || !raw_response.json) return { status: null };
 
-	const status = raw_response.json.status;
-	if (typeof status === 'string') {
-		return to_display_status(status);
+	const raw_status = raw_response.json.status;
+	if (typeof raw_status === 'string') {
+		const status = to_display_status(raw_status);
+		const version = raw_response.json.version;
+		if (typeof version === 'string') {
+			return { status, version };
+		} else {
+			return { status };
+		}
 	}
-	return null;
+	return { status: null };
 }
 
 async function request_display(
@@ -192,14 +210,30 @@ async function request_display(
 	supress_error_handling_http_codes: number[] = []
 ): Promise<RequestResponse> {
 	const url = `http://${ip}:1323/api${api_route}`;
-	return await request(url, options, supress_error_handling_http_codes);
+
+	const current_online_displays = get(online_displays);
+	if (!current_online_displays.map((d) => d.ip).includes(ip)) return { ok: false };
+
+	const response = await request(url, options, supress_error_handling_http_codes);
+	if (!response.ok && response.http_code === 408) {
+		// Network error -> device possibly not longer online -> test status and throw no error if its offline
+		const possible_displays = current_online_displays.filter((d) => d.ip === ip);
+		for (const display of possible_displays) {
+			const current_status = await update_display_status(display);
+			if (current_status === 'app_online') {
+				console.error(`No response from ${url}`);
+				notifications.push('error', 'Netzwerk-Fehler bei API-Anfrage', `${url}`);
+			}
+		}
+	}
+	return response;
 }
 
 async function request_control(
 	api_route: string,
 	options: { method: string; headers?: Record<string, string>; body?: string }
 ): Promise<RequestResponse> {
-	const url = `http://127.0.0.1:8080/api${api_route}`;
+	const url = `${dev ? 'http://127.0.0.1:8080' : window.location.origin}/api${api_route}`;
 	return await request(url, options);
 }
 
@@ -210,9 +244,6 @@ async function request(
 ): Promise<RequestResponse> {
 	try {
 		const cache_buster = `${url.includes('?') ? '&' : '?'}=${Date.now()}`;
-		if (dev) {
-			console.debug('Sending request: ', url + cache_buster, 'with', options.body ?? 'none');
-		}
 		const response = await fetch(url + cache_buster, options);
 		if (response.ok || supress_error_handling_http_codes.includes(response.status)) {
 			const contentType = response.headers.get('content-type') || '';
@@ -223,9 +254,6 @@ async function request(
 			} else {
 				const json: Record<string, unknown> = await response.json();
 				request_response = { ok: response.ok, http_code: response.status, json: json };
-				if (dev) {
-					console.debug(request_response);
-				}
 			}
 			return request_response;
 		}
@@ -239,12 +267,17 @@ async function request(
 				error_description += '\nCould not parse error description';
 			}
 		}
-		notifications.push('error', `Fehler ${response.status} bei API-Anfrage`, error_description);
+		notifications.push(
+			'error',
+			`Fehler bei API-Anfrage`,
+			`\nHTTP: ${response.status}\n${error_description}`
+		);
 	} catch (error: unknown) {
 		if (error instanceof TypeError && /fetch|NetworkError/i.test(error.message)) {
 			if (dev) {
 				console.warn('Request failed - Is the targeted device online?');
 			}
+			return { ok: false, http_code: 408 };
 		} else {
 			console.error(url, error);
 			notifications.push('error', `Fataler Fehler bei API-Anfrage`, `${url}\nFehler: ${error}`);
@@ -273,12 +306,11 @@ function handle_shell_error(
 		console.error(shell_response);
 		notifications.push(
 			'error',
-			`Fehler ${shell_response.exitCode} in API-Shell`,
-			`${ip}\n${shell_command}\nFehler: ${shell_response.stderr}`
+			`Fehler in API-Shell`,
+			`${ip}\n${shell_command}\nFehler (${shell_response.exitCode}): ${shell_response.stderr}`
 		);
 		return true;
 	}
-	if (shell_response.stdout.trim() === '') return true;
 	return false;
 }
 
@@ -294,7 +326,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/database.ts

@@ -23,8 +23,7 @@ export class FileDatabase extends Dexie {
         [display_id+file_primary_key],
         display_id,
         file_primary_key,
-        date_created,
-        loading_data
+        date_created
       `,
 			displays: `
         id,

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

@@ -1,15 +1,18 @@
+import { get, writable, type Writable } from 'svelte/store';
 import { db } from './database';
-import { get_display_by_id } from './stores/displays';
+import { get_display_by_id, run_on_all_selected_displays } from './stores/displays';
 import {
-	get_current_folder_elements,
+	create_path_on_all_selected_displays,
+	get_folder_elements,
 	get_file_by_id,
 	remove_all_files_without_display,
-	remove_file_from_display
+	remove_file_from_display_recusively
 } from './stores/files';
 import { notifications } from './stores/notification';
 import { generate_thumbnail } from './stores/thumbnails';
 import {
 	get_file_primary_key,
+	is_folder,
 	type FileLoadingData,
 	type FileOnDisplay,
 	type FileTransferTask,
@@ -17,9 +20,30 @@ import {
 	type ShortDisplay
 } from './types';
 import { get_sanitized_file_url, get_uuid, make_valid_name } from './utils';
+import { open_file } from './api_handler';
+
+const START_LOADING_DATA = {
+	percentage: 0,
+	bytes_per_second: 0,
+	seconds_until_finish: -1
+};
+
+export const file_transfer_tasks: Writable<Record<string, FileTransferTask[]>> = writable<
+	Record<string, FileTransferTask[]>
+>({});
 
 let is_processing: boolean = false;
-const tasks: FileTransferTask[] = [];
+
+function add_file_transfer_task(file_primary_key: string, new_task: FileTransferTask) {
+	file_transfer_tasks.update((tasks) => {
+		if (Object.hasOwn(tasks, file_primary_key)) {
+			tasks[file_primary_key].push(new_task);
+			return tasks;
+		} else {
+			return { ...tasks, [file_primary_key]: [new_task] };
+		}
+	});
+}
 
 export async function add_upload(
 	file_list: FileList,
@@ -27,9 +51,10 @@ export async function add_upload(
 	current_file_path: string
 ) {
 	if (file_list.length === 0) return console.warn('Upload canceled: no selected files');
+	await create_path_on_all_selected_displays(current_file_path, selected_display_ids);
 
 	const used_file_names: string[] = await (
-		await get_current_folder_elements(current_file_path, selected_display_ids)
+		await get_folder_elements(current_file_path, selected_display_ids)
 	).map((e) => e.name);
 
 	for (const file of file_list) {
@@ -44,6 +69,10 @@ export async function add_upload(
 			thumbnail: null
 		};
 		const file_primary_key = get_file_primary_key(db_file);
+
+		if (Object.hasOwn(file_transfer_tasks, file_primary_key))
+			return show_already_in_tasks_error(db_file, 'upload'); // file is already in task
+
 		await db.files.put(db_file);
 
 		const upload_task_promises = selected_display_ids.map(async (display_id) => {
@@ -53,17 +82,11 @@ export async function add_upload(
 			const db_file_on_display: FileOnDisplay = {
 				display_id,
 				file_primary_key,
-				date_created: new Date(),
-				loading_data: {
-					type: 'upload',
-					percentage: 0,
-					bytes_per_second: 0,
-					seconds_until_finish: -1
-				}
+				date_created: new Date()
 			};
 			await db.files_on_display.put(db_file_on_display);
 
-			return {
+			const new_task = {
 				data: {
 					type: 'upload' as const,
 					file
@@ -74,58 +97,73 @@ export async function add_upload(
 				},
 				path: current_file_path,
 				file_name: file_name,
-				file_primary_key,
+				loading_data: START_LOADING_DATA,
 				bytes_total: file.size
 			};
+			add_file_transfer_task(file_primary_key, new_task);
 		});
 
-		const upload_tasks = (await Promise.all(upload_task_promises)).filter((e) => !!e);
-		tasks.push(...upload_tasks);
+		await Promise.all(upload_task_promises);
 	}
 
 	await start_task_processing();
 }
 
-export async function add_sync(selected_file_id: string, selected_display_ids: string[]) {
+export async function add_sync_recursively(
+	selected_file_id: string,
+	selected_display_ids: string[],
+	open_file_afterwards: boolean = false
+) {
 	const file_data = await find_file_data_on_active_selected_display(
 		selected_file_id,
 		selected_display_ids
 	);
 	if (!file_data) return console.warn('Sync canceled: no file_data');
 
-	tasks.push({
+	if (is_folder(file_data.file)) {
+		const new_path = file_data.file.path + file_data.file.name + '/';
+		const elements_in_folder = await get_folder_elements(new_path, selected_display_ids);
+		if (elements_in_folder.length === 0) {
+			await create_path_on_all_selected_displays(new_path, selected_display_ids);
+		} else {
+			for (const el of elements_in_folder) {
+				await add_sync_recursively(get_file_primary_key(el), selected_display_ids);
+			}
+		}
+		return; // cannot sync folder
+	}
+
+	if (file_data.short_displays_without_file.length === 0) return; // file is present on all selected displays
+	if (Object.prototype.hasOwnProperty.call(file_transfer_tasks, selected_file_id))
+		return show_already_in_tasks_error(file_data.file, 'sync'); // file is already in task
+	await create_path_on_all_selected_displays(file_data.file.path, selected_display_ids);
+
+	const new_task: FileTransferTask = {
 		data: {
 			type: 'sync',
-			destination_displays: file_data.short_displays_without_file
+			destination_display_data: file_data.short_displays_without_file.map((display) => ({
+				display,
+				loading_data: START_LOADING_DATA
+			})),
+			open_file_afterwards_on_display_ids: open_file_afterwards ? selected_display_ids : []
 		},
 		display: file_data.short_display_with_file,
 		path: file_data.file.path,
 		file_name: file_data.file.name,
-		file_primary_key: selected_file_id,
+		loading_data: START_LOADING_DATA,
 		bytes_total: file_data.file.size
-	});
+	};
+
+	add_file_transfer_task(selected_file_id, new_task);
 
-	await db.files_on_display.update([file_data.short_display_with_file.id, selected_file_id], {
-		loading_data: {
-			type: 'sync_download',
-			percentage: 0,
-			bytes_per_second: 0,
-			seconds_until_finish: -1
-		}
-	});
 	const display_ids_without_file = file_data.short_displays_without_file.map((d) => d.id);
-	await db.files_on_display
-		.where('file_primary_key')
-		.equals(selected_file_id)
-		.filter((e) => display_ids_without_file.includes(e.display_id))
-		.modify({
-			loading_data: {
-				type: 'sync_upload',
-				percentage: 0,
-				bytes_per_second: 0,
-				seconds_until_finish: -1
-			}
-		});
+	const new_fods: FileOnDisplay[] = display_ids_without_file.map((display_id) => ({
+		display_id,
+		file_primary_key: selected_file_id,
+		date_created: new Date()
+	}));
+	await db.files_on_display.bulkPut(new_fods);
+
 	await start_task_processing();
 }
 
@@ -197,24 +235,19 @@ function generate_valid_file_name(original_file_name: string, used_file_names: s
 	return name;
 }
 
-async function upload(task: FileTransferTask): Promise<void> {
+async function upload(
+	file_primary_key: string,
+	task: FileTransferTask,
+	list_index: number
+): 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);
+	await upload_file_via_xhr(file_primary_key, list_index, task, task_data.file);
 }
 
-export async function sync(task: FileTransferTask) {
+export async function sync(file_primary_key: string, task: FileTransferTask, list_index: number) {
 	if (task.data.type !== 'sync') return console.warn('Task cancelled: wrong task type:', task);
 
 	const hasOPFS =
@@ -222,7 +255,8 @@ export async function sync(task: FileTransferTask) {
 		'storage' in navigator &&
 		'getDirectory' in navigator.storage;
 	if (!hasOPFS) {
-		return show_error(
+		return show_general_error(
+			file_primary_key,
 			task,
 			'OPFS (navigator.storage.getDirectory) nicht verfügbar – bitte Chromium/Edge/Chrome nutzen.'
 		);
@@ -235,7 +269,7 @@ export async function sync(task: FileTransferTask) {
 		const url = `http://${task.display.ip}:1323/api${get_sanitized_file_url(task.path + task.file_name)}`;
 		const fetch_source = await fetch(url, { method: 'GET' });
 		if (!fetch_source.ok || !fetch_source.body)
-			return show_error(task, `HTTP ${fetch_source.status}`);
+			return show_general_error(file_primary_key, task, `HTTP ${fetch_source.status}`);
 
 		const dir = await navigator.storage.getDirectory();
 		const file_handle = await dir.getFileHandle(temp_name, { create: true });
@@ -248,21 +282,39 @@ export async function sync(task: FileTransferTask) {
 			if (done) break;
 			if (!value) continue;
 
-			await update_current_loading_data('sync_download', task, value.byteLength, start_time);
+			update_current_loading_data(file_primary_key, list_index, value.byteLength, start_time);
 			await writable.write(value);
 		}
 		await writable.close();
 
+		finish_loading_data(file_primary_key, list_index);
+
 		// 02 - send downloaded file to every destination_display
 		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);
+		for (const current_short_display of task.data.destination_display_data) {
+			await upload_file_via_xhr(
+				file_primary_key,
+				list_index,
+				task,
+				temp_file,
+				current_short_display.display
+			);
 		}
 
 		await dir.removeEntry(temp_name);
+
+		// open file, if required
+		if (task.data.open_file_afterwards_on_display_ids.length !== 0) {
+			const path_to_file = task.path + task.file_name;
+			await run_on_all_selected_displays(
+				(d) => open_file(d.ip, path_to_file),
+				true,
+				task.data.open_file_afterwards_on_display_ids
+			);
+		}
 	} catch (e) {
-		show_error(task, String(e));
+		show_general_error(file_primary_key, task, String(e));
 	}
 }
 
@@ -271,7 +323,7 @@ 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 || is_folder(file_data.file)) 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)}`;
@@ -294,81 +346,193 @@ export async function download_file(selected_file_id: string, selected_display_i
 
 async function start_task_processing() {
 	if (!is_processing) {
-		is_processing = tasks.length !== 0;
+		is_processing = Object.keys(get(file_transfer_tasks)).length !== 0;
 		await start_task_loop();
 	}
 }
 
 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);
+	while (Object.keys(get(file_transfer_tasks)).length > 0) {
+		const tasks = get(file_transfer_tasks);
+		const current_file_id = Object.keys(tasks)[0];
+		const current_task_list = tasks[current_file_id];
+
+		for (const [list_index, current_task] of current_task_list.entries()) {
+			if (current_task.data.type === 'upload') {
+				await upload(current_file_id, current_task, list_index);
+			} else if (current_task.data.type === 'sync') {
+				await sync(current_file_id, current_task, list_index);
+			}
+			delete_current_task_if_needed(current_file_id);
 		}
-		else if (current_task.data.type === 'sync') {
-			await sync(current_task);
-		}
-		tasks.shift(); // Remove current_task from tasks
 	}
 	is_processing = false;
 }
 
-async function upload_file_via_xhr(task: FileTransferTask, current_short_display: ShortDisplay, current_file: File) {
+function delete_current_task_if_needed(current_file_id: string) {
+	file_transfer_tasks.update((all_tasks) => {
+		const next = { ...all_tasks };
+		const current_tasks = next[current_file_id];
+		if (current_tasks.length !== 1) {
+			if (current_tasks.find((t) => t.loading_data.percentage !== 100)) {
+				return next; // not all tasks are finished -> do nothing
+			}
+		}
+		delete next[current_file_id];
+		return next;
+	});
+}
+
+async function upload_file_via_xhr(
+	file_primary_key: string,
+	list_index: number,
+	task: FileTransferTask,
+	current_file: File,
+	destination_short_display: ShortDisplay | null = null
+) {
 	const start_time = new Date();
 
 	return new Promise<void>((resolve) => {
 		const xhr = new XMLHttpRequest();
 		xhr.open(
 			'POST',
-			`http://${current_short_display.ip}:1323/api${get_sanitized_file_url(task.path + task.file_name)}`,
+			`http://${destination_short_display ? destination_short_display.ip : task.display.ip}:1323/api${get_sanitized_file_url(task.path + task.file_name)}`,
 			true
 		);
 		xhr.setRequestHeader('content-type', 'application/octet-stream');
 
 		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);
+				update_current_loading_data(
+					file_primary_key,
+					list_index,
+					e.loaded,
+					start_time,
+					destination_short_display ? destination_short_display.id : null
+				);
 			};
 			apply();
 		};
 
 		xhr.onerror = async (e: ProgressEvent) => {
-			await show_error(task, e);
+			await show_general_error(file_primary_key, task, e);
 			resolve();
 		};
 
 		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], {
-						loading_data: null
-					}); // TODO: Stattdessen update machen und gucken, ob die Datei wirklich da ist
+					// set loading_data to 100%
+					finish_loading_data(
+						file_primary_key,
+						list_index,
+						destination_short_display ? destination_short_display.id : null
+					);
+					// Generate Thumbnail if not done already
+					setTimeout(async () => {
+						const inode_element: Inode | undefined = await db.files.get(
+							JSON.parse(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}`);
+					await show_general_error(file_primary_key, task, `HTTP ${xhr.status}`);
 				}
 				resolve();
 			}
 		};
 
 		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) {
-	const current_percentage = task.bytes_total > 0 ? Math.round((current_bytes / task.bytes_total) * 100) : 1;
-	const prognosed_data = get_prognosed_data(start_time, current_bytes, task.bytes_total);
+function finish_loading_data(
+	file_primary_key: string,
+	list_index: number,
+	destination_display_id: string | null = null
+) {
+	file_transfer_tasks.update((tasks) => {
+		const current_loading_data = {
+			percentage: 100,
+			bytes_per_second: 0,
+			seconds_until_finish: 0
+		};
+		const new_task_list = tasks[file_primary_key].map((task, index) =>
+			index === list_index
+				? get_updated_task(current_loading_data, destination_display_id, task)
+				: task
+		);
 
-	await db.files_on_display.update([other_display_id ? other_display_id : task.display.id, task.file_primary_key], {
-		loading_data: {
-			type,
+		return {
+			...tasks,
+			[file_primary_key]: new_task_list
+		};
+	});
+}
+
+function update_current_loading_data(
+	file_primary_key: string,
+	list_index: number,
+	current_bytes: number,
+	start_time: Date,
+	destination_display_id: string | null = null
+) {
+	file_transfer_tasks.update((tasks) => {
+		const task = tasks[file_primary_key][list_index];
+		if (!task) return tasks;
+
+		const current_percentage = Math.min(
+			task.bytes_total > 0 ? Math.round((current_bytes / task.bytes_total) * 100) : 1,
+			99
+		);
+		const prognosed_data = get_prognosed_data(start_time, current_bytes, task.bytes_total);
+
+		const current_loading_data: FileLoadingData = {
 			percentage: current_percentage,
 			bytes_per_second: prognosed_data.bytes_per_second,
 			seconds_until_finish: prognosed_data.seconds_until_finish
-		}
+		};
+
+		const new_task_list = tasks[file_primary_key].map((task, index) =>
+			index === list_index
+				? get_updated_task(current_loading_data, destination_display_id, task)
+				: task
+		);
+
+		return {
+			...tasks,
+			[file_primary_key]: new_task_list
+		};
 	});
 }
 
+function get_updated_task(
+	current_loading_data: FileLoadingData,
+	destination_display_id: string | null,
+	task: FileTransferTask
+): FileTransferTask {
+	if (destination_display_id && task.data.type === 'sync') {
+		const updatedDestinations = task.data.destination_display_data.map((dd) =>
+			dd.display.id === destination_display_id ? { ...dd, loading_data: current_loading_data } : dd
+		);
+
+		return {
+			...task,
+			data: {
+				...task.data,
+				destination_display_data: updatedDestinations
+			}
+		};
+	} else {
+		return {
+			...task,
+			loading_data: current_loading_data
+		};
+	}
+}
+
 function get_prognosed_data(
 	start_time: Date,
 	bytes_done: number,
@@ -381,7 +545,11 @@ function get_prognosed_data(
 	return { bytes_per_second, seconds_until_finish };
 }
 
-async function show_error(task: FileTransferTask, error: ProgressEvent | string) {
+async function show_general_error(
+	file_primary_key: string,
+	task: FileTransferTask,
+	error: ProgressEvent | string
+) {
 	const task_data = task.data;
 	console.error('Error in File-Transfer-Handler:', error, task);
 	notifications.push(
@@ -390,12 +558,20 @@ async function show_error(task: FileTransferTask, error: ProgressEvent | string)
 		`Datei: "${task.file_name}", Display-IP: ${task.display.ip}\nFehler: ${error}`
 	);
 	if (task_data.type === 'upload') {
-		await remove_file_from_display(task.display.id, task.file_primary_key);
+		await remove_file_from_display_recusively(task.display.id, file_primary_key);
 		await remove_all_files_without_display();
 	} else if (task_data.type === 'sync') {
-		for (const display_id of task_data.destination_displays.map((e) => e.id)) {
-			await remove_file_from_display(display_id, task.file_primary_key);
+		for (const display_id of task_data.destination_display_data.map((e) => e.display.id)) {
+			await remove_file_from_display_recusively(display_id, file_primary_key);
 		}
 		await remove_all_files_without_display();
 	}
 }
+
+function show_already_in_tasks_error(file: Inode, process: 'upload' | 'sync') {
+	notifications.push(
+		'error',
+		`Datei '${file.name}' konnte nicht ${process === 'upload' ? 'hochgeladen' : 'synchronisiert'} werden`,
+		`Eine Datei kann nicht in mehreren file_transfer_tasks enthalten sein. Bitte erneut versuchen, wenn die aktuellen Aktionen fertiggestellt wurden`
+	);
+}

control/frontend/src/lib/ts/main.ts

@@ -1,34 +1,75 @@
 import { screenshot_loop } from './stores/displays';
 import { ping_ip } from './api_handler';
-import type { Display } from './types';
+import type { Display, DisplayStatus } from './types';
 import { update_folder_elements_recursively } from './stores/files';
 import { db } from './database';
 
 const update_display_status_interval_seconds = 20;
+const update_display_loading_status_interval_seconds = 2;
 
-export async function on_start() {
+const loading_display_ids: string[] = [];
+
+export async function on_app_start() {
 	await db.files.clear();
 	await db.files_on_display.clear();
-	await update_all_display_status();
-	await setInterval(update_all_display_status, update_display_status_interval_seconds * 1000);
+	await db.displays
+		.toCollection()
+		.modify({ status: null, preview: { currently_updating: false, url: null } });
+	await update_all_display_status(false);
+	await setInterval(
+		() => update_all_display_status(false),
+		update_display_status_interval_seconds * 1000
+	);
+	await setInterval(
+		() => update_all_display_status(true),
+		update_display_loading_status_interval_seconds * 1000
+	);
 }
 
-async function update_all_display_status() {
-	const all_displays: Display[] = await db.displays.toArray();
-	for (const display of all_displays) {
-		const new_status = await ping_ip(display.ip);
-		if (new_status === null && display.status !== null) continue;
-		if (new_status === 'app_online' && display.status !== 'app_online') {
-			on_display_start(display);
-		}
-		if (new_status !== display.status) {
-			display.status = new_status;
-			await db.displays.put(display); // save
+async function update_all_display_status(only_loading_displays: boolean) {
+	const not_loading_displays: Display[] = await db.displays
+		.filter((d) =>
+			only_loading_displays
+				? loading_display_ids.includes(d.id)
+				: !loading_display_ids.includes(d.id)
+		)
+		.toArray();
+	for (const display of not_loading_displays) {
+		await update_display_status(display);
+	}
+}
+
+export async function update_display_status(display: Display): Promise<DisplayStatus> {
+	const resp = await ping_ip(display.ip);
+	if (resp.version && display.version !== resp.version) {
+		display.version = resp.version;
+		await db.displays.put(display); // save
+	}
+	if (resp.status === null && display.status !== null) return null;
+	if (resp.status !== display.status) {
+		// status change
+		if (resp.status === 'app_offline') {
+			loading_display_ids.push(display.id);
+		} else {
+			remove_display_from_loading_displays(display.id);
+			if (resp.status === 'app_online') {
+				on_display_start(display);
+			}
 		}
+		display.status = resp.status;
+		await db.displays.put(display); // save
+	}
+	return resp.status;
+}
+
+export function remove_display_from_loading_displays(display_id: string) {
+	const index = loading_display_ids.indexOf(display_id);
+	if (index !== -1) {
+		loading_display_ids.splice(index, 1);
 	}
 }
 
 async function on_display_start(display: Display) {
 	await update_folder_elements_recursively(display, '/');
-	await screenshot_loop(display.id);
+	screenshot_loop(display.id);
 }

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

@@ -1,10 +1,34 @@
-import { get } from 'svelte/store';
-import type { Display, DisplayGroup, DisplayStatus } from '../types';
+import { get, writable, type Writable } from 'svelte/store';
+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';
+import { remove_display_from_loading_displays } from '../main';
+import { preview_settings } from './ui_behavior';
+import { liveQuery } from 'dexie';
+
+export const online_displays: Writable<Display[]> = writable<Display[]>([]);
+
+export const online_displays_sub = liveQuery(() =>
+	db.displays.where('status').equals('app_online').toArray()
+).subscribe((value) => {
+	online_displays.set(value);
+	const current_online_display_ids = value.map((d) => d.id);
+	selected_online_display_ids.set(get(selected_display_ids).filter((id) => current_online_display_ids.includes(id)));
+});
+
+export const selected_online_display_ids: Writable<string[]> = writable<string[]>([]);
+
+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();
@@ -16,8 +40,8 @@ export async function add_display(
 	mac: string | null,
 	name: string,
 	status: DisplayStatus
-) {
-	if (await is_display_name_taken(name)) return;
+): Promise<Display | null> {
+	if (await is_display_name_taken(name)) return null;
 	const new_id = get_uuid();
 	const group = await db.display_groups.toCollection().first();
 	let group_id: string;
@@ -29,7 +53,7 @@ export async function add_display(
 	}
 	const element_count_in_group = (await db.displays.where('group_id').equals(group_id).toArray())
 		.length;
-	await db.displays.put({
+	const display = {
 		id: new_id,
 		ip,
 		mac,
@@ -38,7 +62,9 @@ export async function add_display(
 		group_id: group_id,
 		name,
 		status
-	});
+	};
+	await db.displays.put(display);
+	return display;
 }
 
 export async function edit_display_data(
@@ -46,11 +72,19 @@ export async function edit_display_data(
 	ip: string,
 	mac: string | null,
 	name: string
-) {
+): Promise<Display | null> {
 	let display = await db.displays.get(display_id);
-	if (!display) return;
-	display = { ...display, ip: ip, mac: mac, name: name };
+	if (!display) return null;
+	display = {
+		...display,
+		ip: ip,
+		mac: mac,
+		name,
+		preview: { currently_updating: false, url: null }
+	};
 	await db.displays.put(display); // save
+	screenshot_loop(display.id);
+	return display;
 }
 
 export async function remove_display(display_id: string) {
@@ -62,6 +96,7 @@ export async function remove_display(display_id: string) {
 	if (group_id && (await db.displays.where('group_id').equals(group_id).toArray()).length === 0) {
 		await db.display_groups.delete(group_id); // delete empty group
 	}
+	await remove_display_from_loading_displays(display_id);
 }
 
 export async function all_displays_of_group_selected(
@@ -103,62 +138,80 @@ export async function get_display_by_id(display_id: string): Promise<Display | n
 	return (await db.displays.get(display_id)) ?? null;
 }
 
-export async function screenshot_loop(display_id: string, initial_retry_count: number = 5) {
-	const display = await db.displays.get(display_id);
-	if (!display || display.preview.currently_updating) return;
+export function screenshot_loop(display_id: string) {
+	setTimeout(async () => {
+		let settings = get(preview_settings);
+		if (settings.mode === 'never') return;
 
-	display.preview.currently_updating = true;
-	await db.displays.update(display.id, { preview: display.preview });
+		const initial_retry_count = settings.retry_count.now;
+		const retry_seconds = get(preview_settings).retry_seconds.now;
 
-	let last_hash: number | null = null;
+		const display = await db.displays.get(display_id);
+		if (!display || display.preview.currently_updating) return;
 
-	let retry_count = initial_retry_count;
-	while (retry_count > 0) {
-		retry_count -= 1;
+		display.preview.currently_updating = true;
+		await db.displays.update(display.id, { preview: display.preview });
 
-		const new_blob = await get_screenshot(display.ip);
-		if (!new_blob) {
-			display.preview = { currently_updating: false, url: null };
-			await db.displays.update(display.id, { preview: display.preview });
-			return;
-		}
-		const new_hash = await image_content_hash(new_blob);
-		if (last_hash !== new_hash) {
-			if (display.preview.url) {
-				URL.revokeObjectURL(display.preview.url);
+		let last_hash: number | null = null;
+
+		let retry_count = initial_retry_count;
+		while (retry_count > 0) {
+			settings = get(preview_settings);
+			if (settings.mode === 'never') break;
+			if (settings.mode !== 'always') retry_count -= 1;
+
+			const new_blob = await get_screenshot(display.ip);
+			settings = get(preview_settings);
+			if (settings.mode === 'never') break;
+
+			if (!new_blob) {
+				display.preview = { currently_updating: false, url: null };
+				await db.displays.update(display.id, { preview: display.preview });
+				return;
+			}
+			const new_hash = await image_content_hash(new_blob);
+			if (last_hash !== new_hash) {
+				if (display.preview.url) {
+					URL.revokeObjectURL(display.preview.url);
+				}
+
+				last_hash = new_hash;
+				display.preview.url = URL.createObjectURL(new_blob);
+				await db.displays.update(display.id, { preview: display.preview });
+
+				retry_count = initial_retry_count;
 			}
 
-			last_hash = new_hash;
-			display.preview.url = URL.createObjectURL(new_blob);
-			await db.displays.update(display.id, { preview: display.preview });
-
-			retry_count = initial_retry_count;
+			await new Promise((resolve) => setTimeout(resolve, retry_seconds * 1000)); // sleep
 		}
 
-		await new Promise((resolve) => setTimeout(resolve, 2000)); // sleep 2s
-	}
-
-	display.preview.currently_updating = false;
-	await db.displays.update(display.id, { preview: display.preview });
+		if (settings.mode === 'never') {
+			await db.displays.update(display.id, { preview: { currently_updating: false, url: null } });
+		} else {
+			display.preview.currently_updating = false;
+			await db.displays.update(display.id, { preview: display.preview });
+		}
+	}, 0);
 }
 
 export async function run_on_all_selected_displays(
 	run_function: (display: Display) => void | Promise<void>,
 	update_screenshot_afterwards: boolean = true,
-	ignore_offline: boolean = true
+	display_ids: string[] | null = null
 ) {
+	if (!display_ids) display_ids = get(selected_online_display_ids);
 	const maybe_displays: (Display | null)[] = await Promise.all(
 		// fails when only a single promis fails
-		get(selected_display_ids).map(async (id) => await get_display_by_id(id))
+		display_ids.map(async (id) => await get_display_by_id(id))
 	);
 	const displays: Display[] = maybe_displays.filter((d): d is Display => d !== null);
 
-	Promise.all(
+	await Promise.all(
 		displays.map(async (display) => {
-			if (!display || (ignore_offline && display.status === 'host_offline')) return;
+			if (!display) return;
 			await run_function(display);
 			if (update_screenshot_afterwards) {
-				await screenshot_loop(display.id);
+				screenshot_loop(display.id);
 			}
 		})
 	);
@@ -168,30 +221,64 @@ 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[]> {
-	const displays: Display[] = await db.displays
-		.where('group_id')
-		.equals(display_group_id)
-		.sortBy('position');
-	return displays;
+export async function update_local_displays() {
+	const display_groups = await db.display_groups.orderBy('position').toArray();
+	const displays = await db.displays.orderBy('position').toArray();
+	const out: DisplayIdGroup[] = [];
+	for (const group of display_groups) {
+		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[]) {
-	for (let i = 0; i < new_ordered_items.length; i++) {
-		new_ordered_items[i].position = i;
-		await db.displays.put(new_ordered_items[i]);
+export async function update_db_displays() {
+	local_displays.update((groups) => groups.filter((g) => g.displays.length !== 0));
+	const filtered_local_display_groups = get(local_displays);
+	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[]) {
-	for (let i = 0; i < new_ordered_items.length; i++) {
-		new_ordered_items[i].position = i;
-		await db.display_groups.put(new_ordered_items[i]);
-	}
+export function set_new_display_order(display_id_group_id: string, new_data: DisplayIdObject[]) {
+	local_displays.update((local_displays: DisplayIdGroup[]) => {
+		for (const display_id_group of local_displays) {
+			if (display_id_group.id === display_id_group_id) {
+				display_id_group.displays = new_data;
+			}
+		}
+		return local_displays;
+	});
 }
 
-setTimeout(add_testing_displays, 0);
-async function add_testing_displays() {
-	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");
+
+if (dev) {
+	setTimeout(add_testing_displays, 0);
+	async function add_testing_displays() {
+		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

@@ -1,16 +1,18 @@
 import { get, writable, type Writable } from 'svelte/store';
 import {
 	get_file_primary_key,
+	is_folder,
 	type Display,
 	type FileOnDisplay,
 	type Inode,
 	type TreeElement
 } from '../types';
-import { get_display_by_id } from './displays';
+import { get_display_by_id, selected_online_display_ids } from './displays';
 import { is_selected, select, selected_display_ids, selected_file_ids } from './select';
-import { create_folders, get_file_data, get_file_tree_data } from '../api_handler';
+import { create_path, get_file_data, get_file_tree_data } from '../api_handler';
 import { deactivate_old_thumbnail_urls, generate_thumbnail } from './thumbnails';
 import { db } from '../database';
+import { file_transfer_tasks } from '../file_transfer_handler';
 
 export const current_file_path: Writable<string> = writable<string>('/');
 
@@ -27,12 +29,16 @@ export async function change_file_path(new_path: string) {
 	const displays = await db.displays.toArray();
 
 	for (const display of displays) {
-		const changed_paths = await get_changed_directory_paths(display, new_path);
-		if (!changed_paths) continue;
-		console.debug('Update file system from', display.name, ':', changed_paths);
-		for (const path of changed_paths) {
-			await update_folder_elements_recursively(display, path);
-		}
+		await update_changed_directories(display, new_path);
+	}
+}
+
+async function update_changed_directories(display: Display, path: string = '/') {
+	const changed_paths = await get_changed_directory_paths(display, path);
+	if (!changed_paths) return;
+	console.debug('Update file system from', display.name, ':', changed_paths);
+	for (const path of changed_paths) {
+		await update_folder_elements_recursively(display, path);
 	}
 }
 
@@ -42,16 +48,38 @@ export async function delete_and_deselect_unique_files_from_display(display_id:
 		.equals(display_id)
 		.toArray();
 	for (const file of files_on_display) {
-		await remove_file_from_display(display_id, file.file_primary_key);
+		await remove_file_from_display_recusively(display_id, file.file_primary_key);
 	}
 	await remove_all_files_without_display();
 }
 
-export async function remove_file_from_display(display_id: string, file_primary_key: string) {
+export async function remove_file_from_display_recusively(
+	display_id: string,
+	file_primary_key: string
+) {
 	const found = await db.files_on_display.get([display_id, file_primary_key]);
 	if (!found) return;
 	select(selected_file_ids, file_primary_key, 'deselect');
 	await db.files_on_display.delete([display_id, file_primary_key]);
+
+	const inode_element = await get_file_by_id(found.file_primary_key);
+	if (!inode_element) return;
+	if (is_folder(inode_element)) {
+		const path_inside_folder = inode_element.path + inode_element.name + `/`;
+		const primary_file_keys_in_folder = (
+			await db.files.where('path').equals(path_inside_folder).toArray()
+		).map((e) => get_file_primary_key(e));
+		const primary_file_keys_in_folder_on_display = (
+			await db.files_on_display
+				.where('file_primary_key')
+				.anyOf(primary_file_keys_in_folder)
+				.filter((file) => file.display_id === display_id)
+				.toArray()
+		).map((e) => e.file_primary_key);
+		for (const file_key of primary_file_keys_in_folder_on_display) {
+			await remove_file_from_display_recusively(display_id, file_key);
+		}
+	}
 }
 
 export async function remove_all_files_without_display() {
@@ -70,7 +98,10 @@ export async function update_current_folder_on_selected_displays() {
 	});
 	const current_path = get(current_file_path);
 
-	for (const display of await db.displays.where('id').anyOf(get(selected_display_ids)).toArray()) {
+	for (const display of await db.displays
+		.where('id')
+		.anyOf(get(selected_online_display_ids))
+		.toArray()) {
 		await update_folder_elements_recursively(display, current_path);
 	}
 }
@@ -83,13 +114,19 @@ export async function get_missing_colliding_display_ids(
 
 	const colliding: string[] = [];
 	const colliding_files = await db.files
-		.where('[path+name]')
-		.equals([file.path, file.name])
-		.filter((e) => e.size !== file.size || e.type !== file.type)
+		.where('name')
+		.equals(file.name)
+		.filter((e) => e.path === file.path && e.size !== file.size)
 		.toArray();
 	for (const colliding_file of colliding_files) {
 		colliding.push(
-			...(await get_display_ids_where_file_is_missing(colliding_file, selected_display_ids))
+			...(
+				await db.files_on_display
+					.where('file_primary_key')
+					.equals(get_file_primary_key(colliding_file))
+					.filter((fod) => selected_display_ids.includes(fod.display_id))
+					.toArray()
+			).map((fod) => fod.display_id)
 		);
 	}
 
@@ -111,12 +148,11 @@ async function get_display_ids_where_file_is_missing(
 	);
 }
 
-export async function get_displays_where_path_exists(
+export async function get_displays_where_path_not_exists(
 	path: string,
-	selected_display_ids: string[],
-	invert: boolean
+	selected_display_ids: string[]
 ): Promise<Display[]> {
-	if (path === '/') return [];
+	if (path === '/') return await db.displays.where('id').anyOf(selected_display_ids).toArray();
 	const last_path_part =
 		path
 			.slice(0, path.length - 1)
@@ -125,20 +161,19 @@ 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]')
-		.equals([path_without_last_part, last_path_part, 'inode/directory'])
+		.where('name')
+		.equals(last_path_part)
+		.filter((inode) => inode.path === path_without_last_part && is_folder(inode))
 		.first();
-	if (!folders_of_current_path)
-		return await db.displays.where('id').anyOf(selected_display_ids).toArray();
+	if (!folders_of_current_path) return [];
 	const folder_primary_key = get_file_primary_key(folders_of_current_path);
 
-	const display_ids = selected_display_ids.filter(async (display_id) => {
-		const folder_exists = await db.files_on_display.get([display_id, folder_primary_key]);
-		if (invert) {
-			return !folder_exists;
-		} else {
-			return folder_exists;
-		}
+	const display_ids_with_folder = (
+		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) => {
+		return !display_ids_with_folder.includes(display_id);
 	});
 
 	return (await db.displays.bulkGet(display_ids)).filter((e) => e !== undefined);
@@ -211,18 +246,39 @@ 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][] = (
-		await db.files_on_display.where('display_id').equals(display.id).toArray()
-	).map((e) => JSON.parse(e.file_primary_key) as [string, string, number, string]);
-	const existing_files_on_display_in_path: Inode[] = await db.files
+	const loading_file_ids = Object.keys(get(file_transfer_tasks));
+	const loading_file_keys_without_size = (
+		await db.files.bulkGet(
+			loading_file_ids.map((string_id) => JSON.parse(string_id) as [string, string, number, string])
+		)
+	)
+		.filter((f) => !!f)
+		.map((f) => JSON.stringify([f.path, f.name, f.type]));
+
+	// Filter new files, which aren't currently uploading
+	const existing_files_on_display_in_path: FileOnDisplay[] = await db.files_on_display
+		.where('display_id')
+		.equals(display.id)
+		.filter((f) => !loading_file_ids.includes(f.file_primary_key))
+		.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 diff = get_folder_elements_difference(
-		existing_files_on_display_in_path,
-		new_folder_elements
+	const diff = get_folder_elements_difference(existing_files, new_folder_elements);
+
+	// Filter new files, which aren't currently uploading -> don't compare size
+	diff.new = diff.new.filter(
+		(e) =>
+			!loading_file_keys_without_size.includes(
+				JSON.stringify([e.folder_element.path, e.folder_element.name, e.folder_element.type])
+			)
 	);
 
 	if (diff.new.length > 0) {
@@ -232,12 +288,11 @@ export async function update_folder_elements_recursively(
 			const file_on_display: FileOnDisplay = {
 				display_id: display.id,
 				file_primary_key: get_file_primary_key(new_element.folder_element),
-				loading_data: null,
 				date_created: new_element.date_created
 			};
 			await db.files_on_display.put(file_on_display);
 
-			if (new_element.folder_element.type === 'inode/directory') {
+			if (is_folder(new_element.folder_element)) {
 				await update_folder_elements_recursively(
 					display,
 					file_path + new_element.folder_element.name + '/'
@@ -255,7 +310,7 @@ export async function update_folder_elements_recursively(
 	if (diff.deleted.length > 0) {
 		// Remove old Folder-Elements
 		for (const old_element of diff.deleted) {
-			remove_file_from_display(display.id, get_file_primary_key(old_element));
+			remove_file_from_display_recusively(display.id, get_file_primary_key(old_element));
 		}
 		await remove_all_files_without_display();
 	}
@@ -275,8 +330,8 @@ function get_folder_elements_difference(
 	return { deleted: only_in_old, new: only_in_new };
 }
 
-export async function get_current_folder_elements(
-	current_file_path: string,
+export async function get_folder_elements(
+	file_path: string,
 	selected_display_ids: string[]
 ): Promise<Inode[]> {
 	const existing_file_keys_on_selected_displays: [string, string, number, string][] = (
@@ -285,7 +340,7 @@ export async function get_current_folder_elements(
 	const existing_files_on_selected_displays_in_path: Inode[] = await db.files
 		.where('[path+name+size+type]')
 		.anyOf(existing_file_keys_on_selected_displays)
-		.filter((e) => e.path === current_file_path)
+		.filter((e) => e.path === file_path)
 		.toArray();
 
 	return sort_files(existing_files_on_selected_displays_in_path);
@@ -293,8 +348,8 @@ export async function get_current_folder_elements(
 
 function sort_files(files: Inode[]) {
 	files.sort((a, b) => {
-		const isDirA = a.type === 'inode/directory';
-		const isDirB = b.type === 'inode/directory';
+		const isDirA = is_folder(a);
+		const isDirB = is_folder(b);
 
 		// Ordner zuerst
 		if (isDirA && !isDirB) return -1;
@@ -329,7 +384,7 @@ export async function get_file_by_id(
 export async function run_for_selected_files_on_selected_displays(
 	action: (ip: string, file_names: string[]) => Promise<void>
 ): Promise<void> {
-	for (const display_id of get(selected_display_ids)) {
+	for (const display_id of get(selected_online_display_ids)) {
 		const file_key_strings_on_display: string[] = (
 			await db.files_on_display.where('display_id').equals(display_id).toArray()
 		).map((e) => e.file_primary_key);
@@ -353,37 +408,23 @@ export async function run_for_selected_files_on_selected_displays(
 	}
 }
 
-export async function create_folder_on_all_selected_displays(
-	folder_name: string,
+export async function create_path_on_all_selected_displays(
 	path: string,
 	selected_display_ids: string[]
-): Promise<void> {
-	const path_parts = path
-		.slice(1, path.length - 1)
-		.split('/')
-		.filter((e) => e.length !== 0);
-	let remaining_display_ids = [...selected_display_ids];
-
-	const getDisplaysForPath = async (currentPath: string): Promise<Display[]> => {
-		if (currentPath === '/') {
-			const displays = await db.displays.bulkGet(remaining_display_ids);
-			return displays.filter((d): d is Display => !!d);
-		}
-		return get_displays_where_path_exists(currentPath, remaining_display_ids, false);
-	};
-
-	for (let depth = path_parts.length; depth >= 0 && remaining_display_ids.length; depth--) {
-		const currentPath = depth === 0 ? '/' : `/${path_parts.slice(0, depth).join('/')}/`;
-
-		const displays = await getDisplaysForPath(currentPath);
-		if (!displays.length) continue;
-
-		const folders_to_create = [...path_parts.slice(depth), folder_name];
-		for (const display of displays) {
-			await create_folders(display.ip, currentPath, folders_to_create);
-			remaining_display_ids = remaining_display_ids.filter((id) => id !== display.id);
-		}
+) {
+	const displays_without_path = await get_displays_where_path_not_exists(
+		path,
+		selected_display_ids
+	);
+	if (displays_without_path.length === 0) return;
+	for (const display of displays_without_path) {
+		await create_path(display.ip, path);
 	}
+	setTimeout(async () => {
+		for (const display of displays_without_path) {
+			await update_changed_directories(display);
+		}
+	}, 0);
 }
 
 export async function get_date_mapping(file_primary_key: string): Promise<Record<string, Date>> {

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

@@ -1,4 +1,5 @@
-import { writable, type Writable } from 'svelte/store';
+import { get, writable, type Writable } from 'svelte/store';
+import { online_displays, selected_online_display_ids } from './displays';
 
 export const selected_file_ids: Writable<string[]> = writable<string[]>([]); // JSON.stringify([string, string, number, string])
 export const selected_display_ids: Writable<string[]> = writable<string[]>([]);
@@ -19,6 +20,11 @@ export function select(
 		}
 		return all_ids;
 	});
+	
+	if (selected_ids === selected_display_ids) {
+		const current_online_display_ids = get(online_displays).map((d) => d.id);
+		selected_online_display_ids.set(get(selected_display_ids).filter((id) => current_online_display_ids.includes(id)));
+	}
 }
 
 export function is_selected(id: string, selected_ids: string[]): boolean {

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

@@ -1,72 +1,97 @@
-import { writable, type Writable } from "svelte/store";
+import { writable, type Writable } from 'svelte/store';
+import type { NumberSetting } from '../types';
+import { dev } from '$app/environment';
 
 export const dnd_flip_duration_ms = 300;
 
 const heights_options: Record<string, { min: number; max: number; step: number }> = {
-    display: {
-        min: 15,
-        max: 40,
-        step: 5,
-    },
-    file: {
-        min: 10,
-        max: 20,
-        step: 5,
-    }
-}
+	display: {
+		min: 15,
+		max: 40,
+		step: 5
+	},
+	file: {
+		min: 10,
+		max: 20,
+		step: 5
+	}
+};
 
 export const current_height: Writable<Record<string, number>> = writable<Record<string, number>>({
-    display: 25,
-    file: 10,
+	display: 25,
+	file: 10
 });
 
-
 export const is_group_drag: Writable<boolean> = writable<boolean>(false);
 export const is_display_drag: Writable<boolean> = writable<boolean>(false);
 
+export const preview_settings: Writable<{
+	mode: 'never' | 'normal' | 'always';
+	retry_seconds: NumberSetting;
+	retry_count: NumberSetting;
+}> = writable<{
+	mode: 'never' | 'normal' | 'always';
+	retry_seconds: NumberSetting;
+	retry_count: NumberSetting;
+}>({
+	mode: dev ? 'never' : 'normal',
+	retry_seconds: {
+		max: 10,
+		min: 0.5,
+		now: 2,
+		step: 0.5
+	},
+	retry_count: {
+		max: 10,
+		min: 1,
+		now: 5,
+		step: 1
+	}
+});
+
 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) => {
-        height[key] = next_height_step_size(key, height, factor) || height[key];
-        return height;
-    });
+	current_height.update((height) => {
+		height[key] = next_height_step_size(key, height, factor) || height[key];
+		return height;
+	});
 }
 
-export function next_height_step_size(key: 'display' | 'file', current_height_array: Record<string, number>, factor: number): number {
-    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 next_height_step_size(
+	key: 'display' | 'file',
+	current_height_array: Record<string, number>,
+	factor: number
+): number {
+	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,
-    returning_classes: { bg?: boolean; hover?: boolean; active?: boolean; text?: boolean } = {},
-    base_bg_distance: number = 0,
-    shifted_distance: number = 0
+	selected: boolean,
+	returning_classes: { bg?: boolean; hover?: boolean; active?: boolean; text?: boolean } = {},
+	base_bg_distance: number = 0,
+	shifted_distance: number = 0
 ) {
-    let base_bg = selected ? 'bg-stone-400' : 'bg-stone-600';
-    const base_text = selected ? 'text-stone-950' : 'text-stone-200';
-    base_bg = get_shifted_color(base_bg, base_bg_distance);
+	let base_bg = selected ? 'bg-stone-400' : 'bg-stone-600';
+	const base_text = selected ? 'text-stone-950' : 'text-stone-200';
+	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[] = [];
-    if (bg) out.push(base_bg);
-    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 (text) out.push(base_text);
+	const out: string[] = [];
+	if (bg) out.push(base_bg);
+	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 (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

@@ -33,39 +33,41 @@ export type FileTransferTask = {
 	display: ShortDisplay;
 	path: string;
 	file_name: string;
-	file_primary_key: string;
+	loading_data: FileLoadingData;
 	bytes_total: number; // if type === 'sync' -> bytes_total = file_size * 2 (1x download + 1x upload)
 };
 
-export type FileTransferTaskData = {
-	type: 'upload',
-	file: File,
-} | {
-	type: "sync",
-	destination_displays: ShortDisplay[],
-}
+export type FileTransferTaskData =
+	| {
+			type: 'upload';
+			file: File;
+	  }
+	| {
+			type: 'sync';
+			destination_display_data: {
+				display: ShortDisplay;
+				loading_data: FileLoadingData;
+			}[];
+			open_file_afterwards_on_display_ids: string[];
+	  };
 
+export type FileLoadingData = {
+	percentage: number;
+	bytes_per_second: number;
+	seconds_until_finish: number;
+};
 
 export type ShortDisplay = {
 	id: string;
 	ip: string;
-}
-
+};
 
 export type FileOnDisplay = {
 	display_id: string;
 	file_primary_key: string; // JSON.stringify([string, string, number, string])
 	date_created: Date;
-	loading_data: FileLoadingData | null; // null if not loading
 };
 
-export type FileLoadingData = {
-	type: 'upload' | 'download' | 'sync_download' | 'sync_upload';
-	percentage: number;
-	bytes_per_second: number;
-	seconds_until_finish: number;
-}
-
 export type Inode = {
 	path: string;
 	name: string;
@@ -94,6 +96,7 @@ export type Display = {
 	group_id: string;
 	name: string;
 	status: DisplayStatus;
+	version?: string;
 };
 
 export type DisplayGroup = {
@@ -101,6 +104,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;
@@ -116,13 +128,19 @@ export type MenuOption = {
 
 export type PopupContent = {
 	open: boolean;
-	snippet: Snippet<[string]> | null;
+	snippet: Snippet<[string]> | Snippet<[]> | null;
 	snippet_arg?: string;
 	title?: string;
 	title_class?: string;
 	title_icon?: typeof X | null;
 	window_class?: string;
-	closable?: boolean;
+};
+
+export type NumberSetting = {
+	max: number;
+	min: number;
+	now: number;
+	step: number;
 };
 
 export type DisplayStatus = 'host_offline' | 'app_offline' | 'app_online' | null;
@@ -132,3 +150,7 @@ export function to_display_status(value: string): DisplayStatus {
 		? (value as DisplayStatus)
 		: null;
 }
+
+export function is_folder(inode: Inode) {
+	return inode.type === 'inode/directory';
+}

control/frontend/src/lib/ts/utils.ts

@@ -55,7 +55,7 @@ export function get_uuid(): string {
 
 export function get_file_size_display_string(size: number, toFixed: number | null = null): string {
 	if (size < 0)
-		return toFixed === null ? 'versch.' : 'Verschiedene Größen auf verschiedenen Bildschirmen';
+		return toFixed === null ? '...' : 'Größe wird aktuell berechnet';
 	if (size === 0) return '0 B';
 
 	const k = 1024;
@@ -100,7 +100,7 @@ export function display_status_to_info(status: DisplayStatus): string {
 			return 'Lädt';
 		case 'host_offline':
 			return 'Offline';
-		case null:
+		default:
 			return '???';
 	}
 }
@@ -113,3 +113,12 @@ export function get_sanitized_file_url(file_path: string, is_preview = false) {
 
 	return `/file/${is_preview ? 'preview/' : ''}${[...pathSegments].join('/')}`;
 }
+
+
+let keyboard_queue = Promise.resolve();
+
+export function add_to_keyboard_queue(task: () => Promise<void>) {
+	keyboard_queue = keyboard_queue.then(task).catch((err) => {
+		console.error('Error in input queue:', err);
+	});
+}

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

@@ -1,10 +1,30 @@
 <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}
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+	{@html versionSplashScreen}
+{/if}
+
 {@render children()}
 
 <Notification />
+
+<style>
+	:root {
+		--splash-fade-out-delay: 3.5s !important;
+	}
+</style>

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

@@ -1,25 +1,41 @@
 <script lang="ts">
-	import { Monitor, Plus, Radio, Settings, Trash2, X } from 'lucide-svelte';
+	import {
+		Monitor,
+		Plus,
+		Radio,
+		Settings,
+		Trash2,
+		Menu,
+		ChevronDown,
+		SquareCheckBig,
+		Square,
+		Info
+	} from 'lucide-svelte';
 	import Button from '$lib/components/Button.svelte';
 	import FileView from './FileView.svelte';
 	import ControlView from './ControlView.svelte';
 	import DisplayView from './DisplayView.svelte';
 	import PopUp from '$lib/components/PopUp.svelte';
-	import { type PopupContent } from '$lib/ts/types';
+	import { type Display, type PopupContent } from '$lib/ts/types';
 	import TextInput from '$lib/components/TextInput.svelte';
 	import {
 		add_display,
 		edit_display_data,
 		get_display_by_id,
 		is_display_name_taken,
-		remove_display
+		remove_display,
+		screenshot_loop
 	} from '$lib/ts/stores/displays';
 	import { notifications } from '$lib/ts/stores/notification';
 	import { ping_ip } from '$lib/ts/api_handler';
 	import { onMount } from 'svelte';
-	import { on_start } from '$lib/ts/main';
+	import { on_app_start, update_display_status } from '$lib/ts/main';
 	import { display_status_to_info } from '$lib/ts/utils';
 	import HighlightedText from '$lib/components/HighlightedText.svelte';
+	import { preview_settings } from '$lib/ts/stores/ui_behavior';
+	import NumberSettingInput from '$lib/components/NumberSettingInput.svelte';
+	import { db } from '$lib/ts/database';
+	import version from './../../../../shared/version.txt?raw';
 
 	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))$/;
@@ -29,8 +45,7 @@
 		open: false,
 		snippet: null,
 		title: '',
-		title_class: '!text-xl',
-		closable: true
+		title_class: '!text-xl'
 	});
 	let remove_display_name = $state('');
 
@@ -55,11 +70,40 @@
 		const ip = text_inputs_valid.ip.value;
 		const mac = text_inputs_valid.mac.value === '' ? null : text_inputs_valid.mac.value;
 		const name = text_inputs_valid.name.value;
-		if (!!existing_display_id) {
-			await edit_display_data(existing_display_id, ip, mac, name);
+		let display: Display | null = null;
+		if (existing_display_id) {
+			display = await edit_display_data(existing_display_id, ip, mac, name);
 		} else {
 			const status = await ping_ip(text_inputs_valid.ip.value);
-			await add_display(ip, mac, name, status);
+			display = await add_display(ip, mac, name, status);
+		}
+		if (display) {
+			await update_display_status(display);
+		}
+	}
+
+	function get_display_preview_mode(mode: 'never' | 'normal' | 'always') {
+		switch (mode) {
+			case 'never':
+				return 'Nie';
+			case 'normal':
+				return 'Normal';
+			case 'always':
+				return 'Dauerhaft';
+		}
+	}
+
+	async function change_preview_mode(mode: 'never' | 'normal' | 'always') {
+		$preview_settings.mode = mode;
+		if (mode === 'never') {
+			await db.displays
+				.toCollection()
+				.modify({ preview: { currently_updating: false, url: null } });
+		} else {
+			const display_ids = (await db.displays.toArray()).map((d) => d.id);
+			for (const display_id of display_ids) {
+				screenshot_loop(display_id);
+			}
 		}
 	}
 
@@ -72,10 +116,21 @@
 		popup_content = {
 			open: true,
 			snippet: display_popup,
-			title: 'Neuen Bildschirm hinzufügen',
+			title: 'Neuen Bildschirm Hinzufügen',
 			title_icon: Monitor,
 			title_class: '!text-xl',
-			closable: true
+			window_class: 'w-3xl'
+		};
+	};
+
+	const show_settings_popup = () => {
+		popup_content = {
+			open: true,
+			snippet: settings_popup,
+			title: 'Einstellungen',
+			title_icon: Settings,
+			title_class: '!text-xl',
+			window_class: 'w-3xl'
 		};
 	};
 
@@ -87,8 +142,7 @@
 			snippet_arg: display_id,
 			title: 'Bildschirm wirklich löschen?',
 			title_class: 'text-red-400 !text-xl',
-			title_icon: Trash2,
-			closable: true
+			title_icon: Trash2
 		};
 	};
 
@@ -106,14 +160,70 @@
 			snippet_arg: display_id,
 			title: 'Bildschirm bearbeiten',
 			title_icon: Monitor,
-			title_class: '!text-xl',
-			closable: true
+			title_class: '!text-xl'
 		};
 	};
 
-	onMount(on_start);
+	onMount(on_app_start);
+
+	const show_about_popup = () => {
+		popup_content = {
+			open: true,
+			snippet: about_popup,
+			title: 'Über PLG MuDiCS',
+			title_icon: Info,
+			title_class: '!text-xl'
+		};
+	};
 </script>
 
+<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
+{#snippet about_popup(_: string)}
+	<div class="px-2">
+		<p>
+			{version}
+		</p>
+		<h3 class="text-lg font-bold mt-4">Entwickler</h3>
+		<p>
+			<a target="_blank" class="link" href="https://github.com/programmer-44">E44</a>,
+			<a target="_blank" class="link" href="https://codeberg.org/2mal3">2mal3</a>
+		</p>
+
+		<h3 class="text-lg font-bold mt-4">Lizenz</h3>
+		<a
+			target="_blank"
+			class="link"
+			href="https://github.com/PLG-Development/PLG-MuDiCS/blob/main/LICENSE.txt"
+		>
+			GNU Affero General Public License v3 (AGPL-3.0)
+		</a>
+
+		<h3 class="text-lg font-bold mt-4">Verwendete Bibliotheken</h3>
+		<ul class="list-disc list-inside">
+			<li><a target="_blank" href="https://svelte.dev/" class="link">Svelte & SvelteKit</a></li>
+			<li><a target="_blank" href="https://tailwindcss.com/" class="link">TailwindCSS</a></li>
+			<li><a target="_blank" href="https://lucide.dev/" class="link">Lucide Icons</a></li>
+			<li><a target="_blank" href="https://tiptap.dev/" class="link">Tiptap</a></li>
+			<li><a target="_blank" href="https://dexie.org/" class="link">Dexie.js</a></li>
+			<li>
+				<a target="_blank" href="https://github.com/orefalo/svelte-splitpanes" class="link"
+					>svelte-splitpanes</a
+				>
+			</li>
+			<li>
+				<a target="_blank" href="https://github.com/thisux/sveltednd" class="link"
+					>@thisux/sveltednd</a
+				>
+			</li>
+			<li><a target="_blank" href="https://echo.labstack.com/" class="link">Echo</a></li>
+			<li><a target="_blank" href="https://github.com/mdlayher/wol" class="link">wol</a></li>
+		</ul>
+	</div>
+	<div class="flex justify-end pt-2">
+		<Button click_function={popup_close_function} className="px-4">Schließen</Button>
+	</div>
+{/snippet}
+
 {#snippet remove_display_popup(display_id: string)}
 	<div class="max-w-prose px-2">
 		Soll der Bildschirm <HighlightedText>{remove_display_name}</HighlightedText> wirklich gelöscht werden?
@@ -142,7 +252,7 @@
 		title="Anzeigename"
 		placeholder="z.B. Beamer vorne links"
 		is_valid_function={async (input: string) => {
-			if (!!existing_display_id) {
+			if (existing_display_id) {
 				if (input === (await get_display_by_id(existing_display_id))?.name)
 					return [true, 'Gültiger Name'];
 			}
@@ -185,7 +295,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 === ''
@@ -206,7 +316,7 @@
 		{/if}
 		<Button
 			disabled={!all_text_inputs_valid()}
-			className="{!!existing_display_id ? 'px-4' : 'pl-3 pr-4 gap-2'} font-bold"
+			className="{existing_display_id ? 'px-4' : 'pl-3 pr-4 gap-2'} font-bold"
 			bg="bg-stone-650"
 			click_function={async () => {
 				await finalize_add_edit_display(existing_display_id);
@@ -220,9 +330,53 @@
 	</div>
 {/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} -->
+{#snippet settings_popup()}
+	<div class="flex flex-col gap-2 pl-1">
+		<span class="font-bold text-lg">Vorschau-Verhalten</span>
+		<div class="flex flex-col gap-2 ml-2">
+			<span class="text-stone-400 text-sm max-w-prose"
+				>Die Vorschau eines Bildschirms ist das Bild, welches links neben dem Display-Namen zu sehen
+				ist. Es zeigt relativ aktuell das an, was auf dem jeweiligen Bildschirm zu sehen ist.</span
+			>
+			<div class="flex flex-row justify-between items-center">
+				<span>Aktualisierungs-Verhalten</span>
+				<Button
+					className="gap-3 pl-4 pr-3 w-35"
+					menu_options={(['never', 'normal', 'always'] as const).map((mode) => ({
+						icon: mode === $preview_settings.mode ? SquareCheckBig : Square,
+						name: get_display_preview_mode(mode),
+						on_select: async () => await change_preview_mode(mode)
+					}))}>{get_display_preview_mode($preview_settings.mode)} <ChevronDown /></Button
+				>
+			</div>
+			<div class="flex flex-row justify-between items-center">
+				<span>Intervall zwischen den Aktualisierungs-Anfragen</span>
+				<NumberSettingInput
+					disabled={$preview_settings.mode === 'never'}
+					number_setting={$preview_settings.retry_seconds}
+					on_change={(new_value: number) => {
+						$preview_settings.retry_seconds.now = new_value;
+					}}
+				/>
+			</div>
+			<div class="flex flex-row justify-between items-center max-w-full gap-8">
+				<span class="">Anzahl der änderungslosen Aktualisierungen bis pausiert wird</span>
+				<NumberSettingInput
+					disabled={$preview_settings.mode !== 'normal'}
+					number_setting={$preview_settings.retry_count}
+					on_change={(new_value: number) => {
+						$preview_settings.retry_count.now = new_value;
+					}}
+				/>
+			</div>
+		</div>
+	</div>
+	<div class="flex justify-end pt-4">
+		<Button click_function={popup_close_function} className="px-4">Schließen</Button>
+	</div>
+{/snippet}
 
+<main class="bg-stone-900 h-dvh w-dvw text-stone-200 px-4 py-2 gap-2 grid grid-rows-[3rem_auto]">
 	<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
@@ -231,16 +385,22 @@
 			menu_options={[
 				{
 					icon: Plus,
-					name: 'Neuen Bildschirm hinzufügen',
+					name: 'Neuen Bildschirm Hinzufügen',
 					on_select: show_new_display_popup
 				},
 				{
 					icon: Settings,
-					name: 'Weitere Einstellungen'
+					name: 'Einstellungen',
+					on_select: show_settings_popup
+				},
+				{
+					icon: Info,
+					name: 'Über',
+					on_select: show_about_popup
 				}
 			]}
 		>
-			<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

@@ -9,25 +9,46 @@
 		Presentation,
 		SquareTerminal,
 		TextAlignStart,
-		TrafficCone
+		TrafficCone,
+		Globe
 	} from 'lucide-svelte';
 	import Button from '$lib/components/Button.svelte';
 	import PopUp from '$lib/components/PopUp.svelte';
 	import type { PopupContent } from '$lib/ts/types';
 	import KeyInput from './KeyInput.svelte';
-	import { send_keyboard_input, show_blackscreen, shutdown, startup } from '$lib/ts/api_handler';
-	import { get_display_by_id, run_on_all_selected_displays } from '$lib/ts/stores/displays';
+	import {
+		send_keyboard_input,
+		show_blackscreen,
+		shutdown,
+		startup,
+		open_website
+	} from '$lib/ts/api_handler';
+	import {
+		get_display_by_id,
+		run_on_all_selected_displays,
+		selected_online_display_ids
+	} from '$lib/ts/stores/displays';
 	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';
+	import TextInput from '$lib/components/TextInput.svelte';
+	import { add_to_keyboard_queue } from '$lib/ts/utils';
+
+	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,
 		snippet: null,
 		title: '',
-		closable: true
 	});
 
+	let current_text = $state('');
+
 	function popup_close_function() {
 		popup_content.open = false;
 	}
@@ -36,9 +57,9 @@
 		popup_content = {
 			open: true,
 			snippet: send_keys_popup,
-			title: 'Tastatur-Eingaben durchgeben',
+			title: 'Tastatur-Eingaben Senden',
 			title_icon: Keyboard,
-			closable: true
+			window_class: 'h-full'
 		};
 	};
 
@@ -46,13 +67,22 @@
 		popup_content = {
 			open: true,
 			snippet: text_popup,
-			title: 'Text anzeigen',
+			title: 'Text Anzeigen',
 			title_icon: TextAlignStart,
-			closable: true,
 			window_class: 'size-full'
 		};
 	};
 
+	const show_website_popup = () => {
+		popup_content = {
+			open: true,
+			snippet: website_popup,
+			title: 'Webseite Anzeigen',
+			window_class: 'w-xl',
+			title_icon: Globe,
+		};
+	};
+
 	async function all_state(selected_display_ids: string[]): Promise<'on' | 'off' | 'mixed'> {
 		const selected_displays = await Promise.all(
 			selected_display_ids.map(async (id) => await get_display_by_id(id))
@@ -67,13 +97,12 @@
 		}
 	}
 
-	async function ask_shutdonw() {
+	async function ask_shutdown() {
 		popup_content = {
 			open: true,
-			snippet: ask_shutdonw_popup,
-			title: 'PC Herunterfahren',
+			snippet: ask_shutdown_popup,
+			title: 'Bildschirm Herunterfahren',
 			title_icon: PowerOff,
-			closable: true
 		};
 	}
 
@@ -81,7 +110,7 @@
 		popup_content.open = false;
 		await run_on_all_selected_displays((d) => {
 			shutdown(d.ip); // no await here because we want to be fast
-			db.displays.update(d.id, { status: 'app_offline' });
+			db.displays.update(d.id, { status: 'app_offline', preview: { currently_updating: false, url: null} });
 		}, false);
 	}
 
@@ -93,29 +122,62 @@
 				db.displays.update(d.id, { status: 'app_offline' });
 			},
 			false,
-			false
+			$selected_display_ids
 		);
 	}
 
-	async function send_single_key_press(key: string) {
+	async function send_single_key_press(key: string, action: 'press' | 'release') {
+		await run_on_all_selected_displays((d) => send_keyboard_input(d.ip, [{ key, action }]));
+	}
+	let website_url = $state('');
+	let website_url_valid = $state(false);
+
+	function validate_website_url(url: string): [boolean, string] {
+		if (url === '') return [true, ''];
+		const regex = /^https?:\/\/[\w-]+(\.[\w-]+)+([\w\-._~:/?#[\]@!$&'()*+,;=.])*/;
+		if (regex.test(url)) {
+			return [true, ''];
+		}
+		return [false, 'Ungültige URL'];
+	}
+
+	async function send_website() {
+		popup_content.open = false;
 		await run_on_all_selected_displays((d) =>
-			send_keyboard_input(d.ip, [{ key, action: 'press' }])
-		);
-		setTimeout(
-			async () =>
-				await run_on_all_selected_displays((d) =>
-					send_keyboard_input(d.ip, [{ key, action: 'release' }])
-				),
-			10
+			open_website(d.ip, website_url)
 		);
 	}
 </script>
 
-{#snippet ask_shutdonw_popup()}
+{#snippet website_popup()}
+	<div class="flex flex-col gap-2">
+		<TextInput
+			title="URL (mit http:// oder https://)"
+			placeholder="https://example.com"
+			bind:current_value={website_url}
+			bind:current_valid={website_url_valid}
+			is_valid_function={validate_website_url}
+			enter_mode="submit"
+			enter_function={send_website}
+		/>
+		<div class="flex flex-row justify-end gap-2">
+			<Button className="button space font-bold" click_function={popup_close_function}>
+				Abbrechen
+			</Button>
+			<Button
+				click_function={send_website}
+				disabled={!website_url_valid || website_url === ''}
+				className="button success space">Anzeigen</Button
+			>
+		</div>
+	</div>
+{/snippet}
+
+{#snippet ask_shutdown_popup()}
 	<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>
@@ -123,96 +185,112 @@
 {/snippet}
 
 {#snippet send_keys_popup()}
-	<div class="overflow-hidden flex flex-col gap-2">
-		<div>
-			<KeyInput />
-		</div>
-		<div class="flex flex-row justify-end gap-2">
-			<Button className="px-4 font-bold" click_function={popup_close_function}>Fertig</Button>
-		</div>
-	</div>
+	<KeyInput {popup_close_function}/>
 {/snippet}
 
 {#snippet text_popup()}
-	<TipTapInput />
+	<TipTapInput bind:text={current_text}/>
 {/snippet}
 
 <div class="grid grid-rows-[2.5rem_auto] bg-stone-800 rounded-2xl min-w-0">
 	<div class="text-xl font-bold pl-3 content-center bg-stone-700 rounded-t-2xl truncate min-w-0">
-		Bildschirme steuern
+		Bildschirme Steuern
 	</div>
 	<div class="relative flex flex-col gap-2 p-2 overflow-auto">
 		<div class="flex flex-row justify-between gap-2">
 			<div class="flex flex-col gap-2">
 				<div class="flex flex-row gap-2 w-75 justify-normal">
-					<Button
-						title="Vorherige Folie (Pfeil nach Links)"
-						className="px-9"
-						disabled={$selected_display_ids.length === 0}
-						click_function={async () => {
-							await send_single_key_press('VK_LEFT');
-						}}><ArrowBigLeft /></Button
+					<button
+						title="Vorherige Folie (Pfeil nach Links) [gedrückt halten möglich]"
+						class="px-9 bg-stone-700 {$selected_online_display_ids.length === 0
+							? 'text-stone-500 cursor-not-allowed'
+							: 'hover:bg-stone-600 active:bg-stone-500 cursor-pointer'} py-2 rounded-xl flex justify-center items-center transition-colors duration-200"
+						disabled={$selected_online_display_ids.length === 0}
+						onmousedown={() => {
+							add_to_keyboard_queue(async () => await send_single_key_press('ArrowLeft', 'press'));
+						}}
+						onmouseup={() => {
+							add_to_keyboard_queue(async () => await send_single_key_press('ArrowLeft', 'release'));
+						}}
 					>
-					<Button
-						title="Nächste Folie (Pfeil nach Rechts)"
-						className="px-9"
-						disabled={$selected_display_ids.length === 0}
-						click_function={async () => {
-							await send_single_key_press('VK_RIGHT');
-						}}><ArrowBigRight /></Button
+						<ArrowBigLeft />
+					</button>
+
+					<button
+						title="Nächste Folie (Pfeil nach Rechts) [gedrückt halten möglich]"
+						class="px-9 bg-stone-700 {$selected_online_display_ids.length === 0
+							? 'text-stone-500 cursor-not-allowed'
+							: 'hover:bg-stone-600 active:bg-stone-500 cursor-pointer'} py-2 rounded-xl flex justify-center items-center transition-colors duration-200"
+						disabled={$selected_online_display_ids.length === 0}
+						onmousedown={() => {
+							add_to_keyboard_queue(async () => await send_single_key_press('ArrowRight', 'press'));
+						}}
+						onmouseup={() => {
+							add_to_keyboard_queue(async () => await send_single_key_press('ArrowRight', 'release'));
+						}}
 					>
+						<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
+					click_function={show_text_popup}
+					disabled={$selected_online_display_ids.length === 0}
+					><TextAlignStart /> Text Anzeigen</Button
 				>
+
 				<Button
 					className="px-3 flex gap-3 w-75 justify-normal"
-					disabled={$selected_display_ids.length === 0}
+					disabled={$selected_online_display_ids.length === 0}
+					click_function={show_website_popup}><Globe /> Webseite Anzeigen</Button
+				>
+
+				<Button
+					className="px-3 flex gap-3 w-75 justify-normal"
+					disabled={$selected_online_display_ids.length === 0}
 					click_function={async () => {
 						await run_on_all_selected_displays((d) => show_blackscreen(d.ip));
 					}}><Presentation />Blackout</Button
 				>
+
 				<div class="flex flex-row justify-normal">
-					<Button
-						className="rounded-r-none pl-3 flex gap-3 grow w-65 justify-normal"
-						disabled={$selected_display_ids.length === 0}
-						><TrafficCone /> Fallback-Bild anzeigen</Button
-					>
-					<Button className="rounded-l-none flex grow-0 w-10"><ChevronDown /></Button>
+					<Button className="rounded-r-none pl-3 flex gap-3 grow w-65 justify-normal" disabled>
+						<TrafficCone /> Fallback-Bild Anzeigen
+					</Button>
+					<Button className="rounded-l-none flex grow-0 w-10" disabled><ChevronDown /></Button>
 				</div>
+
 				<Button
 					className="px-3 flex gap-3 w-75 justify-normal"
-					disabled={$selected_display_ids.length === 0}
-					click_function={show_send_keys_popup}><Keyboard /> Tastatur-Eingaben durchgeben</Button
+					disabled={$selected_online_display_ids.length === 0}
+					click_function={show_send_keys_popup}><Keyboard /> Tastatur-Eingaben Senden</Button
 				>
 			</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
-							className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
-							disabled={all === 'on' || $selected_display_ids.length === 0}
-							click_function={startup_action}
-						>
-							<Power /> PC hochfahren
-						</Button>
+					<Button
+						className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
+						disabled={$all_display_states === 'on' ||
+							$selected_display_ids.length === 0}
+						click_function={startup_action}
+					>
+						<Power /> Bildschirm Hochfahren
+					</Button>
 
-						<Button
-							className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
-							disabled={all === 'off' || $selected_display_ids.length === 0}
-							click_function={ask_shutdonw}
-						>
-							<PowerOff /> PC herunterfahren</Button
-						>
-					{/await}
+					<Button
+						className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
+						disabled={$all_display_states === 'off' ||
+							$selected_online_display_ids.length === 0}
+						click_function={ask_shutdown}
+					>
+						<PowerOff /> Bildschirm Herunterfahren</Button
+					>
 				</div>
-				<Button
-					className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
-					disabled={$selected_display_ids.length === 0}
-					><SquareTerminal /> Shell-Befehl ausführen</Button
-				>
+				<Button className="px-3 flex gap-3 w-full xl:w-75 justify-normal" disabled>
+					<SquareTerminal />
+					Shell-Befehl Ausführen
+				</Button>
 			</div>
 		</div>
 		<PopUp

control/frontend/src/routes/DisplayView.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-	import { fade, scale } from 'svelte/transition';
+	import { fade } from 'svelte/transition';
 	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,13 +21,11 @@
 	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, Settings, Trash2, VideoOff, ZoomIn, ZoomOut } from 'lucide-svelte';
+	import { History, Menu, Pencil, PinOff, 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 { Pane, Splitpanes, type IPaneSizingEvent } from 'svelte-splitpanes';
 	import HighlightedText from '$lib/components/HighlightedText.svelte';
 	import { liveQuery, type Observable } from 'dexie';
 
@@ -43,7 +43,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;
@@ -59,8 +68,13 @@
 		pinned_pane_size = 0;
 	}
 
-	function get_display_menu_options(display_id: string): MenuOption[] {
+	function get_display_menu_options(display_id: string, display_version: string|undefined): MenuOption[] {
 		return [
+			{
+				icon: History,
+				name: display_version ?? "Version unbekannt",
+				disabled: true,
+			},
 			{
 				icon: Pencil,
 				name: 'Bildschirm bearbeiten',
@@ -98,7 +112,7 @@
 		return true;
 	}
 
-	function handle_splitpane_resize(e: any) {
+	function handle_splitpane_resize(e: CustomEvent<IPaneSizingEvent[]>) {
 		if (e.detail[0].size === 0) {
 			$pinned_display_id = null;
 			pinned_pane_size = last_pinned_pane_size;
@@ -156,7 +170,7 @@
 									click_function={(e) => {
 										e.stopPropagation();
 									}}
-									menu_options={get_display_menu_options($pinned_display_id)}
+									menu_options={get_display_menu_options($pinned_display_id, $pinned_display?.version)}
 								>
 									<Menu />
 								</Button>
@@ -206,14 +220,14 @@
 							class="min-w-40 px-4 rounded-xl cursor-pointer duration-200 transition-colors bg-stone-600"
 							onclick={async () => await toggle_all_selected_displays($display_groups)}
 						>
-							<span>{$all_groups_selected || false ? 'Alle abwählen' : 'Alle auswählen'}</span>
+							<span>{$all_groups_selected || false ? 'Alle Abwählen' : 'Alle Auswählen'}</span>
 						</button>
 						<div class="flex flex-row">
 							<Button
 								title="Bildschirme größer darstellen"
 								className="aspect-square p-1.5! pr-1! rounded-r-none"
 								bg="bg-stone-600"
-								disabled={!Boolean(next_height_step_size('display', $current_height, 1))}
+								disabled={!next_height_step_size('display', $current_height, 1)}
 								click_function={() => {
 									change_height('display', 1);
 								}}
@@ -224,7 +238,7 @@
 								title="Bildschirme kleiner darstellen"
 								className="aspect-square p-1.5! pl-1! rounded-l-none"
 								bg="bg-stone-600"
-								disabled={!Boolean(next_height_step_size('display', $current_height, -1))}
+								disabled={!next_height_step_size('display', $current_height, -1)}
 								click_function={() => {
 									change_height('display', -1);
 								}}
@@ -234,51 +248,50 @@
 						</div>
 					</div>
 				</div>
-				<div class="min-h-0 overflow-y-auto" bind:this={displays_scroll_box}>
-					<div
-						class="min-h-full p-2 flex flex-col gap-4"
-						use:dragHandleZone={{
-							items: $display_groups || [],
-							type: 'group',
-							flipDurationMs: dnd_flip_duration_ms,
-							dropFromOthersDisabled: true,
-							dropTargetStyle: { outline: 'none' }
-						}}
-						onconsider={async (e: CustomEvent) => {
-							$is_group_drag = true;
-							await set_new_display_group_order(e.detail.items);
-						}}
-						onfinalize={async (e: CustomEvent) => {
-							await set_new_display_group_order(e.detail.items);
-							$is_group_drag = false;
-						}}
-					>
-						{#if ($display_groups || []).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
-								<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 $display_groups || [] as display_group (display_group.id)}
+				<div class="min-h-0 overflow-y-auto overflow-x-hidden" bind:this={displays_scroll_box}>
+					{#if $local_displays.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
+							<HighlightedText fg="text-stone-450" className="p-1!">
+								<Menu class="inline pb-1" />
+							</HighlightedText>
+							und
+							<HighlightedText fg="text-stone-450">Neuen Bildschirm hinzufügen</HighlightedText>.
+						</div>
+					{:else}
+						<div
+							class="min-h-full p-2 flex flex-col gap-4"
+							use:dragHandleZone={{
+								items: $local_displays,
+								type: 'group',
+								flipDurationMs: dnd_flip_duration_ms,
+								dropFromOthersDisabled: true,
+								dropTargetStyle: { outline: 'none' }
+							}}
+							onconsider={(e: CustomEvent) => {
+								$is_group_drag = true;
+								$local_displays = e.detail.items;
+							}}
+							onfinalize={async (e: CustomEvent) => {
+								$local_displays = e.detail.items;
+								await update_db_displays();
+								$is_group_drag = false;
+							}}
+						>
+							{#each $local_displays as display_id_group (display_id_group.id)}
 								<!-- Each Group -->
-								<section
-									out:scale={{ duration: dnd_flip_duration_ms, easing: cubicOut }}
-									animate:flip={{ duration: dnd_flip_duration_ms, easing: cubicOut }}
-									class="outline-none"
-								>
+								<section class="outline-none">
+									<!-- out:scale={{ duration: dnd_flip_duration_ms, easing: cubicOut }}
+										animate:flip={{ duration: dnd_flip_duration_ms, easing: cubicOut }} -->
 									<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

@@ -14,20 +14,20 @@
 	import { change_height, current_height, next_height_step_size } from '$lib/ts/stores/ui_behavior';
 	import Button from '$lib/components/Button.svelte';
 	import PathBar from './PathBar.svelte';
-	import { selected_display_ids, selected_file_ids } from '$lib/ts/stores/select';
+	import { select, selected_display_ids, selected_file_ids } from '$lib/ts/stores/select';
 	import {
 		current_file_path,
-		get_current_folder_elements,
+		get_folder_elements,
 		get_file_by_id,
 		run_for_selected_files_on_selected_displays,
 		update_current_folder_on_selected_displays,
-		get_displays_where_path_exists,
-		create_folder_on_all_selected_displays
+		get_displays_where_path_not_exists,
+		create_path_on_all_selected_displays
 	} from '$lib/ts/stores/files';
 	import { slide } from 'svelte/transition';
 	import InodeElement from '../lib/components/InodeElement.svelte';
 	import PopUp from '$lib/components/PopUp.svelte';
-	import { get_file_primary_key, type Inode, type PopupContent } from '$lib/ts/types';
+	import { get_file_primary_key, is_folder, type Inode, type PopupContent } from '$lib/ts/types';
 	import TextInput from '$lib/components/TextInput.svelte';
 	import {
 		first_letter_is_valid,
@@ -37,7 +37,8 @@
 	import { delete_files, rename_file } from '$lib/ts/api_handler';
 	import HighlightedText from '$lib/components/HighlightedText.svelte';
 	import { liveQuery, type Observable } from 'dexie';
-	import { download_file, add_upload } from '$lib/ts/file_transfer_handler';
+	import { download_file, add_upload, add_sync_recursively } from '$lib/ts/file_transfer_handler';
+	import { selected_online_display_ids } from '$lib/ts/stores/displays';
 
 	let current_name: string = $state('');
 	let current_valid: boolean = $state(false);
@@ -51,22 +52,24 @@
 	let current_folder_elements: Observable<Inode[]> | undefined = $state();
 	$effect(() => {
 		const path = $current_file_path,
-			display_ids = $selected_display_ids;
-		current_folder_elements = liveQuery(() => get_current_folder_elements(path, display_ids));
+			display_ids = $selected_online_display_ids;
+		current_folder_elements = liveQuery(() => get_folder_elements(path, display_ids));
 	});
 	let one_file_selected: Observable<boolean> | undefined = $state();
 	$effect(() => {
 		const s = $selected_file_ids;
 		one_file_selected = liveQuery(async () => {
-			return s.length === 1 && (await get_file_by_id(s[0]))?.type !== 'inode/directory';
-		})
-	})
+			if (s.length !== 1) return false
+			const inode = await get_file_by_id(s[0]);
+			if (!inode) return false;
+			return !is_folder(inode);
+		});
+	});
 
 	let popup_content: PopupContent = $state({
 		open: false,
 		snippet: null,
-		title: '',
-		closable: true
+		title: ''
 	});
 
 	let file_input: HTMLInputElement;
@@ -76,7 +79,7 @@
 			const results = await Promise.all(selected_file_ids.map((id) => get_file_by_id(id)));
 			return results.filter((element) => element !== null);
 		} catch (e: unknown) {
-			console.error('Error on generating selected_files');
+			console.error('Error on generating selected_files', e);
 			return [];
 		}
 	}
@@ -87,11 +90,8 @@
 
 	async function create_new_folder() {
 		popup_close_function();
-		await create_folder_on_all_selected_displays(
-			current_name.trim(),
-			$current_file_path,
-			$selected_display_ids
-		);
+		const path_with_folder_name = ($current_file_path += current_name.trim() + '/');
+		await create_path_on_all_selected_displays(path_with_folder_name, $selected_online_display_ids);
 		await update_current_folder_on_selected_displays();
 	}
 
@@ -110,17 +110,16 @@
 	const show_edit_file_popup = async () => {
 		const file = await get_file_by_id($selected_file_ids[0]);
 		if (!file) return;
-		const is_folder = file.type === 'inode/directory';
-		const extension = is_folder ? '' : '.' + file.name.split('.').at(-1) || '';
+		const file_is_folder = is_folder(file);
+		const extension = file_is_folder ? '' : '.' + file.name.split('.').at(-1) || '';
 		current_name = file.name.slice(0, file.name.length - extension.length);
 		current_valid = true;
 		popup_content = {
 			open: true,
 			snippet: edit_file_name_popup,
-			title: `${is_folder ? 'Ordner' : 'Datei'} umbenennen`,
+			title: `${file_is_folder ? 'Ordner' : 'Datei'} umbenennen`,
 			title_icon: FolderPlus,
-			snippet_arg: extension,
-			closable: true
+			snippet_arg: extension
 		};
 	};
 
@@ -128,14 +127,13 @@
 		current_name = '';
 		current_valid = false;
 		display_names_where_path_does_not_exist = (
-			await get_displays_where_path_exists($current_file_path, $selected_display_ids, true)
+			await get_displays_where_path_not_exists($current_file_path, $selected_online_display_ids)
 		).map((display) => display.name);
 		popup_content = {
 			open: true,
 			snippet: new_folder_popup,
 			title: 'Neuen Ordner erstellen',
-			title_icon: FolderPlus,
-			closable: true
+			title_icon: FolderPlus
 		};
 	};
 
@@ -144,10 +142,27 @@
 			open: true,
 			snippet: delete_request_popup,
 			title: `${$selected_file_ids.length} ${$selected_file_ids.length === 1 ? 'Objekt' : 'Objekte'} wirklich löschen?`,
-			title_icon: Trash2,
-			closable: true
+			title_icon: Trash2
 		};
 	};
+
+	async function sync_selected_files(
+		current_selected_file_ids: string[],
+		selected_display_ids: string[],
+		current_folder_elements: Inode[]
+	) {
+		if (current_selected_file_ids.length === 0 && current_folder_elements.length > 0) {
+			current_selected_file_ids = current_folder_elements.map((inode) =>
+				get_file_primary_key(inode)
+			);
+		}
+		if (current_selected_file_ids.length === 0) return;
+		// Mit For-Schleife über ausgewählte Elemente gehen
+		for (const file_id of current_selected_file_ids) {
+			await select(selected_file_ids, file_id, 'deselect');
+			await add_sync_recursively(file_id, selected_display_ids);
+		}
+	}
 </script>
 
 {#snippet new_folder_popup()}
@@ -158,7 +173,7 @@
 			> existiert nicht auf {display_names_where_path_does_not_exist.length === 1
 				? 'dem Bildschirm'
 				: 'den Bildschirmen'}
-			{#each display_names_where_path_does_not_exist as display_name, i}
+			{#each display_names_where_path_does_not_exist as display_name, i (i)}
 				{#if i !== 0}
 					,
 				{/if}
@@ -232,8 +247,8 @@
 		<span class="text-stone-400 px-1"
 			>{`${$selected_file_ids.length === 1 ? 'Folgendes Objekt' : `Folgende ${$selected_file_ids.length} Objekte`} löschen? (Wiederherstellung nicht möglich)`}</span
 		>
-		<div class="flex flex-col gap-2 overflow-auto h-full min-h-0 grow-0">
-			{#each $selected_files || [] as file}
+		<div class="flex flex-col gap-2 overflow-y-auto h-full min-h-0 grow-0">
+			{#each $selected_files || [] as file, i (i)}
 				<InodeElement {file} not_interactable />
 			{/each}
 		</div>
@@ -263,21 +278,24 @@
 	bind:this={file_input}
 	multiple
 	accept={get_accepted_file_type_string()}
-	onchange={(e) =>
-		add_upload((e.target as HTMLInputElement).files!, $selected_display_ids, $current_file_path)}
+	onchange={async (e) => {
+		const target = e.target as HTMLInputElement;
+		await add_upload(target.files!, $selected_online_display_ids, $current_file_path);
+		target.value = '';
+	}}
 />
 
 <div class="bg-stone-800 h-full rounded-2xl grid grid-rows-[2.5rem_1fr] min-h-0">
 	<div class="bg-stone-700 flex justify-between w-full p-1 rounded-t-2xl min-w-0 gap-2">
 		<span class="text-xl font-bold pl-2 content-center truncate min-w-0">
-			Dateien anzeigen und verwalten
+			Dateien Anzeigen und Verwalten
 		</span>
 		<div class="flex flex-row">
 			<Button
 				title="Dateien größer darstellen"
 				className="aspect-square p-1.5! pr-1! rounded-r-none"
 				bg="bg-stone-600"
-				disabled={!Boolean(next_height_step_size('file', $current_height, 1))}
+				disabled={!next_height_step_size('file', $current_height, 1)}
 				click_function={() => {
 					change_height('file', 1);
 				}}
@@ -288,7 +306,7 @@
 				title="Dateien kleiner darstellen"
 				className="aspect-square p-1.5! pl-1! rounded-l-none"
 				bg="bg-stone-600"
-				disabled={!Boolean(next_height_step_size('file', $current_height, -1))}
+				disabled={!next_height_step_size('file', $current_height, -1)}
 				click_function={() => {
 					change_height('file', -1);
 				}}
@@ -306,7 +324,7 @@
 						title="Neuen Ordner erstellen (Neuen Ordner mit ausgewählten Objekten erstellen)"
 						className="px-3 flex"
 						click_function={show_new_folder_popup}
-						disabled={$selected_display_ids.length === 0}><FolderPlus /></Button
+						disabled={$selected_online_display_ids.length === 0}><FolderPlus /></Button
 					>
 					<div class="border border-stone-700 my-1"></div>
 					<Button
@@ -315,19 +333,26 @@
 						click_function={() => {
 							if (file_input) file_input.click();
 						}}
-						disabled={$selected_display_ids.length === 0}><Upload /></Button
+						disabled={$selected_online_display_ids.length === 0}><Upload /></Button
 					>
 					<Button
 						title="Ausgewählte Datei herunterladen"
 						className="px-3 flex"
-						click_function={() => (download_file($selected_file_ids[0], $selected_display_ids))}
+						click_function={async () =>
+							await download_file($selected_file_ids[0], $selected_online_display_ids)}
 						disabled={!$one_file_selected}><Download /></Button
 					>
 					<div class="border border-stone-700 my-1"></div>
 					<Button
 						title="Aktuellen Ordner / Ausgewählte Datei(en) zwischen Bildschirmen synchronisieren"
 						className="px-3 flex gap-3"
-						disabled={$selected_display_ids.length === 0}
+						click_function={async () =>
+							await sync_selected_files(
+								$selected_file_ids,
+								$selected_online_display_ids,
+								$current_folder_elements ?? []
+							)}
+						disabled={$selected_online_display_ids.length === 0}
 						><RefreshCcw />
 						<span class="hidden 2xl:flex">Synchronisieren</span>
 					</Button>
@@ -341,7 +366,7 @@
 					<Button
 						title="Ausgewählte Datei(en) einfügen"
 						className="px-3 flex"
-						disabled={$selected_display_ids.length === 0}
+						disabled={$selected_online_display_ids.length === 0}
 					>
 						<ClipboardPaste />
 					</Button>
@@ -363,9 +388,9 @@
 				</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}
+				{#if $selected_online_display_ids.length === 0}
 					<span class="text-stone-450 px-10 py-6 leading-relaxed text-center">
 						Es sind keine Bildschirme ausgewählt.
 					</span>

control/frontend/src/routes/KeyInput.svelte

@@ -1,106 +1,175 @@
 <script lang="ts">
 	import { flip } from 'svelte/animate';
 	import { get_selectable_color_classes } from '$lib/ts/stores/ui_behavior';
-	import key_map_json from './../../../../shared/keys.json';
 	import { fade } from 'svelte/transition';
 	import { run_on_all_selected_displays } from '$lib/ts/stores/displays';
 	import { send_keyboard_input } from '$lib/ts/api_handler';
+	import { ArrowDownToLine, ArrowUpFromLine, Grid2x2, Option } from 'lucide-svelte';
+	import Button from '$lib/components/Button.svelte';
+	import { onDestroy } from 'svelte';
+	import { add_to_keyboard_queue } from '$lib/ts/utils';
 
-	const key_map: Record<string, string> = key_map_json as Record<string, string>;
+	let {
+		popup_close_function
+	}: {
+		popup_close_function: () => void;
+	} = $props();
 
 	let active = $state(false);
 	const current_keys: string[] = $state([]);
+
 	let last_keys: { id: number; key: string }[] = $state([]);
+	let seq = 0;
 
 	let el: HTMLDivElement;
 
 	function add_to_last_keys(name: string) {
-		const id = Date.now();
-		last_keys.push({ id, key: name });
+		const id = ++seq;
+
+		// Neueste oben
+		last_keys = [{ id, key: name }, ...last_keys].slice(0, 6);
+
 		setTimeout(() => {
 			last_keys = last_keys.filter((e) => e.id !== id);
 		}, 1500);
 	}
 
-	async function on_key(e: KeyboardEvent, key_down: boolean) {
+	async function on_keyboard_input(e: KeyboardEvent, key_down: boolean) {
 		if (!active) return;
-		const id = key_map[e.code];
+		const id = e.code;
 		if (!id) return;
 
-		if (key_down) {
-			if (current_keys.includes(e.code)) return;
-			current_keys.push(e.code);
-		} else {
-			const index = current_keys.indexOf(e.code);
-			if (index === -1) return;
-			current_keys.splice(index, 1);
-		}
-
-		if (e.repeat) return;
-
 		e.preventDefault();
 		e.stopPropagation();
 
-		const action: 'press' | 'release' = key_down ? 'press' : 'release';
-
-		add_to_last_keys(action.toUpperCase() + ' ' + e.code);
-
-		await run_on_all_selected_displays(
-			(d) => send_keyboard_input(d.ip, [{ key: id, action }]),
-			true
-		);
+		if (e.repeat) return;
+		await on_key(id, key_down);
 	}
 
-	async function release_all_pressed_keys() {
-		const inputs: {key: string; action: 'press' | 'release' }[] = [];
+	async function on_key(key: string, key_down: boolean) {
+		if (key_down) {
+			if (current_keys.includes(key)) return;
+			current_keys.push(key);
+		} else {
+			const index = current_keys.indexOf(key);
+			if (index === -1) return;
+			current_keys.splice(index, 1);
+		}
+
+		const action: 'press' | 'release' = key_down ? 'press' : 'release';
+
+		add_to_last_keys(action.toUpperCase() + ' ' + key);
+		add_to_keyboard_queue(async () => {
+			await run_on_all_selected_displays((d) => send_keyboard_input(d.ip, [{ key, action }]), true);
+		});
+	}
+
+	function release_all_pressed_keys() {
+		const inputs: { key: string; action: 'press' | 'release' }[] = [];
 		for (let i = current_keys.length - 1; i >= 0; i--) {
-			inputs.push({key: current_keys[i], action: 'release'})
+			inputs.push({ key: current_keys[i], action: 'release' });
 			current_keys.splice(i, 1);
 		}
 
-		await run_on_all_selected_displays(
-			(d) => send_keyboard_input(d.ip, inputs),
-			true
-		);
+		add_to_keyboard_queue(async () => {
+			await run_on_all_selected_displays((d) => send_keyboard_input(d.ip, inputs), true);
+		});
 	}
+
+	onDestroy(() => {
+		release_all_pressed_keys();
+	});
 </script>
 
-<div
-	role="textbox"
-	tabindex="0"
-	bind:this={el}
-	onclick={() => {
-		if (active) {
-			el.blur();
-		} else {
-			el.focus();
-			active = true;
-		}
-	}}
-	onblur={async () => {
-		active = false;
-		await release_all_pressed_keys();
-	}}
-	onkeydown={(e) => on_key(e, true)}
-	onkeyup={(e) => on_key(e, false)}
-	class="relative flex justify-center items-center h-15 w-full cursor-pointer rounded-xl transition-colors duration-200 select-none {get_selectable_color_classes(
-		active,
-		{
-			bg: true,
-			hover: true,
-			active: true,
-			text: true
-		}
-	)}"
->
-	{active ? 'Erfassung aktiv' : 'Hier für Erfassung klicken'}
-	<div class="absolute top-full left-0 ml-1 mt-0.5 flex flex-col-reverse text-sm text-stone-400">
-		{#each last_keys as key (key.id)}
+<div class="flex flex-row gap-2 overflow-hidden h-full">
+	<div
+		role="textbox"
+		tabindex="0"
+		bind:this={el}
+		onclick={() => {
+			if (active) {
+				el.blur();
+			} else {
+				el.focus();
+				active = true;
+			}
+		}}
+		onblur={async () => {
+			active = false;
+			release_all_pressed_keys();
+		}}
+		onkeydown={(e) => on_keyboard_input(e, true)}
+		onkeyup={(e) => on_keyboard_input(e, false)}
+		class="flex justify-center items-center text-center grow py-2 px-8 w-70 h-full cursor-pointer rounded-xl transition-colors duration-200 select-none {get_selectable_color_classes(
+			active,
+			{
+				bg: true,
+				hover: true,
+				active: true,
+				text: true
+			}
+		)}"
+	>
+		{active ? 'Erfassung aktiv' : 'Hier für Erfassung klicken'}
+	</div>
+	<div
+		class="relative flex flex-col gap-1 text-sm w-40 p-2 bg-stone-750 rounded-xl overflow-hidden h-full"
+	>
+		{#each last_keys as item (item.id)}
 			<span
-				animate:flip={{ duration: 200 }}
-				in:fade={{ duration: 200 }}
-				out:fade={{ duration: 500 }}>{key.key}</span
+				class="flex flex-row gap-2 {item.key.split(' ')[0] === 'PRESS'
+					? 'text-sky-600'
+					: 'text-lime-600'}"
+				animate:flip={{ duration: 120 }}
+				in:fade={{ duration: 120 }}
+				out:fade={{ duration: 200 }}
 			>
+				{#if item.key.split(' ')[0] === 'PRESS'}
+					<ArrowDownToLine />
+				{:else}
+					<ArrowUpFromLine />
+				{/if}
+				{item.key.split(' ').at(-1)}
+			</span>
 		{/each}
+		<div
+			class="absolute bottom-0 right-0 left-0 h-5 bg-linear-to-b from-transparent to-stone-750"
+		></div>
+	</div>
+	<div class="flex flex-col gap-2 justify-between">
+		<div class="flex flex-col gap-2">
+			<button
+				title="Windows-/Meta-Taste [gedrückt halten möglich]"
+				class="px-3 bg-stone-700 py-2 gap-2 rounded-xl flex items-center transition-colors duration-200 hover:bg-stone-600 active:bg-stone-500 cursor-pointer"
+				onmousedown={async (e) => {
+					e.preventDefault();
+					await on_key('MetaLeft', true);
+				}}
+				onmouseup={async () => {
+					await on_key('MetaLeft', false);
+				}}
+			>
+				<Grid2x2 /> Meta
+			</button>
+			<button
+				title="Alt-Taste [gedrückt halten möglich]"
+				class="px-3 bg-stone-700 py-2 gap-2 rounded-xl flex items-center transition-colors duration-200 hover:bg-stone-600 active:bg-stone-500 cursor-pointer"
+				onmousedown={async (e) => {
+					e.preventDefault();
+					await on_key('AltLeft', true);
+				}}
+				onmouseup={async () => {
+					await on_key('AltLeft', false);
+				}}
+			>
+				<Option /> Alt
+			</button>
+		</div>
+
+		<Button
+			div_class="mt-2 justify-end"
+			className="px-4 font-bold"
+			click_function={popup_close_function}>Fertig</Button
+		>
 	</div>
 </div>

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/frontend/src/routes/TipTapInput.svelte

@@ -9,7 +9,6 @@
 		Highlighter,
 		Italic,
 		PaintBucket,
-		QrCode,
 		Strikethrough
 	} from 'lucide-svelte';
 	import Button from '$lib/components/Button.svelte';
@@ -20,6 +19,12 @@
 	import { Color } from '@tiptap/extension-text-style';
 	import Highlight from '@tiptap/extension-highlight';
 
+	let {
+		text = $bindable()
+	}: {
+		text: string;
+	} = $props();
+
 	type TextEditOption = {
 		onclick: () => void;
 		is_selected: () => boolean;
@@ -66,12 +71,6 @@
 				is_selected: () => editor_state.editor?.isActive('strike') ?? false,
 				title: 'Durchgestrichen',
 				icon: Strikethrough
-			},
-			{
-				onclick: () => {},
-				is_selected: () => false,
-				title: 'QR-Code anfügen',
-				icon: QrCode
 			}
 		],
 		[
@@ -134,20 +133,22 @@
 				Highlight.configure({
 					multicolor: true
 				})
-			],
+			],
 			content: text,
 			onTransaction: ({ editor }) => {
 				// Increment the state signal to force a re-render
 				editor_state = { editor };
 			},
 			autofocus: true
+		});
 		editor_state.editor.commands.selectAll();
 	});
+	onDestroy(() => {
 		if (editor_state.editor) text = editor_state.editor.getHTML();
 		editor_state.editor?.destroy();
 	});
 </script>
-
+
 {#each Object.values(color_states) as color_state, i (i)}
 	<input type="color" bind:this={color_state.el} bind:value={color_state.value} class="hidden" />
 {/each}
@@ -161,9 +162,9 @@
 	</div>
 
 	<div class="flex flex-col gap-2 justify-between">
-		<div class="flex flex-col gap-2">
+		<div class="flex flex-col gap-2">
 			{#each text_edit_options as edit_row, i (i)}
-				<div class="flex flex-row gap-1">
+				<div class="flex flex-row gap-1">
 					{#each edit_row as option, j (j)}
 						<div class="flex flex-row">
 							<button
@@ -216,7 +217,7 @@
 				</div>
 			{/each}
 		</div>
-
+
 		<Button click_function={show_text} className="w-full font-bold">Text Anzeigen</Button>
 	</div>
 </div>

control/frontend/src/tailwind.config.js

@@ -1,221 +1,221 @@
 module.exports = {
-  content: ['./src/**/*.{html,js,svelte,ts}'],
-  safelist: [
-    'bg-stone-50',
-    'bg-stone-100',
-    'bg-stone-150',
-    'bg-stone-200',
-    'bg-stone-250',
-    'bg-stone-300',
-    'bg-stone-350',
-    'bg-stone-400',
-    'bg-stone-450',
-    'bg-stone-500',
-    'bg-stone-550',
-    'bg-stone-600',
-    'bg-stone-650',
-    'bg-stone-700',
-    'bg-stone-750',
-    'bg-stone-800',
-    'bg-stone-850',
-    'bg-stone-900',
-    'bg-stone-950',
+	content: ['./src/**/*.{html,js,svelte,ts}'],
+	safelist: [
+		'bg-stone-50',
+		'bg-stone-100',
+		'bg-stone-150',
+		'bg-stone-200',
+		'bg-stone-250',
+		'bg-stone-300',
+		'bg-stone-350',
+		'bg-stone-400',
+		'bg-stone-450',
+		'bg-stone-500',
+		'bg-stone-550',
+		'bg-stone-600',
+		'bg-stone-650',
+		'bg-stone-700',
+		'bg-stone-750',
+		'bg-stone-800',
+		'bg-stone-850',
+		'bg-stone-900',
+		'bg-stone-950',
 
-    'hover:bg-stone-50',
-    'hover:bg-stone-100',
-    'hover:bg-stone-150',
-    'hover:bg-stone-200',
-    'hover:bg-stone-250',
-    'hover:bg-stone-300',
-    'hover:bg-stone-350',
-    'hover:bg-stone-400',
-    'hover:bg-stone-450',
-    'hover:bg-stone-500',
-    'hover:bg-stone-550',
-    'hover:bg-stone-600',
-    'hover:bg-stone-650',
-    'hover:bg-stone-700',
-    'hover:bg-stone-750',
-    'hover:bg-stone-800',
-    'hover:bg-stone-850',
-    'hover:bg-stone-900',
-    'hover:bg-stone-950',
+		'hover:bg-stone-50',
+		'hover:bg-stone-100',
+		'hover:bg-stone-150',
+		'hover:bg-stone-200',
+		'hover:bg-stone-250',
+		'hover:bg-stone-300',
+		'hover:bg-stone-350',
+		'hover:bg-stone-400',
+		'hover:bg-stone-450',
+		'hover:bg-stone-500',
+		'hover:bg-stone-550',
+		'hover:bg-stone-600',
+		'hover:bg-stone-650',
+		'hover:bg-stone-700',
+		'hover:bg-stone-750',
+		'hover:bg-stone-800',
+		'hover:bg-stone-850',
+		'hover:bg-stone-900',
+		'hover:bg-stone-950',
 
-    'active:bg-stone-50',
-    'active:bg-stone-100',
-    'active:bg-stone-150',
-    'active:bg-stone-200',
-    'active:bg-stone-250',
-    'active:bg-stone-300',
-    'active:bg-stone-350',
-    'active:bg-stone-400',
-    'active:bg-stone-450',
-    'active:bg-stone-500',
-    'active:bg-stone-550',
-    'active:bg-stone-600',
-    'active:bg-stone-650',
-    'active:bg-stone-700',
-    'active:bg-stone-750',
-    'active:bg-stone-800',
-    'active:bg-stone-850',
-    'active:bg-stone-900',
-    'active:bg-stone-950',
+		'active:bg-stone-50',
+		'active:bg-stone-100',
+		'active:bg-stone-150',
+		'active:bg-stone-200',
+		'active:bg-stone-250',
+		'active:bg-stone-300',
+		'active:bg-stone-350',
+		'active:bg-stone-400',
+		'active:bg-stone-450',
+		'active:bg-stone-500',
+		'active:bg-stone-550',
+		'active:bg-stone-600',
+		'active:bg-stone-650',
+		'active:bg-stone-700',
+		'active:bg-stone-750',
+		'active:bg-stone-800',
+		'active:bg-stone-850',
+		'active:bg-stone-900',
+		'active:bg-stone-950',
 
-    'focus:bg-stone-50',
-    'focus:bg-stone-100',
-    'focus:bg-stone-150',
-    'focus:bg-stone-200',
-    'focus:bg-stone-250',
-    'focus:bg-stone-300',
-    'focus:bg-stone-350',
-    'focus:bg-stone-400',
-    'focus:bg-stone-450',
-    'focus:bg-stone-500',
-    'focus:bg-stone-550',
-    'focus:bg-stone-600',
-    'focus:bg-stone-650',
-    'focus:bg-stone-700',
-    'focus:bg-stone-750',
-    'focus:bg-stone-800',
-    'focus:bg-stone-850',
-    'focus:bg-stone-900',
-    'focus:bg-stone-950',
+		'focus:bg-stone-50',
+		'focus:bg-stone-100',
+		'focus:bg-stone-150',
+		'focus:bg-stone-200',
+		'focus:bg-stone-250',
+		'focus:bg-stone-300',
+		'focus:bg-stone-350',
+		'focus:bg-stone-400',
+		'focus:bg-stone-450',
+		'focus:bg-stone-500',
+		'focus:bg-stone-550',
+		'focus:bg-stone-600',
+		'focus:bg-stone-650',
+		'focus:bg-stone-700',
+		'focus:bg-stone-750',
+		'focus:bg-stone-800',
+		'focus:bg-stone-850',
+		'focus:bg-stone-900',
+		'focus:bg-stone-950',
 
-    'text-stone-50',
-    'text-stone-150',
-    'text-stone-200',
-    'text-stone-250',
-    'text-stone-300',
-    'text-stone-350',
-    'text-stone-100',
-    'text-stone-400',
-    'text-stone-450',
-    'text-stone-500',
-    'text-stone-550',
-    'text-stone-600',
-    'text-stone-650',
-    'text-stone-700',
-    'text-stone-750',
-    'text-stone-800',
-    'text-stone-850',
-    'text-stone-900',
-    'text-stone-950',
+		'text-stone-50',
+		'text-stone-150',
+		'text-stone-200',
+		'text-stone-250',
+		'text-stone-300',
+		'text-stone-350',
+		'text-stone-100',
+		'text-stone-400',
+		'text-stone-450',
+		'text-stone-500',
+		'text-stone-550',
+		'text-stone-600',
+		'text-stone-650',
+		'text-stone-700',
+		'text-stone-750',
+		'text-stone-800',
+		'text-stone-850',
+		'text-stone-900',
+		'text-stone-950',
 
-    'group-hover:text-stone-100',
-    'group-hover:text-stone-150',
-    'group-hover:text-stone-200',
-    'group-hover:text-stone-50',
-    'group-hover:text-stone-250',
-    'group-hover:text-stone-300',
-    'group-hover:text-stone-350',
-    'group-hover:text-stone-400',
-    'group-hover:text-stone-450',
-    'group-hover:text-stone-500',
-    'group-hover:text-stone-550',
-    'group-hover:text-stone-600',
-    'group-hover:text-stone-650',
-    'group-hover:text-stone-700',
-    'group-hover:text-stone-750',
-    'group-hover:text-stone-800',
-    'group-hover:text-stone-850',
-    'group-hover:text-stone-900',
-    'group-hover:text-stone-950',
+		'group-hover:text-stone-100',
+		'group-hover:text-stone-150',
+		'group-hover:text-stone-200',
+		'group-hover:text-stone-50',
+		'group-hover:text-stone-250',
+		'group-hover:text-stone-300',
+		'group-hover:text-stone-350',
+		'group-hover:text-stone-400',
+		'group-hover:text-stone-450',
+		'group-hover:text-stone-500',
+		'group-hover:text-stone-550',
+		'group-hover:text-stone-600',
+		'group-hover:text-stone-650',
+		'group-hover:text-stone-700',
+		'group-hover:text-stone-750',
+		'group-hover:text-stone-800',
+		'group-hover:text-stone-850',
+		'group-hover:text-stone-900',
+		'group-hover:text-stone-950',
 
-    'group-active:text-stone-50',
-    'group-active:text-stone-100',
-    'group-active:text-stone-150',
-    'group-active:text-stone-200',
-    'group-active:text-stone-250',
-    'group-active:text-stone-300',
-    'group-active:text-stone-350',
-    'group-active:text-stone-400',
-    'group-active:text-stone-450',
-    'group-active:text-stone-500',
-    'group-active:text-stone-550',
-    'group-active:text-stone-600',
-    'group-active:text-stone-650',
-    'group-active:text-stone-700',
-    'group-active:text-stone-750',
-    'group-active:text-stone-800',
-    'group-active:text-stone-850',
-    'group-active:text-stone-950',
-    'group-active:text-stone-900',
+		'group-active:text-stone-50',
+		'group-active:text-stone-100',
+		'group-active:text-stone-150',
+		'group-active:text-stone-200',
+		'group-active:text-stone-250',
+		'group-active:text-stone-300',
+		'group-active:text-stone-350',
+		'group-active:text-stone-400',
+		'group-active:text-stone-450',
+		'group-active:text-stone-500',
+		'group-active:text-stone-550',
+		'group-active:text-stone-600',
+		'group-active:text-stone-650',
+		'group-active:text-stone-700',
+		'group-active:text-stone-750',
+		'group-active:text-stone-800',
+		'group-active:text-stone-850',
+		'group-active:text-stone-950',
+		'group-active:text-stone-900',
 
-    'border-stone-50',
-    'border-stone-100',
-    'border-stone-150',
-    'border-stone-200',
-    'border-stone-250',
-    'border-stone-300',
-    'border-stone-350',
-    'border-stone-400',
-    'border-stone-450',
-    'border-stone-500',
-    'border-stone-550',
-    'border-stone-600',
-    'border-stone-650',
-    'border-stone-700',
-    'border-stone-750',
-    'border-stone-800',
-    'border-stone-850',
-    'border-stone-900',
-    'border-stone-950',
+		'border-stone-50',
+		'border-stone-100',
+		'border-stone-150',
+		'border-stone-200',
+		'border-stone-250',
+		'border-stone-300',
+		'border-stone-350',
+		'border-stone-400',
+		'border-stone-450',
+		'border-stone-500',
+		'border-stone-550',
+		'border-stone-600',
+		'border-stone-650',
+		'border-stone-700',
+		'border-stone-750',
+		'border-stone-800',
+		'border-stone-850',
+		'border-stone-900',
+		'border-stone-950',
 
-    'group-hover:border-stone-50',
-    'group-hover:border-stone-100',
-    'group-hover:border-stone-150',
-    'group-hover:border-stone-200',
-    'group-hover:border-stone-250',
-    'group-hover:border-stone-300',
-    'group-hover:border-stone-350',
-    'group-hover:border-stone-400',
-    'group-hover:border-stone-450',
-    'group-hover:border-stone-500',
-    'group-hover:border-stone-550',
-    'group-hover:border-stone-600',
-    'group-hover:border-stone-650',
-    'group-hover:border-stone-700',
-    'group-hover:border-stone-750',
-    'group-hover:border-stone-800',
-    'group-hover:border-stone-850',
-    'group-hover:border-stone-950',
-    'group-hover:border-stone-900',
+		'group-hover:border-stone-50',
+		'group-hover:border-stone-100',
+		'group-hover:border-stone-150',
+		'group-hover:border-stone-200',
+		'group-hover:border-stone-250',
+		'group-hover:border-stone-300',
+		'group-hover:border-stone-350',
+		'group-hover:border-stone-400',
+		'group-hover:border-stone-450',
+		'group-hover:border-stone-500',
+		'group-hover:border-stone-550',
+		'group-hover:border-stone-600',
+		'group-hover:border-stone-650',
+		'group-hover:border-stone-700',
+		'group-hover:border-stone-750',
+		'group-hover:border-stone-800',
+		'group-hover:border-stone-850',
+		'group-hover:border-stone-950',
+		'group-hover:border-stone-900',
 
-    'group-active:border-stone-50',
-    'group-active:border-stone-100',
-    'group-active:border-stone-150',
-    'group-active:border-stone-200',
-    'group-active:border-stone-250',
-    'group-active:border-stone-300',
-    'group-active:border-stone-350',
-    'group-active:border-stone-400',
-    'group-active:border-stone-450',
-    'group-active:border-stone-500',
-    'group-active:border-stone-550',
-    'group-active:border-stone-600',
-    'group-active:border-stone-650',
-    'group-active:border-stone-700',
-    'group-active:border-stone-750',
-    'group-active:border-stone-800',
-    'group-active:border-stone-850',
-    'group-active:border-stone-900',
-    'group-active:border-stone-950',
+		'group-active:border-stone-50',
+		'group-active:border-stone-100',
+		'group-active:border-stone-150',
+		'group-active:border-stone-200',
+		'group-active:border-stone-250',
+		'group-active:border-stone-300',
+		'group-active:border-stone-350',
+		'group-active:border-stone-400',
+		'group-active:border-stone-450',
+		'group-active:border-stone-500',
+		'group-active:border-stone-550',
+		'group-active:border-stone-600',
+		'group-active:border-stone-650',
+		'group-active:border-stone-700',
+		'group-active:border-stone-750',
+		'group-active:border-stone-800',
+		'group-active:border-stone-850',
+		'group-active:border-stone-900',
+		'group-active:border-stone-950',
 
-    'h-10',
-    'h-15',
-    'h-20',
-    'h-25',
-    'h-30',
-    'h-35',
-    'h-40',
+		'h-10',
+		'h-15',
+		'h-20',
+		'h-25',
+		'h-30',
+		'h-35',
+		'h-40',
 
-    'right-0',
-    'left-0',
+		'right-0',
+		'left-0',
 
-    'hover:bg-red-400',
-    'active:bg-red-500',
+		'hover:bg-red-400',
+		'active:bg-red-500',
 
-    'hover:bg-stone-600/70',
-    'active:bg-stone-500/80',
-  ],
-}
+		'hover:bg-stone-600/70',
+		'active:bg-stone-500/80'
+	]
+};

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/net v0.40.0 // indirect
-	golang.org/x/sync v0.14.0 // indirect
-	golang.org/x/sys v0.33.0 // indirect
-	golang.org/x/text v0.25.0 // indirect
-	golang.org/x/time v0.11.0 // indirect
+	golang.org/x/crypto v0.46.0 // indirect
+	golang.org/x/net v0.48.0 // indirect
+	golang.org/x/sync v0.19.0 // indirect
+	golang.org/x/sys v0.39.0 // indirect
+	golang.org/x/text v0.32.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/justfile

@@ -0,0 +1,7 @@
+[working-directory: 'frontend']
+gen:
+    deno install
+    deno task build
+
+dev: gen
+    go run *.go

control/main.go

@@ -1,6 +1,7 @@
 package main
 
 import (
+	"encoding/json"
 	"log/slog"
 	"net"
 	"net/http"
@@ -37,6 +38,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 +65,7 @@ func main() {
 			os.Exit(1)
 		}
 	}()
-	err = shared.OpenBrowserWindow("http://localhost:"+port, false, false)
+	err = openBrowserWindow("http://localhost:" + port)
 	if err != nil {
 		slog.Error("Failed to open browser window", "error", err)
 		os.Exit(1)
@@ -74,24 +78,46 @@ func pingRoute(ctx echo.Context) error {
 		return ctx.JSON(http.StatusBadRequest, PingResponse{Error: "missing 'ip' query parameter"})
 	}
 
-	cmd := exec.Command("ping", "-c", "1", "-w", "1", ip)
+	cmd := exec.Command("ping", "-c", "1", "-w", "5", ip)
 	result := shared.RunShellCommand(cmd)
 	if result.ExitCode != 0 {
 		return ctx.JSON(http.StatusOK, PingResponse{Status: "host_offline"})
 	}
 
-	conn, err := net.DialTimeout("tcp", ip+":1323", 1*time.Second)
+	client := http.Client{
+		Timeout: 5 * time.Second,
+	}
+
+	resp, err := client.Get("http://" + ip + ":1323/api/ping")
 	if err != nil {
 		return ctx.JSON(http.StatusOK, PingResponse{Status: "app_offline"})
 	}
-	conn.Close()
+	defer resp.Body.Close()
+	if resp.StatusCode != http.StatusOK {
+		return ctx.JSON(http.StatusOK, PingResponse{Status: "app_offline"})
+	}
 
-	return ctx.JSON(http.StatusOK, PingResponse{Status: "app_online"})
+	var appPing AppPingResponse
+	if err := json.NewDecoder(resp.Body).Decode(&appPing); err != nil {
+		return ctx.JSON(http.StatusOK, PingResponse{
+			Status: "app_offline",
+		})
+	}
+
+	return ctx.JSON(http.StatusOK, PingResponse{
+		Status:  "app_online",
+		Version: appPing.Version,
+	})
+}
+
+type AppPingResponse struct {
+	Version string `json:"version"`
 }
 
 type PingResponse struct {
-	Status string `json:"status"`
-	Error  string `json:"error"`
+	Status  string `json:"status"`
+	Version string `json:"version"`
+	Error   string `json:"error"`
 }
 
 type WakeOnLanRequest struct {
@@ -105,14 +131,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"})
 	}
 

control/open_browser.go

@@ -0,0 +1,40 @@
+package main
+
+import (
+	"errors"
+	"fmt"
+	"os"
+	"os/exec"
+	"path/filepath"
+	"plg-mudics/shared"
+)
+
+func openBrowserWindow(url string) error {
+	bins := []string{"chromium", "chromium-browser"}
+
+	home, err := os.UserHomeDir()
+	if err != nil {
+		return fmt.Errorf("unable to determine user home directory: %w", err)
+	}
+	browserProfileDirPath := filepath.Join(home, ".local", "share", "plg-mudics", "browser-control")
+	if err := os.MkdirAll(browserProfileDirPath, os.ModePerm); err != nil {
+		return fmt.Errorf("failed to create local config directory: %w", err)
+	}
+
+	args := []string{
+		fmt.Sprintf("--app=%s", url),
+		fmt.Sprintf("--user-data-dir=%s", browserProfileDirPath),
+	}
+
+	errs := []string{}
+	for _, bin := range bins {
+		cmd := exec.Command(bin, args...)
+		commandOutput := shared.RunShellCommand(cmd)
+		if commandOutput.ExitCode == 0 {
+			return nil
+		}
+		errs = append(errs, commandOutput.Stderr)
+	}
+
+	return errors.New("failed to open browser window: " + fmt.Sprint(errs))
+}

display/README.md

@@ -62,6 +62,12 @@ Even when the command itself fails.
 
 The screenshot as binary in the response body.
 
+## PATCH `/openWebsite`
+
+### Request Body
+
+- `url`: string
+
 ## POST `/file/<path>` - Upload File
 
 ### Responses

display/browser/main.go

@@ -0,0 +1,83 @@
+package browser
+
+import (
+	"context"
+	"fmt"
+	"os"
+	"path/filepath"
+
+	"github.com/chromedp/chromedp"
+)
+
+var Browser BrowserType = BrowserType{}
+
+type BrowserType struct {
+	Ctx    context.Context
+	Cancel context.CancelFunc
+}
+
+func (b *BrowserType) Init() error {
+	home, err := os.UserHomeDir()
+	if err != nil {
+		return fmt.Errorf("unable to determine user home directory: %w", err)
+	}
+	browserProfileDirPath := filepath.Join(home, ".local", "share", "plg-mudics", "browser-display")
+	if err := os.MkdirAll(browserProfileDirPath, os.ModePerm); err != nil {
+		return fmt.Errorf("failed to create local config directory: %w", err)
+	}
+
+	opts := []chromedp.ExecAllocatorOption{
+		chromedp.Flag("headless", false),
+		chromedp.Flag("app", "http://example.com"), // app mode prevents a few unwanted features of chrome, the start url is directly overwritten
+		chromedp.Flag("start-fullscreen", true),
+		chromedp.Flag("hide-scrollbars", true),
+		chromedp.Flag("allow-file-access-from-files", true),
+		chromedp.Flag("user-data-dir", browserProfileDirPath),
+		chromedp.Flag("autoplay-policy", "no-user-gesture-required"),
+	}
+
+	initCtx, _ := chromedp.NewExecAllocator(context.Background(), opts...)
+	b.Ctx, b.Cancel = chromedp.NewContext(initCtx)
+
+	return nil
+}
+
+func (b *BrowserType) OpenPage(url string) error {
+	err := chromedp.Run(b.Ctx, chromedp.Navigate(url))
+	if err != nil {
+		return fmt.Errorf("navigate to URL: %w", err)
+	}
+	return nil
+}
+
+// Yes, we need that trick with creating a temp file and not directly sending html since
+// chrome only allows us to access local files via other local files
+func (b *BrowserType) OpenHTML(html string) error {
+	var err error
+
+	tempFile, err := os.CreateTemp("", "mudics-*.html")
+	if err != nil {
+		return fmt.Errorf("could not create tempfile: %w", err)
+	}
+	defer func() { _ = tempFile.Close() }()
+
+	_, err = tempFile.WriteString(html)
+	if err != nil {
+		return fmt.Errorf("could not write to tempfile: %w", err)
+	}
+
+	err = chromedp.Run(b.Ctx, chromedp.Navigate("file://"+tempFile.Name()))
+	if err != nil {
+		return fmt.Errorf("navigate to URL: %w", err)
+	}
+
+	return nil
+}
+
+func (b *BrowserType) OpenPDF(path string) error {
+	err := b.OpenPage("file://" + path + "#toolbar=0&view=Fit")
+	if err != nil {
+		return fmt.Errorf("open PDF: %w", err)
+	}
+	return nil
+}

display/go.mod

@@ -1,36 +1,43 @@
 module plg-mudics/display
 
-go 1.24.4
+go 1.25
 
 require (
-	github.com/a-h/templ v0.3.960
-	github.com/labstack/echo/v4 v4.13.4
+	github.com/a-h/templ v0.3.977
+	github.com/chromedp/chromedp v0.14.2
+	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 (
 	github.com/a-h/parse v0.0.0-20250122154542-74294addb73e // indirect
 	github.com/andybalholm/brotli v1.1.0 // indirect
 	github.com/cenkalti/backoff/v4 v4.3.0 // indirect
+	github.com/chromedp/cdproto v0.0.0-20250803210736-d308e07a266d // indirect
+	github.com/chromedp/sysutil v1.1.0 // indirect
 	github.com/cli/browser v1.3.0 // indirect
 	github.com/fatih/color v1.16.0 // indirect
 	github.com/fsnotify/fsnotify v1.7.0 // indirect
+	github.com/go-json-experiment/json v0.0.0-20251027170946-4849db3c2f7e // indirect
+	github.com/gobwas/httphead v0.1.0 // indirect
+	github.com/gobwas/pool v0.2.1 // indirect
+	github.com/gobwas/ws v1.4.0 // indirect
 	github.com/labstack/gommon v0.4.2 // indirect
 	github.com/mattn/go-colorable v0.1.14 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
 	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/mod v0.26.0 // indirect
-	golang.org/x/net v0.42.0 // indirect
-	golang.org/x/sync v0.16.0 // indirect
-	golang.org/x/sys v0.34.0 // indirect
-	golang.org/x/text v0.27.0 // indirect
-	golang.org/x/time v0.11.0 // indirect
-	golang.org/x/tools v0.35.0 // indirect
+	golang.org/x/crypto v0.46.0 // indirect
+	golang.org/x/mod v0.30.0 // indirect
+	golang.org/x/net v0.48.0 // indirect
+	golang.org/x/sync v0.19.0 // indirect
+	golang.org/x/sys v0.40.0 // indirect
+	golang.org/x/text v0.32.0 // indirect
+	golang.org/x/time v0.14.0 // indirect
+	golang.org/x/tools v0.39.0 // indirect
 )
 
 tool github.com/a-h/templ/cmd/templ

display/go.sum

@@ -2,10 +2,18 @@ github.com/a-h/parse v0.0.0-20250122154542-74294addb73e h1:HjVbSQHy+dnlS6C3XajZ6
 github.com/a-h/parse v0.0.0-20250122154542-74294addb73e/go.mod h1:3mnrkvGpurZ4ZrTDbYU84xhwXW2TjTKShSwjRi2ihfQ=
 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/a-h/templ v0.3.977 h1:kiKAPXTZE2Iaf8JbtM21r54A8bCNsncrfnokZZSrSDg=
+github.com/a-h/templ v0.3.977/go.mod h1:oCZcnKRf5jjsGpf2yELzQfodLphd2mwecwG4Crk5HBo=
 github.com/andybalholm/brotli v1.1.0 h1:eLKJA0d02Lf0mVpIDgYnqXcUn0GqVmEFny3VuID1U3M=
 github.com/andybalholm/brotli v1.1.0/go.mod h1:sms7XGricyQI9K10gOSf56VKKWS4oLer58Q+mhRPtnY=
 github.com/cenkalti/backoff/v4 v4.3.0 h1:MyRJ/UdXutAwSAT+s3wNd7MfTIcy71VQueUuFK343L8=
 github.com/cenkalti/backoff/v4 v4.3.0/go.mod h1:Y3VNntkOUPxTVeUxJ/G5vcM//AlwfmyYozVcomhLiZE=
+github.com/chromedp/cdproto v0.0.0-20250803210736-d308e07a266d h1:ZtA1sedVbEW7EW80Iz2GR3Ye6PwbJAJXjv7D74xG6HU=
+github.com/chromedp/cdproto v0.0.0-20250803210736-d308e07a266d/go.mod h1:NItd7aLkcfOA/dcMXvl8p1u+lQqioRMq/SqDp71Pb/k=
+github.com/chromedp/chromedp v0.14.2 h1:r3b/WtwM50RsBZHMUm9fsNhhzRStTHrKdr2zmwbZSzM=
+github.com/chromedp/chromedp v0.14.2/go.mod h1:rHzAv60xDE7VNy/MYtTUrYreSc0ujt2O1/C3bzctYBo=
+github.com/chromedp/sysutil v1.1.0 h1:PUFNv5EcprjqXZD9nJb9b/c9ibAbxiYo4exNWZyipwM=
+github.com/chromedp/sysutil v1.1.0/go.mod h1:WiThHUdltqCNKGc4gaU50XgYjwjYIhKWoHGPTUfWTJ8=
 github.com/cli/browser v1.3.0 h1:LejqCrpWr+1pRqmEPDGnTZOjsMe7sehifLynZJuqJpo=
 github.com/cli/browser v1.3.0/go.mod h1:HH8s+fOAxjhQoBUAsKuPCbqUuxZDhQ2/aD+SzsEfBTk=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
@@ -16,10 +24,20 @@ github.com/fsnotify/fsnotify v1.7.0 h1:8JEhPFa5W2WU7YfeZzPNqzMP6Lwt7L2715Ggo0nos
 github.com/fsnotify/fsnotify v1.7.0/go.mod h1:40Bi/Hjc2AVfZrqy+aj+yEI+/bRxZnMJyTJwOpGvigM=
 github.com/gabriel-vasile/mimetype v1.4.11 h1:AQvxbp830wPhHTqc1u7nzoLT+ZFxGY7emj5DR5DYFik=
 github.com/gabriel-vasile/mimetype v1.4.11/go.mod h1:d+9Oxyo1wTzWdyVUPMmXFvp4F9tea18J8ufA774AB3s=
+github.com/go-json-experiment/json v0.0.0-20251027170946-4849db3c2f7e h1:Lf/gRkoycfOBPa42vU2bbgPurFong6zXeFtPoxholzU=
+github.com/go-json-experiment/json v0.0.0-20251027170946-4849db3c2f7e/go.mod h1:uNVvRXArCGbZ508SxYYTC5v1JWoz2voff5pm25jU1Ok=
+github.com/gobwas/httphead v0.1.0 h1:exrUm0f4YX0L7EBwZHuCF4GDp8aJfVeBrlLQrs6NqWU=
+github.com/gobwas/httphead v0.1.0/go.mod h1:O/RXo79gxV8G+RqlR/otEwx4Q36zl9rqC5u12GKvMCM=
+github.com/gobwas/pool v0.2.1 h1:xfeeEhW7pwmX8nuLVlqbzVc7udMDrwetjEv+TZIz1og=
+github.com/gobwas/pool v0.2.1/go.mod h1:q8bcK0KcYlCgd9e7WYLm9LpyS+YeLd8JVDW6WezmKEw=
+github.com/gobwas/ws v1.4.0 h1:CTaoG1tojrh4ucGPcoJFiAQUAsEWekEWvLy7GsVNqGs=
+github.com/gobwas/ws v1.4.0/go.mod h1:G3gNqMNtPppf5XUz7O4shetPpcZ1VJ7zt18dlUeakrc=
 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 +54,45 @@ 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/sys v0.40.0 h1:DBZZqJ2Rkml6QMQsZywtnjnnGvHza6BTfYFWY9kjEWQ=
+golang.org/x/sys v0.40.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/justfile

@@ -0,0 +1,5 @@
+gen:
+    go tool templ generate
+
+dev: gen
+    go run *.go

display/main.go

@@ -4,15 +4,11 @@ import (
 	"log/slog"
 	"os"
 
+	"plg-mudics/display/browser"
 	"plg-mudics/display/pkg"
 	"plg-mudics/display/web"
-	"plg-mudics/shared"
 )
 
-const VERSION = "0.1.0"
-
-//go:generate go tool templ generate
-
 func main() {
 	var err error
 
@@ -21,16 +17,23 @@ func main() {
 	if err != nil {
 		slog.Error("Failed to get storage path", "error", err)
 		os.Exit(1)
-		return
 	}
 	port := "1323"
 
 	// 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)
-	err = shared.OpenBrowserWindow("http://localhost:"+port, true, true)
+	go web.StartWebServer(port)
+
+	err = browser.Browser.Init()
 	if err != nil {
-		slog.Error("Failed to open browser window", "error", err)
+		slog.Error("Initialize browser", "error", err)
 		os.Exit(1)
 	}
+	err = pkg.OpenStartScreen()
+	if err != nil {
+		slog.Error("Open start screen", "error", err)
+		os.Exit(1)
+	}
+	defer browser.Browser.Cancel()
+	<-browser.Browser.Ctx.Done()
 }

display/pkg/file_handler.go

@@ -1,63 +0,0 @@
-package pkg
-
-import (
-	"fmt"
-	"os"
-	"os/exec"
-	"plg-mudics/shared"
-	"syscall"
-
-	"github.com/gabriel-vasile/mimetype"
-)
-
-var FileHandler fileHandler = fileHandler{}
-
-type fileHandler struct {
-	runningProgram *exec.Cmd
-}
-
-func (fh *fileHandler) OpenFile(path string) error {
-	var err error
-
-	mType, err := mimetype.DetectFile(path)
-	if err != nil {
-		return fmt.Errorf("failed to detect mime type: %w", err)
-	}
-
-	tempDirPath, err := os.MkdirTemp("", "plg-mudics-program-profile-")
-	if err != nil {
-		return fmt.Errorf("failed to create temporary profile directory: %w", err)
-	}
-
-	err = fh.CloseRunningProgram()
-	if err != nil {
-		return err
-	}
-
-	switch mType.String() {
-	case "application/vnd.openxmlformats-officedocument.presentationml.presentation", "application/vnd.oasis.opendocument.presentation":
-		fh.runningProgram = exec.Command("soffice", "--show", path, "--nologo", "--view", "--norestore", fmt.Sprintf("-env:UserInstallation=file://%s", tempDirPath))
-	case "application/pdf":
-		fh.runningProgram = exec.Command("xreader", path, "--presentation")
-	default:
-		return fmt.Errorf("unsupported file type: %s", mType.String())
-	}
-
-	fh.runningProgram.SysProcAttr = &syscall.SysProcAttr{Setpgid: true}
-
-	result := shared.RunShellCommandNonBlocking(fh.runningProgram)
-	if result.ExitCode != 0 {
-		return fmt.Errorf("could not open pdf: %s (%d)", result.Stderr, result.ExitCode)
-	}
-
-	return nil
-}
-
-func (fh *fileHandler) CloseRunningProgram() error {
-	if fh.runningProgram == nil {
-		return nil
-	}
-	err := syscall.Kill(-fh.runningProgram.Process.Pid, syscall.SIGTERM)
-	fh.runningProgram = nil
-	return err
-}

display/pkg/keyboard.go

@@ -0,0 +1,178 @@
+package pkg
+
+import (
+	"fmt"
+	"log/slog"
+	"time"
+
+	"github.com/micmonay/keybd_event"
+)
+
+type KeyAction int
+
+const (
+	KeyPress KeyAction = iota
+	KeyRelease
+)
+
+type Input struct {
+	Key    string
+	Action KeyAction
+}
+
+func KeyboardInput(inputs []Input) error {
+	var err error
+
+	kb, err := keybd_event.NewKeyBonding()
+	if err != nil {
+		return fmt.Errorf("failed to create key bonding: %w", err)
+	}
+
+	for _, input := range inputs {
+		switch input.Key {
+		case "Shift", "ShiftLeft", "ShiftRight":
+			kb.HasSHIFT(true)
+		case "Ctrl", "Control", "ControlLeft", "ControlRight":
+			kb.HasCTRL(true)
+		case "Alt", "AltLeft", "AltRight":
+			kb.HasALT(true)
+		case "Super", "Meta", "MetaLeft", "MetaRight":
+			kb.HasSuper(true)
+		default:
+			keyCode, ok := KeyboardEvents[input.Key]
+			if !ok {
+				slog.Warn("Could not parse keyboard input", "key", input.Key)
+				continue
+			}
+			kb.SetKeys(keyCode)
+		}
+
+		switch input.Action {
+		case KeyPress:
+			err = kb.Press()
+		case KeyRelease:
+			err = kb.Release()
+		}
+
+		if err != nil {
+			return fmt.Errorf("failed to run key event: %w", err)
+		}
+
+		time.Sleep(time.Microsecond * 10)
+	}
+
+	return nil
+}
+
+var KeyboardEvents = map[string]int{
+	"Escape":         keybd_event.VK_ESC,
+	"Digit1":         keybd_event.VK_1,
+	"Digit2":         keybd_event.VK_2,
+	"Digit3":         keybd_event.VK_3,
+	"Digit4":         keybd_event.VK_4,
+	"Digit5":         keybd_event.VK_5,
+	"Digit6":         keybd_event.VK_6,
+	"Digit7":         keybd_event.VK_7,
+	"Digit8":         keybd_event.VK_8,
+	"Digit9":         keybd_event.VK_9,
+	"Digit0":         keybd_event.VK_0,
+	"KeyQ":           keybd_event.VK_Q,
+	"KeyW":           keybd_event.VK_W,
+	"KeyE":           keybd_event.VK_E,
+	"KeyR":           keybd_event.VK_R,
+	"KeyT":           keybd_event.VK_T,
+	"KeyY":           keybd_event.VK_Y,
+	"KeyU":           keybd_event.VK_U,
+	"KeyI":           keybd_event.VK_I,
+	"KeyO":           keybd_event.VK_O,
+	"KeyP":           keybd_event.VK_P,
+	"KeyA":           keybd_event.VK_A,
+	"KeyS":           keybd_event.VK_S,
+	"KeyD":           keybd_event.VK_D,
+	"KeyF":           keybd_event.VK_F,
+	"KeyG":           keybd_event.VK_G,
+	"KeyH":           keybd_event.VK_H,
+	"KeyJ":           keybd_event.VK_J,
+	"KeyK":           keybd_event.VK_K,
+	"KeyL":           keybd_event.VK_L,
+	"KeyZ":           keybd_event.VK_Z,
+	"KeyX":           keybd_event.VK_X,
+	"KeyC":           keybd_event.VK_C,
+	"KeyV":           keybd_event.VK_V,
+	"KeyB":           keybd_event.VK_B,
+	"KeyN":           keybd_event.VK_N,
+	"KeyM":           keybd_event.VK_M,
+	"F1":             keybd_event.VK_F1,
+	"F2":             keybd_event.VK_F2,
+	"F3":             keybd_event.VK_F3,
+	"F4":             keybd_event.VK_F4,
+	"F5":             keybd_event.VK_F5,
+	"F6":             keybd_event.VK_F6,
+	"F7":             keybd_event.VK_F7,
+	"F8":             keybd_event.VK_F8,
+	"F9":             keybd_event.VK_F9,
+	"F10":            keybd_event.VK_F10,
+	"F11":            keybd_event.VK_F11,
+	"F12":            keybd_event.VK_F12,
+	"F13":            keybd_event.VK_F13,
+	"F14":            keybd_event.VK_F14,
+	"F15":            keybd_event.VK_F15,
+	"F16":            keybd_event.VK_F16,
+	"F17":            keybd_event.VK_F17,
+	"F18":            keybd_event.VK_F18,
+	"F19":            keybd_event.VK_F19,
+	"F20":            keybd_event.VK_F20,
+	"F21":            keybd_event.VK_F21,
+	"F22":            keybd_event.VK_F22,
+	"F23":            keybd_event.VK_F23,
+	"F24":            keybd_event.VK_F24,
+	"NumLock":        keybd_event.VK_NUMLOCK,
+	"ScrollLock":     keybd_event.VK_SCROLLLOCK,
+	"CapsLock":       keybd_event.VK_CAPSLOCK,
+	"Minus":          keybd_event.VK_SP2,
+	"Equal":          keybd_event.VK_SP3,
+	"Backspace":      keybd_event.VK_BACKSPACE,
+	"Tab":            keybd_event.VK_TAB,
+	"BracketLeft":    keybd_event.VK_SP4,
+	"BracketRight":   keybd_event.VK_SP5,
+	"Enter":          keybd_event.VK_ENTER,
+	"Semicolon":      keybd_event.VK_SP6,
+	"Quote":          keybd_event.VK_SP7,
+	"Backquote":      keybd_event.VK_SP1,
+	"Backslash":      keybd_event.VK_SP8,
+	"Comma":          keybd_event.VK_SP9,
+	"Period":         keybd_event.VK_SP10,
+	"Slash":          keybd_event.VK_SP11,
+	"IntlBackslash":  keybd_event.VK_SP12,
+	"NumpadMultiply": keybd_event.VK_KPASTERISK,
+	"NumpadAdd":      keybd_event.VK_KPPLUS,
+	"NumpadSubtract": keybd_event.VK_KPMINUS,
+	"NumpadDecimal":  keybd_event.VK_KPDOT,
+	"Space":          keybd_event.VK_SPACE,
+	"Numpad0":        keybd_event.VK_KP0,
+	"Numpad1":        keybd_event.VK_KP1,
+	"Numpad2":        keybd_event.VK_KP2,
+	"Numpad3":        keybd_event.VK_KP3,
+	"Numpad4":        keybd_event.VK_KP4,
+	"Numpad5":        keybd_event.VK_KP5,
+	"Numpad6":        keybd_event.VK_KP6,
+	"Numpad7":        keybd_event.VK_KP7,
+	"Numpad8":        keybd_event.VK_KP8,
+	"Numpad9":        keybd_event.VK_KP9,
+	"PageUp":         keybd_event.VK_PAGEUP,
+	"PageDown":       keybd_event.VK_PAGEDOWN,
+	"End":            keybd_event.VK_END,
+	"Home":           keybd_event.VK_HOME,
+	"ArrowLeft":      keybd_event.VK_LEFT,
+	"ArrowUp":        keybd_event.VK_UP,
+	"ArrowRight":     keybd_event.VK_RIGHT,
+	"ArrowDown":      keybd_event.VK_DOWN,
+	"PrintScreen":    keybd_event.VK_PRINT,
+	"Insert":         keybd_event.VK_INSERT,
+	"Delete":         keybd_event.VK_DELETE,
+	"Help":           keybd_event.VK_HELP,
+	"BrowserBack":    keybd_event.VK_BACK,
+	"Pause":          keybd_event.VK_PAUSE,
+	"Lang1":          keybd_event.VK_HANGUEL,
+	"Lang2":          keybd_event.VK_HANJA,
+}

display/pkg/keys.go

@@ -1,129 +0,0 @@
-package pkg
-
-import "github.com/micmonay/keybd_event"
-
-var KeyboardEvents = map[string]int{
-	"VK_SP1":        keybd_event.VK_SP1,
-	"VK_SP2":        keybd_event.VK_SP2,
-	"VK_SP3":        keybd_event.VK_SP3,
-	"VK_SP4":        keybd_event.VK_SP4,
-	"VK_SP5":        keybd_event.VK_SP5,
-	"VK_SP6":        keybd_event.VK_SP6,
-	"VK_SP7":        keybd_event.VK_SP7,
-	"VK_SP8":        keybd_event.VK_SP8,
-	"VK_SP9":        keybd_event.VK_SP9,
-	"VK_SP10":       keybd_event.VK_SP10,
-	"VK_SP11":       keybd_event.VK_SP11,
-	"VK_SP12":       keybd_event.VK_SP12,
-	"VK_ESC":        keybd_event.VK_ESC,
-	"VK_1":          keybd_event.VK_1,
-	"VK_2":          keybd_event.VK_2,
-	"VK_3":          keybd_event.VK_3,
-	"VK_4":          keybd_event.VK_4,
-	"VK_5":          keybd_event.VK_5,
-	"VK_6":          keybd_event.VK_6,
-	"VK_7":          keybd_event.VK_7,
-	"VK_8":          keybd_event.VK_8,
-	"VK_9":          keybd_event.VK_9,
-	"VK_0":          keybd_event.VK_0,
-	"VK_Q":          keybd_event.VK_Q,
-	"VK_W":          keybd_event.VK_W,
-	"VK_E":          keybd_event.VK_E,
-	"VK_R":          keybd_event.VK_R,
-	"VK_T":          keybd_event.VK_T,
-	"VK_Y":          keybd_event.VK_Y,
-	"VK_U":          keybd_event.VK_U,
-	"VK_I":          keybd_event.VK_I,
-	"VK_O":          keybd_event.VK_O,
-	"VK_P":          keybd_event.VK_P,
-	"VK_A":          keybd_event.VK_A,
-	"VK_S":          keybd_event.VK_S,
-	"VK_D":          keybd_event.VK_D,
-	"VK_F":          keybd_event.VK_F,
-	"VK_G":          keybd_event.VK_G,
-	"VK_H":          keybd_event.VK_H,
-	"VK_J":          keybd_event.VK_J,
-	"VK_K":          keybd_event.VK_K,
-	"VK_L":          keybd_event.VK_L,
-	"VK_Z":          keybd_event.VK_Z,
-	"VK_X":          keybd_event.VK_X,
-	"VK_C":          keybd_event.VK_C,
-	"VK_V":          keybd_event.VK_V,
-	"VK_B":          keybd_event.VK_B,
-	"VK_N":          keybd_event.VK_N,
-	"VK_M":          keybd_event.VK_M,
-	"VK_F1":         keybd_event.VK_F1,
-	"VK_F2":         keybd_event.VK_F2,
-	"VK_F3":         keybd_event.VK_F3,
-	"VK_F4":         keybd_event.VK_F4,
-	"VK_F5":         keybd_event.VK_F5,
-	"VK_F6":         keybd_event.VK_F6,
-	"VK_F7":         keybd_event.VK_F7,
-	"VK_F8":         keybd_event.VK_F8,
-	"VK_F9":         keybd_event.VK_F9,
-	"VK_F10":        keybd_event.VK_F10,
-	"VK_F11":        keybd_event.VK_F11,
-	"VK_F12":        keybd_event.VK_F12,
-	"VK_F13":        keybd_event.VK_F13,
-	"VK_F14":        keybd_event.VK_F14,
-	"VK_F15":        keybd_event.VK_F15,
-	"VK_F16":        keybd_event.VK_F16,
-	"VK_F17":        keybd_event.VK_F17,
-	"VK_F18":        keybd_event.VK_F18,
-	"VK_F19":        keybd_event.VK_F19,
-	"VK_F20":        keybd_event.VK_F20,
-	"VK_F21":        keybd_event.VK_F21,
-	"VK_F22":        keybd_event.VK_F22,
-	"VK_F23":        keybd_event.VK_F23,
-	"VK_F24":        keybd_event.VK_F24,
-	"VK_NUMLOCK":    keybd_event.VK_NUMLOCK,
-	"VK_SCROLLLOCK": keybd_event.VK_SCROLLLOCK,
-	"VK_RESERVED":   keybd_event.VK_RESERVED,
-	"VK_MINUS":      keybd_event.VK_MINUS,
-	"VK_EQUAL":      keybd_event.VK_EQUAL,
-	"VK_BACKSPACE":  keybd_event.VK_BACKSPACE,
-	"VK_TAB":        keybd_event.VK_TAB,
-	"VK_LEFTBRACE":  keybd_event.VK_LEFTBRACE,
-	"VK_RIGHTBRACE": keybd_event.VK_RIGHTBRACE,
-	"VK_ENTER":      keybd_event.VK_ENTER,
-	"VK_SEMICOLON":  keybd_event.VK_SEMICOLON,
-	"VK_APOSTROPHE": keybd_event.VK_APOSTROPHE,
-	"VK_GRAVE":      keybd_event.VK_GRAVE,
-	"VK_BACKSLASH":  keybd_event.VK_BACKSLASH,
-	"VK_COMMA":      keybd_event.VK_COMMA,
-	"VK_DOT":        keybd_event.VK_DOT,
-	"VK_SLASH":      keybd_event.VK_SLASH,
-	"VK_KPASTERISK": keybd_event.VK_KPASTERISK,
-	"VK_SPACE":      keybd_event.VK_SPACE,
-	"VK_CAPSLOCK":   keybd_event.VK_CAPSLOCK,
-	"VK_KP0":        keybd_event.VK_KP0,
-	"VK_KP1":        keybd_event.VK_KP1,
-	"VK_KP2":        keybd_event.VK_KP2,
-	"VK_KP3":        keybd_event.VK_KP3,
-	"VK_KP4":        keybd_event.VK_KP4,
-	"VK_KP5":        keybd_event.VK_KP5,
-	"VK_KP6":        keybd_event.VK_KP6,
-	"VK_KP7":        keybd_event.VK_KP7,
-	"VK_KP8":        keybd_event.VK_KP8,
-	"VK_KP9":        keybd_event.VK_KP9,
-	"VK_KPMINUS":    keybd_event.VK_KPMINUS,
-	"VK_KPPLUS":     keybd_event.VK_KPPLUS,
-	"VK_KPDOT":      keybd_event.VK_KPDOT,
-	"VK_CANCEL":     keybd_event.VK_CANCEL,
-	"VK_BACK":       keybd_event.VK_BACK,
-	"VK_PAUSE":      keybd_event.VK_PAUSE,
-	"VK_HANGUEL":    keybd_event.VK_HANGUEL,
-	"VK_HANJA":      keybd_event.VK_HANJA,
-	"VK_PAGEUP":     keybd_event.VK_PAGEUP,
-	"VK_PAGEDOWN":   keybd_event.VK_PAGEDOWN,
-	"VK_END":        keybd_event.VK_END,
-	"VK_HOME":       keybd_event.VK_HOME,
-	"VK_LEFT":       keybd_event.VK_LEFT,
-	"VK_UP":         keybd_event.VK_UP,
-	"VK_RIGHT":      keybd_event.VK_RIGHT,
-	"VK_DOWN":       keybd_event.VK_DOWN,
-	"VK_PRINT":      keybd_event.VK_PRINT,
-	"VK_INSERT":     keybd_event.VK_INSERT,
-	"VK_DELETE":     keybd_event.VK_DELETE,
-	"VK_HELP":       keybd_event.VK_HELP,
-}

display/pkg/main.go

@@ -1,94 +1,23 @@
 package pkg
 
 import (
+	"bytes"
+	"context"
 	"errors"
 	"fmt"
 	"log/slog"
-	"net"
 	"os"
 	"os/exec"
 	"path/filepath"
 	"strings"
 	"time"
 
+	"plg-mudics/display/browser"
 	"plg-mudics/shared"
-
-	"github.com/micmonay/keybd_event"
 )
 
-func GetDeviceIp() (string, error) {
-	addrs, err := net.InterfaceAddrs()
-	if err != nil {
-		return "", fmt.Errorf("failed to get network interfaces: %w", err)
-	}
-	for _, addr := range addrs {
-		ipNet, ok := addr.(*net.IPNet)
-		if ok && !ipNet.IP.IsLoopback() && ipNet.IP.To4() != nil {
-			return ipNet.IP.String(), nil
-		}
-	}
-
-	return "", fmt.Errorf("no suitable IP address found")
-}
-
-func GetDeviceMac() (string, error) {
-	interfaces, err := net.Interfaces()
-	if err != nil {
-		return "", fmt.Errorf("failed to get network interfaces: %w", err)
-	}
-
-	for _, interf := range interfaces {
-		mac := interf.HardwareAddr.String()
-		if mac != "" {
-			return mac, nil
-		}
-	}
-
-	return "", fmt.Errorf("no suitable MAC address found")
-}
-
-type KeyAction int
-
-const (
-	KeyPress KeyAction = iota
-	KeyRelease
-)
-
-type Input struct {
-	Key    int
-	Action KeyAction
-}
-
-func KeyboardInput(inputs []Input) error {
-	var err error
-
-	kb, err := keybd_event.NewKeyBonding()
-	if err != nil {
-		return fmt.Errorf("failed to create key bonding: %w", err)
-	}
-
-	for _, input := range inputs {
-		kb.SetKeys(input.Key)
-
-		switch input.Action {
-		case KeyPress:
-			err = kb.Press()
-		case KeyRelease:
-			err = kb.Release()
-		}
-
-		if err != nil {
-			return fmt.Errorf("failed to run key event: %w", err)
-		}
-
-		time.Sleep(time.Microsecond * 100)
-	}
-
-	return nil
-}
-
 func TakeScreenshot() (string, error) {
-	tempFilePath := filepath.Join(os.TempDir(), fmt.Sprintf("screenshot_%d.png", time.Now().Unix()))
+	tempFilePath := filepath.Join(os.TempDir(), fmt.Sprintf("screenshot_%d.jpg", time.Now().Unix()))
 
 	cmds := []*exec.Cmd{
 		exec.Command("gnome-screenshot", "-f", tempFilePath),
@@ -100,7 +29,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")
 }
@@ -150,3 +78,20 @@ func ResolveStorageFilePath(pathParam string) (string, bool, error) {
 
 	return fullPath, true, nil
 }
+
+func ShowHTML(html string) error {
+	ResetView()
+
+	var templateBuffer bytes.Buffer
+	_ = htmlTemplate(html).Render(context.Background(), &templateBuffer)
+	err := browser.Browser.OpenHTML(templateBuffer.String())
+
+	return err
+}
+
+func ResetView() {
+	err := fileHandler.closeRunningProgram()
+	if err != nil {
+		slog.Error("Failed to close running program", "error", err)
+	}
+}

display/pkg/main.templ

@@ -0,0 +1,148 @@
+package pkg
+
+templ basicTemplate() {
+	<!DOCTYPE html>
+	<html lang="en">
+		<head>
+			<meta charset="UTF-8"/>
+			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+			<title>PLG MuDiCS Display</title>
+			<style>
+          		:root {
+         			--background-color: black;
+         			--foreground-color: oklch(92.3% 0.003 48.717);
+         			--font-size: 5rem;
+          		}
+
+          		body {
+         			display: flex;
+         			justify-content: center;
+         			/* centers horizontally */
+         			align-items: center;
+         			/* centers vertically */
+         			width: 100vw;
+         			/* Viewport width */
+         			height: 100vh;
+         			/* Viewport height */
+         			margin: 0;
+         			padding: 0;
+         			overflow: hidden;
+         			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,
+          		img {
+         			width: 100vw;
+         			/* Viewport width */
+         			height: 100vh;
+         			/* Viewport height */
+         			object-fit: contain;
+          		}
+
+          		p,
+          		li {
+         			font-size: var(--font-size);
+         			line-height: 1.2;
+         			text-wrap: balance;
+         			max-width: 90vw;
+         			word-break: break-word;
+         			margin: 0 0 calc(var(--font-size) * 0.4) 0;
+          		}
+
+          		ul,
+          		ol {
+         			padding-left: calc(var(--font-size)*1.5);
+          		}
+           	</style>
+		</head>
+		<bod>
+			{ children... }
+		</bod>
+	</html>
+}
+
+templ videoTemplate(path string) {
+	@basicTemplate() {
+		<video autoplay>
+			<source src={ "file://" + path } type="video/mp4"/>
+		</video>
+	}
+}
+
+templ htmlTemplate(html string) {
+	@basicTemplate() {
+		@templ.Raw(html)
+	}
+}
+
+templ imageTemplate(path string) {
+	@basicTemplate() {
+		<img src={ "file://" + path }/>
+	}
+}
+
+templ deviceInfoTemplate(ip string, mac string, showQR bool) {
+	@basicTemplate() {
+		<div style="width: 100vw; height: 100vh; display: flex; flex-direction: row; justify-content: space-between;">
+			<div
+				style="display: flex; flex-direction: column; gap: 1rem; justify-content: end; padding: 2rem; font-size: 4rem;"
+			>
+				{ ip }
+				<span style="text-transform: uppercase;">{ mac }</span>
+			</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>
+    		:root {
+    			--splash-bg: transparent !important;
+    			--splash-fade-out-state: paused !important;
+    			--background-color: oklch(21.6% 0.006 56.043);
+    		}
+        </style>
+	}
+}
+
+templ startScreenTemplate(splashScreenHtml string, ip string, mac string, qrPath string) {
+	@basicTemplate() {
+		<div style="width: 100vw; height: 100vh; display: flex; flex-direction: row; justify-content: space-between;">
+			<div
+				style="display: flex; flex-direction: column; gap: 1rem; justify-content: end; padding: 2rem; font-size: 4rem;"
+			>
+				{ ip }
+				<span style="text-transform: uppercase;">{ mac }</span>
+			</div>
+			if qrPath != "" {
+				<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={ "file://" + qrPath }
+							alt="QR-Code"
+						/>
+					</div>
+				</div>
+			}
+		</div>
+		@templ.Raw(splashScreenHtml)
+		<style>
+			:root {
+    			--splash-bg: transparent !important;
+    			--splash-fade-out-state: paused !important;
+                --background-color: oklch(21.6% 0.006 56.043);
+			}
+		</style>
+	}
+}

display/pkg/open_file.go

@@ -0,0 +1,112 @@
+package pkg
+
+import (
+	"bytes"
+	"context"
+	"fmt"
+	"log/slog"
+	"os"
+	"os/exec"
+	"path/filepath"
+	"plg-mudics/shared"
+	"syscall"
+
+	"github.com/gabriel-vasile/mimetype"
+
+	"plg-mudics/display/browser"
+)
+
+var fileHandler fileHandlerType = fileHandlerType{}
+
+type fileHandlerType struct {
+	runningProgram *exec.Cmd
+}
+
+func OpenFile(path string) error {
+	ResetView()
+
+	mType, err := mimetype.DetectFile(path)
+	if err != nil {
+		return fmt.Errorf("detect mime type of file %q: %w", path, err)
+	}
+
+	switch mType.String() {
+	case "video/mp4":
+		var templateBuffer bytes.Buffer
+		_ = videoTemplate(path).Render(context.Background(), &templateBuffer)
+		err = browser.Browser.OpenHTML(templateBuffer.String())
+	case "image/jpeg", "image/png", "image/gif":
+		var templateBuffer bytes.Buffer
+		_ = imageTemplate(path).Render(context.Background(), &templateBuffer)
+		err = browser.Browser.OpenHTML(templateBuffer.String())
+	case "application/pdf":
+		err = browser.Browser.OpenPDF(path)
+	case "application/vnd.openxmlformats-officedocument.presentationml.presentation", "application/vnd.oasis.opendocument.presentation":
+		err = fileHandler.openFileWithApp(path)
+	default:
+		return fmt.Errorf("unsupported file type: %s", mType.String())
+	}
+
+	if err != nil {
+		return fmt.Errorf("failed to open file: %w", err)
+	}
+
+	return nil
+}
+
+func (fh *fileHandlerType) openFileWithApp(path string) error {
+	var err error
+
+	mType, err := mimetype.DetectFile(path)
+	if err != nil {
+		return fmt.Errorf("failed to detect mime type: %w", err)
+	}
+
+	switch mType.String() {
+	case "application/vnd.openxmlformats-officedocument.presentationml.presentation", "application/vnd.oasis.opendocument.presentation":
+		err = fh.openLibreoffice(path)
+		if err != nil {
+			return err
+		}
+	default:
+		return fmt.Errorf("unsupported file type: %s", mType.String())
+	}
+
+	fh.runningProgram.SysProcAttr = &syscall.SysProcAttr{Setpgid: true}
+
+	result := shared.RunShellCommandNonBlocking(fh.runningProgram)
+	if result.ExitCode != 0 {
+		return fmt.Errorf("could not open pdf: %s (%d)", result.Stderr, result.ExitCode)
+	}
+
+	return nil
+}
+
+func (fh *fileHandlerType) openLibreoffice(path string) error {
+	// yes, we need this weird workaround to delete lock files since libreoffice
+	// doesn't expose an option to ignore them or prevent their creation
+	// the --view argument for some reason doesn't work with --show
+	parent := filepath.Dir(path)
+	cmd := exec.Command("find", parent, "-name", ".~lock*", "-type", "f", "-delete")
+	result := shared.RunShellCommand(cmd)
+	if result.ExitCode != 0 {
+		slog.Warn("could not remove lock files", "path", parent, "stderr", result.Stderr, "exitCode", result.ExitCode)
+	}
+
+	tempDirPath, err := os.MkdirTemp("", "plg-mudics-program-profile-")
+	if err != nil {
+		return fmt.Errorf("failed to create temporary profile directory: %w", err)
+	}
+	fh.runningProgram = exec.Command("soffice", "--show", path, "--nologo", "--norestore", fmt.Sprintf("-env:UserInstallation=file://%s", tempDirPath))
+
+	return nil
+}
+
+func (fh *fileHandlerType) closeRunningProgram() error {
+	if fh.runningProgram == nil {
+		return nil
+	}
+	err := syscall.Kill(-fh.runningProgram.Process.Pid, syscall.SIGTERM)
+	fh.runningProgram = nil
+	return err
+}

display/pkg/start_screen.go

@@ -0,0 +1,120 @@
+package pkg
+
+import (
+	"bytes"
+	"context"
+	"fmt"
+	"image/color"
+	"net"
+	"os"
+	"plg-mudics/shared"
+	"strings"
+
+	"plg-mudics/display/browser"
+
+	"github.com/skip2/go-qrcode"
+)
+
+func OpenStartScreen() error {
+	var err error
+
+	raw := shared.RawSplashScreenTemplate
+	html := strings.ReplaceAll(raw, "%%APP-VERSION%%", shared.Version)
+
+	ip, err := getDeviceIp()
+	if err != nil {
+		return fmt.Errorf("get device IP: %w", err)
+	}
+	mac, err := getDeviceMac()
+	if err != nil {
+		return fmt.Errorf("get device MAC address: %w", err)
+	}
+
+	port := 8080
+	showQrCode := !isPortFree(port)
+	qrCodePath := ""
+	if showQrCode {
+		qrCodePath, err = generateQRCode(fmt.Sprintf("http://%s:%d", ip, port))
+		if err != nil {
+			return fmt.Errorf("generate QR code: %w", err)
+		}
+	}
+
+	var templateBuffer bytes.Buffer
+	_ = startScreenTemplate(html, ip, mac, qrCodePath).Render(context.Background(), &templateBuffer)
+	err = browser.Browser.OpenHTML(templateBuffer.String())
+	if err != nil {
+		return fmt.Errorf("open start screen in browser: %w", err)
+	}
+	return nil
+}
+
+func getDeviceIp() (string, error) {
+	addrs, err := net.InterfaceAddrs()
+	if err != nil {
+		return "", fmt.Errorf("failed to get network interfaces: %w", err)
+	}
+	for _, addr := range addrs {
+		ipNet, ok := addr.(*net.IPNet)
+		if ok && !ipNet.IP.IsLoopback() && ipNet.IP.To4() != nil {
+			return ipNet.IP.String(), nil
+		}
+	}
+
+	return "", fmt.Errorf("no suitable IP address found")
+}
+
+func isPortFree(port int) bool {
+	addr := fmt.Sprintf("127.0.0.1:%d", port)
+	l, err := net.Listen("tcp", addr)
+	if err != nil {
+		return false
+	}
+	_ = l.Close()
+	return true
+}
+
+func getDeviceMac() (string, error) {
+	interfaces, err := net.Interfaces()
+	if err != nil {
+		return "", fmt.Errorf("failed to get network interfaces: %w", err)
+	}
+
+	for _, interf := range interfaces {
+		mac := interf.HardwareAddr.String()
+		if mac != "" {
+			return mac, nil
+		}
+	}
+
+	return "", fmt.Errorf("no suitable MAC address found")
+}
+
+func generateQRCode(data string) (string, error) {
+	qr, err := qrcode.New(data, qrcode.Medium)
+	if err != nil {
+		return "", fmt.Errorf("could not generate qr code: %w", err)
+	}
+
+	qr.DisableBorder = true
+	qr.ForegroundColor = color.RGBA{R: 0x1c, G: 0x19, B: 0x17, A: 0xff}
+	qr.BackgroundColor = color.RGBA{R: 0xe7, G: 0xe5, B: 0xe4, A: 0xff}
+
+	png, err := qr.PNG(-1)
+	if err != nil {
+		return "", fmt.Errorf("could not render qr code: %w", err)
+	}
+
+	file, err := os.CreateTemp("", "mudics-qr-code-*.png")
+	if err != nil {
+		return "", fmt.Errorf("could not save qr code: %w", err)
+	}
+	defer func() { _ = file.Close() }()
+
+	_, err = file.Write(png)
+	if err != nil {
+		return "", fmt.Errorf("could not write qr code to file: %w", err)
+	}
+
+	return file.Name(), nil
+}

display/requests/openWebsite.bru

@@ -0,0 +1,22 @@
+meta {
+  name: openWebsite
+  type: http
+  seq: 10
+}
+
+patch {
+  url: 127.0.0.1:1323/api/openWebsite
+  body: json
+  auth: inherit
+}
+
+body:json {
+  {
+    "url": "https://example.com"
+  }
+}
+
+settings {
+  encodeUrl: true
+  timeout: 0
+}

display/web/embed.go

@@ -1,12 +0,0 @@
-package web
-
-import (
-	"embed"
-	"io/fs"
-)
-
-//go:embed all:static
-var staticDir embed.FS
-
-// BuildDirFS contains the embedded dist directory files (without the "build" prefix)
-var StaticDirFS, _ = fs.Sub(staticDir, "static")

display/web/main.go

@@ -1,14 +1,10 @@
 package web
 
 import (
-	"bytes"
-	"context"
 	"errors"
 	"fmt"
-	"image/color"
 	"io"
 	"log/slog"
-	"net"
 	"net/http"
 	"net/url"
 	"os"
@@ -16,35 +12,16 @@ import (
 	"path/filepath"
 	shared "plg-mudics/shared"
 
-	"github.com/gabriel-vasile/mimetype"
 	"github.com/labstack/echo/v4"
 	"github.com/labstack/echo/v4/middleware"
-	"github.com/skip2/go-qrcode"
 
+	"plg-mudics/display/browser"
 	"plg-mudics/display/pkg"
 )
 
-var version string
-var sseConnection chan string
-
-func StartWebServer(v string, port string) {
-	version = v
-
+func StartWebServer(port string) {
 	e := echo.New()
 
-	e.GET("/", indexRoute)
-	e.GET("/sse", sseRoute)
-	e.GET("/splash", func(ctx echo.Context) error {
-		return ctx.HTML(http.StatusOK, shared.SplashScreenTemplate)
-	})
-	e.GET("/qr", qrRoute)
-
-	staticGroup := e.Group("/static")
-	staticGroup.Use(middleware.StaticWithConfig(middleware.StaticConfig{
-		Filesystem: http.FS(StaticDirFS),
-		HTML5:      true,
-	}))
-
 	apiGroup := e.Group("/api")
 	apiGroup.Use(middleware.CORS())
 	apiGroup.GET("/ping", pingRoute)
@@ -52,6 +29,7 @@ func StartWebServer(v string, port string) {
 	apiGroup.PATCH("/keyboardInput", keyboardInputRoute)
 	apiGroup.PATCH("/showHTML", showHTMLRoute)
 	apiGroup.PATCH("/takeScreenshot", takeScreenshotRoute)
+	apiGroup.PATCH("/openWebsite", openWebsiteRoute)
 
 	fileGroup := apiGroup.Group("/file")
 	fileGroup.Use(extractFilePathMiddleware)
@@ -66,85 +44,6 @@ func StartWebServer(v string, port string) {
 	}
 }
 
-func indexRoute(ctx echo.Context) error {
-	return indexTemplate().Render(ctx.Request().Context(), ctx.Response().Writer)
-}
-
-func sseRoute(ctx echo.Context) error {
-	slog.Info("SSE client connected")
-
-	w := ctx.Response()
-	w.Header().Set("Content-Type", "text/event-stream")
-	w.Header().Set("Cache-Control", "no-cache")
-	w.Header().Set("Connection", "keep-alive")
-	w.WriteHeader(http.StatusOK)
-	flusher, _ := w.Writer.(http.Flusher)
-
-	sseConnection = make(chan string)
-
-	// init display
-	ip, err := pkg.GetDeviceIp()
-	if err != nil {
-		slog.Error("Failed to get device IP address", "error", err)
-	}
-	mac, err := pkg.GetDeviceMac()
-	if err != nil {
-		slog.Error("Failed to get device MAC address", "error", err)
-	}
-	showQR := !isPortFree(8080)
-	var status bytes.Buffer
-	deviceInfoTemplate(ip, mac, showQR).Render(context.Background(), &status)
-	connectedEvent := Event{
-		Data: status.Bytes(),
-	}
-	connectedEvent.MarshalTo(w)
-	flusher.Flush()
-
-	for {
-		select {
-		case <-ctx.Request().Context().Done():
-			slog.Info("SSE client disconnected")
-			sseConnection = nil
-			return nil
-
-		case event := <-sseConnection:
-			rawEvent := Event{
-				Event: []byte(""),
-				Data:  []byte(event),
-			}
-
-			if err := rawEvent.MarshalTo(w); err != nil {
-				slog.Warn("Error writing to client", "error", err)
-				return err
-			}
-			flusher.Flush()
-		}
-	}
-}
-
-func qrRoute(c echo.Context) error {
-	data := c.QueryParam("data")
-	if data == "" {
-		return c.String(http.StatusBadRequest, "missing data")
-	}
-
-	qr, err := qrcode.New(data, qrcode.Medium)
-	if err != nil {
-		return c.String(http.StatusInternalServerError, "could not generate qr")
-	}
-
-	qr.DisableBorder = true
-	qr.ForegroundColor = color.RGBA{R: 0x1c, G: 0x19, B: 0x17, A: 0xff}
-	qr.BackgroundColor = color.RGBA{R: 0xe7, G: 0xe5, B: 0xe4, A: 0xff}
-
-	png, err := qr.PNG(-1)
-	if err != nil {
-		return c.String(http.StatusInternalServerError, "could not encode png")
-	}
-
-	return c.Blob(http.StatusOK, "image/png", png)
-}
-
 func extractFilePathMiddleware(next echo.HandlerFunc) echo.HandlerFunc {
 	return func(ctx echo.Context) error {
 		raw := ctx.Param("path")
@@ -213,12 +112,6 @@ func keyboardInputRoute(ctx echo.Context) error {
 			return ctx.JSON(http.StatusBadRequest, shared.ErrorResponse{Description: fmt.Sprintf("Invalid action: %s", input.Action)})
 		}
 
-		code, ok := pkg.KeyboardEvents[input.Key]
-		if !ok {
-			slog.Error("Unsupported key", "key", input.Key)
-			return ctx.JSON(http.StatusBadRequest, shared.ErrorResponse{Description: fmt.Sprintf("Unsupported key: %s", input.Key)})
-		}
-
 		var action pkg.KeyAction
 		if input.Action == "press" {
 			action = pkg.KeyPress
@@ -228,7 +121,7 @@ func keyboardInputRoute(ctx echo.Context) error {
 		}
 
 		inputs = append(inputs, pkg.Input{
-			Key:    code,
+			Key:    input.Key,
 			Action: action,
 		})
 	}
@@ -269,7 +162,10 @@ func uploadFileRoute(ctx echo.Context) error {
 			slog.Error("Failed to close file", "file", fullPath, "error", fileCloseErr)
 		}
 		if err != nil {
-			os.Remove(fullPath)
+			err = os.Remove(fullPath)
+			if err != nil {
+				slog.Warn("could not remove broken file", "file", fullPath, "error", err)
+			}
 		}
 	}()
 
@@ -298,14 +194,7 @@ func downloadFileRoute(ctx echo.Context) error {
 
 	slog.Info("Serving file for download", "path", fullPath)
 
-	file, err := os.Open(fullPath)
-	if err != nil {
-		slog.Error("Failed to open file", "file", fullPath, "error", err)
-		return ctx.JSON(http.StatusInternalServerError, shared.ErrorResponse{Description: "Failed to open file"})
-	}
-	defer file.Close()
-
-	return ctx.Stream(http.StatusOK, "application/octet-stream", file)
+	return ctx.Attachment(fullPath, filepath.Base(fullPath))
 }
 
 func openFileRoute(ctx echo.Context) error {
@@ -318,39 +207,7 @@ func openFileRoute(ctx echo.Context) error {
 		return ctx.JSON(http.StatusNotFound, shared.ErrorResponse{Description: "File not found"})
 	}
 
-	if sseConnection == nil {
-		return ctx.JSON(http.StatusInternalServerError, shared.ErrorResponse{Description: "Cant connect to display browser client"})
-	}
-
-	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)
-	if err != nil {
-		slog.Error("Failed to detect mime type", "file", pathParam, "error", err)
-		return ctx.JSON(http.StatusInternalServerError, shared.ErrorResponse{Description: "Failed to detect file type"})
-	}
-
-	switch mType.String() {
-	case "video/mp4":
-		var templateBuffer bytes.Buffer
-		videoTemplate(pathParam).Render(context.Background(), &templateBuffer)
-
-		sseConnection <- templateBuffer.String()
-	case "image/jpeg", "image/png", "image/gif":
-		var templateBuffer bytes.Buffer
-		imageTemplate(pathParam).Render(context.Background(), &templateBuffer)
-		sseConnection <- templateBuffer.String()
-	case "application/pdf", "application/vnd.openxmlformats-officedocument.presentationml.presentation", "application/vnd.oasis.opendocument.presentation":
-		err = pkg.FileHandler.OpenFile(fullPath)
-	default:
-		slog.Info("Unsupported file type", "type", mType)
-		return ctx.JSON(http.StatusUnsupportedMediaType, shared.ErrorResponse{Description: "Unsupported file type: " + mType.String()})
-	}
-
+	err = pkg.OpenFile(fullPath)
 	if err != nil {
 		slog.Error("Failed to open file", "file", pathParam, "error", err)
 		return ctx.JSON(http.StatusInternalServerError, shared.ErrorResponse{Description: "Failed to open file"})
@@ -369,14 +226,12 @@ func showHTMLRoute(ctx echo.Context) error {
 		return ctx.JSON(http.StatusBadRequest, shared.ErrorResponse{Description: shared.BadRequestDescription})
 	}
 
-	err := resetView()
+	err := pkg.ShowHTML(request.HTML)
 	if err != nil {
-		slog.Error("Failed to reset view", "error", err)
-		return ctx.JSON(http.StatusInternalServerError, shared.ErrorResponse{Description: "Failed to reset view"})
+		slog.Error("Failed to open html", "error", err)
+		return ctx.JSON(http.StatusInternalServerError, shared.ErrorResponse{Description: "Failed to open html"})
 	}
 
-	sseConnection <- request.HTML
-
 	slog.Info("HTML content sent to client")
 	return ctx.JSON(http.StatusOK, struct{}{})
 }
@@ -384,7 +239,7 @@ func showHTMLRoute(ctx echo.Context) error {
 func pingRoute(ctx echo.Context) error {
 	return ctx.JSON(http.StatusOK, struct {
 		Version string `json:"version"`
-	}{Version: version})
+	}{Version: shared.Version})
 }
 
 func takeScreenshotRoute(ctx echo.Context) error {
@@ -427,24 +282,24 @@ func previewRoute(ctx echo.Context) error {
 	return ctx.File(outputFilePath)
 }
 
-// Reset previous file views so they dont collide with the new one
-func resetView() error {
-	err := pkg.FileHandler.CloseRunningProgram()
-	if err != nil {
-		return fmt.Errorf("failed to close running program: %w", err)
+func openWebsiteRoute(ctx echo.Context) error {
+	var err error
+
+	var request struct {
+		URL string `json:"url"`
+	}
+	if err := ctx.Bind(&request); err != nil {
+		slog.Error("Failed to parse website input", "error", err)
+		return ctx.JSON(http.StatusBadRequest, shared.ErrorResponse{Description: shared.BadRequestDescription})
 	}
 
-	sseConnection <- ""
+	slog.Info("Opening url")
 
-	return nil
-}
-
-func isPortFree(port int) bool {
-	addr := fmt.Sprintf("127.0.0.1:%d", port)
-	l, err := net.Listen("tcp", addr)
+	err = browser.Browser.OpenPage(request.URL)
 	if err != nil {
-		return false
+		slog.Error("Failed to open website", "url", request.URL, "error", err)
+		return ctx.JSON(http.StatusInternalServerError, shared.ErrorResponse{Description: "Failed to open website"})
 	}
-	_ = l.Close()
-	return true
+
+	return ctx.JSON(http.StatusOK, struct{}{})
 }

display/web/main.templ

@@ -1,120 +0,0 @@
-package web
-
-templ indexTemplate() {
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-	<meta charset="UTF-8" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	<title>PLG Connect Display</title>
-	<script src="/static/htmx.min.js"></script>
-	<script src="/static/htmx-ext-sse.min.js"></script>
-	<style>
-		:root {
-			--background-color: black;
-			--foreground-color: oklch(92.3% 0.003 48.717);
-			--font-size: 5rem;
-		}
-
-		body {
-			display: flex;
-			justify-content: center;
-			/* centers horizontally */
-			align-items: center;
-			/* centers vertically */
-			width: 100vw;
-			/* Viewport width */
-			height: 100vh;
-			/* Viewport height */
-			margin: 0;
-			padding: 0;
-			overflow: hidden;
-			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';
-		}
-
-		video,
-		img,
-		iframe {
-			width: 100vw;
-			/* Viewport width */
-			height: 100vh;
-			/* Viewport height */
-			object-fit: contain;
-		}
-
-		p,
-		li {
-			font-size: var(--font-size);
-			line-height: 1.2;
-			text-wrap: balance;
-			max-width: 90vw;
-			word-break: break-word;
-			margin: 0 0 calc(var(--font-size) * 0.4) 0;
-		}
-
-		ul,
-		ol {
-			padding-left: calc(var(--font-size)*1.5);
-		}
-	</style>
-	<script>
-		document.addEventListener('keydown', function (event) {
-			if (event.code === 'Space') {
-				event.preventDefault();
-				var video = document.querySelector('video');
-				if (video) {
-					if (video.paused) {
-						video.play();
-					} else {
-						video.pause();
-					}
-				}
-			}
-		});
-	</script>
-</head>
-<bod>
-	<div hx-get="/splash" hx-trigger="load"></div>
-	<main hx-ext="sse" sse-connect="/sse" sse-swap="message"></main>
-</bod>
-
-</html>
-}
-
-templ videoTemplate(path string) {
-<video autoplay>
-	<source src={ "/api/file/" + path } type="video/mp4" />
-</video>
-}
-
-templ imageTemplate(path string) {
-<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="display: flex; flex-direction: column; gap: 1rem; justify-content: end; padding: 2rem; font-size: 4rem;">
-		{ ip }
-		<span style="text-transform: uppercase;">{ mac }</span>
-	</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>
-	:root {
-		--splash-bg: transparent !important;
-		--splash-fade-out-state: paused !important;
-		--background-color: oklch(21.6% 0.006 56.043);
-	}
-</style>
-}

display/web/sse.go

@@ -1,75 +0,0 @@
-package web
-
-import (
-	"bytes"
-	"fmt"
-	"io"
-)
-
-// Event represents Server-Sent Event.
-// SSE explanation: https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events#event_stream_format
-type Event struct {
-	// ID is used to set the EventSource object's last event ID value.
-	ID []byte
-	// Data field is for the message. When the EventSource receives multiple consecutive lines
-	// that begin with data:, it concatenates them, inserting a newline character between each one.
-	// Trailing newlines are removed.
-	Data []byte
-	// Event is a string identifying the type of event described. If this is specified, an event
-	// will be dispatched on the browser to the listener for the specified event name; the website
-	// source code should use addEventListener() to listen for named events. The onmessage handler
-	// is called if no event name is specified for a message.
-	Event []byte
-	// Retry is the reconnection time. If the connection to the server is lost, the browser will
-	// wait for the specified time before attempting to reconnect. This must be an integer, specifying
-	// the reconnection time in milliseconds. If a non-integer value is specified, the field is ignored.
-	Retry []byte
-	// Comment line can be used to prevent connections from timing out; a server can send a comment
-	// periodically to keep the connection alive.
-	Comment []byte
-}
-
-// MarshalTo marshals Event to given Writer
-func (ev *Event) MarshalTo(w io.Writer) error {
-	// Marshalling part is taken from: https://github.com/r3labs/sse/blob/c6d5381ee3ca63828b321c16baa008fd6c0b4564/http.go#L16
-	if len(ev.Data) == 0 && len(ev.Comment) == 0 {
-		return nil
-	}
-
-	if len(ev.Data) > 0 {
-		if _, err := fmt.Fprintf(w, "id: %s\n", ev.ID); err != nil {
-			return err
-		}
-
-		sd := bytes.Split(ev.Data, []byte("\n"))
-		for i := range sd {
-			if _, err := fmt.Fprintf(w, "data: %s\n", sd[i]); err != nil {
-				return err
-			}
-		}
-
-		if len(ev.Event) > 0 {
-			if _, err := fmt.Fprintf(w, "event: %s\n", ev.Event); err != nil {
-				return err
-			}
-		}
-
-		if len(ev.Retry) > 0 {
-			if _, err := fmt.Fprintf(w, "retry: %s\n", ev.Retry); err != nil {
-				return err
-			}
-		}
-	}
-
-	if len(ev.Comment) > 0 {
-		if _, err := fmt.Fprintf(w, ": %s\n", ev.Comment); err != nil {
-			return err
-		}
-	}
-
-	if _, err := fmt.Fprint(w, "\n"); err != nil {
-		return err
-	}
-
-	return nil
-}

display/web/static/htmx-ext-sse.min.js

@@ -1 +0,0 @@
-(function(){var g;htmx.defineExtension("sse",{init:function(e){g=e;if(htmx.createEventSource==undefined){htmx.createEventSource=t}},getSelectors:function(){return["[sse-connect]","[data-sse-connect]","[sse-swap]","[data-sse-swap]"]},onEvent:function(e,t){var r=t.target||t.detail.elt;switch(e){case"htmx:beforeCleanupElement":var n=g.getInternalData(r);var s=n.sseEventSource;if(s){g.triggerEvent(r,"htmx:sseClose",{source:s,type:"nodeReplaced"});n.sseEventSource.close()}return;case"htmx:afterProcessNode":i(r)}}});function t(e){return new EventSource(e,{withCredentials:true})}function a(n){if(g.getAttributeValue(n,"sse-swap")){var s=g.getClosestMatch(n,v);if(s==null){return null}var e=g.getInternalData(s);var a=e.sseEventSource;var t=g.getAttributeValue(n,"sse-swap");var r=t.split(",");for(var i=0;i<r.length;i++){const u=r[i].trim();const c=function(e){if(l(s)){return}if(!g.bodyContains(n)){a.removeEventListener(u,c);return}if(!g.triggerEvent(n,"htmx:sseBeforeMessage",e)){return}f(n,e.data);g.triggerEvent(n,"htmx:sseMessage",e)};g.getInternalData(n).sseEventListener=c;a.addEventListener(u,c)}}if(g.getAttributeValue(n,"hx-trigger")){var s=g.getClosestMatch(n,v);if(s==null){return null}var e=g.getInternalData(s);var a=e.sseEventSource;var o=g.getTriggerSpecs(n);o.forEach(function(t){if(t.trigger.slice(0,4)!=="sse:"){return}var r=function(e){if(l(s)){return}if(!g.bodyContains(n)){a.removeEventListener(t.trigger.slice(4),r)}htmx.trigger(n,t.trigger,e);htmx.trigger(n,"htmx:sseMessage",e)};g.getInternalData(n).sseEventListener=r;a.addEventListener(t.trigger.slice(4),r)})}}function i(e,t){if(e==null){return null}if(g.getAttributeValue(e,"sse-connect")){var r=g.getAttributeValue(e,"sse-connect");if(r==null){return}n(e,r,t)}a(e)}function n(r,e,n){var s=htmx.createEventSource(e);s.onerror=function(e){g.triggerErrorEvent(r,"htmx:sseError",{error:e,source:s});if(l(r)){return}if(s.readyState===EventSource.CLOSED){n=n||0;n=Math.max(Math.min(n*2,128),1);var t=n*500;window.setTimeout(function(){i(r,n)},t)}};s.onopen=function(e){g.triggerEvent(r,"htmx:sseOpen",{source:s});if(n&&n>0){const t=r.querySelectorAll("[sse-swap], [data-sse-swap], [hx-trigger], [data-hx-trigger]");for(let e=0;e<t.length;e++){a(t[e])}n=0}};g.getInternalData(r).sseEventSource=s;var t=g.getAttributeValue(r,"sse-close");if(t){s.addEventListener(t,function(){g.triggerEvent(r,"htmx:sseClose",{source:s,type:"message"});s.close()})}}function l(e){if(!g.bodyContains(e)){var t=g.getInternalData(e).sseEventSource;if(t!=undefined){g.triggerEvent(e,"htmx:sseClose",{source:t,type:"nodeMissing"});t.close();return true}}return false}function f(t,r){g.withExtensions(t,function(e){r=e.transformResponse(r,null,t)});var e=g.getSwapSpecification(t);var n=g.getTarget(t);g.swap(n,r,e,{contextElement:t})}function v(e){return g.getInternalData(e).sseEventSource!=null}})();

flake.nix

@@ -11,20 +11,13 @@
   in {
     devShells."x86_64-linux".default = pkgs.mkShell {
       packages = with pkgs; [
+        gcc
         libreoffice
         ungoogled-chromium
-        xreader
         imagemagick
         ffmpeg
-        ghostscript
         gnome-screenshot
-
-        playwright-driver.browsers
       ];
-
-      PLAYWRIGHT_BROWSERS_PATH = pkgs.playwright-driver.browsers;
-      PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD = "true";
-      PW_DISABLE_TS_ESM = "true";
     };
   };
 }

go.work.sum

@@ -1,24 +1,25 @@
 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/ledongthuc/pdf v0.0.0-20220302134840-0c2507a12d80 h1:6Yzfa6GP0rIo/kULo2bwGEkFvCePZ3qHDDTC3/J9Swo=
+github.com/ledongthuc/pdf v0.0.0-20220302134840-0c2507a12d80/go.mod h1:imJHygn/1yfhB7XSJJKlFZKl/J+dCPAknuiaGOshXAs=
+github.com/mdlayher/raw v0.0.0-20190313224157-43dbcdd7739d h1:rjAS0af7FIYCScTtEU5KjIldC6qVaEScUJhABHC+ccM=
+github.com/orisano/pixelmatch v0.0.0-20220722002657-fb0b55479cde h1:x0TT0RDC7UhAVbbWWBzr41ElhJx5tXPWkIHA2HWPRuw=
+github.com/orisano/pixelmatch v0.0.0-20220722002657-fb0b55479cde/go.mod h1:nZgzbfBr3hhjoZnS66nKrHmduYNpc34ny7RK4z5/HM0=
+github.com/rs/cors v1.11.0 h1:0B9GE/r9Bc2UxRMMtymBkHTenPkHDv0CW4Y98GBY+po=
 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 h1:fVcFKWvrslecOb/tg+Cc05dkeYx540o0FuFt3nUVDoE=
 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.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/net v0.47.0/go.mod h1:/jNxtkgq5yWUGYkaZGqo27cfGZ1c5Nen03aYrrKpVRU=
 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 h1:E2/AqCUMZGgd73TQkxUMcMla25GB9i/5HOdLr+uH7Vo=
+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/text v0.27.0/go.mod h1:1D28KMCvyooCX9hBiosv5Tz/+YLxj0j7XhWjpSUF7CU=
+golang.org/x/term v0.38.0 h1:PQ5pkm/rLO6HnxFR7N2lJHOZX6Kez5Y1gDSJla6jo7Q=
+golang.org/x/term v0.38.0/go.mod h1:bSEAKrOT1W+VSu9TSCMtoGEOUcKxOKgl3LE5QEF/xVg=
 golang.org/x/tools v0.34.0/go.mod h1:pAP9OwEaY1CAW3HOmg3hLZC5Z0CCmzjAF2UQMSqNARg=
-golang.org/x/tools v0.35.0/go.mod h1:NKdj5HkL/73byiZSJjqJgKn3ep7KjFkBOkR/Hps3VPw=
+golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543 h1:E7g+9GITq07hpfrRu66IVDexMakfv52eLZ2CXBWiKr4=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=

nixos/configuration.nix

@@ -86,25 +86,25 @@
   environment.systemPackages = with pkgs; [
     # Programs
     libreoffice
-    #rustdesk
     ungoogled-chromium
     xfce.thunar-archive-plugin
     git
     nushell
     unzip
     iputils
-    xreader
+    tree
+    jq
 
     # Libraries
     imagemagick
     ffmpeg
-    ghostscript
   ];
 
   home-manager.users.mudics = {
     xfconf.settings = {
       xfce4-power-manager."xfce4-power-manager/dpms-enabled" = false;
       xfce4-screensaver."saver/enabled" = false;
+      displays.Notify = 0; # disable popup when connecting new display
     };
 
     home.stateVersion = "25.05";
@@ -115,7 +115,7 @@
     after = ["network-online.target"];
     wants = ["network-online.target"];
     path = config.environment.systemPackages;
-    script = "nu ${./update.sh}";
+    script = "nu ${./update.nu}";
     serviceConfig = {
       WorkingDirectory = "/home/mudics/mudics";
       User = "mudics";
@@ -137,6 +137,7 @@
     environment = {
       DISPLAY = ":0";
       XDG_RUNTIME_DIR = "/run/user/1000";
+      XDG_DATA_DIRS = "/run/current-system/sw/share";
     };
   };
 
@@ -150,6 +151,17 @@
     };
   };
 
+  systemd.services.enable-wol = {
+    wantedBy = ["multi-user.target"];
+    after = ["network.target"];
+    path = with pkgs; [ethtool nushell];
+    script = "nu ${./wol.nu}";
+    serviceConfig = {
+      Type = "oneshot";
+      User = "root";
+    };
+  };
+
   systemd.tmpfiles.rules = [
     "d /home/mudics/mudics 0755 mudics - -"
   ];

nixos/flake.lock

@@ -7,32 +7,32 @@
         ]
       },
       "locked": {
-        "lastModified": 1763992789,
-        "narHash": "sha256-WHkdBlw6oyxXIra/vQPYLtqY+3G8dUVZM8bEXk0t8x4=",
+        "lastModified": 1767910483,
+        "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,
-        "narHash": "sha256-IYlYnp4O4dzEpL77BD/lj5NnJy2J8qbHkNSFiPBCbqo=",
+        "lastModified": 1767799921,
+        "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";
     };
   };

nixos/wol.nu

@@ -0,0 +1,11 @@
+#!/usr/bin/env nu
+
+ls /sys/class/net | get name | path basename  | where $it != "lo" | each {|iface|
+    print $"Enabling WoL on ($iface)..."
+    try {
+        ethtool -s $iface wol g
+        print $"Successfully enabled WoL on ($iface)"
+    } catch {
+        print $"Failed to enable WoL on ($iface). It might not be supported."
+    }
+}

shared/embed.go

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

shared/keys.json

@@ -1,114 +0,0 @@
-{
-  "Escape": "VK_ESC",
-  "Digit1": "VK_1",
-  "Digit2": "VK_2",
-  "Digit3": "VK_3",
-  "Digit4": "VK_4",
-  "Digit5": "VK_5",
-  "Digit6": "VK_6",
-  "Digit7": "VK_7",
-  "Digit8": "VK_8",
-  "Digit9": "VK_9",
-  "Digit0": "VK_0",
-  "KeyQ": "VK_Q",
-  "KeyW": "VK_W",
-  "KeyE": "VK_E",
-  "KeyR": "VK_R",
-  "KeyT": "VK_T",
-  "KeyY": "VK_Y",
-  "KeyU": "VK_U",
-  "KeyI": "VK_I",
-  "KeyO": "VK_O",
-  "KeyP": "VK_P",
-  "KeyA": "VK_A",
-  "KeyS": "VK_S",
-  "KeyD": "VK_D",
-  "KeyF": "VK_F",
-  "KeyG": "VK_G",
-  "KeyH": "VK_H",
-  "KeyJ": "VK_J",
-  "KeyK": "VK_K",
-  "KeyL": "VK_L",
-  "KeyZ": "VK_Z",
-  "KeyX": "VK_X",
-  "KeyC": "VK_C",
-  "KeyV": "VK_V",
-  "KeyB": "VK_B",
-  "KeyN": "VK_N",
-  "KeyM": "VK_M",
-  "F1": "VK_F1",
-  "F2": "VK_F2",
-  "F3": "VK_F3",
-  "F4": "VK_F4",
-  "F5": "VK_F5",
-  "F6": "VK_F6",
-  "F7": "VK_F7",
-  "F8": "VK_F8",
-  "F9": "VK_F9",
-  "F10": "VK_F10",
-  "F11": "VK_F11",
-  "F12": "VK_F12",
-  "F13": "VK_F13",
-  "F14": "VK_F14",
-  "F15": "VK_F15",
-  "F16": "VK_F16",
-  "F17": "VK_F17",
-  "F18": "VK_F18",
-  "F19": "VK_F19",
-  "F20": "VK_F20",
-  "F21": "VK_F21",
-  "F22": "VK_F22",
-  "F23": "VK_F23",
-  "F24": "VK_F24",
-  "NumLock": "VK_NUMLOCK",
-  "ScrollLock": "VK_SCROLLLOCK",
-  "CapsLock": "VK_CAPSLOCK",
-  "Minus": "VK_SP2",
-  "Equal": "VK_SP3",
-  "Backspace": "VK_BACKSPACE",
-  "Tab": "VK_TAB",
-  "BracketLeft": "VK_SP4",
-  "BracketRight": "VK_SP5",
-  "Enter": "VK_ENTER",
-  "Semicolon": "VK_SP6",
-  "Quote": "VK_SP7",
-  "Backquote": "VK_SP1",
-  "Backslash": "VK_SP8",
-  "Comma": "VK_SP9",
-  "Period": "VK_SP10",
-  "Slash": "VK_SP11",
-  "IntlBackslash": "VK_SP12",
-  "NumpadMultiply": "VK_KPASTERISK",
-  "NumpadDivide": "VK_KPSLASH",
-  "NumpadAdd": "VK_KPPLUS",
-  "NumpadSubtract": "VK_KPMINUS",
-  "NumpadDecimal": "VK_KPDOT",
-  "NumpadEnter": "VK_KPENTER",
-  "Space": "VK_SPACE",
-  "Numpad0": "VK_KP0",
-  "Numpad1": "VK_KP1",
-  "Numpad2": "VK_KP2",
-  "Numpad3": "VK_KP3",
-  "Numpad4": "VK_KP4",
-  "Numpad5": "VK_KP5",
-  "Numpad6": "VK_KP6",
-  "Numpad7": "VK_KP7",
-  "Numpad8": "VK_KP8",
-  "Numpad9": "VK_KP9",
-  "PageUp": "VK_PAGEUP",
-  "PageDown": "VK_PAGEDOWN",
-  "End": "VK_END",
-  "Home": "VK_HOME",
-  "ArrowLeft": "VK_LEFT",
-  "ArrowUp": "VK_UP",
-  "ArrowRight": "VK_RIGHT",
-  "ArrowDown": "VK_DOWN",
-  "PrintScreen": "VK_PRINT",
-  "Insert": "VK_INSERT",
-  "Delete": "VK_DELETE",
-  "Help": "VK_HELP",
-  "BrowserBack": "VK_BACK",
-  "Pause": "VK_PAUSE",
-  "Lang1": "VK_HANGUEL",
-  "Lang2": "VK_HANJA"
-}

shared/open_browser.go

@@ -1,37 +0,0 @@
-package shared
-
-import (
-	"errors"
-	"fmt"
-	"os"
-	"os/exec"
-)
-
-func OpenBrowserWindow(url string, fullscreen bool, temp bool) error {
-	bins := []string{"chromium", "chromium-browser"}
-
-	args := []string{fmt.Sprintf("--app=%s", url), "--autoplay-policy=no-user-gesture-required"}
-	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 {
-		cmd := exec.Command(bin, args...)
-		commandOutput := RunShellCommand(cmd)
-		if commandOutput.ExitCode == 0 {
-			return nil
-		}
-		errs = append(errs, commandOutput.Stderr)
-	}
-
-	return errors.New("failed to open browser window: " + fmt.Sprint(errs))
-}

shared/splash_screen.html

@@ -1,267 +1,513 @@
 <div id="splash">
-	<svg id="splash-svg" viewBox="0 0 950 550">
-		<!-- Paths -->
-		<!-- Disabled Paths -->
-		<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 505 350 V 210 H 600 V 112.5" />
-		<path class="splash-stroke" d="M 565 350 V 270 H 850 V 112.5" />
-		<!-- Masks -->
-		<defs>
-			<mask id="m1" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
-				<path class="splash-mask" pathLength="100" d="M 385 350 V 270 H 100 V 112.5" />
-			</mask>
-			<mask id="m2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
-				<path 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" />
+  <svg id="splash-svg" class="fade-in" viewBox="0 0 950 550">
+    <!-- Paths -->
+    <!-- Disabled Paths -->
+    <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 505 350 V 210 H 600 V 112.5" />
+    <path class="splash-stroke" d="M 565 350 V 270 H 850 V 112.5" />
+    <!-- Masks -->
+    <defs>
+      <mask
+        id="m1"
+        maskUnits="userSpaceOnUse"
+        maskContentUnits="userSpaceOnUse"
+      >
+        <path
+          class="splash-mask"
+          pathLength="100"
+          d="M 385 350 V 270 H 100 V 112.5"
+        />
+      </mask>
+      <mask
+        id="m2"
+        maskUnits="userSpaceOnUse"
+        maskContentUnits="userSpaceOnUse"
+      >
+        <path
+          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 -->
-		<rect x="0" y="0" 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" />
+    <!-- Displays -->
+    <rect
+      x="0"
+      y="0"
+      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 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="600" y="66.25" font-size="90">C</text>
-		<text class="splash-text" x="850" y="66.25" font-size="90">S</text>
+    <!-- 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="600" y="66.25" font-size="90">C</text>
+    <text class="splash-text" x="850" y="66.25" font-size="90">S</text>
 
-		<!-- Controller -->
-		<rect x="325" y="350" 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" />
+    <!-- Controller -->
+    <rect
+      x="325"
+      y="350"
+      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 -->
-		<path class="window-controls" d="M 600 360 L 615 375" />
-		<path class="window-controls" d="M 600 375 L 615 360" />
-		<path class="window-controls" fill="none" d="M 575 360 H 590 V 375 H 575 V 360" />
-		<path class="window-controls" d="M 550 375 H 565" />
+    <!-- Window Controls -->
+    <path class="window-controls" d="M 600 360 l 15 15" />
+    <path class="window-controls" d="M 600 375 l 15 -15" />
+    <path
+      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">
-			<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>
-	</svg>
+  <span id="version-label" aria-label="Version">%%APP-VERSION%%</span>
+
+  <div class="fade-in cursor-layer" aria-hidden="true">
+    <div class="cursor-x">
+      <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 {
-		--splash-fade-out-delay: 0s;
-		--splash-fade-out-state: running;
+  :root {
+    --splash-fade-out-delay: 0s;
+    --splash-fade-out-state: running;
 
-		--base-stroke: #444444;
-		--base-stroke-active: #109e00;
+    --base-stroke: #444444;
+    --base-stroke-active: #109e00;
 
-		--splash-bg: oklch(21.6% 0.006 56.043);
-		--monitor-dark: #000000;
-		--monitor-active: #ffffff;
-		--window-controls: #cccccc;
-		--start-button-inactive: #cccccc;
-		--start-button-hover: #77a3b1;
-		--start-button-active: #2c819b;
-		--other-button: oklch(55.3% 0.013 58.071);
-		--splash-control-monitor: oklch(44.4% 0.011 73.639);
+    --splash-bg: oklch(21.6% 0.006 56.043);
+    --monitor-dark: #000000;
+    --monitor-active: #ffffff;
+    --window-controls: #cccccc;
+    --start-button-inactive: #cccccc;
+    --start-button-hover: #77a3b1;
+    --start-button-active: #2c819b;
+    --other-button: oklch(55.3% 0.013 58.071);
+    --splash-control-monitor: oklch(44.4% 0.011 73.639);
 
-		--stroke-strength: 8;
-		--dash: 16;
-		--gap: 20;
-	}
+    --version-color: oklch(55.3% 0.013 58.071);
 
+    --mouse-size: 50px;
+    --mouse-bounce-delay: 5s;
 
-	#splash {
-		position: fixed;
-		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;
+    --dur-x: 16s;
+    --dur-y: 9s;
 
-		animation-name: splash-fade;
-		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);
-	}
+    --stroke-strength: 8;
+    --dash: 16;
+    --gap: 20;
+  }
 
-	#splash-svg {
-		max-height: 50vh;
-		max-width: 80vw;
-		opacity: 0;
-		animation: fade-in 1s ease 500ms forwards;
-	}
+  #version-label {
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+    display: block;
+    color: var(--version-color);
+    padding: 0.4rem 0.8rem;
+    font-size: 1.4rem;
+    text-align: right;
+  }
 
-	.splash-monitor {
-		aspect-ratio: 16/9;
-		rx: 8;
-		ry: 8;
-		width: 200;
-		fill: var(--monitor-dark);
-	}
+  #splash {
+    position: fixed;
+    inset: 0;
+    background: var(--splash-bg);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
 
-	.splash-control-monitor {
-		fill: var(--splash-control-monitor);
-	}
+    width: 100dvw;
+    height: 100dvh;
+    overflow: hidden;
 
-	.splash-other-button {
-		fill: var(--other-button);
-	}
+    container: splash / size;
 
-	.splash-stroke,
-	.splash-stroke-active {
-		fill: none;
-		stroke-linecap: round;
-		stroke-linejoin: round;
-		stroke-width: var(--stroke-strength);
-		stroke-dasharray: var(--dash) var(--gap);
-	}
+    animation-name: splash-fade;
+    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);
+  }
 
-	.window-controls {
-		stroke: var(--window-controls);
-		stroke-width: 3;
-	}
+  #splash-svg {
+    max-height: 50vh;
+    max-width: 80vw;
+    transform: translateY(-12cqh);
+  }
 
-	.splash-stroke {
-		stroke: var(--base-stroke);
-	}
+  .fade-in {
+    opacity: 0;
+    animation: fade-in 1s ease 500ms forwards;
+  }
 
-	.splash-stroke-active {
-		stroke: var(--base-stroke-active);
-	}
+  .splash-monitor {
+    aspect-ratio: 16/9;
+    rx: 8;
+    ry: 8;
+    width: 200;
+    fill: var(--monitor-dark);
+  }
 
-	.splash-mask {
-		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;
-	}
+  .splash-control-monitor {
+    fill: var(--splash-control-monitor);
+  }
 
-	.splash-text {
-		text-anchor: middle;
-		dominant-baseline: middle;
-		fill: var(--monitor-dark);
-		user-select: none;
-		font-family: sans-serif;
-	}
+  .splash-other-button {
+    fill: var(--other-button);
+  }
 
-	.splash-monitor {
-		fill: var(--monitor-dark);
-		animation: activate-monitor 0ms ease 2.35s forwards;
-	}
+  .splash-stroke,
+  .splash-stroke-active {
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: var(--stroke-strength);
+    stroke-dasharray: var(--dash) var(--gap);
+  }
 
-	.splash-start-button {
-		fill: var(--start-button-inactive);
-		animation: start-button-hover-press 1s ease-in-out 450ms forwards;
-	}
+  .window-controls {
+    stroke: var(--window-controls);
+    stroke-width: 3;
+  }
 
-	.cursor {
-		animation: move-mouse 1s ease-in-out 0ms forwards;
-	}
+  .splash-stroke {
+    stroke: var(--base-stroke);
+  }
 
-	@keyframes fade-in {
-		to {
-			opacity: 1;
-		}
-	}
+  .splash-stroke-active {
+    stroke: var(--base-stroke-active);
+  }
 
-	@keyframes move-mouse {
-		0% {
-			transform: translateX(-100px);
-		}
+  .splash-mask {
+    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;
+  }
 
-		50% {
-			transform: translateX(-100px);
-		}
+  .splash-text {
+    text-anchor: middle;
+    dominant-baseline: middle;
+    fill: var(--monitor-dark);
+    user-select: none;
+    font-family: sans-serif;
+  }
 
-		100% {
-			transform: translateX(0px);
-		}
-	}
+  .splash-monitor {
+    fill: var(--monitor-dark);
+    animation: activate-monitor 0ms ease 2.35s forwards;
+  }
 
-	@keyframes start-button-hover-press {
-		0% {
-			fill: var(--start-button-inactive);
-		}
+  .splash-start-button {
+    fill: var(--start-button-inactive);
+    animation: start-button-hover-press 1s ease-in-out 450ms forwards;
+  }
 
-		30% {
-			fill: var(--start-button-inactive);
-		}
+  .cursor-layer {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
 
-		40% {
-			fill: var(--start-button-hover);
-		}
+    --mouse-start-x: calc(100cqw * 35 / 1920);
+    --mouse-start-y: calc(100cqh * 60 / 1080);
+  }
 
-		70% {
-			fill: var(--start-button-hover);
-		}
+  .cursor-x {
+    position: absolute;
+    left: calc(50cqw + var(--mouse-start-x));
+    top: calc(50cqh + var(--mouse-start-y));
+    width: var(--mouse-size);
+    height: var(--mouse-size);
 
-		80% {
-			fill: var(--start-button-active);
-		}
+    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;
+  }
 
-		90% {
-			fill: var(--start-button-active);
-		}
+  .cursor-y {
+    width: 100%;
+    height: 100%;
+    display: block;
 
-		100% {
-			fill: var(--start-button-hover);
-		}
-	}
+    animation-name: mouse-bounceY;
+    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;
+  }
 
-	@keyframes draw {
-		to {
-			stroke-dashoffset: 0;
-		}
-	}
+  .cursor-y * {
+    vector-effect: non-scaling-stroke;
+  }
 
-	@keyframes activate-monitor {
-		to {
-			fill: var(--monitor-active);
-		}
-	}
+  @keyframes fade-in {
+    to {
+      opacity: 1;
+    }
+  }
 
-	@keyframes splash-fade {
-		to {
-			opacity: 0;
-			visibility: hidden;
-		}
-	}
+  @keyframes move-mouse {
+    0% {
+      transform: translateX(-100px);
+    }
 
-	rect {
-		vector-effect: non-scaling-stroke;
-	}
+    50% {
+      transform: translateX(-100px);
+    }
 
-	/* verhindert, dass die Linien beim Skalieren dicker werden */
-	.cursor * {
-		vector-effect: non-scaling-stroke;
-	}
+    100% {
+      transform: translateX(0px);
+    }
+  }
+  
+  @keyframes mouse-bounceX {
+    0% {
+      transform: translateX(0);
+    }
+
+    26% {
+      transform: translateX(calc(-50cqw - var(--mouse-start-x)));
+    }
+
+    76% {
+      transform: translateX(
+        calc(50cqw - var(--mouse-size) - var(--mouse-start-x))
+      );
+    }
+
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes mouse-bounceY {
+    0% {
+      transform: translateY(0);
+    }
+
+    27% {
+      transform: translateY(calc(-50cqh - var(--mouse-start-y)));
+    }
+
+    77% {
+      transform: translateY(
+        calc(50cqh - var(--mouse-size) - var(--mouse-start-y))
+      );
+    }
+
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes start-button-hover-press {
+    0% {
+      fill: var(--start-button-inactive);
+    }
+
+    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/supported_file_types.json

@@ -1,34 +1,34 @@
 {
-    ".mp4": {
-        "display_name": "MP4",
-        "mime_type": "video/mp4"
-    },
-    ".jpg": {
-        "display_name": "JPG",
-        "mime_type": "image/jpg"
-    },
-    ".jpeg": {
-        "display_name": "JPG",
-        "mime_type": "image/jpeg"
-    },
-    ".png": {
-        "display_name": "PNG",
-        "mime_type": "image/png"
-    },
-    ".gif": {
-        "display_name": "GIF",
-        "mime_type": "image/gif"
-    },
-    ".pptx": {
-        "display_name": "PPTX",
-        "mime_type": "application/vnd.openxmlformats-officedocument.presentationml.presentation"
-    },
-    ".odp": {
-        "display_name": "ODP",
-        "mime_type": "application/vnd.oasis.opendocument.presentation"
-    },
-    ".pdf": {
-        "display_name": "PDF",
-        "mime_type": "application/pdf"
-    }
+  ".mp4": {
+    "display_name": "MP4",
+    "mime_type": "video/mp4"
+  },
+  ".jpg": {
+    "display_name": "JPG",
+    "mime_type": "image/jpg"
+  },
+  ".jpeg": {
+    "display_name": "JPG",
+    "mime_type": "image/jpeg"
+  },
+  ".png": {
+    "display_name": "PNG",
+    "mime_type": "image/png"
+  },
+  ".gif": {
+    "display_name": "GIF",
+    "mime_type": "image/gif"
+  },
+  ".pptx": {
+    "display_name": "PPTX",
+    "mime_type": "application/vnd.openxmlformats-officedocument.presentationml.presentation"
+  },
+  ".odp": {
+    "display_name": "ODP",
+    "mime_type": ".odp"
+  },
+  ".pdf": {
+    "display_name": "PDF",
+    "mime_type": "application/pdf"
+  }
 }

shared/version.txt

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