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
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:
@@ -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) {
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user