bump to v0.0.16

control/frontend/package.json

@@ -16,40 +16,40 @@
 		"test": "deno task test:e2e"
 	},
 	"devDependencies": {
-		"@eslint/compat": "^1.2.5",
-		"@eslint/js": "^9.18.0",
+		"@eslint/compat": "^1.4.1",
+		"@eslint/js": "^9.39.2",
 		"@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",
+		"@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/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;

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

@@ -11,22 +11,25 @@
 	import DisplayObject from './DisplayObject.svelte';
 	import {
 		all_displays_of_group_selected,
-		get_display_ids_in_group,
 		set_select_for_group,
+		update_db_displays,
+		local_displays,
 		set_new_display_order
 	} from '$lib/ts/stores/displays';
 	import DNDGrip from '$lib/components/DNDGrip.svelte';
 	import { fade } from 'svelte/transition';
-	import type { MenuOption } from '$lib/ts/types';
+	import type { Display, DisplayIdGroup, MenuOption } from '$lib/ts/types';
 	import { selected_display_ids } from '$lib/ts/stores/select';
 	import { liveQuery, type Observable } from 'dexie';
+	import { onMount } from 'svelte';
+	import { get_uuid } from '$lib/ts/utils';
 
 	let {
-		display_group_id,
+		display_id_group,
 		get_display_menu_options,
 		close_pinned_display
 	}: {
-		display_group_id: string;
+		display_id_group: DisplayIdGroup;
 		get_display_menu_options: (display_id: string) => MenuOption[];
 		close_pinned_display: () => void;
 	} = $props();
@@ -34,14 +37,14 @@
 	let all_selected: Observable<boolean> | undefined = $state();
 	$effect(() => {
 		const sdi = $selected_display_ids;
-		all_selected = liveQuery(() => all_displays_of_group_selected(display_group_id, sdi));
+		all_selected = liveQuery(() => all_displays_of_group_selected(display_id_group.id, sdi));
 	});
-	let display_ids_in_group = liveQuery(() => get_display_ids_in_group(display_group_id));
+
 	let hovering_selectable = $state(false);
 
 	async function select_all_of_this_group() {
 		const new_value = !($all_selected || false);
-		await set_select_for_group(display_group_id, new_value);
+		await set_select_for_group(display_id_group.id, new_value);
 	}
 
 	async function handle_consider(e: CustomEvent) {
@@ -49,14 +52,21 @@
 
 		if (items.length !== 1 && info.trigger === TRIGGERS.DRAG_STARTED) {
 			$is_display_drag = true;
-			// add_empty_display_group();
+			// add empty display group if its not just one group
+			if (!($local_displays.length === 1 && $local_displays[0].displays.length === 1)) {
+				$local_displays.push({
+					id: get_uuid(),
+					displays: []
+				});
 			}
-		await set_new_display_order(items);
+		}
+		set_new_display_order(display_id_group.id, items);
 	}
 
 	async function handle_finalize(e: CustomEvent) {
+		set_new_display_order(display_id_group.id, e.detail.items);
+		await update_db_displays();
 		$is_display_drag = false;
-		await set_new_display_order(e.detail.items);
 	}
 </script>
 
@@ -77,7 +87,7 @@
 	<div
 		class="flex flex-col min-w-0 pl-2 py-2 gap-2 w-full"
 		use:dragHandleZone={{
-			items: $display_ids_in_group || [],
+			items: display_id_group.displays,
 			type: 'item',
 			flipDurationMs: dnd_flip_duration_ms,
 			dropTargetStyle: { outline: 'none' }
@@ -85,18 +95,15 @@
 		onconsider={handle_consider}
 		onfinalize={handle_finalize}
 	>
-		{#each $display_ids_in_group || [] as display (display.id)}
+		{#each display_id_group.displays as display_id_object (display_id_object.id)}
 			<!-- Each Group -->
-			<section
-				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 { Display, DisplayIdObject, MenuOption } from '$lib/ts/types';
 	import { is_selected, select, selected_display_ids } from '$lib/ts/stores/select';
-	import { screenshot_loop } from '$lib/ts/stores/displays';
+	import { get_display_by_id, screenshot_loop } from '$lib/ts/stores/displays';
 	import { change_file_path, current_file_path } from '$lib/ts/stores/files';
+	import { liveQuery } from 'dexie';
 
 	let {
-		display,
+		display_id_object,
 		get_display_menu_options,
 		close_pinned_display
 	}: {
-		display: Display;
+		display_id_object: DisplayIdObject;
 		get_display_menu_options: (display_id: string) => MenuOption[];
 		close_pinned_display: () => void;
 	} = $props();
 
 	let hovering_unselectable = $state(false);
+	let display = liveQuery(() => get_display_by_id(display_id_object.id));
 
 	async function onclick(e: Event) {
 		e.stopPropagation();
-		select(selected_display_ids, display.id, 'toggle');
+		select(selected_display_ids, display_id_object.id, 'toggle');
 
 		// force file view update
 		await change_file_path($current_file_path);
 	}
 
 	async function on_preview_click(e: MouseEvent) {
-		if ($pinned_display_id === display.id) {
+		if ($pinned_display_id === display_id_object.id) {
 			close_pinned_display();
 		} else {
-			$pinned_display_id = display.id;
+			$pinned_display_id = display_id_object.id;
 		}
-		await screenshot_loop(display.id);
+		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)}
 			>
 				<Menu />
 			</Button>

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

@@ -11,7 +11,7 @@
 		type Inode,
 		get_file_primary_key,
 		type FileOnDisplay,
-		type FileLoadingData
+		type CompleteFileLoadingData
 	} from '$lib/ts/types';
 
 	import {
@@ -29,7 +29,7 @@
 	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 { get_display_by_id, run_on_all_selected_displays } 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';
@@ -45,12 +45,7 @@
 	});
 
 	let loading_data:
-		| Observable<{
-				is_loading: boolean;
-				total_percentage: number;
-				total_seconds_until_finish: number;
-				display_data: FileLoadingData[];
-		  }>
+		| Observable<CompleteFileLoadingData>
 		| undefined = $state();
 	$effect(() => {
 		const d = $selected_display_ids;
@@ -197,12 +192,7 @@
 	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[];
-	}> {
+	): Promise<CompleteFileLoadingData> {
 		const file_on_display_data: FileOnDisplay[] = await db.files_on_display
 			.where('file_primary_key')
 			.equals(file_primary_key)
@@ -225,7 +215,17 @@
 				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);
+				const display = await get_display_by_id(fod.display_id);
+				if (!display) continue;
+				const display_data_element = {
+					loading_data: fod.loading_data,
+					display_name: display.name
+				};
+				if (fod.loading_data.type === 'sync_download') {
+					display_data.unshift(display_data_element); // insert sync_download element at beginning
+				} else {
+					display_data.push(display_data_element);
+				}
 			} else {
 				percentage_sum += 100;
 			}
@@ -303,12 +303,10 @@
 		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"> -->
 			<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}%;`}
+				style={`width: ${Math.min($loading_data.total_percentage, 100)}%;`}
 			></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">

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

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import type { NumberSetting } from '$lib/ts/types';
+	import { ChevronDown, ChevronUp, Minus, Plus } 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/TextInput.svelte

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

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

@@ -9,6 +9,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' };
@@ -36,7 +39,7 @@ export async function send_keyboard_input(
 	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' },
@@ -72,6 +75,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()
@@ -109,16 +113,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;
@@ -195,14 +191,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);
 }
 
@@ -242,12 +254,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}`);
@@ -276,12 +293,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;
 }
 

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

