feat: allow updating recurring task assignee

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/forms.py

@@ -66,6 +66,7 @@ class TaskForm(FlaskForm):
         validators=[DataRequired()],
     )
     active = BooleanField("Vorlage aktiv", default=True)
+    apply_assignment_to_template = BooleanField("Für Wiederholungen übernehmen")
     submit = SubmitField("Speichern")
 
     def validate(self, extra_validators=None):

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

@@ -3,6 +3,7 @@ from __future__ import annotations
 import calendar
 from collections import defaultdict
 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
@@ -99,6 +100,36 @@ def _archive_day_label(day: date, today: date) -> str:
     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)
+
+
+def _safe_referrer_target(fallback: str) -> str:
+    referrer = request.referrer
+    if not referrer:
+        return fallback
+
+    parts = urlsplit(referrer)
+    if parts.netloc and parts.netloc != request.host:
+        return fallback
+
+    query = dict(parse_qsl(parts.query, keep_blank_values=True))
+    query.pop("celebrate_points", None)
+    target = urlunsplit(("", "", parts.path or fallback, urlencode(query), parts.fragment))
+    if not target.startswith("/") or len(target) > 1200:
+        return fallback
+    return target
+
+
 @bp.route("/my-tasks")
 @login_required
 def my_tasks():
@@ -253,6 +284,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:
@@ -261,6 +293,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")
@@ -277,20 +310,24 @@ def quick_create():
                     flash(error, "error")
             for error in extra_errors:
                 flash(error, "error")
-            return redirect(request.referrer or url_for("tasks.my_tasks"))
+            return redirect(_safe_referrer_target(url_for("tasks.my_tasks")))
         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")
-        return redirect(request.referrer or url_for("tasks.my_tasks"))
+        return redirect(_safe_referrer_target(url_for("tasks.my_tasks")))
 
     if len(created_titles) == 1:
         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(
+        _safe_referrer_target(url_for("tasks.my_tasks")),
+        total_points,
+    )
 
 
 @bp.route("/tasks/<int:task_id>/edit", methods=["GET", "POST"])
@@ -340,7 +377,7 @@ def complete(task_id: int):
     choice = request.form.get("completed_for", "me")
     if task.is_completed:
         flash("Diese Aufgabe ist bereits erledigt.", "info")
-        return redirect(request.referrer or url_for("tasks.my_tasks"))
+        return redirect(_safe_referrer_target(url_for("tasks.my_tasks")))
 
     completed_by_id = current_user.id
     allowed_ids = {current_user.id}
@@ -353,9 +390,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(
+        _safe_referrer_target(url_for("tasks.my_tasks")),
+        awarded_points,
+    )
 
 
 @bp.route("/calendar")

app/services/tasks.py

@@ -66,19 +66,20 @@ def update_template_and_instance(task: TaskInstance, form) -> TaskInstance:
     template.title = form.title.data.strip()
     template.description = (form.description.data or "").strip()
     template.default_points = form.default_points.data
-    template.default_assigned_user_id = form.assigned_user_id.data
-    template.default_assigned_user_secondary_id = form.assigned_user_secondary_id.data or None
     template.recurrence_interval_unit = form.recurrence_interval_unit.data
     template.recurrence_interval_value = (
         form.recurrence_interval_value.data if form.recurrence_interval_unit.data != "none" else None
     )
     template.active = form.active.data
+    if form.apply_assignment_to_template.data:
+        template.default_assigned_user_id = form.assigned_user_id.data
+        template.default_assigned_user_secondary_id = form.assigned_user_secondary_id.data or None
 
     task.title = template.title
     task.description = template.description
-    task.assigned_user_id = template.default_assigned_user_id
-    task.assigned_user_secondary_id = template.default_assigned_user_secondary_id
-    task.points_awarded = effective_points(template.default_points, template.default_assigned_user_secondary_id)
+    task.assigned_user_id = form.assigned_user_id.data
+    task.assigned_user_secondary_id = form.assigned_user_secondary_id.data or None
+    task.points_awarded = effective_points(template.default_points, task.assigned_user_secondary_id)
     task.due_date = form.due_date.data
     refresh_task_status(task, form.due_date.data)
     db.session.commit()

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;
@@ -1442,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;
@@ -1478,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;
   }
@@ -1491,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;
   }
@@ -1583,9 +1611,27 @@ p {
 }
 
 .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 {
@@ -1594,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;
@@ -1651,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;
@@ -1854,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,12 +116,32 @@
   }
 
   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;
@@ -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/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/tasks/task_form.html

@@ -30,8 +30,15 @@
       </div>
 
       <div class="field">
+        {% if mode == 'edit' %}
+          <label for="{{ form.assigned_user_id.id }}">Zuständig für diese Aufgabe</label>
+        {% else %}
           {{ form.assigned_user_id.label }}
+        {% endif %}
         {{ form.assigned_user_id() }}
+        {% if mode == 'edit' %}
+          <small class="muted">Wiederholungen bleiben bei der ursprünglich vorgesehenen Person.</small>
+        {% endif %}
         {% for error in form.assigned_user_id.errors %}<small class="error">{{ error }}</small>{% endfor %}
       </div>
 
@@ -42,6 +49,13 @@
         {% for error in form.assigned_user_secondary_id.errors %}<small class="error">{{ error }}</small>{% endfor %}
       </div>
 
+      {% if mode == 'edit' %}
+        <label class="checkbox field--full">
+          {{ form.apply_assignment_to_template() }}
+          <span>Diese Zuständigkeit auch für zukünftige Wiederholungen übernehmen</span>
+        </label>
+      {% endif %}
+
       <div class="field">
         {{ form.due_date.label }}
         {{ form.due_date() }}