fix(control): open_inode_action and icon is now correct

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ArrowRight, Ban, FileIcon, Folder, Play } from 'lucide-svelte';
+	import { ArrowRight, Ban, FileIcon, Folder, Play, Triangle, TriangleAlert } from 'lucide-svelte';
 	import {
 		current_height,
 		get_selectable_color_classes,
@@ -31,11 +31,15 @@
 	import RefreshPlay from '../svgs/RefreshPlay.svelte';
 	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_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 { file_transfer_tasks } from '$lib/ts/file_transfer_handler';
+	import { add_sync_recursively, file_transfer_tasks } from '$lib/ts/file_transfer_handler';
 
 	let { file, not_interactable = false }: { file: Inode; not_interactable?: boolean } = $props();
 
@@ -50,6 +54,10 @@
 		missing_colliding_displays_ids = liveQuery(() => get_missing_colliding_display_ids(f, s));
 	});
 
+	let colliding_warning: boolean = $derived(
+		!!$missing_colliding_displays_ids && $missing_colliding_displays_ids.colliding.length !== 0
+	);
+
 	let file_size: Observable<number> | undefined = $state();
 	$effect(() => {
 		const f = file;
@@ -160,6 +168,11 @@
 	async function open() {
 		if (file_is_folder) {
 			await change_file_path($current_file_path + file.name + '/');
+		} else if (
+			!!$missing_colliding_displays_ids &&
+			$missing_colliding_displays_ids.missing.length !== 0
+		) {
+			await add_sync_recursively(get_file_primary_key(file), $selected_online_display_ids, true);
 		} else {
 			const path_to_file = $current_file_path + file.name;
 			await run_on_all_selected_displays((d) => open_file(d.ip, path_to_file));
@@ -238,27 +251,37 @@
 	{#if !not_interactable}
 		<div class="h-{$current_height.file} aspect-square max-w-15 flex">
 			<Button
-				disabled={!file_is_folder && get_file_type(file) === null}
+				disabled={(!file_is_folder && get_file_type(file) === null) || colliding_warning}
-				title={!file_is_folder && get_file_type(file) === null ? 'Dateityp nicht unterstützt' : ''}
+				title={!file_is_folder && get_file_type(file) === null
+					? 'Dateityp nicht unterstützt'
+					: colliding_warning
+						? 'Dateien kollidieren auf verschiedenen Bildschirmen'
+						: ''}
 				className="flex rounded-l-lg rounded-r-none {file_is_folder
 					? 'text-stone-450'
 					: 'text-stone-800'} w-full"
 				div_class="w-full"
-				bg={get_selectable_color_classes(
+				bg={colliding_warning
+					? 'bg-red-400'
+					: get_selectable_color_classes(
 							!file_is_folder && get_file_type(file) !== null,
 							{
 								bg: true
 							},
 							-50
 						)}
-				hover_bg={get_selectable_color_classes(
+				hover_bg={colliding_warning
+					? 'bg-red-500'
+					: get_selectable_color_classes(
 							!file_is_folder,
 							{
 								bg: true
 							},
 							50
 						)}
-				active_bg={get_selectable_color_classes(
+				active_bg={colliding_warning
+					? 'bg-red-500'
+					: get_selectable_color_classes(
 							!file_is_folder,
 							{
 								bg: true
@@ -272,12 +295,14 @@
 			>
 				{#if file_is_folder}
 					<ArrowRight class="size-full" strokeWidth="3" />
-				{:else if $missing_colliding_displays_ids && $missing_colliding_displays_ids.missing.length !== 0}
+				{:else if get_file_type(file) === null}
-					<RefreshPlay className="size-full" />
-				{:else if get_file_type(file) !== null}
-					<Play class="size-full" strokeWidth="3" />
-				{:else}
 					<Ban class="size-full" strokeWidth="3" />
+				{:else if colliding_warning}
+					<TriangleAlert class="size-full" strokeWidth="3" />
+				{:else if !!$missing_colliding_displays_ids && $missing_colliding_displays_ids.missing.length !== 0}
+					<RefreshPlay className="size-full" />
+				{:else}
+					<Play class="size-full" strokeWidth="3" />
 				{/if}
 			</Button>
 		</div>
@@ -326,33 +351,6 @@
 				is_selected(file_primary_key, $selected_file_ids)
 			)} duration-200 transition-colors"
 		>
-			<!-- {#if get_display_ids_where_file_is_missing($current_file_path, file, $selected_display_ids, $all_files)[1].length !== 0}
-				<Button
-					className="h-8 aspect-square transition-colors duration-200 !p-1.5 text-stone-100"
-					bg="bg-red-500"
-					click_function={(e) => {
-						e.stopPropagation();
-					}}
-				>
-					<TriangleAlert class="size-full" />
-				</Button>
-			{:else if get_display_ids_where_file_is_missing($current_file_path, file, $selected_display_ids, $all_files)[0].length !== 0}
-				<Button
-					className="h-8 aspect-square transition-colors duration-200 !p-1.5"
-					bg="bg-transparent"
-					hover_bg={get_selectable_color_classes(false, {
-						bg: true
-					})}
-					active_bg={get_selectable_color_classes(false, {
-						bg: true
-					})}
-					click_function={(e) => {
-						e.stopPropagation();
-					}}
-				>
-					<RefreshCcwDot class="size-full" />
-				</Button>
-			{/if} -->
 			<div
 				class="w-14 content-center text-center select-none text-xs whitespace-nowrap"
 				title={get_created_info($date_mapping, true)}

control/frontend/src/lib/ts/file_transfer_handler.ts

@@ -1,6 +1,6 @@
 import { get, writable, type Writable } from 'svelte/store';
 import { db } from './database';
-import { get_display_by_id } from './stores/displays';
+import { get_display_by_id, run_on_all_selected_displays } from './stores/displays';
 import {
 	create_path_on_all_selected_displays,
 	get_folder_elements,
@@ -20,6 +20,7 @@ import {
 	type ShortDisplay
 } from './types';
 import { get_sanitized_file_url, get_uuid, make_valid_name } from './utils';
+import { open_file } from './api_handler';
 
 const START_LOADING_DATA = {
 	percentage: 0,
@@ -102,7 +103,8 @@ export async function add_upload(
 
 export async function add_sync_recursively(
 	selected_file_id: string,
-	selected_display_ids: string[]
+	selected_display_ids: string[],
+	open_file_afterwards: boolean = false
 ) {
 	const file_data = await find_file_data_on_active_selected_display(
 		selected_file_id,
@@ -134,7 +136,8 @@ export async function add_sync_recursively(
 			destination_display_data: file_data.short_displays_without_file.map((display) => ({
 				display,
 				loading_data: START_LOADING_DATA
-			}))
+			})),
+			open_file_afterwards_on_display_ids: open_file_afterwards ? selected_display_ids : []
 		},
 		display: file_data.short_display_with_file,
 		path: file_data.file.path,
@@ -285,6 +288,12 @@ export async function sync(file_primary_key: string, task: FileTransferTask) {
 		}
 
 		await dir.removeEntry(temp_name);
+
+		// 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);
+		}
 	} catch (e) {
 		show_general_error(file_primary_key, task, String(e));
 	}
@@ -295,8 +304,7 @@ export async function download_file(selected_file_id: string, selected_display_i
 		selected_file_id,
 		selected_display_ids
 	);
-	if (!file_data || is_folder(file_data.file))
+	if (!file_data || is_folder(file_data.file)) return console.warn('Download cancelled: is folder');
-		return console.warn('Download cancelled: is folder');
 
 	try {
 		const url = `http://${file_data.short_display_with_file.ip}:1323/api${get_sanitized_file_url(file_data.file.path + file_data.file.name)}`;
@@ -455,7 +463,11 @@ function update_current_loading_data(
 	});
 }
 
-function get_updated_task(current_loading_data: FileLoadingData, destination_display_id: string | null, task: FileTransferTask): FileTransferTask {
+function get_updated_task(
+	current_loading_data: FileLoadingData,
+	destination_display_id: string | null,
+	task: FileTransferTask
+): FileTransferTask {
 	if (destination_display_id && task.data.type === 'sync') {
 		const updatedDestinations = task.data.destination_display_data.map((dd) =>
 			dd.display.id === destination_display_id ? { ...dd, loading_data: current_loading_data } : dd

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

@@ -197,17 +197,18 @@ export function screenshot_loop(display_id: string) {
 export async function run_on_all_selected_displays(
 	run_function: (display: Display) => void | Promise<void>,
 	update_screenshot_afterwards: boolean = true,
-	ignore_offline: boolean = true
+	display_ids: string[] | null = null
 ) {
+	if (!display_ids) display_ids = get(selected_online_display_ids);
 	const maybe_displays: (Display | null)[] = await Promise.all(
 		// fails when only a single promis fails
-		get(selected_display_ids).map(async (id) => await get_display_by_id(id))
+		display_ids.map(async (id) => await get_display_by_id(id))
 	);
 	const displays: Display[] = maybe_displays.filter((d): d is Display => d !== null);
 
 	await Promise.all(
 		displays.map(async (display) => {
-			if (!display || (ignore_offline && display.status === 'host_offline')) return;
+			if (!display) return;
 			await run_function(display);
 			if (update_screenshot_afterwards) {
 				screenshot_loop(display.id);

control/frontend/src/lib/ts/types.ts

@@ -48,6 +48,7 @@ export type FileTransferTaskData =
 				display: ShortDisplay;
 				loading_data: FileLoadingData;
 			}[];
+			open_file_afterwards_on_display_ids: string[];
 	  };
 
 export type FileLoadingData = {

control/frontend/src/routes/ControlView.svelte

@@ -122,7 +122,7 @@
 				db.displays.update(d.id, { status: 'app_offline' });
 			},
 			false,
-			false
+			$selected_display_ids
 		);
 	}