@@ -1,10 +1,11 @@
 import { db } from './database';
 import { get_display_by_id } 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';
@@ -28,8 +29,10 @@ export async function add_upload(
 ) {
 	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) {
@@ -86,13 +89,32 @@ export async function add_upload(
 	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[]
+) {
 	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');
 
+	if (file_data.file.type === 'inode/directory') {
+		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
+	await create_path_on_all_selected_displays(file_data.file.path, selected_display_ids);
+
 	tasks.push({
 		data: {
 			type: 'sync',
@@ -114,18 +136,21 @@ export async function add_sync(selected_file_id: string, selected_display_ids: s
 		}
 	});
 	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: {
+	const new_file_loading_data: FileLoadingData = {
 		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(),
+		loading_data: new_file_loading_data
+	}));
+	console.log("TEST", new_fods)
+	await db.files_on_display.bulkPut(new_fods);
+
 	await start_task_processing();
 }
 
@@ -244,6 +269,10 @@ export async function sync(task: FileTransferTask) {
 		}
 		await writable.close();
 
+		await db.files_on_display.update([task.display.id, task.file_primary_key], {
+			loading_data: null
+		});
+
 		// 02 - send downloaded file to every destination_display
 		const temp_file = await file_handle.getFile();
 
@@ -293,7 +322,6 @@ async function start_task_processing() {
 
 async function start_task_loop() {
 	while (tasks.length > 0) {
-		console.log('NOCH', tasks.length, 'ZU TUN');
 		const current_task = tasks[0];
 		if (current_task.data.type === 'upload') {
 			await upload(current_task);
@@ -415,11 +443,11 @@ 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, task.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);
+			await remove_file_from_display_recusively(display_id, task.file_primary_key);
 		}
 		await remove_all_files_without_display();
 	}

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

@@ -1,34 +1,71 @@
 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) {
+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 new_status = await ping_ip(display.ip);
-		if (new_status === null && display.status !== null) continue;
-		if (new_status === 'app_online' && display.status !== 'app_online') {
+	if (new_status === null && display.status !== null) return null;
+	if (new_status !== display.status) {
+		// status change
+		if (new_status === 'app_offline') {
+			loading_display_ids.push(display.id);
+		} else {
+			remove_display_from_loading_displays(display.id);
+			if (new_status === 'app_online') {
 				on_display_start(display);
 			}
-		if (new_status !== display.status) {
+		}
 		display.status = new_status;
 		await db.displays.put(display); // save
 	}
+	return new_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,11 +1,30 @@
-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);
+});
+
+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();
@@ -17,8 +36,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;
@@ -30,7 +49,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,
@@ -39,7 +58,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(
@@ -47,11 +68,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) {
@@ -63,6 +92,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(
@@ -104,7 +134,14 @@ 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) {
+export function screenshot_loop(display_id: string) {
+	setTimeout(async () => {
+		let settings = get(preview_settings);
+		if (settings.mode === 'never') return;
+
+		const initial_retry_count = settings.retry_count.now;
+		const retry_seconds = get(preview_settings).retry_seconds.now;
+
 		const display = await db.displays.get(display_id);
 		if (!display || display.preview.currently_updating) return;
 
@@ -115,9 +152,14 @@ export async function screenshot_loop(display_id: string, initial_retry_count: n
 
 		let retry_count = initial_retry_count;
 		while (retry_count > 0) {
-		retry_count -= 1;
+			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 });
@@ -136,12 +178,17 @@ export async function screenshot_loop(display_id: string, initial_retry_count: n
 				retry_count = initial_retry_count;
 			}
 
-		await new Promise((resolve) => setTimeout(resolve, 2000)); // sleep 2s
+			await new Promise((resolve) => setTimeout(resolve, retry_seconds * 1000)); // sleep
 		}
 
+		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>,
@@ -159,7 +206,7 @@ export async function run_on_all_selected_displays(
 			if (!display || (ignore_offline && display.status === 'host_offline')) return;
 			await run_function(display);
 			if (update_screenshot_afterwards) {
-				await screenshot_loop(display.id);
+				screenshot_loop(display.id);
 			}
 		})
 	);
@@ -169,27 +216,68 @@ 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;
+	});
+}
+
+export function no_active_display_selected(
+	selected_display_ids: string[],
+	online_displays: Display[]
+) {
+	const online_and_selected_displays = online_displays.filter((d) =>
+		selected_display_ids.includes(d.id)
+	);
+	return online_and_selected_displays.length === 0;
+}
 
 if (dev) {
 	setTimeout(add_testing_displays, 0);

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

@@ -8,7 +8,7 @@ import {
 } from '../types';
 import { get_display_by_id } 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';
 
@@ -42,16 +42,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 (inode_element.type === 'inode/directory') {
+		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() {
@@ -111,12 +133,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 +146,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 && inode.type === 'inode/directory')
 		.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);
@@ -268,7 +288,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();
 	}
@@ -290,8 +310,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][] = (
@@ -300,7 +320,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);
@@ -373,32 +393,32 @@ export async function create_folder_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);
+	const path_with_folder_name = (path += folder_name + '/');
+	await create_path_on_all_selected_displays(path_with_folder_name, selected_display_ids);
 }
