2026-03-31 18:22:27 +02:00
4 changed files with 406 additions and 79 deletions
--- a/shopping_app/static/css/style.css
+++ b/shopping_app/static/css/style.css
@@ -5714,3 +5714,218 @@ body:not(.sorting-active) .drag-handle {
  min-height: var(--ui-control-height) !important;
  border-radius: var(--ui-control-radius) !important;
 }
+
+/* Share hub redesign (mobile-first) */
+.share-hub {
+  border: 1px solid rgba(79, 142, 255, 0.18);
+  background: linear-gradient(180deg, rgba(11, 24, 43, 0.98), rgba(8, 17, 31, 0.96)) !important;
+}
+
+.share-hub .card-body {
+  padding: 1rem;
+}
+
+.share-hub__top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.9rem;
+  margin-bottom: 0.85rem;
+}
+
+.share-hub__eyebrow,
+.share-sheet__eyebrow {
+  font-size: 0.72rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(186, 210, 240, 0.62);
+  margin-bottom: 0.35rem;
+}
+
+.share-hub__title {
+  font-size: 1.1rem;
+  font-weight: 700;
+}
+
+.share-hub__status,
+.share-sheet__section-head {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  align-items: center;
+}
+
+.share-state-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  min-height: 32px;
+  padding: 0.45rem 0.72rem;
+  font-size: 0.76rem;
+  font-weight: 600;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.share-state-badge--public {
+  background: rgba(41, 209, 125, 0.16);
+  color: #dfffea;
+}
+
+.share-state-badge--private {
+  background: rgba(255, 255, 255, 0.06);
+  color: #edf5ff;
+}
+
+.share-state-badge--link {
+  background: rgba(79, 142, 255, 0.14);
+  color: #d7e7ff;
+}
+
+.share-state-badge--people {
+  background: rgba(255, 255, 255, 0.08);
+  color: #edf5ff;
+}
+
+.share-hub__note {
+  color: rgba(210, 224, 244, 0.74);
+  font-size: 0.92rem;
+  line-height: 1.45;
+}
+
+.share-hub__linkbox {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.035);
+  border-radius: 16px;
+  padding: 0.85rem 0.95rem;
+}
+
+.share-hub__linklabel {
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: rgba(186, 210, 240, 0.58);
+  margin-bottom: 0.3rem;
+}
+
+.share-hub__linkvalue {
+  color: #f4f8ff;
+  font-size: 0.95rem;
+  line-height: 1.45;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.share-hub__actions {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.65rem;
+}
+
+.share-hub__primary,
+.share-hub__secondary,
+.share-hub__manage,
+.share-sheet__toggle,
+.share-sheet__sticky-actions .btn,
+.share-sheet__linkstack .btn,
+
+
+.share-hub__manage {
+  white-space: nowrap;
+}
+
+.share-sheet {
+  height: auto !important;
+  max-height: min(90vh, 760px);
+  border-top-left-radius: 24px;
+  border-top-right-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: linear-gradient(180deg, rgba(8, 18, 33, 0.995), rgba(6, 13, 24, 0.99)) !important;
+  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.42);
+}
+
+.share-sheet__header {
+  align-items: flex-start;
+  padding: 0.85rem 1rem 0.6rem;
+}
+
+.share-sheet__body {
+  padding: 0 1rem calc(1rem + env(safe-area-inset-bottom));
+  overflow-y: auto;
+}
+
+.share-sheet__grabber {
+  width: 52px;
+  height: 5px;
+  border-radius: 999px;
+  margin: 0 auto 0.8rem;
+  background: rgba(255, 255, 255, 0.22);
+}
+
+.share-sheet__section {
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  background: rgba(255, 255, 255, 0.035);
+  border-radius: 18px;
+  padding: 0.95rem;
+  margin-bottom: 0.9rem;
+}
+
+.share-sheet__section-head {
+  justify-content: space-between;
+  margin-bottom: 0.7rem;
+  font-weight: 600;
+}
+
+.share-sheet__linkstack,
+.share-access-panel__input {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.65rem;
+}
+
+.share-access-panel .tokens {
+  min-height: 2rem;
+}
+
+.share-access-panel .token {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.share-sheet__sticky-actions {
+  position: sticky;
+  bottom: 0;
+  padding-top: 0.3rem;
+  background: linear-gradient(180deg, rgba(6, 13, 24, 0), rgba(6, 13, 24, 0.96) 28%);
+}
+
+@media (min-width: 576px) {
+  .share-hub .card-body,
+  .share-sheet__header,
+  .share-sheet__body {
+    padding-left: 1.2rem;
+    padding-right: 1.2rem;
+  }
+
+  .share-sheet__linkstack,
+  .share-access-panel__input {
+    grid-template-columns: 1fr auto;
+    align-items: center;
+  }
+}
+
+@media (min-width: 768px) {
+  .share-hub .card-body {
+    padding: 1.15rem 1.2rem;
+  }
+
+  .share-hub__actions {
+    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
+  }
+
+  .share-sheet {
+    max-width: 760px;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+  }
+}
--- a/shopping_app/static/js/access_users.js
+++ b/shopping_app/static/js/access_users.js
@@ -19,6 +19,28 @@
        tokensBox.appendChild(btn);
    }

