erstellt EditableItem mit frontend-error-handling eingefügt caselist, crimelist

src/routes/(angemeldet)/list/+page.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
-	import Trash from '$lib/icons/Trash.svelte';
 	import Folder from '$lib/icons/Folder.svelte';
-	import type { PageData } from '../$types';
+	import EditableItem from '$lib/components/EditableItem.svelte';
 
-	export let data: PageData;
+	export let data;
+	export let editingId: number;
 
-	const caseList = data.caseList;
+	interface ListItem {
+		name: string;
+		token?: string;
+		// add other properties as needed
+	}
+
+	const caseList: ListItem[] = data.caseList;
 
 	async function delete_item(ev: Event) {
 		let delete_item = window.confirm('Bist du sicher?');
@@ -14,7 +20,7 @@
 			const target = ev.currentTarget as HTMLElement | null;
 			if (!target) return;
 			let filename = target.id.split('del__')[1];
-			
+
 			// delete request
 			// --------------
 
@@ -44,27 +50,31 @@
 	</div>
 	<div class="mx-auto flex justify-center max-w-7xl h-full">
 		<ul role="list" class="divide-y divide-gray-100">
-			{#each caseList as item}
+			{#each caseList as item, i}
 				<li>
 					<a href="/list/{item.name}?token={item.token}" class="flex justify-between gap-x-6 py-5">
 						<div class="flex gap-x-4">
 							<!-- Ordner -->
 							<Folder />
 							<div class="min-w-0 flex-auto">
-								<span class="text-sm font-semibold leading-6 text-gray-900">{item.name}</span>
-								<!-- Delete button -->
-								<button
-									style="padding: 2px"
-									id="del__{item.name}"
-									on:click|preventDefault={delete_item}
-									aria-label="Vorgang {item.name} löschen"
-								>
-									<Trash />
-								</button>
+								<EditableItem
+									class=""
+									id={i}
+									value={item.name}
+									editing={editingId === i}
+									on:editStart={() => (editingId = i)}
+									variant="casename"
+									existings={caseList}
+									on:save={(e) => console.log('Gespeichert:', e.detail)}
+									on:delete={(e) => {
+										console.log('Gelöscht:', e.detail);
+										delete_item(e);
+									}}
+								></EditableItem>
+							</div>
+							<div class="hidden sm:flex sm:flex-col sm:items-end">
+								<p class="text-sm leading-6 text-gray-900">Vorgang</p>
 							</div>
-						</div>
-						<div class="hidden sm:flex sm:flex-col sm:items-end">
-							<p class="text-sm leading-6 text-gray-900">Vorgang</p>
 						</div>
 					</a>
 				</li>