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>