+    function pluralizePeople(count) {
+        if (count === 1) return 'osoba';
+        const mod10 = count % 10;
+        const mod100 = count % 100;
+        if (mod10 >= 2 && mod10 <= 4 && !(mod100 >= 12 && mod100 <= 14)) return 'osoby';
+        return 'osób';
+    }
+
+    function syncAccessCount(box) {
+        if (!box) return;
+        const count = $$('.token', box).length;
+        const sheetBadge = document.getElementById('shareSheetPeopleBadge');
+        const cardBadge = document.getElementById('sharePeopleBadge');
+
+        if (sheetBadge) sheetBadge.textContent = String(count);
+
+        if (cardBadge) {
+            cardBadge.textContent = `👥 ${count} ${pluralizePeople(count)}`;
+            cardBadge.classList.toggle('d-none', count === 0);
+        }
+    }
+
    function wantsJSON() {
        return {
            'Accept': 'application/json',
@@ -127,6 +149,7 @@
                    empty.textContent = 'Brak dodanych uprawnień.';
                    tokensBox.appendChild(empty);
                }
+                syncAccessCount(box);
                toast(`Odebrano dostęp: @${username}`, 'success');
            } else {
                btn.disabled = false; btn.classList.remove('disabled');
@@ -151,6 +174,7 @@
                    if (res.data?.user) {
                        appendToken(box, res.data.user);
                        appended++;
+                        syncAccessCount(box);
                    }
                } else {
                    failCount++;
@@ -171,6 +195,7 @@

        addBtn?.addEventListener('click', addUsers);
        input?.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); addUsers(); } });
+        syncAccessCount(box);
    }

    document.addEventListener('DOMContentLoaded', () => {
--- a/shopping_app/static/js/functions.js
+++ b/shopping_app/static/js/functions.js
@@ -243,27 +243,65 @@ function applyHidePurchased(isInit = false) {
  });
 }

