static/css/style.css

@@ -264,4 +264,18 @@ input.form-control {
 #empty-placeholder {
   font-style: italic;
   pointer-events: none;
+}
+
+#items li.hide-purchased {
+  display: none !important;
+}
+
+.list-group-item:first-child,
+.list-group-item:last-child {
+  border-radius: 0 !important;
+}
+
+.fade-out {
+  opacity: 0;
+  transition: opacity 0.5s ease;
 }

static/js/functions.js

@@ -16,6 +16,7 @@ function updateItemState(itemId, isChecked) {
     if (sp) sp.remove();
   }
   updateProgressBar();
+  applyHidePurchased();
 }
 
 function updateProgressBar() {
@@ -103,28 +104,43 @@ function copyLink(link) {
   }
 }
 
-/* function shareLink(link) {
-  if (navigator.share) {
-    navigator.share({
-      title: 'Udostępnij moją listę',
-      text: 'Zobacz tę listę!',
-      url: link
-    })
-    .catch((error) => {
-      console.error('Błąd podczas udostępniania', error);
-      alert('Nie udało się udostępnić linka');
-    });
-  } else {
-    copyLink(link);
-  }
-}
+function applyHidePurchased(isInit = false) {
+  console.log("applyHidePurchased: wywołana, isInit =", isInit);
+  const toggle = document.getElementById('hidePurchasedToggle');
+  if (!toggle) return;
+  const hide = toggle.checked;
 
-function fallbackCopy(link) {
-  navigator.clipboard.writeText(link).then(() => {
-    alert('Link skopiowany do schowka!');
+  const items = document.querySelectorAll('#items li');
+
+  items.forEach(li => {
+    const isPurchased = li.classList.contains('bg-success');
+
+    if (isPurchased) {
+      if (hide) {
+        if (isInit) {
+          // Jeśli inicjalizacja: od razu ukryj
+          li.classList.add('hide-purchased');
+          li.classList.remove('fade-out');
+        } else {
+          // Z animacją
+          li.classList.add('fade-out');
+          setTimeout(() => {
+            li.classList.add('hide-purchased');
+          }, 700);
+        }
+      } else {
+        // Odsłanianie
+        li.classList.remove('hide-purchased');
+        setTimeout(() => {
+          li.classList.remove('fade-out');
+        }, 10);
+      }
+    } else {
+      // Element niekupiony — zawsze pokazany
+      li.classList.remove('hide-purchased', 'fade-out');
+    }
   });
 }
- */
 
 function openList(link) {
   window.open(link, '_blank');
@@ -282,6 +298,7 @@ function updateListSmoothly(newItems) {
 
   updateProgressBar();
   toggleEmptyPlaceholder();
+  applyHidePurchased();
 }
 
 document.addEventListener("DOMContentLoaded", function() {
@@ -302,3 +319,16 @@ document.addEventListener("DOMContentLoaded", function() {
     localStorage.setItem("receiptSectionOpen", "false");
   });
 });
+
+document.addEventListener("DOMContentLoaded", function() {
+  const toggle = document.getElementById('hidePurchasedToggle');
+  if (!toggle) return;
+
+  const savedState = localStorage.getItem('hidePurchasedToggle');
+  toggle.checked = savedState === 'true';
+  applyHidePurchased(true);
+  toggle.addEventListener('change', function() {
+    localStorage.setItem('hidePurchasedToggle', toggle.checked ? 'true' : 'false');
+    applyHidePurchased();
+  });
+});

templates/list.html

@@ -78,6 +78,11 @@ Lista: <strong>{{ list.title }}</strong>
   </div>
 {% endif %}
 
+<div class="form-check form-switch mb-3 d-flex justify-content-end">
+  <input class="form-check-input" type="checkbox" id="hidePurchasedToggle">
+  <label class="form-check-label ms-2" for="hidePurchasedToggle">Ukryj kupione produkty</label>
+</div>
+
 <ul id="items" class="list-group mb-3">
   {% for item in items %}
   <li data-name="{{ item.name|lower }}" id="item-{{ item.id }}" class="list-group-item d-flex justify-content-between align-items-center flex-wrap {% if item.purchased %}bg-success text-white{% else %}item-not-checked{% endif %}" id="item-{{ item.id }}">

templates/list_share.html

@@ -4,6 +4,8 @@
 
 <h2 class="mb-2">
   🛍️ {{ list.title }}
+
+
   {% if list.is_archived %}
     <span class="badge bg-secondary ms-2">(Archiwalna)</span>
   {% endif %}
@@ -18,6 +20,12 @@
   {% endif %}
 </h2>
 
+<div class="form-check form-switch mb-3 d-flex justify-content-end">
+  <input class="form-check-input" type="checkbox" id="hidePurchasedToggle">
+  <label class="form-check-label ms-2" for="hidePurchasedToggle">Ukryj kupione produkty</label>
+</div>
+
+
 <ul id="items" class="list-group mb-3">
   {% for item in items %}
   <li data-name="{{ item.name|lower }}" id="item-{{ item.id }}" class="list-group-item d-flex justify-content-between align-items-center flex-wrap clickable-item {% if item.purchased %}bg-success text-white{% else %}item-not-checked{% endif %}" id="item-{{ item.id }}">    <div class="d-flex align-items-center gap-3 flex-grow-1">