fix in prev.

Reviewed-on: #12

app.py

@@ -1,6 +1,11 @@
 from shopping_app import app, socketio, APP_PORT, DEBUG_MODE
 from shopping_app.app_setup import logging
 
+from shopping_app.startup_info import print_startup_info
+
 if __name__ == "__main__":
     logging.basicConfig(level=logging.DEBUG if DEBUG_MODE else logging.INFO)
+
+    print_startup_info(app)
+
     socketio.run(app, host="0.0.0.0", port=APP_PORT, debug=False)

deploy_docker.sh

@@ -1,7 +1,6 @@
 #!/bin/bash
 set -e
 
-# --- Wczytaj zmienne z .env ---
 if [[ -f .env ]]; then
   set -a
   source .env
@@ -9,8 +8,8 @@ if [[ -f .env ]]; then
 fi
 
 APP_PORT="${APP_PORT:-8080}"
-
 PROFILE=$1
+COMPOSE_FILE="docker/compose.yml"
 
 if [[ -z "$PROFILE" ]]; then
   echo "Użycie: $0 {pgsql|mysql|sqlite}"
@@ -19,9 +18,9 @@ fi
 
 echo "Zatrzymuję kontenery aplikacji i bazy..."
 if [[ "$PROFILE" == "sqlite" ]]; then
-  docker compose stop
+  docker compose -f "$COMPOSE_FILE" stop
 else
-  docker compose --profile "$PROFILE" stop
+  docker compose -f "$COMPOSE_FILE" --profile "$PROFILE" stop
 fi
 
 echo "Pobieram najnowszy kod z repozytorium..."
@@ -35,9 +34,9 @@ git rev-parse --short HEAD > version.txt
 
 echo "Buduję i uruchamiam kontenery..."
 if [[ "$PROFILE" == "sqlite" ]]; then
-  docker compose up -d --build
+  docker compose -f "$COMPOSE_FILE" up -d --build
 else
-  DB_ENGINE="$PROFILE" docker compose --profile "$PROFILE" up -d --build
+  DB_ENGINE="$PROFILE" docker compose -f "$COMPOSE_FILE" --profile "$PROFILE" up -d --build
 fi
 
-echo "Gotowe! Wersja aplikacji: $(cat version.txt)"
+echo "Gotowe! Wersja aplikacji: $(cat version.txt)"

docker/Dockerfile

@@ -1,8 +1,6 @@
 FROM python:3.14-trixie
-#FROM python:3.13-slim
 WORKDIR /app
 
-# Zależności systemowe do OCR, obrazów, tesseract i języka PL
 RUN apt-get update && apt-get install -y --no-install-recommends \
     tesseract-ocr \
     tesseract-ocr-pol \
@@ -14,21 +12,17 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
     && apt-get clean \
     && rm -rf /var/lib/apt/lists/*
 
-# Kopiujemy wymagania
-COPY requirements.txt requirements.txt
+COPY docker/requirements.txt /app/requirements.txt
 
-# Instalujemy zależności
+RUN pip install --upgrade pip
 RUN pip install --no-cache-dir -r requirements.txt
 
-# Kopiujemy resztę aplikacji
-COPY . .
+COPY . /app
 
-# Kopiujemy entrypoint i ustawiamy uprawnienia
 COPY entrypoint.sh /entrypoint.sh
 RUN chmod +x /entrypoint.sh
 
-# Otwieramy port
+
 #EXPOSE 8000
 
-# Ustawiamy entrypoint
 ENTRYPOINT ["/entrypoint.sh"]

docker/Dockerfile.debian-slim

@@ -0,0 +1,28 @@
+FROM python:3.14-slim-trixie
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    tesseract-ocr \
+    tesseract-ocr-pol \
+    libglib2.0-0 \
+    libsm6 \
+    libxrender1 \
+    libxext6 \
+    poppler-utils \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY docker/requirements.txt /app/requirements.txt
+
+RUN pip install --upgrade pip
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . /app
+
+
+COPY entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+
+#EXPOSE 8000
+
+ENTRYPOINT ["/entrypoint.sh"]

docker/Dockerfile.debian-stable-slim

@@ -0,0 +1,27 @@
+FROM python:3.14-slim-trixie
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    tesseract-ocr \
+    tesseract-ocr-pol \
+    libglib2.0-0 \
+    libsm6 \
+    libxrender1 \
+    libxext6 \
+    poppler-utils \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY docker/requirements-stable.txt /app/requirements.txt
+
+RUN pip install --upgrade pip
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . /app
+
+COPY entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+
+#EXPOSE 8000
+
+ENTRYPOINT ["/entrypoint.sh"]

docker/compose.yml

@@ -1,14 +1,11 @@
 services:
   app:
-    build: .
+    build:
+      context: ..
+      dockerfile: docker/Dockerfile.debian-stable-slim
     container_name: lista-zakupow-app
     expose:
       - "${APP_PORT:-8000}"
-
-    # temporary
-    #ports:
-    #  - "9281:${APP_PORT:-8000}"
-
     healthcheck:
       test:
         [
@@ -22,11 +19,11 @@ services:
       retries: 3
       start_period: 10s
     env_file:
-      - .env
+      - ../.env
     volumes:
-      - .:/app
-      - ./uploads:/app/uploads
-      - ./instance:/app/instance
+      - ../:/app
+      - ../uploads:/app/uploads
+      - ../instance:/app/instance
     networks:
       - lista-zakupow_network
     restart: unless-stopped
@@ -40,7 +37,7 @@ services:
     ports:
       - "${APP_PORT:-8000}:80"
     volumes:
-      - ./deploy/varnish/default.vcl:/etc/varnish/default.vcl:ro
+      - ../deploy/varnish/default.vcl:/etc/varnish/default.vcl:ro
     environment:
       - VARNISH_SIZE=256m
     networks:
@@ -56,7 +53,7 @@ services:
       MYSQL_PASSWORD: ${DB_PASSWORD}
       MYSQL_ROOT_PASSWORD: 89o38kUX5T4C
     volumes:
-      - ./db/mysql:/var/lib/mysql
+      - ../db/mysql:/var/lib/mysql
     restart: unless-stopped
     networks:
       - lista-zakupow_network
@@ -71,7 +68,7 @@ services:
       POSTGRES_PASSWORD: ${DB_PASSWORD}
       PGDATA: /var/lib/postgresql
     volumes:
-      - ./db/pgsql/:/var/lib/postgresql
+      - ../db/pgsql:/var/lib/postgresql
     networks:
       - lista-zakupow_network
     restart: unless-stopped
@@ -79,4 +76,4 @@ services:
 
 networks:
   lista-zakupow_network:
-    driver: bridge
+    driver: bridge

docker/requirements-stable.txt

@@ -0,0 +1,21 @@
+bcrypt==5.0.0
+cryptography==46.0.5
+Flask==3.1.3
+Flask-Compress==1.23
+Flask-Login==0.6.3
+Flask-Session==0.8.0
+Flask-SocketIO==5.6.1
+Flask-SQLAlchemy==3.1.1
+flask-talisman==1.1.0
+gevent==25.9.1
+gevent-websocket==0.10.1
+opencv-python-headless>=4.12.0.88
+pdf2image==1.17.0
+pillow==12.1.1
+pillow_heif==1.3.0
+psutil==7.2.2
+psycopg2-binary==2.9.11
+PyMySQL==1.1.2
+pytesseract==0.3.13
+SQLAlchemy==2.0.48
+Werkzeug==3.1.6

shopping_app/app_setup.py

@@ -94,6 +94,18 @@ def read_commit(filename="version.txt", root_path=None):
     except Exception:
         return None
 
+
+def get_file_md5(path):
+    try:
+        digest = hashlib.md5()
+        with open(path, "rb") as f:
+            for chunk in iter(lambda: f.read(8192), b""):
+                digest.update(chunk)
+        return digest.hexdigest()[:12]
+    except Exception:
+        return "dev"
+
+
 commit = read_commit("version.txt", root_path=os.path.dirname(os.path.dirname(__file__))) or "dev"
 APP_VERSION = commit
 app.config["APP_VERSION"] = APP_VERSION

shopping_app/helpers.py

@@ -821,7 +821,7 @@ def get_progress(list_id: int) -> tuple[int, int, float]:
     result = (
         db.session.query(
             func.count(Item.id),
-            func.sum(case((Item.purchased == True, 1), else_=0)),
+            func.sum(case(((Item.purchased == True) & (Item.not_purchased == False), 1), else_=0)),
         )
         .filter(Item.list_id == list_id)
         .first()

shopping_app/routes_admin.py

@@ -682,6 +682,12 @@ def edit_list(list_id):
         elif action == "toggle_purchased":
             item = get_valid_item_or_404(request.form.get("item_id"), list_id)
             item.purchased = not item.purchased
+            if item.purchased:
+                item.not_purchased = False
+                item.not_purchased_reason = None
+                item.purchased_at = utcnow()
+            else:
+                item.purchased_at = None
             db.session.commit()
             flash("Zmieniono status oznaczenia produktu", "success")
             return redirect(url_for("edit_list", list_id=list_id))

shopping_app/routes_main.py

@@ -115,7 +115,7 @@ def main_page():
             db.session.query(
                 Item.list_id,
                 func.count(Item.id).label("total_count"),
-                func.sum(case((Item.purchased == True, 1), else_=0)).label(
+                func.sum(case((((Item.purchased == True) & (Item.not_purchased == False)), 1), else_=0)).label(
                     "purchased_count"
                 ),
                 func.sum(case((Item.not_purchased == True, 1), else_=0)).label(
@@ -163,6 +163,28 @@ def main_page():
             l.total_expense = 0
             l.category_badges = []
 
+    def build_progress_summary(lists_):
+        total_lists = len(lists_)
+        total_products = sum(getattr(l, "total_count", 0) or 0 for l in lists_)
+        purchased_products = sum(getattr(l, "purchased_count", 0) or 0 for l in lists_)
+        not_purchased_products = sum(getattr(l, "not_purchased_count", 0) or 0 for l in lists_)
+        total_expense = float(sum((getattr(l, "total_expense", 0) or 0) for l in lists_))
+        completion_percent = (
+            (purchased_products / total_products) * 100 if total_products > 0 else 0
+        )
+        return {
+            "list_count": total_lists,
+            "total_products": total_products,
+            "purchased_products": purchased_products,
+            "not_purchased_products": not_purchased_products,
+            "remaining_products": max(total_products - purchased_products - not_purchased_products, 0),
+            "total_expense": round(total_expense, 2),
+            "completion_percent": completion_percent,
+        }
+
+    user_lists_summary = build_progress_summary(user_lists)
+    accessible_lists_summary = build_progress_summary(accessible_lists)
+
     expiring_lists = get_expiring_lists_for_user(current_user.id) if current_user.is_authenticated else []
     templates = (ListTemplate.query.filter_by(is_active=True, created_by=current_user.id).order_by(ListTemplate.name.asc()).all() if current_user.is_authenticated else [])
 
@@ -178,6 +200,8 @@ def main_page():
         selected_month=month_str,
         expiring_lists=expiring_lists,
         templates=templates,
+        user_lists_summary=user_lists_summary,
+        accessible_lists_summary=accessible_lists_summary,
     )
 
 
@@ -570,9 +594,9 @@ def view_list(list_id):
     percent = (purchased_count / total_count * 100) if total_count > 0 else 0
 
     for item in items:
-        if item.added_by != shopping_list.owner_id:
+        if item.added_by and item.added_by != shopping_list.owner_id:
             item.added_by_display = (
-                item.added_by_user.username if item.added_by_user else "?"
+                item.added_by_user.username if item.added_by_user else None
             )
         else:
             item.added_by_display = None

shopping_app/routes_secondary.py

@@ -441,9 +441,9 @@ def shared_list(token=None, list_id=None):
     ]
 
     for item in items:
-        if item.added_by != shopping_list.owner_id:
+        if item.added_by and item.added_by != shopping_list.owner_id:
             item.added_by_display = (
-                item.added_by_user.username if item.added_by_user else "?"
+                item.added_by_user.username if item.added_by_user else None
             )
         else:
             item.added_by_display = None

shopping_app/sockets.py

@@ -345,6 +345,8 @@ def handle_check_item(data):
     if item:
         item.purchased = True
         item.purchased_at = datetime.now(UTC)
+        item.not_purchased = False
+        item.not_purchased_reason = None
         log_list_activity(item.list_id, 'item_checked', item_name=item.name, actor=current_user if current_user.is_authenticated else None, actor_name=current_user.username if current_user.is_authenticated else 'Gość')
         db.session.commit()
 
@@ -470,6 +472,8 @@ def handle_mark_not_purchased(data):
     if item:
         item.not_purchased = True
         item.not_purchased_reason = reason
+        item.purchased = False
+        item.purchased_at = None
         log_list_activity(item.list_id, 'item_marked_not_purchased', item_name=item.name, actor=current_user if current_user.is_authenticated else None, actor_name=current_user.username if current_user.is_authenticated else 'Gość', details=reason or None)
         db.session.commit()
         emit(

shopping_app/startup_info.py

@@ -0,0 +1,95 @@
+import os
+import sys
+import platform
+import socket
+from datetime import datetime
+
+import psutil
+
+try:
+    from sqlalchemy import text
+except Exception:
+    text = None
+
+def mb(x):
+    return int(x / 1024 / 1024)
+
+
+def get_db_type(app):
+    uri = app.config.get("SQLALCHEMY_DATABASE_URI") or app.config.get("DATABASE_URL", "")
+
+    if not uri:
+        return "NONE"
+
+    if uri.startswith("sqlite"):
+        return "SQLite"
+    if uri.startswith("mysql"):
+        return "MySQL"
+    if uri.startswith("postgresql"):
+        return "PostgreSQL"
+
+    return "OTHER"
+
+def print_startup_info(app):
+    host = os.getenv("HOST", "127.0.0.1")
+    port = int(os.getenv("PORT", "8000"))
+
+    rules = list(app.url_map.iter_rules())
+
+    cpu = psutil.cpu_percent(interval=0.2)
+    ram = psutil.virtual_memory()
+    proc = psutil.Process(os.getpid())
+
+    db_type = get_db_type(app)
+
+    print("\n" + "="*52)
+    print(" APP START")
+    print("="*52)
+
+    # SYSTEM
+    print("\n[ SYSTEM ]")
+    print(f"Time   : {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}")
+    print(f"OS     : {platform.system()} {platform.release()} ({platform.machine()})")
+    print(f"Python : {sys.version.split()[0]}")
+    print(f"Host   : {socket.gethostname()}")
+
+    # SERVER
+    print("\n[ SERVER ]")
+    print(f"Bind   : {host}:{port}")
+    print(f"URL    : http://127.0.0.1:{port}")
+
+    # APP
+    print("\n[ APP ]")
+    print(f"Name   : {app.name}")
+    print(f"Mode   : {'DEV' if app.debug else 'PROD'}")
+    print(f"Debug  : {app.debug}")
+
+    # RESOURCES
+    print("\n[ RESOURCES ]")
+    print(f"CPU    : {cpu:>5.1f}%")
+    print(f"RAM    : {ram.percent:>5.1f}% ({mb(ram.used)} / {mb(ram.total)} MB)")
+    print(f"PROC   : {mb(proc.memory_info().rss)} MB")
+
+    # DATABASE
+    print("\n[ DATABASE ]")
+    print(f"Type   : {db_type}")
+
+    # SECURITY
+    print("\n[ SECURITY ]")
+    print(f"Secret : {'OK' if app.config.get('SECRET_KEY') else 'MISSING'}")
+    print(f"Talis  : {'OFF' if app.config.get('TALISMAN_DISABLED') else 'ON'}")
+
+    # HEALTH
+    print("\n[ HEALTH ]")
+    print(f"Uploads: {'OK' if os.path.exists('uploads') else 'MISS'}")
+    print(f"Static : {'OK' if os.path.exists(app.static_folder) else 'MISS'}")
+
+    # ROUTES
+    print("\n[ ROUTES ]")
+    print(f"Total  : {len(rules)}")
+
+    # STATUS
+    print("\n[ STATUS ]")
+    print("READY")
+
+    print("="*52 + "\n")

shopping_app/static/css/style_old.css

@@ -1,416 +0,0 @@
-/* --- Rozmiary i kursory --- */
-.large-checkbox {
-    width: 1.5em;
-    height: 1.5em;
-}
-
-.clickable-item {
-    cursor: pointer;
-}
-
-/* --- Kolory tła (nadpisane klasy Bootstrapa) --- */
-.bg-success {
-    background-color: #1e7e34 !important;
-}
-
-.btn-outline-light:hover {
-    background-color: #ffc107 !important;
-    color: #000 !important;
-    border-color: #ffc107 !important;
-}
-
-.progress-dark {
-    background-color: #212529 !important;
-    border-radius: 20px !important;
-    overflow: hidden;
-}
-
-.progress-bar {
-    border-radius: 0 !important;
-    transition: width 0.4s ease, background-color 0.4s ease;
-}
-
-.progress-bar:first-child {
-    border-top-left-radius: 20px !important;
-    border-bottom-left-radius: 20px !important;
-}
-
-.progress-bar:last-child {
-    border-top-right-radius: 20px !important;
-    border-bottom-right-radius: 20px !important;
-}
-
-
-/* rodzic już ma position-relative */
-.progress-label {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    pointer-events: none;
-    /* klikalne przyciski obok paska nie ucierpią */
-    white-space: nowrap;
-}
-
-.progress-thin {
-    height: 12px;
-}
-
-.item-not-checked {
-    background-color: #2c2f33 !important;
-    color: white !important;
-}
-
-/* --- Styl przycisku wyboru pliku --- */
-input[type="file"]::file-selector-button {
-    background-color: #225d36;
-    color: #fff;
-    border: none;
-    padding: 0.5em 1em;
-    border-radius: 4px;
-    font-weight: bold;
-    cursor: pointer;
-    transition: background 0.2s;
-}
-
-/* --- Ciemniejsze alerty Bootstrapa --- */
-.alert-success {
-    background-color: #225d36 !important;
-    color: #eaffea !important;
-    border-color: #174428 !important;
-}
-
-.alert-danger {
-    background-color: #7a1f23 !important;
-    color: #ffeaea !important;
-    border-color: #531417 !important;
-}
-
-.alert-info {
-    background-color: #1d3a4d !important;
-    color: #eaf6ff !important;
-    border-color: #152837 !important;
-}
-
-.alert-warning {
-    background-color: #665c1e !important;
-    color: #fffbe5 !important;
-    border-color: #4d4415 !important;
-}
-
-/* Badge - kolory pasujące do ciemnych alertów */
-.badge.bg-success,
-.badge.text-bg-success {
-    background-color: #225d36 !important;
-    color: #eaffea !important;
-}
-
-.badge.bg-danger,
-.badge.text-bg-danger {
-    background-color: #7a1f23 !important;
-    color: #ffeaea !important;
-}
-
-.badge.bg-info,
-.badge.text-bg-info {
-    background-color: #1d3a4d !important;
-    color: #eaf6ff !important;
-}
-
-.badge.bg-warning,
-.badge.text-bg-warning {
-    background-color: #665c1e !important;
-    color: #fffbe5 !important;
-}
-
-.badge.bg-secondary,
-.badge.text-bg-secondary {
-    background-color: #343a40 !important;
-    color: #e2e3e5 !important;
-}
-
-.badge.bg-primary,
-.badge.text-bg-primary {
-    background-color: #184076 !important;
-    color: #e6f0ff !important;
-}
-
-.badge.bg-light,
-.badge.text-bg-light {
-    background-color: #444950 !important;
-    color: #f8f9fa !important;
-}
-
-.badge.bg-dark,
-.badge.text-bg-dark {
-    background-color: #181a1b !important;
-    color: #f8f9fa !important;
-}
-
-/* --- Styl dla własnych checkboxów --- */
-input[type="checkbox"].large-checkbox {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    width: 1.5em;
-    height: 1.5em;
-    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.5em;
-    font-weight: bold;
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    line-height: 1;
-    transition: color 0.2s;
-}
-
-input[type="checkbox"].large-checkbox:checked::before {
-    content: '✓';
-    color: #ffffff;
-}
-
-input[type="checkbox"].large-checkbox:disabled::before {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-input[type="checkbox"].large-checkbox:disabled {
-    cursor: not-allowed;
-}
-
-#tempToggle {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
-input.form-control {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-.info-bar-fixed {
-    width: 100%;
-    color: #f8f9fa;
-    background-color: #212529;
-    border-radius: 12px 12px 0 0;
-    text-align: center;
-    padding: 10px 10px;
-    font-size: 0.95rem;
-    box-sizing: border-box;
-    margin-top: 2rem;
-    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.25);
-}
-
-@media (max-width: 768px) {
-    .info-bar-fixed {
-        position: static;
-        font-size: 0.85rem;
-        padding: 8px 4px;
-        border-radius: 0;
-    }
-}
-
-.table-responsive {
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-}
-
-.table-responsive table {
-    min-width: 1000px;
-}
-
-.bg-dark .form-control::placeholder {
-    color: #ccc !important;
-    opacity: 1;
-}
-
-.toast-body {
-    color: #ffffff !important;
-    font-weight: 500 !important;
-}
-
-.toast {
-    animation: fadeInUp 0.5s ease;
-}
-
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-#mass-add-list li.active {
-    background: #198754 !important;
-    color: #fff !important;
-    border: 1px solid #000000 !important;
-}
-
-#mass-add-list li {
-    transition: background 0.2s;
-}
-
-.quantity-input {
-    width: 60px;
-    background: #343a40;
-    color: #fff;
-    border: 1px solid #495057;
-    border-radius: 4px;
-    text-align: center;
-}
-
-.add-btn {
-    margin-left: 10px;
-}
-
-.quantity-controls {
-    min-width: 120px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 4px;
-}
-
-.list-group-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-#empty-placeholder {
-    font-style: italic;
-    pointer-events: none;
-}
-
-#items li.hide-purchased {
-    display: none !important;
-}
-
-.list-group-item:first-child,
-.list-group-item:last-child {
-    border-radius: 0 !important;
-}
-
-.fade-out {
-    opacity: 0;
-    transition: opacity 0.5s ease;
-}
-
-@media (pointer: fine) {
-    .only-mobile {
-        display: none !important;
-    }
-}
-
-
-.ts-dropdown .active {
-    background-color: #495057 !important;
-}
-
-.pagination-dark .page-link {
-    color: #fff;
-    background-color: #212529;
-    border: 1px solid #495057;
-}
-
-.pagination-dark .page-link:hover {
-    background-color: #343a40;
-    border-color: #6c757d;
-    color: #fff;
-}
-
-.pagination-dark .page-item.active .page-link {
-    background-color: #0d6efd;
-    border-color: #0d6efd;
-    color: #fff;
-}
-
-.pagination-dark .page-item.disabled .page-link {
-    background-color: #2b3035;
-    border-color: #495057;
-    color: #6c757d;
-}
-
-.tom-dark .ts-control {
-    background-color: #212529 !important;
-    color: #fff !important;
-    border: 1px solid #495057 !important;
-    border-radius: 0.375rem;
-    min-height: 38px;
-    padding: 0.25rem 0.5rem;
-    box-sizing: border-box;
-}
-
-.tom-dark .ts-control .item {
-    background-color: #343a40 !important;
-    color: #fff !important;
-    border-radius: 0.25rem;
-    padding: 2px 8px;
-    margin-right: 4px;
-}
-
-.ts-dropdown {
-    background-color: #212529 !important;
-    color: #fff !important;
-    border: 1px solid #495057;
-    border-radius: 0.375rem;
-    z-index: 9999 !important;
-    max-height: 300px;
-    overflow-y: auto;
-}
-
-.ts-dropdown .active {
-    background-color: #495057 !important;
-    color: #fff !important;
-}
-
-td select.tom-dark {
-    width: 100%;
-    max-width: 100%;
-    box-sizing: border-box;
-}
-
-.table-dark.table-striped tbody tr:nth-of-type(odd) {
-    background-color: rgba(255, 255, 255, 0.025);
-}
-
-.table-dark tbody tr:hover {
-    background-color: rgba(255, 255, 255, 0.04);
-}
-
-.table-dark thead th {
-    background-color: #1c1f22;
-    color: #e1e1e1;
-    font-weight: 500;
-    border-bottom: 1px solid #3a3f44;
-}
-
-.table-dark td,
-.table-dark th {
-    padding: 0.6rem 0.75rem;
-    vertical-align: middle;
-    border-top: 1px solid #3a3f44;
-}
-
-.card .table {
-    border-radius: 0 !important;
-    overflow: hidden;
-    margin-bottom: 0;
-}

