fix(control): deselect files from displays which were deselected

control/frontend/src/components/DisplayObject.svelte

@@ -11,6 +11,7 @@
 	import type { Display, MenuOption } from '../ts/types';
 	import { is_selected, select, selected_display_ids } from '../ts/stores/select';
 	import { update_screenshot } from '../ts/stores/displays';
+	import { filter_file_selection_for_current_selected_displays } from '../ts/stores/files';
 
 	let { display, get_display_menu_options, close_pinned_display } = $props<{
 		display: Display;
@@ -22,6 +23,7 @@
 
 	function onclick(e: Event) {
 		select(selected_display_ids, display.id);
+		filter_file_selection_for_current_selected_displays();
 		e.stopPropagation();
 	}
 

control/frontend/src/components/FileView.svelte

@@ -22,7 +22,7 @@
 		get_current_folder_elements,
 		get_display_ids_where_file_is_missing,
 		get_display_ids_where_path_does_not_exist,
-		get_file_from_id,
+		get_file_by_id,
 		get_longest_existing_path_and_needed_parts,
 		run_for_selected_files_on_selected_displays,
 		update_current_folder_on_selected_displays
@@ -145,7 +145,7 @@
 		>
 		<div class="flex flex-col gap-2 overflow-auto h-full min-h-0 grow-0">
 			{#each $selected_file_ids
-				.map((file_id) => get_file_from_id(file_id, $all_files, $current_file_path))
+				.map((file_id) => get_file_by_id(file_id, $all_files, $current_file_path))
 				.filter((element) => element !== null) as file}
 				<FolderElementObject {file} not_interactable />
 			{/each}

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

@@ -1,7 +1,7 @@
 import { get, writable, type Writable } from "svelte/store";
 import type { Display, FolderElement, TreeElement } from "../types";
 import { displays, get_display_by_id } from "./displays";
-import { selected_display_ids, selected_file_ids } from "./select";
+import { select, selected_display_ids, selected_file_ids } from "./select";
 import { get_file_data, get_file_tree_data } from "../api_handler";
 import { notifications } from "./notification";
 import { CirclePoundSterling } from "lucide-svelte";
@@ -45,6 +45,15 @@ export async function change_file_path(new_path: string) {
     }
 }
 
+export async function filter_file_selection_for_current_selected_displays() {
+    for (const selected_file_id of get(selected_file_ids)) {
+        if (!get_file_by_id(selected_file_id, get(all_files), get(current_file_path), true)) {
+            // file not found in selected displays
+            select(selected_file_ids, selected_file_id, false);
+        }
+    }
+}
+
 export async function update_current_folder_on_selected_displays() {
     const current_path = get(current_file_path);
     for (const display_id of get(selected_display_ids)) {
@@ -250,9 +259,14 @@ function sort_files(files: FolderElement[]) {
     return files;
 }
 
-export function get_file_from_id(file_id: string, all_files: Record<string, Record<string, FolderElement[]>>, current_file_path: string): FolderElement | null {
-    const current_path_elements: Record<string, FolderElement[]> | undefined = all_files[current_file_path];
+export function get_file_by_id(file_id: string, all_files: Record<string, Record<string, FolderElement[]>>, current_file_path: string, only_from_selected_displays: boolean = false): FolderElement | null {
+    let current_path_elements: Record<string, FolderElement[]> | undefined = all_files[current_file_path];
     if (!current_path_elements) return null;
+    if (only_from_selected_displays) {
+        current_path_elements = Object.fromEntries(
+            Object.entries(current_path_elements).filter(([key]) => get(selected_file_ids).includes(key))
+        );
+    }
     const all_folder_elements = Object.values(current_path_elements).flat();
     const found = all_folder_elements.find(el => el.id === file_id);
     if (!found) return null;
@@ -263,7 +277,7 @@ export async function run_for_selected_files_on_selected_displays(action: (ip: s
     const files = get(all_files);
     const file_path = get(current_file_path);
     const folder_element_hashs: string[] = get(selected_file_ids)
-        .map((file_id) => get_file_from_id(file_id, files, file_path))
+        .map((file_id) => get_file_by_id(file_id, files, file_path))
         .filter((element) => element !== null)
         .map((folder_element) => folder_element.hash)
         .filter((hash) => hash !== null);