zmiany dla michała

zmiana waluty w .env
Merge pull request 'split_css' (#15 ) from split_css into master
2026-04-10 12:00:46 +02:00 · 2026-04-02 08:25:07 +02:00 · 2026-04-01 11:09:31 +02:00 · 2026-04-01 08:19:00 +02:00 · 2026-04-01 08:02:42 +02:00 · 2026-04-01 07:55:56 +02:00
34 changed files with 6046 additions and 5902 deletions
--- a/.env.example
+++ b/.env.example
@@ -195,4 +195,10 @@ UPLOADS_CACHE_CONTROL="max-age=3600, immutable"
 # UWAGA: wielkość liter w nazwach jest zachowywana, ale porównywanie odbywa się
 # bez rozróżniania wielkości liter (case-insensitive).
 # Domyślnie: poniższa lista
-DEFAULT_CATEGORIES="Spożywcze,Budowlane,Zabawki,Chemia,Inne,Elektronika,Odzież i obuwie,Artykuły biurowe,Kosmetyki i higiena,Motoryzacja,Ogród i rośliny,Zwierzęta,Sprzęt sportowy,Książki i prasa,Narzędzia i majsterkowanie,RTV / AGD,Apteka i suplementy,Artykuły dekoracyjne,Gry i hobby,Usługi,Pieczywo"
+DEFAULT_CATEGORIES="Spożywcze,Budowlane,Zabawki,Chemia,Inne,Elektronika,Odzież i obuwie,Artykuły biurowe,Kosmetyki i higiena,Motoryzacja,Ogród i rośliny,Zwierzęta,Sprzęt sportowy,Książki i prasa,Narzędzia i majsterkowanie,RTV / AGD,Apteka i suplementy,Artykuły dekoracyjne,Gry i hobby,Usługi,Pieczywo"
+
+# Waluta używana w całej aplikacji (kwoty, paragony, analizy)
+# Użyj kodu ISO 4217 (np. PLN, EUR, USD, GBP)
+# Domyślnie: PLN (jeśli zmienna nie jest ustawiona)
+
+CURRENCY_CODE=PLN
--- a/config.py
+++ b/config.py
@@ -91,6 +91,8 @@ class Config:
    DEBUG_MODE = env_bool("DEBUG_MODE", True)
    DISABLE_ROBOTS = env_bool("DISABLE_ROBOTS", False)

+    CURRENCY_CODE = env_str("CURRENCY_CODE", "PLN").strip().upper() or "PLN"
+
    JS_CACHE_CONTROL = env_str("JS_CACHE_CONTROL", "no-cache")
    CSS_CACHE_CONTROL = env_str("CSS_CACHE_CONTROL", "no-cache")
    LIB_JS_CACHE_CONTROL = env_str("LIB_JS_CACHE_CONTROL", "max-age=604800")
--- a/deploy/varnish/default.vcl.template
+++ b/deploy/varnish/default.vcl.template
@@ -251,10 +251,16 @@ sub vcl_deliver {
  unset resp.http.Via;
  unset resp.http.X-Varnish;
  unset resp.http.Server;
+  unset resp.http.Content-Disposition;
 }

 sub vcl_synth {
+  set resp.http.Cache-Control = "private, no-store, no-cache";
  set resp.http.X-Cache = "SYNTH";
+  unset resp.http.Via;
+  unset resp.http.X-Varnish;
+  unset resp.http.Server;
+  unset resp.http.Content-Disposition;
 }

 # ===== PURGE HANDLER =====
--- a/shopping_app/helpers.py
+++ b/shopping_app/helpers.py
@@ -2,6 +2,25 @@ from .deps import *
 from .app_setup import *
 from .models import *

+
+def get_currency_code() -> str:
+    code = str(app.config.get("CURRENCY_CODE", "PLN") or "PLN").strip().upper()
+    return code or "PLN"
+
+
+def format_currency(amount, include_code: bool = True) -> str:
+    try:
+        normalized = float(amount or 0)
+    except (TypeError, ValueError):
+        normalized = 0.0
+    formatted = f"{normalized:.2f}"
+    return f"{formatted} {get_currency_code()}" if include_code else formatted
+
+
+def currency_placeholder(prefix: str = "Kwota") -> str:
+    return f"{prefix} ({get_currency_code()})"
+
+
 def get_setting(key: str, default: str | None = None) -> str | None:
    s = db.session.get(AppSetting, key)
    return s.value if s else default
--- a/shopping_app/sockets.py
+++ b/shopping_app/sockets.py
@@ -453,7 +453,7 @@ def handle_add_expense(data):
    )

    db.session.add(new_expense)
