From ee783ff50b94cc4d402c56a4930bf1bbefbd059d Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 18 Apr 2026 12:37:10 +0200
Subject: [PATCH] feat(home): URL-Import-Shortcut auf Desktop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/routes/+page.svelte | 61 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e5a4f84..a23c0f4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -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;