fix(control): check for main button

closes #25

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

@@ -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>

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

@@ -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

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

@@ -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;
+	if (!raw_response.ok) return;
-	const json_response = raw_response.json as ShellCommandResponse;
+	handle_shell_error(ip, raw_response, command, true);
-	handle_shell_error(ip, json_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;
+	if (!raw_response.ok) return;
-	const json_response = raw_response.json as ShellCommandResponse;
+	handle_shell_error(ip, raw_response, command, true);
-	handle_shell_error(ip, json_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;
+	if (!raw_response.ok) return;
-	const json_response = raw_response.json as ShellCommandResponse;
+	handle_shell_error(ip, raw_response, command, true);
-	handle_shell_error(ip, json_response, command, true);
 }
 
 export async function show_blackscreen(ip: string): Promise<void> {
@@ -288,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 &&
@@ -325,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> {
+export async function shutdown(ip: string): Promise<boolean> {
-	return await run_shell_command(ip, 'xfce4-session-logout --halt');
+	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> {

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

@@ -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 } });
@@ -47,17 +45,19 @@ export async function update_display_status(display: Display): Promise<DisplaySt
 	}
 	if (resp.status === null && display.status !== null) return null;
 	if (resp.status !== display.status) {
+		let run_on_display_start = false;
 		// status change
 		if (resp.status === 'app_offline') {
 			loading_display_ids.push(display.id);
 		} else {
 			remove_display_from_loading_displays(display.id);
 			if (resp.status === 'app_online') {
-				on_display_start(display);
+				run_on_display_start = true;
 			}
 		}
 		display.status = resp.status;
 		await db.displays.put(display); // save
+		if (run_on_display_start) await on_display_start(display);
 	}
 	return resp.status;
 }
@@ -70,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);
 }

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

@@ -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 get(online_displays)) {
-
-	for (const display of 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> {

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

@@ -74,8 +74,8 @@
 		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);
+			const resp = await ping_ip(text_inputs_valid.ip.value);
-			display = await add_display(ip, mac, name, status);
+			display = await add_display(ip, mac, name, resp.status);
 		}
 		if (display) {
 			await update_display_status(display);
@@ -282,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
 			>

control/frontend/src/routes/ControlView.svelte

@@ -34,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(() => {
@@ -44,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;
 	}
@@ -79,7 +85,7 @@
 			snippet: website_popup,
 			title: 'Webseite Anzeigen',
 			window_class: 'w-xl',
-			title_icon: Globe,
+			title_icon: Globe
 		};
 	};
 
@@ -102,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) => {
+		await run_on_all_selected_displays(async (d) => {
-			shutdown(d.ip); // no await here because we want to be fast
+			if (await shutdown(d.ip)) {
-			db.displays.update(d.id, { status: 'app_offline', preview: { currently_updating: false, url: null} });
+				db.displays.update(d.id, {
+					status: 'app_offline',
+					preview: { currently_updating: false, url: null }
+				});
+			}
 		}, false);
 	}
 
