chore(control): add select all files button

closes #25

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';
@@ -50,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,
@@ -147,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[],
@@ -291,6 +318,22 @@
 		<span class="text-xl font-bold pl-2 content-center truncate min-w-0">
 			Dateien Anzeigen und Verwalten
 		</span>
+		<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 ?? [])}
+			>
+				<span>{all_files_selected ? 'Alle Abwählen' : 'Alle Auswählen'}</span>
+			</button>
 			<div class="flex flex-row">
 				<Button
 					title="Dateien größer darstellen"
@@ -316,6 +359,7 @@
 				</Button>
 			</div>
 		</div>
+	</div>
 	<div class="flex flex-col gap-2 p-2 overflow-hidden relative rounded-b-2xl">
 		<div class="flex flex-col gap-2 p-2 bg-stone-750 rounded-xl">
 			<PathBar />
@@ -390,8 +434,10 @@
 			</div>
 		</div>
 
-			<div class="min-h-0 size-full overflow-y-auto overflow-x-hidden bg-stone-750 rounded-xl relative">
+		<div
-				<FileDropZone className="rounded-xl size-full"/>
+			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">