From 3906781c4e472f14eef03f0830eee47453e1e318 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 18 Apr 2026 16:54:03 +0200
Subject: [PATCH] feat(pwa): Schreib-Aktionen zeigen Offline-Toast statt
 stillem Fail
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Neuer Helper requireOnline(action) prüft vor jedem Schreib-Fetch
den Online-Status. Offline: ein Toast erscheint ("Die Aktion braucht
eine Internet-Verbindung."), Aktion bricht sauber ab. Der Button-
State bleibt unverändert (kein optimistisches Update, das gleich
wieder zurückgedreht werden müsste).

Eingebaut in Rezept-Detail (8 Handler), Register (2), Wunschliste
(2), Admin Domains/Profile/Backup, Home-Dismiss.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/client/require-online.ts       | 10 ++++++++++
 src/routes/+page.svelte                |  2 ++
 src/routes/admin/domains/+page.svelte  |  4 ++++
 src/routes/admin/profiles/+page.svelte |  4 ++++
 src/routes/recipes/+page.svelte        |  3 +++
 src/routes/recipes/[id]/+page.svelte   |  9 +++++++++
 src/routes/wishlist/+page.svelte       |  3 +++
 7 files changed, 35 insertions(+)
 create mode 100644 src/lib/client/require-online.ts

diff --git a/src/lib/client/require-online.ts b/src/lib/client/require-online.ts
new file mode 100644
index 0000000..20e7c31
--- /dev/null
+++ b/src/lib/client/require-online.ts
@@ -0,0 +1,10 @@
+import { network } from './network.svelte';
+import { toastStore } from './toast.svelte';
+
+// Soll vor jedem Schreib-Fetch aufgerufen werden. Liefert true wenn
+// online (User darf weitermachen) oder false + Toast wenn offline.
+export function requireOnline(action = 'Die Aktion'): boolean {
+  if (network.online) return true;
+  toastStore.error(`${action} braucht eine Internet-Verbindung.`);
+  return false;
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e75575a..504923e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -10,6 +10,7 @@
   import SearchFilter from '$lib/components/SearchFilter.svelte';
   import { profileStore } from '$lib/client/profile.svelte';
   import { searchFilterStore } from '$lib/client/search-filter.svelte';
+  import { requireOnline } from '$lib/client/require-online';
 
   const LOCAL_PAGE = 30;
 
@@ -357,6 +358,7 @@
   async function dismissFromRecent(recipeId: number, e: MouseEvent) {
     e.preventDefault();
     e.stopPropagation();
+    if (!requireOnline('Das Entfernen')) return;
     recent = recent.filter((r) => r.id !== recipeId);
     await fetch(`/api/recipes/${recipeId}`, {
       method: 'PATCH',
diff --git a/src/routes/admin/domains/+page.svelte b/src/routes/admin/domains/+page.svelte
index 6a5711e..77ad96e 100644
--- a/src/routes/admin/domains/+page.svelte
+++ b/src/routes/admin/domains/+page.svelte
@@ -3,6 +3,7 @@
   import { Pencil, Check, X, Globe } from 'lucide-svelte';
   import type { AllowedDomain } from '$lib/types';
   import { confirmAction, alertAction } from '$lib/client/confirm.svelte';
+  import { requireOnline } from '$lib/client/require-online';
 
   let domains = $state<AllowedDomain[]>([]);
   let loading = $state(true);
@@ -25,6 +26,7 @@
   async function add() {
     errored = null;
     if (!newDomain.trim()) return;
+    if (!requireOnline('Das Hinzufügen')) return;
     adding = true;
     const res = await fetch('/api/domains', {
       method: 'POST',
@@ -59,6 +61,7 @@
 
   async function saveEdit(d: AllowedDomain) {
     if (!editDomain.trim()) return;
+    if (!requireOnline('Das Speichern')) return;
     saving = true;
     try {
       const res = await fetch(`/api/domains/${d.id}`, {
@@ -92,6 +95,7 @@
       destructive: true
     });
     if (!ok) return;
+    if (!requireOnline('Das Entfernen')) return;
     await fetch(`/api/domains/${d.id}`, { method: 'DELETE' });
     await load();
   }
diff --git a/src/routes/admin/profiles/+page.svelte b/src/routes/admin/profiles/+page.svelte
index 9a58807..52010aa 100644
--- a/src/routes/admin/profiles/+page.svelte
+++ b/src/routes/admin/profiles/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { profileStore } from '$lib/client/profile.svelte';
   import { confirmAction, alertAction } from '$lib/client/confirm.svelte';
+  import { requireOnline } from '$lib/client/require-online';
 
   let newName = $state('');
   let newEmoji = $state('🍳');
@@ -10,6 +11,7 @@
   async function add() {
     errored = null;
     if (!newName.trim()) return;
+    if (!requireOnline('Das Anlegen')) return;
     adding = true;
     try {
       await profileStore.create(newName.trim(), newEmoji || null);
@@ -24,6 +26,7 @@
   async function rename(id: number, currentName: string) {
     const next = prompt('Neuer Name:', currentName);
     if (!next || next === currentName) return;
+    if (!requireOnline('Das Umbenennen')) return;
     const res = await fetch(`/api/profiles/${id}`, {
       method: 'PATCH',
       headers: { 'content-type': 'application/json' },
@@ -49,6 +52,7 @@
       destructive: true
     });
     if (!ok) return;
+    if (!requireOnline('Das Löschen')) return;
     await fetch(`/api/profiles/${id}`, { method: 'DELETE' });
     if (profileStore.activeId === id) profileStore.clear();
     await profileStore.load();
diff --git a/src/routes/recipes/+page.svelte b/src/routes/recipes/+page.svelte
index 5efbdd6..35422a1 100644
--- a/src/routes/recipes/+page.svelte
+++ b/src/routes/recipes/+page.svelte
@@ -3,6 +3,7 @@
   import { CookingPot, Link, Plus, ChevronDown, Pencil } from 'lucide-svelte';
   import { goto } from '$app/navigation';
   import { alertAction } from '$lib/client/confirm.svelte';
+  import { requireOnline } from '$lib/client/require-online';
   import type { PageData } from './$types';
 
   let { data }: { data: PageData } = $props();
@@ -35,12 +36,14 @@
     e.preventDefault();
     const url = importUrl.trim();
     if (!url) return;
+    if (!requireOnline('Der URL-Import')) return;
     importOpen = false;
     goto(`/preview?url=${encodeURIComponent(url)}`);
   }
 
   async function createBlank() {
     if (creatingBlank) return;
+    if (!requireOnline('Das Anlegen')) return;
     menuOpen = false;
     creatingBlank = true;
     try {
diff --git a/src/routes/recipes/[id]/+page.svelte b/src/routes/recipes/[id]/+page.svelte
index f23fa09..5355783 100644
--- a/src/routes/recipes/[id]/+page.svelte
+++ b/src/routes/recipes/[id]/+page.svelte
@@ -20,6 +20,7 @@
   import { profileStore } from '$lib/client/profile.svelte';
   import { wishlistStore } from '$lib/client/wishlist.svelte';
   import { confirmAction, alertAction } from '$lib/client/confirm.svelte';
+  import { requireOnline } from '$lib/client/require-online';
   import type { CommentRow } from '$lib/server/recipes/actions';
 
   let { data } = $props();
@@ -69,6 +70,7 @@
     ingredients: typeof data.recipe.ingredients;
     steps: typeof data.recipe.steps;
   }) {
+    if (!requireOnline('Das Speichern')) return;
     saving = true;
     try {
       const res = await fetch(`/api/recipes/${data.recipe.id}`, {
@@ -127,6 +129,7 @@
       });
       return;
     }
+    if (!requireOnline('Das Rating')) return;
     await fetch(`/api/recipes/${data.recipe.id}/rating`, {
       method: 'PUT',
       headers: { 'content-type': 'application/json' },
@@ -145,6 +148,7 @@
       });
       return;
     }
+    if (!requireOnline('Das Favorit-Setzen')) return;
     const profileId = profileStore.active.id;
     const wasFav = isFav;
     const method = wasFav ? 'DELETE' : 'PUT';
@@ -167,6 +171,7 @@
       });
       return;
     }
+    if (!requireOnline('Der Kochjournal-Eintrag')) return;
     const res = await fetch(`/api/recipes/${data.recipe.id}/cooked`, {
       method: 'POST',
       headers: { 'content-type': 'application/json' },
@@ -188,6 +193,7 @@
       });
       return;
     }
+    if (!requireOnline('Das Speichern des Kommentars')) return;
     const text = newComment.trim();
     if (!text) return;
     const res = await fetch(`/api/recipes/${data.recipe.id}/comments`, {
@@ -219,6 +225,7 @@
       destructive: true
     });
     if (!ok) return;
+    if (!requireOnline('Das Löschen')) return;
     await fetch(`/api/recipes/${data.recipe.id}`, { method: 'DELETE' });
     goto('/');
   }
@@ -242,6 +249,7 @@
       editingTitle = false;
       return;
     }
+    if (!requireOnline('Das Umbenennen')) return;
     const res = await fetch(`/api/recipes/${data.recipe.id}`, {
       method: 'PATCH',
       headers: { 'content-type': 'application/json' },
@@ -277,6 +285,7 @@
       });
       return;
     }
+    if (!requireOnline('Das Wunschlisten-Setzen')) return;
     const profileId = profileStore.active.id;
     const wasOn = onMyWishlist;
     if (wasOn) {
diff --git a/src/routes/wishlist/+page.svelte b/src/routes/wishlist/+page.svelte
index deb7c33..20d9f2b 100644
--- a/src/routes/wishlist/+page.svelte
+++ b/src/routes/wishlist/+page.svelte
@@ -4,6 +4,7 @@
   import { profileStore } from '$lib/client/profile.svelte';
   import { wishlistStore } from '$lib/client/wishlist.svelte';
   import { alertAction, confirmAction } from '$lib/client/confirm.svelte';
+  import { requireOnline } from '$lib/client/require-online';
   import type { WishlistEntry, SortKey } from '$lib/server/wishlist/repository';
 
   const SORT_OPTIONS: { value: SortKey; label: string }[] = [
@@ -41,6 +42,7 @@
       });
       return;
     }
+    if (!requireOnline('Die Wunschlisten-Aktion')) return;
     const profileId = profileStore.active.id;
     if (entry.on_my_wishlist) {
       await fetch(`/api/wishlist/${entry.recipe_id}?profile_id=${profileId}`, {
@@ -65,6 +67,7 @@
       destructive: true
     });
     if (!ok) return;
+    if (!requireOnline('Das Entfernen')) return;
     await fetch(`/api/wishlist/${entry.recipe_id}?all=true`, { method: 'DELETE' });
     await load();
     void wishlistStore.refresh();