+function formatShareUrlPreview(url) {
+  return String(url || '').replace(/^https?:\/\//, '');
+}
+
+function setVisibilityBadgeState(el, isPublic, publicLabel = '🌍 Publiczna', privateLabel = '🔒 Prywatna') {
+  if (!el) return;
+  el.classList.remove('share-state-badge--public', 'share-state-badge--private');
+  el.classList.add(isPublic ? 'share-state-badge--public' : 'share-state-badge--private');
+  el.textContent = isPublic ? publicLabel : privateLabel;
+}
+
+function updateShareVisibilityUI(data) {
+  const shareUrl = data?.share_url || '';
+  const isPublic = !!data?.is_public;
+
+  const shareUrlInput = document.getElementById('shareUrlInput');
+  const shareUrlPreview = document.getElementById('shareUrlPreview');
+  const copyBtn = document.getElementById('copyBtn');
+  const toggleBtn = document.getElementById('toggleVisibilityBtn');
+  const mainNote = document.getElementById('shareVisibilityNote');
+  const sheetNote = document.getElementById('shareSheetVisibilityNote');
+  const mainOpenBtn = document.getElementById('openShareModeBtn');
+  const sheetOpenBtn = document.getElementById('openShareModeBtnSheet');
+
+  if (shareUrlInput) shareUrlInput.value = shareUrl;
+  if (shareUrlPreview) shareUrlPreview.textContent = formatShareUrlPreview(shareUrl);
+  if (copyBtn) copyBtn.disabled = false;
+  if (mainOpenBtn) mainOpenBtn.href = shareUrl;
+  if (sheetOpenBtn) sheetOpenBtn.href = shareUrl;
+
+  setVisibilityBadgeState(document.getElementById('shareVisibilityBadge'), isPublic);
+  setVisibilityBadgeState(document.getElementById('shareSheetVisibilityBadge'), isPublic, 'Publiczna', 'Prywatna');
+
+  if (mainNote) {
+    mainNote.textContent = isPublic
+      ? 'Lista działa publicznie i przez link udostępniania.'
+      : 'Lista działa przez link udostępniania i dla zaproszonych osób.';
+  }
+
+  if (sheetNote) {
+    sheetNote.textContent = isPublic
+      ? 'Lista jest widoczna publicznie i nadal działa przez link.'
+      : 'Lista nie jest publiczna, ale nadal działa przez link i dla zaproszonych osób.';
+  }
+
+  if (toggleBtn) {
+    toggleBtn.innerHTML = isPublic ? '🙈 Ustaw jako prywatną' : '🌍 Uczyń publiczną';
+  }
+}
+
 function toggleVisibility(listId) {
  fetch('/toggle_visibility/' + listId, { method: 'POST' })
    .then(response => response.json())
    .then(data => {
-      const shareHeader = document.getElementById('share-header');
-      const shareUrlSpan = document.getElementById('share-url');
-      const copyBtn = document.getElementById('copyBtn');
-      const toggleBtn = document.getElementById('toggleVisibilityBtn');
-
-      // URL zawsze widoczny i aktywny
-      shareUrlSpan.style.display = 'inline';
-      shareUrlSpan.textContent = data.share_url;
-      copyBtn.disabled = false;
-
-      if (data.is_public) {
-        shareHeader.textContent = '🔗 Udostępnij link (lista publiczna)';
-        toggleBtn.innerHTML = '🙈 Ukryj listę';
-      } else {
-        shareHeader.textContent = '🔗 Udostępnij link (widoczna tylko przez link / uprawnienia)';
-        toggleBtn.innerHTML = '🐵 Uczyń publiczną';
-      }
+      updateShareVisibilityUI(data);
+      showToast(data.is_public ? 'Lista jest teraz publiczna.' : 'Lista jest teraz prywatna.', 'success');
+    })
+    .catch(() => {
+      showToast('Nie udało się zmienić widoczności listy.', 'danger');
    });
 }

--- a/shopping_app/templates/list.html
+++ b/shopping_app/templates/list.html
@@ -30,38 +30,49 @@
  </h2>
 </div>

-<a href="{{ request.url_root }}share/{{ list.share_token }}" class="btn btn-outline-primary btn-sm w-100 mb-3" {% if not
-  list.is_public %}disabled{% endif %}>
-  ✅ Otwórz tryb odznaczania
-</a>
+{% set share_url = url_for('shared_list', token=list.share_token, _external=True) %}
+{% set permitted_count = permitted_users|length %}

-<div id="share-card" class="card bg-secondary bg-opacity-10 text-white mb-4">
+<div id="share-card" class="card share-hub text-white mb-4">
  <div class="card-body">
-    <div class="mb-2">
-      <strong id="share-header">
-        {% if list.is_public %}🔗 Udostępnij link (lista publiczna){% else %}🔗 Udostępnij link (widoczna przez link /
-        uprawnienia){% endif %}
-      </strong>
-      <span id="share-url" class="badge rounded-pill bg-secondary text-wrap" style="font-size: 0.7rem;">
-        {{ request.url_root }}share/{{ list.share_token }}
-      </span>
+    <div class="share-hub__top">
+      <div>
+        <div class="share-hub__eyebrow">Udostępnianie</div>
+        <h5 class="share-hub__title mb-2">Dostęp do listy</h5>
+        <div class="share-hub__status">
+          <span id="shareVisibilityBadge" class="badge rounded-pill share-state-badge {% if list.is_public %}share-state-badge--public{% else %}share-state-badge--private{% endif %}">
+            {% if list.is_public %}🌍 Publiczna{% else %}🔒 Prywatna{% endif %}
+          </span>
+          <span class="badge rounded-pill share-state-badge share-state-badge--link">🔗 Link aktywny</span>
+          <span id="sharePeopleBadge" class="badge rounded-pill share-state-badge share-state-badge--people {% if not permitted_count %}d-none{% endif %}">👥 {{ permitted_count }} {% if permitted_count == 1 %}osoba{% elif permitted_count < 5 %}osoby{% else %}osób{% endif %}</span>
+        </div>
+      </div>
+
+      <button class="btn btn-outline-light btn-sm share-hub__manage" data-bs-toggle="offcanvas" data-bs-target="#shareSheet" aria-controls="shareSheet">
+        ⚙️ Zarządzaj
+      </button>
    </div>
-    <div class="d-flex flex-column flex-md-row gap-2">
-      <button id="copyBtn" class="btn btn-outline-success btn-sm flex-fill"
-        onclick="copyLink('{{ request.url_root }}share/{{ list.share_token }}')">
-        📋 Skopiuj / Udostępnij
-      </button>

-      <button id="toggleVisibilityBtn" class="btn btn-outline-light btn-sm flex-fill"
-        onclick="toggleVisibility({{ list.id }})">
-        {% if list.is_public %}🙈 Ustaw niepubliczną{% else %}🐵 Uczyń publiczną{% endif %}
-      </button>
+    <p id="shareVisibilityNote" class="share-hub__note mb-3">
+      {% if list.is_public %}
+      Lista działa publicznie i przez link udostępniania.
+      {% else %}
+      Lista działa przez link udostępniania i dla zaproszonych osób.
+      {% endif %}
+    </p>

-      <!-- ZAMIAST LINKU: OTWARCIE MODALA NADAWANIA DOSTĘPU -->
-      <button class="btn btn-outline-primary btn-sm flex-fill" data-bs-toggle="modal"
-        data-bs-target="#grantAccessModal">
-        ➕ Nadaj dostęp
+    <div class="share-hub__linkbox mb-3">
+      <div class="share-hub__linklabel">Link do listy</div>
+      <div id="shareUrlPreview" class="share-hub__linkvalue">{{ share_url | replace('https://', '') | replace('http://', '') }}</div>
+    </div>
+
+    <div class="share-hub__actions">
+      <button id="copyBtn" class="btn btn-success share-hub__primary" onclick="copyLink('{{ share_url }}')">
+        📤 Udostępnij
      </button>
+      <a id="openShareModeBtn" href="{{ share_url }}" target="_blank" rel="noopener" class="btn btn-outline-light share-hub__secondary">
+        ✅ Tryb odznaczania
+      </a>
    </div>
  </div>
 </div>
@@ -385,49 +396,87 @@
  {% for username in all_usernames %}<option value="{{ username }}"></option>{% endfor %}
 </datalist>

-<!-- MODAL: NADAWANIE DOSTĘPU -->
-<div class="modal fade" id="grantAccessModal" tabindex="-1" aria-labelledby="grantAccessModalLabel" aria-hidden="true">
-  <div class="modal-dialog modal-lg modal-dialog-scrollable">
-    <div class="modal-content bg-dark text-white">
-      <div class="modal-header">
-        <h5 class="modal-title" id="grantAccessModalLabel">Nadaj dostęp użytkownikom</h5>
-        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+<!-- MOBILE-FIRST: PANEL UDOSTĘPNIANIA -->
+<div class="offcanvas offcanvas-bottom share-sheet" tabindex="-1" id="shareSheet" aria-labelledby="shareSheetLabel">
+  <div class="offcanvas-header share-sheet__header">
+    <div class="w-100">
+      <div class="share-sheet__grabber"></div>
+      <div class="share-sheet__eyebrow">Udostępnianie</div>
+      <h5 class="offcanvas-title mb-0" id="shareSheetLabel">Zarządzaj dostępem</h5>
+    </div>
+    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Zamknij"></button>
+  </div>
+
+  <div class="offcanvas-body share-sheet__body">
+    <div class="share-sheet__section">
+      <div class="share-sheet__section-head">
+        <span>Link do listy</span>
+        <span class="badge rounded-pill share-state-badge share-state-badge--link">Aktywny</span>
+      </div>
+      <div class="share-sheet__linkstack">
+        <input id="shareUrlInput" type="text" class="form-control" value="{{ share_url }}" readonly>
+        <button class="btn btn-success" onclick="copyLink('{{ share_url }}')">📋 Kopiuj link</button>
+      </div>
+      <div class="text-secondary small mt-2">Na telefonie przycisk użyje systemowego udostępniania, jeśli jest dostępne.</div>
+    </div>
+
+    <div class="share-sheet__section">
+      <div class="share-sheet__section-head">
+        <span>Widoczność</span>
+        <span id="shareSheetVisibilityBadge" class="badge rounded-pill share-state-badge {% if list.is_public %}share-state-badge--public{% else %}share-state-badge--private{% endif %}">
+          {% if list.is_public %}Publiczna{% else %}Prywatna{% endif %}
+        </span>
+      </div>
+      <p id="shareSheetVisibilityNote" class="text-secondary small mb-3">
+        {% if list.is_public %}
+        Lista jest widoczna publicznie i nadal działa przez link.
+        {% else %}
+        Lista nie jest publiczna, ale nadal działa przez link i dla zaproszonych osób.
+        {% endif %}
+      </p>
+      <button id="toggleVisibilityBtn" class="btn btn-outline-light w-100 share-sheet__toggle" onclick="toggleVisibility({{ list.id }})">
+        {% if list.is_public %}🙈 Ustaw jako prywatną{% else %}🌍 Uczyń publiczną{% endif %}
+      </button>
+    </div>
+
+    <div class="share-sheet__section">
+      <div class="share-sheet__section-head">
+        <span>Osoby z dostępem</span>
+        <span id="shareSheetPeopleBadge" class="badge rounded-pill share-state-badge share-state-badge--people">{{ permitted_count }}</span>
      </div>

-      <div class="modal-body">
-        <div class="access-editor border rounded p-2 bg-dark"
-          data-post-url="{{ url_for('list_settings', list_id=list.id) }}"
-          data-suggest-url="{{ url_for('edit_my_list_suggestions', list_id=list.id) }}"
-          data-next="{{ url_for('view_list', list_id=list.id) }}" data-list-id="{{ list.id }}"
-          data-grant-action="grant_access" data-revoke-field="revoke_user_id">
+      <div class="access-editor share-access-panel"
+        data-post-url="{{ url_for('list_settings', list_id=list.id) }}"
+        data-suggest-url="{{ url_for('edit_my_list_suggestions', list_id=list.id) }}"
+        data-next="{{ url_for('view_list', list_id=list.id) }}" data-list-id="{{ list.id }}"
+        data-grant-action="grant_access" data-revoke-field="revoke_user_id">

-          <!-- Tokeny aktualnie uprawnionych -->
-          <div class="tokens d-flex flex-wrap gap-2 mb-2">
-            {% for u in permitted_users %}
-            <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill token" data-user-id="{{ u.id }}"
-              data-username="{{ u.username }}" title="Kliknij, aby odebrać dostęp">
-              @{{ u.username }} <span aria-hidden="true">×</span>
-            </button>
-            {% endfor %}
-            {% if not permitted_users or permitted_users|length == 0 %}
-            <span class="no-perms text-warning small">Brak dodanych uprawnień.</span>
-            {% endif %}
-          </div>
-
-          <!-- Dodawanie wielu na raz + podpowiedzi prywatne -->
-          <div class="input-group input-group-sm">
-            <input type="text" class="access-input form-control form-control-sm bg-dark text-white border-secondary"
-              placeholder="Dodaj @użytkownika (wiele: przecinki/enter)" list="userHintsOwner" autocomplete="off" aria-label="Dodaj użytkowników">
-            <button type="button" class="access-add btn btn-sm btn-outline-light"><span class="shopping-btn-icon" aria-hidden="true">➕</span><span class="shopping-btn-label">Dodaj</span></button>
-          </div>
-          <div class="text-secondary small mt-1">Kliknij token, aby odebrać dostęp.</div>
+        <div class="tokens d-flex flex-wrap gap-2 mb-3">
+          {% for u in permitted_users %}
+          <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill token" data-user-id="{{ u.id }}"
+            data-username="{{ u.username }}" title="Kliknij, aby odebrać dostęp">
+            @{{ u.username }} <span aria-hidden="true">×</span>
+          </button>
+          {% endfor %}
+          {% if not permitted_users or permitted_users|length == 0 %}
+          <span class="no-perms text-warning small">Brak dodanych uprawnień.</span>
+          {% endif %}
        </div>
-      </div>

-      <div class="modal-footer justify-content-end">
-        <button type="button" class="btn btn-sm btn-outline-light" data-bs-dismiss="modal">Zamknij</button>
+        <div class="share-access-panel__input">
+          <input type="text" class="access-input form-control bg-dark text-white border-secondary"
+            placeholder="Dodaj @użytkownika" list="userHintsOwner" autocomplete="off" aria-label="Dodaj użytkowników">
+          <button type="button" class="access-add btn btn-outline-light"><span class="shopping-btn-icon" aria-hidden="true">➕</span><span class="shopping-btn-label">Dodaj osobę</span></button>
+        </div>
+        <div class="text-secondary small mt-2">Kliknij użytkownika na liście, aby od razu odebrać dostęp.</div>
      </div>
    </div>
+
+    <div class="share-sheet__sticky-actions">
+      <a id="openShareModeBtnSheet" href="{{ share_url }}" target="_blank" rel="noopener" class="btn btn-outline-light w-100">
+        ✅ Otwórz tryb odznaczania
+      </a>
+    </div>
  </div>
 </div>