fix(frontend): more reactive db problems

Co-Authored-By: E44 <129310925+programmer-44@users.noreply.github.com>

control/frontend/src/routes/DisplayGroupObject.svelte

@@ -19,7 +19,7 @@
 	import { fade } from 'svelte/transition';
 	import type { MenuOption } from '$lib/ts/types';
 	import { selected_display_ids } from '$lib/ts/stores/select';
-	import { liveQuery } from 'dexie';
+	import { liveQuery, type Observable } from 'dexie';
 
 	let {
 		display_group_id,
@@ -31,17 +31,16 @@
 		close_pinned_display: () => void;
 	} = $props();
 
-	let all_selected = liveQuery(() =>
-		all_displays_of_group_selected(display_group_id, $selected_display_ids)
-	);
+	let all_selected: Observable<boolean> | undefined = $state();
+	$effect(() => {
+		const sdi = $selected_display_ids;
+		all_selected = liveQuery(() => all_displays_of_group_selected(display_group_id, sdi));
+	});
 	let display_ids_in_group = liveQuery(() => get_display_ids_in_group(display_group_id));
 	let hovering_selectable = $state(false);
 
 	async function select_all_of_this_group() {
-		const new_value = !(await all_displays_of_group_selected(
-			display_group_id,
-			$selected_display_ids
-		));
+		const new_value = !($all_selected || false);
 		await select_all_of_group(display_group_id, new_value);
 	}
 

control/frontend/src/routes/DisplayView.svelte

@@ -39,13 +39,18 @@
 	} = $props();
 
 	let displays_scroll_box: HTMLElement;
-	let pinned_display: Observable<Display | null> = liveQuery(() =>
-		get_display_by_id($pinned_display_id || '')
-	);
+	let pinned_display: Observable<Display | null> | undefined = $state();
+	$effect(() => {
+		const pdi = $pinned_display_id;
+		pinned_display = liveQuery(() => get_display_by_id(pdi || ''));
+	});
 	let display_groups = liveQuery(() => get_display_groups());
-	let all_groups_selected = liveQuery(() =>
-		all_selected($display_groups || [], $selected_display_ids)
-	);
+	let all_groups_selected: Observable<boolean> | undefined = $state();
+	$effect(() => {
+		const d = $display_groups;
+		const sdi = $selected_display_ids;
+		all_groups_selected = liveQuery(() => all_selected(d || [], sdi));
+	});
 
 	let last_pinned_pane_size: number = 45;
 	let pinned_pane_size: number = $state(last_pinned_pane_size);
@@ -75,11 +80,8 @@
 		];
 	}
 
-	async function select_all(
-		current_displays: DisplayGroup[],
-		current_selected_display_ids: string[]
-	) {
-		const new_value = !(await all_selected(current_displays, current_selected_display_ids));
+	async function select_all(current_displays: DisplayGroup[]) {
+		const new_value = !all_groups_selected;
 		for (const display_group of current_displays) {
 			await select_all_of_group(display_group.id, new_value);
 		}
@@ -211,7 +213,7 @@
 									text: true
 								}
 							)}"
-							onclick={async () => await select_all($display_groups || [], $selected_display_ids)}
+							onclick={async () => await select_all($display_groups || [])}
 						>
 							<span>{$all_groups_selected || false ? 'Alle abwählen' : 'Alle auswählen'}</span>
 						</button>

control/frontend/src/routes/FileView.svelte

@@ -38,16 +38,17 @@
 	let current_valid: boolean = $state(false);
 
 	let display_names_where_path_does_not_exist: string[] = $state([]);
-	let selected_files = liveQuery(() => get_selected_files($selected_display_ids));
-
-	let current_folder_elements: Observable<Inode[]> | undefined = $state();
-
+	let selected_files: Observable<Inode[]> | undefined = $state();
 	$effect(() => {
-		const path = $current_file_path, display_ids = $selected_display_ids;
+		const s = $selected_file_ids;
+		selected_files = liveQuery(() => get_selected_files(s));
+	});
+	let current_folder_elements: Observable<Inode[]> | undefined = $state();
+	$effect(() => {
+		const path = $current_file_path,
+			display_ids = $selected_display_ids;
 		current_folder_elements = liveQuery(() => get_current_folder_elements(path, display_ids));
-	})
-
-
+	});
 
 	let popup_content: PopupContent = $state({
 		open: false,
@@ -163,11 +164,7 @@
 			if (trimmed_input.length === 0 || trimmed_input.length > 50)
 				return [false, 'Ungültige Länge'];
 			if (!is_valid_name(trimmed_input)) return [false, 'Name enthält ungültige Zeichen'];
-			if (
-				(await get_current_folder_elements($current_file_path, $selected_display_ids)).some(
-					(e) => e.name === trimmed_input
-				)
-			)
+			if (($current_folder_elements ?? []).some((e) => e.name === trimmed_input))
 				return [false, 'Name bereits verwendet'];
 			return [true, 'Gültiger Name'];
 		}}
@@ -194,8 +191,8 @@
 				return [false, 'Ungültige Länge'];
 			if (!is_valid_name(trimmed_input)) return [false, 'Name enthält ungültige Zeichen'];
 			if (
-				(await get_current_folder_elements($current_file_path, $selected_display_ids)).some(
-					async (e) => e.name === trimmed_input && get_file_primary_key(e) !== $selected_file_ids[0]
+				($current_folder_elements ?? []).some(
+					(e) => e.name === trimmed_input && get_file_primary_key(e) !== $selected_file_ids[0]
 				)
 			)
 				return [false, 'Name bereits verwendet'];

control/frontend/src/routes/InodeElement.svelte

@@ -24,13 +24,17 @@
 	import { open_file } from '$lib/ts/api_handler';
 	import { run_on_all_selected_displays } from '$lib/ts/stores/displays';
 	import { get_thumbnail_url } from '$lib/ts/stores/thumbnails';
-	import { liveQuery } from 'dexie';
+	import { liveQuery, type Observable } from 'dexie';
 
 	let { file, not_interactable = false }: { file: Inode; not_interactable?: boolean } = $props();
 
-	let missing_colliding_displays_ids = liveQuery(() =>
-		get_missing_colliding_display_ids(file, $selected_display_ids)
-	);
+	let missing_colliding_displays_ids:
+		| Observable<{ missing: string[]; colliding: string[] }>
+		| undefined = $state();
+	$effect(() => {
+		const s = $selected_file_ids;
+		missing_colliding_displays_ids = liveQuery(() => get_missing_colliding_display_ids(file, s));
+	});
 	let thumbnail_url = liveQuery(() => get_thumbnail_url(file));
 
 	const is_folder = file.type === 'inode/directory';