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">
|
<script lang="ts">
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
import { page } from '$app/stores';
|
||||||
import { CookingPot, Globe, X } from 'lucide-svelte';
|
import { CookingPot, Globe, X } from 'lucide-svelte';
|
||||||
import type { SearchHit } from '$lib/server/recipes/search-local';
|
import type { SearchHit } from '$lib/server/recipes/search-local';
|
||||||
import type { WebHit } from '$lib/server/search/searxng';
|
import type { WebHit } from '$lib/server/search/searxng';
|
||||||
@@ -36,9 +37,27 @@
|
|||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
quote = randomQuote();
|
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();
|
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(() => {
|
$effect(() => {
|
||||||
const active = profileStore.active;
|
const active = profileStore.active;
|
||||||
if (!active) {
|
if (!active) {
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
|
import { BookmarkPlus } from 'lucide-svelte';
|
||||||
import RecipeView from '$lib/components/RecipeView.svelte';
|
import RecipeView from '$lib/components/RecipeView.svelte';
|
||||||
import { alertAction } from '$lib/client/confirm.svelte';
|
import { alertAction } from '$lib/client/confirm.svelte';
|
||||||
import type { Recipe } from '$lib/types';
|
import type { Recipe } from '$lib/types';
|
||||||
@@ -85,7 +86,12 @@
|
|||||||
{#snippet showActions()}
|
{#snippet showActions()}
|
||||||
<div class="save-bar">
|
<div class="save-bar">
|
||||||
<button class="btn primary" onclick={save} disabled={saving}>
|
<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>
|
||||||
<button type="button" class="btn ghost" onclick={() => history.back()}>Zurück</button>
|
<button type="button" class="btn ghost" onclick={() => history.back()}>Zurück</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user