-		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);
+export async function create_path_on_all_selected_displays(
+	path: string,
+	selected_display_ids: string[]
+) {
+	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) {
+			const changed_paths = await get_changed_directory_paths(display, '/');
+			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);
 			}
 		}
+	}, 0);
 }
 
 export async function get_date_mapping(file_primary_key: string): Promise<Record<string, Date>> {

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

@@ -1,4 +1,5 @@
-import { writable, type Writable } from "svelte/store";
+import { writable, type Writable } from 'svelte/store';
+import type { NumberSetting } from '../types';
 
 export const dnd_flip_duration_ms = 300;
 
@@ -6,26 +7,48 @@ const heights_options: Record<string, { min: number; max: number; step: number }
 	display: {
 		min: 15,
 		max: 40,
-        step: 5,
+		step: 5
 	},
 	file: {
 		min: 10,
 		max: 20,
-        step: 5,
-    }
+		step: 5
 	}
+};
 
 export const current_height: Writable<Record<string, number>> = writable<Record<string, number>>({
 	display: 25,
-    file: 10,
+	file: 10
 });
 
-
 export const is_group_drag: Writable<boolean> = writable<boolean>(false);
 export const is_display_drag: Writable<boolean> = writable<boolean>(false);
 
-export const pinned_display_id: Writable<string | null> = writable<string | null>(null);
+export 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: '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) => {
@@ -34,8 +57,12 @@ export function change_height(key: 'display' | 'file', factor: number) {
 	});
 }
 
