From b63110c72eb7b8853e7e38ee6d3fb4c942e311d5 Mon Sep 17 00:00:00 2001
From: pdamianik <39028343+pdamianik@users.noreply.github.com>
Date: Fri, 22 Mar 2024 11:34:02 +0100
Subject: [PATCH 01/15] fix: cannot switch route from index

Signed-off-by: pdamianik <39028343+pdamianik@users.noreply.github.com>
---
 app/src/routes/+page.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index 7ec3628..24f4564 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -14,7 +14,9 @@
 	onMount(() => {
 		return () => {
 			cancel_changes.forEach((cancel) => {
-				cancel();
+				if (cancel) {
+					cancel();
+				}
 			});
 		};
 	});

From b346b6234497c8fcaec9598e7c381fefd4e60ab1 Mon Sep 17 00:00:00 2001
From: jproksch <jproksch@student.tgm.ac.at>
Date: Fri, 15 Mar 2024 11:29:46 +0100
Subject: [PATCH 02/15] =?UTF-8?q?feat:=20Eingabefeld=20f=C3=BCr=20Synchron?=
 =?UTF-8?q?isation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/routes/settings/+page.svelte | 34 +++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/app/src/routes/settings/+page.svelte b/app/src/routes/settings/+page.svelte
index abc22d1..62edd17 100644
--- a/app/src/routes/settings/+page.svelte
+++ b/app/src/routes/settings/+page.svelte
@@ -1,3 +1,35 @@
+<script lang="ts">
+    import { Input, Button, Label } from 'flowbite-svelte';
+    let link: string = '';
+    let isValidLink: boolean = false;
+
+    function validateLink(value: string): boolean {
+        value = value.trim();
+        const pattern: RegExp = /^https?:\/\/.+/;
+        return pattern.test(value);
+    }
+    $: isValidLink = link !== '' && validateLink(link);
+</script>
+
 <svelte:head>
-	<title>Settings - G'schäft'lhaberer</title>
+    <title>Settings - G'schäft'lhaberer</title>
 </svelte:head>
+
+
+<form on:submit|preventDefault>
+    <div class="flex flex-col gap-4">
+		<Label for="first_name" class="mb-2">First name</Label>
+        <Input
+            bind:value={link}
+            on:input={() => isValidLink = validateLink(link)}
+            placeholder="https://example.com"
+            invalid={!isValidLink && link !== ''}
+            aria-label="Link eingeben"
+            class={isValidLink ? 'valid-input' : link !== '' ? 'invalid-input' : ''}
+        />
+
+        <Button type="submit" disabled={!isValidLink} class={isValidLink ? 'valid-button' : ''}>
+            Bestätigen
+        </Button>
+    </div>
+</form>

From 05901a86889213ab45452591afbf42e0ea266686 Mon Sep 17 00:00:00 2001
From: jproksch <jproksch@student.tgm.ac.at>
Date: Fri, 22 Mar 2024 10:12:25 +0100
Subject: [PATCH 03/15] Synch PouchDB to remote CouchDB

---
 app/src/routes/settings/+page.svelte | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/app/src/routes/settings/+page.svelte b/app/src/routes/settings/+page.svelte
index 62edd17..8a178d6 100644
--- a/app/src/routes/settings/+page.svelte
+++ b/app/src/routes/settings/+page.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
     import { Input, Button, Label } from 'flowbite-svelte';
+    import PouchDB from 'pouchdb';
     let link: string = '';
     let isValidLink: boolean = false;
+    let replicationError: string | null = null;
 
     function validateLink(value: string): boolean {
         value = value.trim();
@@ -9,16 +11,27 @@
         return pattern.test(value);
     }
     $: isValidLink = link !== '' && validateLink(link);
+
+    async function handleReplication() {
+        if (isValidLink) {
+            try {
+                await PouchDB.replicate('shopping', link);
+                alert("Replikation erfolgreich!");
+            } catch (error) {
+                console.error("Replikationsfehler: ", error);
+                replicationError = "Fehler bei der Replikation. Bitte überprüfen Sie den Link und versuchen Sie es erneut.";
+            }
+        }
+    }
 </script>
 
 <svelte:head>
     <title>Settings - G'schäft'lhaberer</title>
 </svelte:head>
 
-
-<form on:submit|preventDefault>
+<form on:submit|preventDefault={handleReplication}>
     <div class="flex flex-col gap-4">
-		<Label for="first_name" class="mb-2">First name</Label>
+        <Label for="first_name" class="mb-2">First name</Label>
         <Input
             bind:value={link}
             on:input={() => isValidLink = validateLink(link)}
@@ -28,8 +41,11 @@
             class={isValidLink ? 'valid-input' : link !== '' ? 'invalid-input' : ''}
         />
 
-        <Button type="submit" disabled={!isValidLink} class={isValidLink ? 'valid-button' : ''}>
+        <Button color="green" type="submit" disabled={!isValidLink} class={isValidLink ? 'valid-button' : ''}>
             Bestätigen
         </Button>
