refactor(home): URL-Import verzog ins Register
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m19s

Import-von-URL-Form war unter dem Hero-Suchfeld auf der Home-Seite —
dort etwas deplaziert, weil die Home-Seite primär Suche + Listen
zeigt. Jetzt sitzt das Feld oben auf der /recipes-Seite (Register),
dem natürlicheren Ort zum Verwalten der Sammlung. Link-Icon links,
grüner „Importieren"-Button rechts, auf allen Viewport-Größen sichtbar.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-18 14:04:11 +02:00
parent 49d4e60a1c
commit 351434f43d
2 changed files with 74 additions and 62 deletions

View File

@@ -1,10 +1,19 @@
<script lang="ts">
import { CookingPot } from 'lucide-svelte';
import { CookingPot, Link } from 'lucide-svelte';
import { goto } from '$app/navigation';
import type { PageData } from './$types';
let { data }: { data: PageData } = $props();
let filter = $state('');
let importUrl = $state('');
function submitImport(e: SubmitEvent) {
e.preventDefault();
const url = importUrl.trim();
if (!url) return;
goto(`/preview?url=${encodeURIComponent(url)}`);
}
// Umlaute und Diakritika auf Basis-Buchstaben normalisieren, damit
// "apfel" auch "Äpfel" findet und "A/Ä/O/Ö/U/Ü" im gleichen Section-Header landen.
@@ -61,6 +70,19 @@
<p class="sub">{data.recipes.length} Rezepte insgesamt</p>
</header>
<form class="import-url" onsubmit={submitImport}>
<span class="import-icon" aria-hidden="true"><Link size={16} strokeWidth={2} /></span>
<input
type="url"
bind:value={importUrl}
placeholder="Neues Rezept von URL importieren …"
aria-label="Rezept-URL importieren"
/>
<button type="submit" class="import-go" disabled={!importUrl.trim()}>
Importieren
</button>
</form>
<div class="filter-wrap">
<input
type="search"
@@ -124,6 +146,57 @@
color: #666;
font-size: 0.9rem;
}
.import-url {
display: flex;
align-items: stretch;
gap: 0.5rem;
margin: 0.5rem 0 0.75rem;
background: white;
border: 1px solid #cfd9d1;
border-radius: 12px;
padding: 0.25rem 0.25rem 0.25rem 0.75rem;
}
.import-url:focus-within {
outline: 2px solid #2b6a3d;
outline-offset: 1px;
}
.import-icon {
display: inline-flex;
align-items: center;
color: #6a7670;
}
.import-url input {
flex: 1;
border: 0;
background: transparent;
font-size: 0.95rem;
padding: 0.5rem 0.25rem;
min-height: 40px;
min-width: 0;
}
.import-url input:focus {
outline: none;
}
.import-go {
padding: 0 0.9rem;
background: #2b6a3d;
color: white;
border: 0;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
min-height: 40px;
flex-shrink: 0;
}
.import-go:hover:not(:disabled) {
background: #235532;
}
.import-go:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.filter-wrap {
position: sticky;
top: 57px;