chore: bump to version v0.1.6

chore(display): add ai generated pdf.js integration (#58 )
Co-authored-by: E44 <129310925+programmer-44@users.noreply.github.com> Reviewed-on: https://codeberg.org/PLG-Development/PLG-MuDiCS/pulls/58
2026-07-06 17:07:08 +00:00 · 2026-06-14 22:11:15 +02:00 · 2026-06-14 22:10:04 +02:00 · 2026-06-14 20:34:38 +02:00 · 2026-06-14 20:26:21 +02:00 · 2026-06-14 20:25:45 +02:00
34 changed files with 929 additions and 217 deletions
@@ -1,2 +1,3 @@
 .aider*
 .env
+/display/internal/pdfjs/node_modules
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { get_shifted_color } from '$lib/ts/stores/ui_behavior';
 	import type { MenuOption } from '$lib/ts/types';
+	import type { Snippet } from 'svelte';
 	import { fade } from 'svelte/transition';

 	let {
@@ -26,7 +27,7 @@
 		menu_options?: MenuOption[];
 		menu_class?: string;
 		div_class?: string;
-		children?: any;
+		children: Snippet;
 	} = $props();

 	let menu_shown = $state(false);
@@ -158,14 +159,14 @@
 				e.stopPropagation();
 			}}
 		>
-			{#each menu_options as option}
+			{#each menu_options as option, i (i)}
 				<button
 					disabled={option.disabled ?? false}
 					class="bg-white/15 {option.disabled
 						? 'text-stone-500 cursor-not-allowed'
 						: 'hover:bg-white/35 active:bg-white/60 cursor-pointer ' +
 							option.class} rounded-lg p-2 transition-colors duration-200 select-none flex flex-row gap-2 items-center"
-					onclick={async (e) => {
+					onclick={async () => {
 						if (option.on_select) await option.on_select();
 						close_menu();
 					}}
@@ -3,11 +3,8 @@
 	import {
 		dnd_flip_duration_ms,
 		get_selectable_color_classes,
-		is_display_drag,
-		is_group_drag
+		is_display_drag
 	} from '$lib/ts/stores/ui_behavior';
-	import { cubicOut } from 'svelte/easing';
-	import { flip } from 'svelte/animate';
 	import DisplayObject from './DisplayObject.svelte';
 	import {
 		all_displays_of_group_selected,
@@ -18,10 +15,9 @@
 	} from '$lib/ts/stores/displays';
 	import DNDGrip from '$lib/components/DNDGrip.svelte';
 	import { fade } from 'svelte/transition';
-	import type { Display, DisplayIdGroup, MenuOption } from '$lib/ts/types';
+	import type { DisplayIdGroup, MenuOption } from '$lib/ts/types';
 	import { selected_display_ids } from '$lib/ts/stores/select';
 	import { liveQuery, type Observable } from 'dexie';
-	import { onMount } from 'svelte';
 	import { get_uuid } from '$lib/ts/utils';

 	let {
@@ -30,7 +26,7 @@
 		close_pinned_display
 	}: {
 		display_id_group: DisplayIdGroup;
-		get_display_menu_options: (display_id: string) => MenuOption[];
+		get_display_menu_options: (display_id: string, display_version: string|undefined) => MenuOption[];
 		close_pinned_display: () => void;
 	} = $props();

@@ -8,7 +8,7 @@
 	import DNDGrip from '$lib/components/DNDGrip.svelte';
 	import { Menu, Pin, PinOff, VideoOff } from 'lucide-svelte';
 	import OnlineState from './OnlineState.svelte';
-	import type { Display, DisplayIdObject, MenuOption } from '$lib/ts/types';
+	import type { DisplayIdObject, MenuOption } from '$lib/ts/types';
 	import { is_selected, select, selected_display_ids } from '$lib/ts/stores/select';
 	import { get_display_by_id, screenshot_loop } from '$lib/ts/stores/displays';
 	import { change_file_path, current_file_path } from '$lib/ts/stores/files';
@@ -20,7 +20,7 @@
 		close_pinned_display
 	}: {
 		display_id_object: DisplayIdObject;
-		get_display_menu_options: (display_id: string) => MenuOption[];
+		get_display_menu_options: (display_id: string, display_version: string|undefined) => MenuOption[];
 		close_pinned_display: () => void;
 	} = $props();

@@ -136,7 +136,7 @@
 				click_function={(e) => {
 					e.stopPropagation();
 				}}
-				menu_options={get_display_menu_options(display_id_object.id)}
+				menu_options={get_display_menu_options(display_id_object.id, $display?.version)}
 			>
 				<Menu />
 			</Button>
@@ -0,0 +1,176 @@
+<script lang="ts">
+	import { add_upload } from '$lib/ts/file_transfer_handler';
+	import { selected_online_display_ids } from '$lib/ts/stores/displays';
+	import { current_file_path } from '$lib/ts/stores/files';
+	import HighlightedText from './HighlightedText.svelte';
+
+	let { className } = $props();
+
+	let drop_zone: HTMLDivElement | undefined;
+
+	let is_dragging = $state(false);
+	let is_dragging_over_drop_zone = $state(false);
+	let is_dragging_multiple_files = $state(false);
+
+	let drag_counter = 0;
+
+	function contains_files(event: DragEvent): boolean {
+		return Array.from(event.dataTransfer?.types ?? []).includes('Files');
+	}
+
+	function reset_drag_vars(): void {
+		drag_counter = 0;
+		is_dragging = false;
+		is_dragging_over_drop_zone = false;
+		is_dragging_multiple_files = false;
+	}
+
+	function is_inside_drop_zone(event: DragEvent): boolean {
+		if (!drop_zone) return false;
+
+		const rect = drop_zone.getBoundingClientRect();
+
+		return (
+			event.clientX >= rect.left &&
+			event.clientX <= rect.right &&
+			event.clientY >= rect.top &&
+			event.clientY <= rect.bottom
+		);
+	}
+
+	function handle_window_drag_enter(event: DragEvent): void {
+		if (!contains_files(event)) return;
+
+		event.preventDefault();
+
+		drag_counter += 1;
+		is_dragging = true;
+		is_dragging_multiple_files =
+			(event.dataTransfer?.items.length ?? 0) > 1;
+
+		if (event.dataTransfer) {
+			event.dataTransfer.dropEffect = 'copy';
+		}
+	}
+
+	function handle_window_drag_over(event: DragEvent): void {
+		if (!contains_files(event)) return;
+
+		event.preventDefault();
+
+		is_dragging = true;
+		is_dragging_multiple_files =
+			(event.dataTransfer?.items.length ?? 0) > 1;
+
+		is_dragging_over_drop_zone =
+			$selected_online_display_ids.length > 0 &&
+			is_inside_drop_zone(event);
+
+		if (event.dataTransfer) {
+			event.dataTransfer.dropEffect = 'copy';
+		}
+	}
+
+	function handle_window_drag_leave(event: DragEvent): void {
+		if (!contains_files(event) && !is_dragging) return;
+
+		drag_counter = Math.max(0, drag_counter - 1);
+
+		if (drag_counter === 0) {
+			reset_drag_vars();
+		}
+	}
+
+	function handle_window_drop_capture(event: DragEvent): void {
+		if (!contains_files(event)) return;
+		event.preventDefault();
+	}
+
+	function handle_window_drop(event: DragEvent): void {
+		if (!contains_files(event)) return;
+
+		event.preventDefault();
+		reset_drag_vars();
+	}
+
+	async function handle_drop_zone_drop(
+		event: DragEvent
+	): Promise<void> {
+		if (!contains_files(event)) return;
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		const may_import =
+			$selected_online_display_ids.length > 0 &&
+			is_inside_drop_zone(event);
+
+		const items = Array.from(event.dataTransfer?.items ?? []);
+
+		reset_drag_vars();
+
+		if (!may_import) return;
+
+		const transfer = new DataTransfer();
+
+		for (const item of items) {
+			if (item.kind !== 'file') continue;
+
+			const file = item.getAsFile();
+			const entry = item.webkitGetAsEntry?.();
+
+			if (file && (!entry || entry.isFile)) {
+				transfer.items.add(file);
+			}
+		}
+
+		if (transfer.files.length === 0) return;
+
+		await add_upload(
+			transfer.files,
+			$selected_online_display_ids,
+			$current_file_path
+		);
+	}
+</script>
+
+<svelte:window
+	ondragenter={handle_window_drag_enter}
+	ondragover={handle_window_drag_over}
+	ondragleave={handle_window_drag_leave}
+	ondrop={handle_window_drop}
+	ondropcapture={handle_window_drop_capture}
+/>
+
+<div
+	class="fixed {is_dragging
+		? 'bg-black/50 opacity-100'
+		: 'opacity-0'} pointer-events-none p-10 z-1000 inset-0 transition-all duration-100 flex items-center justify-center text-xl text-white font-bold select-none"
+>
+	{$selected_online_display_ids.length === 0
+		? 'Für das Hochladen von Dateien müssen erreichbare Displays ausgewählt werden!'
+		: ''}
+</div>
+
+<div
+	bind:this={drop_zone}
+	aria-hidden="true"
+	ondrop={handle_drop_zone_drop}
+	class="{className} absolute p-6 inset-0 flex z-1001 justify-center items-center transition-all duration-200 {$selected_online_display_ids.length >
+		0 && is_dragging
+		? 'opacity-100'
+		: 'opacity-0 pointer-events-none'} {is_dragging_over_drop_zone
+		? 'bg-stone-500'
+		: 'bg-stone-700'}"
+>
+	<p class="text-lg pointer-events-none">
+		Hier {is_dragging_multiple_files ? 'Dateien' : 'Datei'} ablegen, um sie auf {$selected_online_display_ids.length ===
+		1
+			? 'dem ausgewählten Display'
+			: 'den ausgewählten Displays'} in den Pfad <HighlightedText
+			className="transition-colors duration-200"
+			bg={is_dragging_over_drop_zone ? 'bg-stone-550' : 'bg-stone-750'}
+			>{$current_file_path}</HighlightedText
+		> hochzuladen
+	</p>
+</div>
@@ -1,11 +1,13 @@
 <script lang="ts">
