progress bar and stats

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,
     )
 
 

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.css

@@ -233,7 +233,7 @@ textarea.form-control:disabled {
   border-bottom-left-radius: 0;
 }
 
-input.form-control {
+.create-list-input-group > input.form-control {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
@@ -1473,7 +1473,7 @@ h1, h2, h3, h4, h5, h6 {
 #total-expense1,
 #total-expense2,
 #total-expense {
-  background: rgba(255,255,255,0.08) !important;
+  background: transparent;
   color: #dfffea !important;
 }
 
@@ -4885,6 +4885,14 @@ body.sorting-active .shopping-item-row .large-checkbox {
   padding: 0 .8rem !important;
   flex: 0 0 auto;
 }
+.shopping-action-btn--countdown {
+  width: auto !important;
+  min-width: 3.2rem !important;
+  padding: 0 .65rem !important;
+  font-variant-numeric: tabular-nums;
+  opacity: 1 !important;
+}
+
 
 .endpoint-list_share .shopping-item-actions,
 .endpoint-shared_list .shopping-item-actions,
@@ -4907,6 +4915,13 @@ body.sorting-active .shopping-item-row .large-checkbox {
   width: auto;
   min-width: 5.9rem;
 }
+.endpoint-list_share .shopping-action-btn--countdown,
+.endpoint-shared_list .shopping-action-btn--countdown,
+.endpoint-list .shopping-action-btn--countdown {
+  width: auto;
+  min-width: 3.2rem;
+}
+
 
 @media (max-width: 575.98px) {
   .shopping-item-spinner {
@@ -4933,6 +4948,14 @@ body.sorting-active .shopping-item-row .large-checkbox {
     padding: 0 .72rem !important;
   }
 }
+  .shopping-action-btn--countdown,
+  .endpoint-list_share .shopping-action-btn--countdown,
+  .endpoint-shared_list .shopping-action-btn--countdown,
+  .endpoint-list .shopping-action-btn--countdown {
+    min-width: 3rem;
+    padding: 0 .55rem !important;
+  }
+}
 
 .endpoint-login .card .form-control,
 .endpoint-system_auth .card .form-control,
@@ -5023,6 +5046,15 @@ body.sorting-active .shopping-item-row .large-checkbox {
   min-width: 5.9rem !important;
   padding: 0 .8rem !important;
 }
+.endpoint-list_share .shopping-action-btn--countdown,
+.endpoint-shared_list .shopping-action-btn--countdown,
+.endpoint-view_list .shopping-action-btn--countdown,
+.endpoint-list .shopping-action-btn--countdown {
+  width: auto !important;
+  min-width: 3.2rem !important;
+  padding: 0 .65rem !important;
+}
+
 
 .endpoint-list_share .shopping-action-btn > *,
 .endpoint-shared_list .shopping-action-btn > *,
@@ -5051,7 +5083,743 @@ body.sorting-active .shopping-item-row .large-checkbox {
     padding: 0 .72rem !important;
   }
 }
+  .endpoint-list_share .shopping-action-btn--countdown,
+  .endpoint-shared_list .shopping-action-btn--countdown,
+  .endpoint-view_list .shopping-action-btn--countdown,
+  .endpoint-list .shopping-action-btn--countdown {
+    min-width: 3rem !important;
+    padding: 0 .55rem !important;
+  }
+}
 
 body:not(.sorting-active) .drag-handle {
   display: none !important;
 }
