feat: release 0.7.0 celebration flow

CloudronManifest.json

@@ -4,7 +4,7 @@
   "author": "hnzio <mail@example.com>",
   "description": "Spielerische Haushalts-App mit Aufgaben, Punkten, Monats-Highscore, Kalender und PWA-Push.",
   "tagline": "Haushalt mit Liga-Gefühl",
-  "version": "0.6.5",
+  "version": "0.7.0",
   "manifestVersion": 2,
   "healthCheckPath": "/healthz",
   "httpPort": 8000,

README.md

@@ -360,6 +360,17 @@ Der ausgegebene `VAPID_PRIVATE_KEY` ist bereits `.env`-freundlich mit escaped Ne
 
 ## Release Notes
 
+### 0.7.0
+
+- Aufgaben und Quick-Wins lösen jetzt eine kurze, subtile Punkte-Animation mit Glas-Look und Firework-Effekt aus
+- Celebration-Zahl für Mobilgeräte deutlich vergrößert und direkt auf transparent schimmernde Ziffern umgestellt
+- Quick-Wins-Dialog technisch auf robusteres natives Dialog-Verhalten zurückgeführt
+- Quick-Wins lassen sich jetzt wieder zuverlässig schließen, auch mobil
+- Tap auf den Dialog-Backdrop schließt Abschluss- und Quick-Win-Dialog jetzt ebenfalls sauber
+- Scrollposition bleibt beim Erledigen von Aufgaben und Quick-Wins erhalten, statt nach oben zu springen
+- Redirect nach Abschluss übergibt die verbuchten Punkte gezielt an die UI, ohne die URL dauerhaft zu verschmutzen
+- Cloudron-Version auf `0.7.0` angehoben
+
 ### 0.6.5
 
 - Quick-Wins als gemeinsames Team-Feature ausgebaut

app/__init__.py