-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);
+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 {
@@ -43,9 +70,6 @@ export function next_height_step_size(key: 'display' | 'file', current_height_ar
 	}
 }
 
-
-
-
 export function get_selectable_color_classes(
 	selected: boolean,
 	returning_classes: { bg?: boolean; hover?: boolean; active?: boolean; text?: boolean } = {},

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

@@ -37,20 +37,20 @@ export type FileTransferTask = {
 	bytes_total: number; // if type === 'sync' -> bytes_total = file_size * 2 (1x download + 1x upload)
 };
 
-export type FileTransferTaskData = {
-	type: 'upload',
-	file: File,
-} | {
-	type: "sync",
-	destination_displays: ShortDisplay[],
+export type FileTransferTaskData =
+	| {
+			type: 'upload';
+			file: File;
 	  }
-
+	| {
+			type: 'sync';
+			destination_displays: ShortDisplay[];
+	  };
 
 export type ShortDisplay = {
 	id: string;
 	ip: string;
-}
-
+};
 
 export type FileOnDisplay = {
 	display_id: string;
@@ -64,7 +64,14 @@ export type FileLoadingData = {
 	percentage: number;
 	bytes_per_second: number;
 	seconds_until_finish: number;
-}
+};
+
+export type CompleteFileLoadingData = {
+	is_loading: boolean;
+	total_percentage: number;
+	total_seconds_until_finish: number;
+	display_data: { loading_data: FileLoadingData; display_name: string }[];
+};
 
 export type Inode = {
 	path: string;
@@ -101,6 +108,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;
@@ -125,6 +141,13 @@ export type PopupContent = {
 	closable?: boolean;
 };
 
+export type NumberSetting = {
+	max: number,
+	min: number,
+	now: number,
+	step: number
+}
+
 export type DisplayStatus = 'host_offline' | 'app_offline' | 'app_online' | null;
 
 export function to_display_status(value: string): DisplayStatus {

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

@@ -1,25 +1,42 @@
 <script lang="ts">
-	import { Monitor, Plus, Radio, Settings, Trash2, Menu } from 'lucide-svelte';
+	import {
+		Monitor,
+		Plus,
+		Radio,
+		Settings,
+		Trash2,
+		Menu,
+		ChevronDown,
+		icons,
+		SquareCheckBig,
+		Square,
+		X,
+		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';
 
 	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))$/;
@@ -55,11 +72,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;
+		let display: Display | null = null;
 		if (!!existing_display_id) {
-			await edit_display_data(existing_display_id, ip, mac, name);
+			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,9 +118,22 @@
 		popup_content = {
 			open: true,
 			snippet: display_popup,
-			title: 'Neuen Bildschirm hinzufügen',
+			title: 'Neuen Bildschirm Hinzufügen',
 			title_icon: Monitor,
 			title_class: '!text-xl',
+			window_class: 'w-3xl',
+			closable: true
+		};
+	};
+
+	const show_settings_popup = () => {
+		popup_content = {
+			open: true,
+			snippet: settings_popup,
+			title: 'Einstellungen',
+			title_icon: Settings,
+			title_class: '!text-xl',
+			window_class: 'w-3xl',
 			closable: true
 		};
 	};
@@ -111,9 +170,63 @@
 		};
 	};
 
