From 504fbb6cc6409ae774b7a55322d36eb9ee5d896e Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sun, 19 Apr 2026 13:50:46 +0200
Subject: [PATCH] refactor(view): TimeDisplay als eigenstaendige Component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

timeSummary-Formatierung in eine wiederverwendbare Component
gezogen. RecipeView liefert nur noch die drei Werte — zukuenftige
Call-Sites (Preview, Hover-Cards) koennen dieselbe Logik reusen.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/RecipeView.svelte  | 23 ++++++--------------
 src/lib/components/TimeDisplay.svelte | 30 +++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/components/TimeDisplay.svelte

diff --git a/src/lib/components/RecipeView.svelte b/src/lib/components/RecipeView.svelte
index e9ef736..ffedd54 100644
--- a/src/lib/components/RecipeView.svelte
+++ b/src/lib/components/RecipeView.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { scaleIngredients } from '$lib/recipes/scaler';
   import type { Recipe } from '$lib/types';
+  import TimeDisplay from '$lib/components/TimeDisplay.svelte';
 
   type Props = {
     recipe: Recipe;
@@ -41,15 +42,6 @@
     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}
@@ -79,9 +71,11 @@
           {/each}
         {/if}
       </div>
-      {#if timeSummary()}
-        <p class="times">{timeSummary()}</p>
-      {/if}
+      <TimeDisplay
+        prepTimeMin={recipe.prep_time_min}
+        cookTimeMin={recipe.cook_time_min}
+        totalTimeMin={recipe.total_time_min}
+      />
       {#if recipe.source_url}
         <p class="src">
           Quelle: <a href={recipe.source_url} target="_blank" rel="noopener">{recipe.source_domain}</a>
@@ -212,11 +206,6 @@
     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;
diff --git a/src/lib/components/TimeDisplay.svelte b/src/lib/components/TimeDisplay.svelte
new file mode 100644
index 0000000..6b3dd1c
--- /dev/null
+++ b/src/lib/components/TimeDisplay.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  type Props = {
+    prepTimeMin: number | null;
+    cookTimeMin: number | null;
+    totalTimeMin: number | null;
+  };
+
+  let { prepTimeMin, cookTimeMin, totalTimeMin }: Props = $props();
+
+  const summary = $derived.by(() => {
+    const parts: string[] = [];
+    if (prepTimeMin) parts.push(`Vorb. ${prepTimeMin} min`);
+    if (cookTimeMin) parts.push(`Kochen ${cookTimeMin} min`);
+    if (!prepTimeMin && !cookTimeMin && totalTimeMin)
+      parts.push(`Gesamt ${totalTimeMin} min`);
+    return parts.join(' · ');
+  });
+</script>
+
+{#if summary}
+  <p class="times">{summary}</p>
+{/if}
+
+<style>
+  .times {
+    margin: 0 0 0.25rem;
+    color: #666;
+    font-size: 0.9rem;
+  }
+</style>