@@ -90,6 +90,7 @@ def create_app(config_class: type[Config] = Config) -> Flask:
             "nav_items": [
                 ("tasks.my_tasks", "Meine Aufgaben", "house"),
                 ("tasks.all_tasks", "Alle", "list"),
+                ("tasks.archive_view", "Archiv", "check-double"),
                 ("tasks.create", "Neu", "plus"),
                 ("tasks.calendar_view", "Kalender", "calendar"),
                 ("scoreboard.index", "Highscore", "trophy"),
@@ -98,6 +99,7 @@ def create_app(config_class: type[Config] = Config) -> Flask:
             "mobile_nav_items": [
                 ("tasks.my_tasks", "Meine Aufgaben", "house"),
                 ("tasks.all_tasks", "Alle Aufgaben", "list"),
+                ("tasks.archive_view", "Archiv", "check-double"),
                 ("tasks.calendar_view", "Kalender", "calendar"),
                 ("scoreboard.index", "Highscore", "trophy"),
                 ("settings.index", "Optionen", "gear"),

app/models.py

@@ -188,7 +188,7 @@ class TaskInstance(TimestampMixin, db.Model):
     def status_label(self) -> str:
         labels = {
             "open": "Offen",
-            "due_today": "Bald fällig",
+            "due_today": "Heute fällig",
             "due_tomorrow": "Morgen fällig",
             "due_day_after_tomorrow": "Übermorgen fällig",
             "overdue": "Überfällig",

app/routes/tasks.py

@@ -2,7 +2,8 @@ from __future__ import annotations
 
 import calendar
 from collections import defaultdict
-from datetime import date
+from datetime import date, timedelta
+from urllib.parse import parse_qsl, urlencode, urlsplit, urlunsplit
 
 from flask import Blueprint, flash, redirect, render_template, request, url_for
 from flask_login import current_user, login_required
@@ -37,15 +38,85 @@ def _my_tasks_soon_priority(task: TaskInstance) -> int:
     order = {
         "due_tomorrow": 0,
         "due_day_after_tomorrow": 1,
-        "due_today": 2,
+        "open": 2,
     }
     return order.get(task.status, 99)
 
 
+def _task_sort_key(task: TaskInstance, sort: str) -> tuple:
+    if sort == "points":
+        return (-task.points_awarded, task.due_date, task.title.lower())
+    if sort == "user":
+        return (task.assignee_label.lower(), task.due_date, task.title.lower())
+    return (task.due_date, task.title.lower())
+
+
+def _group_active_tasks(tasks: list[TaskInstance], *, sort: str = "due") -> dict[str, list[TaskInstance]]:
+    sections = {
+        "overdue": [],
+        "today": [],
+        "soon": [],
+        "open": [],
+    }
+
+    for task in tasks:
+        if task.is_completed:
+            continue
+        if task.status == "overdue":
+            sections["overdue"].append(task)
+        elif task.status == "due_today":
+            sections["today"].append(task)
+        elif task.status in {"due_tomorrow", "due_day_after_tomorrow"}:
+            sections["soon"].append(task)
+        else:
+            sections["open"].append(task)
+
+    sections["overdue"].sort(key=lambda task: _task_sort_key(task, sort))
+    sections["today"].sort(key=lambda task: _task_sort_key(task, sort))
+    sections["soon"].sort(
+        key=lambda task: (_my_tasks_soon_priority(task),) + _task_sort_key(task, sort)
+    )
+    sections["open"].sort(key=lambda task: _task_sort_key(task, sort))
+    return sections
+
+
+def _archive_day_priority(day: date, today: date) -> tuple[int, int]:
+    if day == today:
+        return (0, 0)
+    if day == today - timedelta(days=1):
+        return (1, 0)
+    if day == today - timedelta(days=2):
+        return (2, 0)
+    return (3, -day.toordinal())
+
+
+def _archive_day_label(day: date, today: date) -> str:
+    if day == today:
+        return "Heute"
+    if day == today - timedelta(days=1):
+        return "Gestern"
+    if day == today - timedelta(days=2):
+        return "Vorgestern"
+    return day.strftime("%d.%m.%Y")
+
+
+def _redirect_with_celebration(target_url: str, points: int | None = None):
+    if not points or points <= 0:
+        return redirect(target_url)
+
+    parts = urlsplit(target_url)
+    query = dict(parse_qsl(parts.query, keep_blank_values=True))
+    query["celebrate_points"] = str(points)
+    redirect_url = urlunsplit(
+        (parts.scheme, parts.netloc, parts.path, urlencode(query), parts.fragment)
+    )
+    return redirect(redirect_url)
+
+
 @bp.route("/my-tasks")
 @login_required
 def my_tasks():
-    tasks = (
+    all_tasks = (
         TaskInstance.query.filter(
             or_(
                 TaskInstance.assigned_user_id == current_user.id,
@@ -55,38 +126,21 @@ def my_tasks():
         .order_by(TaskInstance.completed_at.is_(None).desc(), TaskInstance.due_date.asc())
         .all()
     )
-    refresh_task_statuses(tasks)
+    refresh_task_statuses(all_tasks)
+    sections = _group_active_tasks(all_tasks)
 
-    sections = {
-        "open": [],
-        "due_today": [],
-        "due_tomorrow": [],
-        "due_day_after_tomorrow": [],
-        "overdue": [],
-        "completed": [],
-    }
-    for task in tasks:
-        sections[task.status].append(task)
-
-    soon_tasks = sorted(
-        sections["due_tomorrow"] + sections["due_day_after_tomorrow"] + sections["due_today"],
-        key=lambda task: (_my_tasks_soon_priority(task), task.due_date, task.title.lower()),
-    )
-
-    completed_count = len(sections["completed"])
+    completed_count = len([task for task in all_tasks if task.is_completed])
     active_count = (
-        len(sections["open"])
-        + len(sections["due_today"])
-        + len(sections["due_tomorrow"])
-        + len(sections["due_day_after_tomorrow"])
-        + len(sections["overdue"])
+        len(sections["overdue"])
+        + len(sections["today"])
+        + len(sections["soon"])
+        + len(sections["open"])
     )
     completion_ratio = 0 if completed_count + active_count == 0 else round(completed_count / (completed_count + active_count) * 100)
 
     return render_template(
         "tasks/my_tasks.html",
         sections=sections,
-        soon_tasks=soon_tasks,
         completion_ratio=completion_ratio,
         today=today_local(),
     )
@@ -128,10 +182,9 @@ def all_tasks():
 
     if status != "all":
         if status == "soon":
-            tasks = [task for task in tasks if task.status in {"due_today", "due_tomorrow", "due_day_after_tomorrow"}]
+            tasks = [task for task in tasks if task.status in {"due_tomorrow", "due_day_after_tomorrow"}]
         else:
             status_map = {
-                "completed": "completed",
                 "overdue": "overdue",
                 "open": "open",
                 "today": "due_today",
@@ -141,15 +194,58 @@ def all_tasks():
             selected = status_map.get(status)
             if selected:
                 tasks = [task for task in tasks if task.status == selected]
+        tasks = [task for task in tasks if not task.is_completed]
+    else:
+        tasks = [task for task in tasks if not task.is_completed]
+
+    sections = _group_active_tasks(tasks, sort=sort)
 
     return render_template(
         "tasks/all_tasks.html",
         tasks=tasks,
+        sections=sections,
         users=User.query.order_by(User.name.asc()).all(),
         filters={"status": status, "mine": mine, "user_id": user_filter, "sort": sort},
     )
 
 
+@bp.route("/archive")
+@login_required
+def archive_view():
+    selected_user_id = request.args.get("user_id", type=int) or current_user.id
+    archive_users = User.query.order_by(User.name.asc()).all()
+    selected_user = next((user for user in archive_users if user.id == selected_user_id), current_user)
+    ordered_users = sorted(archive_users, key=lambda user: (user.id != current_user.id, user.name.lower()))
+
+    completed_tasks = (
+        TaskInstance.query.filter_by(completed_by_user_id=selected_user.id)
+        .filter(TaskInstance.completed_at.isnot(None))
+        .order_by(TaskInstance.completed_at.desc(), TaskInstance.updated_at.desc())
+        .all()
+    )
+
+    today = today_local()
+    grouped: dict[date, list[TaskInstance]] = defaultdict(list)
+    for task in completed_tasks:
+        grouped[task.completed_at.date()].append(task)
+
+    archive_sections = [
+        {
+            "label": _archive_day_label(day, today),
+            "day": day,
+            "tasks": grouped[day],
+        }
+        for day in sorted(grouped.keys(), key=lambda value: _archive_day_priority(value, today))
+    ]
+
+    return render_template(
+        "tasks/archive.html",
+        archive_users=ordered_users,
+        selected_user=selected_user,
+        archive_sections=archive_sections,
+    )
+
+
 @bp.route("/tasks/new", methods=["GET", "POST"])
 @login_required
 def create():
@@ -171,6 +267,7 @@ def create():
 def quick_create():
     config = get_quick_task_config()
     created_titles: list[str] = []
+    total_points = 0
 
     selected_ids = request.form.getlist("quick_win_ids")
     if selected_ids:
@@ -179,6 +276,7 @@ def quick_create():
             task = create_quick_task(quick_win.title, quick_win.effort, current_user, description="Quick-Win")
             complete_task(task, current_user.id)
             created_titles.append(task.title)
+            total_points += task.points_awarded
 
     if request.form.get("include_custom") == "1":
         form = QuickTaskForm(prefix="quick")
@@ -199,6 +297,7 @@ def quick_create():
         task = create_quick_task(custom_title, form.effort.data, current_user, description="Quick-Win")
         complete_task(task, current_user.id)
         created_titles.append(task.title)
+        total_points += task.points_awarded
 
     if not created_titles:
         flash("Bitte wähle mindestens einen Quick-Win aus.", "error")
@@ -208,7 +307,10 @@ def quick_create():
         flash(f"Quick-Win „{created_titles[0]}“ wurde als erledigt gespeichert.", "success")
     else:
         flash(f"{len(created_titles)} Quick-Wins wurden als erledigt gespeichert.", "success")
-    return redirect(request.referrer or url_for("tasks.my_tasks"))
+    return _redirect_with_celebration(
+        request.referrer or url_for("tasks.my_tasks"),
+        total_points,
+    )
 
 
 @bp.route("/tasks/<int:task_id>/edit", methods=["GET", "POST"])
@@ -271,9 +373,13 @@ def complete(task_id: int):
         if selected_user_id in allowed_ids:
             completed_by_id = selected_user_id
 
+    awarded_points = task.points_awarded
     complete_task(task, completed_by_id)
     flash("Punkte verbucht. Gute Arbeit.", "success")
-    return redirect(request.referrer or url_for("tasks.my_tasks"))
+    return _redirect_with_celebration(
+        request.referrer or url_for("tasks.my_tasks"),
+        awarded_points,
+    )
 
 
 @bp.route("/calendar")

app/static/css/style.css

@@ -410,6 +410,11 @@ p {
   gap: 14px;
 }
 
+.form-actions {
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
 .progress {
   margin-top: 12px;
   height: 14px;
@@ -474,8 +479,8 @@ p {
 
 .task-card {
   display: grid;
-  gap: 16px;
-  padding: 20px;
+  gap: 14px;
+  padding: 18px;
 }
 
 .task-card__top {
@@ -505,7 +510,7 @@ p {
 }
 
 .task-card h3 {
-  font-size: 1.35rem;
+  font-size: 1.24rem;
   line-height: 1.08;
   overflow-wrap: break-word;
   hyphens: auto;
@@ -577,8 +582,8 @@ p {
 
 .task-meta {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14px;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 10px 14px;
 }
 
 .task-meta dt {
@@ -594,11 +599,16 @@ p {
   font-weight: 600;
 }
 
+.task-card--compact .task-meta {
+  grid-template-columns: 1fr;
+}
+
 .task-assignee {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   color: var(--muted);
+  min-width: 0;
 }
 
 .task-assignee__avatars {
@@ -611,6 +621,10 @@ p {
   border: 2px solid var(--surface-strong);
 }
 
+.task-assignee span:last-child {
+  overflow-wrap: break-word;
+}
+
 .avatar {
   width: 34px;
   height: 34px;
@@ -757,6 +771,46 @@ p {
   gap: 14px;
 }
 
+.quick-actions {
+  display: grid;
+  gap: 12px;
+}
+
+.archive-user-tabs {
+  display: flex;
+  gap: 12px;
+  overflow-x: auto;
+  padding-bottom: 4px;
+  margin-bottom: 8px;
+}
+
+.archive-user-tab {
+  flex: 0 0 auto;
+  min-width: 108px;
+  display: grid;
+  justify-items: center;
+  gap: 8px;
+  padding: 14px 16px;
+  border-radius: 20px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  box-shadow: var(--shadow);
+  color: var(--muted);
+  text-align: center;
+}
+
+.archive-user-tab span {
+  font-size: 0.92rem;
+  font-weight: 700;
+  line-height: 1.15;
+}
+
+.archive-user-tab.is-active {
+  color: var(--text);
+  border-color: rgba(37, 99, 235, 0.22);
+  background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(52, 211, 153, 0.1));
+}
+
 .panel--toolbar {
   display: flex;
   justify-content: space-between;
@@ -1345,6 +1399,22 @@ p {
     border-radius: 28px;
   }
 
+  .archive-user-tabs {
+    gap: 10px;
+    margin-bottom: 4px;
+  }
+
+  .archive-user-tab {
+    min-width: 92px;
+    padding: 12px 12px;
+    gap: 6px;
+    border-radius: 18px;
+  }
+
+  .archive-user-tab span {
+    font-size: 0.82rem;
+  }
+
   .task-card {
     gap: 14px;
     padding: 18px;
@@ -1377,11 +1447,13 @@ p {
   .form-panel h2 {
     font-size: 1.85rem;
     line-height: 1.08;
+    overflow-wrap: break-word;
+    hyphens: auto;
   }
 
   .complete-dialog__surface {
-    width: min(100vw - 16px, 410px);
-    max-width: calc(100vw - 16px);
+    width: min(410px, 100%);
+    max-width: 100%;
     padding: 18px 16px;
     gap: 14px;
     overflow-x: hidden;
@@ -1413,11 +1485,12 @@ p {
   }
 
   .quick-win-tag span {
-    width: auto;
+    width: 100%;
     max-width: 100%;
     padding: 6px 11px;
     font-size: 0.84rem;
-    white-space: nowrap;
+    white-space: normal;
+    overflow-wrap: anywhere;
     text-align: center;
     justify-content: center;
   }
@@ -1426,6 +1499,26 @@ p {
     width: auto;
   }
 
+  .form-actions {
+    display: grid;
+    grid-template-columns: 1fr;
+    align-items: stretch;
+  }
+
+  .celebration-score {
+    width: 80vw;
+    font-size: clamp(5.5rem, 28vw, 8.5rem);
+  }
+
+  .celebration-glow {
+    width: min(78vw, 240px);
+  }
+
+  .form-actions .button,
+  .form-actions a.button {
+    width: 100%;
+  }
+
   .quick-win-list__toolbar {
     justify-content: stretch;
   }
@@ -1469,8 +1562,8 @@ p {
   right: 8px;
   bottom: calc(10px + env(safe-area-inset-bottom));
   display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 4px;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 3px;
   padding: 8px 8px;
   border-radius: 22px;
   background: var(--nav-bg);
@@ -1484,13 +1577,13 @@ p {
 .nav-link {
   display: grid;
   justify-items: center;
-  gap: 5px;
+  gap: 4px;
   min-width: 0;
-  padding: 10px 4px 9px;
+  padding: 10px 3px 9px;
   color: var(--muted);
   border-radius: 16px;
   text-align: center;
-  font-size: 0.66rem;
+  font-size: 0.61rem;
   font-weight: 700;
   line-height: 1.05;
 }
@@ -1498,7 +1591,7 @@ p {
 .bottom-nav__item span {
   display: block;
   width: 100%;
-  min-height: 2.1em;
+  min-height: 2.3em;
   white-space: normal;
   word-break: keep-all;
   overflow-wrap: break-word;
@@ -1512,15 +1605,33 @@ p {
 
 .nav-icon,
 .nav-icon svg {
-  width: 20px;
-  height: 20px;
+  width: 18px;
+  height: 18px;
   display: inline-block;
 }
 
 .complete-dialog {
+  inset: 0;
+  width: 100vw;
+  max-width: 100vw;
+  min-height: 100vh;
+  min-height: 100dvh;
+  margin: 0;
+  padding: 12px;
   border: 0;
-  padding: 0;
   background: transparent;
+  overflow: visible;
+  box-sizing: border-box;
+}
+
+.complete-dialog:not([open]) {
+  display: none;
+}
+
+.complete-dialog[open] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .complete-dialog::backdrop {
@@ -1529,23 +1640,89 @@ p {
 }
 
 .complete-dialog__surface {
-  width: min(460px, calc(100vw - 24px));
+  width: min(460px, 100%);
+  max-width: 100%;
   padding: 24px;
   border-radius: 28px;
   background: var(--surface-strong);
   box-shadow: var(--shadow);
   display: grid;
   gap: 18px;
+  min-width: 0;
 }
 
 .complete-dialog__surface--task {
-  width: min(520px, calc(100vw - 24px));
-  max-width: calc(100vw - 24px);
+  width: min(520px, 100%);
+  max-width: 100%;
   overflow-x: hidden;
   overscroll-behavior-x: contain;
   touch-action: pan-y;
 }
 
+.celebration-layer {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 90;
+  overflow: hidden;
+}
+
+.celebration-score,
+.celebration-glow,
+.celebration-particle {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+}
+
+.celebration-score {
+  width: min(80vw, 520px);
+  padding: 0;
+  background:
+    linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0.98) 0%,
+      rgba(214, 234, 255, 0.92) 18%,
+      rgba(94, 168, 255, 0.72) 42%,
+      rgba(52, 211, 153, 0.74) 70%,
+      rgba(255, 255, 255, 0.92) 100%
+    );
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
+  font-size: clamp(6.5rem, 28vw, 12rem);
+  font-weight: 900;
+  line-height: 0.9;
+  letter-spacing: -0.08em;
+  text-align: center;
+  transform: translate(-50%, -50%);
+  filter:
+    drop-shadow(0 10px 24px rgba(94, 168, 255, 0.18))
+    drop-shadow(0 0 18px rgba(255, 255, 255, 0.18));
+  animation: celebration-score-in 1.15s cubic-bezier(0.18, 0.84, 0.24, 1) forwards;
+}
+
+.celebration-glow {
+  width: min(56vw, 280px);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background:
+    radial-gradient(circle, rgba(94, 168, 255, 0.26) 0%, rgba(52, 211, 153, 0.2) 42%, rgba(94, 168, 255, 0) 74%);
+  transform: translate(-50%, -50%);
+  filter: blur(10px);
+  animation: celebration-glow 0.95s ease-out forwards;
+}
+
+.celebration-particle {
+  width: var(--size, 10px);
+  height: var(--size, 10px);
+  border-radius: 999px;
+  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-4px);
+  animation: celebration-particle 0.82s ease-out var(--delay, 0s) forwards;
+}
+
 .choice-grid {
   display: grid;
   gap: 12px;
@@ -1565,7 +1742,7 @@ p {
 .fab-quick-task {
   position: fixed;
   right: max(16px, env(safe-area-inset-right));
-  bottom: calc(72px + var(--safe-bottom));
+  bottom: calc(86px + var(--safe-bottom));
   width: 62px;
   height: 62px;
   border: 2px solid rgba(255, 255, 255, 0.55);
@@ -1586,6 +1763,61 @@ p {
   height: 24px;
 }
 
+@keyframes celebration-score-in {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -42%) scale(0.74);
+    filter: blur(16px);
+  }
+  12% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+    filter: blur(0);
+  }
+  58% {
+    opacity: 1;
+    transform: translate(-50%, -53%) scale(1.03);
+    filter: blur(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -76%) scale(1.08);
+    filter: blur(20px);
+  }
+}
+
+@keyframes celebration-glow {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.32);
+  }
+  22% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(1.42);
+  }
+}
+
+@keyframes celebration-particle {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0) scale(0.4);
+    filter: blur(4px);
+  }
+  18% {
+    opacity: 1;
+    filter: blur(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--distance) * -1)) scale(0.9);
+    filter: blur(6px);
+  }
+}
+
 @media (max-width: 759px) {
   .calendar-toolbar-mobile__header {
     align-items: flex-start;
@@ -1789,6 +2021,18 @@ p {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .celebration-score {
+    animation-duration: 0.46s;
+  }
+
+  .celebration-glow,
+  .celebration-particle {
+    animation: none;
+    opacity: 0;
+  }
+}
+
 @media (min-width: 1100px) {
   .app-shell {
     display: grid;

app/static/js/app.js

@@ -20,9 +20,50 @@
   const quickWinSortIds = document.getElementById("quickWinSortIds");
   const quickWinSortSave = document.getElementById("quickWinSortSave");
   const quickWinToggleButtons = document.querySelectorAll("[data-quick-win-toggle]");
+  const celebrationLayer = document.getElementById("celebrationLayer");
+  const celebratePoints = Number.parseInt(document.body.dataset.celebratePoints || "", 10);
+  const scrollRestoreKey = "putzliga:scroll-restore";
   let draggedQuickWin = null;
   let quickWinSortDirty = false;
 
+  function rememberScrollPosition() {
+    try {
+      window.sessionStorage.setItem(
+        scrollRestoreKey,
+        JSON.stringify({
+          path: window.location.pathname,
+          y: window.scrollY,
+        }),
+      );
+    } catch (_) {
+      // Ignore storage errors and continue normally.
+    }
+  }
+
+  function restoreScrollPosition() {
+    try {
+      const rawValue = window.sessionStorage.getItem(scrollRestoreKey);
+      if (!rawValue) {
+        return;
+      }
+
+      const saved = JSON.parse(rawValue);
+      window.sessionStorage.removeItem(scrollRestoreKey);
+
+      if (!saved || saved.path !== window.location.pathname || typeof saved.y !== "number") {
+        return;
+      }
+
+      window.requestAnimationFrame(() => {
+        window.requestAnimationFrame(() => {
+          window.scrollTo({ top: saved.y, behavior: "auto" });
+        });
+      });
+    } catch (_) {
+      // Ignore malformed storage data.
+    }
+  }
+
   function buildCompletionOptions(button) {
     const options = [];
     const assignedPairs = [
@@ -60,6 +101,7 @@
         choiceButton.textContent = option.label;
         choiceButton.addEventListener("click", () => {
           dialogChoice.value = option.value;
+          rememberScrollPosition();
           dialog.close();
           dialogForm.submit();
         });
@@ -74,13 +116,33 @@
   }
 
   if (quickTaskOpen && quickTaskDialog) {
-    quickTaskOpen.addEventListener("click", () => quickTaskDialog.showModal());
+    quickTaskOpen.addEventListener("click", () => {
+      if (!quickTaskDialog.open) {
+        quickTaskDialog.showModal();
+      }
+    });
   }
 
   if (quickTaskClose && quickTaskDialog) {
-    quickTaskClose.addEventListener("click", () => quickTaskDialog.close());
+    quickTaskClose.addEventListener("click", () => {
+      if (quickTaskDialog.open) {
+        quickTaskDialog.close();
+      }
+    });
   }
 
+  [dialog, quickTaskDialog].forEach((activeDialog) => {
+    if (!activeDialog) {
+      return;
+    }
+
+    activeDialog.addEventListener("click", (event) => {
+      if (event.target === activeDialog && activeDialog.open) {
+        activeDialog.close();
+      }
+    });
+  });
+
   function updateQuickWinsState() {
     const selectedPresetCount = [...quickWinInputs].filter((input) => input.checked).length;
     const customSelected = quickWinCustomToggle?.checked === true;
@@ -123,6 +185,25 @@
     });
   }
 
+  if (dialogForm) {
+    dialogForm.addEventListener("submit", () => {
+      rememberScrollPosition();
+    });
+  }
+
+  document.querySelectorAll('form[action*="/complete"]').forEach((form) => {
+    form.addEventListener("submit", () => {
+      rememberScrollPosition();
+    });
+  });
+
+  const quickWinsForm = document.getElementById("quickWinsForm");
+  if (quickWinsForm) {
+    quickWinsForm.addEventListener("submit", () => {
+      rememberScrollPosition();
+    });
+  }
+
   function syncQuickWinSortIds() {
     if (!quickWinSortList || !quickWinSortIds) {
       return;
@@ -140,6 +221,65 @@
     }
   }
 
+  function clearCelebrationQuery() {
+    if (!window.history.replaceState) {
+      return;
+    }
+    const url = new URL(window.location.href);
+    if (!url.searchParams.has("celebrate_points")) {
+      return;
+    }
+    url.searchParams.delete("celebrate_points");
+    const nextUrl = `${url.pathname}${url.search}${url.hash}`;
+    window.history.replaceState({}, document.title, nextUrl);
+  }
+
+  function celebrateCompletion(points) {
+    if (!celebrationLayer || !Number.isFinite(points) || points <= 0) {
+      return;
+    }
+
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    celebrationLayer.hidden = false;
+    celebrationLayer.setAttribute("aria-hidden", "false");
+    celebrationLayer.innerHTML = "";
+
+    const score = document.createElement("div");
+    score.className = "celebration-score";
+    score.textContent = points;
+    celebrationLayer.appendChild(score);
+
+    const glow = document.createElement("div");
+    glow.className = "celebration-glow";
+    celebrationLayer.appendChild(glow);
+
+    if (!prefersReducedMotion) {
+      const colors = [
+        "rgba(94, 168, 255, 0.96)",
+        "rgba(52, 211, 153, 0.95)",
+        "rgba(250, 204, 21, 0.92)",
+        "rgba(191, 219, 254, 0.96)",
+      ];
+
+      Array.from({ length: 14 }).forEach((_, index) => {
+        const particle = document.createElement("span");
+        particle.className = "celebration-particle";
+        particle.style.setProperty("--angle", `${Math.round((360 / 14) * index + Math.random() * 18)}deg`);
+        particle.style.setProperty("--distance", `${72 + Math.round(Math.random() * 44)}px`);
+        particle.style.setProperty("--delay", `${(Math.random() * 0.08).toFixed(2)}s`);
+        particle.style.setProperty("--size", `${7 + Math.round(Math.random() * 7)}px`);
+        particle.style.background = colors[index % colors.length];
+        celebrationLayer.appendChild(particle);
+      });
+    }
+
+    window.setTimeout(() => {
+      celebrationLayer.hidden = true;
+      celebrationLayer.setAttribute("aria-hidden", "true");
+      celebrationLayer.innerHTML = "";
+    }, prefersReducedMotion ? 520 : 1500);
+  }
+
   if (quickWinSortList) {
     syncQuickWinSortIds();
     setQuickWinSortDirty(false);
@@ -282,4 +422,11 @@
       togglePush().catch((error) => console.error("Push toggle failed", error));
     });
   }
+
+  if (Number.isFinite(celebratePoints) && celebratePoints > 0) {
+    celebrateCompletion(celebratePoints);
+    clearCelebrationQuery();
+  }
+
+  restoreScrollPosition();
 })();

app/static/service-worker.js

@@ -1,8 +1,9 @@
-const CACHE_NAME = "putzliga-shell-v3";
+const CACHE_NAME = "putzliga-shell-v4";
 const ASSETS = [
   "/static/css/style.css",
   "/static/js/app.js",
   "/static/images/favicon.png",
+  "/static/images/apple-touch-icon.png",
   "/static/images/logo-mark.png",
   "/static/images/pwa-icon-192.png",
   "/static/images/pwa-icon-512.png"

app/templates/base.html

@@ -21,6 +21,7 @@
   data-push-key="{{ config['VAPID_PUBLIC_KEY'] if current_user.is_authenticated else '' }}"
   data-current-user-id="{{ current_user.id if current_user.is_authenticated else '' }}"
   data-current-user-name="{{ current_user.name if current_user.is_authenticated else '' }}"
+  data-celebrate-points="{{ request.args.get('celebrate_points', '') }}"
 >
   {% from "partials/macros.html" import nav_icon %}
   <div class="app-shell {% if not current_user.is_authenticated %}app-shell--auth{% endif %}">
@@ -110,6 +111,8 @@
   </div>
 
   {% if current_user.is_authenticated %}
+    <div class="celebration-layer" id="celebrationLayer" hidden aria-hidden="true"></div>
+
     <nav class="bottom-nav" aria-label="Mobile Navigation">
       {% for endpoint, label, icon in mobile_nav_items %}
         <a href="{{ url_for(endpoint) }}" class="bottom-nav__item {% if request.endpoint == endpoint %}is-active{% endif %}">

app/templates/partials/macros.html

@@ -66,18 +66,10 @@
         <dt>Fällig</dt>
         <dd>{{ task.due_date|date_de }}</dd>
       </div>
-      <div>
-        <dt>Zuständig</dt>
-        <dd>{{ task.assignee_label }}</dd>
-      </div>
-      <div>
-        <dt>Rhythmus</dt>
-        <dd>{{ task.task_template.recurrence_label }}</dd>
-      </div>
       {% if task.completed_at %}
         <div>
-          <dt>Erledigt von</dt>
-          <dd>{{ task.completed_by_user.name if task.completed_by_user else '—' }}</dd>
+          <dt>Erledigt</dt>
+          <dd>{{ task.completed_at|datetime_de }}</dd>
         </div>
       {% endif %}
     </dl>

app/templates/tasks/all_tasks.html

@@ -15,7 +15,6 @@
           <option value="tomorrow" {% if filters.status == 'tomorrow' %}selected{% endif %}>Morgen fällig</option>
           <option value="day_after_tomorrow" {% if filters.status == 'day_after_tomorrow' %}selected{% endif %}>Übermorgen fällig</option>
           <option value="overdue" {% if filters.status == 'overdue' %}selected{% endif %}>Überfällig</option>
-          <option value="completed" {% if filters.status == 'completed' %}selected{% endif %}>Erledigt</option>
         </select>
       </div>
       <div class="field field--compact">
@@ -43,11 +42,69 @@
     </form>
   </section>
 
-  <section class="task-grid">
-    {% for task in tasks %}
-      {{ task_card(task, current_user) }}
-    {% else %}
-      <div class="empty-state">Für diese Filter gibt es gerade keine Aufgaben.</div>
-    {% endfor %}
-  </section>
+  {% if filters.status == 'all' %}
+    <section class="stack">
+      <div class="section-heading">
+        <h2>Überfällig</h2>
+        <span class="section-heading__count">{{ sections.overdue|length }}</span>
+      </div>
+      <div class="task-grid">
+        {% for task in sections.overdue %}
+          {{ task_card(task, current_user) }}
+        {% else %}
+          <div class="empty-state">Für diese Auswahl ist nichts überfällig.</div>
+        {% endfor %}
+      </div>
+    </section>
+
+    <section class="stack">
+      <div class="section-heading">
+        <h2>Heute</h2>
+        <span class="section-heading__count">{{ sections.today|length }}</span>
+      </div>
+      <div class="task-grid">
+        {% for task in sections.today %}
+          {{ task_card(task, current_user) }}
+        {% else %}
+          <div class="empty-state">Heute ist hier gerade nichts offen.</div>
+        {% endfor %}
+      </div>
+    </section>
+
+    <section class="stack">
+      <div class="section-heading">
+        <h2>Bald fällig</h2>
+        <span class="section-heading__count">{{ sections.soon|length }}</span>
+      </div>
+      <div class="task-grid">
+        {% for task in sections.soon %}
+          {{ task_card(task, current_user) }}
+        {% else %}
+          <div class="empty-state">In den nächsten Tagen ist hier gerade nichts fällig.</div>
+        {% endfor %}
+      </div>
+    </section>
+
+    <section class="stack">
+      <div class="section-heading">
+        <h2>Offen</h2>
+        <span class="section-heading__count">{{ sections.open|length }}</span>
+      </div>
+      <div class="task-grid">
+        {% for task in sections.open %}
+          {{ task_card(task, current_user) }}
+        {% else %}
+          <div class="empty-state">Keine weiteren offenen Aufgaben für diese Auswahl.</div>
+        {% endfor %}
+      </div>
+    </section>
+  {% else %}
+    <section class="task-grid">
+      {% for task in tasks %}
+        {{ task_card(task, current_user) }}
+      {% else %}
+        <div class="empty-state">Für diese Filter gibt es gerade keine Aufgaben.</div>
+      {% endfor %}
+    </section>
+  {% endif %}
 {% endblock %}

app/templates/tasks/archive.html

@@ -0,0 +1,48 @@
+{% extends "base.html" %}
+{% from "partials/macros.html" import avatar, task_card %}
+{% block title %}Archiv · Putzliga{% endblock %}
+{% block page_title %}Archiv{% endblock %}
+{% block content %}
+  <section class="hero-grid">
+    <article class="hero-card">
+      <p class="eyebrow">Erledigte Aufgaben</p>
+      <h2>Was schon geschafft wurde</h2>
+      <p>Hier landen alle erledigten Aufgaben. Du kannst pro Person sehen, was heute, gestern, vorgestern und davor erledigt wurde.</p>
+    </article>
+    <article class="panel highlight-panel">
+      <p class="eyebrow">Ansicht</p>
+      <h2>{{ selected_user.name }}</h2>
+      <p class="muted">Wechsle über die Tabs direkt zwischen den erledigten Aufgaben der einzelnen Nutzer.</p>
+    </article>
+  </section>
+
+  <section class="archive-user-tabs" aria-label="Archiv nach Nutzer">
+    {% for user in archive_users %}
+      <a
+        href="{{ url_for('tasks.archive_view', user_id=user.id) }}"
+        class="archive-user-tab {% if selected_user.id == user.id %}is-active{% endif %}"
+      >
+        {{ avatar(user) }}
+        <span>{{ user.name }}</span>
+      </a>
+    {% endfor %}
+  </section>
+
+  {% for section in archive_sections %}
+    <section class="stack">
+      <div class="section-heading">
+        <h2>{{ section.label }}</h2>
+        <span class="section-heading__count">{{ section.tasks|length }}</span>
+      </div>
+      <div class="task-grid">
+        {% for task in section.tasks %}
+          {{ task_card(task, current_user, compact=true) }}
+        {% endfor %}
+      </div>
+    </section>
+  {% else %}
+    <section class="panel">
+      <div class="empty-state">Für {{ selected_user.name }} gibt es im Archiv noch keine erledigten Aufgaben.</div>
+    </section>
+  {% endfor %}
+{% endblock %}

app/templates/tasks/my_tasks.html

@@ -18,14 +18,20 @@
     </article>
     <article class="panel highlight-panel">
       <p class="eyebrow">Schnellzugriff</p>
-      <a class="button button--wide" href="{{ url_for('tasks.create') }}">
-        {{ nav_icon('plus') }}
-        <span>Neue Aufgabe anlegen</span>
-      </a>
-      <a class="button button--secondary button--wide" href="{{ url_for('scoreboard.index') }}">
-        {{ nav_icon('trophy') }}
-        <span>Zum aktuellen Highscore</span>
-      </a>
+      <div class="quick-actions">
+        <a class="button button--wide" href="{{ url_for('tasks.create') }}">
+          {{ nav_icon('plus') }}
+          <span>Neue Aufgabe anlegen</span>
+        </a>
+        <a class="button button--ghost button--wide" href="{{ url_for('tasks.archive_view') }}">
+          {{ nav_icon('check-double') }}
+          <span>Archiv</span>
+        </a>
+        <a class="button button--secondary button--wide" href="{{ url_for('scoreboard.index') }}">
+          {{ nav_icon('trophy') }}
+          <span>Zum aktuellen Highscore</span>
+        </a>
+      </div>
     </article>
   </section>
 
@@ -45,14 +51,28 @@
 
   <section class="stack">
     <div class="section-heading">
-      <h2>Bald fällig</h2>
-      <span class="section-heading__count">{{ soon_tasks|length }}</span>
+      <h2>Heute</h2>
+      <span class="section-heading__count">{{ sections.today|length }}</span>
     </div>
     <div class="task-grid">
-      {% for task in soon_tasks %}
+      {% for task in sections.today %}
         {{ task_card(task, current_user) }}
       {% else %}
-        <div class="empty-state">Gerade ist nichts bald fällig. Sehr stark.</div>
+        <div class="empty-state">Heute ist gerade nichts mehr offen. Sehr stark.</div>
+      {% endfor %}
+    </div>
+  </section>
+
+  <section class="stack">
+    <div class="section-heading">
+      <h2>Bald fällig</h2>
+      <span class="section-heading__count">{{ sections.soon|length }}</span>
+    </div>
+    <div class="task-grid">
+      {% for task in sections.soon %}
+        {{ task_card(task, current_user) }}
+      {% else %}
+        <div class="empty-state">Gerade ist nichts in den nächsten Tagen fällig.</div>
       {% endfor %}
     </div>
   </section>
@@ -70,18 +90,4 @@
       {% endfor %}
     </div>
   </section>
-
-  <section class="stack">
-    <div class="section-heading">
-      <h2>Erledigt</h2>
-      <span class="section-heading__count">{{ sections.completed|length }}</span>
-    </div>
-    <div class="task-grid">
-      {% for task in sections.completed %}
-        {{ task_card(task, current_user, compact=true) }}
-      {% else %}
-        <div class="empty-state">Noch keine erledigten Aufgaben in deiner Liste.</div>
-      {% endfor %}
-    </div>
-  </section>
 {% endblock %}