@@ -143,10 +153,58 @@
 
 	async function send_website() {
 		popup_content.open = false;
-		await run_on_all_selected_displays((d) =>
+		await run_on_all_selected_displays((d) => open_website(d.ip, website_url));
-			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()}
@@ -185,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">
@@ -202,15 +260,21 @@
 				<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={() => {
+						onmousedown={(e: MouseEvent) => {
+							if (e.button !== 0) return;
 							add_to_keyboard_queue(async () => await send_single_key_press('ArrowLeft', 'press'));
 						}}
-						onmouseup={() => {
+						onmouseup={(e: MouseEvent) => {
-							add_to_keyboard_queue(async () => await send_single_key_press('ArrowLeft', 'release'));
+							if (e.button !== 0) return;
+							add_to_keyboard_queue(
+								async () => await send_single_key_press('ArrowLeft', 'release')
+							);
 						}}
 					>
 						<ArrowBigLeft />
@@ -218,15 +282,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
+						class="px-9 {key_pressed.ArrowRight
-							? 'text-stone-500 cursor-not-allowed'
+							? 'bg-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"
+							: `bg-stone-700 ${
-						disabled={$selected_online_display_ids.length === 0}
+									$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 />
@@ -271,8 +341,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' ||
+						disabled={$all_display_states === 'on' || $selected_display_ids.length === 0}
-							$selected_display_ids.length === 0}
 						click_function={startup_action}
 					>
 						<Power /> Bildschirm Hochfahren
@@ -280,8 +349,7 @@
 
 					<Button
 						className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
-						disabled={$all_display_states === 'off' ||
+						disabled={$all_display_states === 'off' || $selected_online_display_ids.length === 0}
-							$selected_online_display_ids.length === 0}
 						click_function={ask_shutdown}
 					>
 						<PowerOff /> Bildschirm Herunterfahren</Button

control/frontend/src/routes/DisplayView.svelte

@@ -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,
@@ -57,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;
@@ -217,11 +218,22 @@
 					</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"

control/frontend/src/routes/FileView.svelte

@@ -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,7 +75,7 @@
 	$effect(() => {
 		const s = $selected_file_ids;
 		one_file_selected = liveQuery(async () => {
-			if (s.length !== 1) return false
+			if (s.length !== 1) return false;
 			const inode = await get_file_by_id(s[0]);
 			if (!inode) return false;
 			return !is_folder(inode);
@@ -146,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[],
@@ -285,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">
+		<div class="flex flex-row gap-1">
-			<Button
+			<button
-				title="Dateien größer darstellen"
+				disabled={$current_folder_elements?.length === 0}
-				className="aspect-square p-1.5! pr-1! rounded-r-none"
+				class="min-w-40 px-4 rounded-xl duration-200 transition-colors {$current_folder_elements?.length ===
-				bg="bg-stone-600"
+				0
-				disabled={!next_height_step_size('file', $current_height, 1)}
+					? 'text-stone-500 cursor-not-allowed'
-				click_function={() => {
+					: 'cursor-pointer'} {get_selectable_color_classes(all_files_selected, {
-					change_height('file', 1);
+					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" />
+				<span>{all_files_selected ? 'Alle Abwählen' : 'Alle Auswählen'}</span>
-			</Button>
+			</button>
-			<Button
+			<div class="flex flex-row">
-				title="Dateien kleiner darstellen"
+				<Button
-				className="aspect-square p-1.5! pl-1! rounded-l-none"
+					title="Dateien größer darstellen"
-				bg="bg-stone-600"
+					className="aspect-square p-1.5! pr-1! rounded-r-none"
-				disabled={!next_height_step_size('file', $current_height, -1)}
+					bg="bg-stone-600"
-				click_function={() => {
+					disabled={!next_height_step_size('file', $current_height, 1)}
-					change_height('file', -1);
+					click_function={() => {
-				}}
+						change_height('file', 1);
-			>
+					}}
-				<ZoomOut class="size-full" />
+				>
-			</Button>
+					<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">
@@ -388,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">

control/frontend/src/routes/KeyInput.svelte

@@ -141,11 +141,13 @@
 			<button
 				title="Windows-/Meta-Taste [gedrückt halten möglich]"
 				class="px-3 bg-stone-700 py-2 gap-2 rounded-xl flex items-center transition-colors duration-200 hover:bg-stone-600 active:bg-stone-500 cursor-pointer"
-				onmousedown={async (e) => {
+				onmousedown={async (e: MouseEvent) => {
+					if (e.button !== 0) return;
 					e.preventDefault();
 					await on_key('MetaLeft', true);
 				}}
-				onmouseup={async () => {
+				onmouseup={async (e: MouseEvent) => {
+					if (e.button !== 0) return;
 					await on_key('MetaLeft', false);
 				}}
 			>

control/open_browser.go

@@ -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{}