sekcja paragonów przebudowana

shopping_app/static/css/style.css

@@ -5808,3 +5808,116 @@ body:not(.sorting-active) .drag-handle {
   min-width: 2.5rem;
   border-radius: 10px;
 }
+
+
+/* =========================================================
+   Receipt disclosure (share view)
+========================================================= */
+.receipt-disclosure {
+  width: 100%;
+  cursor: pointer;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 20px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
+  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
+
+.receipt-disclosure:hover,
+.receipt-disclosure:focus-visible {
+  transform: translateY(-1px);
+  border-color: rgba(255, 255, 255, 0.18);
+  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
+  outline: none;
+}
+
+.receipt-disclosure.is-open {
+  border-color: rgba(24, 64, 118, 0.9);
+  background: linear-gradient(135deg, rgba(24, 64, 118, 0.22), rgba(255, 255, 255, 0.03));
+}
+
+.receipt-disclosure__content {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 16px 18px;
+}
+
+.receipt-disclosure__icon {
+  display: grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.06);
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+
+.receipt-disclosure__text {
+  min-width: 0;
+  flex: 1;
+}
+
+.receipt-disclosure__eyebrow {
+  font-size: 0.72rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.52);
+  margin-bottom: 2px;
+}
+
+.receipt-disclosure__title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-strong);
+}
+
+.receipt-disclosure__meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.receipt-disclosure__count {
+  min-width: 34px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-strong);
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+.receipt-disclosure__chevron {
+  font-size: 1.15rem;
+  color: rgba(255, 255, 255, 0.7);
+  transition: transform 0.2s ease;
+}
+
+.receipt-disclosure.is-open .receipt-disclosure__chevron {
+  transform: rotate(180deg);
+}
+
+@media (max-width: 575.98px) {
+  .receipt-disclosure__content {
+    padding: 14px;
+    gap: 12px;
+  }
+
+  .receipt-disclosure__icon {
+    width: 42px;
+    height: 42px;
+    border-radius: 12px;
+  }
+
+  .receipt-disclosure__meta {
+    gap: 10px;
+  }
+
+  .receipt-disclosure__title {
+    font-size: 0.95rem;
+  }
+}

shopping_app/static/js/receipt_section.js

@@ -1,39 +1,55 @@
 document.addEventListener("DOMContentLoaded", function () {
   const receiptSection = document.getElementById("receiptSection");
-  const toggleBtn = document.querySelector('[data-bs-target="#receiptSection"]');
+  const toggleEl = document.querySelector('[data-bs-target="#receiptSection"]');
 
-  if (!receiptSection || !toggleBtn) return;
+  if (!receiptSection || !toggleEl) return;
+
+  const collapse = bootstrap.Collapse.getOrCreateInstance(receiptSection, { toggle: false });
 
   if (localStorage.getItem("receiptSectionOpen") === "true") {
-    new bootstrap.Collapse(receiptSection, { toggle: true });
+    collapse.show();
   }
 
-  receiptSection.addEventListener('shown.bs.collapse', function () {
-    localStorage.setItem("receiptSectionOpen", "true");
-  });
-
-  receiptSection.addEventListener('hidden.bs.collapse', function () {
-    localStorage.setItem("receiptSectionOpen", "false");
-  });
-});
-
-document.addEventListener("DOMContentLoaded", function () {
-  const btn = document.getElementById("toggleReceiptBtn");
-  const target = document.querySelector(btn.getAttribute("data-bs-target"));
+  const titleEl = toggleEl.querySelector(".receipt-disclosure__title");
 
   function updateUI() {
-    const isShown = target.classList.contains("show");
-    btn.innerHTML = isShown
-      ? "📄 Ukryj sekcję paragonów"
-      : "📄 Pokaż sekcję paragonów";
+    const isShown = receiptSection.classList.contains("show");
 
-    btn.classList.toggle("active", isShown);
-    btn.classList.toggle("btn-outline-light", !isShown);
-    btn.classList.toggle("btn-secondary", isShown);
+    toggleEl.classList.toggle("is-open", isShown);
+    toggleEl.setAttribute("aria-expanded", isShown ? "true" : "false");
+
+    if (titleEl) {
+      titleEl.textContent = isShown
+        ? "Ukryj sekcję paragonów"
+        : "Pokaż sekcję paragonów";
+    }
   }
 
-  target.addEventListener("shown.bs.collapse", updateUI);
-  target.addEventListener("hidden.bs.collapse", updateUI);
+  function toggleSection() {
+    collapse.toggle();
+  }
+
+  toggleEl.addEventListener("click", function (event) {
+    event.preventDefault();
+    toggleSection();
+  });
+
+  toggleEl.addEventListener("keydown", function (event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      toggleSection();
+    }
+  });
+
+  receiptSection.addEventListener("shown.bs.collapse", function () {
+    localStorage.setItem("receiptSectionOpen", "true");
+    updateUI();
+  });
+
+  receiptSection.addEventListener("hidden.bs.collapse", function () {
+    localStorage.setItem("receiptSectionOpen", "false");
+    updateUI();
+  });
 
   updateUI();
-});
+});

shopping_app/templates/list_share.html

@@ -138,10 +138,20 @@
   <b>💸 Łącznie wydano:</b> {{ '%.2f'|format(total_expense) }} PLN
 </p>
 
-<button id="toggleReceiptBtn" class="btn btn-outline-light mb-3 w-100 w-md-auto d-block mx-auto" type="button"
+<div id="toggleReceiptBtn" class="receipt-disclosure mb-3" role="button" tabindex="0"
   data-bs-toggle="collapse" data-bs-target="#receiptSection" aria-expanded="false" aria-controls="receiptSection">
-  📄 Pokaż sekcję paragonów
-</button>
+  <div class="receipt-disclosure__content">
+    <div class="receipt-disclosure__icon" aria-hidden="true">🧾</div>
+    <div class="receipt-disclosure__text">
+      <div class="receipt-disclosure__eyebrow">Strefa paragonów</div>
+      <div class="receipt-disclosure__title">Pokaż sekcję paragonów</div>
+    </div>
+    <div class="receipt-disclosure__meta">
+      <span class="receipt-disclosure__count">{{ receipts|length }}</span>
+      <span class="receipt-disclosure__chevron" aria-hidden="true">⌄</span>
+    </div>
+  </div>
+</div>
 
 <div class="collapse px-2 px-md-4" id="receiptSection">
   {% set receipt_pattern = 'list_' ~ list.id %}