Web Push Zustand und Deep Links stabilisieren

src/components/dashboard/dashboard-shell.tsx

@@ -39,7 +39,7 @@ import { alpha, useTheme } from "@mui/material/styles";
 import { signOut } from "next-auth/react";
 import { useRouter, useSearchParams } from "next/navigation";
 import type { FormEvent } from "react";
-import { startTransition, useEffect, useMemo, useState } from "react";
+import { startTransition, useEffect, useMemo, useRef, useState } from "react";
 
 import { BudgetColumn } from "@/components/dashboard/budget-column";
 import { ColorPickerField } from "@/components/dashboard/color-picker-field";
@@ -343,6 +343,7 @@ export function DashboardShell({
   const [desktopSection, setDesktopSection] = useState<DesktopSection>("overview");
   const [selectedCurrentPeriodId, setSelectedCurrentPeriodId] = useState(currentPeriodId);
   const [selectedMobileGroupId, setSelectedMobileGroupId] = useState(visibleGroups[0]?.id ?? "");
+  const [focusedBudgetId, setFocusedBudgetId] = useState<string | null>(null);
   const [backupFile, setBackupFile] = useState<File | null>(null);
   const [editingPasswordUserId, setEditingPasswordUserId] = useState<string | null>(null);
   const [editingUserId, setEditingUserId] = useState<string | null>(null);
@@ -359,6 +360,7 @@ export function DashboardShell({
   const [periodForm, setPeriodForm] = useState<PeriodFormState>(getSuggestedPeriodDraft(currentPeriod));
   const [periodEditForm, setPeriodEditForm] = useState<PeriodEditFormState>(getPeriodEditDraft(currentPeriod));
   const [pushStatus, setPushStatus] = useState<"idle" | "enabled" | "blocked" | "unsupported">("idle");
+  const handledDeepLinkRef = useRef<string | null>(null);
 	  useEffect(() => {
     setSelectedCurrentPeriodId(currentPeriodId);
     setPeriodForm(getSuggestedPeriodDraft(currentPeriod));
@@ -379,25 +381,102 @@ export function DashboardShell({
     const directGroupId = searchParams.get("group");
     const budgetId = searchParams.get("budget");
     const expenseId = searchParams.get("expense");
+    const deepLinkKey = [directGroupId, budgetId, expenseId].filter(Boolean).join(":");
+
+    if (!deepLinkKey) {
+      handledDeepLinkRef.current = null;
+      return;
+    }
+
+    if (handledDeepLinkRef.current === deepLinkKey) {
+      return;
+    }
+
+    const budgetGroup = visibleGroups.find((group) => budgetId && group.budgets.some((budget) => budget.id === budgetId));
+    const expenseBudget = visibleGroups
+      .flatMap((group) => group.budgets)
+      .find((budget) => expenseId && budget.expenses.some((expense) => expense.id === expenseId));
     const targetGroupId =
       (directGroupId && visibleGroups.some((group) => group.id === directGroupId) ? directGroupId : null) ??
-      visibleGroups.find((group) => budgetId && group.budgets.some((budget) => budget.id === budgetId))?.id ??
+      budgetGroup?.id ??
       visibleGroups.find((group) =>
         expenseId && group.budgets.some((budget) => budget.expenses.some((expense) => expense.id === expenseId))
       )?.id ??
       null;
+    const targetBudgetId = budgetId ?? expenseBudget?.id ?? null;
 
     if (targetGroupId) {
+      handledDeepLinkRef.current = deepLinkKey;
       setSelectedMobileGroupId(targetGroupId);
+      setFocusedBudgetId(targetBudgetId);
       setMobileSection("overview");
       setDesktopSection("overview");
-      return;
+      router.replace("/", { scroll: false });
     }
+  }, [router, searchParams, visibleGroups]);
 
+  useEffect(() => {
     if (!visibleGroups.some((group) => group.id === selectedMobileGroupId)) {
       setSelectedMobileGroupId(visibleGroups[0]?.id ?? "");
     }
-  }, [searchParams, selectedMobileGroupId, visibleGroups]);
+  }, [selectedMobileGroupId, visibleGroups]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function syncExistingPushSubscription() {
+      if (!("serviceWorker" in navigator) || !("PushManager" in window) || !("Notification" in window)) {
+        if (!cancelled) {
+          setPushStatus("unsupported");
+        }
+        return;
+      }
+
+      if (Notification.permission === "denied") {
+        if (!cancelled) {
+          setPushStatus("blocked");
+        }
+        return;
+      }
+
+      if (Notification.permission !== "granted") {
+        if (!cancelled) {
+          setPushStatus("idle");
+        }
+        return;
+      }
+
+      const registration = await navigator.serviceWorker.ready.catch(() => null);
+      const subscription = await registration?.pushManager.getSubscription().catch(() => null);
+
+      if (cancelled) {
+        return;
+      }
+
+      if (!subscription) {
+        setPushStatus("idle");
+        return;
+      }
+
+      setPushStatus("enabled");
+
+      await fetch("/api/push-subscriptions", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(subscription.toJSON())
+      }).catch(() => {
+        // Der Browser hat noch eine Subscription; ein temporärer Sync-Fehler soll den UI-Status nicht zurücksetzen.
+      });
+    }
+
+    syncExistingPushSubscription();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
 
   useEffect(() => {
     if (visibleGroups.length === 0) {
@@ -2448,7 +2527,10 @@ export function DashboardShell({
           select
           label="AG auswählen"
           value={selectedMobileGroup?.id ?? ""}
-          onChange={(event) => setSelectedMobileGroupId(event.target.value)}
+          onChange={(event) => {
+            setSelectedMobileGroupId(event.target.value);
+            setFocusedBudgetId(null);
+          }}
           fullWidth
         >
           {visibleGroups.map((group) => (
@@ -2481,6 +2563,7 @@ export function DashboardShell({
 	                busy={busy}
 	                approvalThreshold={approvalThreshold}
 	                requiredApprovalTypes={settings.requiredApprovalTypes}
+	                focusBudgetId={focusedBudgetId}
 	                onApprove={handleApprove}
                 onMarkPaid={handleMarkPaid}
                 onDocument={handleDocument}
@@ -2527,6 +2610,7 @@ export function DashboardShell({
 	                  busy={busy}
 	                  approvalThreshold={approvalThreshold}
 	                  requiredApprovalTypes={settings.requiredApprovalTypes}
+	                  focusBudgetId={focusedBudgetId}
 	                  onApprove={handleApprove}
                   onMarkPaid={handleMarkPaid}
                   onDocument={handleDocument}