From be43fe94b6324e70d540e96337c2626a281e433e Mon Sep 17 00:00:00 2001
From: Marcel Raddatz <marcel@raddatz.cloud>
Date: Mon, 6 Apr 2026 19:54:25 +0200
Subject: [PATCH] fix(shopping): address frontend review concerns

- ChecklistItem: use:enhance with reset:false, role=checkbox, aria-checked, focus ring
- RecipeReferencePanel: day abbreviation text-[12px] (was 11px)
- ShoppingHeader: generating pending state disables button during submit
- AddCustomItem: only collapse form on successful submission

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/shopping/AddCustomItem.svelte    | 14 ++++++++------
 frontend/src/lib/shopping/ChecklistItem.svelte    |  6 ++++--
 .../src/lib/shopping/RecipeReferencePanel.svelte  |  2 +-
 frontend/src/lib/shopping/ShoppingHeader.svelte   | 15 ++++++++++++---
 4 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/frontend/src/lib/shopping/AddCustomItem.svelte b/frontend/src/lib/shopping/AddCustomItem.svelte
index 90b9735..aad6c59 100644
--- a/frontend/src/lib/shopping/AddCustomItem.svelte
+++ b/frontend/src/lib/shopping/AddCustomItem.svelte
@@ -27,12 +27,14 @@
 		method="POST"
 		action="?/addItem"
 		use:enhance={() => {
-			return async ({ update }) => {
-				await update();
-				customName = '';
-				quantity = '1';
-				unit = '';
-				expanded = false;
+			return async ({ result, update }) => {
+				if (result.type === 'success') {
+					await update();
+					customName = '';
+					quantity = '1';
+					unit = '';
+					expanded = false;
+				}
 			};
 		}}
 		class="flex flex-col gap-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] p-3"
diff --git a/frontend/src/lib/shopping/ChecklistItem.svelte b/frontend/src/lib/shopping/ChecklistItem.svelte
index 8e443aa..059073c 100644
--- a/frontend/src/lib/shopping/ChecklistItem.svelte
+++ b/frontend/src/lib/shopping/ChecklistItem.svelte
@@ -32,15 +32,17 @@
 	);
 </script>
 
-<form method="POST" action="?/check" use:enhance class="group flex items-center gap-3 py-2">
+<form method="POST" action="?/check" use:enhance={() => async ({ update }) => update({ reset: false })} class="group flex items-center gap-3 py-2">
 	<input type="hidden" name="listId" value={listId} />
 	<input type="hidden" name="itemId" value={itemId} />
 	<input type="hidden" name="isChecked" value={!isChecked} />
 
 	<button
 		type="submit"
+		role="checkbox"
+		aria-checked={isChecked}
 		aria-label="{isChecked ? 'Abhaken rückgängig' : 'Abhaken'}: {name}"
-		class="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded border
+		class="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--green)]
 			{isChecked
 			? 'border-[var(--green)] bg-[var(--green)] text-white'
 			: 'border-[var(--color-border)] bg-[var(--color-surface)] hover:border-[var(--green-light)]'}"
diff --git a/frontend/src/lib/shopping/RecipeReferencePanel.svelte b/frontend/src/lib/shopping/RecipeReferencePanel.svelte
index e3c3685..2fc8189 100644
--- a/frontend/src/lib/shopping/RecipeReferencePanel.svelte
+++ b/frontend/src/lib/shopping/RecipeReferencePanel.svelte
@@ -30,7 +30,7 @@
 					href="/recipes/{slot.recipe?.id}"
 					class="flex items-center gap-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-page)] px-3 py-2 hover:border-[var(--green-light)]"
 				>
-					<span class="min-w-[28px] font-[var(--font-sans)] text-[11px] text-[var(--color-text-muted)]">
+					<span class="min-w-[28px] font-[var(--font-sans)] text-[12px] text-[var(--color-text-muted)]">
 						{slot.slotDate ? formatDayAbbr(slot.slotDate, 'short') : ''}
 					</span>
 					<span class="flex-1 truncate font-[var(--font-sans)] text-[13px] font-medium text-[var(--color-text)]">
diff --git a/frontend/src/lib/shopping/ShoppingHeader.svelte b/frontend/src/lib/shopping/ShoppingHeader.svelte
index 370a09c..c2457cb 100644
--- a/frontend/src/lib/shopping/ShoppingHeader.svelte
+++ b/frontend/src/lib/shopping/ShoppingHeader.svelte
@@ -14,6 +14,8 @@
 
 	let remainingCount = $derived(totalItems - checkedCount);
 
+	let generating = $state(false);
+
 	let formattedTime = $derived(
 		generatedAt
 			? new Date(generatedAt).toLocaleString('de-DE', {
@@ -33,15 +35,22 @@
 		</h1>
 
 		{#if isPlanner && weekPlanId}
-			<form method="POST" action="?/generate" use:enhance>
+			<form method="POST" action="?/generate" use:enhance={() => {
+					generating = true;
+					return async ({ update }) => {
+						await update();
+						generating = false;
+					};
+				}}>
 				<input type="hidden" name="weekPlanId" value={weekPlanId} />
 				<button
 					type="submit"
+					disabled={generating}
 					class="rounded-[var(--radius-md)] {hasShoppingList
 						? 'border border-[var(--color-border)] text-[var(--color-text)] hover:bg-[var(--color-surface)]'
-						: 'bg-[var(--green-dark)] text-white'} px-3 py-1.5 text-[13px] font-medium tracking-[0.04em] font-[var(--font-sans)]"
+						: 'bg-[var(--green-dark)] text-white'} px-3 py-1.5 text-[13px] font-medium tracking-[0.04em] font-[var(--font-sans)] disabled:opacity-50"
 				>
-					{hasShoppingList ? 'Neu generieren' : 'Liste generieren'}
+					{generating ? '…' : hasShoppingList ? 'Neu generieren' : 'Liste generieren'}
 				</button>
 			</form>
 		{/if}