-	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',
+			closable: true
+		};
+	};
 </script>
 
+{#snippet about_popup(_: string)}
+	<div class="px-2">
+		<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?
@@ -220,6 +333,52 @@
 	</div>
 {/snippet}
 
+{#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>
@@ -229,12 +388,18 @@
 			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
 				}
 			]}
 		>

control/frontend/src/routes/ControlView.svelte

@@ -9,17 +9,37 @@
 		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,
+		show_html
+	} from '$lib/ts/api_handler';
+	import {
+		get_display_by_id,
+		no_active_display_selected,
+		online_displays,
+		run_on_all_selected_displays
+	} 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';
+
+	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,
@@ -36,7 +56,7 @@
 		popup_content = {
 			open: true,
 			snippet: send_keys_popup,
-			title: 'Tastatur-Eingaben durchgeben',
+			title: 'Tastatur-Eingaben Senden',
 			title_icon: Keyboard,
 			closable: true
 		};
@@ -46,13 +66,24 @@
 		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,
+			closable: true
+		};
+	};
+
 	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,11 +98,11 @@
 		}
 	}
 
-	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 +112,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);
 	}
 
@@ -109,13 +140,56 @@
 			10
 		);
 	}
+	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) =>
+			show_html(d.ip, `<iframe src="${website_url}"></iframe>`)
+		);
+		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>
@@ -139,7 +213,7 @@
 
 <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">
@@ -148,7 +222,7 @@
 					<Button
 						title="Vorherige Folie (Pfeil nach Links)"
 						className="px-9"
-						disabled={$selected_display_ids.length === 0}
+						disabled={no_active_display_selected($selected_display_ids, $online_displays)}
 						click_function={async () => {
 							await send_single_key_press('VK_LEFT');
 						}}><ArrowBigLeft /></Button
@@ -156,7 +230,7 @@
 					<Button
 						title="Nächste Folie (Pfeil nach Rechts)"
 						className="px-9"
-						disabled={$selected_display_ids.length === 0}
+						disabled={no_active_display_selected($selected_display_ids, $online_displays)}
 						click_function={async () => {
 							await send_single_key_press('VK_RIGHT');
 						}}><ArrowBigRight /></Button
@@ -165,13 +239,20 @@
 
 				<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={no_active_display_selected($selected_display_ids, $online_displays)}
+					><TextAlignStart /> Text Anzeigen</Button
 				>
 
 				<Button
 					className="px-3 flex gap-3 w-75 justify-normal"
-					disabled={$selected_display_ids.length === 0}
+					disabled={no_active_display_selected($selected_display_ids, $online_displays)}
+					click_function={show_website_popup}><Globe /> Webseite Anzeigen</Button
+				>
+
+				<Button
+					className="px-3 flex gap-3 w-75 justify-normal"
+					disabled={no_active_display_selected($selected_display_ids, $online_displays)}
 					click_function={async () => {
 						await run_on_all_selected_displays((d) => show_blackscreen(d.ip));
 					}}><Presentation />Blackout</Button
@@ -179,40 +260,40 @@
 
 				<div class="flex flex-row justify-normal">
 					<Button className="rounded-r-none pl-3 flex gap-3 grow w-65 justify-normal" disabled>
-						<TrafficCone /> Fallback-Bild anzeigen
+						<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={no_active_display_selected($selected_display_ids, $online_displays)}
+					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}
+						disabled={$all_display_states === 'on' ||
+							no_active_display_selected($selected_display_ids, $online_displays)}
 						click_function={startup_action}
 					>
-							<Power /> PC hochfahren
+						<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}
+						disabled={$all_display_states === 'off' ||
+							no_active_display_selected($selected_display_ids, $online_displays)}
+						click_function={ask_shutdown}
 					>
