From 71b91b50b433eee0e9936700ab027666f684fb49 Mon Sep 17 00:00:00 2001
From: ulfrxdev <r.rafal.r9@gmail.com>
Date: Sun, 12 Apr 2026 00:04:07 +0200
Subject: [PATCH] Keep checked items in place within their category

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 js/views/ShoppingList.js | 41 +++++++++++-----------------------------
 1 file changed, 11 insertions(+), 30 deletions(-)

diff --git a/js/views/ShoppingList.js b/js/views/ShoppingList.js
index 9334dc3..f1e3ba8 100644
--- a/js/views/ShoppingList.js
+++ b/js/views/ShoppingList.js
@@ -123,8 +123,6 @@ function renderBoard() {
     if (!root) return;
 
     const items = getKitchenItems();
-    const unchecked = items.filter((i) => !i.checked);
-    const checked = items.filter((i) => i.checked);
 
     if (items.length === 0) {
         root.innerHTML = `
@@ -138,37 +136,20 @@ function renderBoard() {
         return;
     }
 
-    let html = '';
-
-    // Unchecked items grouped by category
-    if (unchecked.length > 0) {
-        const groups = groupItemsByCategory(unchecked);
-        html += groups.map(({ cat, items: catItems }) => {
-            const icon = CATEGORY_ICONS[cat] || 'fa-jar';
-            return `
-            <section class="mb-4">
-                <div class="flex items-center gap-1.5 mb-2 px-1">
-                    <i class="fas ${icon} text-[10px]" style="color:#9b978f;"></i>
-                    <p class="text-[10px] font-bold uppercase tracking-wider" style="color:#9b978f;">${esc(categoryLabel(cat))}</p>
-                    <span class="text-[10px]" style="color:#6d6c67;">${catItems.length}</span>
-                </div>
-                ${catItems.map((item) => itemRowHtml(item)).join('')}
-            </section>`;
-        }).join('');
-    }
-
-    // Checked items at the bottom
-    if (checked.length > 0) {
-        html += `
-        <section class="mt-4 pt-3" style="border-top:1px solid #3a3a38;">
+    const groups = groupItemsByCategory(items);
+    const html = groups.map(({ cat, items: catItems }) => {
+        const icon = CATEGORY_ICONS[cat] || 'fa-jar';
+        const uncheckedCount = catItems.filter((i) => !i.checked).length;
+        return `
+        <section class="mb-4">
             <div class="flex items-center gap-1.5 mb-2 px-1">
-                <i class="fas fa-check text-[10px]" style="color:#6d6c67;"></i>
-                <p class="text-[10px] font-bold uppercase tracking-wider" style="color:#6d6c67;">Kupione</p>
-                <span class="text-[10px]" style="color:#6d6c67;">${checked.length}</span>
+                <i class="fas ${icon} text-[10px]" style="color:#9b978f;"></i>
+                <p class="text-[10px] font-bold uppercase tracking-wider" style="color:#9b978f;">${esc(categoryLabel(cat))}</p>
+                <span class="text-[10px]" style="color:#6d6c67;">${uncheckedCount}/${catItems.length}</span>
             </div>
-            ${checked.map((item) => itemRowHtml(item)).join('')}
+            ${catItems.map((item) => itemRowHtml(item)).join('')}
         </section>`;
-    }
+    }).join('');
 
     root.innerHTML = html;
     bindRowEvents(root);