+	import type { Snippet } from "svelte";
+
 	let {
 		children,
 		bg = 'bg-stone-750',
 		fg = 'text-stone-200',
 		className = ''
 	}: {
-		children: any;
+		children: Snippet;
 		bg?: string;
 		fg?: string;
 		className?: string;
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ArrowRight, Ban, FileIcon, Folder, Play, Triangle, TriangleAlert } from 'lucide-svelte';
+	import { ArrowRight, Ban, FileIcon, Folder, Play, TriangleAlert } from 'lucide-svelte';
 	import {
 		current_height,
 		get_selectable_color_classes,
@@ -10,7 +10,6 @@
 		supported_file_type_icon,
 		type Inode,
 		get_file_primary_key,
-		type FileOnDisplay,
 		type FileTransferTask,
 		is_folder
 	} from '$lib/ts/types';
@@ -18,7 +17,6 @@
 	import {
 		is_selected,
 		select,
-		selected_display_ids,
 		selected_file_ids
 	} from '$lib/ts/stores/select';
 	import {
@@ -32,13 +30,11 @@
 	import { get_file_size_display_string, get_file_type } from '$lib/ts/utils';
 	import { open_file } from '$lib/ts/api_handler';
 	import {
-		get_display_by_id,
 		run_on_all_selected_displays,
 		selected_online_display_ids
 	} from '$lib/ts/stores/displays';
 	import { get_thumbnail_url } from '$lib/ts/stores/thumbnails';
 	import { liveQuery, type Observable } from 'dexie';
-	import { db } from '$lib/ts/database';
 	import { add_sync_recursively, file_transfer_tasks } from '$lib/ts/file_transfer_handler';

 	let { file, not_interactable = false }: { file: Inode; not_interactable?: boolean } = $props();
@@ -64,8 +60,8 @@
 		file_size = liveQuery(() => get_size_recursively(f));
 	});

