kochwas/src/routes/+page.svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import type { SearchHit } from '$lib/server/recipes/search-local';

  let query = $state('');
  let recent = $state<SearchHit[]>([]);

  onMount(async () => {
    const res = await fetch('/api/recipes/search');
    const body = await res.json();
    recent = body.hits;
  });
</script>

<section class="hero">
  <h1>Kochwas</h1>
  <form method="GET" action="/search">
    <input
      type="search"
      name="q"
      bind:value={query}
      placeholder="Rezept suchen…"
      autocomplete="off"
      inputmode="search"
      aria-label="Suchbegriff"
    />
    <button type="submit" aria-label="Suchen">Suchen</button>
  </form>
</section>

{#if recent.length > 0}
  <section class="recent">
    <h2>Zuletzt hinzugefügt</h2>
    <ul class="cards">
      {#each recent as r (r.id)}
        <li>
          <a href={`/recipes/${r.id}`} class="card">
            {#if r.image_path}
              <img src={`/images/${r.image_path}`} alt="" loading="lazy" />
            {:else}
              <div class="placeholder">🥘</div>
            {/if}
            <div class="card-body">
              <div class="title">{r.title}</div>
              {#if r.source_domain}
                <div class="domain">{r.source_domain}</div>
              {/if}
            </div>
          </a>
        </li>
      {/each}
    </ul>
  </section>
{/if}

<style>
  .hero {
    text-align: center;
    padding: 3rem 0 1.5rem;
  }
  .hero h1 {
    font-size: clamp(2.2rem, 8vw, 3.5rem);
    margin: 0 0 1.5rem;
    color: #2b6a3d;
    letter-spacing: -0.02em;
  }
  form {
    display: flex;
    gap: 0.5rem;
  }
  input[type='search'] {
    flex: 1;
    padding: 0.9rem 1rem;
    font-size: 1.1rem;
    border: 1px solid #cfd9d1;
    border-radius: 10px;
    background: white;
    min-height: 48px;
  }
  input[type='search']:focus {
    outline: 2px solid #2b6a3d;
    outline-offset: 1px;
  }
  button {
    padding: 0.9rem 1.25rem;
    font-size: 1rem;
    border-radius: 10px;
    border: 0;
    background: #2b6a3d;
    color: white;
    min-height: 48px;
    cursor: pointer;
  }
  .recent {
    margin-top: 2rem;
  }
  .recent h2 {
    font-size: 1.05rem;
    color: #444;
    margin: 0 0 0.75rem;
  }
  .cards {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
  }
  .card {
    display: block;
    background: white;
    border: 1px solid #e4eae7;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.1s;
  }
  .card:active {
    transform: scale(0.98);
  }
  .card img,
  .placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #eef3ef;
    display: grid;
    place-items: center;
    font-size: 2rem;
  }
  .card-body {
    padding: 0.6rem 0.75rem 0.75rem;
  }
  .title {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.25;
  }
  .domain {
    font-size: 0.8rem;
    color: #888;
    margin-top: 0.25rem;
  }
</style>