From 8df09b1134adb77074fb59004c4e93ce61dfcafe Mon Sep 17 00:00:00 2001
From: Hendrik <hsiegeln@gmx.net>
Date: Fri, 17 Apr 2026 15:28:22 +0200
Subject: [PATCH] feat(ui): add unified RecipeView component with tabs and
 portion scaling

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/RecipeView.svelte | 314 +++++++++++++++++++++++++++
 1 file changed, 314 insertions(+)
 create mode 100644 src/lib/components/RecipeView.svelte

diff --git a/src/lib/components/RecipeView.svelte b/src/lib/components/RecipeView.svelte
new file mode 100644
index 0000000..c93c9d0
--- /dev/null
+++ b/src/lib/components/RecipeView.svelte
@@ -0,0 +1,314 @@
+<script lang="ts">
+  import { scaleIngredients } from '$lib/server/recipes/scaler';
+  import type { Recipe } from '$lib/types';
+
+  type Props = {
+    recipe: Recipe;
+    showActions?: import('svelte').Snippet;
+    banner?: import('svelte').Snippet;
+  };
+
+  let { recipe, showActions, banner }: Props = $props();
+
+  const defaultServings = $derived(recipe.servings_default ?? 4);
+  let servingsOverride = $state<number | null>(null);
+  const servings = $derived(servingsOverride ?? defaultServings);
+  const factor = $derived(servings / defaultServings);
+  const scaled = $derived(scaleIngredients(recipe.ingredients, factor));
+
+  let tab = $state<'ing' | 'prep'>('ing');
+
+  function decr() {
+    if (servings > 1) servingsOverride = servings - 1;
+  }
+  function incr() {
+    if (servings < 100) servingsOverride = servings + 1;
+  }
+
+  function formatQty(q: number | null): string {
+    if (q === null) return '';
+    if (Number.isInteger(q)) return String(q);
+    return q.toLocaleString('de-DE', { maximumFractionDigits: 2 });
+  }
+
+  function timeSummary(): string {
+    const parts: string[] = [];
+    if (recipe.prep_time_min) parts.push(`Vorb. ${recipe.prep_time_min} min`);
+    if (recipe.cook_time_min) parts.push(`Kochen ${recipe.cook_time_min} min`);
+    if (!recipe.prep_time_min && !recipe.cook_time_min && recipe.total_time_min)
+      parts.push(`Gesamt ${recipe.total_time_min} min`);
+    return parts.join(' · ');
+  }
+</script>
+
+{#if banner}
+  {@render banner()}
+{/if}
+
+<article class="recipe">
+  <header class="hdr">
+    {#if recipe.image_path}
+      <img src={`/images/${recipe.image_path}`} alt="" class="cover" loading="eager" />
+    {/if}
+    <div class="hdr-body">
+      <h1>{recipe.title}</h1>
+      {#if recipe.description}
+        <p class="desc">{recipe.description}</p>
+      {/if}
+      <div class="meta">
+        {#if recipe.category}<span class="pill">{recipe.category}</span>{/if}
+        {#if recipe.cuisine}<span class="pill">{recipe.cuisine}</span>{/if}
+        {#if recipe.tags}
+          {#each recipe.tags.slice(0, 6) as t (t)}
+            <span class="tag">#{t}</span>
+          {/each}
+        {/if}
+      </div>
+      {#if timeSummary()}
+        <p class="times">{timeSummary()}</p>
+      {/if}
+      {#if recipe.source_url}
+        <p class="src">
+          Quelle: <a href={recipe.source_url} target="_blank" rel="noopener">{recipe.source_domain}</a>
+        </p>
+      {/if}
+    </div>
+  </header>
+
+  {#if showActions}
+    <div class="actions">
+      {@render showActions()}
+    </div>
+  {/if}
+
+  <div class="tabs" role="tablist">
+    <button
+      role="tab"
+      aria-selected={tab === 'ing'}
+      class="tab"
+      class:active={tab === 'ing'}
+      onclick={() => (tab = 'ing')}
+    >
+      Zutaten
+    </button>
+    <button
+      role="tab"
+      aria-selected={tab === 'prep'}
+      class="tab"
+      class:active={tab === 'prep'}
+      onclick={() => (tab = 'prep')}
+    >
+      Zubereitung
+    </button>
+  </div>
+
+  {#if tab === 'ing'}
+    <section class="ingredients" role="tabpanel">
+      <div class="servings">
+        <button class="srv-btn" aria-label="Weniger" onclick={decr}>−</button>
+        <div class="srv-value">
+          <strong>{servings}</strong>
+          <span>{recipe.servings_unit ?? 'Portionen'}</span>
+        </div>
+        <button class="srv-btn" aria-label="Mehr" onclick={incr}>+</button>
+      </div>
+      <ul class="ing-list">
+        {#each scaled as ing, i (i)}
+          <li>
+            {#if ing.quantity !== null || ing.unit}
+              <span class="qty">
+                {formatQty(ing.quantity)}
+                {#if ing.unit}
+                  {' '}{ing.unit}
+                {/if}
+              </span>
+            {/if}
+            <span class="name">
+              {ing.name}
+              {#if ing.note}<span class="note"> ({ing.note})</span>{/if}
+            </span>
+          </li>
+        {/each}
+      </ul>
+    </section>
+  {:else}
+    <section class="steps" role="tabpanel">
+      <ol>
+        {#each recipe.steps as step (step.position)}
+          <li>{step.text}</li>
+        {/each}
+      </ol>
+    </section>
+  {/if}
+</article>
+
+<style>
+  .recipe {
+    padding-bottom: 2rem;
+  }
+  .hdr {
+    margin: 0 -1rem 1rem;
+  }
+  .cover {
+    display: block;
+    width: 100%;
+    aspect-ratio: 16 / 10;
+    object-fit: cover;
+    background: #eef3ef;
+  }
+  .hdr-body {
+    padding: 1rem 1rem 0.25rem;
+  }
+  h1 {
+    font-size: clamp(1.5rem, 5.5vw, 2rem);
+    line-height: 1.15;
+    margin: 0 0 0.4rem;
+  }
+  .desc {
+    color: #555;
+    margin: 0 0 0.5rem;
+    line-height: 1.4;
+  }
+  .meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    margin-bottom: 0.5rem;
+  }
+  .pill {
+    padding: 0.15rem 0.55rem;
+    background: #eaf4ed;
+    border-radius: 999px;
+    font-size: 0.8rem;
+    color: #2b6a3d;
+  }
+  .tag {
+    font-size: 0.8rem;
+    color: #888;
+  }
+  .times {
+    margin: 0 0 0.25rem;
+    color: #666;
+    font-size: 0.9rem;
+  }
+  .src {
+    margin: 0;
+    font-size: 0.85rem;
+    color: #888;
+  }
+  .actions {
+    margin: 0 0 1rem;
+  }
+
+  .tabs {
+    display: flex;
+    gap: 0;
+    border-bottom: 1px solid #e4eae7;
+    margin-bottom: 1rem;
+    position: sticky;
+    top: 57px;
+    background: #f8faf8;
+    z-index: 5;
+  }
+  .tab {
+    flex: 1;
+    background: none;
+    border: 0;
+    padding: 0.9rem 0;
+    font-size: 1rem;
+    cursor: pointer;
+    color: #666;
+    border-bottom: 3px solid transparent;
+    min-height: 48px;
+  }
+  .tab.active {
+    color: #2b6a3d;
+    border-bottom-color: #2b6a3d;
+    font-weight: 600;
+  }
+
+  .servings {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    justify-content: center;
+    background: white;
+    border: 1px solid #e4eae7;
+    border-radius: 12px;
+    padding: 0.6rem 1rem;
+    margin-bottom: 1rem;
+  }
+  .srv-btn {
+    width: 44px;
+    height: 44px;
+    border: 1px solid #cfd9d1;
+    background: white;
+    border-radius: 10px;
+    font-size: 1.4rem;
+    cursor: pointer;
+  }
+  .srv-value {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 80px;
+  }
+  .srv-value strong {
+    font-size: 1.25rem;
+  }
+  .srv-value span {
+    color: #888;
+    font-size: 0.85rem;
+  }
+
+  .ing-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  .ing-list li {
+    display: flex;
+    gap: 0.75rem;
+    padding: 0.7rem 0.25rem;
+    border-bottom: 1px solid #edf1ee;
+    font-size: 1rem;
+    line-height: 1.4;
+  }
+  .qty {
+    min-width: 5rem;
+    font-weight: 600;
+    color: #2b6a3d;
+  }
+  .note {
+    color: #888;
+    font-size: 0.9em;
+  }
+
+  .steps ol {
+    padding-left: 0;
+    list-style: none;
+    counter-reset: step;
+  }
+  .steps li {
+    counter-increment: step;
+    position: relative;
+    padding: 0.8rem 0 0.8rem 3rem;
+    border-bottom: 1px solid #edf1ee;
+    line-height: 1.5;
+  }
+  .steps li::before {
+    content: counter(step);
+    position: absolute;
+    left: 0;
+    top: 0.8rem;
+    width: 2.1rem;
+    height: 2.1rem;
+    background: #2b6a3d;
+    color: white;
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    font-weight: 700;
+    font-size: 0.95rem;
+  }
+</style>