-	let file_transfer_task: FileTransferTask | null = $derived(
-		$file_transfer_tasks.hasOwnProperty(file_primary_key)
+	let file_transfer_task_list: FileTransferTask[] | null = $derived(
+		Object.hasOwn($file_transfer_tasks, file_primary_key)
 			? $file_transfer_tasks[file_primary_key]
 			: null
 	);
@@ -73,7 +69,7 @@
 	let loading_finished = $state(false);
 	let previous_loading_state = $state(false);
 	$effect(() => {
-		const ftt = file_transfer_task;
+		const ftt = file_transfer_task_list;
 		if (previous_loading_state && !ftt) {
 			loading_finished = true;
 			setTimeout(() => (loading_finished = false), 200);
@@ -145,7 +141,7 @@

 	function get_grayed_out_text_color_strings(is_selected: boolean): string {
 		if (not_interactable) return 'text-stone-400';
-		if (!!file_transfer_task) return 'text-white/20';
+		if (file_transfer_task_list) return 'text-white/20';
 		const color = is_selected ? 'text-stone-600' : 'text-stone-400';
 		const factor = is_selected ? -1 : 1;
 		return `${color} group-hover:${get_shifted_color(color, factor * 100)} group-active:${get_shifted_color(color, factor * 150)}`;
@@ -153,14 +149,14 @@

 	function get_grayed_out_border_color_strings(is_selected: boolean): string {
 		if (not_interactable) return 'border-stone-550';
-		if (!!file_transfer_task) return 'border-white/10';
+		if (file_transfer_task_list) return 'border-white/10';
 		const color = is_selected ? 'border-stone-450' : 'border-stone-550';
 		const factor = is_selected ? 1 : 1;
 		return `${color} group-hover:${get_shifted_color(color, factor * 100)} group-active:${get_shifted_color(color, factor * 150)}`;
 	}

 	function onclick(e: Event) {
-		if (not_interactable || !!file_transfer_task) return;
+		if (not_interactable || file_transfer_task_list) return;
 		select(selected_file_ids, file_primary_key, 'toggle');
 		e.stopPropagation();
 	}
@@ -184,7 +180,7 @@

 		if (loading_finished) {
 			out += 'bg-stone-500 text-white/30';
-		} else if (!!file_transfer_task) {
+		} else if (file_transfer_task_list) {
 			out += 'bg-stone-700 text-white/30';
 		} else {
 			out += get_selectable_color_classes(
@@ -200,7 +196,7 @@

 		if (not_interactable) {
 			out += ' rounded-lg';
-		} else if (!!file_transfer_task) {
+		} else if (file_transfer_task_list) {
 			out += ' rounded-r-lg';
 		} else {
 			out += ' rounded-r-lg cursor-pointer';
@@ -209,7 +205,16 @@
 		return out;
 	}

-	function get_total_percentage(ftt: FileTransferTask): number {
+	function get_total_percentage(ftt_list: FileTransferTask[]): number {
+		let percentage_sum = 0;
+		for (const ftt of ftt_list) {
+			percentage_sum += get_percentage(ftt);
+		}
+		return Math.round(percentage_sum / ftt_list.length);
+	}
+
+
+	function get_percentage(ftt: FileTransferTask): number {
 		let total_percentage: number;
 		if (ftt.data.type === 'upload') {
 			total_percentage = ftt.loading_data.percentage;
@@ -316,10 +321,10 @@
 		{onclick}
 		class="{get_main_classes()} relative transition-colors duration-200 gap-4 flex flex-row justify-between group w-full min-w-0"
 	>
-		{#if !!file_transfer_task}
+		{#if !!file_transfer_task_list}
 			<div
 				class="absolute pointer-events-none inset-y-0 left-0 transition-[width] duration-400 bg-stone-600 rounded-r-lg"
-				style={`width: ${get_total_percentage(file_transfer_task)}%;`}
+				style={`width: ${get_total_percentage(file_transfer_task_list)}%;`}
 			></div>
 		{/if}
 		<div class="flex flex-row gap-2 min-w-0 w-full z-10">
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { NumberSetting } from '$lib/ts/types';
-	import { ChevronDown, ChevronUp, Minus, Plus } from 'lucide-svelte';
+	import { ChevronDown, ChevronUp } from 'lucide-svelte';
 	import Button from './Button.svelte';

 	let {
@@ -36,7 +36,7 @@

 {#if content.open}
 	<div
-		class="absolute inset-0 backdrop-blur flex justify-center items-center z-50 {className}"
+		class="popup absolute inset-0 backdrop-blur flex justify-center items-center z-50 {className}"
 		transition:fade={{ duration: 100 }}
 	>
 		<div
@@ -84,9 +84,10 @@ export async function get_file_data(
    `;
 	const raw_response = await run_shell_command(ip, command);
 	if (!raw_response.ok || !raw_response.json) return null;
+	if (!raw_response.ok) return null;
+	if (handle_shell_error(ip, raw_response, command, true)) return null;
+
 	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
@@ -116,11 +117,10 @@ export async function get_file_data(
 export async function get_file_tree_data(ip: string, path: string): Promise<TreeElement[] | null> {
 	const command = `cd ".${path}" && tree -Js`;
 	const raw_response = await run_shell_command(ip, command);
+	if (!raw_response.ok) return null;
+	if (handle_shell_error(ip, raw_response, command, true)) return null;

-	if (!raw_response.ok || !raw_response.json) return null;
 	const json_response = raw_response.json as ShellCommandResponse;
-	if (handle_shell_error(ip, json_response, command, true)) return null;
-
 	const tree_element: TreeElement | null = JSON.parse(json_response.stdout.trim())[0] || null;

 	return tree_element?.contents || null;
@@ -130,9 +130,8 @@ 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;
-	const json_response = raw_response.json as ShellCommandResponse;
-	handle_shell_error(ip, json_response, command, true);
+	if (!raw_response.ok) return;
+	handle_shell_error(ip, raw_response, command, true);
 }

 export async function rename_file(
@@ -144,9 +143,8 @@ export async function rename_file(
 	const command: string = `cd ".${path}" && mv "${old_file_name}" "${new_file_name}"`;

 	const raw_response = await run_shell_command(ip, command);
-	if (!raw_response.ok || !raw_response.json) return;
-	const json_response = raw_response.json as ShellCommandResponse;
-	handle_shell_error(ip, json_response, command, true);
+	if (!raw_response.ok) return;
+	handle_shell_error(ip, raw_response, command, true);
 }

 export async function delete_files(
@@ -159,9 +157,8 @@ export async function delete_files(
 		command += ` && rm -r "${file_name}"`;
 	}
 	const raw_response = await run_shell_command(ip, command);
-	if (!raw_response.ok || !raw_response.json) return;
-	const json_response = raw_response.json as ShellCommandResponse;
-	handle_shell_error(ip, json_response, command, true);
+	if (!raw_response.ok) return;
+	handle_shell_error(ip, raw_response, command, true);
 }

 export async function show_blackscreen(ip: string): Promise<void> {
@@ -186,15 +183,21 @@ export async function get_thumbnail_blob(ip: string, path_to_file: string): Prom
 	return raw_response.blob;
 }

-export async function ping_ip(ip: string): Promise<DisplayStatus> {
+export async function ping_ip(ip: string): Promise<{ status: DisplayStatus; version?: string }> {
 	const raw_response = await request_control(`/ping?ip=${ip}`, { method: 'GET' });
-	if (!raw_response.ok || !raw_response.json) return null;
+	if (!raw_response.ok || !raw_response.json) return { status: null };

-	const status = raw_response.json.status;
-	if (typeof status === 'string') {
-		return to_display_status(status);
+	const raw_status = raw_response.json.status;
+	if (typeof raw_status === 'string') {
+		const status = to_display_status(raw_status);
+		const version = raw_response.json.version;
+		if (typeof version === 'string') {
+			return { status, version };
+		} else {
+			return { status };
+		}
 	}
-	return null;
+	return { status: null };
 }

 async function request_display(
@@ -282,11 +285,21 @@ async function request(

 function handle_shell_error(
 	ip: string,
-	shell_response: ShellCommandResponse,
+	response: RequestResponse,
 	shell_command: string,
-	command_includs_cd: boolean
+	command_includs_cd: boolean,
+	response_type: 'json' | 'blob' = 'json'
 ): boolean {
-	if (shell_response.exitCode !== 0) {
+	if (
+		(response_type === 'json' && !response.json) ||
+		(response_type === 'blob' && !response.blob)
+	) {
+		const error_string = `Did not receive ${response_type}: ${JSON.stringify(response)}`;
+		console.error(error_string);
+		notifications.push('error', `Fehler in API-Shell`, `${ip}\n${shell_command}\n${error_string}`);
+		return true;
+	} else if (response.json && response.json.exitCode !== 0) {
+		const shell_response = response.json as ShellCommandResponse;
 		if (
 			command_includs_cd &&
 			shell_response.stderr &&
@@ -319,8 +332,12 @@ async function run_shell_command(ip: string, command: string): Promise<RequestRe
 	return await request_display(ip, '/shellCommand', options);
 }

-export async function shutdown(ip: string): Promise<RequestResponse> {
-	return await run_shell_command(ip, 'xfce4-session-logout --halt');
+export async function shutdown(ip: string): Promise<boolean> {
+	const command = 'xfce4-session-logout --halt';
+	const raw_response = await run_shell_command(ip, command);
+	if (!raw_response.ok) return false;
+	if (handle_shell_error(ip, raw_response, command, true)) return false;
+	return true;
 }

 export async function startup(mac: string): Promise<RequestResponse> {
@@ -28,12 +28,23 @@ const START_LOADING_DATA = {
 	seconds_until_finish: -1
 };

-export const file_transfer_tasks: Writable<Record<string, FileTransferTask>> = writable<
-	Record<string, FileTransferTask>
+export const file_transfer_tasks: Writable<Record<string, FileTransferTask[]>> = writable<
+	Record<string, FileTransferTask[]>
 >({});

 let is_processing: boolean = false;

+function add_file_transfer_task(file_primary_key: string, new_task: FileTransferTask) {
+	file_transfer_tasks.update((tasks) => {
+		if (Object.hasOwn(tasks, file_primary_key)) {
+			tasks[file_primary_key].push(new_task);
+			return tasks;
+		} else {
+			return { ...tasks, [file_primary_key]: [new_task] };
+		}
+	});
+}
+
 export async function add_upload(
 	file_list: FileList,
 	selected_display_ids: string[],
@@ -59,7 +70,7 @@ export async function add_upload(
 		};
 		const file_primary_key = get_file_primary_key(db_file);

-		if (Object.prototype.hasOwnProperty.call(file_transfer_tasks, file_primary_key))
+		if (Object.hasOwn(file_transfer_tasks, file_primary_key))
 			return show_already_in_tasks_error(db_file, 'upload'); // file is already in task

 		await db.files.put(db_file);
@@ -89,10 +100,7 @@ export async function add_upload(
 				loading_data: START_LOADING_DATA,
 				bytes_total: file.size
 			};
-			file_transfer_tasks.update((tasks) => ({
-				...tasks,
-				[file_primary_key]: new_task
-			}));
+			add_file_transfer_task(file_primary_key, new_task);
 		});

 		await Promise.all(upload_task_promises);
@@ -146,10 +154,7 @@ export async function add_sync_recursively(
 		bytes_total: file_data.file.size
 	};

-	file_transfer_tasks.update((tasks) => ({
-		...tasks,
-		[selected_file_id]: new_task
-	}));
+	add_file_transfer_task(selected_file_id, new_task);

 	const display_ids_without_file = file_data.short_displays_without_file.map((d) => d.id);
 	const new_fods: FileOnDisplay[] = display_ids_without_file.map((display_id) => ({
@@ -230,15 +235,19 @@ function generate_valid_file_name(original_file_name: string, used_file_names: s
 	return name;
 }

-async function upload(file_primary_key: string, task: FileTransferTask): Promise<void> {
+async function upload(
+	file_primary_key: string,
+	task: FileTransferTask,
+	list_index: number
+): Promise<void> {
 	const task_data = task.data;
 	if (task_data.type !== 'upload' || !task_data.file)
 		return console.warn('Task cancelled: wrong task type:', task);

-	await upload_file_via_xhr(file_primary_key, task, task_data.file);
+	await upload_file_via_xhr(file_primary_key, list_index, task, task_data.file);
 }

-export async function sync(file_primary_key: string, task: FileTransferTask) {
+export async function sync(file_primary_key: string, task: FileTransferTask, list_index: number) {
 	if (task.data.type !== 'sync') return console.warn('Task cancelled: wrong task type:', task);

 	const hasOPFS =
@@ -273,18 +282,24 @@ export async function sync(file_primary_key: string, task: FileTransferTask) {
 			if (done) break;
 			if (!value) continue;

-			update_current_loading_data(file_primary_key, value.byteLength, start_time);
+			update_current_loading_data(file_primary_key, list_index, value.byteLength, start_time);
 			await writable.write(value);
 		}
 		await writable.close();

-		finish_loading_data(file_primary_key);
+		finish_loading_data(file_primary_key, list_index);

 		// 02 - send downloaded file to every destination_display
 		const temp_file = await file_handle.getFile();

 		for (const current_short_display of task.data.destination_display_data) {
-			await upload_file_via_xhr(file_primary_key, task, temp_file, current_short_display.display);
+			await upload_file_via_xhr(
+				file_primary_key,
+				list_index,
+				task,
+				temp_file,
+				current_short_display.display
+			);
 		}

 		await dir.removeEntry(temp_name);
@@ -292,7 +307,11 @@ export async function sync(file_primary_key: string, task: FileTransferTask) {
 		// open file, if required
 		if (task.data.open_file_afterwards_on_display_ids.length !== 0) {
 			const path_to_file = task.path + task.file_name;
-			await run_on_all_selected_displays((d) => open_file(d.ip, path_to_file), true, task.data.open_file_afterwards_on_display_ids);
+			await run_on_all_selected_displays(
+				(d) => open_file(d.ip, path_to_file),
+				true,
+				task.data.open_file_afterwards_on_display_ids
+			);
 		}
 	} catch (e) {
 		show_general_error(file_primary_key, task, String(e));
@@ -336,24 +355,37 @@ async function start_task_loop() {
 	while (Object.keys(get(file_transfer_tasks)).length > 0) {
 		const tasks = get(file_transfer_tasks);
 		const current_file_id = Object.keys(tasks)[0];
-		const current_task = tasks[current_file_id];
-		if (current_task.data.type === 'upload') {
-			await upload(current_file_id, current_task);
-		} else if (current_task.data.type === 'sync') {
-			await sync(current_file_id, current_task);
-		}
+		const current_task_list = tasks[current_file_id];

-		file_transfer_tasks.update((all_tasks) => {
-			const next = { ...all_tasks };
-			delete next[current_file_id];
-			return next;
-		});
+		for (const [list_index, current_task] of current_task_list.entries()) {
+			if (current_task.data.type === 'upload') {
+				await upload(current_file_id, current_task, list_index);
+			} else if (current_task.data.type === 'sync') {
+				await sync(current_file_id, current_task, list_index);
+			}
+			delete_current_task_if_needed(current_file_id);
+		}
 	}
 	is_processing = false;
 }

+function delete_current_task_if_needed(current_file_id: string) {
+	file_transfer_tasks.update((all_tasks) => {
+		const next = { ...all_tasks };
+		const current_tasks = next[current_file_id];
+		if (current_tasks.length !== 1) {
+			if (current_tasks.find((t) => t.loading_data.percentage !== 100)) {
+				return next; // not all tasks are finished -> do nothing
+			}
+		}
+		delete next[current_file_id];
+		return next;
+	});
+}
+
 async function upload_file_via_xhr(
 	file_primary_key: string,
+	list_index: number,
 	task: FileTransferTask,
 	current_file: File,
 	destination_short_display: ShortDisplay | null = null
@@ -373,6 +405,7 @@ async function upload_file_via_xhr(
 			const apply = async () => {
 				update_current_loading_data(
 					file_primary_key,
+					list_index,
 					e.loaded,
 					start_time,
 					destination_short_display ? destination_short_display.id : null
@@ -392,6 +425,7 @@ async function upload_file_via_xhr(
 					// set loading_data to 100%
 					finish_loading_data(
 						file_primary_key,
+						list_index,
 						destination_short_display ? destination_short_display.id : null
 					);
 					// Generate Thumbnail if not done already
@@ -416,38 +450,43 @@ async function upload_file_via_xhr(

 function finish_loading_data(
 	file_primary_key: string,
+	list_index: number,
 	destination_display_id: string | null = null
 ) {
 	file_transfer_tasks.update((tasks) => {
-		const task = tasks[file_primary_key];
 		const current_loading_data = {
 			percentage: 100,
 			bytes_per_second: 0,
 			seconds_until_finish: 0
 		};
+		const new_task_list = tasks[file_primary_key].map((task, index) =>
+			index === list_index
+				? get_updated_task(current_loading_data, destination_display_id, task)
+				: task
+		);

 		return {
 			...tasks,
-			[file_primary_key]: get_updated_task(current_loading_data, destination_display_id, task)
+			[file_primary_key]: new_task_list
 		};
 	});
 }

 function update_current_loading_data(
 	file_primary_key: string,
+	list_index: number,
 	current_bytes: number,
 	start_time: Date,
 	destination_display_id: string | null = null
 ) {
 	file_transfer_tasks.update((tasks) => {
-		const task = tasks[file_primary_key];
+		const task = tasks[file_primary_key][list_index];
 		if (!task) return tasks;

 		const current_percentage = Math.min(
 			task.bytes_total > 0 ? Math.round((current_bytes / task.bytes_total) * 100) : 1,
 			99
 		);
-
 		const prognosed_data = get_prognosed_data(start_time, current_bytes, task.bytes_total);

 		const current_loading_data: FileLoadingData = {
@@ -456,9 +495,15 @@ function update_current_loading_data(
 			seconds_until_finish: prognosed_data.seconds_until_finish
 		};

+		const new_task_list = tasks[file_primary_key].map((task, index) =>
+			index === list_index
+				? get_updated_task(current_loading_data, destination_display_id, task)
+				: task
+		);
+
 		return {
 			...tasks,
-			[file_primary_key]: get_updated_task(current_loading_data, destination_display_id, task)
+			[file_primary_key]: new_task_list
 		};
 	});
 }
@@ -1,8 +1,8 @@
 import { screenshot_loop } from './stores/displays';
 import { ping_ip } from './api_handler';
 import type { Display, DisplayStatus } from './types';
-import { update_folder_elements_recursively } from './stores/files';
 import { db } from './database';
+import { update_changed_directories } from './stores/files';

 const update_display_status_interval_seconds = 20;
 const update_display_loading_status_interval_seconds = 2;
@@ -10,8 +10,6 @@ const update_display_loading_status_interval_seconds = 2;
 const loading_display_ids: string[] = [];

 export async function on_app_start() {
-	await db.files.clear();
-	await db.files_on_display.clear();
 	await db.displays
 		.toCollection()
 		.modify({ status: null, preview: { currently_updating: false, url: null } });
@@ -40,22 +38,28 @@ async function update_all_display_status(only_loading_displays: boolean) {
 }

 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) return null;
-	if (new_status !== display.status) {
+	const resp = await ping_ip(display.ip);
+	if (resp.version && display.version !== resp.version) {
+		display.version = resp.version;
+		await db.displays.put(display); // save
+	}
+	if (resp.status === null && display.status !== null) return null;
+	if (resp.status !== display.status) {
+		let run_on_display_start = false;
 		// status change
-		if (new_status === 'app_offline') {
+		if (resp.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 (resp.status === 'app_online') {
+				run_on_display_start = true;
 			}
 		}
-		display.status = new_status;
+		display.status = resp.status;
 		await db.displays.put(display); // save
+		if (run_on_display_start) await on_display_start(display);
 	}
-	return new_status;
+	return resp.status;
 }

 export function remove_display_from_loading_displays(display_id: string) {
@@ -66,6 +70,6 @@ export function remove_display_from_loading_displays(display_id: string) {
 }

 async function on_display_start(display: Display) {
-	await update_folder_elements_recursively(display, '/');
+	await update_changed_directories(display);
 	screenshot_loop(display.id);
 }
@@ -7,7 +7,7 @@ import {
 	type Inode,
 	type TreeElement
 } from '../types';
-import { get_display_by_id, selected_online_display_ids } from './displays';
+import { get_display_by_id, online_displays, selected_online_display_ids } from './displays';
 import { is_selected, select, selected_display_ids, selected_file_ids } from './select';
 import { create_path, get_file_data, get_file_tree_data } from '../api_handler';
 import { deactivate_old_thumbnail_urls, generate_thumbnail } from './thumbnails';
@@ -26,14 +26,12 @@ export async function change_file_path(new_path: string) {

 	deactivate_old_thumbnail_urls();

-	const displays = await db.displays.toArray();
-
-	for (const display of displays) {
+	for (const display of get(online_displays)) {
 		await update_changed_directories(display, new_path);
 	}
 }

-async function update_changed_directories(display: Display, path: string = '/') {
+export async function update_changed_directories(display: Display, path: string = '/') {
 	const changed_paths = await get_changed_directory_paths(display, path);
 	if (!changed_paths) return;
 	console.debug('Update file system from', display.name, ':', changed_paths);
@@ -239,7 +237,7 @@ async function get_recursive_changed_directory_paths(
 	return has_changed;
 }

-export async function update_folder_elements_recursively(
+async function update_folder_elements_recursively(
 	display: Display,
 	file_path: string = '/'
 ): Promise<void> {
@@ -96,6 +96,7 @@ export type Display = {
 	group_id: string;
 	name: string;
 	status: DisplayStatus;
+	version?: string;
 };

 export type DisplayGroup = {
@@ -127,8 +128,8 @@ export type MenuOption = {

 export type PopupContent = {
 	open: boolean;
-	snippet: Snippet<[any]> | Snippet<[]> | Snippet | null | any;
-	snippet_arg?: any;
+	snippet: Snippet<[string]> | Snippet<[]> | null;
+	snippet_arg?: string;
 	title?: string;
 	title_class?: string;
 	title_icon?: typeof X | null;
@@ -100,7 +100,7 @@ export function display_status_to_info(status: DisplayStatus): string {
 			return 'Lädt';
 		case 'host_offline':
 			return 'Offline';
-		case null:
+		default:
 			return '???';
 	}
 }
@@ -15,6 +15,7 @@
 </svelte:head>

 {#if !dev}
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html versionSplashScreen}
 {/if}

@@ -7,10 +7,8 @@
 		Trash2,
 		Menu,
 		ChevronDown,
-		icons,
 		SquareCheckBig,
 		Square,
-		X,
 		Info
 	} from 'lucide-svelte';
 	import Button from '$lib/components/Button.svelte';
@@ -37,6 +35,7 @@
 	import { preview_settings } from '$lib/ts/stores/ui_behavior';
 	import NumberSettingInput from '$lib/components/NumberSettingInput.svelte';
 	import { db } from '$lib/ts/database';
+	import version from './../../../../shared/version.txt?raw';

 	const ip_regex =
 		/^(?:(?:10|127)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)|192\.168\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)|172\.(?:1[6-9]|2\d|3[0-1])\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d))$/;
@@ -72,13 +71,13 @@
 		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) {
+		if (existing_display_id) {
 			display = await edit_display_data(existing_display_id, ip, mac, name);
 		} else {
-			const status = await ping_ip(text_inputs_valid.ip.value);
-			display = await add_display(ip, mac, name, status);
+			const resp = await ping_ip(text_inputs_valid.ip.value);
+			display = await add_display(ip, mac, name, resp.status);
 		}
-		if (!!display) {
+		if (display) {
 			await update_display_status(display);
 		}
 	}
@@ -178,8 +177,12 @@
 	};
 </script>

+<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
 {#snippet about_popup(_: string)}
 	<div class="px-2">
+		<p>
+			{version}
+		</p>
 		<h3 class="text-lg font-bold mt-4">Entwickler</h3>
 		<p>
 			<a target="_blank" class="link" href="https://github.com/programmer-44">E44</a>,
@@ -249,7 +252,7 @@
 		title="Anzeigename"
 		placeholder="z.B. Beamer vorne links"
 		is_valid_function={async (input: string) => {
-			if (!!existing_display_id) {
+			if (existing_display_id) {
 				if (input === (await get_display_by_id(existing_display_id))?.name)
 					return [true, 'Gültiger Name'];
 			}
@@ -279,11 +282,11 @@
 				className="px-4 gap-2"
 				bg="bg-stone-750"
 				click_function={async () => {
-					const status = await ping_ip(text_inputs_valid.ip.value);
+					const resp = await ping_ip(text_inputs_valid.ip.value);
 					notifications.push(
 						'info',
 						`Ping '${text_inputs_valid.ip.value}'`,
-						`Aktueller Zustand: ${display_status_to_info(status)}`
+						`Aktueller Zustand: ${display_status_to_info(resp.status)}`
 					);
 				}}><Radio /> Ping</Button
 			>
@@ -313,7 +316,7 @@
 		{/if}
 		<Button
 			disabled={!all_text_inputs_valid()}
-			className="{!!existing_display_id ? 'px-4' : 'pl-3 pr-4 gap-2'} font-bold"
+			className="{existing_display_id ? 'px-4' : 'pl-3 pr-4 gap-2'} font-bold"
 			bg="bg-stone-650"
 			click_function={async () => {
 				await finalize_add_edit_display(existing_display_id);
@@ -21,7 +21,6 @@
 		show_blackscreen,
 		shutdown,
 		startup,
-		show_html,
 		open_website
 	} from '$lib/ts/api_handler';
 	import {
@@ -35,6 +34,7 @@
 	import { liveQuery, type Observable } from 'dexie';
 	import TextInput from '$lib/components/TextInput.svelte';
 	import { add_to_keyboard_queue } from '$lib/ts/utils';
+	import { onMount } from 'svelte';

 	let all_display_states: Observable<'on' | 'off' | 'mixed'> | undefined = $state();
 	$effect(() => {
@@ -45,11 +45,16 @@
 	let popup_content: PopupContent = $state({
 		open: false,
 		snippet: null,
-		title: '',
+		title: ''
 	});

 	let current_text = $state('');

+	const key_pressed = $state({
+		ArrowRight: false,
+		ArrowLeft: false
+	});
+
 	function popup_close_function() {
 		popup_content.open = false;
 	}
@@ -80,7 +85,7 @@
 			snippet: website_popup,
 			title: 'Webseite Anzeigen',
 			window_class: 'w-xl',
-			title_icon: Globe,
+			title_icon: Globe
 		};
 	};

@@ -103,15 +108,19 @@
 			open: true,
 			snippet: ask_shutdown_popup,
 			title: 'Bildschirm Herunterfahren',
-			title_icon: PowerOff,
+			title_icon: PowerOff
 		};
 	}

 	async function shutdown_action() {
 		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', preview: { currently_updating: false, url: null} });
+		await run_on_all_selected_displays(async (d) => {
+			if (await shutdown(d.ip)) {
+				db.displays.update(d.id, {
+					status: 'app_offline',
+					preview: { currently_updating: false, url: null }
+				});
+			}
 		}, false);
 	}

@@ -135,7 +144,7 @@

 	function validate_website_url(url: string): [boolean, string] {
 		if (url === '') return [true, ''];
-		const regex = /^https?:\/\/[\w\-]+(\.[\w\-]+)+([\w\-\._~:/?#\[\]@!$&'\(\)\*\+,;=.])*/;
+		const regex = /^https?:\/\/[\w-]+(\.[\w-]+)+([\w\-._~:/?#[\]@!$&'()*+,;=.])*/;
 		if (regex.test(url)) {
 			return [true, ''];
 		}
@@ -144,10 +153,58 @@

 	async function send_website() {
 		popup_content.open = false;
-		await run_on_all_selected_displays((d) =>
-			open_website(d.ip, website_url)
-		);
+		await run_on_all_selected_displays((d) => open_website(d.ip, website_url));
 	}
+
+	function has_open_popup(): boolean {
+		return document.querySelector('.popup') !== null;
+	}
+
+	function handle_key(
+		event: KeyboardEvent,
+		key: 'ArrowRight' | 'ArrowLeft',
+		action: 'press' | 'release'
+	) {
+		if (event.key === key) {
+			const current_press_state: boolean = key_pressed[key];
+			if (
+				(action === 'press' && (current_press_state === true || has_open_popup())) ||
+				(action === 'release' && current_press_state === false)
+			)
+				return;
+
+			key_pressed[key] = !current_press_state;
+			add_to_keyboard_queue(async () => {
+				await run_on_all_selected_displays(
+					(d) => send_keyboard_input(d.ip, [{ key, action }]),
+					true
+				);
+			});
+		}
+	}
+
+	function add_remove_event_listeners(
+		add_remove_function: (type: string, listener: (e: KeyboardEvent) => void) => void
+	) {
+		const actions = {
+			keydown: 'press',
+			keyup: 'release'
+		} as const;
+		const keys = ['ArrowRight', 'ArrowLeft'] as const;
+
+		for (const [action_type, action_value] of Object.entries(actions)) {
+			for (const key of keys) {
+				add_remove_function(action_type, (e: KeyboardEvent) => handle_key(e, key, action_value));
+			}
+		}
+	}
+
+	onMount(() => {
+		add_remove_event_listeners(window.addEventListener);
+		return () => {
+			add_remove_event_listeners(window.removeEventListener);
+		};
+	});
 </script>

 {#snippet website_popup()}
@@ -186,11 +243,11 @@
 {/snippet}

 {#snippet send_keys_popup()}
-	<KeyInput {popup_close_function}/>
+	<KeyInput {popup_close_function} />
 {/snippet}

 {#snippet text_popup()}
-	<TipTapInput bind:text={current_text}/>
+	<TipTapInput bind:text={current_text} />
 {/snippet}

 <div class="grid grid-rows-[2.5rem_auto] bg-stone-800 rounded-2xl min-w-0">
@@ -203,15 +260,19 @@
 				<div class="flex flex-row gap-2 w-75 justify-normal">
 					<button
 						title="Vorherige Folie (Pfeil nach Links) [gedrückt halten möglich]"
-						class="px-9 bg-stone-700 {$selected_online_display_ids.length === 0
+						class="px-9 {key_pressed.ArrowLeft
+							? 'bg-stone-500'
+							: 'bg-stone-700'} {$selected_online_display_ids.length === 0
 							? 'text-stone-500 cursor-not-allowed'
 							: 'hover:bg-stone-600 active:bg-stone-500 cursor-pointer'} py-2 rounded-xl flex justify-center items-center transition-colors duration-200"
-						disabled={$selected_online_display_ids.length === 0}
+						disabled={$selected_online_display_ids.length === 0 || key_pressed.ArrowLeft}
 						onmousedown={() => {
 							add_to_keyboard_queue(async () => await send_single_key_press('ArrowLeft', 'press'));
 						}}
 						onmouseup={() => {
-							add_to_keyboard_queue(async () => await send_single_key_press('ArrowLeft', 'release'));
+							add_to_keyboard_queue(
+								async () => await send_single_key_press('ArrowLeft', 'release')
+							);
 						}}
 					>
 						<ArrowBigLeft />
@@ -219,15 +280,21 @@

 					<button
 						title="Nächste Folie (Pfeil nach Rechts) [gedrückt halten möglich]"
-						class="px-9 bg-stone-700 {$selected_online_display_ids.length === 0
-							? 'text-stone-500 cursor-not-allowed'
-							: 'hover:bg-stone-600 active:bg-stone-500 cursor-pointer'} py-2 rounded-xl flex justify-center items-center transition-colors duration-200"
-						disabled={$selected_online_display_ids.length === 0}
+						class="px-9 {key_pressed.ArrowRight
+							? 'bg-stone-500 cursor-not-allowed'
+							: `bg-stone-700 ${
+									$selected_online_display_ids.length === 0
+										? 'text-stone-500 cursor-not-allowed'
+										: 'hover:bg-stone-600 active:bg-stone-500 cursor-pointer'
+								}`}  py-2 rounded-xl flex justify-center items-center transition-colors duration-200"
+						disabled={$selected_online_display_ids.length === 0 || key_pressed.ArrowRight}
 						onmousedown={() => {
 							add_to_keyboard_queue(async () => await send_single_key_press('ArrowRight', 'press'));
 						}}
 						onmouseup={() => {
-							add_to_keyboard_queue(async () => await send_single_key_press('ArrowRight', 'release'));
+							add_to_keyboard_queue(
+								async () => await send_single_key_press('ArrowRight', 'release')
+							);
 						}}
 					>
 						<ArrowBigRight />
@@ -272,8 +339,7 @@
 				<div class="flex flex-col gap-2">
 					<Button
 						className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
-						disabled={$all_display_states === 'on' ||
-							$selected_display_ids.length === 0}
+						disabled={$all_display_states === 'on' || $selected_display_ids.length === 0}
 						click_function={startup_action}
 					>
 						<Power /> Bildschirm Hochfahren
@@ -281,8 +347,7 @@

 					<Button
 						className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
-						disabled={$all_display_states === 'off' ||
-							$selected_online_display_ids.length === 0}
+						disabled={$all_display_states === 'off' || $selected_online_display_ids.length === 0}
 						click_function={ask_shutdown}
 					>
 						<PowerOff /> Bildschirm Herunterfahren</Button
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { fade, scale } from 'svelte/transition';
+	import { fade } from 'svelte/transition';
 	import {
 		all_displays_of_group_selected,
 		get_display_by_id,
@@ -13,6 +13,7 @@
 		change_height,
 		current_height,
 		dnd_flip_duration_ms,
+		get_selectable_color_classes,
 		is_display_drag,
 		is_group_drag,
 		next_height_step_size,
@@ -21,16 +22,13 @@
 	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 { Menu, Pencil, PinOff, Trash2, VideoOff, ZoomIn, ZoomOut } from 'lucide-svelte';
+	import { History, Menu, Pencil, PinOff, Trash2, VideoOff, ZoomIn, ZoomOut } from 'lucide-svelte';
 	import { selected_display_ids } from '$lib/ts/stores/select';
 	import { dragHandleZone } from 'svelte-dnd-action';
 	import DisplayGroupObject from '../lib/components/DisplayGroupObject.svelte';
-	import { Pane, Splitpanes } from 'svelte-splitpanes';
+	import { Pane, Splitpanes, type IPaneSizingEvent } from 'svelte-splitpanes';
 	import HighlightedText from '$lib/components/HighlightedText.svelte';
 	import { liveQuery, type Observable } from 'dexie';
-	import { onMount } from 'svelte';
-	import { flip } from 'svelte/animate';
-	import { cubicOut } from 'svelte/easing';

 	let {
 		handle_display_deletion,
@@ -60,7 +58,7 @@
 	$effect(() => {
 		const d = $display_groups;
 		const sdi = $selected_display_ids;
-		all_groups_selected = liveQuery(() => all_selected(d || [], sdi));
+		all_groups_selected = liveQuery(() => d.length !== 0 && all_selected(d || [], sdi));
 	});

 	let last_pinned_pane_size: number = 45;
@@ -71,8 +69,13 @@
 		pinned_pane_size = 0;
 	}

-	function get_display_menu_options(display_id: string): MenuOption[] {
+	function get_display_menu_options(display_id: string, display_version: string|undefined): MenuOption[] {
 		return [
+			{
+				icon: History,
+				name: display_version ?? "Version unbekannt",
+				disabled: true,
+			},
 			{
 				icon: Pencil,
 				name: 'Bildschirm bearbeiten',
@@ -110,7 +113,7 @@
 		return true;
 	}

-	function handle_splitpane_resize(e: any) {
+	function handle_splitpane_resize(e: CustomEvent<IPaneSizingEvent[]>) {
 		if (e.detail[0].size === 0) {
 			$pinned_display_id = null;
 			pinned_pane_size = last_pinned_pane_size;
@@ -168,7 +171,7 @@
 									click_function={(e) => {
 										e.stopPropagation();
 									}}
-									menu_options={get_display_menu_options($pinned_display_id)}
+									menu_options={get_display_menu_options($pinned_display_id, $pinned_display?.version)}
 								>
 									<Menu />
 								</Button>
@@ -215,17 +218,28 @@
 					</span>
 					<div class="flex flex-row gap-1">
 						<button
-							class="min-w-40 px-4 rounded-xl cursor-pointer duration-200 transition-colors bg-stone-600"
+							disabled={$display_groups?.length === 0}
+							class="min-w-40 px-4 rounded-xl duration-200 transition-colors {$display_groups?.length ===
+				0
+					? 'text-stone-500 cursor-not-allowed'
+					: 'cursor-pointer'} {get_selectable_color_classes($all_groups_selected || false, {
+					bg: true,
+					hover: $display_groups?.length !== 0,
+					active: $display_groups?.length !== 0,
+					text: true
+				})}"
 							onclick={async () => await toggle_all_selected_displays($display_groups)}
 						>
 							<span>{$all_groups_selected || false ? 'Alle Abwählen' : 'Alle Auswählen'}</span>
 						</button>
+
+
 						<div class="flex flex-row">
 							<Button
 								title="Bildschirme größer darstellen"
 								className="aspect-square p-1.5! pr-1! rounded-r-none"
 								bg="bg-stone-600"
-								disabled={!Boolean(next_height_step_size('display', $current_height, 1))}
+								disabled={!next_height_step_size('display', $current_height, 1)}
 								click_function={() => {
 									change_height('display', 1);
 								}}
@@ -236,7 +250,7 @@
 								title="Bildschirme kleiner darstellen"
 								className="aspect-square p-1.5! pl-1! rounded-l-none"
 								bg="bg-stone-600"
-								disabled={!Boolean(next_height_step_size('display', $current_height, -1))}
+								disabled={!next_height_step_size('display', $current_height, -1)}
 								click_function={() => {
 									change_height('display', -1);
 								}}
@@ -11,7 +11,12 @@
 		ZoomIn,
 		ZoomOut
 	} from 'lucide-svelte';
-	import { change_height, current_height, next_height_step_size } from '$lib/ts/stores/ui_behavior';
+	import {
+		change_height,
+		current_height,
+		get_selectable_color_classes,
+		next_height_step_size
+	} from '$lib/ts/stores/ui_behavior';
 	import Button from '$lib/components/Button.svelte';
 	import PathBar from './PathBar.svelte';
 	import { select, selected_display_ids, selected_file_ids } from '$lib/ts/stores/select';
@@ -39,6 +44,7 @@
 	import { liveQuery, type Observable } from 'dexie';
 	import { download_file, add_upload, add_sync_recursively } from '$lib/ts/file_transfer_handler';
 	import { selected_online_display_ids } from '$lib/ts/stores/displays';
+	import FileDropZone from '$lib/components/FileDropZone.svelte';

 	let current_name: string = $state('');
 	let current_valid: boolean = $state(false);
@@ -49,6 +55,16 @@
 		const s = $selected_file_ids;
 		selected_files = liveQuery(() => get_selected_files(s));
 	});
+	let all_files_selected: boolean = $state(false);
+	$effect(() => {
+		const fe = $current_folder_elements;
+		const sfe_id = $selected_file_ids;
+		if (fe && sfe_id && fe.length !== 0) {
+			all_files_selected =
+				fe.length === sfe_id.length &&
+				!fe.find((inode) => !sfe_id.includes(get_file_primary_key(inode)));
+		}
+	});
 	let current_folder_elements: Observable<Inode[]> | undefined = $state();
 	$effect(() => {
 		const path = $current_file_path,
@@ -59,9 +75,10 @@
 	$effect(() => {
 		const s = $selected_file_ids;
 		one_file_selected = liveQuery(async () => {
+			if (s.length !== 1) return false;
 			const inode = await get_file_by_id(s[0]);
 			if (!inode) return false;
-			return s.length === 1 && !is_folder(inode);
+			return !is_folder(inode);
 		});
 	});

@@ -78,7 +95,7 @@
 			const results = await Promise.all(selected_file_ids.map((id) => get_file_by_id(id)));
 			return results.filter((element) => element !== null);
 		} catch (e: unknown) {
-			console.error('Error on generating selected_files');
+			console.error('Error on generating selected_files', e);
 			return [];
 		}
 	}
@@ -145,6 +162,18 @@
 		};
 	};

+	async function toggle_all_selected_files(current_files: Inode[]) {
+		let action: 'select' | 'deselect';
+		if (all_files_selected === false) {
+			action = 'select';
+		} else {
+			action = 'deselect';
+		}
+		for (const file of current_files) {
+			await select(selected_file_ids, get_file_primary_key(file), action);
+		}
+	}
+
 	async function sync_selected_files(
 		current_selected_file_ids: string[],
 		selected_display_ids: string[],
@@ -172,7 +201,7 @@
 			> existiert nicht auf {display_names_where_path_does_not_exist.length === 1
 				? 'dem Bildschirm'
 				: 'den Bildschirmen'}
-			{#each display_names_where_path_does_not_exist as display_name, i}
+			{#each display_names_where_path_does_not_exist as display_name, i (i)}
 				{#if i !== 0}
 					,
 				{/if}
@@ -247,7 +276,7 @@
 			>{`${$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-y-auto h-full min-h-0 grow-0">
-			{#each $selected_files || [] as file}
+			{#each $selected_files || [] as file, i (i)}
 				<InodeElement {file} not_interactable />
 			{/each}
 		</div>
@@ -284,34 +313,51 @@
 	}}
 />

-<div class="bg-stone-800 h-full rounded-2xl grid grid-rows-[2.5rem_1fr] min-h-0">
+<div class="bg-stone-800 size-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
 		</span>
-		<div class="flex flex-row">
-			<Button
-				title="Dateien größer darstellen"
-				className="aspect-square p-1.5! pr-1! rounded-r-none"
-				bg="bg-stone-600"
-				disabled={!Boolean(next_height_step_size('file', $current_height, 1))}
-				click_function={() => {
-					change_height('file', 1);
-				}}
+		<div class="flex flex-row gap-1">
+			<button
+				disabled={$current_folder_elements?.length === 0}
+				class="min-w-40 px-4 rounded-xl duration-200 transition-colors {$current_folder_elements?.length ===
+				0
+					? 'text-stone-500 cursor-not-allowed'
+					: 'cursor-pointer'} {get_selectable_color_classes(all_files_selected, {
+					bg: true,
+					hover: $current_folder_elements?.length !== 0,
+					active: $current_folder_elements?.length !== 0,
+					text: true
+				})}"
+				onclick={async () => await toggle_all_selected_files($current_folder_elements ?? [])}
 			>
-				<ZoomIn class="size-full" />
-			</Button>
-			<Button
-				title="Dateien kleiner darstellen"
-				className="aspect-square p-1.5! pl-1! rounded-l-none"
-				bg="bg-stone-600"
-				disabled={!Boolean(next_height_step_size('file', $current_height, -1))}
-				click_function={() => {
-					change_height('file', -1);
-				}}
-			>
-				<ZoomOut class="size-full" />
-			</Button>
+				<span>{all_files_selected ? 'Alle Abwählen' : 'Alle Auswählen'}</span>
+			</button>
+			<div class="flex flex-row">
+				<Button
+					title="Dateien größer darstellen"
+					className="aspect-square p-1.5! pr-1! rounded-r-none"
+					bg="bg-stone-600"
+					disabled={!next_height_step_size('file', $current_height, 1)}
+					click_function={() => {
+						change_height('file', 1);
+					}}
+				>
+					<ZoomIn class="size-full" />
+				</Button>
+				<Button
+					title="Dateien kleiner darstellen"
+					className="aspect-square p-1.5! pl-1! rounded-l-none"
+					bg="bg-stone-600"
+					disabled={!next_height_step_size('file', $current_height, -1)}
+					click_function={() => {
+						change_height('file', -1);
+					}}
+				>
+					<ZoomOut class="size-full" />
+				</Button>
+			</div>
 		</div>
 	</div>
 	<div class="flex flex-col gap-2 p-2 overflow-hidden relative rounded-b-2xl">
@@ -387,7 +433,11 @@
 				</div>
 			</div>
 		</div>
-		<div class="min-h-0 h-full overflow-y-auto overflow-x-hidden bg-stone-750 rounded-xl">
+
+		<div
+			class="min-h-0 size-full overflow-y-auto overflow-x-hidden bg-stone-750 rounded-xl relative"
+		>
+			<FileDropZone className="rounded-xl size-full" />
 			<div class="flex flex-col gap-2 p-2 min-h-0 max-w-full">
 				{#if $selected_online_display_ids.length === 0}
 					<span class="text-stone-450 px-10 py-6 leading-relaxed text-center">
@@ -4,7 +4,7 @@
 	import { fade } from 'svelte/transition';
 	import { run_on_all_selected_displays } from '$lib/ts/stores/displays';
 	import { send_keyboard_input } from '$lib/ts/api_handler';
-	import { ArrowDownToLine, ArrowUpFromLine, Grid2x2, Grid2X2, Option } from 'lucide-svelte';
+	import { ArrowDownToLine, ArrowUpFromLine, Grid2x2, Option } from 'lucide-svelte';
 	import Button from '$lib/components/Button.svelte';
 	import { onDestroy } from 'svelte';
 	import { add_to_keyboard_queue } from '$lib/ts/utils';
@@ -9,7 +9,6 @@
 		Highlighter,
 		Italic,
 		PaintBucket,
-		QrCode,
 		Strikethrough
 	} from 'lucide-svelte';
 	import Button from '$lib/components/Button.svelte';
@@ -149,7 +148,7 @@
 		editor_state.editor?.destroy();
 	});
 </script>
-
+
 {#each Object.values(color_states) as color_state, i (i)}
 	<input type="color" bind:this={color_state.el} bind:value={color_state.value} class="hidden" />
 {/each}
@@ -163,9 +162,9 @@
 	</div>

 	<div class="flex flex-col gap-2 justify-between">
-		<div class="flex flex-col gap-2">
+		<div class="flex flex-col gap-2">
 			{#each text_edit_options as edit_row, i (i)}
-				<div class="flex flex-row gap-1">
+				<div class="flex flex-row gap-1">
 					{#each edit_row as option, j (j)}
 						<div class="flex flex-row">
 							<button
@@ -1,6 +1,7 @@
 package main

 import (
+	"encoding/json"
 	"log/slog"
 	"net"
 	"net/http"
@@ -83,18 +84,40 @@ func pingRoute(ctx echo.Context) error {
 		return ctx.JSON(http.StatusOK, PingResponse{Status: "host_offline"})
 	}

-	conn, err := net.DialTimeout("tcp", ip+":1323", 5*time.Second)
+	client := http.Client{
+		Timeout: 5 * time.Second,
+	}
+
+	resp, err := client.Get("http://" + ip + ":1323/api/ping")
 	if err != nil {
 		return ctx.JSON(http.StatusOK, PingResponse{Status: "app_offline"})
 	}
-	conn.Close()
+	defer resp.Body.Close()
+	if resp.StatusCode != http.StatusOK {
+		return ctx.JSON(http.StatusOK, PingResponse{Status: "app_offline"})
+	}

-	return ctx.JSON(http.StatusOK, PingResponse{Status: "app_online"})
+	var appPing AppPingResponse
+	if err := json.NewDecoder(resp.Body).Decode(&appPing); err != nil {
+		return ctx.JSON(http.StatusOK, PingResponse{
+			Status: "app_offline",
+		})
+	}
+
+	return ctx.JSON(http.StatusOK, PingResponse{
+		Status:  "app_online",
+		Version: appPing.Version,
+	})
+}
+
+type AppPingResponse struct {
+	Version string `json:"version"`
 }

 type PingResponse struct {
-	Status string `json:"status"`
-	Error  string `json:"error"`
+	Status  string `json:"status"`
+	Version string `json:"version"`
+	Error   string `json:"error"`
 }

 type WakeOnLanRequest struct {
@@ -24,6 +24,7 @@ func openBrowserWindow(url string) error {
 	args := []string{
 		fmt.Sprintf("--app=%s", url),
 		fmt.Sprintf("--user-data-dir=%s", browserProfileDirPath),
+		"--disable-features=Translate",
 	}

 	errs := []string{}
@@ -0,0 +1,7 @@
+package pdfjs
+
+import "embed"
+
+//go:embed node_modules/pdfjs-dist/build/pdf.min.mjs
+//go:embed node_modules/pdfjs-dist/build/pdf.worker.min.mjs
+var Files embed.FS
@@ -0,0 +1,10 @@
+{
+  "nodeModulesDir": "manual",
+  "nodeModulesLinker": "hoisted",
+  "imports": {
+    "pdfjs-dist": "npm:pdfjs-dist@6.0.227"
+  },
+  "tasks": {
+    "install": "deno install --frozen"
+  }
+}
@@ -0,0 +1,90 @@
+{
+  "version": "5",
+  "specifiers": {
+    "npm:pdfjs-dist@6.0.227": "6.0.227"
+  },
+  "npm": {
+    "@napi-rs/canvas-android-arm64@1.0.0": {
+      "integrity": "sha512-3hNKJObUK7JsCF9aJlVCs1J0/KE/gGfZNeK8MO1ge6bB3aicr5walGme9t9No1f/oyk9GgvdAT/rjSdsx3gbIw==",
+      "os": ["android"],
+      "cpu": ["arm64"]
+    },
+    "@napi-rs/canvas-darwin-arm64@1.0.0": {
+      "integrity": "sha512-ZIja19/BiGz2puhki+WUYSRriwFeFJ8Mi9eK3hZdSS85w4Y60cuEAJVhMCfKwswQkKkUtrnzdKMBuO7TupvexA==",
+      "os": ["darwin"],
+      "cpu": ["arm64"]
+    },
+    "@napi-rs/canvas-darwin-x64@1.0.0": {
+      "integrity": "sha512-hImggWc82jqZVpEsFR9S7PE9OQYjq/H/D7vwCGB6X1jRH+UVBP1+1niJTPBOat1B154T6GKK7/kcFtoWgjgFzQ==",
+      "os": ["darwin"],
+      "cpu": ["x64"]
+    },
+    "@napi-rs/canvas-linux-arm-gnueabihf@1.0.0": {
+      "integrity": "sha512-hlJRy6d+kWLKVOG/+1rEvNQVURZ0DxxRPJsLmEWwhwiXZUJc0BF5o9esALHSEP4CoJK4wChRtj3hnyBgVx2oWA==",
+      "os": ["linux"],
+      "cpu": ["arm"]
+    },
+    "@napi-rs/canvas-linux-arm64-gnu@1.0.0": {
+      "integrity": "sha512-5Hru4T3RXkosRQafcjelv7AUzw9mXqmGYsxnzeDDOWveFCJyEPMSJltvGCM+jfH98seOCbfwm9KyFg6Jm5FhAA==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@napi-rs/canvas-linux-arm64-musl@1.0.0": {
+      "integrity": "sha512-LTUl9jS8WsLSUGaxQZKQkxfluOJRpgvBuxxdM4pYcjib+di8AU4OzQc6+L6SzGMLcKc9H0RAjojRatBhTMqYdg==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@napi-rs/canvas-linux-riscv64-gnu@1.0.0": {
+      "integrity": "sha512-Iz931SAZf+WVDzpjk52Q3ffW3zw0YflFwEZMgs036Wfu1kX/LrwT9wGjsuSqyduqefUkl91/vTdAjn8hQu5ezA==",
+      "os": ["linux"],
+      "cpu": ["riscv64"]
+    },
+    "@napi-rs/canvas-linux-x64-gnu@1.0.0": {
+      "integrity": "sha512-pFEQ5eFK4JusgN1K6KkO9DKP/Hi1WMJOkF8Ch03/khTc4bFbCKkCCsJG4YcOMOW9bI4XbT2/eMAWxhO0xaWgPA==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@napi-rs/canvas-linux-x64-musl@1.0.0": {
+      "integrity": "sha512-jnvr8NrLHiZ3NCiOKWqDbkI4Ah+QDrqtZ+sddPZBltEb1mQ2coSvCSJYfict+oAwcm0c970oTmVySpjKP/lnaA==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@napi-rs/canvas-win32-arm64-msvc@1.0.0": {
+      "integrity": "sha512-y2j9/Gfd5joqiqxdP/L1smqjQ+uAx3C4N0EC7bDHrnZEEH8ToM/OC5p3uHvtj4Lq591aHj+ArL01UDLNwT5HgQ==",
+      "os": ["win32"],
+      "cpu": ["arm64"]
+    },
+    "@napi-rs/canvas-win32-x64-msvc@1.0.0": {
+      "integrity": "sha512-qwdhh9N6Gge/hC4pL9S1tQp0iKwhSl/dYjg7+RGp9k26iRGRi5MqqUyKGOXIWli0zOcuy5Y2wIH/jk2ry6i/jA==",
+      "os": ["win32"],
+      "cpu": ["x64"]
+    },
+    "@napi-rs/canvas@1.0.0": {
+      "integrity": "sha512-Jqxcy1XOIqj+lH9sl1GT+il6GR3uQv13vI2mrwubP3uT8Olak2ClDrK2RnxlQKjwv8BRr4b3ug0YR7c6hBX8wg==",
+      "optionalDependencies": [
+        "@napi-rs/canvas-android-arm64",
+        "@napi-rs/canvas-darwin-arm64",
+        "@napi-rs/canvas-darwin-x64",
+        "@napi-rs/canvas-linux-arm-gnueabihf",
+        "@napi-rs/canvas-linux-arm64-gnu",
+        "@napi-rs/canvas-linux-arm64-musl",
+        "@napi-rs/canvas-linux-riscv64-gnu",
+        "@napi-rs/canvas-linux-x64-gnu",
+        "@napi-rs/canvas-linux-x64-musl",
+        "@napi-rs/canvas-win32-arm64-msvc",
+        "@napi-rs/canvas-win32-x64-msvc"
+      ]
+    },
+    "pdfjs-dist@6.0.227": {
+      "integrity": "sha512-/P6M4SXw+70waMVLUM7rdRtvo+dEzqE1t6W/zQNvBETo2MaRa5rrvCcAYdfWGiUzadTgM0lJmRApUrW0d9zgKg==",
+      "optionalDependencies": [
+        "@napi-rs/canvas"
+      ]
+    }
+  },
+  "workspace": {
+    "dependencies": [
+      "npm:pdfjs-dist@6.0.227"
+    ]
+  }
+}
@@ -1,5 +1,6 @@
 gen:
    go tool templ generate
+    cd internal/pdfjs && deno install --frozen

 dev: gen
    go run *.go
@@ -17,7 +17,7 @@ import (
 )

 func TakeScreenshot() (string, error) {
-	tempFilePath := filepath.Join(os.TempDir(), fmt.Sprintf("screenshot_%d.png", time.Now().Unix()))
+	tempFilePath := filepath.Join(os.TempDir(), fmt.Sprintf("screenshot_%d.jpg", time.Now().Unix()))

 	cmds := []*exec.Cmd{
 		exec.Command("gnome-screenshot", "-f", tempFilePath),
@@ -1,5 +1,7 @@
 package pkg

+import "strings"
+
 templ basicTemplate() {
 	<!DOCTYPE html>
 	<html lang="en">
@@ -115,6 +117,166 @@ templ deviceInfoTemplate(ip string, mac string, showQR bool) {
 	}
 }

+templ pdfTemplate(path string, serverOrigin string) {
+	@basicTemplate() {
+		<base href={ serverOrigin + "/" }/>
+
+		<div
+			id="pdf"
+			data-src={ "api/file/" + strings.Split(path, "/.local/share/plg-mudics/display")[1] }
+			data-lib="static/pdfjs/pdf.min.mjs"
+			data-worker="static/pdfjs/pdf.worker.min.mjs"
+		></div>
+
+		<style>
+			html,body,#pdf {
+				margin:0;
+				width:100%;
+				height:100%;
+				overflow:hidden;
+				background:#000;
+			}
+			#pdf {
+				display:grid;
+				place-items:center;
+			}
+			#pdf canvas {
+				grid-area:1/1;
+				display:block;
+			}
+		</style>
+
+		<script type="module">
+			const host=document.querySelector("#pdf");
+			const resolve=x=>new URL(x,document.baseURI).href;
+
+			const P=await import(resolve(host.dataset.lib));
+			P.GlobalWorkerOptions.workerSrc=resolve(host.dataset.worker);
+
+			const pdf=await P.getDocument({
+				url:resolve(host.dataset.src),
+				useWasm:false
+			}).promise;
+
+			const cache=new Map();
+			let currentPage=1;
+			let wantedPage=1;
+			let requestNumber=0;
+
+			function renderPage(number) {
+				if(cache.has(number)) return cache.get(number);
+
+				const promise=(async()=>{
+					const page=await pdf.getPage(number);
+					const original=page.getViewport({scale:1});
+					const scale=Math.min(
+						innerWidth/original.width,
+						innerHeight/original.height
+					);
+
+					// Use 1 on old hardware. Raise to 1.5 for sharper output.
+					const pixelRatio=1;
+					const viewport=page.getViewport({
+						scale:scale*pixelRatio
+					});
+
+					const canvas=document.createElement("canvas");
+					canvas.width=Math.ceil(viewport.width);
+					canvas.height=Math.ceil(viewport.height);
+					canvas.style.width=`${viewport.width/pixelRatio}px`;
+					canvas.style.height=`${viewport.height/pixelRatio}px`;
+
+					const task=page.render({
+						canvasContext:canvas.getContext("2d"),
+						viewport
+					});
+
+					await task.promise;
+					return canvas;
+				})().catch(error=>{
+					cache.delete(number);
+					throw error;
+				});
+
+				cache.set(number,promise);
+				return promise;
+			}
+
+			async function show(number) {
+				wantedPage=Math.max(1,Math.min(pdf.numPages,number));
+				const request=++requestNumber;
+				const canvas=await renderPage(wantedPage);
+
+				// Ignore an obsolete result after multiple fast key presses.
+				if(request!==requestNumber) return;
+
+				// The new canvas is already completely rendered.
+				host.replaceChildren(canvas);
+				currentPage=wantedPage;
+
+				pruneCache();
+				preloadNeighbours();
+			}
+
+			function preloadNeighbours() {
+				const page=currentPage;
+
+				requestIdleCallback(async()=>{
+					if(page+1<=pdf.numPages) {
+						await renderPage(page+1);
+					}
+					if(page-1>=1) {
+						await renderPage(page-1);
+					}
+				},{timeout:250});
+			}
+
+			function pruneCache() {
+				const keep=new Set([
+					currentPage-1,
+					currentPage,
+					currentPage+1
+				]);
+
+				for(const [number,promise] of cache) {
+					if(keep.has(number)) continue;
+
+					cache.delete(number);
+					promise.then(canvas=>{
+						if(!canvas.isConnected) {
+							canvas.width=0;
+							canvas.height=0;
+						}
+					}).catch(()=>{});
+				}
+			}
+
+			addEventListener("keydown",event=>{
+				if(event.key==="ArrowRight") {
+					event.preventDefault();
+					show(wantedPage+1);
+				} else if(event.key==="ArrowLeft") {
+					event.preventDefault();
+					show(wantedPage-1);
+				}
+			});
+
+			addEventListener("resize",()=>{
+				cache.clear();
+				show(currentPage);
+			});
+
+			window.pdfViewer={
+				page:()=>currentPage,
+				count:()=>pdf.numPages,
+				show
+			};
+
+			await show(1);
+		</script>
+	}
+}
+
 templ startScreenTemplate(splashScreenHtml string, ip string, mac string, qrPath string) {
 	@basicTemplate() {
 		<div style="width: 100vw; height: 100vh; display: flex; flex-direction: row; justify-content: space-between;">
@@ -40,7 +40,12 @@ func OpenFile(path string) error {
 		_ = imageTemplate(path).Render(context.Background(), &templateBuffer)
 		err = browser.Browser.OpenHTML(templateBuffer.String())
 	case "application/pdf":
-		err = browser.Browser.OpenPDF(path)
+		var templateBuffer bytes.Buffer
+		err = pdfTemplate(path, "http://127.0.0.1:1323").Render(context.Background(), &templateBuffer)
+		if err == nil {
+			err = browser.Browser.OpenHTML(templateBuffer.String())
+		}
+
 	case "application/vnd.openxmlformats-officedocument.presentationml.presentation", "application/vnd.oasis.opendocument.presentation":
 		err = fileHandler.openFileWithApp(path)
 	default:
@@ -16,12 +16,20 @@ import (
 	"github.com/labstack/echo/v4/middleware"

 	"plg-mudics/display/browser"
+	"plg-mudics/display/internal/pdfjs"
 	"plg-mudics/display/pkg"
 )

 func StartWebServer(port string) {
 	e := echo.New()

+	pdfJSGroup := e.Group("/static/pdfjs")
+	pdfJSGroup.Use(middleware.CORS())
+	pdfJSGroup.StaticFS(
+		"/",
+		echo.MustSubFS(pdfjs.Files, "node_modules/pdfjs-dist/build"),
+	)
+
 	apiGroup := e.Group("/api")
 	apiGroup.Use(middleware.CORS())
 	apiGroup.GET("/ping", pingRoute)
@@ -194,7 +202,7 @@ func downloadFileRoute(ctx echo.Context) error {

 	slog.Info("Serving file for download", "path", fullPath)

-	return ctx.File(fullPath)
+	return ctx.Attachment(fullPath, filepath.Base(fullPath))
 }

 func openFileRoute(ctx echo.Context) error {
@@ -170,15 +170,8 @@

  <span id="version-label" aria-label="Version">%%APP-VERSION%%</span>

-  <div class="fade-in">
-    <div
-      class="cursor-x"
-      style="
-        position: absolute;
-        left: calc(50cqw + var(--mouse-start-x));
-        top: calc(50cqh + var(--mouse-start-y));
-      "
-    >
+  <div class="fade-in cursor-layer" aria-hidden="true">
+    <div class="cursor-x">
      <svg class="cursor-y" width="50" height="50" viewBox="0 0 24 24">
        <g
          stroke="#ffffff"
@@ -223,8 +216,6 @@

    --mouse-size: 50px;
    --mouse-bounce-delay: 5s;
-    --mouse-start-x: calc((35 * 100vw) / 1920);
-    --mouse-start-y: calc((60 * 100vh) / 1080);

    --dur-x: 16s;
    --dur-y: 9s;
@@ -254,8 +245,12 @@
    align-items: center;
    justify-content: center;
    z-index: 9999;
-    height: 100vh;
-    width: 100vw;
+
+    width: 100dvw;
+    height: 100dvh;
+    overflow: hidden;
+
+    container: splash / size;

    animation-name: splash-fade;
    animation-duration: 1s;
@@ -342,7 +337,23 @@
    animation: start-button-hover-press 1s ease-in-out 450ms forwards;
  }

+  .cursor-layer {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+
+    --mouse-start-x: calc(100cqw * 35 / 1920);
+    --mouse-start-y: calc(100cqh * 60 / 1080);
+  }
+
  .cursor-x {
+    position: absolute;
+    left: calc(50cqw + var(--mouse-start-x));
+    top: calc(50cqh + var(--mouse-start-y));
+    width: var(--mouse-size);
+    height: var(--mouse-size);
+
    animation-name: move-mouse, mouse-bounceX;
    animation-duration: 1s, var(--dur-x);
    animation-delay: 0s, var(--mouse-bounce-delay);
@@ -354,6 +365,10 @@
  }

  .cursor-y {
+    width: 100%;
+    height: 100%;
+    display: block;
+
    animation-name: mouse-bounceY;
    animation-duration: var(--dur-y);
    animation-delay: var(--mouse-bounce-delay);
@@ -364,6 +379,10 @@
    will-change: transform;
  }

+  .cursor-y * {
+    vector-effect: non-scaling-stroke;
+  }
+
  @keyframes fade-in {
    to {
      opacity: 1;
@@ -383,7 +402,7 @@
      transform: translateX(0px);
    }
  }
-
+  
  @keyframes mouse-bounceX {
    0% {
      transform: translateX(0);
@@ -398,6 +417,10 @@
        calc(50cqw - var(--mouse-size) - var(--mouse-start-x))
      );
    }
+
+    100% {
+      transform: translateX(0);
+    }
  }

  @keyframes mouse-bounceY {
@@ -414,6 +437,10 @@
        calc(50cqh - var(--mouse-size) - var(--mouse-start-y))
      );
    }
+
+    100% {
+      transform: translateY(0);
+    }
  }

  @keyframes start-button-hover-press {
@@ -1 +1 @@
-v0.1.4
+v0.1.6
Author	SHA1	Message	Date
E44	41d8c4755a	chore: bump to version v0.1.6	2026-06-14 22:11:15 +02:00
E44	21cb07a465	chore(display): add ai generated pdf.js integration (#58 ) Co-authored-by: E44 <129310925+programmer-44@users.noreply.github.com> Reviewed-on: https://codeberg.org/PLG-Development/PLG-MuDiCS/pulls/58	2026-06-14 22:10:04 +02:00
E44	2dc46c186e	chore(control): update files only of online displays when changing file path	2026-06-14 20:34:38 +02:00
E44	2dd390e815	chore(control): add select all files button closes #25	2026-06-14 20:26:21 +02:00
E44	87eaf90c12	fix(control): use correct colors and include edge cases in select all displays button	2026-06-14 20:25:45 +02:00
E44	3174010e83	chore(control): improve startup behavoir closes #22	2026-06-14 19:19:15 +02:00
E44	ec7c3b407c	chore(control): improve error handling	2026-06-14 19:11:27 +02:00
E44	2dcf5a7758	fix(control): add error handler for shutdown closes: #53	2026-06-14 19:09:20 +02:00
E44	5ecf2da8a9	feat(control): add File Drag and Drop closes #51	2026-06-14 00:22:29 +02:00
E44	a49b842a4c	feat(control): bind arrow keys to arrow buttons	2026-06-13 22:00:09 +02:00
E44	a3d444df20	fix: disable chrome translate closes #56	2026-06-13 20:38:28 +02:00
E44	fb31f732af	fix(control): ping response was wrong	2026-06-12 23:04:50 +02:00
E44	5ea7ff3ce0	chore: bump to version v0.1.5	2026-06-12 11:00:41 +02:00
E44	a827a3e588	feat(control): show display block version in control block closes #54	2026-06-12 10:59:09 +02:00
2mal3	9284a8f72a	display/TakeScreenshot: use .jpg smaller images closes #44	2026-06-10 23:50:08 +02:00
E44	d969c041d0	refactor(control): use default instead of case null in display_status_to_info hopefully will close#42	2026-06-10 22:16:06 +02:00
E44	0a9d3af3eb	fix: shows media instead of downloading closes #50	2026-06-10 22:11:02 +02:00
E44	b6150fdab0	fix(control): uploading file(s) to multiple displays closes #41	2026-06-10 21:57:36 +02:00
E44	b6c637649f	refactor(control): improve code quality	2026-06-10 21:16:36 +02:00
E44	a7582851b4	fix(display): display cursor movements adapts to window resizing closes #49	2026-06-10 20:10:15 +02:00
E44	919bba7c2e	refactor(control): implement ESLint -> remove unnecessary imports, improve general code quality	2026-06-09 22:00:36 +02:00
E44	64b8fcffe2	chore(control): add version to about page	2026-06-09 21:39:08 +02:00