+        {#if replicationError}
+            <p class="text-red-500">{replicationError}</p>
+        {/if}
     </div>
 </form>

From 2093e87f50e6ffcdf7b439c6d49a634aa00b0d8a Mon Sep 17 00:00:00 2001
From: jproksch <jproksch@student.tgm.ac.at>
Date: Fri, 22 Mar 2024 11:37:20 +0100
Subject: [PATCH 04/15] db synch und Synchhandeling

---
 app/src/routes/settings/+page.svelte | 54 ++++++++++++++++++++--------
 1 file changed, 39 insertions(+), 15 deletions(-)

diff --git a/app/src/routes/settings/+page.svelte b/app/src/routes/settings/+page.svelte
index 8a178d6..a4eb324 100644
--- a/app/src/routes/settings/+page.svelte
+++ b/app/src/routes/settings/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { Input, Button, Label } from 'flowbite-svelte';
-    import PouchDB from 'pouchdb';
+	import { db } from '$lib/db';
+    import { Input, Button, P, Heading, Label } from 'flowbite-svelte';
     let link: string = '';
-    let isValidLink: boolean = false;
+    let request_success = false;
     let replicationError: string | null = null;
 
     function validateLink(value: string): boolean {
@@ -12,15 +12,36 @@
     }
     $: isValidLink = link !== '' && validateLink(link);
 
+    // Handler für Sync-Ereignisse
+    function onSyncChange(change: any) {
+        console.log('Sync change:', change);
+    }
+
+    function onSyncPaused(error: any) {
+        if (error) {
+            console.log('Sync paused due to replication error', error);
+        } else {
+            console.log('Sync paused/resumed');
+        }
+    }
+
+    function onSyncError(error: any) {
+        console.error('Sync error:', error);
+        replicationError = "Fehler bei der Synchronisation. Bitte überprüfen Sie den Link und versuchen Sie es erneut.";
+    }
+
     async function handleReplication() {
         if (isValidLink) {
-            try {
-                await PouchDB.replicate('shopping', link);
-                alert("Replikation erfolgreich!");
-            } catch (error) {
-                console.error("Replikationsfehler: ", error);
-                replicationError = "Fehler bei der Replikation. Bitte überprüfen Sie den Link und versuchen Sie es erneut.";
-            }
+            const opts = { live: true, retry: true };
+            request_success = false;
+            replicationError = null;
+            $db.replicate.from(link).on('complete', function() {
+                $db.sync(link, opts)
+                    .on('change', onSyncChange)
+                    .on('paused', onSyncPaused)
+                    .on('error', onSyncError);
+                request_success = true;
+            }).on('error', onSyncError);
         }
     }
 </script>
@@ -30,11 +51,11 @@
 </svelte:head>
 
 <form on:submit|preventDefault={handleReplication}>
-    <div class="flex flex-col gap-4">
-        <Label for="first_name" class="mb-2">First name</Label>
+    <Heading class="my-5">Settings</Heading>
+    <div class="flex flex-col gap-4 mt-6">
+        <Label>Link für die Synchronisation</Label>
         <Input
-            bind:value={link}
-            on:input={() => isValidLink = validateLink(link)}
+            bind:value={link} 
             placeholder="https://example.com"
             invalid={!isValidLink && link !== ''}
             aria-label="Link eingeben"
@@ -45,7 +66,10 @@
             Bestätigen
         </Button>
         {#if replicationError}
-            <p class="text-red-500">{replicationError}</p>
+            <P class="text-red-500">{replicationError}</P>
+        {/if}
+        {#if request_success}
+            <P>Einmalige Replikation abgeschlossen. Kontinuierliche Synchronisation gestartet.</P>
         {/if}
     </div>
 </form>

From 31792269e7551fde67d6d6870147ceaafb84ea0f Mon Sep 17 00:00:00 2001
From: jdoppelhofer <jdoppelhofer@student.tgm.ac.at>
Date: Fri, 5 Apr 2024 10:33:55 +0200
Subject: [PATCH 05/15] =?UTF-8?q?F=C3=BCge=20L=C3=B6schfunktion=20f=C3=BCr?=
 =?UTF-8?q?=20Einkaufslisten=20hinzu=20und=20erstelle=20Button=20zum=20Ers?=
 =?UTF-8?q?tellen=20einer=20neuen=20Liste?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/lib/components/ProductList.svelte    | 30 +++++++++++++++++++-
 app/src/routes/+page.svelte                  |  9 ++++++
 app/src/routes/createlist/+page.svelte       |  4 ++-
 app/src/routes/listen/+page.svelte           |  0
 app/src/routes/listen/erstellen/+page.svelte |  0
 5 files changed, 41 insertions(+), 2 deletions(-)
 delete mode 100644 app/src/routes/listen/+page.svelte
 delete mode 100644 app/src/routes/listen/erstellen/+page.svelte

diff --git a/app/src/lib/components/ProductList.svelte b/app/src/lib/components/ProductList.svelte
index d7489eb..7c42ca4 100644
--- a/app/src/lib/components/ProductList.svelte
+++ b/app/src/lib/components/ProductList.svelte
@@ -3,8 +3,36 @@
 	import { Card, Heading } from 'flowbite-svelte';
 
 	export let productlist: ExistingDocument<ProductList>;
+
+	import { db as DB } from '$lib/db';
+	import { get } from 'svelte/store';
+
+	async function deleteList(id: string) {
+		const db = get(DB);
+		const list = await db.get(id);
+		await db.remove(list);
+	}
 </script>
 
+<head>
+	<link
+		href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+		rel="stylesheet"
+	/>
+</head>
+
 <Card href={`/items/${productlist._id}`} {...$$restProps}>
-	<Heading tag="h4">{productlist.name}</Heading>
+	<div class="flex items-center justify-between">
+		<Heading tag="h4">{productlist.name}</Heading>
+		<button
+			class="inline-flex items-center justify-center rounded bg-red-500 px-4 py-2 font-bold text-white hover:bg-red-700"
+			on:click|stopPropagation|preventDefault={() => {
+				if (confirm('Möchten Sie diese Liste wirklich löschen?')) {
+					deleteList(productlist._id);
+				}
+			}}
+		>
+			<i class="fas fa-trash-alt"></i>
+		</button>
+	</div>
 </Card>
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index a7a0b2f..46c536d 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -62,4 +62,13 @@
 	{:catch error}
 		<Alert color="red">Ein Fehler ist aufgetreten: {error.message}</Alert>
 	{/await}
+
+	<!-- Button zum Erstellen einer neuen Liste -->
+	<a
+		href="/createlist"
+		class="mt-5 inline-flex items-center justify-center rounded bg-green-500 px-4 py-2 font-bold text-white hover:bg-green-700"
+	>
+		<i class="fas fa-plus mr-2"></i>
+		<span>Neue Liste erstellen</span>
+	</a>
 </div>
diff --git a/app/src/routes/createlist/+page.svelte b/app/src/routes/createlist/+page.svelte
index c3356c0..70bbfef 100644
--- a/app/src/routes/createlist/+page.svelte
+++ b/app/src/routes/createlist/+page.svelte
@@ -2,6 +2,7 @@
 	import { db as DB } from '$lib/db';
 	import { get } from 'svelte/store';
 	import { Button, Input, Label } from 'flowbite-svelte';
+	import { goto } from '$app/navigation';
 
 	let name = '';
 
@@ -14,11 +15,12 @@
 				version: ''
 			});
 			name = '';
+			goto('/');
 		}
 	}
 </script>
 
-<div class="flex min-h-screen flex-col items-center justify-center bg-gray-100">
+<div class="flex min-h-screen flex-col items-center justify-center">
 	<h1 class="mb-8 text-3xl font-bold text-gray-700">Neue Einkaufsliste erstellen</h1>
 
 	<form
diff --git a/app/src/routes/listen/+page.svelte b/app/src/routes/listen/+page.svelte
deleted file mode 100644
index e69de29..0000000
diff --git a/app/src/routes/listen/erstellen/+page.svelte b/app/src/routes/listen/erstellen/+page.svelte
deleted file mode 100644
index e69de29..0000000

From 6e62f4776e996485c3c0592b06e7e8f59f3ba7b4 Mon Sep 17 00:00:00 2001
From: jdoppelhofer <jdoppelhofer@student.tgm.ac.at>
Date: Fri, 5 Apr 2024 10:34:47 +0200
Subject: [PATCH 06/15] =?UTF-8?q?F=C3=BCge=20ListeErstellenForm-Komponente?=
 =?UTF-8?q?=20hinzu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/components/ListeErstellenForm.svelte  | 49 -------------------
 1 file changed, 49 deletions(-)
 delete mode 100644 app/src/lib/components/ListeErstellenForm.svelte

