fix(preview): Save-Icon als Lucide, Query in URL persistent
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m19s

1. "💾 In meine Sammlung speichern" → Lucide BookmarkPlus + Text.
   Letzter Emoji auf den wichtigen UI-Flächen ist damit weg.

2. Query auf der Startseite wird per history.replaceState nach ?q=…
   in die URL gespiegelt. Folge:
   - User tippt "Pizza" → Ergebnisse erscheinen
   - Klick auf Vorschau pusht neue History-Entry /preview?url=…
   - "Zurück" landet wieder auf /?q=Pizza
   - onMount liest q aus URL, setzt query, Debounce-Effekt feuert,
     Ergebnisse sind wieder da.
   replaceState statt pushState beim Tippen → keine History-Spam-Einträge.
This commit is contained in:
hsiegeln
2026-04-17 19:03:50 +02:00
parent 7cac02de5a
commit 1055a670da
2 changed files with 26 additions and 1 deletions

View File

@@ -1,5 +1,6 @@
<script lang="ts">
import { onMount } from 'svelte';
import { page } from '$app/stores';
import { CookingPot, Globe, X } from 'lucide-svelte';
import type { SearchHit } from '$lib/server/recipes/search-local';
import type { WebHit } from '$lib/server/search/searxng';
@@ -36,9 +37,27 @@
onMount(() => {
quote = randomQuote();
// Restore query from URL so history.back() from preview/recipe
// brings the user back to the same search results.
const urlQ = ($page.url.searchParams.get('q') ?? '').trim();
if (urlQ) query = urlQ;
void loadRecent();
});
// Sync current query back into the URL as ?q=... via replaceState,
// without spamming the history stack. Pushing a new entry happens only
// when the user clicks a result or otherwise navigates away.
$effect(() => {
if (typeof window === 'undefined') return;
const q = query.trim();
const url = new URL(window.location.href);
const current = url.searchParams.get('q') ?? '';
if (q === current) return;
if (q) url.searchParams.set('q', q);
else url.searchParams.delete('q');
history.replaceState(history.state, '', url.toString());
});
$effect(() => {
const active = profileStore.active;
if (!active) {

View File

@@ -1,6 +1,7 @@
<script lang="ts">
import { page } from '$app/stores';
import { goto } from '$app/navigation';
import { BookmarkPlus } from 'lucide-svelte';
import RecipeView from '$lib/components/RecipeView.svelte';
import { alertAction } from '$lib/client/confirm.svelte';
import type { Recipe } from '$lib/types';
@@ -85,7 +86,12 @@
{#snippet showActions()}
<div class="save-bar">
<button class="btn primary" onclick={save} disabled={saving}>
{saving ? 'Speichern…' : '💾 In meine Sammlung speichern'}
{#if saving}
<span>Speichern…</span>
{:else}
<BookmarkPlus size={18} strokeWidth={2} />
<span>In meine Sammlung speichern</span>
{/if}
</button>
<button type="button" class="btn ghost" onclick={() => history.back()}>Zurück</button>
</div>