fix(control): better folder view, especially for same named folders on different displays

control/frontend/src/components/FolderElementObject.svelte

@@ -14,7 +14,11 @@
 		get_shifted_color
 	} from '../ts/stores/ui_behavior';
 	import Button from './Button.svelte';
-	import { supported_file_type_icon, type FolderElement, type SupportedFileType } from '../ts/types';
+	import {
+		supported_file_type_icon,
+		type FolderElement,
+		type SupportedFileType
+	} from '../ts/types';
 
 	import {
 		is_selected,
@@ -56,7 +60,11 @@
 
 	const is_folder = file.type === 'inode/directory';
 
-	function get_created_string(date_object: Date, full_string = false) {
+	function get_created_string(date_object: Date | null, full_string = false) {
+		if (!date_object) {
+			return full_string ? 'Verschiedene Daten auf verschiedenen Bildschirmen' : 'versch.';
+		}
+
 		if (full_string) {
 			return (
 				get_formated_date_string(date_object, true) + ' ' + get_formated_time_string(date_object)
@@ -167,16 +175,14 @@
 		})} rounded-r-lg transition-colors duration-200 gap-4 flex flex-row justify-between cursor-pointer group w-full min-w-0"
 	>
 		<div class="flex flex-row gap-2 min-w-0 w-full">
-			<div
+			<div class="aspect-square rounded-md flex justify-center items-center">
-				class="aspect-square rounded-md flex justify-center items-center"
-			>
 				{#if is_folder}
 					<Folder class="size-full p-2" />
 				{:else if thumbnail_url}
 					<img
 						src={thumbnail_url}
 						alt="file_thumbnail"
-						class="object-contain size-full select-none block p-1"
+						class="object-contain size-full select-none block p-1 rounded-lg"
 						draggable="false"
 					/>
 				{:else if supported_file_type_icon[get_file_type(file)?.display_name || '']}
@@ -187,7 +193,9 @@
 				{/if}
 			</div>
 			<div class="content-center truncate select-none w-full" title={file.name}>
-				{file.name.includes('.') && !is_folder && get_file_type(file) ? file.name.slice(0, file.name.lastIndexOf('.')) : file.name}
+				{file.name.includes('.') && !is_folder && get_file_type(file)
+					? file.name.slice(0, file.name.lastIndexOf('.'))
+					: file.name}
 			</div>
 		</div>
 		<div

control/frontend/src/ts/api_handler.ts

@@ -74,9 +74,14 @@ done
     for (const response_element of response) {
         // filter hidden files (start with '.' -> './.config')
         if (response_element.name.charAt(2) !== '.') {
+            const truncated = {
+                ...response_element,
+                created: response_element.created.slice(0, 16) // truncated to YYYY-MM-DD hh-mm -> no (milli)seconds
+            };
+
             const folder_element: FolderElement = {
                 id: get_uuid(),
-                hash: JSON.stringify(response_element),
+                hash: JSON.stringify(truncated),
                 name: response_element.name.slice(2), // remove "./"
                 type: response_element.type,
                 date_created: new Date(response_element.created),

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

@@ -191,15 +191,21 @@ export function get_current_folder_elements(all_files: Record<string, Record<str
             FileOnDisplay:
             for (const file_on_display of files_on_display_array[key]) {
                 for (const existing_file of files) {
+                    const both_same_folder = file_on_display.type === "inode/directory" && existing_file.type === "inode/directory" && file_on_display.name === existing_file.name;
+                    if (both_same_folder && file_on_display.size !== existing_file.size) {
+                        existing_file.size = -1;
+                    }
                     if (file_on_display.hash === existing_file.hash) {
                         continue FileOnDisplay;
+                    } else if (both_same_folder) {
+                        existing_file.date_created = null;
+                        continue FileOnDisplay;
                     }
                 }
-                files.push(file_on_display);
+                files.push({ ...file_on_display });
             }
         }
     }
-
     return sort_files(files);
 }
 

control/frontend/src/ts/types.ts

@@ -30,10 +30,10 @@ export const supported_file_type_icon: Record<string, typeof X> = {
 
 export type FolderElement = {
     id?: string;
-    hash: string | null;
+    hash: string;
     name: string;
     type: string;
-    date_created: Date;
+    date_created: Date | null;
     size: number;
 }
 

control/frontend/src/ts/utils.ts

@@ -24,6 +24,7 @@ export function get_uuid(): string {
 }
 
 export function get_file_size_display_string(size: number, toFixed: number | null = null): string {
+  if (size < 0) return toFixed === null ? "versch." : "Verschiedene Größen auf verschiedenen Bildschirmen";
   if (size === 0) return "0 B";
 
   const k = 1024;