shopping_app/static/js/app_ui.js

@@ -1,5 +1,6 @@
 document.addEventListener('DOMContentLoaded', function () {
   enhancePasswordFields();
+  observePasswordFields();
   enhanceSearchableTables();
   wireCopyButtons();
   wireUnsavedWarnings();
@@ -8,36 +9,78 @@ document.addEventListener('DOMContentLoaded', function () {
   initResponsiveCategoryBadges();
 });
 
-function enhancePasswordFields() {
-  document.querySelectorAll('input[type="password"]').forEach(function (input) {
-    if (input.dataset.uiPasswordReady === '1') return;
-    if (input.closest('[data-ui-skip-toggle="true"]')) return;
+function initPasswordField(input) {
+  if (!input || input.dataset.uiPasswordReady === '1') return;
+  if (input.closest('[data-ui-skip-toggle="true"]')) return;
 
-    const btn = document.createElement('button');
-    btn.type = 'button';
-    btn.className = 'ui-password-toggle';
-    btn.setAttribute('aria-label', 'Pokaż lub ukryj hasło');
-    btn.textContent = '👁';
+  const btn = document.createElement('button');
+  btn.type = 'button';
+  btn.className = 'ui-password-toggle';
+  btn.setAttribute('aria-label', 'Pokaż lub ukryj hasło');
+  btn.setAttribute('aria-pressed', 'false');
+  btn.title = 'Pokaż hasło';
+  btn.innerHTML = '<span aria-hidden="true">👁</span>';
 
-    btn.addEventListener('click', function () {
-      const visible = input.type === 'text';
-      input.type = visible ? 'password' : 'text';
-      btn.textContent = visible ? '👁' : '🙈';
-      btn.classList.toggle('is-active', !visible);
-    });
+  const syncState = function () {
+    const visible = input.type === 'text';
+    btn.innerHTML = visible ? '<span aria-hidden="true">🙈</span>' : '<span aria-hidden="true">👁</span>';
+    btn.classList.toggle('is-active', visible);
+    btn.setAttribute('aria-pressed', visible ? 'true' : 'false');
+    btn.title = visible ? 'Ukryj hasło' : 'Pokaż hasło';
+  };
 
-    if (input.parentElement && input.parentElement.classList.contains('input-group')) {
-      input.parentElement.appendChild(btn);
-    } else {
-      const wrapper = document.createElement('div');
-      wrapper.className = 'input-group ui-password-group';
-      input.parentNode.insertBefore(wrapper, input);
-      wrapper.appendChild(input);
-      wrapper.appendChild(btn);
+  btn.addEventListener('click', function () {
+    const selectionStart = input.selectionStart;
+    const selectionEnd = input.selectionEnd;
+    input.type = input.type === 'password' ? 'text' : 'password';
+    syncState();
+    input.focus({ preventScroll: true });
+    if (typeof selectionStart === 'number' && typeof selectionEnd === 'number') {
+      try {
+        input.setSelectionRange(selectionStart, selectionEnd);
+      } catch (err) {}
     }
-
-    input.dataset.uiPasswordReady = '1';
   });
+
+  const parent = input.parentElement;
+  if (parent && parent.classList.contains('input-group')) {
+    parent.classList.add('ui-password-group');
+    if (!parent.querySelector(':scope > .ui-password-toggle')) {
+      parent.appendChild(btn);
+    }
+  } else {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'input-group ui-password-group';
+    input.parentNode.insertBefore(wrapper, input);
+    wrapper.appendChild(input);
+    wrapper.appendChild(btn);
+  }
+
+  input.dataset.uiPasswordReady = '1';
+  syncState();
+}
+
+function enhancePasswordFields(root) {
+  const scope = root && root.querySelectorAll ? root : document;
+  if (scope.matches && scope.matches('input[type="password"]')) {
+    initPasswordField(scope);
+  }
+  scope.querySelectorAll('input[type="password"]').forEach(initPasswordField);
+}
+
+function observePasswordFields() {
+  if (window.__uiPasswordObserverReady) return;
+  const observer = new MutationObserver(function (mutations) {
+    mutations.forEach(function (mutation) {
+      mutation.addedNodes.forEach(function (node) {
+        if (!(node instanceof HTMLElement)) return;
+        enhancePasswordFields(node);
+      });
+    });
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
+  window.__uiPasswordObserverReady = true;
 }
 
 function enhanceSearchableTables() {

shopping_app/static/js/chart_controls.js

@@ -76,7 +76,7 @@ document.addEventListener("DOMContentLoaded", function () {
         }
 
         // porzucenie zakresu
-        document.querySelectorAll("#chartTab .range-btn").forEach(b => b.classList.remove("active"));
+        document.querySelectorAll("#chartTab .chart-range-btn").forEach(b => b.classList.remove("active"));
         reloadRespectingSplit();
     });
 
@@ -90,9 +90,9 @@ document.addEventListener("DOMContentLoaded", function () {
     });
 
     // ——— Predefiniowane zakresy pod wykresem ———
-    document.querySelectorAll("#chartTab .range-btn").forEach((btn) => {
+    document.querySelectorAll("#chartTab .chart-range-btn").forEach((btn) => {
         btn.addEventListener("click", function () {
-            document.querySelectorAll("#chartTab .range-btn").forEach((b) => b.classList.remove("active"));
+            document.querySelectorAll("#chartTab .chart-range-btn").forEach((b) => b.classList.remove("active"));
             this.classList.add("active");
             const r = this.getAttribute("data-range"); // last30days/currentmonth/monthly/quarterly/halfyearly/yearly
 

shopping_app/static/js/expense_table.js

@@ -1,7 +1,7 @@
 document.addEventListener('DOMContentLoaded', () => {
     const checkboxes = document.querySelectorAll('.list-checkbox');
     const totalEl = document.getElementById('listsTotal');
-    const filterButtons = document.querySelectorAll('.range-btn');
+    const filterButtons = document.querySelectorAll('#listsTab .table-range-btn');
     const rows = document.querySelectorAll('#listsTableBody tr');
     const categoryButtons = document.querySelectorAll('.category-filter');
     const applyCustomBtn = document.getElementById('applyCustomRange');
@@ -136,7 +136,7 @@ document.addEventListener('DOMContentLoaded', () => {
             if (initialLoad) {
                 filterByLast30Days();
             } else {
-                const activeRange = document.querySelector('.range-btn.active');
+                const activeRange = document.querySelector('#listsTab .table-range-btn.active');
                 if (activeRange) filterByRange(activeRange.dataset.range);
             }
             applyExpenseFilter();
@@ -158,7 +158,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 return;
             }
             initialLoad = false;
-            document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active'));
+            document.querySelectorAll('#listsTab .table-range-btn').forEach(b => b.classList.remove('active'));
             filterByCustomRange(startStr, endStr);
             applyExpenseFilter();
             applyCategoryFilter();

shopping_app/static/js/functions.js

@@ -86,22 +86,51 @@ function deleteItem(id) {
 }
 
 function editItem(id, oldName, oldQuantity) {
-  const newName = prompt('Podaj nową nazwę (lub zostaw starą):', oldName);
-  if (newName === null) return;
+  const finalName = String(oldName ?? '').trim();
+  let newQuantity = parseInt(oldQuantity, 10);
 
-  const newQuantityStr = prompt('Podaj nową ilość:', oldQuantity);
-  if (newQuantityStr === null) return;
+  if (!finalName) {
+    showToast('Nazwa produktu nie może być pusta.', 'warning');
+    return;
+  }
 
-  const finalName = newName.trim() !== '' ? newName.trim() : oldName;
-
-  let newQuantity = parseInt(newQuantityStr);
   if (isNaN(newQuantity) || newQuantity < 1) {
-    newQuantity = oldQuantity;
+    newQuantity = 1;
   }
 
   socket.emit('edit_item', { item_id: id, new_name: finalName, new_quantity: newQuantity });
 }
 
+function openEditItemModal(event, id, oldName, oldQuantity) {
+  if (event && typeof event.stopPropagation === 'function') {
+    event.stopPropagation();
+  }
+
+  const modalEl = document.getElementById('editItemModal');
+  const idInput = document.getElementById('editItemId');
+  const nameInput = document.getElementById('editItemName');
+  const quantityInput = document.getElementById('editItemQuantity');
+
+  if (!modalEl || !idInput || !nameInput || !quantityInput || typeof bootstrap === 'undefined') {
+    editItem(id, oldName, oldQuantity);
+    return;
+  }
+
+  idInput.value = id;
+  nameInput.value = String(oldName ?? '').trim();
+
+  const parsedQuantity = parseInt(oldQuantity, 10);
+  quantityInput.value = !isNaN(parsedQuantity) && parsedQuantity > 0 ? parsedQuantity : 1;
+
+  const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
+  modal.show();
+
+  setTimeout(() => {
+    nameInput.focus();
+    nameInput.select();
+  }, 150);
+}
+
 function submitExpense(listId) {
   const amountInput = document.getElementById('expenseAmount');
   const amount = parseFloat(amountInput.value);
@@ -282,7 +311,15 @@ function isListDifferent(oldItems, newItems) {
 }
 
 
-function renderItem(item, isShare = window.IS_SHARE, showEditOnly = false) {
+function renderItem(item, isShare = window.IS_SHARE, optionsOrShowEditOnly = false) {
+  const options = (typeof optionsOrShowEditOnly === 'object' && optionsOrShowEditOnly !== null)
+    ? optionsOrShowEditOnly
+    : { showEditOnly: !!optionsOrShowEditOnly };
+
+  const showEditOnly = !!options.showEditOnly;
+  const temporaryShareUndo = !!options.temporaryShareUndo;
+  const countdownSeconds = Math.max(0, parseInt(options.countdownSeconds, 10) || 15);
+
   const li = document.createElement('li');
   li.id = `item-${item.id}`;
   li.dataset.name = String(item.name || '').toLowerCase();
@@ -302,7 +339,7 @@ function renderItem(item, isShare = window.IS_SHARE, showEditOnly = false) {
     : '';
 
   const canEditListItem = !isShare;
-  const canShowShareActions = isShare && !showEditOnly;
+  const canShowShareActions = isShare && !showEditOnly && !temporaryShareUndo;
   const canMarkNotPurchased = !item.not_purchased && !isArchived;
   const checkboxHtml = `<input id="checkbox-${item.id}" class="large-checkbox" type="checkbox" ${item.purchased ? 'checked' : ''} ${(item.not_purchased || isArchived) ? 'disabled' : ''}>`;
 
@@ -313,9 +350,12 @@ function renderItem(item, isShare = window.IS_SHARE, showEditOnly = false) {
   if (item.not_purchased_reason) {
     infoParts.push(`<span class="text-dark">[ <b>Powód: ${escapeHtml(item.not_purchased_reason)}</b> ]</span>`);
   }
-  const addedByDisplay = item.added_by_display;
-  if (addedByDisplay) {
-    infoParts.push(`<span class="text-info">[ Dodał/a: <b>${escapeHtml(addedByDisplay)}</b> ]</span>`);
+  const addedByDisplay = item.added_by_display || (isShare ? item.added_by : '');
+  const addedById = item.added_by_id != null ? Number(item.added_by_id) : null;
+  const ownerId = item.owner_id != null ? Number(item.owner_id) : null;
+  const shouldShowAddedBy = !!addedByDisplay && (addedById === null || ownerId === null || addedById !== ownerId);
+  if (shouldShowAddedBy) {
+    infoParts.push(`<span class="item-added-by-meta">· dodał/a: <b>${escapeHtml(addedByDisplay)}</b></span>`);
   }
   const infoHtml = infoParts.length
     ? `<span class="info-line small" id="info-${item.id}">${infoParts.join(' ')}</span>`
@@ -326,21 +366,30 @@ function renderItem(item, isShare = window.IS_SHARE, showEditOnly = false) {
   let actionButtons = '';
 
   if (canEditListItem) {
+    const dragHandleButton = window.isSorting
+      ? `<button type="button" class="${iconBtn} drag-handle" title="Przesuń produkt" aria-label="Przesuń produkt" ${isArchived ? 'disabled' : ''}>☰</button>`
+      : '';
+
     actionButtons += `
-      <button type="button" class="${iconBtn} drag-handle" title="Przesuń produkt" aria-label="Przesuń produkt" ${isArchived ? 'disabled' : ''}>☰</button>
-      <button type="button" class="${iconBtn}" ${isArchived ? 'disabled' : `onclick="editItem(${item.id}, ${nameForEdit}, ${quantity})"`}>✏️</button>
+      ${dragHandleButton}
+      <button type="button" class="${iconBtn}" ${isArchived ? 'disabled' : `onclick='openEditItemModal(event, ${item.id}, ${JSON.stringify(String(item.name || ''))}, ${quantity})'`}>✏️</button>
       <button type="button" class="${iconBtn}" ${isArchived ? 'disabled' : `onclick="deleteItem(${item.id})"`}>🗑️</button>`;
   }
 
   if (item.not_purchased) {
     actionButtons += `
-      <button type="button" class="${wideBtn}" ${isArchived ? 'disabled' : `onclick="unmarkNotPurchased(${item.id})"`}>✅ Przywróć</button>`;
+      <button type="button" class="${wideBtn}" ${isArchived ? 'disabled' : `onclick="unmarkNotPurchased(${item.id})"`}>Przywróć</button>`;
   } else if (!isShare || canShowShareActions || isOwner) {
     actionButtons += `
       <button type="button" class="${iconBtn}" ${canMarkNotPurchased ? `onclick="markNotPurchasedModal(event, ${item.id})"` : 'disabled'}>⚠️</button>`;
   }
 
-  if (canShowShareActions) {
+  if (temporaryShareUndo) {
+    actionButtons += `
+      <button type="button" class="${iconBtn} shopping-action-btn--countdown" disabled data-countdown-for="${item.id}">${countdownSeconds}s</button>
+      <button type="button" class="${iconBtn}" ${isArchived ? 'disabled' : `onclick='openEditItemModal(event, ${item.id}, ${nameForEdit}, ${quantity})'`}>✏️</button>
+      <button type="button" class="${iconBtn}" ${isArchived ? 'disabled' : `onclick="deleteItem(${item.id})"`}>🗑️</button>`;
+  } else if (canShowShareActions) {
     actionButtons += `
       <button type="button" class="${iconBtn}" ${isArchived ? 'disabled' : `onclick="openNoteModal(event, ${item.id})"`}>📝</button>`;
   }

shopping_app/static/js/live.js

@@ -13,7 +13,7 @@ function toggleEmptyPlaceholder() {
     const li = document.createElement('li');
     li.id = 'empty-placeholder';
     li.className = 'list-group-item bg-dark text-secondary text-center w-100';
-    li.textContent = 'Brak produktów w tej liście.';
+    li.textContent = 'Brak produktów w tej liście.';
     list.appendChild(li);
   } else if (hasRealItems && placeholder) {
     placeholder.remove();
@@ -139,45 +139,48 @@ function setupList(listId, username) {
       note: ''
     };
 
-    const li = renderItem(item, window.IS_SHARE, true);
+    const isOwnFreshShareItem = Boolean(
+      window.IS_SHARE &&
+      data.added_by &&
+      window.CURRENT_LIST_USERNAME &&
+      String(data.added_by) === String(window.CURRENT_LIST_USERNAME)
+    );
+
+    const li = renderItem(
+      item,
+      window.IS_SHARE,
+      isOwnFreshShareItem ? { temporaryShareUndo: true, countdownSeconds: 15 } : false
+    );
+
     document.getElementById('items').appendChild(li);
     toggleEmptyPlaceholder();
     updateProgressBar();
 
-    if (window.IS_SHARE) {
-      const countdownId = `countdown-${data.id}`;
-      const countdownBtn = document.createElement('button');
-      countdownBtn.type = 'button';
-      countdownBtn.className = 'btn btn-outline-warning';
-      countdownBtn.id = countdownId;
-      countdownBtn.disabled = true;
-      countdownBtn.textContent = '15s';
-
-      const btnGroup = li.querySelector('.btn-group');
-      if (btnGroup) {
-        btnGroup.prepend(countdownBtn);
-      }
-
+    if (isOwnFreshShareItem) {
       let seconds = 15;
       const intervalId = setInterval(() => {
-        const el = document.getElementById(countdownId);
-        if (el) {
-          seconds--;
-          el.textContent = `${seconds}s`;
-          if (seconds <= 0) {
-            el.remove();
-            clearInterval(intervalId);
-          }
-        } else {
+        const currentItem = document.getElementById(`item-${data.id}`);
+        const countdownEl = currentItem?.querySelector(`[data-countdown-for="${data.id}"]`);
+
+        if (!currentItem || !countdownEl) {
           clearInterval(intervalId);
+          return;
         }
+
+        seconds -= 1;
+        if (seconds <= 0) {
+          clearInterval(intervalId);
+          return;
+        }
+
+        countdownEl.textContent = `${seconds}s`;
       }, 1000);
 
       setTimeout(() => {
+        clearInterval(intervalId);
         const existing = document.getElementById(`item-${data.id}`);
         if (existing) {
-          const updated = renderItem(item, window.IS_SHARE);
-          existing.replaceWith(updated);
+          existing.replaceWith(renderItem(item, window.IS_SHARE));
         }
       }, 15000);
     }
@@ -203,7 +206,7 @@ function setupList(listId, username) {
 
     const progressTitle = document.getElementById('progress-title');
     if (progressTitle) {
-      progressTitle.textContent = `📊 Postęp listy — ${data.purchased_count}/${data.total_count} kupionych (${Math.round(data.percent)}%)`;
+      progressTitle.textContent = `Postęp listy — ${data.purchased_count}/${data.total_count} kupionych (${Math.round(data.percent)}%)`;
     }
   });
 
@@ -218,7 +221,7 @@ function setupList(listId, username) {
       window.currentItems[idx].name = data.new_name;
       window.currentItems[idx].quantity = data.new_quantity;
 
-      const newItem = renderItem(window.currentItems[idx], true);
+      const newItem = renderItem(window.currentItems[idx], window.IS_SHARE);
       const oldItem = document.getElementById(`item-${data.item_id}`);
       if (oldItem && newItem) {
         oldItem.replaceWith(newItem);
@@ -234,6 +237,7 @@ function setupList(listId, username) {
   // --- WAŻNE: zapisz dane do reconnect ---
   window.LIST_ID = listId;
   window.usernameForReconnect = username;
+  window.CURRENT_LIST_USERNAME = username;
 
 }
 

shopping_app/static/js/preview_list_modal.js

@@ -1,6 +1,69 @@
 document.addEventListener("DOMContentLoaded", function () {
     const modalElement = document.getElementById("productPreviewModal");
+    if (!modalElement || typeof bootstrap === "undefined") return;
+
     const modal = new bootstrap.Modal(modalElement);
+    const modalTitle = document.getElementById("previewModalLabel");
+    const productList = document.getElementById("product-list");
+
+    if (!modalTitle || !productList) return;
+
+    const renderState = (message, extraClass = "text-white") => {
+        productList.innerHTML = "";
+
+        const wrapper = document.createElement("div");
+        wrapper.className = "preview-modal-items";
+
+        const item = document.createElement("div");
+        item.className = `preview-modal-list-item ${extraClass}`.trim();
+        item.textContent = message;
+
+        wrapper.appendChild(item);
+        productList.appendChild(wrapper);
+    };
+
+    const createSection = (titleText) => {
+        const section = document.createElement("section");
+        section.className = "preview-product-section";
+
+        const title = document.createElement("h6");
+        title.className = "preview-product-section-title";
+        title.textContent = titleText;
+
+        const items = document.createElement("div");
+        items.className = "preview-modal-items";
+
+        section.appendChild(title);
+        section.appendChild(items);
+
+        return { section, items };
+    };
+
+    const createItem = (itemData) => {
+        const row = document.createElement("div");
+        row.className = "preview-modal-list-item";
+
+        const name = document.createElement("span");
+        name.className = "preview-modal-list-item__name";
+        name.textContent = itemData.name;
+
+        const badge = document.createElement("span");
+        badge.className = "badge";
+
+        if (itemData.purchased) {
+            badge.classList.add("bg-success");
+        } else if (itemData.not_purchased) {
+            badge.classList.add("bg-warning", "text-dark");
+        } else {
+            badge.classList.add("bg-secondary");
+        }
+
+        badge.textContent = `x${itemData.quantity}`;
+
+        row.appendChild(name);
+        row.appendChild(badge);
+        return row;
+    };
 
     modalElement.addEventListener("hidden.bs.modal", function () {
         document.querySelectorAll(".modal-backdrop").forEach((el) => el.remove());
@@ -11,101 +74,66 @@ document.addEventListener("DOMContentLoaded", function () {
     document.querySelectorAll(".preview-btn").forEach((btn) => {
         btn.addEventListener("click", async () => {
             const listId = btn.dataset.listId;
-            const modalTitle = document.getElementById("previewModalLabel");
-            const productList = document.getElementById("product-list");
 
             modalTitle.textContent = "Ładowanie...";
-            productList.innerHTML = `
-        <li class="list-group-item bg-dark text-white">
-          ⏳ Ładowanie produktów...
-        </li>`;
-
+            renderState("⏳ Ładowanie produktów...");
             modal.show();
 
             try {
                 const res = await fetch(`/admin/list_items/${listId}`);
+                if (!res.ok) {
+                    throw new Error(`HTTP ${res.status}`);
+                }
+
                 const data = await res.json();
+                const totalCount = Number(data.total_count || 0);
+                const purchasedCount = Number(data.purchased_count || 0);
+                const totalExpense = Number(data.total_expense || 0);
+                const percent = totalCount > 0 ? Math.round((purchasedCount / totalCount) * 100) : 0;
 
                 modalTitle.textContent = `🛒 ${data.title}`;
                 productList.innerHTML = "";
 
-                // 🔢 PODSUMOWANIE
                 const summary = document.createElement("div");
-                summary.className = "mb-3";
-
-                const percent =
-                    data.total_count > 0
-                        ? Math.round((data.purchased_count / data.total_count) * 100)
-                        : 0;
-
+                summary.className = "preview-product-summary";
                 summary.innerHTML = `
-          <p class="mb-1">📦 <strong>${data.total_count}</strong> produktów</p>
-          <p class="mb-1">✅ Kupione: <strong>${data.purchased_count}</strong> (${percent}%)</p>
-          <p class="mb-1">💸 Wydatek: <strong>${data.total_expense.toFixed(2)} zł</strong></p>
-          <hr class="my-2">
-        `;
+                    <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>`;
                 productList.appendChild(summary);
 
-                // 🛒 LISTY PRODUKTÓW
-                const purchasedList = document.createElement("ul");
-                purchasedList.className = "list-group list-group-flush mb-3";
-
-                const notPurchasedList = document.createElement("ul");
-                notPurchasedList.className = "list-group list-group-flush";
+                const purchased = createSection("✔️ Kupione");
+                const pending = createSection("🚫 Niekupione / Nieoznaczone");
 
                 let hasPurchased = false;
-                let hasUnpurchased = false;
+                let hasPending = false;
 
-                data.items.forEach((item) => {
-                    const li = document.createElement("li");
-                    li.className =
-                        "list-group-item bg-dark text-white d-flex justify-content-between";
-                    li.innerHTML = `
-            <span>${item.name}</span>
-            <span class="badge ${item.purchased
-                            ? "bg-success"
-                            : item.not_purchased
-                                ? "bg-warning text-dark"
-                                : "bg-secondary"
-                        }">
-              x${item.quantity}
-            </span>`;
+                (data.items || []).forEach((item) => {
+                    const row = createItem(item);
 
                     if (item.purchased) {
-                        purchasedList.appendChild(li);
+                        purchased.items.appendChild(row);
                         hasPurchased = true;
                     } else {
-                        notPurchasedList.appendChild(li);
-                        hasUnpurchased = true;
+                        pending.items.appendChild(row);
+                        hasPending = true;
                     }
                 });
 
                 if (hasPurchased) {
-                    const h5 = document.createElement("h6");
-                    h5.textContent = "✔️ Kupione";
-                    productList.appendChild(h5);
-                    productList.appendChild(purchasedList);
+                    productList.appendChild(purchased.section);
                 }
 
-                if (hasUnpurchased) {
-                    const h5 = document.createElement("h6");
-                    h5.textContent = "🚫 Niekupione / Nieoznaczone";
-                    productList.appendChild(h5);
-                    productList.appendChild(notPurchasedList);
+                if (hasPending) {
+                    productList.appendChild(pending.section);
                 }
 
-                if (!hasPurchased && !hasUnpurchased) {
-                    productList.innerHTML = `
-            <li class="list-group-item bg-dark text-muted fst-italic">
-              Brak produktów
-            </li>`;
+                if (!hasPurchased && !hasPending) {
+                    renderState("Brak produktów", "text-muted fst-italic");
                 }
-            } catch (err) {
+            } catch (error) {
                 modalTitle.textContent = "Błąd";
-                productList.innerHTML = `
-          <li class="list-group-item bg-dark text-danger">
-            ❌ Błąd podczas ładowania
-          </li>`;
+                renderState("❌ Błąd podczas ładowania", "text-danger");
             }
         });
     });

shopping_app/static/js/sockets.js

@@ -126,6 +126,9 @@ socket.on('full_list', function (data) {
 
   window.currentItems = data.items;
   updateListSmoothly(data.items);
+  if (typeof window.syncSortModeUI === 'function') {
+    window.syncSortModeUI();
+  }
   toggleEmptyPlaceholder();
 
   if (didReceiveFirstFullList && isDifferent) {

shopping_app/static/js/sort_mode.js

@@ -1,21 +1,52 @@
 let sortable = null;
-let isSorting = false;
+window.isSorting = false;
+
+function syncSortModeUI() {
+    const active = !!window.isSorting;
+    const btn = document.getElementById('sort-toggle-btn');
+    const itemsContainer = document.getElementById('items');
+
+    document.body.classList.toggle('sorting-active', active);
+
+    if (btn) {
+        if (active) {
+            btn.textContent = '✔️ Zakończ sortowanie';
+            btn.classList.remove('btn-outline-warning');
+            btn.classList.add('btn-outline-success');
+        } else {
+            btn.textContent = '✳️ Zmień kolejność';
+            btn.classList.remove('btn-outline-success');
+            btn.classList.add('btn-outline-warning');
+        }
+    }
+
+    if (itemsContainer && window.currentItems) {
+        updateListSmoothly(window.currentItems);
+    }
+
+    document.querySelectorAll('.drag-handle').forEach(handle => {
+        handle.hidden = !active;
+        handle.setAttribute('aria-hidden', active ? 'false' : 'true');
+    });
+}
 
 function enableSortMode() {
-    if (isSorting) return;
-    isSorting = true;
-    window.isSorting = true;
+    if (window.isSorting) return;
 
     const itemsContainer = document.getElementById('items');
     const listId = window.LIST_ID;
     if (!itemsContainer || !listId) return;
 
-    if (window.currentItems) {
-        updateListSmoothly(window.currentItems);
-    }
+    window.isSorting = true;
+    syncSortModeUI();
 
     setTimeout(() => {
-        if (sortable) sortable.destroy();
+        if (!window.isSorting) return;
+
+        if (sortable) {
+            sortable.destroy();
+            sortable = null;
+        }
 
         sortable = Sortable.create(itemsContainer, {
             animation: 150,
@@ -25,7 +56,7 @@ function enableSortMode() {
             preventOnFilter: false,
             onEnd: () => {
                 const order = Array.from(itemsContainer.children)
-                    .map(li => parseInt(li.id.replace('item-', '')))
+                    .map(li => parseInt(li.id.replace('item-', ''), 10))
                     .filter(id => !isNaN(id));
 
                 fetch('/reorder_items', {
@@ -36,16 +67,14 @@ function enableSortMode() {
                     showToast('Zapisano nową kolejność', 'success');
 
                     if (window.currentItems) {
-                        window.currentItems = order.map(id =>
-                            window.currentItems.find(item => item.id === id)
-                        );
+                        window.currentItems = order
+                            .map(id => window.currentItems.find(item => item.id === id))
+                            .filter(Boolean);
                         updateListSmoothly(window.currentItems);
                     }
                 });
             }
         });
-
-        updateSortButtonUI(true);
     }, 50);
 }
 
@@ -55,39 +84,22 @@ function disableSortMode() {
         sortable = null;
     }
 
-    isSorting = false;
     window.isSorting = false;
-    if (window.currentItems) {
-        updateListSmoothly(window.currentItems);
-    }
-
-    updateSortButtonUI(false);
-
+    syncSortModeUI();
 }
 
 function toggleSortMode() {
-    isSorting ? disableSortMode() : enableSortMode();
-}
-
-function updateSortButtonUI(active) {
-    const btn = document.getElementById('sort-toggle-btn');
-    document.body.classList.toggle('sorting-active', !!active);
-    if (!btn) return;
-
-    if (active) {
-        btn.textContent = '✔️ Zakończ sortowanie';
-        btn.classList.remove('btn-outline-warning');
-        btn.classList.add('btn-outline-success');
+    if (window.isSorting) {
+        disableSortMode();
     } else {
-        btn.textContent = '✳️ Zmień kolejność';
-        btn.classList.remove('btn-outline-success');
-        btn.classList.add('btn-outline-warning');
+        enableSortMode();
     }
 }
 
+window.toggleSortMode = toggleSortMode;
+window.syncSortModeUI = syncSortModeUI;
+
 document.addEventListener('DOMContentLoaded', () => {
-    isSorting = false;
     window.isSorting = false;
-    document.body.classList.remove('sorting-active');
-    updateSortButtonUI(false);
+    syncSortModeUI();
 });

shopping_app/templates/_list_progress.html

@@ -0,0 +1,33 @@
+{% set total_count = total_count or 0 %}
+{% set purchased_count = purchased_count or 0 %}
+{% set not_purchased_count = not_purchased_count or 0 %}
+{% set accounted_count = purchased_count + not_purchased_count %}
+{% set remaining_count = (total_count - accounted_count) if total_count > accounted_count else 0 %}
+
+{% set percent = ((purchased_count / total_count) * 100) if total_count > 0 else 0 %}
+{% set purchased_percent = ((purchased_count / total_count) * 100) if total_count > 0 else 0 %}
+{% set not_purchased_percent = ((not_purchased_count / total_count) * 100) if total_count > 0 else 0 %}
+{% set remaining_percent = ((remaining_count / total_count) * 100) if total_count > 0 else 0 %}
+
+<div class="main-list-progress-wrap mt-2">
+  <div class="main-list-progress progress progress-dark progress-thin position-relative"
+       aria-label="Postęp listy {{ purchased_count }} z {{ total_count }} kupionych">
+    <div class="progress-bar bg-success" role="progressbar"
+         style="width: {{ '%.6f'|format(purchased_percent) }}%"
+         aria-valuemin="0" aria-valuemax="100"
+         aria-valuenow="{{ percent|round(0)|int }}"></div>
+
+    <div class="progress-bar bg-warning" role="progressbar"
+         style="width: {{ '%.6f'|format(not_purchased_percent) }}%"
+         aria-valuemin="0" aria-valuemax="100"></div>
+
+    <div class="progress-bar bg-transparent" role="progressbar"
+         style="width: {{ '%.6f'|format(remaining_percent) }}%"
+         aria-valuemin="0" aria-valuemax="100"></div>
+
+    <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 %}
+    </span>
+  </div>
+</div>

shopping_app/templates/admin/admin_panel.html

@@ -328,7 +328,7 @@
           <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
         </div>
         <div class="modal-body">
-          <ul id="product-list" class="list-group list-group-flush"></ul>
+          <div id="product-list" class="preview-product-list"></div>
         </div>
       </div>
     </div>
@@ -341,7 +341,7 @@
       checkboxes.forEach(cb => cb.checked = this.checked);
     });
   </script>
-  <script src="{{ url_for('static_bp.serve_js', filename='preview_list_modal.js') }}?v={{ APP_VERSION }}"></script>
+  <script src="{{ static_asset_url('static_bp.serve_js', 'preview_list_modal.js') }}?v=3"></script>
   {% endblock %}
 
   {% endblock %}

shopping_app/templates/admin/edit_categories.html

@@ -137,7 +137,7 @@
                     aria-label="Zamknij"></button>
             </div>
             <div class="modal-body">
-                <ul id="product-list" class="list-group list-group-flush"></ul>
+                <div id="product-list" class="preview-product-list"></div>
             </div>
         </div>
     </div>
@@ -146,6 +146,6 @@
 {% endblock %}
 
 {% block scripts %}
-<script src="{{ url_for('static_bp.serve_js', filename='preview_list_modal.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='categories_select_admin.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'preview_list_modal.js') }}?v=3"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'categories_select_admin.js') }}"></script>
 {% endblock %}

shopping_app/templates/admin/edit_list.html

@@ -303,5 +303,5 @@
 
 {% endblock %}
 {% block scripts %}
-<script src="{{ url_for('static_bp.serve_js', filename='select.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'select.js') }}"></script>
 {% endblock %}

shopping_app/templates/admin/list_products.html

@@ -170,8 +170,8 @@
 </div>
 
 {% block scripts %}
-<script src="{{ url_for('static_bp.serve_js', filename='product_suggestion.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='table_search.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'product_suggestion.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'table_search.js') }}"></script>
 {% endblock %}
 
 {% endblock %}

shopping_app/templates/admin/lists_access.html

@@ -181,7 +181,7 @@
 
 {% endblock %}
 {% block scripts %}
-<script src="{{ url_for('static_bp.serve_js', filename='access_users.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='lists_access.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'access_users.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'lists_access.js') }}"></script>
 
 {% endblock %}

shopping_app/templates/admin/receipts.html

@@ -224,8 +224,8 @@
     endpoint: "/admin/crop_receipt"
   };
 </script>
-<script src="{{ url_for('static_bp.serve_js', filename='receipt_crop.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='receipt_crop_logic.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'receipt_crop.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'receipt_crop_logic.js') }}"></script>
 {% endblock %}
 
 {% endblock %}

shopping_app/templates/admin/settings.html

@@ -153,6 +153,6 @@
 {% endblock %}
 
 {% block scripts %}
-<link rel="stylesheet" href="{{ url_for('static_bp.serve_css', filename='admin_settings.css') }}?v={{ APP_VERSION }}">
-<script src="{{ url_for('static_bp.serve_js', filename='admin_settings.js') }}?v={{ APP_VERSION }}"></script>
+<link rel="stylesheet" href="{{ static_asset_url('static_bp.serve_css', 'admin_settings.css') }}">
+<script src="{{ static_asset_url('static_bp.serve_js', 'admin_settings.js') }}"></script>
 {% endblock %}

shopping_app/templates/admin/user_management.html

@@ -121,7 +121,7 @@
 </div>
 
 {% block scripts %}
-<script src="{{ url_for('static_bp.serve_js', filename='user_management.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'user_management.js') }}"></script>
 {% endblock %}
 
 

shopping_app/templates/base.html

@@ -2,29 +2,32 @@
 <html lang="pl">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="theme-color" content="#07111f">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <title>{% block title %}Live Lista Zakupów{% endblock %}</title>
   <link rel="icon" type="image/svg+xml" href="{{ url_for('favicon') }}">
 
-  <link href="{{ url_for('static_bp.serve_css_lib', filename='bootstrap.min.css') }}?v={{ APP_VERSION }}" rel="stylesheet">
-  <link href="{{ url_for('static_bp.serve_css', filename='style.css') }}?v={{ APP_VERSION }}" rel="stylesheet">
+  <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">
 
   {% set exclude_paths = ['/system-auth'] %}
   {% if (exclude_paths | select("in", request.path) | list | length == 0)
   and has_authorized_cookie
   and not is_blocked %}
-  <link href="{{ url_for('static_bp.serve_css_lib', filename='glightbox.min.css') }}?v={{ APP_VERSION }}" rel="stylesheet">
-  <link href="{{ url_for('static_bp.serve_css_lib', filename='sort_table.min.css') }}?v={{ APP_VERSION }}" rel="stylesheet">
+  <link href="{{ static_asset_url('static_bp.serve_css_lib', 'glightbox.min.css') }}" rel="stylesheet">
+  <link href="{{ static_asset_url('static_bp.serve_css_lib', 'sort_table.min.css') }}" rel="stylesheet">
   {% endif %}
 
   {% set substrings_cropper = ['/admin/receipts', '/edit_my_list'] %}
   {% if substrings_cropper | select("in", request.path) | list | length > 0 %}
-  <link href="{{ url_for('static_bp.serve_css_lib', filename='cropper.min.css') }}?v={{ APP_VERSION }}" rel="stylesheet">
+  <link href="{{ static_asset_url('static_bp.serve_css_lib', 'cropper.min.css') }}" rel="stylesheet">
   {% endif %}
 
   {% set substrings_tomselect = ['/edit_my_list', '/admin/edit_list', '/admin/edit_categories'] %}
   {% if substrings_tomselect | select("in", request.path) | list | length > 0 %}
-  <link href="{{ url_for('static_bp.serve_css_lib', filename='tom-select.bootstrap5.min.css') }}?v={{ APP_VERSION }}" rel="stylesheet">
+  <link href="{{ static_asset_url('static_bp.serve_css_lib', 'tom-select.bootstrap5.min.css') }}" rel="stylesheet">
   {% endif %}
 </head>
 
@@ -58,7 +61,23 @@
           {% endif %}
         </div>
 
-        <div class="dropdown d-lg-none app-mobile-menu ms-auto">
+        <div class="d-lg-none app-navbar__meta app-navbar__meta--mobile ms-auto">
+          {% if has_authorized_cookie and not is_blocked %}
+            {% if current_user.is_authenticated %}
+            <div class="app-user-chip app-user-chip--mobile">
+              <span class="app-user-chip__label">Zalogowany</span>
+              <span class="badge rounded-pill text-bg-success">{{ current_user.username }}</span>
+            </div>
+            {% else %}
+            <div class="app-user-chip app-user-chip--guest app-user-chip--mobile">
+              <span class="app-user-chip__label">Tryb</span>
+              <span class="badge rounded-pill text-bg-info">gość</span>
+            </div>
+            {% endif %}
+          {% endif %}
+        </div>
+
+        <div class="dropdown d-lg-none app-mobile-menu">
           <button class="btn app-navbar-toggler app-mobile-menu__toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Otwórz menu">
             <span class="navbar-toggler-icon"></span>
           </button>
@@ -116,14 +135,13 @@
         <p class="mb-1">
           <a href="https://git.linuxiarz.pl/gru/lista_zakupowa_live" target="_blank" class="link-success text-decoration-none">
             source code
-          </a>
+          </a> · v{{ APP_VERSION }}
         </p>
-        <div class="small">v{{ APP_VERSION }}</div>
       </div>
     </div>
   </footer>
 
-  <script src="{{ url_for('static_bp.serve_js_lib', filename='bootstrap.bundle.min.js') }}"></script>
+  <script src="{{ static_asset_url('static_bp.serve_js_lib', 'bootstrap.bundle.min.js') }}"></script>
 
   {% if not is_blocked %}
   <script>
@@ -147,16 +165,16 @@
   </script>
 
   {% if request.endpoint != 'system_auth' %}
-  <script src="{{ url_for('static_bp.serve_js_lib', filename='glightbox.min.js') }}?v={{ APP_VERSION }}"></script>
-  <script src="{{ url_for('static_bp.serve_js_lib', filename='socket.io.min.js') }}?v={{ APP_VERSION }}"></script>
-  <script src="{{ url_for('static_bp.serve_js_lib', filename='sort_table.min.js') }}?v={{ APP_VERSION }}"></script>
-  <script src="{{ url_for('static_bp.serve_js', filename='functions.js') }}?v={{ APP_VERSION }}"></script>
-  <script src="{{ url_for('static_bp.serve_js', filename='live.js') }}?v={{ APP_VERSION }}"></script>
-  <script src="{{ url_for('static_bp.serve_js', filename='sockets.js') }}?v={{ APP_VERSION }}"></script>
+  <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>
+  <script src="{{ static_asset_url('static_bp.serve_js_lib', 'sort_table.min.js') }}"></script>
+  <script src="{{ static_asset_url('static_bp.serve_js', 'functions.js') }}"></script>
+  <script src="{{ static_asset_url('static_bp.serve_js', 'live.js') }}"></script>
+  <script src="{{ static_asset_url('static_bp.serve_js', 'sockets.js') }}"></script>
   {% endif %}
 
-  <script src="{{ url_for('static_bp.serve_js', filename='toasts.js') }}?v={{ APP_VERSION }}"></script>
-  <script src="{{ url_for('static_bp.serve_js', filename='app_ui.js') }}?v={{ APP_VERSION }}"></script>
+  <script src="{{ static_asset_url('static_bp.serve_js', 'toasts.js') }}"></script>
+  <script src="{{ static_asset_url('static_bp.serve_js', 'app_ui.js') }}"></script>
   <script>
     if (typeof GLightbox === 'function') {
       let lightbox = GLightbox({ selector: '.glightbox' });
@@ -165,12 +183,12 @@
 
   {% set substrings = ['/admin/receipts', '/edit_my_list'] %}
   {% if substrings | select("in", request.path) | list | length > 0 %}
-  <script src="{{ url_for('static_bp.serve_js_lib', filename='cropper.min.js') }}?v={{ APP_VERSION }}"></script>
+  <script src="{{ static_asset_url('static_bp.serve_js_lib', 'cropper.min.js') }}"></script>
   {% endif %}
 
   {% set substrings = ['/edit_my_list', '/admin/edit_list', '/admin/edit_categories'] %}
   {% if substrings | select("in", request.path) | list | length > 0 %}
-  <script src="{{ url_for('static_bp.serve_js_lib', filename='tom-select.complete.min.js') }}?v={{ APP_VERSION }}"></script>
+  <script src="{{ static_asset_url('static_bp.serve_js_lib', 'tom-select.complete.min.js') }}"></script>
   {% endif %}
   {% endif %}
 

shopping_app/templates/edit_my_list.html

@@ -260,9 +260,9 @@
     endpoint: "/user_crop_receipt"
   };
 </script>
-<script src="{{ url_for('static_bp.serve_js', filename='confirm_delete.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='receipt_crop.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='receipt_crop_logic.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='select.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='access_users.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'confirm_delete.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'receipt_crop.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'receipt_crop_logic.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'select.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'access_users.js') }}"></script>
 {% endblock %}

shopping_app/templates/expenses.html

@@ -61,18 +61,18 @@
       <div class="tab-pane fade show active" id="listsTab" role="tabpanel">
         <div class="card bg-dark text-white mb-4">
           <div class="card-body">
-            <div class="d-flex flex-wrap gap-2 mb-3 justify-content-center">
-              <div class="btn-group btn-group-sm" role="group">
-                <button class="btn btn-outline-light range-btn" data-range="day">🗓️ Dzień</button>
-                <button class="btn btn-outline-light range-btn" data-range="week">📆 Tydzień</button>
-                <button class="btn btn-outline-light range-btn active" data-range="month">📅 Miesiąc</button>
-                <button class="btn btn-outline-light range-btn" data-range="year">📈 Rok</button>
-                <button class="btn btn-outline-light range-btn" data-range="all">🌐 Wszystko</button>
+            <div class="d-flex flex-wrap gap-2 mb-3 justify-content-center expenses-range-toolbar expenses-table-toolbar">
+              <div class="btn-group btn-group-sm expenses-range-group" role="group">
+                <button class="btn btn-outline-light range-btn table-range-btn" data-range="day">🗓️ Dzień</button>
+                <button class="btn btn-outline-light range-btn table-range-btn" data-range="week">📆 Tydzień</button>
+                <button class="btn btn-outline-light range-btn table-range-btn active" data-range="month">📅 Miesiąc</button>
+                <button class="btn btn-outline-light range-btn table-range-btn" data-range="year">📈 Rok</button>
+                <button class="btn btn-outline-light range-btn table-range-btn" data-range="all">🌐 Wszystko</button>
               </div>
             </div>
 
             <div class="d-flex justify-content-center mb-3">
-              <div class="input-group input-group-sm w-100" style="max-width: 570px;">
+              <div class="input-group input-group-sm w-100 expenses-date-range" style="max-width: 570px;">
                 <span class="input-group-text bg-secondary text-white border-secondary">Od</span>
                 <input type="date" class="form-control bg-dark text-white border-secondary flex-grow-1"
                   id="customStart">
@@ -169,20 +169,20 @@
           </div>
         </div>
 
-        <div class="d-flex flex-wrap gap-2 mb-3 justify-content-center">
-          <div class="btn-group btn-group-sm" role="group">
-            <button class="btn btn-outline-light range-btn" data-range="last30days">🗓️ Ostatnie 30
+        <div class="d-flex flex-wrap gap-2 mb-3 justify-content-center expenses-range-toolbar expenses-chart-toolbar">
+          <div class="btn-group btn-group-sm expenses-range-group" role="group">
+            <button class="btn btn-outline-light range-btn chart-range-btn" data-range="last30days">🗓️ Ostatnie 30
               dni</button>
-            <button class="btn btn-outline-light range-btn" data-range="currentmonth">📅 Bieżący miesiąc</button>
-            <button class="btn btn-outline-light range-btn" data-range="monthly">📆 Miesięczne</button>
-            <button class="btn btn-outline-light range-btn" data-range="quarterly">📊 Kwartalne</button>
-            <button class="btn btn-outline-light range-btn" data-range="halfyearly">🗓️ Półroczne</button>
-            <button class="btn btn-outline-light range-btn" data-range="yearly">📈 Roczne</button>
+            <button class="btn btn-outline-light range-btn chart-range-btn" data-range="currentmonth">📅 Bieżący miesiąc</button>
+            <button class="btn btn-outline-light range-btn chart-range-btn" data-range="monthly">📆 Miesięczne</button>
+            <button class="btn btn-outline-light range-btn chart-range-btn" data-range="quarterly">📊 Kwartalne</button>
+            <button class="btn btn-outline-light range-btn chart-range-btn" data-range="halfyearly">🗓️ Półroczne</button>
+            <button class="btn btn-outline-light range-btn chart-range-btn" data-range="yearly">📈 Roczne</button>
           </div>
         </div>
 
         <div class="d-flex justify-content-center mb-4">
-          <div class="input-group input-group-sm w-100" style="max-width: 570px;">
+          <div class="input-group input-group-sm w-100 expenses-date-range" style="max-width: 570px;">
             <span class="input-group-text bg-secondary text-white border-secondary">Od</span>
             <input type="date" class="form-control bg-dark text-white border-secondary flex-grow-1" id="startDate">
             <span class="input-group-text bg-secondary text-white border-secondary">Do</span>
@@ -213,13 +213,13 @@
 {% endblock %}
 
 {% block scripts %}
-<script src="{{ url_for('static_bp.serve_js_lib', filename='chart.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='show_all_expense.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='expense_chart.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='expense_table.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='expense_tab.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='select_all_table.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='chart_controls.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='modal_chart.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='download_chart.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js_lib', 'chart.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'show_all_expense.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'expense_chart.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'expense_table.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'expense_tab.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'select_all_table.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'chart_controls.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'modal_chart.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'download_chart.js') }}"></script>
 {% endblock %}

shopping_app/templates/list.html

@@ -32,7 +32,7 @@
 
 <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 zakupowy / odznaczania produktów
+  ✅ Otwórz tryb odznaczania
 </a>
 
 <div id="share-card" class="card bg-secondary bg-opacity-10 text-white mb-4">
@@ -68,10 +68,9 @@
 
 <!-- Progress bar (dynamic) -->
 <h5 id="progress-title" class="mb-2">
-  📊 Postęp listy —
-  <span id="purchased-count">{{ purchased_count }}</span>/
-  <span id="total-count">{{ total_count }}</span> kupionych
-  (<span id="percent-value">{{ percent|int }}</span>%)
+  Postęp listy —
+  <span id="purchased-count">{{ purchased_count }}</span>/<span id="total-count">{{ total_count }}</span> kupionych
+  (<span id="percent-value">{{ percent|round(0)|int }}</span>%)
 </h5>
 
 <div class="progress progress-dark position-relative">
@@ -83,7 +82,7 @@
     title="Pozostałe do kupienia"></div>
   <span id="progress-label" class="progress-label small fw-bold"></span>
 </div>
-
+<br>
 {% if total_expense > 0 %}
 <div id="total-expense2" class="text-success fw-bold mb-3">
   💸 Łącznie wydano: {{ '%.2f'|format(total_expense) }} PLN
@@ -122,23 +121,22 @@
             {% set info_parts = [] %}
             {% if item.note %}{% set _ = info_parts.append('<span class="text-danger">[ <b>' ~ item.note ~ '</b> ]</span>') %}{% endif %}
             {% if item.not_purchased_reason %}{% set _ = info_parts.append('<span class="text-dark">[ <b>Powód: ' ~ item.not_purchased_reason ~ '</b> ]</span>') %}{% endif %}
-            {% if item.added_by_display %}{% set _ = info_parts.append('<span class="text-info">[ Dodał/a: <b>' ~ item.added_by_display ~ '</b> ]</span>') %}{% endif %}
+            {% if item.added_by_display %}{% set _ = info_parts.append('<span class="item-added-by-meta">· dodał/a: <b>' ~ item.added_by_display ~ '</b></span>') %}{% endif %}
             {% if info_parts %}
             <span class="info-line small" id="info-{{ item.id }}">{{ info_parts | join(' ') | safe }}</span>
             {% endif %}
           </div>
           <div class="list-item-actions shopping-item-actions" role="group">
       {% if not is_share %}
-      <button type="button" class="btn btn-outline-light btn-sm shopping-action-btn drag-handle" title="Przesuń produkt" aria-label="Przesuń produkt" {% if list.is_archived %}disabled{% endif %}>☰</button>
       <button type="button" class="btn btn-outline-light btn-sm shopping-action-btn" {% if list.is_archived %}disabled{% else
-        %}onclick="editItem({{ item.id }}, '{{ item.name }}', {{ item.quantity or 1 }})" {% endif %}>✏️</button>
+        %}onclick='openEditItemModal(event, {{ item.id }}, {{ item.name|tojson }}, {{ item.quantity or 1 }})' {% endif %}>✏️</button>
       <button type="button" class="btn btn-outline-light btn-sm shopping-action-btn" {% if list.is_archived %}disabled{% else
         %}onclick="deleteItem({{ item.id }})" {% endif %}>🗑️</button>
       {% endif %}
 
       {% if item.not_purchased %}
       <button type="button" class="btn btn-outline-light btn-sm shopping-action-btn shopping-action-btn--wide" {% if list.is_archived %}disabled{% else
-        %}onclick="unmarkNotPurchased({{ item.id }})" {% endif %}>✅ Przywróć</button>
+        %}onclick="unmarkNotPurchased({{ item.id }})" {% endif %}>Przywróć</button>
       {% elif not item.not_purchased %}
       <button type="button" class="btn btn-outline-light btn-sm shopping-action-btn" {% if list.is_archived %}disabled{% else
         %}onclick="markNotPurchasedModal(event, {{ item.id }})" {% endif %}>⚠️</button>
@@ -154,33 +152,90 @@
   {% endfor %}
 </ul>
 
+<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">
+      <form id="editItemForm">
+        <div class="modal-header">
+          <h5 class="modal-title" id="editItemModalLabel">Edytuj produkt</h5>
+          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+        </div>
+        <div class="modal-body">
+          <input type="hidden" id="editItemId">
+          <div class="mb-3">
+            <label for="editItemName" class="form-label">Nazwa produktu</label>
+            <input type="text" id="editItemName" class="form-control bg-dark text-white border-secondary" maxlength="255" required>
+          </div>
+          <div>
+            <label for="editItemQuantity" class="form-label">Ilość</label>
+            <input type="number" id="editItemQuantity" class="form-control bg-dark text-white border-secondary" min="1" step="1" required>
+          </div>
+        </div>
+
+        <div class="modal-footer justify-content-end">
+          <div class="btn-group" role="group">
+            <button type="button" class="btn btn-sm btn-outline-light" data-bs-dismiss="modal">❌ Anuluj</button>
+            <button type="submit" class="btn btn-sm btn-outline-light"><span class="shopping-btn-icon" aria-hidden="true">💾</span><span class="shopping-btn-label">Zapisz</span></button>
+          </div>
+        </div>
+
+      </form>
+    </div>
+  </div>
+</div>
+
 {% if not list.is_archived %}
-<div class="list-action-block mb-3">
-  <div class="list-action-row mb-2">
-    <button class="btn btn-outline-light btn-sm list-action-row__btn" data-bs-toggle="modal" data-bs-target="#massAddModal">
-      Dodaj produkty masowo
+
+<div class="shopping-entry-card mb-3" aria-label="Sekcja dodawania produktu">
+  <div class="shopping-entry-card__label">➕ Dodaj produkt</div>
+  <div class="shopping-entry-card__hint">Wpisz nazwę produktu i ilość, potem kliknij Dodaj.</div>
+  <div class="input-group mb-0 shopping-compact-input-group shopping-product-input-group">
+    <input type="text" id="newItem" name="name"
+           class="form-control bg-dark text-white border-secondary shopping-product-name-input"
+           placeholder="Dodaj produkt" required>
+
+    <input type="number" id="newQuantity" name="quantity"
+           class="form-control bg-dark text-white border-secondary shopping-qty-input"
+           placeholder="Ilość" min="1" value="1">
+
+    <button type="button"
+            class="btn btn-outline-success share-submit-btn shopping-compact-submit"
+            onclick="addItem({{ list.id }})">
+      <span class="shopping-btn-icon" aria-hidden="true">➕</span>
+      <span class="shopping-btn-label">Dodaj</span>
     </button>
-    <form method="post" action="{{ url_for('create_template_from_user_list', list_id=list.id) }}" class="list-action-row__form">
-      <input type="hidden" name="template_name" value="{{ list.title }} - szablon">
-      <button type="submit" class="btn btn-outline-primary btn-sm list-action-row__btn">🧩 Zapisz jako szablon</button>
-    </form>
+  </div>
+</div>
+
+<div class="list-quick-actions mb-3" aria-label="Szybkie akcje listy">
+  <div class="list-quick-actions__header">
+    <div>
+      <div class="list-quick-actions__eyebrow">Szybkie akcje</div>
+      <div class="list-quick-actions__title">Dodawanie i zapis listy</div>
+    </div>
+    <div class="list-quick-actions__hint">Najczęściej używane akcje pod ręką.</div>
   </div>
 
-<div class="input-group mb-2 shopping-compact-input-group shopping-product-input-group">
-  <input type="text" id="newItem" name="name"
-         class="form-control bg-dark text-white border-secondary shopping-product-name-input"
-         placeholder="Dodaj produkt" required>
+  <div class="list-quick-actions__grid">
+    <button class="btn btn-outline-light list-quick-actions__action list-quick-actions__action--primary" data-bs-toggle="modal" data-bs-target="#massAddModal" type="button">
+      <span class="list-quick-actions__icon" aria-hidden="true">➕</span>
+      <span class="list-quick-actions__content">
+        <span class="list-quick-actions__label">Dodaj produkty masowo</span>
+        <span class="list-quick-actions__desc">Wklej kilka pozycji naraz i uzupełnij listę szybciej.</span>
+      </span>
+    </button>
 
-  <input type="number" id="newQuantity" name="quantity"
-         class="form-control bg-dark text-white border-secondary shopping-qty-input"
-         placeholder="Ilość" min="1" value="1">
-
-  <button type="button"
-          class="btn btn-outline-success share-submit-btn shopping-compact-submit"
-          onclick="addItem({{ list.id }})">
-    <span class="shopping-btn-icon" aria-hidden="true">➕</span>
-    <span class="shopping-btn-label">Dodaj</span>
-  </button>
+    <form method="post" action="{{ url_for('create_template_from_user_list', list_id=list.id) }}" class="list-quick-actions__form">
+      <input type="hidden" name="template_name" value="{{ list.title }} - szablon">
+      <button type="submit" class="btn btn-outline-primary list-quick-actions__action list-quick-actions__action--secondary">
+        <span class="list-quick-actions__icon" aria-hidden="true">🧩</span>
+        <span class="list-quick-actions__content">
+          <span class="list-quick-actions__label">Zapisz jako szablon</span>
+          <span class="list-quick-actions__desc">Zachowaj układ tej listy i użyj go ponownie.</span>
+        </span>
+      </button>
+    </form>
+  </div>
 </div>
 {% endif %}
 
@@ -191,7 +246,7 @@
       <h5 class="mb-0">🕘 Historia zmian listy</h5>
       <button class="btn btn-sm btn-outline-light" type="button" data-bs-toggle="collapse" data-bs-target="#activityHistory" aria-expanded="false" aria-controls="activityHistory">Pokaż / ukryj</button>
     </div>
-    <div class="small text-secondary mb-3">Domyślnie ukryte. Zdarzeń: {{ activity_logs|length }}</div>
+    <div class="small text-secondary mb-3">Rozwiń aby zobaczyć | Zdarzeń: {{ activity_logs|length }}</div>
     <div class="collapse" id="activityHistory">
       <div class="table-responsive">
         <table class="table table-dark table-sm align-middle">
@@ -214,23 +269,56 @@
 {% endif %}
 
 {% set receipt_pattern = 'list_' ~ list.id %}
-<hr>
-<h5 class="mt-4">📸 Paragony dodane do tej listy</h5>
 
-<div class="row g-3 mt-2" id="receiptGallery">
-  {% if receipts %}
-  {% for r in receipts %}
-  <div class="col-6 col-md-4 col-lg-3 text-center">
-    <a href="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}" class="glightbox"
-      data-gallery="receipt-gallery">
-      <img src="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}"
-        class="img-fluid rounded shadow-sm border border-secondary" style="max-height: 200px; object-fit: cover;">
-    </a>
+<div class="card bg-dark text-white border-secondary shadow-sm mt-4">
+  <div class="card-body">
+    <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-2 mb-3">
+      <div>
+        <h5 class="mb-1">📄 Paragony dodane do tej listy</h5>
+        <p class="text-secondary small mb-0">
+          Tutaj możesz wygodnie przejrzeć wszystkie paragony przypisane do tej listy.
+        </p>
+      </div>
+      <div class="d-flex flex-wrap gap-2">
+        <span class="badge rounded-pill bg-secondary">{{ receipts|length }} plik{% if receipts|length != 1 %}i{% endif %}</span>
+        <span class="badge rounded-pill bg-info text-dark">Tylko podgląd</span>
+      </div>
+    </div>
+
+    <div class="border border-secondary rounded-3 p-3">
+      <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
+        <h6 class="mb-0">📸 Galeria paragonów</h6>
+        {% if receipts %}
+        <span class="text-secondary small">Kliknij miniaturę, aby otworzyć podgląd</span>
+        {% endif %}
+      </div>
+
+      <div class="row g-3" id="receiptGallery">
+        {% if receipts %}
+        {% for r in receipts %}
+        <div class="col-6 col-md-4 col-xl-3">
+          <a href="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}" class="glightbox text-decoration-none"
+            data-gallery="receipt-gallery">
+            <div class="card bg-black border-secondary h-100 overflow-hidden shadow-sm">
+              <img src="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}"
+                class="card-img-top img-fluid" style="height: 180px; object-fit: cover;" alt="Paragon {{ loop.index }}">
+              <div class="card-body p-2">
+                <div class="small text-truncate text-secondary">Paragon {{ loop.index }}</div>
+              </div>
+            </div>
+          </a>
+        </div>
+        {% endfor %}
+        {% else %}
+        <div class="col-12">
+          <div class="alert alert-info text-center mb-0" role="alert">
+            ℹ️ Brak wgranych paragonów do tej listy
+          </div>
+        </div>
+        {% endif %}
+      </div>
+    </div>
   </div>
-  {% endfor %}
-  {% else %}
-  <div class="alert alert-info text-center w-100" role="alert">ℹ️ Brak wgranych paragonów do tej listy</div>
-  {% endif %}
 </div>
 
 <!-- MODAL: KATEGORIA (pojedynczy wybór) -->
@@ -364,7 +452,7 @@
 </div>
 
 {% block scripts %}
-<script src="{{ url_for('static_bp.serve_js_lib', filename='Sortable.min.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js_lib', 'Sortable.min.js') }}"></script>
 <script>
   const isShare = document.getElementById('items').dataset.isShare === 'true';
   window.IS_SHARE = isShare;
@@ -372,13 +460,34 @@
   window.IS_ARCHIVED = {{ 'true' if list.is_archived else 'false' }};
   window.IS_OWNER = {{ 'true' if is_owner else 'false' }};
 </script>
-<script src="{{ url_for('static_bp.serve_js', filename='mass_add.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='receipt_upload.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='sort_mode.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='access_users.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='category_modal.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'mass_add.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'receipt_upload.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'sort_mode.js') }}"></script>
+<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>
   setupList({{ list.id }}, '{{ current_user.username if current_user.is_authenticated else 'Gość' }}');
+
+  document.addEventListener('DOMContentLoaded', function () {
+    const editItemForm = document.getElementById('editItemForm');
+    if (!editItemForm) return;
+
+    editItemForm.addEventListener('submit', function (event) {
+      event.preventDefault();
+
+      const itemId = parseInt(document.getElementById('editItemId').value, 10);
+      const itemName = document.getElementById('editItemName').value;
+      const itemQuantity = document.getElementById('editItemQuantity').value;
+
+      editItem(itemId, itemName, itemQuantity);
+
+      const modalEl = document.getElementById('editItemModal');
+      const modal = bootstrap.Modal.getInstance(modalEl);
+      if (modal) {
+        modal.hide();
+      }
+    });
+  });
 </script>
 {% endblock %}
 

shopping_app/templates/list_share.html

@@ -59,7 +59,7 @@
             {% set info_parts = [] %}
             {% if item.note %}{% set _ = info_parts.append('<span class="text-danger">[ <b>' ~ item.note ~ '</b> ]</span>') %}{% endif %}
             {% if item.not_purchased_reason %}{% set _ = info_parts.append('<span class="text-dark">[ <b>Powód: ' ~ item.not_purchased_reason ~ '</b> ]</span>') %}{% endif %}
-            {% if item.added_by_display %}{% set _ = info_parts.append('<span class="text-info">[ Dodał/a: <b>' ~ item.added_by_display ~ '</b> ]</span>') %}{% endif %}
+            {% if item.added_by_display %}{% set _ = info_parts.append('<span class="item-added-by-meta">· dodał/a: <b>' ~ item.added_by_display ~ '</b></span>') %}{% endif %}
             {% if info_parts %}
             <span class="info-line small" id="info-{{ item.id }}">{{ info_parts | join(' ') | safe }}</span>
             {% endif %}
@@ -68,7 +68,7 @@
       {% if item.not_purchased %}
       <button type="button" class="btn btn-outline-light btn-sm shopping-action-btn shopping-action-btn--wide" {% if list.is_archived %}disabled{% else %}
         onclick="unmarkNotPurchased({{ item.id }})" {% endif %}>
-        ✅ Przywróć
+        Przywróć
       </button>
       {% else %}
       <button type="button" class="btn btn-outline-light btn-sm shopping-action-btn" {% if list.is_archived %}disabled{% else %}
@@ -88,31 +88,55 @@
   </li>
   {% else %}
   <li id="empty-placeholder" class="list-group-item bg-dark text-secondary text-center w-100">
-    Brak produktów w tej liście.
+    Brak produktów w tej liście.
   </li>
   {% endfor %}
 </ul>
 
 {% if not list.is_archived %}
-<div class="input-group mb-2 shopping-compact-input-group shopping-product-input-group">
+<div class="shopping-entry-card mb-3" aria-label="Sekcja dodawania produktu">
+  <div class="shopping-entry-card__label">➕ Dodaj produkt</div>
+  <div class="shopping-entry-card__hint">Wpisz nazwę produktu i ilość, potem kliknij Dodaj.</div>
+  <div class="input-group mb-0 shopping-compact-input-group shopping-product-input-group">
   <input id="newItem" class="form-control bg-dark text-white border-secondary shopping-product-name-input" placeholder="Dodaj produkt" {% if
     not current_user.is_authenticated %}disabled{% endif %}>
   <input id="newQuantity" type="number" class="form-control bg-dark text-white border-secondary shopping-qty-input" placeholder="Ilość"
     min="1" value="1" {% if not current_user.is_authenticated %}disabled{% endif %}>
   <button onclick="addItem({{ list.id }})" class="btn btn-outline-success share-submit-btn shopping-compact-submit" {% if not
     current_user.is_authenticated %}disabled{% endif %}><span class="shopping-btn-icon" aria-hidden="true">➕</span><span class="shopping-btn-label">Dodaj</span></button>
+  </div>
 </div>
 {% endif %}
 
 {% if not list.is_archived %}
-<hr>
-<h5>💰 Dodaj wydatek</h5>
-<div class="input-group mb-2 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)">
-  <button onclick="submitExpense({{ list.id }})" class="btn btn-outline-primary share-submit-btn shopping-compact-submit"><span class="shopping-btn-icon" aria-hidden="true">💾</span><span class="shopping-btn-label">Zapisz</span></button>
-</div>{% endif %}
-<p id="total-expense2"><b>💸 Łącznie wydano:</b> {{ '%.2f'|format(total_expense) }} PLN</p>
+<div class="shopping-entry-card shopping-entry-card--expense mb-3" aria-label="Sekcja dodawania wydatku">
+  <div class="shopping-entry-card__label d-flex justify-content-between align-items-center">
+    <span>💰 Dodaj wydatek</span>
+
+    <span class="badge rounded-pill bg-success" id="total-expense2">
+      💸 Łączna suma: {{ '%.2f'|format(total_expense) }} PLN
+    </span>
+  </div>
+
+  <div class="shopping-entry-card__hint">Wpisz kwotę wydatku i kliknij Zapisz.</div>
+
+  <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)">
+
+    <button onclick="submitExpense({{ list.id }})"
+      class="btn btn-outline-primary share-submit-btn share-submit-btn--expense shopping-compact-submit">
+      <span class="shopping-btn-icon" aria-hidden="true">💾</span>
+      <span class="shopping-btn-label">Zapisz</span>
+    </button>
+  </div>
+</div>
+{% endif %}
+
+<p id="total-expense2" style="display: none;">
+  <b>💸 Łącznie wydano:</b> {{ '%.2f'|format(total_expense) }} PLN
+</p>
 
 <button id="toggleReceiptBtn" class="btn btn-outline-light mb-3 w-100 w-md-auto d-block mx-auto" type="button"
   data-bs-toggle="collapse" data-bs-target="#receiptSection" aria-expanded="false" aria-controls="receiptSection">
@@ -122,82 +146,143 @@
 <div class="collapse px-2 px-md-4" id="receiptSection">
   {% set receipt_pattern = 'list_' ~ list.id %}
 
-  <div class="mt-3 p-3 border border-secondary rounded bg-dark text-white 
-  {% if not receipts %}
-     d-none
-  {% endif %}" id="receiptAnalysisBlock">
+  <div class="receipt-section-stack d-flex flex-column gap-3 mt-3">
+    <div class="card bg-dark text-white border-secondary shadow-sm">
+      <div class="card-body">
+        <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-2 mb-3">
+          <div>
+            <h5 class="mb-1">📄 Paragony</h5>
+            <p class="text-secondary small mb-0">
+              Przeglądaj dodane paragony, wrzucaj nowe i rozliczaj je przez OCR.
+            </p>
+          </div>
+          <div class="d-flex flex-wrap gap-2">
+            <span class="badge rounded-pill bg-secondary">{{ receipts|length }} plik{% if receipts|length != 1 %}i{% endif %}</span>
+            {% if list.is_archived %}
+            <span class="badge rounded-pill bg-secondary">Lista archiwalna</span>
+            {% elif current_user.is_authenticated %}
+            <span class="badge rounded-pill bg-success">Możesz dodawać</span>
+            {% else %}
+            <span class="badge rounded-pill bg-warning text-dark">Tylko podgląd</span>
+            {% endif %}
+          </div>
+        </div>
 
-    <h5>🔍 Analiza paragonów (OCR)</h5>
-    <p class="text-small">System spróbuje automatycznie rozpoznać kwoty z dodanych paragonów.<br>
-      Dokonaj korekty jeśli źle rozpozna kwote i kliknij w "Dodaj" aby dodać wydatek.
-    </p>
+        <div class="row g-3 align-items-stretch">
+          <div class="col-12 col-xl-7">
+            <div class="border border-secondary rounded-3 p-3 h-100">
+              <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
+                <h6 class="mb-0">📸 Dodane paragony</h6>
+                {% if receipts %}
+                <span class="text-secondary small">Kliknij miniaturę, aby otworzyć podgląd</span>
+                {% endif %}
+              </div>
 
-    {% if current_user.is_authenticated %}
-    <button id="analyzeBtn" class="btn btn-sm btn-outline-light mb-3">
-      🔍 Zleć analizę OCR
-    </button>
-    {% else %}
-    <div class="alert alert-warning text-centerg">
-      ⚠️ Tylko zalogowani użytkownicy mogą zlecać analizę OCR.
+              <div class="row g-3" id="receiptGallery">
+                {% if receipts %}
+                {% for r in receipts %}
+                <div class="col-6 col-md-4 text-center">
+                  <a href="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}" class="glightbox text-decoration-none"
+                    data-gallery="receipt-gallery">
+                    <div class="card bg-black border-secondary h-100 overflow-hidden shadow-sm">
+                      <img src="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}"
+                        class="card-img-top img-fluid" style="height: 180px; object-fit: cover;" alt="Paragon {{ loop.index }}">
+                      <div class="card-body p-2">
+                        <div class="small text-truncate text-secondary">Paragon {{ loop.index }}</div>
+                      </div>
+                    </div>
+                  </a>
+                </div>
+                {% endfor %}
+                {% else %}
+                <div class="col-12">
+                  <div class="alert alert-info text-center mb-0" role="alert">
+                    ℹ️ Brak wgranych paragonów do tej listy
+                  </div>
+                </div>
+                {% endif %}
+              </div>
+            </div>
+          </div>
+
+          <div class="col-12 col-xl-5">
+            <div class="d-flex flex-column gap-3 h-100">
+              <div class="border border-secondary rounded-3 p-3 bg-black bg-opacity-25 {% if not receipts %}d-none{% endif %}" id="receiptAnalysisBlock">
+                <div class="d-flex justify-content-between align-items-start gap-2 flex-wrap mb-2">
+                  <div>
+                    <h6 class="mb-1">🔍 Analiza paragonów (OCR)</h6>
+                    <p class="text-small text-secondary mb-0">
+                      System spróbuje automatycznie rozpoznać kwoty. Sprawdź wynik i kliknij „Dodaj”, aby dopisać wydatek.
+                    </p>
+                  </div>
+                </div>
+
+                {% if current_user.is_authenticated %}
+                <button id="analyzeBtn" class="btn btn-sm btn-outline-light mb-3 w-100 w-sm-auto">
+                  🔍 Zleć analizę OCR
+                </button>
+                {% else %}
+                <div class="alert alert-warning mb-3">
+                  ⚠️ Tylko zalogowani użytkownicy mogą zlecać analizę OCR.
+                </div>
+                {% endif %}
+                <div id="analysisResults" class="mt-2"></div>
+              </div>
+
+              {% if not list.is_archived and current_user.is_authenticated %}
+              <div class="border border-secondary rounded-3 p-3 h-100">
+                <h6 class="mb-1">📤 Dodaj nowy paragon</h6>
+                <p class="text-secondary small mb-3">Możesz dodać zdjęcie z aparatu, z galerii albo plik PDF.</p>
+
+                <form id="receiptForm" action="{{ url_for('upload_receipt', list_id=list.id) }}" method="post"
+                  enctype="multipart/form-data" class="text-center">
+
+                  <div class="d-grid gap-2">
+                    <label for="cameraInput" id="cameraBtn"
+                      class="btn btn-outline-light w-100 py-2 d-flex align-items-center justify-content-center gap-2">
+                      <i class="bi bi-camera"></i> 📸 Zrób zdjęcie
+                    </label>
+                    <input type="file" name="receipt" accept="image/*" capture="environment" class="d-none" id="cameraInput">
+
+                    <label for="galleryInput" id="galleryBtn"
+                      class="btn btn-outline-light w-100 py-2 d-flex align-items-center justify-content-center gap-2">
+                      <i class="bi bi-image"></i> <span id="galleryBtnText">🖼️ Z galerii</span>
+                    </label>
+                    <input type="file" name="receipt" accept="image/*" class="d-none" id="galleryInput">
+
+                    <label for="pdfInput" id="pdfBtn"
+                      class="btn btn-outline-light w-100 py-2 d-flex align-items-center justify-content-center gap-2">
+                      📄 Dodaj PDF
+                    </label>
+                    <input type="file" name="receipt" accept="application/pdf" class="d-none" id="pdfInput">
+                  </div>
+
+                  <div id="progressContainer" class="progress progress-dark rounded-3 overflow-hidden shadow-sm mt-3"
+                    style="height: 20px; display: none;">
+                    <div id="progressBar" class="progress-bar bg-success fw-bold text-white text-center" role="progressbar"
+                      style="width: 0%;">0%</div>
+                  </div>
+
+                  <div id="receiptUploadFeedback" class="mt-3"></div>
+                </form>
+              </div>
+              {% elif list.is_archived %}
+              <div class="border border-secondary rounded-3 p-3 bg-black bg-opacity-25">
+                <h6 class="mb-1">📤 Dodawanie zablokowane</h6>
+                <p class="text-secondary small mb-0">Ta lista jest archiwalna, więc nie można już dodawać nowych paragonów.</p>
+              </div>
+              {% elif not current_user.is_authenticated %}
+              <div class="border border-secondary rounded-3 p-3 bg-black bg-opacity-25">
+                <h6 class="mb-1">🔐 Dodawanie wymaga logowania</h6>
+                <p class="text-secondary small mb-0">Zaloguj się, aby dodawać paragony i uruchamiać analizę OCR.</p>
+              </div>
+              {% endif %}
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-    {% endif %}
-    <div id="analysisResults" class="mt-2"></div>
   </div>
-
-  <h5 class="mt-4">📸 Paragony dodane do tej listy</h5>
-  <div class="row g-3 mt-2" id="receiptGallery">
-    {% if receipts %}
-    {% for r in receipts %}
-    <div class="col-6 col-md-4 col-lg-3 text-center">
-      <a href="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}" class="glightbox"
-        data-gallery="receipt-gallery">
-        <img src="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}"
-          class="img-fluid rounded shadow-sm border border-secondary" style="max-height: 200px; object-fit: cover;">
-      </a>
-    </div>
-    {% endfor %}
-    {% else %}
-    <div class="alert alert-info text-center w-100" role="alert">
-      ℹ️ Brak wgranych paragonów do tej listy
-    </div>
-    {% endif %}
-  </div>
-
-  {% if not list.is_archived and current_user.is_authenticated %}
-  <hr>
-  <h5>📤 Dodaj zdjęcie paragonu</h5>
-  <form id="receiptForm" action="{{ url_for('upload_receipt', list_id=list.id) }}" method="post"
-    enctype="multipart/form-data" class="text-center">
-
-    <!-- Zrób zdjęcie (tylko mobile) -->
-    <label for="cameraInput" id="cameraBtn"
-      class="btn btn-outline-light w-100 py-2 mb-2 d-flex align-items-center justify-content-center gap-2">
-      <i class="bi bi-camera"></i> 📸 Zrób zdjęcie
-    </label>
-    <input type="file" name="receipt" accept="image/*" capture="environment" class="d-none" id="cameraInput">
-
-    <!-- Z galerii / Dodaj paragon -->
-    <label for="galleryInput" id="galleryBtn"
-      class="btn btn-outline-light w-100 py-2 mb-2 d-flex align-items-center justify-content-center gap-2">
-      <i class="bi bi-image"></i> <span id="galleryBtnText">🖼️ Z galerii</span>
-    </label>
-    <input type="file" name="receipt" accept="image/*" class="d-none" id="galleryInput">
-
-    <label for="pdfInput" id="pdfBtn"
-      class="btn btn-outline-light w-100 py-2 mb-2 d-flex align-items-center justify-content-center gap-2">
-      📄 Dodaj PDF
-    </label>
-    <input type="file" name="receipt" accept="application/pdf" class="d-none" id="pdfInput">
-
-    <div id="progressContainer" class="progress progress-dark rounded-3 overflow-hidden shadow-sm"
-      style="height: 20px; display: none;">
-      <div id="progressBar" class="progress-bar bg-success fw-bold text-white text-center" role="progressbar"
-        style="width: 0%;">0%</div>
-    </div>
-
-    <div id="receiptGallery" class="mt-3"></div>
-  </form>
-  {% endif %}
 </div>
 
 <!-- Modal notatki -->
@@ -236,12 +321,12 @@
     var isSorting = false;
   }
 </script>
-<script src="{{ url_for('static_bp.serve_js_lib', filename='Sortable.min.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='notes.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='clickable_row.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='receipt_section.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='receipt_upload.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='receipt_analysis.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js_lib', 'Sortable.min.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'notes.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'clickable_row.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'receipt_section.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'receipt_upload.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'receipt_analysis.js') }}"></script>
 <script>
   setupList({{ list.id }}, '{{ current_user.username if current_user.is_authenticated else 'Gość' }}');
 </script>

shopping_app/templates/main.html

@@ -69,12 +69,61 @@
   </button>
 </div>
 
+{% macro render_summary_panel(title, summary, accent='success') -%}
+<div class="col-12 col-lg-6">
+  <div class="main-summary-card h-100">
+    <div class="d-flex justify-content-between align-items-start gap-3 flex-wrap mb-2">
+      <div>
+        <div class="main-summary-card__eyebrow">Postęp</div>
+        <h4 class="main-summary-card__title mb-0">{{ title }}</h4>
+      </div>
+      <span class="badge rounded-pill text-bg-dark border border-secondary-subtle">Listy: {{ summary.list_count }}</span>
+    </div>
+
+    {% with total_count=summary.total_products, purchased_count=summary.purchased_products, not_purchased_count=summary.not_purchased_products, total_expense=summary.total_expense %}
+    {% include '_list_progress.html' %}
+    {% endwith %}
+
+    <div class="main-summary-stats mt-3">
+      <div class="main-summary-stat">
+        <span class="main-summary-stat__label">Kupione</span>
+        <strong>{{ summary.purchased_products }}</strong>
+      </div>
+      <div class="main-summary-stat">
+        <span class="main-summary-stat__label">Niekupione</span>
+        <strong>{{ summary.not_purchased_products }}</strong>
+      </div>
+      <div class="main-summary-stat">
+        <span class="main-summary-stat__label">Nieoznaczone</span>
+        <strong>{{ summary.remaining_products }}</strong>
+      </div>
+      <div class="main-summary-stat">
+        <span class="main-summary-stat__label">Wydatki</span>
+        <strong>{{ '%.2f'|format(summary.total_expense) }} PLN</strong>
+      </div>
+    </div>
+  </div>
+</div>
+{%- endmacro %}
+
 {% if current_user.is_authenticated %}
-<h3 class="mt-4 d-flex justify-content-between align-items-center flex-wrap">
-  Twoje listy
-  <button type="button" class="btn btn-sm btn-outline-light ms-2" data-bs-toggle="modal" data-bs-target="#archivedModal">
+<div class="d-flex justify-content-end align-items-center flex-wrap gap-2 mb-3">
+  <button class="btn btn-sm btn-outline-light" type="button" data-bs-toggle="collapse" data-bs-target="#mainStatsCollapse" aria-expanded="false" aria-controls="mainStatsCollapse">
+    📈 Statystyki
+  </button>
+  <button type="button" class="btn btn-sm btn-outline-light" data-bs-toggle="modal" data-bs-target="#archivedModal">
     🗄️ Zarchiwizowane
   </button>
+</div>
+<div class="collapse mb-4" id="mainStatsCollapse">
+  <div class="row g-3">
+    {{ render_summary_panel('Twoje listy', user_lists_summary) }}
+    {{ render_summary_panel('Udostępnione i publiczne', accessible_lists_summary, 'info') }}
+  </div>
+</div>
+
+<h3 class="mt-4 d-flex justify-content-between align-items-center flex-wrap">
+  Twoje listy
 </h3>
 
 {% if user_lists %}
@@ -127,31 +176,28 @@
       </div>
     </div>
 
-    <div class="progress progress-dark progress-thin mt-2 position-relative">
-      <div class="progress-bar bg-success" role="progressbar"
-           style="width: {{ (purchased_count / total_count * 100) if total_count > 0 else 0 }}%"
-           aria-valuemin="0" aria-valuemax="100"></div>
-
-      {% set not_purchased_count = l.not_purchased_count if l.total_count else 0 %}
-      <div class="progress-bar bg-warning" role="progressbar"
-           style="width: {{ (not_purchased_count / total_count * 100) if total_count > 0 else 0 }}%"
-           aria-valuemin="0" aria-valuemax="100"></div>
-
-      <div class="progress-bar bg-transparent" role="progressbar"
-           style="width: {{ 100 - ((purchased_count + not_purchased_count) / total_count * 100) if total_count > 0 else 100 }}%"
-           aria-valuemin="0" aria-valuemax="100"></div>
-
-      <span class="progress-label small fw-bold {% if percent < 51 %}text-white{% else %}text-dark{% endif %}">
-        Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0) }}%)
-        {% if l.total_expense > 0 %} — 💸 {{ '%.2f'|format(l.total_expense) }} PLN{% endif %}
-      </span>
-    </div>
+    {% with total_count=total_count, purchased_count=purchased_count, not_purchased_count=l.not_purchased_count, total_expense=l.total_expense %}
+    {% include '_list_progress.html' %}
+    {% endwith %}
   </li>
   {% endfor %}
 </ul>
 {% else %}
 <p><span class="badge rounded-pill bg-secondary opacity-75">Nie utworzono żadnej listy</span></p>
 {% endif %}
+{% else %}
+<div class="mb-3">
+  <button class="btn btn-sm btn-outline-light" type="button" data-bs-toggle="collapse" data-bs-target="#mainStatsCollapse" aria-expanded="false" aria-controls="mainStatsCollapse">
+    📈 Statystyki
+  </button>
+</div>
+<div class="collapse mb-4" id="mainStatsCollapse">
+  <div class="row g-3">
+    <div class="col-12">
+      {{ render_summary_panel('Publiczne listy innych użytkowników', accessible_lists_summary, 'info') }}
+    </div>
+  </div>
+</div>
 {% endif %}
 
 <h3 class="mt-4">
@@ -201,25 +247,9 @@
       </div>
     </div>
 
-    <div class="progress progress-dark progress-thin mt-2 position-relative">
-      <div class="progress-bar bg-success" role="progressbar"
-           style="width: {{ (purchased_count / total_count * 100) if total_count > 0 else 0 }}%"
-           aria-valuemin="0" aria-valuemax="100"></div>
-
-      {% set not_purchased_count = l.not_purchased_count if l.total_count else 0 %}
-      <div class="progress-bar bg-warning" role="progressbar"
-           style="width: {{ (not_purchased_count / total_count * 100) if total_count > 0 else 0 }}%"
-           aria-valuemin="0" aria-valuemax="100"></div>
-
-      <div class="progress-bar bg-transparent" role="progressbar"
-           style="width: {{ 100 - ((purchased_count + not_purchased_count) / total_count * 100) if total_count > 0 else 100 }}%"
-           aria-valuemin="0" aria-valuemax="100"></div>
-
-      <span class="progress-label small fw-bold {% if percent < 51 %}text-white{% else %}text-dark{% endif %}">
-        Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0) }}%)
-        {% if l.total_expense > 0 %} — 💸 {{ '%.2f'|format(l.total_expense) }} PLN{% endif %}
-      </span>
-    </div>
+    {% with total_count=total_count, purchased_count=purchased_count, not_purchased_count=l.not_purchased_count, total_expense=l.total_expense %}
+    {% include '_list_progress.html' %}
+    {% endwith %}
   </li>
   {% endfor %}
 </ul>
@@ -289,8 +319,8 @@
 </div>
 
 {% block scripts %}
-<script src="{{ url_for('static_bp.serve_js', filename='toggle_button.js') }}?v={{ APP_VERSION }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='select_month.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'toggle_button.js') }}"></script>
+<script src="{{ static_asset_url('static_bp.serve_js', 'select_month.js') }}"></script>
 {% endblock %}
 
 {% endblock %}

shopping_app/uploads

@@ -0,0 +1 @@
+../uploads

shopping_app/web.py

@@ -10,7 +10,24 @@ def load_user(user_id):
 
 @app.context_processor
 def inject_version():
-    return {"APP_VERSION": app.config["APP_VERSION"]}
+    def static_asset_url(endpoint, filename):
+        directory_map = {
+            "static_bp.serve_js": "static/js",
+            "static_bp.serve_css": "static/css",
+            "static_bp.serve_js_lib": "static/lib/js",
+            "static_bp.serve_css_lib": "static/lib/css",
+        }
+        relative_dir = directory_map.get(endpoint)
+        version = app.config["APP_VERSION"]
+        if relative_dir:
+            file_path = os.path.join(app.root_path, relative_dir, filename)
+            version = get_file_md5(file_path)
+        return url_for(endpoint, filename=filename, v=version)
+
+    return {
+        "APP_VERSION": app.config["APP_VERSION"],
+        "static_asset_url": static_asset_url,
+    }
 
 
 @app.context_processor

tests/test_refactor.py

@@ -1,70 +0,0 @@
-import unittest
-from pathlib import Path
-
-from shopping_app import app
-
-
-class RefactorSmokeTests(unittest.TestCase):
-    @classmethod
-    def setUpClass(cls):
-        app.config.update(TESTING=True)
-        cls.client = app.test_client()
-
-    def test_undefined_path_returns_not_500(self):
-        response = self.client.get('/undefined')
-        self.assertNotEqual(response.status_code, 500)
-        self.assertEqual(response.status_code, 404)
-
-    def test_login_page_renders(self):
-        response = self.client.get('/login')
-        self.assertEqual(response.status_code, 200)
-        html = response.get_data(as_text=True)
-        self.assertIn('name="password"', html)
-        self.assertIn('app_ui.js', html)
-
-
-class TemplateContractTests(unittest.TestCase):
-    def test_main_template_uses_single_action_group_on_mobile(self):
-        main_html = Path('shopping_app/templates/main.html').read_text(encoding='utf-8')
-        self.assertIn('mobile-list-heading', main_html)
-        self.assertIn('list-main-title__link', main_html)
-        self.assertNotIn('d-flex d-sm-none" role="group"', main_html)
-
-    def test_list_templates_use_compact_mobile_action_layout(self):
-        list_html = Path('shopping_app/templates/list.html').read_text(encoding='utf-8')
-        shared_html = Path('shopping_app/templates/list_share.html').read_text(encoding='utf-8')
-        for html in (list_html, shared_html):
-            self.assertIn('shopping-item-row', html)
-            self.assertIn('shopping-item-actions', html)
-            self.assertIn('shopping-compact-input-group', html)
-            self.assertIn('shopping-item-head', html)
-
-    def test_css_contains_mobile_ux_overrides(self):
-        css = Path('shopping_app/static/css/style.css').read_text(encoding='utf-8')
-        self.assertIn('.shopping-item-actions', css)
-        self.assertIn('.shopping-compact-input-group', css)
-        self.assertIn('.ui-password-group > .ui-password-toggle', css)
-        self.assertIn('.hide-purchased-switch--minimal', css)
-        self.assertIn('.shopping-item-head', css)
-        self.assertIn('UX tweak 2026-03-14 c: hamburger with full labels', css)
-
-
-if __name__ == '__main__':
-    unittest.main()
-
-
-class NavbarContractTests(unittest.TestCase):
-    def test_base_template_uses_mobile_collapse_nav(self):
-        base_html = Path('shopping_app/templates/base.html').read_text(encoding='utf-8')
-        self.assertIn('navbar-toggler', base_html)
-        self.assertIn('appNavbarMenu', base_html)
-
-
-    def test_base_template_mobile_nav_has_full_labels(self):
-        base_html = Path('shopping_app/templates/base.html').read_text(encoding='utf-8')
-        self.assertIn('>📊 <span>Wydatki</span><', base_html)
-        self.assertIn('>🚪 <span>Wyloguj</span><', base_html)
-
-    def test_main_template_temp_toggle_is_integrated(self):
-        main_html = Path('shopping_app/templates/main.html').read_text(encoding='utf-8')
-        self.assertIn('create-list-temp-toggle', main_html)