diff --git a/app/src/lib/components/ListeErstellenForm.svelte b/app/src/lib/components/ListeErstellenForm.svelte
deleted file mode 100644
index 1dc25ab..0000000
--- a/app/src/lib/components/ListeErstellenForm.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script>
-	import { db } from '$lib/db';
-	import { goto } from '$app/navigation';
-	export let aktuelleListe = null;
-
-	let titel = aktuelleListe ? aktuelleListe.titel : '';
-	let artikel = aktuelleListe ? aktuelleListe.artikel : [];
-
-	let artikelName = '';
-	let menge = 1;
-	let geschäft = '';
-
-	async function speichereListe() {
-		const liste = {
-			_id: aktuelleListe ? aktuelleListe._id : new Date().toISOString(),
-			titel,
-			artikel,
-			type: 'shoppingList'
-		};
-
-		await db.put(liste);
-		goto('/listen');
-	}
-
-	function artikelHinzufügen() {
-		artikel.push({ name: artikelName, menge, geschäft });
-		artikelName = '';
-		menge = 1;
-		geschäft = '';
-	}
-</script>
-
-<form on:submit|preventDefault={speichereListe}>
-	<input bind:value={titel} placeholder="Listentitel" required />
-	<input bind:value={artikelName} placeholder="Artikelname" />
-	<input type="number" bind:value={menge} min="1" />
-	<input bind:value={geschäft} placeholder="Geschäft" />
-	<button type="button" on:click={artikelHinzufügen}>Artikel hinzufügen</button>
-
-	{#if artikel.length > 0}
-		<ul>
-			{#each artikel as item}
-				<li>{item.name} - {item.menge} - {item.geschäft}</li>
-			{/each}
-		</ul>
-	{/if}
-
-	<button type="submit">Liste speichern</button>
-</form>

From a3bf1fb5afaeade3adb4f85a8efd72a60c90c21d Mon Sep 17 00:00:00 2001
From: pdamianik <39028343+pdamianik@users.noreply.github.com>
Date: Thu, 11 Apr 2024 13:20:11 +0200
Subject: [PATCH 07/15] Add product view

Signed-off-by: pdamianik <39028343+pdamianik@users.noreply.github.com>
---
 app/src/lib/components/Product.svelte  | 13 ++++++
 app/src/lib/db.ts                      |  9 +++-
 app/src/routes/+page.svelte            |  6 +--
 app/src/routes/items/[id]/+page.svelte | 64 ++++++++++++++++++++++++++
 app/src/routes/items/[id]/+page.ts     | 30 ++++++++++++
 5 files changed, 117 insertions(+), 5 deletions(-)
 create mode 100644 app/src/lib/components/Product.svelte
 create mode 100644 app/src/routes/items/[id]/+page.svelte
 create mode 100644 app/src/routes/items/[id]/+page.ts

diff --git a/app/src/lib/components/Product.svelte b/app/src/lib/components/Product.svelte
new file mode 100644
index 0000000..c54c940
--- /dev/null
+++ b/app/src/lib/components/Product.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { ExistingDocument, Product, ProductList } from '$lib/db';
+	import { Card, Heading, Span } from 'flowbite-svelte';
+
+	export let product: ExistingDocument<Product>;
+</script>
+
+<Card {...$$restProps} class="flex flex-row items-center justify-between">
+	<Heading class="inline-block flex-shrink" tag="h4">{product.name}</Heading>
+	<Span class="flex flex-col items-center text-neutral-500 dark:text-neutral-300"
+		><span class="text-xl">{product.count}</span><span class="text-sm">Stück</span></Span
+	>
+</Card>
diff --git a/app/src/lib/db.ts b/app/src/lib/db.ts
index 30e79c6..05bb489 100644
--- a/app/src/lib/db.ts
+++ b/app/src/lib/db.ts
@@ -20,4 +20,11 @@ export interface ProductList {
 	name: string;
 }
 
-export const db = writable(new PouchDB<ProductList>('shopping'));
+export interface Product {
+	type: 'product';
+	list: string;
+	name: string;
+	count: number;
+}
+
+export const db = writable(new PouchDB<ProductList | Product>('shopping'));
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index a7a0b2f..2ce48f1 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -10,7 +10,7 @@
 	export let lists: ExistingDocument<PL>[] = [];
 
 	data.lists.then((result) => {
-		lists = result.docs;
+		lists = result.docs as never[] | ExistingDocument<PL>[];
 		if (browser) {
 			$db
 				.changes({
@@ -18,17 +18,15 @@
 					live: true,
 					include_docs: true,
 					filter: (doc) => {
-						console.log(doc);
 						return doc.type === 'list' || doc._deleted;
 					}
 				})
 				.on('change', (change) => {
-					console.log('change', change);
 					if (change.deleted) {
 						lists = lists.filter((list) => list._id !== change.id);
 					} else {
 						const index = lists.findIndex((list) => list._id === change.id);
-						if (change.doc) {
+						if (change.doc && change.doc.type === 'list') {
 							if (index === -1) {
 								lists = [...lists, change.doc];
 							} else {
diff --git a/app/src/routes/items/[id]/+page.svelte b/app/src/routes/items/[id]/+page.svelte
new file mode 100644
index 0000000..55963fa
--- /dev/null
+++ b/app/src/routes/items/[id]/+page.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import Product from '$lib/components/Product.svelte';
+	import { Heading, ListPlaceholder, Alert, P } from 'flowbite-svelte';
+	import type { PageData } from './$types';
+	import { db, type ExistingDocument, type Product as PT } from '$lib/db';
+	import { browser } from '$app/environment';
+	console.log($db);
+
+	export let data: PageData;
+
+	export let products: ExistingDocument<PT>[] = [];
+
+	data.products.then((result) => {
+		products = result.docs as ExistingDocument<PT>[];
+		if (browser) {
+			$db
+				.changes({
+					since: 'now',
+					live: true,
+					include_docs: true,
+					filter: (doc) => {
+						return doc.type === 'product' || doc._deleted;
+					}
+				})
+				.on('change', (change) => {
+					if (change.deleted) {
+						products = products.filter((list) => list._id !== change.id);
+					} else {
+						const index = products.findIndex((list) => list._id === change.id);
+						if (change.doc && change.doc.type === 'product') {
+							if (index === -1) {
+								products = [...products, change.doc];
+							} else {
+								products[index] = change.doc;
+							}
+						} else {
+							console.error('Unreachable. Change event without doc.');
+						}
+					}
+				}).cancel;
+		}
+		return result;
+	});
+</script>
+
+<svelte:head>
+	<title>G'schäft'lhaberer</title>
+</svelte:head>
+
+<Heading class="my-5 text-center">G'schäft'l<wbr />Haberer</Heading>
+
+<div class="mb-5 mt-12 flex flex-col items-center">
+	{#await data.products}
+		<ListPlaceholder class="w-full max-w-sm" />
+	{:then}
+		{#each products as product}
+			<Product {product} class="my-2" />
+		{:else}
+			<P>Keine Produkte vorhanden</P>
+		{/each}
+	{:catch error}
+		<Alert color="red">Ein Fehler ist aufgetreten: {error.message}</Alert>
+	{/await}
+</div>
diff --git a/app/src/routes/items/[id]/+page.ts b/app/src/routes/items/[id]/+page.ts
new file mode 100644
index 0000000..bbf75b3
--- /dev/null
+++ b/app/src/routes/items/[id]/+page.ts
@@ -0,0 +1,30 @@
+import { browser } from '$app/environment';
+import { db as DB } from '$lib/db';
+import { get } from 'svelte/store';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params: { id } }) => {
+	if (!browser) {
+		return {
+			products: Promise.resolve({ docs: [] })
+		};
+	}
+
+	const db = get(DB);
+	const products = db
+		.createIndex({
+			index: { fields: ['type', 'list'] }
+		})
+		.then(async () => {
+			const query = {
+				selector: {
+					type: 'product',
+					list: id
+				}
+			};
+			return await db.find(query);
+		});
+	return {
+		products
+	};
+};

From 739e93e0751810cd4f75e1ec890dd2331139edab Mon Sep 17 00:00:00 2001
From: jdoppelhofer <jdoppelhofer@student.tgm.ac.at>
Date: Thu, 11 Apr 2024 13:45:42 +0200
Subject: [PATCH 08/15] =?UTF-8?q?F=C3=BCge=20L=C3=B6schfunktion=20f=C3=BCr?=
 =?UTF-8?q?=20Produkte=20hinzu=20und=20erstelle=20Button=20zum=20L=C3=B6sc?=
 =?UTF-8?q?hen=20eines=20Produkts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/lib/components/Product.svelte  | 36 ++++++++++++++++---
 app/src/routes/items/[id]/+page.svelte | 49 ++++++++++++++++++++++++++
 app/src/routes/items/[id]/+page.ts     |  6 ++--
 3 files changed, 84 insertions(+), 7 deletions(-)

diff --git a/app/src/lib/components/Product.svelte b/app/src/lib/components/Product.svelte
index c54c940..05f8c20 100644
--- a/app/src/lib/components/Product.svelte
+++ b/app/src/lib/components/Product.svelte
@@ -1,13 +1,39 @@
 <script lang="ts">
 	import type { ExistingDocument, Product, ProductList } from '$lib/db';
-	import { Card, Heading, Span } from 'flowbite-svelte';
+	import { db as DB } from '$lib/db';
+	import { get } from 'svelte/store';
+	import { Card, Heading, Span, Button } from 'flowbite-svelte';
 
 	export let product: ExistingDocument<Product>;
+
+	async function deleteProduct() {
+		const db = get(DB);
+		await db.remove(product);
+	}
 </script>
 
 <Card {...$$restProps} class="flex flex-row items-center justify-between">
-	<Heading class="inline-block flex-shrink" tag="h4">{product.name}</Heading>
-	<Span class="flex flex-col items-center text-neutral-500 dark:text-neutral-300"
-		><span class="text-xl">{product.count}</span><span class="text-sm">Stück</span></Span
-	>
+	<div class="flex-grow">
+		<Heading class="inline-block flex-shrink" tag="h4">{product.name}</Heading>
+	</div>
+	<div class="flex flex-col items-center text-neutral-500 dark:text-neutral-300">
+		<span class="text-xl">{product.count}</span>
+		<span class="text-sm">Stück</span>
+	</div>
+	<Button on:click={deleteProduct} class="ml-4">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			class="h-6 w-6"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+			></path>
+		</svg>
+	</Button>
 </Card>
diff --git a/app/src/routes/items/[id]/+page.svelte b/app/src/routes/items/[id]/+page.svelte
index 55963fa..e7a8373 100644
--- a/app/src/routes/items/[id]/+page.svelte
+++ b/app/src/routes/items/[id]/+page.svelte
@@ -41,6 +41,31 @@
 		}
 		return result;
 	});
+
+	import { db as DB } from '$lib/db';
+	import { get } from 'svelte/store';
+	import { Button, Card, Input } from 'flowbite-svelte';
+
+	let showPopup = false;
+	let productName = '';
+	let productCount = 1;
+
+	async function createProduct() {
+		if (productName.trim() !== '') {
+			console.log(`Produkt erstellt: ${productName}`);
+			const db = get(DB);
+			await db.put({
+				_id: `${data.id}:${productName}`,
+				type: 'product',
+				list: data.id,
+				name: productName,
+				count: productCount
+			});
+			productName = '';
+			productCount = 1;
+			showPopup = false;
+		}
+	}
 </script>
 
 <svelte:head>
@@ -62,3 +87,27 @@
 		<Alert color="red">Ein Fehler ist aufgetreten: {error.message}</Alert>
 	{/await}
 </div>
+
+<div class="flex items-center justify-center">
+	<Button on:click={() => (showPopup = true)}>Produkt erstellen</Button>
+</div>
+
+{#if showPopup}
+	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+		<Card class="rounded bg-white p-6 shadow-lg">
+			<h2 class="mb-4 text-center text-xl font-bold">Produkt erstellen</h2>
+			<Input bind:value={productName} placeholder="Produktname" class="mb-4" />
+			<Input type="number" bind:value={productCount} placeholder="Anzahl" class="mb-4" />
+			<div class="flex justify-end space-x-2">
+				<Button on:click={createProduct} class="bg-blue-500 text-white hover:bg-blue-700"
+					>Erstellen</Button
+				>
+				<Button
+					variant="secondary"
+					on:click={() => (showPopup = false)}
+					class="bg-gray-500 text-white hover:bg-gray-700">Schließen</Button
+				>
+			</div>
+		</Card>
+	</div>
+{/if}
diff --git a/app/src/routes/items/[id]/+page.ts b/app/src/routes/items/[id]/+page.ts
index bbf75b3..979fb47 100644
--- a/app/src/routes/items/[id]/+page.ts
+++ b/app/src/routes/items/[id]/+page.ts
@@ -6,7 +6,8 @@ import type { PageLoad } from './$types';
 export const load: PageLoad = async ({ params: { id } }) => {
 	if (!browser) {
 		return {
-			products: Promise.resolve({ docs: [] })
+			products: Promise.resolve({ docs: [] }),
+			id
 		};
 	}
 
@@ -25,6 +26,7 @@ export const load: PageLoad = async ({ params: { id } }) => {
 			return await db.find(query);
 		});
 	return {
-		products
+		products,
+		id
 	};
 };

From b1d870649cb9f1eca3f5bdc1b91350eada6fde07 Mon Sep 17 00:00:00 2001
From: jdoppelhofer <jdoppelhofer@student.tgm.ac.at>
Date: Thu, 11 Apr 2024 14:21:25 +0200
Subject: [PATCH 09/15] =?UTF-8?q?F=C3=BCge=20onMount-Import=20hinzu=20in?=
 =?UTF-8?q?=20+page.svelte?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/routes/+page.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index ea45076..c1adf08 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -4,6 +4,7 @@
 	import { db, type ExistingDocument, type ProductList as PL } from '$lib/db';
 	import ProductList from '$lib/components/ProductList.svelte';
 	import { browser } from '$app/environment';
+	import { onMount } from 'svelte';
 
 	export let data: PageData;
 

From 5bb19c5493f084782336217c670a46e41bfd22b5 Mon Sep 17 00:00:00 2001
From: jdoppelhofer <jdoppelhofer@student.tgm.ac.at>
Date: Thu, 11 Apr 2024 14:24:44 +0200
Subject: [PATCH 10/15] =?UTF-8?q?F=C3=BCge=20Link-Synchronisierungsfunktio?=
 =?UTF-8?q?n=20hinzu=20in=20+page.svelte?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/routes/settings/+page.svelte | 127 ++++++++++++++-------------
 1 file changed, 66 insertions(+), 61 deletions(-)

diff --git a/app/src/routes/settings/+page.svelte b/app/src/routes/settings/+page.svelte
index a4eb324..d8db0b5 100644
--- a/app/src/routes/settings/+page.svelte
+++ b/app/src/routes/settings/+page.svelte
@@ -1,75 +1,80 @@
 <script lang="ts">
 	import { db } from '$lib/db';
-    import { Input, Button, P, Heading, Label } from 'flowbite-svelte';
-    let link: string = '';
-    let request_success = false;
-    let replicationError: string | null = null;
+	import { Input, Button, P, Heading, Label } from 'flowbite-svelte';
+	let link: string = '';
+	let request_success = false;
+	let replicationError: string | null = null;
+	let storedLink = localStorage.getItem('syncLink');
 
-    function validateLink(value: string): boolean {
-        value = value.trim();
-        const pattern: RegExp = /^https?:\/\/.+/;
-        return pattern.test(value);
-    }
-    $: isValidLink = link !== '' && validateLink(link);
+	function validateLink(value: string): boolean {
+		value = value.trim();
+		const pattern: RegExp = /^https?:\/\/.+/;
+		return pattern.test(value);
+	}
+	$: isValidLink = link !== '' && validateLink(link);
 
-    // Handler für Sync-Ereignisse
-    function onSyncChange(change: any) {
-        console.log('Sync change:', change);
-    }
+	// Handler für Sync-Ereignisse
+	function onSyncChange(change: any) {
+		console.log('Sync change:', change);
+	}
 
-    function onSyncPaused(error: any) {
-        if (error) {
-            console.log('Sync paused due to replication error', error);
-        } else {
-            console.log('Sync paused/resumed');
-        }
-    }
+	function onSyncPaused(error: any) {
+		if (error) {
+			console.log('Sync paused due to replication error', error);
+		} else {
+			console.log('Sync paused/resumed');
+		}
+	}
 
-    function onSyncError(error: any) {
-        console.error('Sync error:', error);
-        replicationError = "Fehler bei der Synchronisation. Bitte überprüfen Sie den Link und versuchen Sie es erneut.";
-    }
+	function onSyncError(error: any) {
+		console.error('Sync error:', error);
+		replicationError =
+			'Fehler bei der Synchronisation. Bitte überprüfen Sie den Link und versuchen Sie es erneut.';
+	}
 
-    async function handleReplication() {
-        if (isValidLink) {
-            const opts = { live: true, retry: true };
-            request_success = false;
-            replicationError = null;
-            $db.replicate.from(link).on('complete', function() {
-                $db.sync(link, opts)
-                    .on('change', onSyncChange)
-                    .on('paused', onSyncPaused)
-                    .on('error', onSyncError);
-                request_success = true;
-            }).on('error', onSyncError);
-        }
-    }
+	async function handleReplication() {
+		if (isValidLink) {
+			const opts = { live: true, retry: true };
+			request_success = false;
+			replicationError = null;
+			$db.replicate
+				.from(link)
+				.on('complete', function () {
+					$db
+						.sync(link, opts)
+						.on('change', onSyncChange)
+						.on('paused', onSyncPaused)
+						.on('error', onSyncError);
+					request_success = true;
+				})
+				.on('error', onSyncError);
+
+			localStorage.setItem('syncLink', link);
+			storedLink = link;
+		}
+	}
+
+	function clearLink() {
+		localStorage.removeItem('syncLink');
+		storedLink = null;
+	}
 </script>
 
 <svelte:head>
-    <title>Settings - G'schäft'lhaberer</title>
+	<title>Settings - G'schäft'lhaberer</title>
 </svelte:head>
 
 <form on:submit|preventDefault={handleReplication}>
-    <Heading class="my-5">Settings</Heading>
-    <div class="flex flex-col gap-4 mt-6">
-        <Label>Link für die Synchronisation</Label>
-        <Input
-            bind:value={link} 
-            placeholder="https://example.com"
-            invalid={!isValidLink && link !== ''}
-            aria-label="Link eingeben"
-            class={isValidLink ? 'valid-input' : link !== '' ? 'invalid-input' : ''}
-        />
-
-        <Button color="green" type="submit" disabled={!isValidLink} class={isValidLink ? 'valid-button' : ''}>
-            Bestätigen
-        </Button>
-        {#if replicationError}
-            <P class="text-red-500">{replicationError}</P>
-        {/if}
-        {#if request_success}
-            <P>Einmalige Replikation abgeschlossen. Kontinuierliche Synchronisation gestartet.</P>
-        {/if}
-    </div>
+	<Heading class="my-5">Settings</Heading>
+	<div class="mt-6 flex flex-col gap-4">
+		<Label>Link für die Synchronisation</Label>
+		<Input bind:value={link} placeholder="https://example.com" />
+		<Button type="submit" class="mt-4">Synchronisieren</Button>
+		{#if storedLink}
+			<div class="mt-4">
+				<p>Gespeicherter Link: {storedLink}</p>
+				<Button on:click={clearLink} class="mt-2">Link löschen</Button>
+			</div>
+		{/if}
+	</div>
 </form>

From e01f381350eb283f4661d1be2ee82f23fadc2a6a Mon Sep 17 00:00:00 2001
From: pdamianik <39028343+pdamianik@users.noreply.github.com>
Date: Fri, 12 Apr 2024 09:24:48 +0200
Subject: [PATCH 11/15] Fix list creation

Signed-off-by: pdamianik <39028343+pdamianik@users.noreply.github.com>
---
 app/package.json                          |  6 ++-
 app/pnpm-lock.yaml                        | 17 ++++++++
 app/src/lib/components/ListenItem.svelte  | 15 -------
 app/src/lib/components/ProductList.svelte | 46 +++++++++++++--------
 app/src/lib/index.ts                      |  1 +
 app/src/routes/+page.svelte               | 50 ++++++++++++++++++++---
 app/src/routes/createlist/+page.svelte    | 37 -----------------
 7 files changed, 95 insertions(+), 77 deletions(-)
 delete mode 100644 app/src/lib/components/ListenItem.svelte
 delete mode 100644 app/src/routes/createlist/+page.svelte

diff --git a/app/package.json b/app/package.json
index 616a6f1..4af4732 100644
--- a/app/package.json
+++ b/app/package.json
@@ -51,5 +51,9 @@
 		"vitest": "^1.2.0",
 		"yaml": "^2.4.1"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@types/speakingurl": "^13.0.6",
+		"speakingurl": "^14.0.1"
+	}
 }
diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml
index 6df9455..db7fc4b 100644
--- a/app/pnpm-lock.yaml
+++ b/app/pnpm-lock.yaml
@@ -4,6 +4,14 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+dependencies:
+  '@types/speakingurl':
+    specifier: ^13.0.6
+    version: 13.0.6
+  speakingurl:
+    specifier: ^14.0.1
+    version: 14.0.1
+
 devDependencies:
   '@iconify-json/flowbite':
     specifier: ^1.1.2
@@ -904,6 +912,10 @@ packages:
     resolution: {integrity: sha512-/wdoPq1QqkSj9/QOeKkFquEuPzQbHTWAMPH/PaUMB+JuR31lXhlWXRZ52IpfDYVlDOUBvX09uBrPwxGT1hjNBg==}
     dev: true
 
+  /@types/speakingurl@13.0.6:
+    resolution: {integrity: sha512-ywkRHNHBwq0mFs/2HRgW6TEBAzH66G8f2Txzh1aGR0UC9ZoAUHfHxLZGDhwMpck4BpSnB61eNFIFmlV+TJ+KUA==}
+    dev: false
+
   /@typescript-eslint/eslint-plugin@7.0.2(@typescript-eslint/parser@7.0.2)(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-/XtVZJtbaphtdrWjr+CJclaCVGPtOdBpFEnvtNf/jRV0IiEemRrL0qABex/nEt8isYcnFacm3nPHYQwL+Wb7qg==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -3205,6 +3217,11 @@ packages:
     resolution: {integrity: sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw==}
     dev: true
 
+  /speakingurl@14.0.1:
+    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
     dev: true
diff --git a/app/src/lib/components/ListenItem.svelte b/app/src/lib/components/ListenItem.svelte
deleted file mode 100644
index 77b23c0..0000000
--- a/app/src/lib/components/ListenItem.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-	export let liste;
-
-	// Hier könntest du Funktionen für das Löschen oder Bearbeiten hinzufügen
-</script>
-
-<div>
-	<h3>{liste.titel}</h3>
-	<ul>
-		{#each liste.artikel as artikel}
-			<li>{artikel.name} ({artikel.menge}) - {artikel.geschäft}</li>
-		{/each}
-	</ul>
-	// Buttons für Bearbeiten und Löschen hier einfügen
-</div>
diff --git a/app/src/lib/components/ProductList.svelte b/app/src/lib/components/ProductList.svelte
index 7c42ca4..d8fd2d1 100644
--- a/app/src/lib/components/ProductList.svelte
+++ b/app/src/lib/components/ProductList.svelte
@@ -1,38 +1,48 @@
 <script lang="ts">
 	import type { ExistingDocument, ProductList } from '$lib/db';
-	import { Card, Heading } from 'flowbite-svelte';
+	import { Button, Card, Heading, Modal } from 'flowbite-svelte';
+	import TrashBinSolid from '~icons/flowbite/trash-bin-solid';
+	import ExclamationCircleSolid from '~icons/flowbite/exclamation-circle-solid';
 
 	export let productlist: ExistingDocument<ProductList>;
 
 	import { db as DB } from '$lib/db';
 	import { get } from 'svelte/store';
 
-	async function deleteList(id: string) {
+	async function deleteList() {
 		const db = get(DB);
-		const list = await db.get(id);
+		const list = await db.get(deleteModalId);
 		await db.remove(list);
 	}
-</script>
 
-<head>
-	<link
-		href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
-		rel="stylesheet"
-	/>
-</head>
+	let deleteModal = false;
+	let deleteModalId = '';
+</script>
 
 <Card href={`/items/${productlist._id}`} {...$$restProps}>
 	<div class="flex items-center justify-between">
 		<Heading tag="h4">{productlist.name}</Heading>
-		<button
-			class="inline-flex items-center justify-center rounded bg-red-500 px-4 py-2 font-bold text-white hover:bg-red-700"
-			on:click|stopPropagation|preventDefault={() => {
-				if (confirm('Möchten Sie diese Liste wirklich löschen?')) {
-					deleteList(productlist._id);
-				}
+		<Button
+			color="red"
+			on:click={(e) => {
+				e.preventDefault();
+				deleteModal = true;
+				deleteModalId = productlist._id;
 			}}
+			aria-label="Löschen"
 		>
-			<i class="fas fa-trash-alt"></i>
-		</button>
+			<TrashBinSolid />
+		</Button>
 	</div>
 </Card>
+
+<Modal bind:open={deleteModal} size="xs" autoclose outsideclose>
+	<div class="text-center">
+		<ExclamationCircleSolid class="mx-auto mb-4 h-12 w-12 text-gray-400 dark:text-gray-200" />
+		<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
+			Sicher, dass sie dieses Produkt löschen möchten?
+		</h3>
+		<Button color="red" class="me-2" on:click={deleteList}>Ja, ich bin sicher</Button>
+		<Button color="alternative">Nein, abbrechen</Button>
+	</div>
+</Modal>
diff --git a/app/src/lib/index.ts b/app/src/lib/index.ts
index 856f2b6..cfe6c83 100644
--- a/app/src/lib/index.ts
+++ b/app/src/lib/index.ts
@@ -1 +1,2 @@
 // place files you want to import through the `$lib` alias in this folder.
+export { default as getSlug } from 'speakingurl';
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index c1adf08..14adb0e 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
-	import { Heading, ListPlaceholder, Alert, P } from 'flowbite-svelte';
+	import { Heading, ListPlaceholder, Alert, P, Modal, Button, Label, Input } from 'flowbite-svelte';
 	import type { PageData } from './$types';
 	import { db, type ExistingDocument, type ProductList as PL } from '$lib/db';
 	import ProductList from '$lib/components/ProductList.svelte';
 	import { browser } from '$app/environment';
 	import { onMount } from 'svelte';
+	import { get } from 'svelte/store';
+	import PlusOutline from '~icons/flowbite/plus-outline';
+	import { getSlug } from '$lib';
 
 	export let data: PageData;
 
@@ -52,6 +55,22 @@
 		}
 		return result;
 	});
+
+	let name = '';
+	let createModal = false;
+
+	async function addList() {
+		if (name.trim() !== '') {
+			await get(db).put({
+				_id: getSlug(name),
+				type: 'list',
+				name: name,
+				version: ''
+			});
+			name = '';
+			createModal = false;
+		}
+	}
 </script>
 
 <svelte:head>
@@ -74,11 +93,30 @@
 	{/await}
 
 	<!-- Button zum Erstellen einer neuen Liste -->
-	<a
-		href="/createlist"
-		class="mt-5 inline-flex items-center justify-center rounded bg-green-500 px-4 py-2 font-bold text-white hover:bg-green-700"
+	<Button
+		size="xl"
+		on:click={() => (createModal = true)}
+		class="mt-5 flex flex-row items-center justify-center gap-2"
 	>
-		<i class="fas fa-plus mr-2"></i>
+		<PlusOutline />
 		<span>Neue Liste erstellen</span>
-	</a>
+	</Button>
 </div>
+
+<Modal bind:open={createModal} outsideclose>
+	<form class="flex flex-col space-y-6" on:submit|preventDefault={addList}>
+		<Heading tag="h4">Neue Einkaufsliste erstellen</Heading>
+		<Label for="list-name" class="space-y-2"
+			><span>Name der Einkaufsliste</span>
+			<Input
+				id="list-name"
+				bind:value={name}
+				placeholder="List name"
+				required
+				class="w-full"
+			/></Label
+		>
+
+		<Button type="submit" variant="primary" class="w-full">Liste hinzufügen</Button>
+	</form>
+</Modal>
diff --git a/app/src/routes/createlist/+page.svelte b/app/src/routes/createlist/+page.svelte
deleted file mode 100644
index 70bbfef..0000000
--- a/app/src/routes/createlist/+page.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script>
-	import { db as DB } from '$lib/db';
-	import { get } from 'svelte/store';
-	import { Button, Input, Label } from 'flowbite-svelte';
-	import { goto } from '$app/navigation';
-
-	let name = '';
-
-	async function addList() {
-		if (name.trim() !== '') {
-			const db = get(DB);
-			await db.post({
-				type: 'list',
-				name: name,
-				version: ''
-			});
-			name = '';
-			goto('/');
-		}
-	}
-</script>
-
-<div class="flex min-h-screen flex-col items-center justify-center">
-	<h1 class="mb-8 text-3xl font-bold text-gray-700">Neue Einkaufsliste erstellen</h1>
-
-	<form
-		class="w-full max-w-md rounded bg-white px-8 py-6 shadow-md"
-		on:submit|preventDefault={addList}
-	>
-		<div class="mb-4">
-			<Label for="list-name" class="mb-2">Name der Einkaufsliste:</Label>
-			<Input id="list-name" bind:value={name} placeholder="List name" required class="w-full" />
-		</div>
-
-		<Button type="submit" variant="primary" class="w-full">Liste hinzufügen</Button>
-	</form>
-</div>

From d0bd1930f5ce1bc29f4dda001843a7e08f81475f Mon Sep 17 00:00:00 2001
From: pdamianik <39028343+pdamianik@users.noreply.github.com>
Date: Fri, 12 Apr 2024 10:35:47 +0200
Subject: [PATCH 12/15] Add list creation and deletion tests

Signed-off-by: pdamianik <39028343+pdamianik@users.noreply.github.com>
---
 app/.gitignore                       |  1 +
 app/playwright.config.ts             |  3 +-
 app/src/routes/items/[id]/+layout.ts |  2 ++
 app/src/routes/settings/+page.svelte |  5 +--
 app/tests/create-lists.test.ts       | 11 ------
 app/tests/lists.test.ts              | 51 +++++++++++++++++++++++-----
 6 files changed, 51 insertions(+), 22 deletions(-)
 create mode 100644 app/src/routes/items/[id]/+layout.ts
 delete mode 100644 app/tests/create-lists.test.ts

diff --git a/app/.gitignore b/app/.gitignore
index e3471e4..38b6f41 100644
--- a/app/.gitignore
+++ b/app/.gitignore
@@ -10,3 +10,4 @@ vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 couchdb
 shopping
+test-results
diff --git a/app/playwright.config.ts b/app/playwright.config.ts
index 3cf8326..94a4675 100644
--- a/app/playwright.config.ts
+++ b/app/playwright.config.ts
@@ -3,7 +3,8 @@ import type { PlaywrightTestConfig } from '@playwright/test';
 const config: PlaywrightTestConfig = {
 	webServer: {
 		command: 'pnpm run build && pnpm run preview',
-		port: 4173
+		port: 4173,
+		reuseExistingServer: true
 	},
 	testDir: 'tests',
 	testMatch: /(.+\.)?(test|spec)\.[jt]s/
diff --git a/app/src/routes/items/[id]/+layout.ts b/app/src/routes/items/[id]/+layout.ts
new file mode 100644
index 0000000..ae88a27
--- /dev/null
+++ b/app/src/routes/items/[id]/+layout.ts
@@ -0,0 +1,2 @@
+export const prerender = false;
+export const ssr = false;
diff --git a/app/src/routes/settings/+page.svelte b/app/src/routes/settings/+page.svelte
index d8db0b5..400fabd 100644
--- a/app/src/routes/settings/+page.svelte
+++ b/app/src/routes/settings/+page.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
+	import { browser } from '$app/environment';
 	import { db } from '$lib/db';
-	import { Input, Button, P, Heading, Label } from 'flowbite-svelte';
+	import { Input, Button, Heading, Label } from 'flowbite-svelte';
 	let link: string = '';
 	let request_success = false;
 	let replicationError: string | null = null;
-	let storedLink = localStorage.getItem('syncLink');
+	let storedLink = browser ? localStorage.getItem('syncLink') : '';
 
 	function validateLink(value: string): boolean {
 		value = value.trim();
diff --git a/app/tests/create-lists.test.ts b/app/tests/create-lists.test.ts
deleted file mode 100644
index 16cd7ae..0000000
--- a/app/tests/create-lists.test.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-test('createlist page has expected h1', async ({ page }) => {
-	await page.goto('/createlist');
-	await expect(page.getByRole('heading', { name: 'Neue Einkaufsliste erstellen' })).toBeVisible();
-});
-
-test('createlist page has expected input', async ({ page }) => {
-	await page.goto('/createlist');
-	await expect(page.getByRole('textbox', { name: 'Name' })).toBeVisible();
-});
diff --git a/app/tests/lists.test.ts b/app/tests/lists.test.ts
index ef80f88..eda7a02 100644
--- a/app/tests/lists.test.ts
+++ b/app/tests/lists.test.ts
@@ -1,14 +1,49 @@
 import { expect, test } from '@playwright/test';
-import PouchDB from 'pouchdb';
-import PouchDBFind from 'pouchdb-find';
-PouchDB.plugin(PouchDBFind);
-
-// async function clearDatabase() {
-// 	const docs = await DB.allDocs();
-// 	docs.rows.forEach((row) => DB.remove(row.id, row.value.rev));
-// }
 
 test('no shopping lists entries', async ({ page }) => {
 	await page.goto('/');
 	await expect(page.getByText('Keine Listen vorhanden')).toBeVisible();
 });
+
+test('create a list', async ({ page }) => {
+	const listName = 'Test';
+
+	await page.goto('/');
+	const newButton = page.getByRole('button', { name: 'Neue Liste erstellen' });
+	await expect(newButton).toBeVisible();
+	await newButton.click();
+	const nameInput = page.getByRole('textbox', { name: 'Name' });
+	await expect(nameInput).toBeVisible();
+	await nameInput.fill('Test');
+	const confirmButton = page.getByRole('button', { name: 'Liste hinzufügen' });
+	await expect(confirmButton).toBeVisible();
+	await confirmButton.click();
+	const listLink = page.getByRole('link', { name: listName });
+	await expect(listLink).toBeVisible();
+	await listLink.click();
+
+	expect(page.url()).toEqual('http://localhost:4173/items/test');
+});
+
+test('delete a list', async ({ page }) => {
+	const listName = 'Test';
+
+	await page.goto('/');
+	const newButton = page.getByRole('button', { name: 'Neue Liste erstellen' });
+	await newButton.click();
+	const nameInput = page.getByRole('textbox', { name: 'Name' });
+	await nameInput.fill('Test');
+	const confirmCreationButton = page.getByRole('button', { name: 'Liste hinzufügen' });
+	await confirmCreationButton.click();
+
+	const listLink = page.getByRole('link', { name: listName });
+	expect(listLink).toBeVisible();
+	const deleteButton = listLink.getByRole('button');
+	await deleteButton.waitFor();
+	await expect(deleteButton).toBeVisible();
+	await deleteButton.click();
+	const confirmDeletionButton = page.getByRole('button', { name: 'Ja, ich bin sicher' });
+	await expect(confirmDeletionButton).toBeVisible();
+	await confirmDeletionButton.click();
+	await expect(page.getByText('Keine Listen vorhanden')).toBeVisible();
+});

From 8e821e56f776feebfcd6ad9ae861a0fb618dd83d Mon Sep 17 00:00:00 2001
From: pdamianik <39028343+pdamianik@users.noreply.github.com>
Date: Fri, 12 Apr 2024 10:51:24 +0200
Subject: [PATCH 13/15] Add tests for list creation

Signed-off-by: pdamianik <39028343+pdamianik@users.noreply.github.com>
---
 .../components/Listen\303\234bersicht.svelte"  | 18 ------------------
 app/src/lib/components/Product.svelte          |  4 ++--
 app/src/routes/settings/+page.svelte           | 13 +++----------
 app/tests/lists.test.ts                        |  4 +---
 4 files changed, 6 insertions(+), 33 deletions(-)
 delete mode 100644 "app/src/lib/components/Listen\303\234bersicht.svelte"

diff --git "a/app/src/lib/components/Listen\303\234bersicht.svelte" "b/app/src/lib/components/Listen\303\234bersicht.svelte"
deleted file mode 100644
index 2805a91..0000000
--- "a/app/src/lib/components/Listen\303\234bersicht.svelte"
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-	import { db } from '$lib/db';
-	import ListenItem from './ListenItem.svelte';
-
-	let listen = [];
-
-	onMount(async () => {
-		const result = await db.allDocs({ include_docs: true, descending: true });
-		listen = result.rows.map((row) => row.doc);
-	});
-</script>
-
-<div>
-	{#each listen as liste}
-		<ListenItem {liste} />
-	{/each}
-</div>
diff --git a/app/src/lib/components/Product.svelte b/app/src/lib/components/Product.svelte
index 05f8c20..4f47108 100644
--- a/app/src/lib/components/Product.svelte
+++ b/app/src/lib/components/Product.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { ExistingDocument, Product, ProductList } from '$lib/db';
+	import type { ExistingDocument, Product } from '$lib/db';
 	import { db as DB } from '$lib/db';
 	import { get } from 'svelte/store';
-	import { Card, Heading, Span, Button } from 'flowbite-svelte';
+	import { Card, Heading, Button } from 'flowbite-svelte';
 
 	export let product: ExistingDocument<Product>;
 
diff --git a/app/src/routes/settings/+page.svelte b/app/src/routes/settings/+page.svelte
index 400fabd..3fd45b4 100644
--- a/app/src/routes/settings/+page.svelte
+++ b/app/src/routes/settings/+page.svelte
@@ -3,8 +3,6 @@
 	import { db } from '$lib/db';
 	import { Input, Button, Heading, Label } from 'flowbite-svelte';
 	let link: string = '';
-	let request_success = false;
-	let replicationError: string | null = null;
 	let storedLink = browser ? localStorage.getItem('syncLink') : '';
 
 	function validateLink(value: string): boolean {
@@ -15,11 +13,11 @@
 	$: isValidLink = link !== '' && validateLink(link);
 
 	// Handler für Sync-Ereignisse
-	function onSyncChange(change: any) {
+	function onSyncChange(change: unknown) {
 		console.log('Sync change:', change);
 	}
 
-	function onSyncPaused(error: any) {
+	function onSyncPaused(error: unknown) {
 		if (error) {
 			console.log('Sync paused due to replication error', error);
 		} else {
@@ -27,17 +25,13 @@
 		}
 	}
 
-	function onSyncError(error: any) {
+	function onSyncError(error: unknown) {
 		console.error('Sync error:', error);
-		replicationError =
-			'Fehler bei der Synchronisation. Bitte überprüfen Sie den Link und versuchen Sie es erneut.';
 	}
 
 	async function handleReplication() {
 		if (isValidLink) {
 			const opts = { live: true, retry: true };
-			request_success = false;
-			replicationError = null;
 			$db.replicate
 				.from(link)
 				.on('complete', function () {
@@ -46,7 +40,6 @@
 						.on('change', onSyncChange)
 						.on('paused', onSyncPaused)
 						.on('error', onSyncError);
-					request_success = true;
 				})
 				.on('error', onSyncError);
 
diff --git a/app/tests/lists.test.ts b/app/tests/lists.test.ts
index eda7a02..9ae6105 100644
--- a/app/tests/lists.test.ts
+++ b/app/tests/lists.test.ts
@@ -20,9 +20,7 @@ test('create a list', async ({ page }) => {
 	await confirmButton.click();
 	const listLink = page.getByRole('link', { name: listName });
 	await expect(listLink).toBeVisible();
-	await listLink.click();
-
-	expect(page.url()).toEqual('http://localhost:4173/items/test');
+	await expect(listLink).toHaveAttribute('href', '/items/test');
 });
 
 test('delete a list', async ({ page }) => {

From 3ee349fe470c1512959ac366b18798f2b2015cf6 Mon Sep 17 00:00:00 2001
From: pdamianik <39028343+pdamianik@users.noreply.github.com>
Date: Fri, 12 Apr 2024 11:43:00 +0200
Subject: [PATCH 14/15] Fix small issues with product creation

Signed-off-by: pdamianik <39028343+pdamianik@users.noreply.github.com>
---
 app/src/routes/items/[id]/+page.svelte | 66 +++++++++++++++-----------
 1 file changed, 38 insertions(+), 28 deletions(-)

diff --git a/app/src/routes/items/[id]/+page.svelte b/app/src/routes/items/[id]/+page.svelte
index e7a8373..6e13c25 100644
--- a/app/src/routes/items/[id]/+page.svelte
+++ b/app/src/routes/items/[id]/+page.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
 	import Product from '$lib/components/Product.svelte';
-	import { Heading, ListPlaceholder, Alert, P } from 'flowbite-svelte';
+	import { Heading, ListPlaceholder, Alert, P, Modal, Label } from 'flowbite-svelte';
 	import type { PageData } from './$types';
 	import { db, type ExistingDocument, type Product as PT } from '$lib/db';
 	import { browser } from '$app/environment';
-	console.log($db);
+	import PlusOutline from '~icons/flowbite/plus-outline';
+	import { get } from 'svelte/store';
+	import { Button, Input } from 'flowbite-svelte';
 
 	export let data: PageData;
 
@@ -42,10 +44,6 @@
 		return result;
 	});
 
-	import { db as DB } from '$lib/db';
-	import { get } from 'svelte/store';
-	import { Button, Card, Input } from 'flowbite-svelte';
-
 	let showPopup = false;
 	let productName = '';
 	let productCount = 1;
@@ -53,8 +51,7 @@
 	async function createProduct() {
 		if (productName.trim() !== '') {
 			console.log(`Produkt erstellt: ${productName}`);
-			const db = get(DB);
-			await db.put({
+			await get(db).put({
 				_id: `${data.id}:${productName}`,
 				type: 'product',
 				list: data.id,
@@ -89,25 +86,38 @@
 </div>
 
 <div class="flex items-center justify-center">
-	<Button on:click={() => (showPopup = true)}>Produkt erstellen</Button>
+	<Button
+		size="xl"
+		on:click={() => (showPopup = true)}
+		class="mt-5 flex flex-row items-center justify-center gap-2"
+	>
+		<PlusOutline />
+		Produkt erstellen</Button
+	>
 </div>
 
-{#if showPopup}
-	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-		<Card class="rounded bg-white p-6 shadow-lg">
-			<h2 class="mb-4 text-center text-xl font-bold">Produkt erstellen</h2>
-			<Input bind:value={productName} placeholder="Produktname" class="mb-4" />
-			<Input type="number" bind:value={productCount} placeholder="Anzahl" class="mb-4" />
-			<div class="flex justify-end space-x-2">
-				<Button on:click={createProduct} class="bg-blue-500 text-white hover:bg-blue-700"
-					>Erstellen</Button
-				>
-				<Button
-					variant="secondary"
-					on:click={() => (showPopup = false)}
-					class="bg-gray-500 text-white hover:bg-gray-700">Schließen</Button
-				>
-			</div>
-		</Card>
-	</div>
-{/if}
+<Modal bind:open={showPopup} outsideclose>
+	<Heading tag="h2">Produkt erstellen</Heading>
+	<form on:submit|preventDefault={createProduct}>
+		<Label for="product-name"
+			><span>Produktname</span>
+			<Input bind:value={productName} id="product-name" class="mb-4" required /></Label
+		>
+		<Label for="product-count"
+			><span>Anzahl</span>
+			<Input
+				type="number"
+				bind:value={productCount}
+				id="product-count"
+				class="mb-4"
+				required
+			/></Label
+		>
+		<div class="flex justify-end space-x-2">
+			<Button type="submit">Erstellen</Button>
+			<Button type="reset" color="alternative" on:click={() => (showPopup = false)}
+				>Schließen</Button
+			>
+		</div>
+	</form>
+</Modal>

From 1ac56aef78135e2d5fe3f3ba3276cc30a1cba697 Mon Sep 17 00:00:00 2001
From: pdamianik <39028343+pdamianik@users.noreply.github.com>
Date: Fri, 12 Apr 2024 11:43:15 +0200
Subject: [PATCH 15/15] Implement tests for product creation and deletion

Signed-off-by: pdamianik <39028343+pdamianik@users.noreply.github.com>
---
 app/tests/products.test.ts | 67 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 app/tests/products.test.ts

diff --git a/app/tests/products.test.ts b/app/tests/products.test.ts
new file mode 100644
index 0000000..c33050f
--- /dev/null
+++ b/app/tests/products.test.ts
@@ -0,0 +1,67 @@
+import { expect, test, type Page } from '@playwright/test';
+
+async function createList(page: Page) {
+	await page.goto('/');
+	const newButton = page.getByRole('button', { name: 'Neue Liste erstellen' });
+	await newButton.click();
+	const nameInput = page.getByRole('textbox', { name: 'Name' });
+	await nameInput.fill('Test');
+	const confirmCreationButton = page.getByRole('button', { name: 'Liste hinzufügen' });
+	await confirmCreationButton.click();
+}
+
+test('test no products', async ({ page }) => {
+	await createList(page);
+
+	await page.goto('/items/test');
+	await expect(page.getByText('Keine Produkte vorhanden')).toBeVisible();
+});
+
+test('create a product', async ({ page }) => {
+	const productName = 'Testprodukt';
+
+	await createList(page);
+
+	await page.goto('/items/test');
+	const newButton = page.getByRole('button', { name: 'Produkt erstellen' });
+	await expect(newButton).toBeVisible();
+	await newButton.click();
+
+	const nameInput = page.getByRole('textbox', { name: 'Produktname' });
+	await expect(nameInput).toBeVisible();
+	await nameInput.fill(productName);
+	const countInput = page.getByLabel('Anzahl');
+	await expect(countInput).toBeVisible();
+	await countInput.fill('4');
+	const confirmButton = page.getByRole('button', { name: 'Erstellen', exact: true });
+	await expect(confirmButton).toBeVisible();
+	await confirmButton.click();
+
+	const productLabel = page.getByRole('heading', { name: productName });
+	await expect(productLabel).toBeVisible();
+	const productCountLabel = page.getByText('4 Stück');
+	await expect(productCountLabel).toBeVisible();
+});
+
+test('delete  a product', async ({ page }) => {
+	const productName = 'Testprodukt';
+
+	await createList(page);
+
+	await page.goto('/items/test');
+	const newButton = page.getByRole('button', { name: 'Produkt erstellen' });
+	await newButton.click();
+
+	const nameInput = page.getByRole('textbox', { name: 'Produktname' });
+	await nameInput.fill(productName);
+	const countInput = page.getByLabel('Anzahl');
+	await countInput.fill('4');
+	const confirmButton = page.getByRole('button', { name: 'Erstellen', exact: true });
+	await confirmButton.click();
+
+	const deleteButton = page.getByRole('button').first();
+	await expect(deleteButton).toBeVisible();
+	await deleteButton.click();
+
+	await expect(page.getByText('Keine Produkte vorhanden')).toBeVisible();
+});