finalize thumbnails and add shared supported_file_types json

control/frontend/src/components/FileView.svelte

@@ -20,8 +20,62 @@
 	import { slide } from 'svelte/transition';
 	import FolderElementObject from './FolderElementObject.svelte';
 	import PopUp from './PopUp.svelte';
+	import type { PopupContent } from '../ts/types';
+	import TextInput from './TextInput.svelte';
+	import { is_valid_name } from '../ts/utils';
+
+	let current_name: string = '';
+	let current_valid: boolean = false;
+
+	let popup_content: PopupContent = $state({
+		open: false,
+		snippet: null,
+		title: '',
+		closable: true
+	});
+
+	function popup_close_function() {
+		popup_content.open = false;
+	}
+
+	const show_new_folder_popup = () => {
+		popup_content = {
+			open: true,
+			snippet: new_folder_popup,
+			title: 'Neuen Ordner erstellen',
+			title_icon: FolderPlus,
+			closable: true
+		};
+	};
 </script>
 
+{#snippet new_folder_popup()}
+	<div>
+		<TextInput
+			current_value={current_name}
+			{current_valid}
+			title="Ordnername"
+			is_valid_function={(input: string) => {
+				if (input.startsWith('.')) return [false, 'Name darf nicht mit . beginnen'];
+				const trimmed_input = input.trim();
+				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 (
+					get_current_folder_elements($all_files, $current_file_path, $selected_display_ids).some(
+						(e) => e.name === trimmed_input
+					)
+				)
+					return [false, 'Name bereits verwendet'];
+				return [true, 'Gültiger Name'];
+			}}
+		/>
+	</div>
+	<div class="flex flex-row justify-end gap-2">
+		<Button className="px-4 font-bold" click_function={popup_close_function}>Fertig</Button>
+	</div>
+{/snippet}
+
 <div class="bg-stone-800 h-full rounded-2xl grid grid-rows-[2.5rem_1fr] min-h-0">
 	<div class="bg-stone-700 flex justify-between w-full p-1 rounded-t-2xl min-w-0 gap-2">
 		<span class="text-xl font-bold pl-2 content-center truncate min-w-0">
@@ -59,7 +113,8 @@
 				<div class="flex flex-row gap-2 shrink-0">
 					<Button
 						title="Neuen Ordner erstellen (Neuen Ordner mit ausgewählten Objekten erstellen)"
-						className="px-3 flex"><FolderPlus /></Button
+						className="px-3 flex"
+						click_function={show_new_folder_popup}><FolderPlus /></Button
 					>
 					<div class="border border-stone-700 my-1"></div>
 					<Button title="Datei(en) hochladen" className="px-3 flex"><Upload /></Button>
@@ -125,8 +180,11 @@
 				{/if}
 			</div>
 		</div>
-		<!-- <PopUp title="Test" title_icon={Info}>
-			<div>Hier kann beliebiges HTML übergeben werden!</div>
-		</PopUp> -->
+		<PopUp
+			content={popup_content}
+			close_function={popup_close_function}
+			className="rounded-b-2xl"
+			snippet_container_class="overflow-hidden"
+		/>
 	</div>
 </div>

control/frontend/src/components/FolderElementObject.svelte

@@ -14,7 +14,8 @@
 		get_shifted_color
 	} from '../ts/stores/ui_behavior';
 	import Button from './Button.svelte';
-	import { supported_file_types, type FolderElement, type SupportedFileType } from '../ts/types';
+	import { supported_file_type_icon, type FolderElement, type SupportedFileType } from '../ts/types';
+	
 	import {
 		is_selected,
 		select,
@@ -28,7 +29,7 @@
 		get_display_ids_where_file_is_missing
 	} from '../ts/stores/files';
 	import RefreshPlay from './RefreshPlay.svelte';
-	import { get_file_size_display_string } from '../ts/utils';
+	import { get_file_size_display_string, get_file_type } from '../ts/utils';
 	import { open_file } from '../ts/api_handler';
 	import {
 		displays,
@@ -55,22 +56,6 @@
 
 	const is_folder = file.type === 'inode/directory';
 
-	function get_file_type(file: FolderElement): SupportedFileType | null {
-		for (const key of Object.keys(supported_file_types)) {
-			if (file.type === supported_file_types[key].mime_type) {
-				return supported_file_types[key];
-			}
-		}
-		// Fallback:
-		const extension = file.name.split('.').pop();
-		if (extension) {
-			if (Object.keys(supported_file_types).includes('.' + extension)) {
-				return supported_file_types['.' + extension];
-			}
-		}
-		return null;
-	}
-
 	function get_created_string(date_object: Date, full_string = false) {
 		if (full_string) {
 			return (
@@ -191,11 +176,11 @@
 					<img
 						src={thumbnail_url}
 						alt="file_thumbnail"
-						class="object-contain size-full select-none block"
+						class="object-contain size-full select-none block p-1"
 						draggable="false"
 					/>
-				{:else if get_file_type(file)?.icon}
-					{@const Icon = get_file_type(file)?.icon}
+				{:else if supported_file_type_icon[get_file_type(file)?.display_name || '']}
+					{@const Icon = supported_file_type_icon[get_file_type(file)?.display_name || '']}
 					<Icon class="size-full p-2" />
 				{:else}
 					<FileIcon class="size-full p-2" />

control/frontend/src/components/TextInput.svelte

@@ -49,7 +49,10 @@
 			{title}:
 		</div>
 		{#if is_valid_function && focussed}
-			<div class={current_valid ? "text-green-400" : "text-red-400"} transition:fade={{ duration: 100 }}>
+			<div
+				class={current_valid ? 'text-green-400' : 'text-red-400'}
+				transition:fade={{ duration: 100 }}
+			>
 				{current_info}
 			</div>
 		{/if}