diff --git a/src/lib/components/ListItem.svelte b/src/lib/components/ListItem.svelte
new file mode 100644
index 0000000..bc097fe
--- /dev/null
+++ b/src/lib/components/ListItem.svelte
@@ -0,0 +1,396 @@
+<script>
+	import { page } from '$app/stores';
+	import Cube from '$lib/icons/Cube.svelte';
+	import shortenFileSize from '$lib/helper/shortenFileSize';
+	import timeElapsed from '$lib/helper/timeElapsed';
+	import Trash from '$lib/icons/Trash.svelte';
+	import Edit from '$lib/icons/Edit.svelte';
+	import { createEventDispatcher } from 'svelte';
+
+	let { data, list, i } = $props(); // Holt `data` aus den Props
+	const dispatch = createEventDispatcher();
+	let item = list[i];
+
+	$inspect(item.show_button);
+	let oldName = $state(item.name);
+	console.log('alter Ego', oldName);
+	let test = true;
+
+	function deleteItem() {
+		console.log('delete');
+	}
+
+	function handleClick(ev) {
+		ev.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
+		ev.preventDefault(); // Stoppt die Standardaktion
+		console.log('show click', item.show_button);
+		oldName = item.name;
+		console.log('Button wurde geklickt!', oldName);
+	}
+
+	function handle_input(ev) {
+		// 	// let item = list[i];
+		console.log('Mina item', item.name, oldName);
+		console.log('input', ev.key);
+
+		if (ev.key == 'Escape') {
+			//	ev.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
+			ev.preventDefault(); // Stoppt die Standardaktion
+			item.name = oldName;
+			console.log('Escape', ev.key, 'abbgebrochen: ', item.name, oldName);
+			ev.target.blur(); //Entfernt den Fokus vom Input-Feld
+		}
+		if (ev.key == 'Enter') {
+			//ev.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
+			ev.preventDefault(); // Stoppt die Standardaktion
+			console.log('Enter', ev.key, 'erforlgreich: ', item.name, oldName);
+			ev.target.blur(); //Entfernt den Fokus vom Input-Feld
+			let wert = {
+				index: i,
+				oldName: oldName,
+				newName: item.name,
+				open: true
+			};
+
+			dispatch('update', wert);
+		}
+
+		// 		// if (ev.key == 'Escape') {
+		// 		// 	item.name = oldName;
+		// 		// 	// reshow button
+
+		// 		// 	item.show_button = true;
+
+		// 		// 	return;
+		// 	}
+
+		// 	if (ev.key == 'Enter') {
+		// 		console.log('Enter', ev.key);
+		// 		ev.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
+		// 		ev.preventDefault(); // Stoppt die Standardaktion
+		// 	}
+		// 	// if (ev.key == 'Enter') {
+		// 	// 	console.log('--- hitted');
+
+		// 	// 	let name_field = ev.currentTarget as HTMLElement | null;
+
+		// 	// 	let new_name = name_field
+		// 	// 		? name_field.textContent || (name_field as any).innerText || ''
+		// 	// 		: '';
+
+		// 	// 	if (new_name == '') {
+		// 	// 		alert('Bitte einen gültigen Namen eingeben.');
+
+		// 	// 		ev.preventDefault();
+
+		// 	// 		return;
+		// 	// 	}
+
+		// 	// 	// actual upload
+
+		// 	// 	// -------------
+
+		// 	// 	// to prevent from item being selected
+
+		// 	// 	ev.preventDefault();
+
+		// 	// 	// construct PUT URL
+
+		// 	// 	const url = $page.url;
+
+		// 	// 	console.log(url);
+
+		// 	// 	let data_obj: { new_name: string; old_name: string } = { new_name: '', old_name: '' };
+
+		// 	// 	data_obj['new_name'] = new_name;
+
+		// 	// 	data_obj['old_name'] =
+		// 	// 		ev.currentTarget && (ev.currentTarget as HTMLElement).id
+		// 	// 			? (ev.currentTarget as HTMLElement).id.split('__')[1]
+		// 	// 			: '';
+
+		// 	// 	open = true;
+
+		// 	// 	inProgress = true;
+
+		// 	// 	const response = await fetch(
+		// 	// 		url,
+
+		// 	// 		{ method: 'PUT', body: JSON.stringify(data_obj) }
+		// 	// 	);
+
+		// 	// 	inProgress = false;
+
+		// 	// 	if (!response.ok) {
+		// 	// 		err = true;
+
+		// 	// 		if (response.status == 400) {
+		// 	// 			let json_res = await response.json();
+
+		// 	// 			// alert(json_res['msg'])
+
+		// 	// 			return;
+		// 	// 		}
+
+		// 	// 		throw new Error(`Fehlgeschlagen: ${response.status}`);
+		// 	// 	} else {
+		// 	// 		uploadSuccessful();
+
+		// 	// 		setTimeout(() => {
+		// 	// 			window.location.reload();
+		// 	// 		}, 500);
+		// 	// 	}
+
+		// 	// 	// --- upload finished ---
+
+		// 	// 	return;
+		// 	// }
+		// }
+
+		// async (ev) => {
+		// 											let delete_item = window.confirm('Bist du sicher?');
+
+		// 											if (delete_item) {
+		// 												// bucket: tatort, name: <vorgang>/item-name
+
+		// 												let vorgang = $page.params.vorgang;
+
+		// 												let filename = '';
+
+		// 												if (ev && ev.currentTarget && (ev.currentTarget as HTMLElement).id) {
+		// 													filename = (ev.currentTarget as HTMLElement).id.split('del__')[1];
+		// 												}
+
+		// 												// delete request
+
+		// 												// --------------
+
+		// 												let url = new URL($page.url);
+
+		// 												url.pathname += `/${filename}`;
+
+		// 												console.log(`--- ${vorgang} + ${filename} + ${url}`);
+
+		// 												try {
+		// 													const response = await fetch(
+		// 														url,
+
+		// 														{ method: 'DELETE' }
+		// 													);
+
+		// 													if (response.status == 204) {
+		// 														setTimeout(() => {
+		// 															window.location.reload();
+		// 														}, 500);
+		// 													}
+		// 												} catch (error) {
+		// 													if (error instanceof Error) {
+		// 														console.log(error.message);
+		// 													} else {
+		// 														console.log(error);
+		// 													}
+		// 												}
+		// 											}
+	}
+</script>
+
+<a href="/view/{$page.params.vorgang}/{item.name}" class=" flex justify-between gap-x-6 py-5">
+	<div class=" flex gap-x-4">
+		<Cube class="h-auto " />
+		<div class="flex flex-col">
+			<div class="min-w-0 flex flex-auto">
+				{#if data.user.admin}
+					<input
+						type="text"
+						class="text-sm font-semibold leading-6 text-gray-900 border rounded p-1"
+						class:bg-red-500={!item.show_button}
+						bind:value={item.name}
+						on:focusout={() => (item.show_button = true)}
+						on:focusin={() => (item.show_button = false)}
+						on:keydown|stopPropagation={(ev) => {
+							handle_input(ev);
+						}}
+						on:click={(ev) => {
+							handleClick(ev);
+						}}
+					/>
+					{#if item.show_button}
+						<button>
+							<Edit />
+						</button>
+					{/if}
+					<button
+						style="padding: 2px"
+						id="del__{item.name}"
+						on:click|preventDefault={deleteItem}
+						aria-label="Datei löschen"
+					>
+						<Trash />
+					</button>
+				{:else}
+					<span class="inline-block min-w-[5px] text-sm font-semibold leading-6 text-gray-900"
+						>{item.name}</span
+					>
+				{/if}
+			</div>
+			<p class="mt-1 truncate text-xs leading-5 text-gray-500">
+				{shortenFileSize(item.size)}
+			</p>
+		</div>
+	</div>
+
+	<div class="hidden sm:flex sm:flex-col sm:items-end">
+		<p class="text-sm leading-6 text-gray-900">3D Tatort</p>
+
+		<p class="mt-1 text-xs leading-5 text-gray-500">
+			Zuletzt geändert <time datetime="2023-01-23T13:23Z"
+				>{timeElapsed(new Date(item.lastModified))}</time
+			>
+		</p>
+	</div>
+</a>
+
+<!-- <a
+						href="/view/{$page.params.vorgang}/{item.name}"
+						class=" flex justify-between gap-x-6 py-5"
+					>
+						<div class=" flex gap-x-4">
+							<Cube class="h-auto " />
+							<div class="flex flex-col">
+								<div class="min-w-0 flex-auto">
+									{#if admin}
+
+										 <span
+											id="label__{item.name}"
+											class="inline-block min-w-[5px] text-sm font-semibold leading-6 text-gray-900"
+											contenteditable={!item.show_button}
+										role="textbox"
+											tabindex="0"
+											aria-label="Dateiname bearbeiten"
+											on:focusout={() => {
+												defocus_element(i);
+											}}
+											on:keydown|stopPropagation={// event needed to identify ID
+
+											// TO-DO: check if event is needed or if index is sufficient
+
+											async (ev) => {
+												handle_input(ev, i);
+											}}>{item.name}</span
+										> -->
+
+<!-- https://iconduck.com/icons/192863/edit-rename
+
+										{#if item.show_button}
+											<button
+												class="p-1"
+												id="edit__{item.name}"
+												aria-label="Datei umbenennen"
+												on:click|preventDefault={(ev) => {
+													let text_field_id = `label__${item.name}`;
+
+													let text_field = document.getElementById(text_field_id);
+
+													if (text_field) {
+														text_field.setAttribute('contenteditable', 'true');
+
+														text_field.focus();
+
+														text_field.textContent = '';
+													}
+
+													// hide button
+
+													item.show_button = false;
+												}}
+											>
+												<Edit />
+											</button>
+										{/if}
+										<input
+											type="text"
+											class="text-sm font-semibold leading-6 text-gray-900 border rounded p-1"
+											class:bg-red-500={!item.show_button}
+											bind:value={item.name}
+											on:focusout={() => (item.show_button = true)}
+											on:focusin={() => (item.show_button = false)}
+											on:keydown|stopPropagation={async (event) => handle_input(event, i, item)}
+											on:click={(ev) => {
+												handleClick(ev, item);
+											}}
+										/>
+										<button
+											style="padding: 2px"
+											id="del__{item.name}"
+											on:click|preventDefault={async (ev) => {
+												let delete_item = window.confirm('Bist du sicher?');
+
+												if (delete_item) {
+													// bucket: tatort, name: <vorgang>/item-name
+
+													let vorgang = $page.params.vorgang;
+
+													let filename = '';
+
+													if (ev && ev.currentTarget && (ev.currentTarget as HTMLElement).id) {
+														filename = (ev.currentTarget as HTMLElement).id.split('del__')[1];
+													}
+
+													// delete request
+
+													// --------------
+
+													let url = new URL($page.url);
+
+													url.pathname += `/${filename}`;
+
+													console.log(`--- ${vorgang} + ${filename} + ${url}`);
+
+													try {
+														const response = await fetch(
+															url,
+
+															{ method: 'DELETE' }
+														);
+
+														if (response.status == 204) {
+															setTimeout(() => {
+																window.location.reload();
+															}, 500);
+														}
+													} catch (error) {
+														if (error instanceof Error) {
+															console.log(error.message);
+														} else {
+															console.log(error);
+														}
+													}
+												}
+											}}
+											aria-label="Datei löschen"
+										>
+											<Trash />
+										</button>
+									{:else}
+										<span
+											class="inline-block min-w-[5px] text-sm font-semibold leading-6 text-gray-900"
+											>{item.name}</span
+										>
+									{/if}
+								</div>
+								<p class="mt-1 truncate text-xs leading-5 text-gray-500">
+									{shortenFileSize(item.size)}
+								</p>
+							</div>
+						</div>
+
+						<div class="hidden sm:flex sm:flex-col sm:items-end">
+							<p class="text-sm leading-6 text-gray-900">3D Tatort</p>
+
+							<p class="mt-1 text-xs leading-5 text-gray-500">
+								Zuletzt geändert <time datetime="2023-01-23T13:23Z"
+									>{timeElapsed(new Date(item.lastModified))}</time
+								>
+							</p>
+						</div>
+					</a> -->
diff --git a/src/lib/components/ui/Alert.svelte b/src/lib/components/ui/Alert.svelte
index d461847..6c03fdd 100644
--- a/src/lib/components/ui/Alert.svelte
+++ b/src/lib/components/ui/Alert.svelte
@@ -1,3 +1,11 @@
+<script>
+	let { children, type = `info`, class: classNames = `` } = $props();
+</script>
+
+<div class="alert {type} {classNames}">
+	{@render children()}
+</div>
+
 <style>
 	/* Common */
 	.alert {
@@ -45,13 +53,3 @@
 		@apply bg-red-50;
 	}
 </style>
-
-<script>
-	export let type = 'info';
-	let classNames = '';
-	export { classNames as class };
-</script>
-
-<div class="alert {type} {classNames}">
-	<slot />
-</div>
diff --git a/src/lib/components/ui/Button.svelte b/src/lib/components/ui/Button.svelte
index dd05a7b..aa75a93 100644
--- a/src/lib/components/ui/Button.svelte
+++ b/src/lib/components/ui/Button.svelte
@@ -1,3 +1,43 @@
+<script>
+	// export let href = null;
+	// export let type = 'button';
+	// export let size = 'md';
+	// export let variant = 'primary';
+	// export let fullWidth = false;
+	// export let align = 'center';
+	// export let disabled = false;
+	// let classNames = '';
+	// export { classNames as class };
+
+	let {
+		children,
+		href = null,
+		type = 'button',
+		size = 'md',
+		variant = 'primary',
+		fullWidth = false,
+		align = 'center',
+		disabled = false,
+		class: classNames = '' // `classNames` korrekt umbenannt
+	} = $props();
+</script>
+
+{#if href}
+	<a on:click {href} class:w-full={fullWidth} class="button {variant} {size} {classNames} {align}">
+		{@render children()}
+	</a>
+{:else}
+	<button
+		on:click
+		{type}
+		{disabled}
+		class:w-full={fullWidth}
+		class="button {variant} {size} {classNames} {align}"
+	>
+		{@render children()}
+	</button>
+{/if}
+
 <style>
 	.button {
 		@apply inline-flex;
@@ -172,31 +212,3 @@
 		@apply justify-end;
 	}
 </style>
-
-<script>
-	export let href = null;
-	export let type = 'button';
-	export let size = 'md';
-	export let variant = 'primary';
-	export let fullWidth = false;
-	export let align = 'center';
-	export let disabled = false;
-	let classNames = '';
-	export { classNames as class };
-</script>
-
-{#if href}
-	<a on:click {href} class:w-full={fullWidth} class="button {variant} {size} {classNames} {align}"
-		><slot />
-	</a>
-{:else}
-	<button
-		on:click
-		{type}
-		{disabled}
-		class:w-full={fullWidth}
-		class="button {variant} {size} {classNames} {align}"
-	>
-		<slot />
-	</button>
-{/if}
diff --git a/src/lib/icons/Cube.svelte b/src/lib/icons/Cube.svelte
index 4992960..ff56e24 100644
--- a/src/lib/icons/Cube.svelte
+++ b/src/lib/icons/Cube.svelte
@@ -1,10 +1,15 @@
+<script>
+	let classNames = '';
+	export { classNames as class };
+</script>
+
 <svg
 	xmlns="http://www.w3.org/2000/svg"
 	fill="none"
 	viewBox="0 0 24 24"
 	stroke-width="1.5"
 	stroke="currentColor"
-	class=" w-6 h-6"
+	class=" w-6 h-6 {classNames}"
 >
 	<path
 		stroke-linecap="round"
diff --git a/src/lib/icons/File-rect.svelte b/src/lib/icons/File-rect.svelte
index f31a268..d62cfe7 100644
--- a/src/lib/icons/File-rect.svelte
+++ b/src/lib/icons/File-rect.svelte
@@ -1,7 +1,5 @@
 <script>
-	export let outline = false;
-	let classNames = '';
-	export { classNames as class };
+	let { outline = false, class: classNames = '' } = $props(); // Standardwert setzen
 </script>
 
 {#if outline}
diff --git a/src/lib/store.js b/src/lib/store.js
new file mode 100644
index 0000000..589cff4
--- /dev/null
+++ b/src/lib/store.js
@@ -0,0 +1,4 @@
+// store.js
+import { writable } from 'svelte/store';
+
+export const wert = writable("Hallo Welt");
diff --git a/src/routes/(angemeldet)/+page.svelte b/src/routes/(angemeldet)/+page.svelte
index f0dc309..888e901 100644
--- a/src/routes/(angemeldet)/+page.svelte
+++ b/src/routes/(angemeldet)/+page.svelte
@@ -4,8 +4,7 @@
 	import FileRect from '$lib/icons/File-rect.svelte';
 	import ListIcon from '$lib/icons/List-icon.svelte';
 
-	export let data;
-	export let outline = true;
+	let { data } = $props();
 </script>
 
 <div
@@ -44,7 +43,7 @@
 			<div
 				class="flex h-11 w-11 items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white"
 			>
-				<FileRect class=" group-hover:text-indigo-600" {outline} />
+				<FileRect class=" group-hover:text-indigo-600" outline={true} />
 			</div>
 			<a href="/view" class="mt-6 block font-semibold text-gray-900">
 				Ansicht
diff --git a/src/routes/(angemeldet)/list/[vorgang]/+page.svelte b/src/routes/(angemeldet)/list/[vorgang]/+page.svelte
index cb1130c..24bfb03 100644
--- a/src/routes/(angemeldet)/list/[vorgang]/+page.svelte
+++ b/src/routes/(angemeldet)/list/[vorgang]/+page.svelte
@@ -1,65 +1,94 @@
 <script lang="ts">
-	import { onMount, tick } from 'svelte';
-	import shortenFileSize from '$lib/helper/shortenFileSize';
-	import { getContext } from 'svelte';
-	import timeElapsed from '$lib/helper/timeElapsed';
+	import { onMount, tick, type MountOptions } from 'svelte';
+
+	import { page } from '$app/stores';
 
 	import Alert from '$lib/components/ui/Alert.svelte';
+
 	import Button from '$lib/components/ui/Button.svelte';
+
 	import Modal from '$lib/components/ui/Modal/Modal.svelte';
+
 	import ModalTitle from '$lib/components/ui/Modal/ModalTitle.svelte';
+
 	import ModalContent from '$lib/components/ui/Modal/ModalContent.svelte';
+
 	import ModalFooter from '$lib/components/ui/Modal/ModalFooter.svelte';
-	import Cube from '$lib/icons/Cube.svelte';
-	import Edit from '$lib/icons/Edit.svelte';
-	import Trash from '$lib/icons/Trash.svelte';
 
-	const page = getContext('page');
+	import ListItem from '$lib/components/ListItem.svelte';
 
-	/** @type {import('./$types').PageData} */
-	export let data;
-
-	console.log(`--- ${data.user.admin}`);
+	let { data } = $props();
+	let vorgang = $page.params.vorgang;
 
 	interface ListItem {
 		name: string;
 		size: number;
 		lastModified: string | number | Date;
 		show_button?: boolean;
-		// add other properties as needed
+		// 	// add other properties as needed
 	}
 
-	let list: ListItem[] = [];
-	$: list;
+	let list: ListItem[] = $state([]);
+	let admin = data.user.admin;
+	let wert = $state('Hallo');
+	$effect: console.log('TEst', wert);
+
+	$effect: {
+		console.log('Liste aktualisiert:', $inspect(list), $inspect(admin), $inspect(wert));
+	}
+
+	let open = $state(false);
+
+	$inspect(open);
 
-	let open = false;
-	$: open;
 	let inProgress = false;
-	$: inProgress;
-	let err = false;
-	$: err;
 
-	let rename_input;
-	$: rename_input;
+	$inspect(inProgress);
+
+	let err = false;
+
+	$inspect(err);
+
+	// let rename_input;
+
+	// $effect: rename_input;
+
+	$effect(() => {
+		console.log('Update-Ereignis erkannt:', wert);
+	});
+
+	let oldName = $state('');
+	let nameArray = list.map((obj) => obj.name);
+
+	$effect: console.log('Mina Testing oben:', $inspect(nameArray), $inspect(oldName));
 
 	onMount(async () => {
-		const response = await fetch('/api/list/' + page.params.vorgang);
+		const response = await fetch('/api/list/' + vorgang);
+
 		const stream = response.body;
+
 		if (!stream) return;
 
 		const reader = stream.getReader();
 
 		while (true) {
 			const { done, value } = await reader.read();
+
 			if (done) return;
 
 			const objs = new TextDecoder()
+
 				.decode(value)
+
 				.split('\n')
+
 				.filter((i) => i.length > 0)
+
 				.map((i) => JSON.parse(i));
 
 			console.log(objs);
+			wert = 'Ich kann nicht mehr!';
+
 			list = list.concat(objs);
 
 			list = list.map((item) => {
@@ -69,149 +98,154 @@
 		}
 	});
 
+	console.log('Mina List', list);
+
 	function uploadSuccessful() {
 		console.log('reset');
+
 		open = false;
 	}
 
 	function defocus_element(i: number) {
 		let item = list[i];
+
 		let text_field_id = `label__${item.name}`;
 
 		let text_field = document.getElementById(text_field_id);
+
 		if (text_field) {
 			text_field.setAttribute('contenteditable', 'false');
+
 			text_field.textContent = item.name;
 		}
 
 		// reshow button
+
 		list[i].show_button = true;
+
 		return;
 	}
 
-	async function handle_input(ev: KeyboardEvent, i: number) {
+	async function handle_input(ev: KeyboardEvent, i: number, itemObj: any) {
 		let item = list[i];
+		console.log('Mina item', item, itemObj, oldName);
+		console.log('input', ev.key);
 		if (ev.key == 'Escape') {
-			let text_field_id = `label__${item.name}`;
-
-			let text_field = document.getElementById(text_field_id);
-			if (text_field) {
-				text_field.setAttribute('contenteditable', 'false');
-				text_field.textContent = item.name;
-			}
-
-			// reshow button
-			item.show_button = true;
-			return;
+			// ev.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
+			// ev.preventDefault(); // Stoppt die Standardaktion
+			console.log('Escape', ev.key);
+			itemObj.name = oldName;
+			itemObj.show_button = true;
 		}
+		// if (ev.key == 'Escape') {
+		// 	item.name = oldName;
+		// 	// reshow button
+
+		// 	item.show_button = true;
+
+		// 	return;
+		// }
+
 		if (ev.key == 'Enter') {
-			console.log('--- hitted');
-			let name_field = ev.currentTarget as HTMLElement | null;
-			let new_name = name_field
-				? name_field.textContent || (name_field as any).innerText || ''
-				: '';
-
-			if (new_name == '') {
-				alert('Bitte einen gültigen Namen eingeben.');
-				ev.preventDefault();
-				return;
-			}
-
-			// actual upload
-			// -------------
-
-			// to prevent from item being selected
-			ev.preventDefault();
-
-			// construct PUT URL
-			const url = $page.url;
-			console.log(url);
-
-			let data_obj: { new_name: string; old_name: string } = { new_name: '', old_name: '' };
-			data_obj['new_name'] = new_name;
-			data_obj['old_name'] =
-				ev.currentTarget && (ev.currentTarget as HTMLElement).id
-					? (ev.currentTarget as HTMLElement).id.split('__')[1]
-					: '';
-
-			open = true;
-			inProgress = true;
-
-			const response = await fetch(url, { method: 'PUT', body: JSON.stringify(data_obj) });
-
-			inProgress = false;
-
-			if (!response.ok) {
-				err = true;
-				if (response.status == 400) {
-					let json_res = await response.json();
-					// alert(json_res['msg'])
-					return;
-				}
-				throw new Error(`Fehlgeschlagen: ${response.status}`);
-			} else {
-				uploadSuccessful();
-				setTimeout(() => {
-					window.location.reload();
-				}, 500);
-			}
-
-			// --- upload finished ---
-
-			return;
+			console.log('Enter', ev.key);
+			ev.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
+			ev.preventDefault(); // Stoppt die Standardaktion
 		}
+		// if (ev.key == 'Enter') {
+		// 	console.log('--- hitted');
+
+		// 	let name_field = ev.currentTarget as HTMLElement | null;
+
+		// 	let new_name = name_field
+		// 		? name_field.textContent || (name_field as any).innerText || ''
+		// 		: '';
+
+		// 	if (new_name == '') {
+		// 		alert('Bitte einen gültigen Namen eingeben.');
+
+		// 		ev.preventDefault();
+
+		// 		return;
+		// 	}
+
+		// 	// actual upload
+
+		// 	// -------------
+
+		// 	// to prevent from item being selected
+
+		// 	ev.preventDefault();
+
+		// 	// construct PUT URL
+
+		// 	const url = $page.url;
+
+		// 	console.log(url);
+
+		// 	let data_obj: { new_name: string; old_name: string } = { new_name: '', old_name: '' };
+
+		// 	data_obj['new_name'] = new_name;
+
+		// 	data_obj['old_name'] =
+		// 		ev.currentTarget && (ev.currentTarget as HTMLElement).id
+		// 			? (ev.currentTarget as HTMLElement).id.split('__')[1]
+		// 			: '';
+
+		// 	open = true;
+
+		// 	inProgress = true;
+
+		// 	const response = await fetch(
+		// 		url,
+
+		// 		{ method: 'PUT', body: JSON.stringify(data_obj) }
+		// 	);
+
+		// 	inProgress = false;
+
+		// 	if (!response.ok) {
+		// 		err = true;
+
+		// 		if (response.status == 400) {
+		// 			let json_res = await response.json();
+
+		// 			// alert(json_res['msg'])
+
+		// 			return;
+		// 		}
+
+		// 		throw new Error(`Fehlgeschlagen: ${response.status}`);
+		// 	} else {
+		// 		uploadSuccessful();
+
+		// 		setTimeout(() => {
+		// 			window.location.reload();
+		// 		}, 500);
+		// 	}
+
+		// 	// --- upload finished ---
+
+		// 	return;
+		// }
 	}
 
-	/**
-	 * @param {any} item
-	 */
-	function clickEdit(item: any) {
-		let text_field_id = `label__${item.name}`;
-
-		let text_field = document.getElementById(text_field_id);
-		if (text_field) {
-			text_field.setAttribute('contenteditable', 'true');
-			text_field.focus();
-			text_field.textContent = '';
-		}
-
-		// hide button
-		item.show_button = false;
+	function handleClick(event: MouseEvent, obj: ListItem) {
+		event.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
+		event.preventDefault(); // Stoppt die Standardaktion
+		console.log('show click', obj.show_button);
+		oldName = obj.name;
+		console.log('Button wurde geklickt!', oldName);
 	}
 
-	async function clickDelete(item: any, ev: Event) {
-		let delete_item = window.confirm('Bist du sicher?');
+	function toggleButton(item: ListItem, show: boolean) {
+		// item.show_button = !item.show_button;
 
-		if (delete_item) {
-			// bucket: tatort, name: <vorgang>/item-name
-			let vorgang = $page.params.vorgang;
-			let filename = '';
-			if (ev && ev.currentTarget && (ev.currentTarget as HTMLElement).id) {
-				filename = (ev.currentTarget as HTMLElement).id.split('del__')[1];
-			}
+		item.show_button = show;
+		console.log('show toggle', item, show, item.show_button);
+	}
 
-			// delete request
-			// --------------
-
-			let url = new URL($page.url);
-			url.pathname += `/${filename}`;
-
-			console.log(`--- ${vorgang} + ${filename} + ${url}`);
-			try {
-				const response = await fetch(url, { method: 'DELETE' });
-				if (response.status == 204) {
-					setTimeout(() => {
-						window.location.reload();
-					}, 500);
-				}
-			} catch (error) {
-				if (error instanceof Error) {
-					console.log(error.message);
-				} else {
-					console.log(error);
-				}
-			}
-		}
+	function handleUpdate(ev: CustomEvent) {
+		console.log('Update erfolgreich', ev.detail.newName);
 	}
 </script>
 
@@ -219,92 +253,156 @@
 	<div class="flex flex-col items-center justify-center w-full">
 		<h1 class="text-xl">Vorgang {$page.params.vorgang}</h1>
 	</div>
+
 	<div class="mx-auto flex justify-center max-w-7xl h-full">
 		<ul class="divide-y divide-gray-100">
 			{#each list as item, i}
 				<li>
-					<div class=" flex gap-x-4">
-						<a
-							href="/view/{$page.params.vorgang}/{item.name}"
-							class=" flex justify-between gap-x-6 py-5"
-							aria-label="zum 3D-modell"
-						>
-							<Cube />
-						</a>
-						<div class="min-w-0 flex-auto">
-							{#if data.user.admin}
-								<span
-									id="label__{item.name}"
-									class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
-									contenteditable={!item.show_button}
-									role="textbox"
-									tabindex="0"
-									aria-label="Dateiname bearbeiten"
-									on:focusout={() => {
-										defocus_element(i);
-									}}
-									on:keydown|stopPropagation={// event needed to identify ID
-									// TO-DO: check if event is needed or if index is sufficient
-									async (ev) => {
-										handle_input(ev, i);
-									}}>{item.name}</span
-								>
+					<!-- <a
+						href="/view/{$page.params.vorgang}/{item.name}"
+						class=" flex justify-between gap-x-6 py-5"
+					>
+						<div class=" flex gap-x-4">
+							<Cube class="h-auto " />
+							<div class="flex flex-col">
+								<div class="min-w-0 flex-auto">
+									{#if admin}
+										 <span
+											id="label__{item.name}"
+											class="inline-block min-w-[5px] text-sm font-semibold leading-6 text-gray-900"
+											contenteditable={!item.show_button}
+											role="textbox"
+											tabindex="0"
+											aria-label="Dateiname bearbeiten"
+											on:focusout={() => {
+												defocus_element(i);
+											}}
+											on:keydown|stopPropagation={// event needed to identify ID
 
-								<input
-									class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
-									type="text"
-									name=""
-									on:keydown|stopPropagation={// event needed to identify ID
-									// TO-DO: check if event is needed or if index is sufficient
-									async (ev) => {
-										handle_input(ev, i);
-									}}
-									bind:value={item.name}
-									id="label-i__{item.name}"
-								/>
-								<!-- disabled={item.show_button} -->
-								<!-- https://iconduck.com/icons/192863/edit-rename -->
+											// TO-DO: check if event is needed or if index is sufficient
 
-								{#if item.show_button}
-									<button
-										style="padding: 2px"
-										id="edit__{item.name}"
-										aria-label="Datei umbenennen"
-										on:click|preventDefault={(ev) => {
-											clickEdit(item);
-										}}
-									>
-										<Edit />
-									</button>
-								{/if}
-								<button
-									style="padding: 2px"
-									id="del__{item.name}"
-									on:click|preventDefault={async (ev) => {
-										clickDelete(item, ev);
-									}}
-									aria-label="Datei löschen"
+											async (ev) => {
+												handle_input(ev, i);
+											}}>{item.name}</span
+										>
+
+										https://iconduck.com/icons/192863/edit-rename
+
+										{#if item.show_button}
+											<button
+												class="p-1"
+												id="edit__{item.name}"
+												aria-label="Datei umbenennen"
+												on:click|preventDefault={(ev) => {
+													let text_field_id = `label__${item.name}`;
+
+													let text_field = document.getElementById(text_field_id);
+
+													if (text_field) {
+														text_field.setAttribute('contenteditable', 'true');
+
+														text_field.focus();
+
+														text_field.textContent = '';
+													}
+
+													// hide button
+
+													item.show_button = false;
+												}}
+											>
+												<Edit />
+											</button>
+										{/if}
+										<input
+											type="text"
+											class="text-sm font-semibold leading-6 text-gray-900 border rounded p-1"
+											class:bg-red-500={!item.show_button}
+											bind:value={item.name}
+											on:focusout={() => (item.show_button = true)}
+											on:focusin={() => (item.show_button = false)}
+											on:keydown|stopPropagation={async (event) => handle_input(event, i, item)}
+											on:click={(ev) => {
+												handleClick(ev, item);
+											}}
+										/>
+										<button
+											style="padding: 2px"
+											id="del__{item.name}"
+											on:click|preventDefault={async (ev) => {
+												let delete_item = window.confirm('Bist du sicher?');
+
+												if (delete_item) {
+													// bucket: tatort, name: <vorgang>/item-name
+
+													let vorgang = $page.params.vorgang;
+
+													let filename = '';
+
+													if (ev && ev.currentTarget && (ev.currentTarget as HTMLElement).id) {
+														filename = (ev.currentTarget as HTMLElement).id.split('del__')[1];
+													}
+
+													// delete request
+
+													// --------------
+
+													let url = new URL($page.url);
+
+													url.pathname += `/${filename}`;
+
+													console.log(`--- ${vorgang} + ${filename} + ${url}`);
+
+													try {
+														const response = await fetch(
+															url,
+
+															{ method: 'DELETE' }
+														);
+
+														if (response.status == 204) {
+															setTimeout(() => {
+																window.location.reload();
+															}, 500);
+														}
+													} catch (error) {
+														if (error instanceof Error) {
+															console.log(error.message);
+														} else {
+															console.log(error);
+														}
+													}
+												}
+											}}
+											aria-label="Datei löschen"
+										>
+											<Trash />
+										</button>
+									{:else}
+										<span
+											class="inline-block min-w-[5px] text-sm font-semibold leading-6 text-gray-900"
+											>{item.name}</span
+										>
+									{/if}
+								</div>
+								<p class="mt-1 truncate text-xs leading-5 text-gray-500">
+									{shortenFileSize(item.size)}
+								</p>
+							</div>
+						</div>
+
+						<div class="hidden sm:flex sm:flex-col sm:items-end">
+							<p class="text-sm leading-6 text-gray-900">3D Tatort</p>
+
+							<p class="mt-1 text-xs leading-5 text-gray-500">
+								Zuletzt geändert <time datetime="2023-01-23T13:23Z"
+									>{timeElapsed(new Date(item.lastModified))}</time
 								>
-									<Trash />
-								</button>
-							{:else}
-								<span class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
-									>{item.name}</span
-								>
-							{/if}
-							<p class="mt-1 truncate text-xs leading-5 text-gray-500">
-								{shortenFileSize(item.size)}
 							</p>
 						</div>
-					</div>
-					<div class="hidden sm:flex sm:flex-col sm:items-end">
-						<p class="text-sm leading-6 text-gray-900">3D Tatort</p>
-						<p class="mt-1 text-xs leading-5 text-gray-500">
-							Zuletzt geändert <time datetime="2023-01-23T13:23Z"
-								>{timeElapsed(new Date(item.lastModified))}</time
-							>
-						</p>
-					</div>
+					</a> -->
+
+					<ListItem {data} {list} {i} on:update={handleUpdate} />
 				</li>
 			{/each}
 		</ul>
@@ -315,10 +413,12 @@
 			{#if inProgress}
 				<p class="py-2 mb-1">Vorgang läuft...</p>
 			{/if}
+
 			{#if err}
 				<Alert class="w-full" type="error">Fehler beim Umbenennen</Alert>
 			{/if}
 		</ModalContent>
+
 		<ModalFooter><Button disabled={inProgress} on:click={uploadSuccessful}>Ok</Button></ModalFooter>
 	</Modal>
 </div>