diff --git a/src/routes/recipes/[id]/+page.svelte b/src/routes/recipes/[id]/+page.svelte index 4881d92..f23fa09 100644 --- a/src/routes/recipes/[id]/+page.svelte +++ b/src/routes/recipes/[id]/+page.svelte @@ -41,6 +41,24 @@ let saving = $state(false); let recipeState = $state(data.recipe); + // Einmalige Pulse-Animation beim Aktivieren (nicht beim Wieder-Abwählen). + // Per tick()-Zwischenschritt "aus → an" erzwingen, damit die Animation + // auch bei mehrmaligem Klick innerhalb weniger hundert ms neu startet. + let pulseFav = $state(false); + let pulseWish = $state(false); + + async function firePulse(which: 'fav' | 'wish') { + if (which === 'fav') { + pulseFav = false; + await tick(); + pulseFav = true; + } else { + pulseWish = false; + await tick(); + pulseWish = true; + } + } + async function saveRecipe(patch: { title: string; description: string | null; @@ -128,15 +146,17 @@ return; } const profileId = profileStore.active.id; - const method = isFav ? 'DELETE' : 'PUT'; + const wasFav = isFav; + const method = wasFav ? 'DELETE' : 'PUT'; await fetch(`/api/recipes/${data.recipe.id}/favorite`, { method, headers: { 'content-type': 'application/json' }, body: JSON.stringify({ profile_id: profileId }) }); - favoriteProfileIds = isFav + favoriteProfileIds = wasFav ? favoriteProfileIds.filter((id) => id !== profileId) : [...favoriteProfileIds, profileId]; + if (!wasFav) void firePulse('fav'); } async function logCooked() { @@ -258,7 +278,8 @@ return; } const profileId = profileStore.active.id; - if (onMyWishlist) { + const wasOn = onMyWishlist; + if (wasOn) { await fetch(`/api/wishlist/${data.recipe.id}?profile_id=${profileId}`, { method: 'DELETE' }); @@ -272,6 +293,7 @@ wishlistProfileIds = [...wishlistProfileIds, profileId]; } void wishlistStore.refresh(); + if (!wasOn) void firePulse('wish'); } // Wake-Lock — Bildschirm beim Kochen nicht dimmen lassen. @@ -387,11 +409,23 @@ {/if}
- -