+
+
+/* final hotfix 2026-03-17: consistent password toggle on auth/admin */
+.ui-password-group {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: stretch !important;
+  gap: 0 !important;
+  width: 100%;
+}
+
+.ui-password-group > .form-control {
+  flex: 1 1 auto !important;
+  width: 1% !important;
+  min-width: 0 !important;
+  max-width: none !important;
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  border-right: 0 !important;
+}
+
+.ui-password-group > .ui-password-toggle {
+  appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 46px !important;
+  width: 46px !important;
+  min-width: 46px !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  background: var(--dark-700) !important;
+  color: var(--text-strong) !important;
+  border: 1px solid var(--dark-300) !important;
+  border-left: 0 !important;
+  border-top-right-radius: 14px !important;
+  border-bottom-right-radius: 14px !important;
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  line-height: 1;
+  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
+}
+
+.ui-password-group > .ui-password-toggle:hover,
+.ui-password-group > .ui-password-toggle:focus,
+.ui-password-group > .ui-password-toggle:focus-visible {
+  background: var(--dark-800) !important;
+  color: #fff !important;
+  border-color: var(--primary) !important;
+  box-shadow: 0 0 0 .25rem rgba(24, 64, 118, .18) !important;
+}
+
+.ui-password-group > .ui-password-toggle.is-active {
+  background: #2a3550 !important;
+  color: #fff !important;
+}
+
+@media (max-width: 575.98px) {
+  .ui-password-group > .ui-password-toggle {
+    flex-basis: 44px !important;
+    width: 44px !important;
+    min-width: 44px !important;
+  }
+}
+
+
+/* final hotfix 2026-03-17b: password toggle parity on login/system-auth/admin-users */
+.ui-password-group {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: stretch !important;
+  width: 100% !important;
+}
+
+.ui-password-group > .form-control {
+  flex: 1 1 auto !important;
+  width: 1% !important;
+  min-width: 0 !important;
+  min-height: 42px !important;
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  border-right: 0 !important;
+}
+
+.ui-password-group > .ui-password-toggle {
+  appearance: none !important;
+  -webkit-appearance: none !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  flex: 0 0 46px !important;
+  width: 46px !important;
+  min-width: 46px !important;
+  min-height: 42px !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  cursor: pointer !important;
+  background-color: var(--dark-700) !important;
+  background-image: none !important;
+  color: var(--text-strong) !important;
+  border: 1px solid var(--dark-300) !important;
+  border-left: 0 !important;
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  border-top-right-radius: 14px !important;
+  border-bottom-right-radius: 14px !important;
+  box-shadow: none !important;
+  line-height: 1 !important;
+}
+
+.ui-password-group > .ui-password-toggle:hover,
+.ui-password-group > .ui-password-toggle:focus,
+.ui-password-group > .ui-password-toggle:focus-visible {
+  background-color: var(--dark-800) !important;
+  color: #fff !important;
+  border-color: var(--primary) !important;
+  box-shadow: 0 0 0 .25rem rgba(24, 64, 118, .18) !important;
+  outline: none !important;
+}
+
+.ui-password-group > .ui-password-toggle.is-active {
+  background-color: var(--dark-800) !important;
+  color: #fff !important;
+}
+
+.ui-password-group > .ui-password-toggle > * {
+  pointer-events: none !important;
+}
+
+.endpoint-login .ui-password-group > .ui-password-toggle,
+.endpoint-system_auth .ui-password-group > .ui-password-toggle,
+.endpoint-user_management .ui-password-group > .ui-password-toggle,
+.endpoint-user_management .modal .ui-password-group > .ui-password-toggle {
+  background-color: var(--dark-700) !important;
+  color: var(--text-strong) !important;
+  border-color: var(--dark-300) !important;
+}
+
+.endpoint-login .ui-password-group > .ui-password-toggle:hover,
+.endpoint-login .ui-password-group > .ui-password-toggle:focus,
+.endpoint-login .ui-password-group > .ui-password-toggle:focus-visible,
+.endpoint-system_auth .ui-password-group > .ui-password-toggle:hover,
+.endpoint-system_auth .ui-password-group > .ui-password-toggle:focus,
+.endpoint-system_auth .ui-password-group > .ui-password-toggle:focus-visible,
+.endpoint-user_management .ui-password-group > .ui-password-toggle:hover,
+.endpoint-user_management .ui-password-group > .ui-password-toggle:focus,
+.endpoint-user_management .ui-password-group > .ui-password-toggle:focus-visible,
+.endpoint-user_management .modal .ui-password-group > .ui-password-toggle:hover,
+.endpoint-user_management .modal .ui-password-group > .ui-password-toggle:focus,
+.endpoint-user_management .modal .ui-password-group > .ui-password-toggle:focus-visible {
+  background-color: var(--dark-800) !important;
+  border-color: var(--primary) !important;
+}
+
+@media (max-width: 575.98px) {
+  .ui-password-group > .ui-password-toggle {
+    flex-basis: 44px !important;
+    width: 44px !important;
+    min-width: 44px !important;
+  }
+}
+
+
+/* wyróżnienie pola dodawania produktu */
+.endpoint-list .shopping-entry-card,
+.endpoint-list_share .shopping-entry-card,
+.endpoint-shared_list .shopping-entry-card,
+.endpoint-view_list .shopping-entry-card {
+  background: linear-gradient(180deg, rgba(25, 135, 84, 0.16), rgba(13, 17, 23, 0.92));
+  border: 1px solid rgba(25, 135, 84, 0.42);
+  border-radius: 1rem;
+  padding: .9rem;
+  box-shadow: 0 .5rem 1.2rem rgba(0, 0, 0, 0.18);
+}
+
+.endpoint-list .shopping-entry-card__label,
+.endpoint-list_share .shopping-entry-card__label,
+.endpoint-shared_list .shopping-entry-card__label,
+.endpoint-view_list .shopping-entry-card__label {
+  display: inline-flex;
+  align-items: center;
+  gap: .4rem;
+  margin-bottom: .2rem;
+  font-size: .95rem;
+  font-weight: 700;
+  color: #d1f7df;
+}
+
+.endpoint-list .shopping-entry-card__hint,
+.endpoint-list_share .shopping-entry-card__hint,
+.endpoint-shared_list .shopping-entry-card__hint,
+.endpoint-view_list .shopping-entry-card__hint {
+  margin-bottom: .75rem;
+  color: rgba(255, 255, 255, 0.72);
+  font-size: .82rem;
+  line-height: 1.35;
+}
+
+.endpoint-list .shopping-entry-card .shopping-product-input-group,
+.endpoint-list_share .shopping-entry-card .shopping-product-input-group,
+.endpoint-shared_list .shopping-entry-card .shopping-product-input-group,
+.endpoint-view_list .shopping-entry-card .shopping-product-input-group {
+  margin-bottom: 0 !important;
+}
+
+.endpoint-list .shopping-entry-card .shopping-product-input-group > .form-control,
+.endpoint-list_share .shopping-entry-card .shopping-product-input-group > .form-control,
+.endpoint-shared_list .shopping-entry-card .shopping-product-input-group > .form-control,
+.endpoint-view_list .shopping-entry-card .shopping-product-input-group > .form-control {
+  border-color: rgba(25, 135, 84, 0.55) !important;
+  background: rgba(17, 24, 39, 0.95) !important;
+}
+
+.endpoint-list .shopping-entry-card .shopping-product-input-group > .form-control::placeholder,
+.endpoint-list_share .shopping-entry-card .shopping-product-input-group > .form-control::placeholder,
+.endpoint-shared_list .shopping-entry-card .shopping-product-input-group > .form-control::placeholder,
+.endpoint-view_list .shopping-entry-card .shopping-product-input-group > .form-control::placeholder {
+  color: rgba(255, 255, 255, 0.62);
+}
+
+.endpoint-list .shopping-entry-card .shopping-product-input-group > .shopping-product-name-input:focus,
+.endpoint-list_share .shopping-entry-card .shopping-product-input-group > .shopping-product-name-input:focus,
+.endpoint-shared_list .shopping-entry-card .shopping-product-input-group > .shopping-product-name-input:focus,
+.endpoint-view_list .shopping-entry-card .shopping-product-input-group > .shopping-product-name-input:focus {
+  box-shadow: inset 0 0 0 1px rgba(25, 135, 84, 0.25), 0 0 0 .2rem rgba(25, 135, 84, 0.18);
+}
+
+@media (max-width: 767.98px) {
+  .endpoint-list .shopping-entry-card,
+  .endpoint-list_share .shopping-entry-card,
+  .endpoint-shared_list .shopping-entry-card,
+  .endpoint-view_list .shopping-entry-card {
+    padding: .8rem;
+    border-radius: .95rem;
+  }
+
+  .endpoint-list .shopping-entry-card__label,
+  .endpoint-list_share .shopping-entry-card__label,
+  .endpoint-shared_list .shopping-entry-card__label,
+  .endpoint-view_list .shopping-entry-card__label {
+    font-size: .92rem;
+  }
+
+  .endpoint-list .shopping-entry-card__hint,
+  .endpoint-list_share .shopping-entry-card__hint,
+  .endpoint-shared_list .shopping-entry-card__hint,
+  .endpoint-view_list .shopping-entry-card__hint {
+    font-size: .78rem;
+    margin-bottom: .65rem;
+  }
+}
+
+/* ========== /expenses mobile fixes: separate range pickers + better wrapping ========== */
+.endpoint-expenses .expenses-range-toolbar {
+  width: 100%;
+}
+
+.endpoint-expenses .expenses-range-group {
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+}
+
+.endpoint-expenses .expenses-range-group > .btn {
+  white-space: nowrap;
+}
+
+.endpoint-expenses .expenses-date-range {
+  align-items: stretch;
+}
+
+@media (max-width: 767.98px) {
+  .endpoint-expenses .expenses-range-toolbar {
+    justify-content: stretch !important;
+    overflow: visible;
+    padding-bottom: 0;
+  }
+
+  .endpoint-expenses .expenses-range-group {
+    display: grid !important;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.55rem;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .endpoint-expenses .expenses-table-toolbar .expenses-range-group {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .endpoint-expenses .expenses-range-group > .btn {
+    flex: initial !important;
+    width: 100%;
+    min-width: 0;
+    padding-inline: 0.55rem;
+    font-size: 0.95rem;
+  }
+
+  .endpoint-expenses .expenses-date-range {
+    display: grid !important;
+    grid-template-columns: 52px minmax(0, 1fr);
+    gap: 0.55rem;
+    width: 100%;
+    max-width: 100% !important;
+    flex-wrap: wrap !important;
+  }
+
+  .endpoint-expenses .expenses-date-range > .input-group-text,
+  .endpoint-expenses .expenses-date-range > .form-control,
+  .endpoint-expenses .expenses-date-range > .btn {
+    width: 100% !important;
+    min-width: 0 !important;
+    flex: initial !important;
+    border-radius: 0.85rem !important;
+  }
+
+  .endpoint-expenses .expenses-date-range > .btn {
+    grid-column: 1 / -1;
+  }
+}
+
+
+/* /share expense entry card aligned with product card */
+.endpoint-list .shopping-entry-card--expense,
+.endpoint-list_share .shopping-entry-card--expense,
+.endpoint-shared_list .shopping-entry-card--expense,
+.endpoint-view_list .shopping-entry-card--expense {
+  background: linear-gradient(180deg, rgba(13, 110, 253, 0.16), rgba(13, 17, 23, 0.92));
+  border-color: rgba(13, 110, 253, 0.42);
+}
+
+.endpoint-list .shopping-entry-card--expense .shopping-entry-card__label,
+.endpoint-list_share .shopping-entry-card--expense .shopping-entry-card__label,
+.endpoint-shared_list .shopping-entry-card--expense .shopping-entry-card__label,
+.endpoint-view_list .shopping-entry-card--expense .shopping-entry-card__label {
+  color: #d7e9ff;
+}
+
+.endpoint-list .shopping-entry-card--expense .shopping-expense-input-group,
+.endpoint-list_share .shopping-entry-card--expense .shopping-expense-input-group,
+.endpoint-shared_list .shopping-entry-card--expense .shopping-expense-input-group,
+.endpoint-view_list .shopping-entry-card--expense .shopping-expense-input-group {
+  margin-bottom: 0 !important;
+}
+
+.endpoint-list .shopping-entry-card--expense .shopping-expense-input-group > .form-control,
+.endpoint-list_share .shopping-entry-card--expense .shopping-expense-input-group > .form-control,
+.endpoint-shared_list .shopping-entry-card--expense .shopping-expense-input-group > .form-control,
+.endpoint-view_list .shopping-entry-card--expense .shopping-expense-input-group > .form-control {
+  border-color: rgba(13, 110, 253, 0.55) !important;
+  background: rgba(17, 24, 39, 0.95) !important;
+}
+
+.endpoint-list .shopping-entry-card--expense .shopping-expense-input-group > .form-control::placeholder,
+.endpoint-list_share .shopping-entry-card--expense .shopping-expense-input-group > .form-control::placeholder,
+.endpoint-shared_list .shopping-entry-card--expense .shopping-expense-input-group > .form-control::placeholder,
+.endpoint-view_list .shopping-entry-card--expense .shopping-expense-input-group > .form-control::placeholder {
+  color: rgba(255, 255, 255, 0.62);
+}
+
+.endpoint-list .shopping-entry-card--expense .shopping-expense-input-group > .shopping-expense-amount-input:focus,
+.endpoint-list_share .shopping-entry-card--expense .shopping-expense-input-group > .shopping-expense-amount-input:focus,
+.endpoint-shared_list .shopping-entry-card--expense .shopping-expense-input-group > .shopping-expense-amount-input:focus,
+.endpoint-view_list .shopping-entry-card--expense .shopping-expense-input-group > .shopping-expense-amount-input:focus {
+  box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.25), 0 0 0 .2rem rgba(13, 110, 253, 0.18);
+}
+
+.endpoint-list .share-submit-btn--expense,
+.endpoint-list_share .share-submit-btn--expense,
+.endpoint-shared_list .share-submit-btn--expense,
+.endpoint-view_list .share-submit-btn--expense {
+  color: #8ec5ff;
+  border-color: rgba(13, 110, 253, 0.72) !important;
+  background: rgba(13, 110, 253, 0.12);
+}
+
+.endpoint-list .share-submit-btn--expense:hover,
+.endpoint-list_share .share-submit-btn--expense:hover,
+.endpoint-shared_list .share-submit-btn--expense:hover,
+.endpoint-view_list .share-submit-btn--expense:hover,
+.endpoint-list .share-submit-btn--expense:focus,
+.endpoint-list_share .share-submit-btn--expense:focus,
+.endpoint-shared_list .share-submit-btn--expense:focus,
+.endpoint-view_list .share-submit-btn--expense:focus {
+  color: #fff;
+  border-color: rgba(13, 110, 253, 0.9) !important;
+  background: rgba(13, 110, 253, 0.22);
+  box-shadow: 0 0 0 .2rem rgba(13, 110, 253, 0.16);
+}
+
+/* UX polish 2026-03-19: list quick actions card */
+.list-quick-actions {
+  display: grid;
+  gap: .9rem;
+  padding: 1rem;
+  border: 1px solid rgba(255,255,255,.08);
+  border-radius: 1rem;
+  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
+  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.14);
+}
+
+.list-quick-actions__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: .75rem;
+}
+
+.list-quick-actions__eyebrow {
+  font-size: .72rem;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+  color: rgba(255,255,255,.58);
+  margin-bottom: .15rem;
+}
+
+.list-quick-actions__title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #fff;
+  line-height: 1.2;
+}
+
+.list-quick-actions__hint {
+  font-size: .82rem;
+  color: rgba(255,255,255,.62);
+  text-align: right;
+  max-width: 18rem;
+}
+
+.list-quick-actions__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: .75rem;
+}
+
+.list-quick-actions__form {
+  display: block;
+}
+
+.list-quick-actions__action.btn {
+  width: 100%;
+  min-height: 78px;
+  display: flex;
+  align-items: flex-start;
+  gap: .75rem;
+  padding: .9rem 1rem;
+  border-radius: .95rem;
+  text-align: left;
+  white-space: normal;
+}
+
+.list-quick-actions__action--primary.btn {
+  border-color: rgba(255,255,255,.2);
+  background: rgba(255,255,255,.03);
+}
+
+.list-quick-actions__action--secondary.btn {
+  border-color: rgba(13,110,253,.5);
+  background: rgba(13,110,253,.08);
+}
+
+.list-quick-actions__icon {
+  flex: 0 0 auto;
+  font-size: 1.05rem;
+  line-height: 1;
+  margin-top: .1rem;
+}
+
+.list-quick-actions__content {
+  display: grid;
+  gap: .2rem;
+  min-width: 0;
+}
+
+.list-quick-actions__label {
+  font-size: .95rem;
+  font-weight: 600;
+  color: #fff;
+  line-height: 1.25;
+}
+
+.list-quick-actions__desc {
+  font-size: .81rem;
+  color: rgba(255,255,255,.66);
+  line-height: 1.35;
+}
+
+@media (max-width: 767.98px) {
+  .list-quick-actions {
+    padding: .9rem;
+    gap: .75rem;
+  }
+
+  .list-quick-actions__header {
+    flex-direction: column;
+    gap: .35rem;
+  }
+
+  .list-quick-actions__hint {
+    max-width: none;
+    text-align: left;
+  }
+
+  .list-quick-actions__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .list-quick-actions__action.btn {
+    min-height: 72px;
+    padding: .85rem .9rem;
+  }
+}
+
+
+/* mobile user chip 2026-03-19 */
+.app-navbar__meta--mobile {
+  display: none;
+}
+
+.app-user-chip--mobile {
+  max-width: min(46vw, 15rem);
+  min-width: 0;
+  padding-left: .6rem;
+  padding-right: .4rem;
+}
+
+.app-user-chip--mobile .badge {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 991.98px) {
+  .app-navbar__meta--mobile {
+    display: flex !important;
+    width: auto;
+    justify-content: flex-end;
+    min-width: 0;
+  }
+
+  .app-user-chip--mobile {
+    display: inline-flex;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .app-brand__icon {
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+
+  .app-user-chip--mobile {
+    gap: .35rem;
+    padding: .34rem .38rem .34rem .5rem;
+  }
+
+  .app-user-chip--mobile .app-user-chip__label {
+    font-size: .62rem;
+    letter-spacing: .05em;
+  }
+
+  .app-user-chip--mobile .badge {
+    font-size: .72rem;
+    max-width: 5.9rem;
+  }
+}
+
+
+/* mobile navbar layout fix 2026-03-19 */
+@media (max-width: 991.98px) {
+  .app-navbar .container-xxl {
+    grid-template-columns: minmax(0, 1fr) auto auto;
+  }
+
+  .app-navbar__meta--mobile {
+    grid-column: 2;
+    justify-self: end;
+    min-width: 0;
+    max-width: min(42vw, 12rem);
+  }
+
+  .app-mobile-menu {
+    grid-column: 3;
+    justify-self: end;
+  }
+}
+
+@media (max-width: 430px) {
+  .app-navbar .container-xxl {
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    gap: .45rem;
+  }
+
+  .app-user-chip--mobile {
+    max-width: min(38vw, 8.5rem);
+  }
+
+  .app-user-chip--mobile .app-user-chip__label {
+    display: none;
+  }
+}
+
+/* --- Main page list progress consistency --- */
+.endpoint-main_page .list-group-item {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+
+.endpoint-main_page .main-list-progress-wrap {
+  display: block;
+  width: 100%;
+  flex: 0 0 100%;
+  margin-top: 0.8rem !important;
+}
+
+.endpoint-main_page .list-group-item > .main-list-row + .main-list-progress-wrap {
+  align-self: stretch;
+}
+
+.endpoint-main_page .main-list-progress {
+  width: 100%;
+  height: 16px;
+  margin-top: 0 !important;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
+    var(--dark-700) !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.05),
+    0 4px 10px rgba(0, 0, 0, 0.18);
+}
+
+.endpoint-main_page .main-list-progress .progress-bar.bg-success {
+  background: linear-gradient(135deg, rgba(40, 199, 111, 0.98), rgba(22, 163, 74, 0.98)) !important;
+}
+
+.endpoint-main_page .main-list-progress .progress-bar.bg-warning {
+  background: linear-gradient(135deg, rgba(245, 189, 65, 0.98), rgba(217, 119, 6, 0.98)) !important;
+}
+
+.endpoint-main_page .main-list-progress .progress-bar.bg-transparent {
+  background: rgba(255, 255, 255, 0.08) !important;
+}
+
+.endpoint-main_page .main-list-progress__label {
+  max-width: calc(100% - 0.85rem);
+  padding: 0 0.45rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
+  letter-spacing: 0.01em;
+}
+
+@media (max-width: 575.98px) {
+  .endpoint-main_page .main-list-progress {
+    height: 15px;
+  }
+
+  .endpoint-main_page .main-list-progress__label {
+    font-size: 0.64rem;
+  }
+}
+
+/* --- Main page progress summary cards --- */
+.endpoint-main_page #mainStatsCollapse.collapsing,
+.endpoint-main_page #mainStatsCollapse.show {
+  overflow: visible;
+}
+
+.endpoint-main_page .main-summary-card {
+  height: 100%;
+  padding: 1rem 1rem 1.05rem;
+  border-radius: 1rem;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)), rgba(9, 16, 28, 0.88);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
+}
+
+.endpoint-main_page .main-summary-card__eyebrow {
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: rgba(255, 255, 255, 0.65);
+  margin-bottom: 0.2rem;
+}
+
+.endpoint-main_page .main-summary-card__title {
+  font-size: 1.05rem;
+}
+
+.endpoint-main_page .main-summary-stats {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.7rem;
+}
+
+.endpoint-main_page .main-summary-stat {
+  padding: 0.65rem 0.75rem;
+  border-radius: 0.85rem;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.endpoint-main_page .main-summary-stat__label {
+  display: block;
+  font-size: 0.73rem;
+  color: rgba(255, 255, 255, 0.66);
+  margin-bottom: 0.15rem;
+}
+
+
+@media (max-width: 575.98px) {
+  .endpoint-main_page .main-summary-card {
+    padding: 0.9rem;
+  }
+
+  .endpoint-main_page .main-summary-stats {
+    grid-template-columns: 1fr;
+  }
+}

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' : ''}>`;
 
@@ -326,9 +363,13 @@ 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>`;
   }
 
@@ -340,7 +381,12 @@ function renderItem(item, isShare = window.IS_SHARE, showEditOnly = false) {
       <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/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,31 @@
+{% 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 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_count = (total_count - accounted_count) if total_count > accounted_count else 0 %}
+{% set remaining_percent = (remaining_count / total_count * 100) if total_count > 0 else 100 %}
+
+<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: {{ purchased_percent }}%"
+         aria-valuemin="0" aria-valuemax="100"></div>
+
+    <div class="progress-bar bg-warning" role="progressbar"
+         style="width: {{ not_purchased_percent }}%"
+         aria-valuemin="0" aria-valuemax="100"></div>
+
+    <div class="progress-bar bg-transparent" role="progressbar"
+         style="width: {{ 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) }}%)
+      {% if total_expense > 0 %} — 💸 {{ '%.2f'|format(total_expense) }} PLN{% endif %}
+    </span>
+  </div>
+</div>

shopping_app/templates/admin/admin_panel.html

@@ -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') }}"></script>
   {% endblock %}
 
   {% endblock %}

shopping_app/templates/admin/edit_categories.html

@@ -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') }}"></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

@@ -6,25 +6,25 @@
   <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 +58,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>
@@ -123,7 +139,7 @@
     </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 +163,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 +181,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,9 +68,8 @@
 
 <!-- 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
+  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>%)
 </h5>
 
@@ -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
@@ -129,9 +128,8 @@
           </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 %}
@@ -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

@@ -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)