-							<PowerOff /> PC herunterfahren</Button
+						<PowerOff /> Bildschirm Herunterfahren</Button
 					>
-					{/await}
 				</div>
 				<Button className="px-3 flex gap-3 w-full xl:w-75 justify-normal" disabled>
 					<SquareTerminal />
-					Shell-Befehl ausführen
+					Shell-Befehl Ausführen
 				</Button>
 			</div>
 		</div>

control/frontend/src/routes/DisplayView.svelte

@@ -3,9 +3,11 @@
 	import {
 		all_displays_of_group_selected,
 		get_display_by_id,
-		get_display_groups,
 		set_select_for_group,
-		set_new_display_group_order
+		local_displays,
+		update_local_displays,
+		update_db_displays,
+		get_display_groups
 	} from '$lib/ts/stores/displays';
 	import {
 		change_height,
@@ -19,15 +21,16 @@
 	import { type Display, type DisplayGroup, type MenuOption } from '$lib/ts/types';
 	import Button from '$lib/components/Button.svelte';
 	import OnlineState from '../lib/components/OnlineState.svelte';
-	import { cubicOut } from 'svelte/easing';
 	import { Menu, Pencil, PinOff, Trash2, VideoOff, ZoomIn, ZoomOut } from 'lucide-svelte';
 	import { selected_display_ids } from '$lib/ts/stores/select';
 	import { dragHandleZone } from 'svelte-dnd-action';
-	import { flip } from 'svelte/animate';
 	import DisplayGroupObject from '../lib/components/DisplayGroupObject.svelte';
 	import { Pane, Splitpanes } from 'svelte-splitpanes';
 	import HighlightedText from '$lib/components/HighlightedText.svelte';
 	import { liveQuery, type Observable } from 'dexie';
+	import { onMount } from 'svelte';
+	import { flip } from 'svelte/animate';
+	import { cubicOut } from 'svelte/easing';
 
 	let {
 		handle_display_deletion,
@@ -43,7 +46,16 @@
 		const pdi = $pinned_display_id;
 		pinned_display = liveQuery(() => get_display_by_id(pdi || ''));
 	});
+
 	let display_groups = liveQuery(() => get_display_groups());
+	let display_id_groups = liveQuery(() => update_local_displays());
+	$effect(() => {
+		const current_displays = $display_id_groups;
+		if (!$is_group_drag && !$is_display_drag && current_displays) {
+			$local_displays = current_displays;
+		}
+	});
+
 	let all_groups_selected: Observable<boolean> | undefined = $state();
 	$effect(() => {
 		const d = $display_groups;
@@ -206,7 +218,7 @@
 							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
@@ -234,26 +246,8 @@
 						</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="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!">
@@ -263,22 +257,39 @@
 							<HighlightedText fg="text-stone-450">Neuen Bildschirm hinzufügen</HighlightedText>.
 						</div>
 					{:else}
-							{#each $display_groups || [] as display_group (display_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"
+						<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 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>
+					{/if}
 				</div>
 			</div>
 		</Pane>

control/frontend/src/routes/FileView.svelte

@@ -17,11 +17,11 @@
 	import { 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,
+		get_displays_where_path_not_exists,
 		create_folder_on_all_selected_displays
 	} from '$lib/ts/stores/files';
 	import { slide } from 'svelte/transition';
@@ -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 { no_active_display_selected, online_displays } from '$lib/ts/stores/displays';
 
 	let current_name: string = $state('');
 	let current_valid: boolean = $state(false);
@@ -52,15 +53,15 @@
 	$effect(() => {
 		const path = $current_file_path,
 			display_ids = $selected_display_ids;
-		current_folder_elements = liveQuery(() => get_current_folder_elements(path, 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';
-		})
-	})
+		});
+	});
 
 	let popup_content: PopupContent = $state({
 		open: false,
@@ -128,7 +129,7 @@
 		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_display_ids)
 		).map((display) => display.name);
 		popup_content = {
 			open: true,
@@ -148,6 +149,21 @@
 			closable: true
 		};
 	};
