Pan project: remove all disabled states, add undo emptied button

Author: alexandrosnt

src/lib/components/PanItemCard.svelte

@@ -18,6 +18,7 @@
 	let {
 		item,
 		onMarkEmptied,
+		onUndoEmptied,
 		onRemove,
 		onEdit,
 		selectMode = false,
@@ -26,6 +27,7 @@
 	}: {
 		item: PanItem;
 		onMarkEmptied?: (id: number) => void;
+		onUndoEmptied?: (id: number) => void;
 		onRemove?: (id: number) => void;
 		onEdit?: (id: number) => void;
 		selectMode?: boolean;
@@ -84,21 +86,31 @@
 		<ProgressBar value={percentage} height="8px" />
 	</div>
 
-	{#if onMarkEmptied}
-		<button
-			class="mark-emptied-btn"
-			class:complete={isComplete}
-			disabled={isComplete}
-			onclick={() => onMarkEmptied(item.id)}
-		>
-			{#if isComplete}
-				<i class="ri-check-double-line"></i>
-			{:else}
-				<i class="ri-check-line"></i>
-			{/if}
-			{t.panProject.markEmptied}
-		</button>
-	{/if}
+	<div class="btn-row">
+		{#if onUndoEmptied && item.emptied > 0}
+			<button
+				class="undo-emptied-btn"
+				onclick={() => onUndoEmptied(item.id)}
+			>
+				<i class="ri-arrow-go-back-line"></i>
+				{t.panProject.undoEmptied}
+			</button>
+		{/if}
+		{#if onMarkEmptied}
+			<button
+				class="mark-emptied-btn"
+				class:complete={isComplete}
+				onclick={() => onMarkEmptied(item.id)}
+			>
+				{#if isComplete}
+					<i class="ri-check-double-line"></i>
+				{:else}
+					<i class="ri-check-line"></i>
+				{/if}
+				{t.panProject.markEmptied}
+			</button>
+		{/if}
+	</div>
 </div>
 
 <style>
@@ -212,8 +224,38 @@
 		color: var(--text-soft);
 	}
 
+	.btn-row {
+		display: flex;
+		gap: 8px;
+	}
+
+	.undo-emptied-btn {
+		flex: 0 0 auto;
+		padding: 10px 14px;
+		border: 1px solid rgba(0, 0, 0, 0.06);
+		border-radius: 50px;
+		background: white;
+		font-family: 'Poppins', sans-serif;
+		font-size: 13px;
+		font-weight: 600;
+		color: var(--text-soft);
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 6px;
+		transition: 0.2s;
+		-webkit-tap-highlight-color: transparent;
+		touch-action: manipulation;
+	}
+
+	.undo-emptied-btn:active {
+		transform: scale(0.98);
+		background: #f5f5f5;
+	}
+
 	.mark-emptied-btn {
-		width: 100%;
+		flex: 1;
 		padding: 10px;
 		border: 1px solid rgba(0, 0, 0, 0.06);
 		border-radius: 50px;

src/lib/db/queries.ts

@@ -1951,6 +1951,22 @@ export async function markPanItemEmptied(panItemId: number): Promise<void> {
 	});
 }
 
+export async function undoPanItemEmptied(panItemId: number): Promise<void> {
+	const db = getDb();
+	// Decrement emptied count (min 0)
+	await db.execute({
+		sql: 'UPDATE pan_project_items SET emptied = MAX(emptied - 1, 0) WHERE id = ?',
+		args: [panItemId]
+	});
+	// If the inventory item was auto-marked used_up, reactivate it
+	await db.execute({
+		sql: `UPDATE items SET status = 'active', used_up_at = NULL
+			WHERE id = (SELECT item_id FROM pan_project_items WHERE id = ? AND emptied < quantity)
+			AND status = 'used_up'`,
+		args: [panItemId]
+	});
+}
+
 export async function removePanItem(userId: number, panItemId: number): Promise<void> {
 	const db = getDb();
 	await db.execute({

src/lib/i18n/de.ts

@@ -336,6 +336,7 @@ const de = {
 		editQuantity: 'Menge bearbeiten',
 		save: 'Speichern',
 		saving: 'Speichern...',
+		undoEmptied: 'Rückgängig',
 	},
 	shoppingList: {
 		title: 'Einkaufsliste',

src/lib/i18n/en.ts

@@ -336,6 +336,7 @@ const en = {
 		editQuantity: 'Edit Quantity',
 		save: 'Save',
 		saving: 'Saving...',
+		undoEmptied: 'Undo',
 	},
 	shoppingList: {
 		title: 'Shopping List',

src/routes/pan-project/+page.svelte

@@ -5,7 +5,7 @@
     import PanItemCard from '$lib/components/PanItemCard.svelte';
     import SelectModeButton from '$lib/components/SelectModeButton.svelte';
     import SelectionBar from '$lib/components/SelectionBar.svelte';
-    import { getPanItems, getPanProjectStats, markPanItemEmptied, removePanItem, removePanItems, updatePanItem, type PanProjectItem, type PanProjectStats } from '$lib/db/queries';
+    import { getPanItems, getPanProjectStats, markPanItemEmptied, undoPanItemEmptied, removePanItem, removePanItems, updatePanItem, type PanProjectItem, type PanProjectStats } from '$lib/db/queries';
     import { getAuthState } from '$lib/stores/auth.svelte';
     import { getRefreshSignal, triggerRefresh } from '$lib/stores/refresh.svelte';
     import { t } from '$lib/i18n/index.svelte';
@@ -96,6 +96,12 @@
         await loadData();
     }
 
+    async function handleUndoEmptied(panItemId: number) {
+        await undoPanItemEmptied(panItemId);
+        triggerRefresh();
+        await loadData();
+    }
+
     async function handleRemove(panItemId: number) {
         const userId = auth.currentUser?.id;
         if (!userId) return;
@@ -194,6 +200,7 @@
                 <PanItemCard
                     {item}
                     onMarkEmptied={selectMode ? undefined : handleMarkEmptied}
+                    onUndoEmptied={selectMode ? undefined : handleUndoEmptied}
                     onRemove={selectMode ? undefined : handleRemove}
                     onEdit={selectMode ? undefined : startEdit}
                     {selectMode}