From 1055a670dac65ec6f2cdf5fee42c4967d0ba8e92 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Fri, 17 Apr 2026 19:03:50 +0200
Subject: [PATCH] fix(preview): Save-Icon als Lucide, Query in URL persistent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/routes/+page.svelte         | 19 +++++++++++++++++++
 src/routes/preview/+page.svelte |  8 +++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3f55ce2..7dd93ee 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -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) {
diff --git a/src/routes/preview/+page.svelte b/src/routes/preview/+page.svelte
index 671bf50..47a155a 100644
--- a/src/routes/preview/+page.svelte
+++ b/src/routes/preview/+page.svelte
@@ -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>