+
+	async function sync_selected_files(
+		selected_file_ids: string[],
+		selected_display_ids: string[],
+		current_folder_elements: Inode[]
+	) {
+		if (selected_file_ids.length === 0 && current_folder_elements.length > 0) {
+			selected_file_ids = current_folder_elements.map((inode) => get_file_primary_key(inode));
+		}
+		if (selected_file_ids.length === 0) return;
+		// Mit For-Schleife über ausgewählte Elemente gehen
+		for (const file_id of selected_file_ids) {
+			await add_sync_recursively(file_id, selected_display_ids);
+		}
+	}
 </script>
 
 {#snippet new_folder_popup()}
@@ -232,7 +248,7 @@
 		<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">
+		<div class="flex flex-col gap-2 overflow-y-auto h-full min-h-0 grow-0">
 			{#each $selected_files || [] as file}
 				<InodeElement {file} not_interactable />
 			{/each}
@@ -270,7 +286,7 @@
 <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
@@ -306,7 +322,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={no_active_display_selected($selected_display_ids, $online_displays)}><FolderPlus /></Button
 					>
 					<div class="border border-stone-700 my-1"></div>
 					<Button
@@ -315,19 +331,26 @@
 						click_function={() => {
 							if (file_input) file_input.click();
 						}}
-						disabled={$selected_display_ids.length === 0}><Upload /></Button
+						disabled={no_active_display_selected($selected_display_ids, $online_displays)}><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_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_display_ids,
+								$current_folder_elements ?? []
+							)}
+						disabled={no_active_display_selected($selected_display_ids, $online_displays)}
 						><RefreshCcw />
 						<span class="hidden 2xl:flex">Synchronisieren</span>
 					</Button>
@@ -341,7 +364,7 @@
 					<Button
 						title="Ausgewählte Datei(en) einfügen"
 						className="px-3 flex"
-						disabled={$selected_display_ids.length === 0}
+						disabled={no_active_display_selected($selected_display_ids, $online_displays)}
 					>
 						<ClipboardPaste />
 					</Button>
@@ -365,7 +388,7 @@
 		</div>
 		<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 no_active_display_selected($selected_display_ids, $online_displays)}
 					<span class="text-stone-450 px-10 py-6 leading-relaxed text-center">
 						Es sind keine Bildschirme ausgewählt.
 					</span>

control/frontend/src/routes/TipTapInput.svelte

@@ -66,12 +66,6 @@
 				is_selected: () => editor_state.editor?.isActive('strike') ?? false,
 				title: 'Durchgestrichen',
 				icon: Strikethrough
-			},
-			{
-				onclick: () => {},
-				is_selected: () => false,
-				title: 'QR-Code anfügen',
-				icon: QrCode
 			}
 		],
 		[
@@ -216,7 +210,7 @@
 			{/each}
 		</div>
 
-		<Button click_function={show_text} className="w-full font-bold">Text anzeigen</Button>
+		<Button click_function={show_text} className="w-full font-bold">Text Anzeigen</Button>
 	</div>
 </div>
 

control/frontend/src/tailwind.config.js

@@ -216,6 +216,6 @@ module.exports = {
 		'active:bg-red-500',
 
 		'hover:bg-stone-600/70',
-    'active:bg-stone-500/80',
-  ],
-}
+		'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/main.go

@@ -64,7 +64,7 @@ func main() {
 			os.Exit(1)
 		}
 	}()