-    log_list_activity(list_id, 'expense_added', item_name=None, actor=current_user if current_user.is_authenticated else None, actor_name=current_user.username if current_user.is_authenticated else 'Gość', details=f'kwota: {float(amount):.2f} PLN')
+    log_list_activity(list_id, 'expense_added', item_name=None, actor=current_user if current_user.is_authenticated else None, actor_name=current_user.username if current_user.is_authenticated else 'Gość', details=f'kwota: {format_currency(amount)}')
    db.session.commit()

    total = (
--- a/shopping_app/static/css/split/buttons.css
+++ b/shopping_app/static/css/split/buttons.css
@@ -0,0 +1,195 @@
+.btn {
+  min-height: 40px;
+  padding: 0.52rem 0.8rem;
+  border-radius: 10px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  box-shadow: none;
+  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
+}
+
+.btn-sm {
+  min-height: 34px;
+  padding: 0.4rem 0.64rem;
+  border-radius: 9px;
+}
+
+.btn:focus,
+.btn:focus-visible {
+  border-color: rgba(25, 135, 84, 0.6) !important;
+  box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.16) !important;
+}
+
+.btn:hover,
+.btn:focus-visible {
+  transform: translateY(-1px);
+}
+
+.btn-primary {
+  background-color: var(--primary) !important;
+  border-color: var(--primary-border) !important;
+}
+
+.btn-primary:hover,
+.btn-primary:focus,
+.btn-primary:active {
+  background-color: #13315f !important;
+  border-color: #10284f !important;
+}
+
+.btn-success {
+  background: linear-gradient(135deg, #29d17d, #1ea860) !important;
+  border-color: rgba(41, 209, 125, 0.9) !important;
+  color: #fff !important;
+  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
+}
+
+.btn-success:hover,
+.btn-success:focus,
+.btn-success:active {
+  color: #fff !important;
+}
+
+.btn-warning {
+  background-color: var(--warning) !important;
+  border-color: var(--warning-border) !important;
+  color: var(--warning-text) !important;
+}
+
+.btn-warning:hover,
+.btn-warning:focus,
+.btn-warning:active {
+  background-color: #5c4c17 !important;
+  border-color: #3e3610 !important;
+  color: var(--warning-text) !important;
+}
+
+.btn-outline-light,
+.btn-outline-secondary,
+.btn-outline-warning,
+.btn-outline-danger,
+.btn-outline-primary,
+.btn-outline-success,
+.btn-outline-info {
+  background: rgba(255,255,255,0.03);
+}
+
+.btn-outline-light {
+  color: #f8f9fa !important;
+  border-color: #f8f9fa !important;
+}
+
+.btn-outline-light:hover,
+.btn-outline-light:focus,
+.btn-outline-light:focus-visible {
+  background-color: rgba(255,255,255,0.1) !important;
+  color: #fff !important;
+  border-color: #6c757d !important;
+  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
+}
+
+.btn-outline-light:active,
+.btn-outline-light.active,
+.show > .btn-outline-light.dropdown-toggle {
+  background-color: #5a6268 !important;
+  color: #fff !important;
+  border-color: #545b62 !important;
+}
+
+.btn-outline-secondary:hover,
+.btn-outline-secondary:focus,
+.btn-outline-secondary:focus-visible {
+  background: rgba(108, 117, 125, 0.18) !important;
+  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
+}
+
+.btn-outline-success {
+  color: var(--success) !important;
+  border-color: var(--success) !important;
+}
+
+.btn-outline-success:hover,
+.btn-outline-success:focus,
+.btn-outline-success:active,
+.btn-outline-success:focus-visible {
+  background: var(--ui-success-soft) !important;
+  border-color: var(--success-border) !important;
+  color: #fff !important;
+  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
+}
+
+.btn-outline-warning {
+  color: #d9c97a !important;
+  border-color: var(--warning) !important;
+}
+
+.btn-outline-warning:hover,
+.btn-outline-warning:focus,
+.btn-outline-warning:active,
+.btn-outline-warning:focus-visible {
+  background: var(--ui-warning-soft) !important;
+  border-color: var(--warning-border) !important;
+  color: var(--warning-text) !important;
+}
+
+.btn-outline-danger:hover,
+.btn-outline-danger:focus,
+.btn-outline-danger:focus-visible {
+  background: rgba(220, 53, 69, 0.16) !important;
+}
+
+.btn-outline-info {
+  color: var(--info) !important;
+  border-color: var(--info) !important;
+}
+
+.btn-outline-info:hover,
+.btn-outline-info:focus,
+.btn-outline-info:focus-visible {
+  background-color: #1d4d8c !important;
+  border-color: #1d4d8c !important;
+  color: var(--info-text) !important;
+}
+
+.btn-outline-info:active,
+.btn-outline-info.active,
+.show > .btn-outline-info.dropdown-toggle {
+  background-color: var(--info) !important;
+  border-color: var(--info-border) !important;
+  color: var(--info-text) !important;
+}
+
+#items .btn-group {
+  gap: 0.4rem;
+}
+
+#items .btn-group .btn {
+  border-radius: 12px !important;
+}
+
+.btn-group-compact,
+.admin-shortcuts .d-flex,
+.stack-form,
+.page-actions {
+  gap: 0.4rem;
+}
+
+.btn-group-compact .btn {
+  padding: 0.3rem 0.55rem;
+  font-size: 0.82rem;
+}
+
+.btn-group-compact .btn-text {
+  font-size: 0.78rem;
+}
+
+input[type="file"]::file-selector-button {
+  background-color: #1b4a29;
+  color: #f0f0f0;
+  border: none;
+  padding: .5em 1em;
+  border-radius: 4px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background .2s;
+}
--- a/shopping_app/static/css/split/components.css
+++ b/shopping_app/static/css/split/components.css
--- a/shopping_app/static/css/split/forms.css
+++ b/shopping_app/static/css/split/forms.css
@@ -0,0 +1,138 @@
+.form-select,
+.form-control,
+textarea.form-control {
+  background-color: var(--dark-700) !important;
+  color: var(--text-strong) !important;
+  border: 1px solid var(--dark-300) !important;
+}
+
+.form-select:focus,
+.form-control:focus,
+textarea.form-control:focus {
+  background-color: var(--dark-800) !important;
+  border-color: var(--primary) !important;
+  color: #fff !important;
+  box-shadow: 0 0 0 .25rem rgba(24, 64, 118, .35) !important;
+}
+
+.form-control:disabled,
+textarea.form-control:disabled {
+  background-color: var(--dark-550) !important;
+  color: var(--muted) !important;
+  cursor: not-allowed;
+}
+
+.form-switch .form-check-input {
+  background-color: var(--dark-400) !important;
+  border-color: var(--dark-300) !important;
+}
+
+.form-switch .form-check-input:checked {
+  background-color: var(--primary) !important;
+  border-color: var(--primary-border) !important;
+}
+
+.form-control::placeholder,
+.bg-dark .form-control::placeholder {
+  color: #aaa !important;
+  opacity: 1 !important;
+}
+
+.tom-dark .ts-control {
+  background-color: var(--dark-700) !important;
+  color: #fff !important;
+  border: 1px solid var(--dark-300) !important;
+  border-radius: .375rem;
+  min-height: 38px;
+  padding: .25rem .5rem;
+  box-sizing: border-box;
+}
+
+.tom-dark .ts-control .item {
+  background-color: var(--dark-400) !important;
+  color: #fff !important;
+  border-radius: .25rem;
+  padding: 2px 8px;
+  margin-right: 4px;
+}
+
+.ts-dropdown {
+  background-color: var(--dark-700) !important;
+  color: #fff !important;
+  border: 1px solid var(--dark-300);
+  border-radius: .375rem;
+  z-index: 9999 !important;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.ts-dropdown .active {
+  background-color: var(--dark-300) !important;
+  color: #fff !important;
+}
+
+td select.tom-dark {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.large-checkbox,
+input[type="checkbox"].large-checkbox {
+  width: 1.2rem;
+  height: 1.2rem;
+}
+
+.large-checkbox {
+  accent-color: #29d17d;
+  transform: none;
+  transform-origin: center;
+}
+
+input[type="checkbox"].large-checkbox {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  background: none;
+  cursor: pointer;
+  position: relative;
+  vertical-align: middle;
+}
+
+input[type="checkbox"].large-checkbox::before {
+  content: '✗';
+  color: #dc3545;
+  font-size: 1.6em;
+  font-weight: 700;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  transition: color .2s;
+}
+
+input[type="checkbox"].large-checkbox:checked::before {
+  content: '✓';
+  color: #fff;
+}
+
+input[type="checkbox"].large-checkbox:disabled::before {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+input[type="checkbox"].large-checkbox:disabled {
+  cursor: not-allowed;
+}
+
+#createListTempToggle,
+.create-list-temp-toggle,
+#tempToggle {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
--- a/shopping_app/static/css/split/layout.css
+++ b/shopping_app/static/css/split/layout.css
--- a/shopping_app/static/css/split/pages.css
+++ b/shopping_app/static/css/split/pages.css
@@ -0,0 +1,725 @@
+.preview-product-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.preview-product-summary {
+  padding: 0 0 0.85rem;
+  margin-bottom: 0.1rem;
+  border-bottom: 1px solid rgba(255,255,255,0.08);
+}
+
+.preview-product-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+}
+
+.preview-product-section-title {
+  margin: 0;
+  font-size: 1.05rem;
+  font-weight: 700;
+}
+
+.preview-modal-items {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+#productPreviewModal .preview-modal-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  min-width: 0;
+  padding: 0.9rem 1rem;
+  margin: 0 !important;
+  border-radius: 16px !important;
+  border: 1px solid rgba(255,255,255,0.08) !important;
+  background: linear-gradient(180deg, rgba(11,22,40,0.92) 0%, rgba(8,16,30,0.92) 100%) !important;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
+}
+
+#productPreviewModal .preview-modal-list-item:first-child,
+#productPreviewModal .preview-modal-list-item:last-child,
+#productPreviewModal .list-group-flush > .list-group-item:first-child,
+#productPreviewModal .list-group-flush > .list-group-item:last-child {
+  border-radius: 16px !important;
+}
+
+#productPreviewModal .preview-modal-list-item__name {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  flex: 1 1 auto;
+}
+
+#productPreviewModal .preview-modal-list-item .badge {
+  flex-shrink: 0;
+  min-width: 2.5rem;
+  border-radius: 10px;
+}
+
+.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;
+  }
+}
+
+.endpoint-edit_my_list .stack-form > .mb-3 > .ui-consistent-input,
+.endpoint-edit_my_list .stack-form > .mb-4 > .ui-consistent-input,
+.endpoint-edit_my_list .stack-form .row .ui-consistent-input,
+.endpoint-edit_list form > .mb-3 > .ui-consistent-input,
+.endpoint-edit_list form > .mb-4 > .ui-consistent-input,
+.endpoint-edit_list form .row .ui-consistent-input,
+.endpoint-user_management .row > [class*="col-"] > .ui-consistent-input,
+.endpoint-user_management .modal .ui-consistent-input {
+  border-radius: var(--ui-control-radius) !important;
+}
+
+.endpoint-edit_my_list .ts-wrapper.single .ts-control,
+.endpoint-edit_list .ts-wrapper.single .ts-control,
+.endpoint-edit_my_list .ts-wrapper.multi .ts-control,
+.endpoint-edit_list .ts-wrapper.multi .ts-control {
+  min-height: var(--ui-control-height) !important;
+  border-radius: var(--ui-control-radius) !important;
+}
+
+.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;
+  }
+}
+
+.endpoint-main_page .create-list-input-group {
+  display: flex;
+  flex-wrap: nowrap !important;
+  align-items: stretch;
+  overflow: hidden;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(7, 17, 31, 0.9);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
+}
+
+.endpoint-main_page .create-list-input-group > .create-list-title-input,
+.endpoint-main_page .create-list-input-group > .form-control {
+  border: 0 !important;
+  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+.endpoint-main_page .create-list-input-group > .create-list-title-input:focus,
+.endpoint-main_page .create-list-input-group > .form-control:focus {
+  background: rgba(255, 255, 255, 0.02) !important;
+  box-shadow: none !important;
+}
+
+.endpoint-main_page .create-list-input-group > .create-list-temp-toggle,
+.endpoint-main_page .create-list-input-group > #tempToggle {
+  min-width: 9.5rem;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: rgba(255, 255, 255, 0.04) !important;
+  box-shadow: none !important;
+}
+
+.endpoint-main_page .create-list-input-group > .create-list-temp-toggle.is-active,
+.endpoint-main_page .create-list-input-group > #tempToggle.is-active {
+  background: rgba(41, 209, 125, 0.18) !important;
+}
+
+.endpoint-main_page .create-list-temp-toggle__label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+}
+
+.endpoint-main_page .create-list-input-group:focus-within {
+  border-color: rgba(41, 209, 125, 0.55);
+  box-shadow: 0 0 0 0.18rem rgba(41, 209, 125, 0.12), 0 10px 28px rgba(0, 0, 0, 0.18);
+}
+
+.receipt-disclosure {
+  display: block;
+  padding: 0;
+  text-align: left;
+}
+
+.receipt-disclosure,
+.receipt-disclosure:hover,
+.receipt-disclosure:focus,
+.receipt-disclosure:active {
+  width: 100%;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.receipt-disclosure:focus-visible {
+  outline: none;
+}
+
+.receipt-section--restoring {
+  transition: none !important;
+}
+
+@media (max-width: 767.98px) {
+  .endpoint-main_page .create-list-input-group {
+    border-radius: 14px;
+  }
+
+  .endpoint-main_page .create-list-input-group > .create-list-temp-toggle,
+  .endpoint-main_page .create-list-input-group > #tempToggle {
+    min-width: 8.25rem;
+    padding-left: .8rem;
+    padding-right: .8rem;
+    font-size: .9rem;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .endpoint-main_page .create-list-input-group > .create-list-title-input,
+  .endpoint-main_page .create-list-input-group > .form-control {
+    padding-left: .85rem;
+    padding-right: .7rem;
+    font-size: .95rem;
+  }
+
+  .endpoint-main_page .create-list-input-group > .create-list-temp-toggle,
+  .endpoint-main_page .create-list-input-group > #tempToggle {
+    min-width: 7.6rem;
+    font-size: .84rem;
+  }
+
+  .receipt-disclosure {
+    border-radius: 16px;
+  }
+}
+
+.form-check-spaced {
+  gap: .35rem;
+}
+
+.form-check-spaced .form-check-input,
+input[type="checkbox"].form-check-input,
+.table-select-checkbox {
+  width: .95rem !important;
+  height: .95rem !important;
+  min-width: .95rem !important;
+  min-height: .95rem !important;
+  margin-top: .18rem;
+}
+
+.form-switch-compact .form-check-input {
+  width: 1.8rem !important;
+  height: .95rem !important;
+}
+
+.switch-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: .8rem;
+}
+
+.form-check.form-switch.app-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: .75rem;
+  min-height: 2.75rem;
+  margin: 0;
+  padding: .58rem .82rem;
+  background: rgba(255,255,255,.04);
+  border: 1px solid var(--ui-border);
+  border-radius: 16px;
+}
+
+.form-check.form-switch.app-switch .form-check-input {
+  float: none;
+  flex: 0 0 auto;
+  width: 2.45em !important;
+  height: 1.3em !important;
+  margin: 0 !important;
+  cursor: pointer;
+  background-color: var(--dark-400) !important;
+  border-color: var(--dark-300) !important;
+  background-position: left center !important;
+  transition: background-position .18s ease-in-out, background-color .18s ease-in-out, border-color .18s ease-in-out, box-shadow .18s ease-in-out !important;
+}
+
+.form-check.form-switch.app-switch .form-check-input:checked {
+  background-color: var(--primary) !important;
+  border-color: var(--primary-border) !important;
+  background-position: right center !important;
+}
+
+.form-check.form-switch.app-switch .form-check-input:focus {
+  box-shadow: 0 0 0 .18rem rgba(24, 64, 118, .22) !important;
+}
+
+.form-check.form-switch.app-switch .form-check-label {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.3rem;
+  margin: 0 !important;
+  line-height: 1.35;
+  cursor: pointer;
+}
+
+.form-check.form-switch.app-switch.form-switch-compact {
+  width: 100%;
+  justify-content: flex-start;
+}
+
+.form-check.form-switch.app-switch.form-switch-compact .form-check-input {
+  width: 2.45em !important;
+  height: 1.3em !important;
+}
+
+.hide-purchased-switch.form-check,
+.hide-purchased-switch.form-check.app-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: .7rem;
+  width: auto;
+  max-width: 100%;
+  padding: .5rem .82rem;
+  border-radius: 14px;
+  background: rgba(255,255,255,.04);
+  border: 1px solid var(--ui-border);
+}
+
+.hide-purchased-switch .form-check-input {
+  flex: 0 0 auto;
+  float: none;
+  width: 2.45em !important;
+  height: 1.3em !important;
+  margin: 0 !important;
+  cursor: pointer;
+  background-position: left center !important;
+  transition: background-position .18s ease-in-out, background-color .18s ease-in-out, border-color .18s ease-in-out, box-shadow .18s ease-in-out !important;
+}
+
+.hide-purchased-switch .form-check-input:checked {
+  background-position: right center !important;
+}
+
+.hide-purchased-switch .form-check-label {
+  margin: 0 !important;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.create-list-input-group {
+  display: flex;
+  flex-wrap: nowrap !important;
+  align-items: stretch;
+  gap: 0 !important;
+}
+
+.create-list-input-group > .form-control {
+  flex: 1 1 auto !important;
+  width: 1% !important;
+  min-width: 0 !important;
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.create-list-input-group > .create-list-temp-toggle,
+.create-list-input-group > #tempToggle {
+  flex: 0 0 auto !important;
+  width: auto !important;
+  min-width: 10rem;
+  margin-left: -1px;
+  font-weight: 600;
+  white-space: nowrap;
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  border-top-right-radius: 14px !important;
+  border-bottom-right-radius: 14px !important;
+  background: rgba(255,255,255,0.03) !important;
+  border-color: var(--app-border) !important;
+  color: var(--app-text) !important;
+  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
+}
+
+.create-list-input-group > .create-list-temp-toggle.is-active,
+.create-list-input-group > #tempToggle.is-active {
+  background: rgba(41, 209, 125, 0.16) !important;
+  border-color: rgba(41, 209, 125, 0.72) !important;
+  color: #9bf0c1 !important;
+  box-shadow: inset 0 0 0 1px rgba(41, 209, 125, 0.15);
+}
+
+.create-list-input-group > .create-list-temp-toggle:hover,
+.create-list-input-group > #tempToggle:hover,
+.create-list-input-group > .create-list-temp-toggle:focus,
+.create-list-input-group > #tempToggle:focus {
+  background: rgba(255,255,255,0.06) !important;
+  color: var(--app-text) !important;
+}
+
+.create-list-input-group > .create-list-temp-toggle.is-active:hover,
+.create-list-input-group > #tempToggle.is-active:hover,
+.create-list-input-group > .create-list-temp-toggle.is-active:focus,
+.create-list-input-group > #tempToggle.is-active:focus {
+  background: rgba(41, 209, 125, 0.2) !important;
+  color: #b7f7d2 !important;
+}
+
+.endpoint-edit_my_list .switch-grid {
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+}
+
+.endpoint-edit_my_list .switch-grid .app-switch,
+.endpoint-admin_edit_list .switch-grid .app-switch {
+  width: 100%;
+  min-height: 3.35rem;
+}
+
+@media (max-width: 767.98px) {
+  .hide-purchased-switch {
+    padding-left: 2.95rem;
+  }
+
+  .hide-purchased-switch.form-check.app-switch {
+    width: 100%;
+  }
+
+  .switch-grid,
+  .endpoint-edit_my_list .switch-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .create-list-input-group {
+    gap: 0 !important;
+  }
+
+  .create-list-input-group > .form-control {
+    padding-left: .9rem;
+    padding-right: .75rem;
+  }
+
+  .create-list-input-group > .create-list-temp-toggle,
+  .create-list-input-group > #tempToggle {
+    min-width: 8.75rem;
+    padding-left: .85rem;
+    padding-right: .85rem;
+    font-size: .92rem;
+    letter-spacing: 0;
+  }
+}
--- a/shopping_app/static/css/split/responsive.css
+++ b/shopping_app/static/css/split/responsive.css
@@ -0,0 +1,895 @@
+.app-navbar__meta--mobile {
+  display: none;
+}
+
+.app-user-chip--mobile {
+  max-width: min(46vw, 15rem);
+  min-width: 0;
+  padding-left: .6rem;
+  padding-right: .4rem;
+}
+
+.app-user-chip--mobile .badge {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 991.98px) {
+  .app-header {
+    padding-top: .55rem;
+  }
+
+  .app-navbar .container-xxl {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    align-items: center;
+    gap: .6rem;
+    border-radius: 26px;
+    padding-top: .8rem;
+    padding-bottom: .8rem;
+  }
+
+  .app-navbar__meta {
+    display: none;
+  }
+
+  .app-brand {
+    overflow: hidden;
+  }
+
+  .app-brand > span:last-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .app-brand__title,
+  .app-brand__accent {
+    font-size: 1rem;
+  }
+
+  .app-navbar__meta--mobile {
+    display: flex !important;
+    width: auto;
+    justify-content: flex-end;
+    justify-self: end;
+    grid-column: 2;
+    min-width: 0;
+    max-width: min(42vw, 12rem);
+  }
+
+  .app-user-chip--mobile {
+    display: inline-flex;
+  }
+
+  .app-mobile-menu {
+    grid-column: 3;
+    justify-self: end;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .app-brand__icon {
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+
+  .app-user-chip--mobile {
+    gap: .35rem;
+    padding: .34rem .38rem .34rem .5rem;
+  }
+
+  .app-user-chip--mobile .app-user-chip__label {
+    font-size: .62rem;
+    letter-spacing: .05em;
+  }
+
+  .app-user-chip--mobile .badge {
+    font-size: .72rem;
+    max-width: 5.9rem;
+  }
+}
+
+@media (max-width: 430px) {
+  .app-navbar .container-xxl {
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    gap: .45rem;
+  }
+
+  .app-user-chip--mobile {
+    max-width: min(38vw, 8.5rem);
+  }
+
+  .app-user-chip--mobile .app-user-chip__label {
+    display: none;
+  }
+}
+
+.endpoint-main_page .list-group-item {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+
+.endpoint-main_page .main-list-progress-wrap {
+  display: block;
+  width: 100%;
+  flex: 0 0 100%;
+  margin-top: 0.8rem !important;
+}
+
+.endpoint-main_page .list-group-item > .main-list-row + .main-list-progress-wrap {
+  align-self: stretch;
+}
+
+.endpoint-main_page .main-list-progress {
+  width: 100%;
+  height: 16px;
+  margin-top: 0 !important;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
+    var(--dark-700) !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.05),
+    0 4px 10px rgba(0, 0, 0, 0.18);
+}
+
+.endpoint-main_page .main-list-progress .progress-bar.bg-success {
+  background: linear-gradient(135deg, rgba(40, 199, 111, 0.98), rgba(22, 163, 74, 0.98)) !important;
+}
+
+.endpoint-main_page .main-list-progress .progress-bar.bg-warning {
+  background: linear-gradient(135deg, rgba(245, 189, 65, 0.98), rgba(217, 119, 6, 0.98)) !important;
+}
+
+.endpoint-main_page .main-list-progress .progress-bar.bg-transparent {
+  background: rgba(255, 255, 255, 0.08) !important;
+}
+
+.endpoint-main_page .main-list-progress__label {
+  max-width: calc(100% - 0.85rem);
+  padding: 0 0.45rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
+  letter-spacing: 0.01em;
+}
+
+@media (max-width: 575.98px) {
+  .endpoint-main_page .main-list-progress {
+    height: 15px;
+  }
+
+  .endpoint-main_page .main-list-progress__label {
+    font-size: 0.64rem;
+  }
+}
+
+.endpoint-main_page #mainStatsCollapse.collapsing,
+.endpoint-main_page #mainStatsCollapse.show {
+  overflow: visible;
+}
+
+.endpoint-main_page .main-summary-card {
+  height: 100%;
+  padding: 1rem 1rem 1.05rem;
+  border-radius: 1rem;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)), rgba(9, 16, 28, 0.88);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
+}
+
+.endpoint-main_page .main-summary-card__eyebrow {
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: rgba(255, 255, 255, 0.65);
+  margin-bottom: 0.2rem;
+}
+
+.endpoint-main_page .main-summary-card__title {
+  font-size: 1.05rem;
+}
+
+.endpoint-main_page .main-summary-stats {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.7rem;
+}
+
+.endpoint-main_page .main-summary-stat {
+  padding: 0.65rem 0.75rem;
+  border-radius: 0.85rem;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.endpoint-main_page .main-summary-stat__label {
+  display: block;
+  font-size: 0.73rem;
+  color: rgba(255, 255, 255, 0.66);
+  margin-bottom: 0.15rem;
+}
+
+@media (max-width: 575.98px) {
+  .endpoint-main_page .main-summary-card {
+    padding: 0.9rem;
+  }
+
+  .endpoint-main_page .main-summary-stats {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .endpoint-list_share .shopping-item-head,
+  .endpoint-shared_list .shopping-item-head {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: start;
+    column-gap: .45rem;
+  }
+
+  .endpoint-list_share .shopping-item-actions,
+  .endpoint-shared_list .shopping-item-actions {
+    align-self: start;
+    margin-left: 0;
+    justify-self: end;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .endpoint-list_share .shopping-item-main,
+  .endpoint-shared_list .shopping-item-main {
+    align-items: center;
+  }
+
+  .endpoint-list_share .shopping-item-text,
+  .endpoint-shared_list .shopping-item-text,
+  .endpoint-list_share .shopping-item-main > .large-checkbox,
+  .endpoint-shared_list .shopping-item-main > .large-checkbox,
+  .endpoint-list_share .shopping-item-actions,
+  .endpoint-shared_list .shopping-item-actions {
+    align-self: center;
+  }
+
+  .endpoint-list_share .shopping-item-actions,
+  .endpoint-shared_list .shopping-item-actions {
+    margin-left: auto;
+    justify-self: auto;
+  }
+}
+
+.endpoint-list #items,
+.endpoint-view_list #items,
+.endpoint-list_share #items,
+.endpoint-shared_list #items {
+  display: flex;
+  flex-direction: column;
+}
+
+.endpoint-list #items > .list-group-item,
+.endpoint-view_list #items > .list-group-item,
+.endpoint-list_share #items > .list-group-item,
+.endpoint-shared_list #items > .list-group-item {
+  margin: 0 !important;
+  border-width: 1px !important;
+  box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important;
+  background-clip: padding-box;
+}
+
+.endpoint-list #items > .list-group-item + .list-group-item,
+.endpoint-view_list #items > .list-group-item + .list-group-item,
+.endpoint-list_share #items > .list-group-item + .list-group-item,
+.endpoint-shared_list #items > .list-group-item + .list-group-item {
+  margin-top: 0 !important;
+  border-top-width: 1px !important;
+}
+
+@media (max-width: 767.98px){
+  .endpoint-list_share #items .list-group-item,
+  .endpoint-shared_list #items .list-group-item {
+    align-items: flex-start;
+  }
+  .endpoint-list_share .list-item-actions,
+  .endpoint-shared_list .list-item-actions {
+    width: 100%;
+    margin-left: 0;
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 767.98px){
+  .share-page-toolbar {
+    justify-content: stretch;
+  }
+
+  .share-page-toolbar__spacer {
+    display: none;
+  }
+
+  .switch-grid,
+  .endpoint-edit_my_list .switch-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 991.98px){
+  .endpoint-admin_templates .table-responsive > table.table {
+    width: max-content !important;
+    min-width: 900px !important;
+  }
+}
+
+@media (max-width: 576px){
+  .mobile-list-heading {
+    display: inline-flex;
+    max-width: 100%;
+  }
+
+  .mobile-list-heading__title {
+    max-width: 100%;
+  }
+}
+
+@media (max-width: 575.98px){
+  .endpoint-main_page .list-group-item > .main-list-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .endpoint-main_page .list-main-actions {
+    width: 100%;
+  }
+}
+
+@media (max-width: 575.98px){
+  .endpoint-main_page .list-group-item > .main-list-row {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .endpoint-main_page .list-main-actions {
+    width: auto;
+    margin-left: auto;
+  }
+
+  .endpoint-main_page .list-main-actions .btn {
+    padding: .38rem .52rem;
+    min-width: 2.35rem;
+  }
+
+  .endpoint-main_page .list-main-title {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .15rem;
+  }
+
+  .endpoint-main_page .list-main-meta {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .endpoint-main_page .list-main-title__link {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .shopping-item-row {
+    align-items: flex-start !important;
+  }
+
+  .shopping-item-actions {
+    width: auto;
+    margin-top: 0;
+    margin-left: auto;
+    justify-content: flex-end;
+  }
+
+  .shopping-item-actions .btn {
+    min-width: 2.35rem;
+    padding: .38rem .52rem;
+  }
+
+  .shopping-compact-input-group {
+    display: flex;
+  }
+
+  .shopping-compact-input-group > .form-control {
+    min-width: 0;
+  }
+
+  .shopping-qty-input {
+    flex-basis: 4rem;
+    max-width: 4rem;
+  }
+
+  .shopping-compact-submit {
+    min-width: auto;
+    padding-left: .8rem;
+    padding-right: .8rem;
+  }
+
+  .ui-password-group > .ui-password-toggle {
+    min-width: 2.75rem;
+    padding-left: .7rem;
+    padding-right: .7rem;
+  }
+}
+
+@media (max-width: 575.98px){
+  .shopping-item-main {
+    gap: .55rem;
+  }
+
+  .shopping-item-head {
+    gap: .45rem;
+  }
+
+  .shopping-item-actions {
+    margin-left: auto;
+    align-self: flex-start;
+  }
+
+  .shopping-item-actions .btn {
+    min-width: 2.2rem;
+    padding: .34rem .48rem;
+  }
+
+  .shopping-product-input-group > .shopping-product-name-input,
+  .shopping-expense-input-group > .shopping-expense-amount-input {
+    flex: 0 0 60%;
+    min-width: 0;
+  }
+
+  .shopping-product-input-group > .shopping-qty-input {
+    flex: 0 0 15%;
+    max-width: 15%;
+    min-width: 0;
+  }
+
+  .shopping-product-input-group > .shopping-compact-submit {
+    flex: 0 0 25%;
+    width: 25%;
+    min-width: 0;
+    padding-left: .55rem;
+    padding-right: .55rem;
+    font-size: .95rem;
+  }
+
+  .shopping-expense-input-group > .shopping-compact-submit {
+    padding-left: .7rem;
+    padding-right: .7rem;
+  }
+
+  .list-toolbar {
+    align-items: flex-start !important;
+  }
+
+  .list-toolbar__sort {
+    flex: 0 0 auto;
+  }
+}
+
+@media (max-width: 767.98px){
+  .endpoint-list .shopping-product-input-group,
+  .endpoint-list_share .shopping-product-input-group,
+  .endpoint-shared_list .shopping-product-input-group,
+  .endpoint-list .shopping-expense-input-group,
+  .endpoint-list_share .shopping-expense-input-group,
+  .endpoint-shared_list .shopping-expense-input-group {
+    width: 100%;
+  }
+
+  .endpoint-list .shopping-product-input-group > .shopping-product-name-input,
+  .endpoint-list_share .shopping-product-input-group > .shopping-product-name-input,
+  .endpoint-shared_list .shopping-product-input-group > .shopping-product-name-input {
+    flex: 0 0 60% !important;
+    max-width: 60% !important;
+    min-width: 0;
+  }
+
+  .endpoint-list .shopping-product-input-group > .shopping-qty-input,
+  .endpoint-list_share .shopping-product-input-group > .shopping-qty-input,
+  .endpoint-shared_list .shopping-product-input-group > .shopping-qty-input {
+    flex: 0 0 15% !important;
+    max-width: 15% !important;
+    min-width: 0;
+    padding-left: .35rem;
+    padding-right: .35rem;
+  }
+
+  .endpoint-list .shopping-product-input-group > .shopping-compact-submit,
+  .endpoint-list_share .shopping-product-input-group > .shopping-compact-submit,
+  .endpoint-shared_list .shopping-product-input-group > .shopping-compact-submit {
+    flex: 0 0 25% !important;
+    width: 25% !important;
+    min-width: 0 !important;
+    padding-left: .4rem;
+    padding-right: .4rem;
+  }
+
+  .endpoint-list .shopping-expense-input-group > .shopping-expense-amount-input,
+  .endpoint-list_share .shopping-expense-input-group > .shopping-expense-amount-input,
+  .endpoint-shared_list .shopping-expense-input-group > .shopping-expense-amount-input {
+    flex: 1 1 auto !important;
+    min-width: 0;
+  }
+
+  .endpoint-list .shopping-expense-input-group > .shopping-compact-submit,
+  .endpoint-list_share .shopping-expense-input-group > .shopping-compact-submit,
+  .endpoint-shared_list .shopping-expense-input-group > .shopping-compact-submit {
+    flex: 0 0 5rem !important;
+    width: 5rem !important;
+    min-width: 5rem !important;
+    padding-left: .35rem;
+    padding-right: .35rem;
+  }
+
+  .endpoint-list .shopping-product-input-group > .shopping-compact-submit .shopping-btn-label,
+  .endpoint-list_share .shopping-product-input-group > .shopping-compact-submit .shopping-btn-label,
+  .endpoint-shared_list .shopping-product-input-group > .shopping-compact-submit .shopping-btn-label,
+  .endpoint-list .shopping-expense-input-group > .shopping-compact-submit .shopping-btn-label,
+  .endpoint-list_share .shopping-expense-input-group > .shopping-compact-submit .shopping-btn-label,
+  .endpoint-shared_list .shopping-expense-input-group > .shopping-compact-submit .shopping-btn-label {
+    display: none;
+  }
+
+  .endpoint-list .shopping-product-input-group > .shopping-compact-submit .shopping-btn-icon,
+  .endpoint-list_share .shopping-product-input-group > .shopping-compact-submit .shopping-btn-icon,
+  .endpoint-shared_list .shopping-product-input-group > .shopping-compact-submit .shopping-btn-icon,
+  .endpoint-list .shopping-expense-input-group > .shopping-compact-submit .shopping-btn-icon,
+  .endpoint-list_share .shopping-expense-input-group > .shopping-compact-submit .shopping-btn-icon,
+  .endpoint-shared_list .shopping-expense-input-group > .shopping-compact-submit .shopping-btn-icon {
+    margin: 0;
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 767.98px){
+  .endpoint-view_list .shopping-product-input-group > .shopping-product-name-input {
+    flex: 0 0 60% !important;
+    max-width: 60% !important;
+    min-width: 0;
+  }
+
+  .endpoint-view_list .shopping-product-input-group > .shopping-qty-input {
+    flex: 0 0 15% !important;
+    max-width: 15% !important;
+    min-width: 0;
+    padding-left: .35rem;
+    padding-right: .35rem;
+  }
+
+  .endpoint-view_list .shopping-product-input-group > .shopping-compact-submit {
+    flex: 0 0 25% !important;
+    width: 25% !important;
+    min-width: 0 !important;
+    padding-left: .4rem;
+    padding-right: .4rem;
+  }
+
+  .endpoint-view_list .shopping-expense-input-group > .shopping-expense-amount-input {
+    flex: 1 1 auto !important;
+    min-width: 0;
+  }
+
+  .endpoint-view_list .shopping-expense-input-group > .shopping-compact-submit {
+    flex: 0 0 5rem !important;
+    width: 5rem !important;
+    min-width: 5rem !important;
+    padding-left: .35rem;
+    padding-right: .35rem;
+  }
+
+  .endpoint-view_list .shopping-product-input-group > .shopping-compact-submit .shopping-btn-label,
+  .endpoint-view_list .shopping-expense-input-group > .shopping-compact-submit .shopping-btn-label {
+    display: none;
+  }
+
+  .endpoint-view_list .shopping-product-input-group > .shopping-compact-submit .shopping-btn-icon,
+  .endpoint-view_list .shopping-expense-input-group > .shopping-compact-submit .shopping-btn-icon {
+    margin: 0;
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 575.98px){
+  .shopping-item-head {
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+
+  .shopping-item-text {
+    flex: 1 1 100%;
+    min-width: 0;
+  }
+
+  .shopping-item-actions {
+    width: 100%;
+    margin-left: 0;
+    justify-content: flex-end;
+  }
+}
+
+@media (max-width: 575.98px){
+  .shopping-item-main {
+    align-items: center;
+  }
+
+  .shopping-item-head {
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: .4rem;
+  }
+
+  .shopping-item-text {
+    flex: 1 1 auto;
+    min-width: 0;
+    gap: .25rem;
+  }
+
+  .shopping-item-actions {
+    width: auto;
+    margin-left: auto;
+    gap: .25rem;
+  }
+
+  .shopping-item-actions .btn {
+    min-width: 2rem;
+    padding: .3rem .42rem;
+  }
+
+  .hide-purchased-switch--right {
+    width: auto;
+    max-width: 100%;
+  }
+
+  .list-action-row {
+    gap: .5rem;
+  }
+
+  .list-action-row > .list-action-row__btn,
+  .list-action-row__form {
+    flex: 1 1 50%;
+    min-width: 0;
+  }
+
+  .list-action-row__btn {
+    padding-left: .55rem;
+    padding-right: .55rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+@media (max-width: 575.98px){
+  .endpoint-view_list .list-toolbar {
+    display: grid !important;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center !important;
+    gap: .4rem !important;
+    flex-wrap: nowrap !important;
+  }
+
+  .endpoint-view_list .list-toolbar__sort.btn {
+    min-width: 0;
+    padding: .35rem .55rem;
+    font-size: .82rem;
+  }
+
+  .endpoint-view_list .hide-purchased-switch--right {
+    min-width: 0;
+    gap: .25rem;
+    font-size: .82rem;
+  }
+
+  .endpoint-view_list .hide-purchased-switch--right .form-check-label {
+    margin-left: .25rem !important;
+    white-space: nowrap;
+  }
+
+  .endpoint-view_list .hide-purchased-switch--right .form-check-input {
+    transform: scale(.92);
+    transform-origin: center;
+  }
+
+  .list-header-toolbar {
+    align-items: flex-start !important;
+  }
+
+  .list-header-toolbar .list-toolbar {
+    width: 100%;
+    justify-content: flex-end !important;
+  }
+}
+
+@media (max-width: 575.98px){
+  .endpoint-list_share .shopping-item-main,
+  .endpoint-shared_list .shopping-item-main,
+  .endpoint-view_list .shopping-item-main,
+  .endpoint-list .shopping-item-main {
+    gap: .55rem;
+  }
+
+  .endpoint-list_share .shopping-item-head,
+  .endpoint-shared_list .shopping-item-head,
+  .endpoint-view_list .shopping-item-head,
+  .endpoint-list .shopping-item-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: .45rem;
+  }
+
+  .endpoint-list_share .shopping-item-text,
+  .endpoint-shared_list .shopping-item-text,
+  .endpoint-view_list .shopping-item-text,
+  .endpoint-list .shopping-item-text {
+    flex: 1 1 auto;
+    min-width: 0;
+    gap: .25rem;
+  }
+
+  .endpoint-list_share .shopping-item-actions,
+  .endpoint-shared_list .shopping-item-actions,
+  .endpoint-view_list .shopping-item-actions,
+  .endpoint-list .shopping-item-actions {
+    align-self: start;
+    width: auto;
+    margin-left: auto;
+    gap: .25rem;
+  }
+
+  .endpoint-list_share .shopping-item-actions .btn,
+  .endpoint-shared_list .shopping-item-actions .btn {
+    min-width: 2rem;
+    padding: .3rem .42rem;
+  }
+}
+
+@media (max-width: 575.98px){
+  .endpoint-list_share .shopping-action-btn,
+  .endpoint-shared_list .shopping-action-btn,
+  .endpoint-view_list .shopping-action-btn,
+  .endpoint-list .shopping-action-btn {
+    width: 2.15rem !important;
+    height: 2.15rem !important;
+    min-width: 2.15rem !important;
+    min-height: 2.15rem !important;
+    border-radius: .65rem !important;
+  }
+
+  .endpoint-list_share .shopping-action-btn--wide,
+  .endpoint-shared_list .shopping-action-btn--wide,
+  .endpoint-view_list .shopping-action-btn--wide,
+  .endpoint-list .shopping-action-btn--wide {
+    min-width: 5.4rem !important;
+    padding: 0 .72rem !important;
+  }
+}
+
+@media (max-width: 575.98px){
+  .endpoint-list_share .shopping-action-btn--countdown,
+  .endpoint-shared_list .shopping-action-btn--countdown,
+  .endpoint-view_list .shopping-action-btn--countdown,
+  .endpoint-list .shopping-action-btn--countdown {
+    min-width: 3rem !important;
+    padding: 0 .55rem !important;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .ui-password-group > .ui-password-toggle {
+    flex-basis: 44px !important;
+    width: 44px !important;
+    min-width: 44px !important;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .endpoint-list .shopping-entry-card,
+  .endpoint-list_share .shopping-entry-card,
+  .endpoint-shared_list .shopping-entry-card,
+  .endpoint-view_list .shopping-entry-card {
+    padding: .8rem;
+    border-radius: .95rem;
+  }
+
+  .endpoint-list .shopping-entry-card__label,
+  .endpoint-list_share .shopping-entry-card__label,
+  .endpoint-shared_list .shopping-entry-card__label,
+  .endpoint-view_list .shopping-entry-card__label {
+    font-size: .92rem;
+  }
+
+  .endpoint-list .shopping-entry-card__hint,
+  .endpoint-list_share .shopping-entry-card__hint,
+  .endpoint-shared_list .shopping-entry-card__hint,
+  .endpoint-view_list .shopping-entry-card__hint {
+    font-size: .78rem;
+    margin-bottom: .65rem;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .endpoint-expenses .expenses-range-toolbar {
+    justify-content: stretch !important;
+    overflow: visible;
+    padding-bottom: 0;
+  }
+
+  .endpoint-expenses .expenses-range-group {
+    display: grid !important;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.55rem;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .endpoint-expenses .expenses-table-toolbar .expenses-range-group {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .endpoint-expenses .expenses-range-group > .btn {
+    flex: initial !important;
+    width: 100%;
+    min-width: 0;
+    padding-inline: 0.55rem;
+    font-size: 0.95rem;
+  }
+
+  .endpoint-expenses .expenses-date-range {
+    display: grid !important;
+    grid-template-columns: 52px minmax(0, 1fr);
+    gap: 0.55rem;
+    width: 100%;
+    max-width: 100% !important;
+    flex-wrap: wrap !important;
+  }
+
+  .endpoint-expenses .expenses-date-range > .input-group-text,
+  .endpoint-expenses .expenses-date-range > .form-control,
+  .endpoint-expenses .expenses-date-range > .btn {
+    width: 100% !important;
+    min-width: 0 !important;
+    flex: initial !important;
+    border-radius: 0.85rem !important;
+  }
+
+  .endpoint-expenses .expenses-date-range > .btn {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .list-quick-actions {
+    padding: .9rem;
+    gap: .75rem;
+  }
+
+  .list-quick-actions__header {
+    flex-direction: column;
+    gap: .35rem;
+  }
+
+  .list-quick-actions__hint {
+    max-width: none;
+    text-align: left;
+  }
+
+  .list-quick-actions__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .list-quick-actions__action.btn {
+    min-height: 72px;
+    padding: .85rem .9rem;
+  }
+}
--- a/shopping_app/static/css/split/split_all.zip
+++ b/shopping_app/static/css/split/split_all.zip
--- a/shopping_app/static/css/split/theme.css
+++ b/shopping_app/static/css/split/theme.css
@@ -0,0 +1,80 @@
+:root {
+  --primary: #184076;
+  --primary-border: #153866;
+  --primary-text: #e6f0ff;
+
+  --info: var(--primary);
+  --info-border: var(--primary-border);
+  --info-text: var(--primary-text);
+
+  --success: #1c6930;
+  --success-border: #165024;
+  --success-text: #eaffea;
+
+  --warning: #665c1e;
+  --warning-border: #4d4415;
+  --warning-text: #fffbe5;
+
+  --danger: #6e1a1e;
+  --danger-border: #531417;
+  --danger-text: #ffeaea;
+
+  --dark-900: #181a1b;
+  --dark-800: #1c1f22;
+  --dark-750: #1f2225;
+  --dark-700: #212529;
+  --dark-650: #23272a;
+  --dark-600: #2a2d31;
+  --dark-550: #2b2f33;
+  --dark-500: #2c2f33;
+  --dark-480: #2c3034;
+  --dark-470: #2a2d31;
+  --dark-450: #3a3f44;
+  --dark-400: #343a40;
+  --dark-350: #3d4248;
+  --dark-300: #495057;
+
+  --text-strong: #f8f9fa;
+  --text: #e2e3e5;
+  --text-dim: #e1e1e1;
+  --muted: #6c757d;
+
+  --progress-default: #3d7bd6;
+}
+
+.clickable-item {
+  cursor: pointer;
+}
+
+.progress-thin {
+  height: 12px;
+}
+
+.item-not-checked {
+  background-color: var(--dark-500) !important;
+  color: #fff !important;
+}
+
+#empty-placeholder {
+  font-style: italic;
+  pointer-events: none;
+}
+
+.fade-out {
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+
+@media (pointer: fine){
+  .only-mobile {
+    display: none !important;
+  }
+}
+
+.bg-success {
+  background-color: var(--success) !important;
+}
+
+.bg-warning {
+  background-color: var(--warning) !important;
+}
--- a/shopping_app/static/css/style.css
+++ b/shopping_app/static/css/style.css
--- a/shopping_app/static/css/style.zip
+++ b/shopping_app/static/css/style.zip
--- 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/desktop_item_menu.js
+++ b/shopping_app/static/js/desktop_item_menu.js
@@ -0,0 +1,126 @@
+(function () {
+  const DESKTOP_QUERY = '(min-width: 992px) and (pointer: fine)';
+
+  function isDesktopOwnerList() {
+    return window.matchMedia(DESKTOP_QUERY).matches
+      && !window.IS_SHARE
+      && (
+        document.body.classList.contains('endpoint-view_list')
+        || document.body.classList.contains('endpoint-list')
+      );
+  }
+
+  function getMenu() {
+    return document.getElementById('desktopItemMenu');
+  }
+
+  function hideDesktopItemMenu() {
+    const menu = getMenu();
+    if (!menu) return;
+    menu.hidden = true;
+    delete menu.dataset.itemId;
+    delete menu.dataset.itemName;
+    delete menu.dataset.itemQuantity;
+  }
+
+  function positionMenu(menu, clickX, clickY) {
+    const gap = 14;
+    menu.style.left = '0px';
+    menu.style.top = '0px';
+    menu.hidden = false;
+
+    const rect = menu.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    let left = clickX - (rect.width / 2);
+    let top = clickY - rect.height - gap;
+
+    if (top < 12) {
+      top = Math.min(viewportHeight - rect.height - 12, clickY + gap);
+    }
+
+    left = Math.max(12, Math.min(left, viewportWidth - rect.width - 12));
+    top = Math.max(12, Math.min(top, viewportHeight - rect.height - 12));
+
+    menu.style.left = `${left}px`;
+    menu.style.top = `${top}px`;
+  }
+
+  function showDesktopItemMenu(trigger, event) {
+    const menu = getMenu();
+    if (!menu) return;
+
+    menu.dataset.itemId = trigger.dataset.itemId || '';
+    menu.dataset.itemName = trigger.dataset.itemName || '';
+    menu.dataset.itemQuantity = trigger.dataset.itemQuantity || '1';
+
+    let clickX = event.clientX || 0;
+    let clickY = event.clientY || 0;
+
+    if (!clickX && !clickY) {
+      const rect = trigger.getBoundingClientRect();
+      clickX = rect.left + (rect.width / 2);
+      clickY = rect.top;
+    }
+
+    positionMenu(menu, clickX, clickY);
+  }
+
+  document.addEventListener('click', function (event) {
+    const menu = getMenu();
+    const trigger = event.target.closest('[data-item-menu-trigger="true"]');
+
+    if (trigger && isDesktopOwnerList() && !trigger.disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      showDesktopItemMenu(trigger, event);
+      return;
+    }
+
+    if (menu && !menu.hidden && !event.target.closest('#desktopItemMenu')) {
+      hideDesktopItemMenu();
+    }
+  });
+
+  document.addEventListener('keydown', function (event) {
+    if (event.key === 'Escape') {
+      hideDesktopItemMenu();
+    }
+  });
+
+  ['scroll', 'resize'].forEach(function (eventName) {
+    window.addEventListener(eventName, hideDesktopItemMenu, true);
+  });
+
+  document.addEventListener('DOMContentLoaded', function () {
+    const menu = getMenu();
+    if (!menu) return;
+
+    menu.addEventListener('click', function (event) {
+      const actionButton = event.target.closest('[data-menu-action]');
+      if (!actionButton) return;
+
+      const itemId = parseInt(menu.dataset.itemId || '', 10);
+      const itemName = menu.dataset.itemName || '';
+      const itemQuantity = parseInt(menu.dataset.itemQuantity || '1', 10) || 1;
+
+      if (!itemId) {
+        hideDesktopItemMenu();
+        return;
+      }
+
+      if (actionButton.dataset.menuAction === 'edit') {
+        openEditItemModal(event, itemId, itemName, itemQuantity);
+      }
+
+      if (actionButton.dataset.menuAction === 'delete') {
+        deleteItem(itemId);
+      }
+
+      hideDesktopItemMenu();
+    });
+  });
+
+  window.hideDesktopItemMenu = hideDesktopItemMenu;
+})();
--- a/shopping_app/static/js/expense_chart.js
+++ b/shopping_app/static/js/expense_chart.js
@@ -123,7 +123,7 @@ document.addEventListener("DOMContentLoaded", function () {
                        data: {
                            labels: data.labels || [],
                            datasets: [{
-                                label: "Suma wydatków [PLN]",
+                                label: `Suma wydatków [${getCurrencyCode()}]`,
                                data: data.expenses || [],
                            }],
                        },
--- a/shopping_app/static/js/expense_table.js
+++ b/shopping_app/static/js/expense_table.js
@@ -28,7 +28,7 @@ document.addEventListener('DOMContentLoaded', () => {
                total += parseFloat(cb.dataset.amount);
            }
        });
-        totalEl.textContent = total.toFixed(2) + ' PLN';
+        totalEl.textContent = formatCurrencyAmount(total);
    }

    function getISOWeek(date) {
--- a/shopping_app/static/js/functions.js
+++ b/shopping_app/static/js/functions.js
@@ -1,3 +1,19 @@
+function getCurrencyCode() {
+  return window.CURRENCY_CODE || 'PLN';
+}
+
+function formatCurrencyAmount(amount, options = {}) {
+  const includeCode = options.includeCode !== false;
+  const numeric = Number(amount || 0);
+  const safe = Number.isFinite(numeric) ? numeric : 0;
+  const formatted = safe.toFixed(2);
+  return includeCode ? `${formatted} ${getCurrencyCode()}` : formatted;
+}
+
+function currencyLabel(prefix = 'Kwota') {
+  return `${prefix} (${getCurrencyCode()})`;
+}
+
 function updateItemState(itemId, isChecked) {
  const checkbox = document.querySelector(`#item-${itemId} input[type='checkbox']`);
  if (checkbox) {
@@ -243,27 +259,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');
    });
 }

@@ -331,8 +385,9 @@ function renderItem(item, isShare = window.IS_SHARE, optionsOrShowEditOnly = fal

  const isOwner = window.IS_OWNER === true || window.IS_OWNER === 'true';
  const isArchived = window.IS_ARCHIVED === true || window.IS_ARCHIVED === 'true';
-  const safeName = escapeHtml(item.name || '');
-  const nameForEdit = JSON.stringify(String(item.name || ''));
+  const rawName = String(item.name || '');
+  const safeName = escapeHtml(rawName);
+  const nameForEdit = JSON.stringify(rawName);
  const quantity = Number.isInteger(item.quantity) ? item.quantity : parseInt(item.quantity, 10) || 1;
  const quantityBadge = quantity > 1
    ? `<span class="badge rounded-pill bg-secondary">x${quantity}</span>`
@@ -363,6 +418,15 @@ function renderItem(item, isShare = window.IS_SHARE, optionsOrShowEditOnly = fal

  const iconBtn = 'btn btn-outline-light btn-sm shopping-action-btn';
  const wideBtn = 'btn btn-outline-light btn-sm shopping-action-btn shopping-action-btn--wide';
+  const itemNameHtml = canEditListItem
+    ? `<button type="button"
+                    id="name-${item.id}"
+                    class="shopping-item-name text-white"
+                    data-item-id="${item.id}"
+                    data-item-name=${JSON.stringify(rawName)}
+                    data-item-quantity="${quantity}"
+                    ${isArchived ? 'disabled aria-disabled="true"' : 'data-item-menu-trigger="true"'}>${safeName}</button>`
+    : `<span id="name-${item.id}" class="shopping-item-name text-white">${safeName}</span>`;
  let actionButtons = '';

  if (canEditListItem) {
@@ -400,7 +464,7 @@ function renderItem(item, isShare = window.IS_SHARE, optionsOrShowEditOnly = fal
      <div class="shopping-item-content">
        <div class="shopping-item-head">
          <div class="shopping-item-text">
-            <span id="name-${item.id}" class="shopping-item-name text-white">${safeName}</span>
+${itemNameHtml}
            ${quantityBadge}
            ${infoHtml}
          </div>
@@ -438,26 +502,6 @@ function updateListSmoothly(newItems) {
  applyHidePurchased();
 }

-
-document.addEventListener("DOMContentLoaded", function () {
-  const receiptSection = document.getElementById("receiptSection");
-  const toggleBtn = document.querySelector('[data-bs-target="#receiptSection"]');
-
-  if (!receiptSection || !toggleBtn) return;
-
-  if (localStorage.getItem("receiptSectionOpen") === "true") {
-    new bootstrap.Collapse(receiptSection, { toggle: true });
-  }
-
-  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 toggle = document.getElementById('hidePurchasedToggle');
  if (!toggle) return;
--- a/shopping_app/static/js/live.js
+++ b/shopping_app/static/js/live.js
@@ -113,7 +113,7 @@ function setupList(listId, username) {
  socket.on('expense_added', data => {
    const badgeEl = document.getElementById('total-expense1');
    if (badgeEl) {
-      badgeEl.innerHTML = `💸 ${data.total.toFixed(2)} PLN`;
+      badgeEl.innerHTML = `💸 ${formatCurrencyAmount(data.total)}`;
      badgeEl.classList.remove('bg-secondary');
      badgeEl.classList.add('bg-success');
      badgeEl.style.display = '';
@@ -121,10 +121,10 @@ function setupList(listId, username) {

    const summaryEl = document.getElementById('total-expense2');
    if (summaryEl) {
-      summaryEl.innerHTML = `<b>💸 Łącznie wydano:</b> ${data.total.toFixed(2)} PLN`;
+      summaryEl.innerHTML = `<b>💸 Łącznie wydano:</b> ${formatCurrencyAmount(data.total)}`;
    }

-    showToast(`Dodano wydatek: ${data.amount.toFixed(2)} PLN`, 'info');
+    showToast(`Dodano wydatek: ${formatCurrencyAmount(data.amount)}`, 'info');
  });


--- a/shopping_app/static/js/preview_list_modal.js
+++ b/shopping_app/static/js/preview_list_modal.js
@@ -99,7 +99,7 @@ document.addEventListener("DOMContentLoaded", function () {
                summary.innerHTML = `
                    <p class="mb-1">📦 <strong>${totalCount}</strong> produktów</p>
                    <p class="mb-1">✅ Kupione: <strong>${purchasedCount}</strong> (${percent}%)</p>
-                    <p class="mb-0">💸 Wydatek: <strong>${totalExpense.toFixed(2)} zł</strong></p>`;
+                    <p class="mb-0">💸 Wydatek: <strong>${formatCurrencyAmount(totalExpense)}</strong></p>`;
                productList.appendChild(summary);

                const purchased = createSection("✔️ Kupione");
--- a/shopping_app/static/js/receipt_analysis.js
+++ b/shopping_app/static/js/receipt_analysis.js
@@ -22,7 +22,7 @@ async function analyzeReceipts(listId) {

        let html = `<div class="card bg-dark text-white border-secondary p-3">`;
        html += `<p class="text-secondary"><small>⏱ Czas analizy OCR: ${duration} sek.</small></p>`;
-        html += `<p><b>📊 Łącznie wykryto:</b> ${data.total.toFixed(2)} PLN</p>`;
+        html += `<p><b>📊 Łącznie wykryto:</b> ${formatCurrencyAmount(data.total)}</p>`;

        data.results.forEach((r, i) => {
            const disabled = r.already_added ? "disabled" : "";
--- a/shopping_app/static/js/receipt_section.js
+++ b/shopping_app/static/js/receipt_section.js
@@ -1,55 +1,54 @@
 document.addEventListener("DOMContentLoaded", function () {
  const receiptSection = document.getElementById("receiptSection");
-  const toggleEl = document.querySelector('[data-bs-target="#receiptSection"]');
+  const toggleEl = document.getElementById("toggleReceiptBtn");

-  if (!receiptSection || !toggleEl) return;
+  if (!receiptSection || !toggleEl || typeof bootstrap === "undefined") return;
+  if (receiptSection.dataset.receiptInit === "1") return;
+  receiptSection.dataset.receiptInit = "1";

+  const storageKey = receiptSection.dataset.receiptStorageKey || "receiptSectionOpen";
  const collapse = bootstrap.Collapse.getOrCreateInstance(receiptSection, { toggle: false });
-
-  if (localStorage.getItem("receiptSectionOpen") === "true") {
-    collapse.show();
-  }
-
  const titleEl = toggleEl.querySelector(".receipt-disclosure__title");

-  function updateUI() {
-    const isShown = receiptSection.classList.contains("show");
+  function isShown() {
+    return receiptSection.classList.contains("show");
+  }

-    toggleEl.classList.toggle("is-open", isShown);
-    toggleEl.setAttribute("aria-expanded", isShown ? "true" : "false");
+  function persist(state) {
+    localStorage.setItem(storageKey, state ? "true" : "false");
+  }
+
+  function updateUI() {
+    const shown = isShown();
+    toggleEl.classList.toggle("is-open", shown);
+    toggleEl.setAttribute("aria-expanded", shown ? "true" : "false");

    if (titleEl) {
-      titleEl.textContent = isShown
-        ? "Ukryj sekcję paragonów"
-        : "Pokaż sekcję paragonów";
+      titleEl.textContent = shown ? "Ukryj sekcję paragonów" : "Pokaż sekcję paragonów";
    }
  }

-  function toggleSection() {
+  toggleEl.addEventListener("click", function () {
    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");
+    persist(true);
    updateUI();
  });

  receiptSection.addEventListener("hidden.bs.collapse", function () {
-    localStorage.setItem("receiptSectionOpen", "false");
+    persist(false);
    updateUI();
  });

+  if (localStorage.getItem(storageKey) === "true") {
+    receiptSection.classList.add("receipt-section--restoring");
+    collapse.show();
+    requestAnimationFrame(function () {
+      receiptSection.classList.remove("receipt-section--restoring");
+    });
+  }
+
  updateUI();
 });
--- a/shopping_app/static/js/select_all_table.js
+++ b/shopping_app/static/js/select_all_table.js
@@ -12,7 +12,7 @@ document.addEventListener('DOMContentLoaded', () => {
                total += parseFloat(cb.dataset.amount);
            }
        });
-        totalEl.textContent = total.toFixed(2) + ' PLN';
+        totalEl.textContent = formatCurrencyAmount(total);
    }

    selectAllBtn.addEventListener('click', () => {
--- a/shopping_app/templates/_list_progress.html
+++ b/shopping_app/templates/_list_progress.html
@@ -27,7 +27,7 @@

    <span class="progress-label main-list-progress__label small fw-bold {% if percent < 51 %}text-white{% else %}text-dark{% endif %}">
      Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0)|int }}%)
-      {% if total_expense > 0 %} — 💸 {{ '%.2f'|format(total_expense) }} PLN{% endif %}
+      {% if total_expense > 0 %} — 💸 {{ format_currency(total_expense) }}{% endif %}
    </span>
  </div>
 </div>
--- a/shopping_app/templates/admin/admin_panel.html
+++ b/shopping_app/templates/admin/admin_panel.html
@@ -51,7 +51,7 @@
            </tr>
            <tr>
              <td>💸 Średnia kwota na listę</td>
-              <td class="text-end fw-bold">{{ avg_list_expense }} zł</td>
+              <td class="text-end fw-bold">{{ format_currency(avg_list_expense) }}</td>
            </tr>
          </tbody>
        </table>
@@ -115,30 +115,30 @@
          <tbody>
            <tr>
              <td>Wszystkie</td>
-              <td>{{ '%.2f'|format(expense_summary.all.month) }} PLN</td>
-              <td>{{ '%.2f'|format(expense_summary.all.year) }} PLN</td>
-              <td>{{ '%.2f'|format(expense_summary.all.total) }} PLN</td>
+              <td>{{ format_currency(expense_summary.all.month) }}</td>
+              <td>{{ format_currency(expense_summary.all.year) }}</td>
+              <td>{{ format_currency(expense_summary.all.total) }}</td>
              <!-- <td>{{ '%.2f'|format(expense_summary.all.avg) }} PLN</td> -->
            </tr>
            <tr>
              <td>Aktywne</td>
-              <td>{{ '%.2f'|format(expense_summary.active.month) }} PLN</td>
-              <td>{{ '%.2f'|format(expense_summary.active.year) }} PLN</td>
-              <td>{{ '%.2f'|format(expense_summary.active.total) }} PLN</td>
+              <td>{{ format_currency(expense_summary.active.month) }}</td>
+              <td>{{ format_currency(expense_summary.active.year) }}</td>
+              <td>{{ format_currency(expense_summary.active.total) }}</td>
              <!-- <td>{{ '%.2f'|format(expense_summary.active.avg) }} PLN</td> -->
            </tr>
            <tr>
              <td>Archiwalne</td>
-              <td>{{ '%.2f'|format(expense_summary.archived.month) }} PLN</td>
-              <td>{{ '%.2f'|format(expense_summary.archived.year) }} PLN</td>
-              <td>{{ '%.2f'|format(expense_summary.archived.total) }} PLN</td>
+              <td>{{ format_currency(expense_summary.archived.month) }}</td>
+              <td>{{ format_currency(expense_summary.archived.year) }}</td>
+              <td>{{ format_currency(expense_summary.archived.total) }}</td>
              <!-- <td>{{ '%.2f'|format(expense_summary.archived.avg) }} PLN</td> -->
            </tr>
            <tr>
              <td>Wygasłe</td>
-              <td>{{ '%.2f'|format(expense_summary.expired.month) }} PLN</td>
-              <td>{{ '%.2f'|format(expense_summary.expired.year) }} PLN</td>
-              <td>{{ '%.2f'|format(expense_summary.expired.total) }} PLN</td>
+              <td>{{ format_currency(expense_summary.expired.month) }}</td>
+              <td>{{ format_currency(expense_summary.expired.year) }}</td>
+              <td>{{ format_currency(expense_summary.expired.total) }}</td>
              <!--  <td>{{ '%.2f'|format(expense_summary.expired.avg) }} PLN</td> -->
            </tr>
          </tbody>
@@ -282,7 +282,7 @@
                  {% if e.total_expense >= 500 %}text-danger
                  {% elif e.total_expense > 0 %}text-success{% endif %}">
                  {% if e.total_expense > 0 %}
-                  {{ '%.2f'|format(e.total_expense) }} PLN
+                  {{ format_currency(e.total_expense) }}
                  {% else %}
                  -
                  {% endif %}
--- a/shopping_app/templates/admin/edit_list.html
+++ b/shopping_app/templates/admin/edit_list.html
@@ -25,7 +25,7 @@
      <!-- Wydatek i właściciel -->
      <div class="row mb-3">
        <div class="col-md-6">
-          <label for="amount" class="form-label">💰 Całkowity wydatek (PLN)</label>
+          <label for="amount" class="form-label">💰 Całkowity wydatek ({{ CURRENCY_CODE }})</label>
          <input type="number" step="0.01" min="0" class="form-control bg-dark text-white border-secondary ui-consistent-input"
            id="amount" name="amount" value="{{ '%.2f'|format(total_expense) }}">
        </div>
--- a/shopping_app/templates/base.html
+++ b/shopping_app/templates/base.html
@@ -10,7 +10,14 @@
  <link rel="icon" type="image/svg+xml" href="{{ url_for('favicon') }}">

  <link href="{{ static_asset_url('static_bp.serve_css_lib', 'bootstrap.min.css') }}" rel="stylesheet">
-  <link href="{{ static_asset_url('static_bp.serve_css', 'style.css') }}" rel="stylesheet">
+
+  <link rel="stylesheet" href="{{ static_asset_url('static_bp.serve_css', 'split/theme.css') }}">
+  <link rel="stylesheet" href="{{ static_asset_url('static_bp.serve_css', 'split/buttons.css') }}">
+  <link rel="stylesheet" href="{{ static_asset_url('static_bp.serve_css', 'split/forms.css') }}">
+  <link rel="stylesheet" href="{{ static_asset_url('static_bp.serve_css', 'split/components.css') }}">
+  <link rel="stylesheet" href="{{ static_asset_url('static_bp.serve_css', 'split/layout.css') }}">
+  <link rel="stylesheet" href="{{ static_asset_url('static_bp.serve_css', 'split/responsive.css') }}">
+  <link rel="stylesheet" href="{{ static_asset_url('static_bp.serve_css', 'split/pages.css') }}">

  {% set hide_login_ui = request.path == '/system-auth' %}

@@ -166,6 +173,10 @@
    });
  </script>

+  <script>
+    window.CURRENCY_CODE = {{ CURRENCY_CODE|tojson }};
+  </script>
+
  {% if request.endpoint != 'system_auth' %}
  <script src="{{ static_asset_url('static_bp.serve_js_lib', 'glightbox.min.js') }}"></script>
  <script src="{{ static_asset_url('static_bp.serve_js_lib', 'socket.io.min.js') }}"></script>
--- a/shopping_app/templates/expenses.html
+++ b/shopping_app/templates/expenses.html
@@ -88,7 +88,7 @@
                <button id="deselectAllBtn" class="btn btn-sm btn-outline-light active" style="display: none;">Odznacz
                  wszystko</button>
              </div>
-              <h5 class="text-success m-0">💰 Suma: <span id="listsTotal">0.00 PLN</span></h5>
+              <h5 class="text-success m-0">💰 Suma: <span id="listsTotal">{{ format_currency(0) }}</span></h5>
            </div>

            <!-- Tabela list z możliwością filtrowania -->
@@ -101,7 +101,7 @@
                    <th>Nazwa listy</th>
                    <th>Właściciel</th>
                    <th>Data</th>
-                    <th>Wydatki (PLN)</th>
+                    <th>Wydatki ({{ CURRENCY_CODE }})</th>
                  </tr>
                </thead>
                <tbody id="listsTableBody">
--- 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>
@@ -85,11 +96,11 @@
 <br>
 {% if total_expense > 0 %}
 <div id="total-expense2" class="text-success fw-bold mb-3">
-  💸 Łącznie wydano: {{ '%.2f'|format(total_expense) }} PLN
+  💸 Łącznie wydano: {{ format_currency(total_expense) }}
 </div>
 {% else %}
 <div id="total-expense2" class="text-success fw-bold mb-3">
-  💸 Łącznie wydano: 0.00 PLN
+  💸 Łącznie wydano: {{ format_currency(0) }}
 </div>
 {% endif %}

@@ -114,7 +125,13 @@
      <div class="shopping-item-content">
        <div class="shopping-item-head">
          <div class="shopping-item-text">
-            <span id="name-{{ item.id }}" class="shopping-item-name text-white">{{ item.name }}</span>
+            <button type="button"
+                    id="name-{{ item.id }}"
+                    class="shopping-item-name text-white"
+                    data-item-id="{{ item.id }}"
+                    data-item-name={{ item.name|tojson }}
+                    data-item-quantity="{{ item.quantity or 1 }}"
+                    {% if not list.is_archived %}data-item-menu-trigger="true"{% else %}disabled aria-disabled="true"{% endif %}>{{ item.name }}</button>
            {% if item.quantity and item.quantity > 1 %}
            <span class="badge rounded-pill bg-secondary">x{{ item.quantity }}</span>
            {% endif %}
@@ -155,6 +172,11 @@
  {% endfor %}
 </ul>

+<div id="desktopItemMenu" hidden>
+  <button type="button" class="btn btn-outline-light btn-sm w-100 text-start" data-menu-action="edit">✏️ Edytuj</button>
+  <button type="button" class="btn btn-outline-danger btn-sm w-100 text-start" data-menu-action="delete">🗑️ Usuń</button>
+</div>
+
 <div class="modal fade" id="editItemModal" tabindex="-1" aria-labelledby="editItemModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content bg-dark text-white">
@@ -385,49 +407,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>

@@ -492,6 +552,7 @@
 <script src="{{ static_asset_url('static_bp.serve_js', 'access_users.js') }}"></script>
 <script src="{{ static_asset_url('static_bp.serve_js', 'category_modal.js') }}"></script>
 <script src="{{ static_asset_url('static_bp.serve_js', 'notes.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'desktop_item_menu.js') }}"></script>
 <script>
  setupList({{ list.id }}, '{{ current_user.username if current_user.is_authenticated else 'Gość' }}');

--- a/shopping_app/templates/list_share.html
+++ b/shopping_app/templates/list_share.html
@@ -12,11 +12,11 @@

    {% if total_expense > 0 %}
    <span id="total-expense1" class="badge rounded-pill bg-success ms-2">
-      💸 {{ '%.2f'|format(total_expense) }} PLN
+      💸 {{ format_currency(total_expense) }}
    </span>
    {% else %}
    <span id="total-expense" class="badge rounded-pill bg-secondary ms-2" style="display: none;">
-      💸 0.00 PLN
+      💸 {{ format_currency(0) }}
    </span>
    {% endif %}

@@ -114,7 +114,7 @@
    <span>💰 Dodaj wydatek</span>

    <span class="badge rounded-pill bg-success" id="total-expense2">
-      💸 Łączna suma: {{ '%.2f'|format(total_expense) }} PLN
+      💸 Łączna suma: {{ format_currency(total_expense) }}
    </span>
  </div>

@@ -123,7 +123,7 @@
  <div class="input-group mb-0 shopping-compact-input-group shopping-expense-input-group">
    <input id="expenseAmount" type="number" step="0.01" min="0"
      class="form-control bg-dark text-white border-secondary shopping-expense-amount-input"
-      placeholder="Kwota (PLN)">
+      placeholder="{{ currency_placeholder() }}">

    <button onclick="submitExpense({{ list.id }})"
      class="btn btn-outline-primary share-submit-btn share-submit-btn--expense shopping-compact-submit">
@@ -135,25 +135,25 @@
 {% endif %}

 <p id="total-expense2" style="display: none;">
-  <b>💸 Łącznie wydano:</b> {{ '%.2f'|format(total_expense) }} PLN
+  <b>💸 Łącznie wydano:</b> {{ format_currency(total_expense) }}
 </p>

-<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">
-  <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">
+<button id="toggleReceiptBtn" type="button" class="receipt-disclosure mb-3"
+  aria-expanded="false" aria-controls="receiptSection">
+  <span class="receipt-disclosure__content">
+    <span class="receipt-disclosure__icon" aria-hidden="true">🧾</span>
+    <span class="receipt-disclosure__text">
+      <span class="receipt-disclosure__eyebrow">Strefa paragonów</span>
+      <span class="receipt-disclosure__title">Pokaż sekcję paragonów</span>
+    </span>
+    <span class="receipt-disclosure__meta">
      <span class="receipt-disclosure__count">{{ receipts|length }}</span>
      <span class="receipt-disclosure__chevron" aria-hidden="true">⌄</span>
-    </div>
-  </div>
-</div>
+    </span>
+  </span>
+</button>

-<div class="collapse px-2 px-md-4" id="receiptSection">
+<div class="collapse px-2 px-md-4" id="receiptSection" data-receipt-storage-key="receiptSectionOpen:list:{{ list.id }}">
  {% set receipt_pattern = 'list_' ~ list.id %}

  <div class="receipt-section-stack d-flex flex-column gap-3 mt-3">
--- a/shopping_app/templates/main.html
+++ b/shopping_app/templates/main.html
@@ -29,12 +29,14 @@
        </div>
      </div>
      <form action="{{ url_for('create_list') }}" method="post">
-        <div class="input-group mb-3 create-list-input-group">
+        <div class="input-group mb-3 create-list-input-group" role="group" aria-label="Tworzenie nowej listy">
          <input type="text" name="title" id="title" placeholder="Wprowadź nazwę nowej listy" required
-            class="form-control bg-dark text-white border-secondary">
+            class="form-control bg-dark text-white border-secondary create-list-title-input"
+            aria-label="Nazwa nowej listy">
          <button type="button" class="btn btn-outline-secondary create-list-temp-toggle" id="tempToggle" data-active="0"
-            data-bs-toggle="tooltip" data-bs-placement="top" title="Po zaznaczeniu lista będzie ważna tylko 7 dni">
-            Tymczasowa
+            data-bs-toggle="tooltip" data-bs-placement="top" title="Po zaznaczeniu lista będzie ważna tylko 7 dni"
+            aria-pressed="false" aria-label="Przełącz listę tymczasową">
+            <span class="create-list-temp-toggle__label">Tymczasowa</span>
          </button>
          <input type="hidden" name="temporary" id="temporaryHidden" value="0">
        </div>
@@ -99,7 +101,7 @@
      </div>
      <div class="main-summary-stat">
        <span class="main-summary-stat__label">Wydatki</span>
-        <strong>{{ '%.2f'|format(summary.total_expense) }} PLN</strong>
+        <strong>{{ format_currency(summary.total_expense) }}</strong>
      </div>
    </div>
  </div>
--- a/shopping_app/web.py
+++ b/shopping_app/web.py
@@ -26,6 +26,9 @@ def inject_version():

    return {
        "APP_VERSION": app.config["APP_VERSION"],
+        "CURRENCY_CODE": get_currency_code(),
+        "format_currency": format_currency,
+        "currency_placeholder": currency_placeholder,
        "static_asset_url": static_asset_url,
    }
Author	SHA1	Message	Date
Mateusz Gruszczyński	172b46ad07	zmiany dla michała	2026-04-10 12:00:46 +02:00
Mateusz Gruszczyński	4c9d665ae2	zmiana waluty w .env	2026-04-02 08:25:07 +02:00
gru	d07651ad67	Merge pull request 'split_css' (#15 ) from split_css into master Reviewed-on: #15	2026-04-01 11:09:31 +02:00
Mateusz Gruszczyński	5fac84f052	typo in vc	2026-04-01 08:19:00 +02:00
Mateusz Gruszczyński	30f33e29cf	changes in vc	2026-04-01 08:02:42 +02:00
Mateusz Gruszczyński	f197efe2eb	big changes in css	2026-04-01 07:55:56 +02:00
Mateusz Gruszczyński	2be058f3e5	wip 1	2026-04-01 06:39:18 +02:00
gru	e3f7b14f01	Merge pull request 'new_share_hub' (#14 ) from new_share_hub into master Reviewed-on: #14	2026-03-31 18:22:26 +02:00
Mateusz Gruszczyński	2b9a305db7	clean	2026-03-31 18:18:04 +02:00
Mateusz Gruszczyński	bd83211f38	fix	2026-03-31 18:16:49 +02:00
Mateusz Gruszczyński	796b73fa47	new sharehub	2026-03-31 15:42:37 +02:00