From 8224c7d6572db6ec76c4224eec1df8a538b47ad4 Mon Sep 17 00:00:00 2001
From: Martin Kagamino Lehoux <martin@lehoux.net>
Date: Mon, 27 Jul 2026 17:46:58 +0200
Subject: feat: delete items from catalog

- Delete action removes item from grocery list permanently
- Delete button (x) on catalog items, positioned inline with name
- Unified button heights (2rem) across list and catalog sections
---
 src/routes/+page.svelte | 45 +++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 43 insertions(+), 2 deletions(-)

(limited to 'src/routes/+page.svelte')

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 325d15a..a3e6d23 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -51,10 +51,19 @@
 <form method="POST" action="?/toggle" use:enhance>
 	<ul class="item-list">
 		{#each catalogItems as item (item.id)}
-			<li>
+			<li class="catalog-item">
 				<button name="id" value={item.id} type="submit">
 					{item.name}
 				</button>
+				<button
+					class="delete-btn"
+					name="id"
+					value={item.id}
+					type="submit"
+					formaction="?/delete"
+				>
+					&times;
+				</button>
 			</li>
 		{/each}
 	</ul>
@@ -110,11 +119,14 @@
 	.item-list li button {
 		width: 100%;
 		text-align: left;
-		padding: 0.75rem;
+		height: 2rem;
+		padding: 0 0.75rem;
 		border: 1px solid #e0e0e0;
 		border-radius: 0.5rem;
 		background: #fff;
 		font-size: 1rem;
+		display: flex;
+		align-items: center;
 		transition: background 0.15s;
 	}
 
@@ -122,6 +134,35 @@
 		background: #f5f5f5;
 	}
 
+	.catalog-item {
+		display: flex;
+		gap: 0.25rem;
+		height: 2rem;
+	}
+
+	.catalog-item button:first-child {
+		flex-grow: 1;
+		width: auto;
+		display: flex;
+		align-items: center;
+	}
+
+	.catalog-item .delete-btn {
+		border: 1px solid #e0e0e0;
+		border-radius: 0.5rem;
+		background: #fff;
+		color: #d00;
+		transition: background 0.15s;
+		width: 2rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.catalog-item .delete-btn:hover {
+		background: #fee;
+	}
+
 	.empty {
 		color: #999;
 		font-size: 0.875rem;
-- 
cgit v1.3