From 33bef8eb3fad7d3a68056235f5c24d5f0e101f9d Mon Sep 17 00:00:00 2001
From: Ulas <ulas@kalayci.cloud>
Date: Tue, 31 Mar 2026 12:47:37 +0200
Subject: [PATCH] feat: wrap shopping items in swipe-row

---
 public/pages/shopping.js | 39 +++++++++++++++++++++++++--------------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/public/pages/shopping.js b/public/pages/shopping.js
index 69a7419..b0bcef9 100644
--- a/public/pages/shopping.js
+++ b/public/pages/shopping.js
@@ -182,22 +182,33 @@ function renderItems() {
 }
 
 function renderItem(item) {
+  const isDone = Boolean(item.is_checked);
   return `
-    <div class="shopping-item ${item.is_checked ? 'shopping-item--checked' : ''}"
-         data-item-id="${item.id}">
-      <button class="item-check ${item.is_checked ? 'item-check--checked' : ''}"
-              data-action="toggle-item" data-id="${item.id}" data-checked="${item.is_checked}"
-              aria-label="${item.name} ${item.is_checked ? 'als nicht erledigt markieren' : 'abhaken'}">
-        <i data-lucide="check" class="item-check__icon" aria-hidden="true"></i>
-      </button>
-      <div class="item-body">
-        <div class="item-name">${item.name}</div>
-        ${item.quantity ? `<div class="item-quantity">${item.quantity}</div>` : ''}
+    <div class="swipe-row" data-swipe-id="${item.id}" data-swipe-checked="${item.is_checked}">
+      <div class="swipe-reveal swipe-reveal--done" aria-hidden="true">
+        <i data-lucide="${isDone ? 'rotate-ccw' : 'check'}" style="width:22px;height:22px" aria-hidden="true"></i>
+        <span>${isDone ? 'Zurück' : 'Abhaken'}</span>
+      </div>
+      <div class="swipe-reveal swipe-reveal--delete" aria-hidden="true">
+        <i data-lucide="trash-2" style="width:22px;height:22px" aria-hidden="true"></i>
+        <span>Löschen</span>
+      </div>
+      <div class="shopping-item ${isDone ? 'shopping-item--checked' : ''}"
+           data-item-id="${item.id}">
+        <button class="item-check ${isDone ? 'item-check--checked' : ''}"
+                data-action="toggle-item" data-id="${item.id}" data-checked="${item.is_checked}"
+                aria-label="${item.name} ${isDone ? 'als nicht erledigt markieren' : 'abhaken'}">
+          <i data-lucide="check" class="item-check__icon" aria-hidden="true"></i>
+        </button>
+        <div class="item-body">
+          <div class="item-name">${item.name}</div>
+          ${item.quantity ? `<div class="item-quantity">${item.quantity}</div>` : ''}
+        </div>
+        <button class="item-delete" data-action="delete-item" data-id="${item.id}"
+                aria-label="${item.name} löschen">
+          <i data-lucide="x" style="width:16px;height:16px" aria-hidden="true"></i>
+        </button>
       </div>
-      <button class="item-delete" data-action="delete-item" data-id="${item.id}"
-              aria-label="${item.name} löschen">
-        <i data-lucide="x" style="width:16px;height:16px" aria-hidden="true"></i>
-      </button>
     </div>`;
 }