-	err = shared.OpenBrowserWindow("http://localhost:"+port, false, false)
+	err = shared.OpenBrowserWindow("http://localhost:"+port, false, "control")
 	if err != nil {
 		slog.Error("Failed to open browser window", "error", err)
 		os.Exit(1)

display/go.mod

@@ -4,10 +4,10 @@ go 1.24.4
 
 require (
 	github.com/a-h/templ v0.3.960
-	github.com/labstack/echo/v4 v4.13.4
+	github.com/gabriel-vasile/mimetype v1.4.11
+	github.com/labstack/echo/v4 v4.15.0
 	github.com/micmonay/keybd_event v1.1.2
 	github.com/skip2/go-qrcode v0.0.0-20200617195104-da1b6568686e
-	github.com/gabriel-vasile/mimetype v1.4.11
 )
 
 require (
@@ -23,14 +23,14 @@ require (
 	github.com/natefinch/atomic v1.0.1 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasttemplate v1.2.2 // indirect
-	golang.org/x/crypto v0.40.0 // indirect
-	golang.org/x/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.39.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

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

display/main.go

@@ -26,7 +26,7 @@ func main() {
 	// the order is important, the open browser command exitsts as soon as the winodw is closed
 	// and since its the last action in the main go func all other goroutines (e.g. the webserver) are killed
 	go web.StartWebServer(shared.Version, port)
-	err = shared.OpenBrowserWindow("http://localhost:"+port, true, true)
+	err = shared.OpenBrowserWindow("http://localhost:"+port, true, "display")
 	if err != nil {
 		slog.Error("Failed to open browser window", "error", err)
 		os.Exit(1)

go.work.sum

@@ -1,24 +1,15 @@
 github.com/a-h/htmlformat v0.0.0-20250209131833-673be874c677/go.mod h1:FMIm5afKmEfarNbIXOaPHFY8X7fo+fRQB6I9MPG2nB0=
-github.com/a-h/templ v0.3.960 h1:trshEpGa8clF5cdI39iY4ZrZG8Z/QixyzEyUnA7feTM=
-github.com/a-h/templ v0.3.960/go.mod h1:oCZcnKRf5jjsGpf2yELzQfodLphd2mwecwG4Crk5HBo=
-github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/rs/cors v1.11.0/go.mod h1:XyqrcTp5zjWr1wsJ8PIRZssZ8b/WMcMf71DJnit4EMU=
+github.com/stretchr/testify v1.11.1/go.mod h1:wZwfW3scLgRK+23gO65QZefKpKQRnfz6sD981Nm4B6U=
 github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
-golang.org/x/crypto v0.40.0 h1:r4x+VvoG5Fm+eJcxMaY8CQM7Lb0l1lsmjGBQ6s8BfKM=
-golang.org/x/crypto v0.40.0/go.mod h1:Qr1vMER5WyS2dfPHAlsOj01wgLbsyWtFn/aY+5+ZdxY=
 golang.org/x/mod v0.25.0/go.mod h1:IXM97Txy2VM4PJ3gI61r1YEk/gAj6zAHN3AdZt6S9Ww=
-golang.org/x/mod v0.26.0/go.mod h1:/j6NAhSk8iQ723BGAUyoAcn7SlD7s15Dp9Nd/SfeaFQ=
 golang.org/x/net v0.41.0/go.mod h1:B/K4NNqkfmg07DQYrbwvSluqCJOOXwUjeb/5lOisjbA=
-golang.org/x/net v0.42.0 h1:jzkYrhi3YQWD6MLBJcsklgQsoAcw89EcZbJw8Z614hs=
-golang.org/x/net v0.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/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/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=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=

nixos/configuration.nix

@@ -86,7 +86,6 @@
   environment.systemPackages = with pkgs; [
     # Programs
     libreoffice
-    rustdesk
     ungoogled-chromium
     xfce.thunar-archive-plugin
     git
@@ -117,7 +116,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";
@@ -153,6 +152,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/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/open_browser.go

@@ -5,23 +5,31 @@ import (
 	"fmt"
 	"os"
 	"os/exec"
+	"path/filepath"
 )
 
-func OpenBrowserWindow(url string, fullscreen bool, temp bool) error {
+func OpenBrowserWindow(url string, fullscreen bool, profile string) error {
 	bins := []string{"chromium", "chromium-browser"}
 
-	args := []string{fmt.Sprintf("--app=%s", url), "--autoplay-policy=no-user-gesture-required"}
+	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", fmt.Sprintf("browser-%s", profile))
+	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),
+		"--autoplay-policy=no-user-gesture-required",
+		fmt.Sprintf("--user-data-dir=%s", browserProfileDirPath),
+		"--allow-running-insecure-content",
+		"--disable-features=XFrameOptions",
+	}
 	if fullscreen {
 		args = append(args, "--start-fullscreen")
 	}
-	if temp {
-		tempDirPath, err := os.MkdirTemp("", "plg-mudics-browser-")
-		if err != nil {
-			return err
-		}
-		arg := fmt.Sprintf("--user-data-dir=%s", tempDirPath)
-		args = append(args, arg)
-	}
 
 	errs := []string{}
 	for _, bin := range bins {

shared/version.txt

@@ -1 +1 @@
-v0.0.11
+v0.0.16