change case loading in server side mode, made case list functional

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

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import Trash from '$lib/icons/Trash.svelte';
+	import Folder from '$lib/icons/Folder.svelte';
+	import type { PageData } from '../$types';
+
+	export let data: PageData;
+
+	const caseList = data.caseList;
+
+	async function delete_item(ev: Event) {
+		let delete_item = window.confirm('Bist du sicher?');
+
+		if (delete_item) {
+			const target = ev.currentTarget as HTMLElement | null;
+			if (!target) return;
+			let filename = target.id.split('del__')[1];
+			
+			// delete request
+			// --------------
+
+			let url = `/api/list/${filename}`;
+
+			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>
+
+<div class="-z-10 bg-white">
+	<div class="flex flex-col items-center justify-center w-full">
+		<h1 class="text-xl">Liste der Vorgänge</h1>
+	</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}
+				<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>
+							</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>
+			{/each}
+		</ul>
+	</div>
+</div>
+
+<style>
+	ul {
+		min-width: 24rem;
+	}
+</style>