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

2 files changed, 52 insertions, 2 deletions

diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 947cc3b..c57578f 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -62,4 +62,13 @@ export const actions: Actions = {
 
 		return { success: true };
 	},
+
+	delete: async ({ request }) => {
+		const data = await request.formData();
+		const id = Number(data.get('id'));
+
+		await db.delete(groceries).where(eq(groceries.id, id));
+
+		return { success: true };
+	},
 };
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;