feat(home): URL-Import-Shortcut auf Desktop
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m18s

Unter dem Hero-Suchfeld steht ab Viewport >=820px eine zweite kleine
Form mit „… oder Rezept-URL direkt einfügen"-Input und grünem
Importieren-Button. Beim Submit springt die App auf /preview?url=, wo
der bestehende Importer JSON-LD/Microdata extrahiert und die Vorschau
zum Bestätigen zeigt. Auf Mobile versteckt (per CSS), damit die
Hero-Area nicht überladen wird.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-18 12:37:10 +02:00
parent 61c1b9558e
commit ee783ff50b

View File

@@ -1,6 +1,7 @@
<script lang="ts">
import { onMount } from 'svelte';
import { page } from '$app/stores';
import { goto } from '$app/navigation';
import { CookingPot, X } from 'lucide-svelte';
import type { Snapshot } from './$types';
import type { SearchHit } from '$lib/server/recipes/search-local';
@@ -349,6 +350,15 @@
}
const activeSearch = $derived(query.trim().length > 3);
let importUrl = $state('');
function submitImport(e: SubmitEvent) {
e.preventDefault();
const url = importUrl.trim();
if (!url) return;
goto(`/preview?url=${encodeURIComponent(url)}`);
}
</script>
<section class="hero">
@@ -367,6 +377,17 @@
/>
</div>
</form>
<form class="import-url" onsubmit={submitImport}>
<input
type="url"
bind:value={importUrl}
placeholder="… oder Rezept-URL direkt einfügen"
aria-label="Rezept-URL importieren"
/>
<button type="submit" class="import-go" disabled={!importUrl.trim()}>
Importieren
</button>
</form>
</section>
{#if activeSearch}
@@ -584,6 +605,46 @@
/* Kein overflow:hidden — sonst clippt der Filter-Dropdown. */
position: relative;
}
.import-url {
display: none;
}
@media (min-width: 820px) {
.import-url {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
justify-content: center;
}
.import-url input {
flex: 1;
max-width: 520px;
padding: 0.65rem 0.9rem;
font-size: 0.95rem;
border: 1px solid #cfd9d1;
border-radius: 10px;
background: white;
min-height: 44px;
}
.import-url input:focus {
outline: 2px solid #2b6a3d;
outline-offset: 1px;
}
.import-go {
padding: 0.65rem 1.1rem;
background: #2b6a3d;
color: white;
border: 0;
border-radius: 10px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
min-height: 44px;
}
.import-go:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
.search-box:focus-within {
outline: 2px solid #2b6a3d;
outline-offset: 1px;