refactor(view): TimeDisplay als eigenstaendige Component

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

@@ -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()}
+      <TimeDisplay
-        <p class="times">{timeSummary()}</p>
+        prepTimeMin={recipe.prep_time_min}
-      {/if}
+        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;

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>