i18n: TimePicker + NutritionFactsBox — final component sweep

Wraps up the last two shared UI components with hardcoded strings.
Adds time_picker.* (4 keys) and nutrition_facts.* (3 keys) namespaces.

TimePicker:
- svelte-i18n import added
- Hour + Minute column labels above the wheel spinners
- Cancel + Set Time footer buttons

NutritionFactsBox (FDA-style panel used across recipe/food/meal cards):
- svelte-i18n import added
- Nutrition Facts panel heading
- Serving Size row label
- Amount Per Serving subhead

Author: thebigjoe1

src/components/ui/NutritionFactsBox.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { _ } from 'svelte-i18n';
   /**
    * NutritionFactsBox — FDA-style "Nutrition Facts" label.
    *
@@ -103,13 +104,13 @@
 
 {#if rows.length > 0}
 <div class="nfacts">
-  <div class="title">Nutrition Facts</div>
+  <div class="title">{$_('nutrition_facts.title')}</div>
 
   {#if servingsPerContainer}
     <div class="serving-line">{servingsPerContainer} servings per container</div>
   {/if}
   <div class="serving-line">
-    <strong>Serving Size</strong>
+    <strong>{$_('nutrition_facts.serving_size')}</strong>
     <span class="serving-detail">
       {#if servingDescription}
         {servingDescription}
@@ -126,7 +127,7 @@
   <div class="rule thick"></div>
 
   {#if caloriesNut}
-    <div class="amount-label">Amount Per Serving</div>
+    <div class="amount-label">{$_('nutrition_facts.amount_per')}</div>
     <div class="cal-row">
       <span class="cal-name">{caloriesRowLabel}</span>
       <span class="cal-value">

src/components/ui/TimePicker.svelte

@@ -1,5 +1,6 @@
 <script>
   import { createEventDispatcher } from 'svelte';
+  import { _ } from 'svelte-i18n';
   import { portal } from '../../lib/portal.js';
   import { timeFormat } from '../../stores/settings.js';
 
@@ -90,7 +91,7 @@
       <!-- Hour / Minute / AM-PM columns -->
       <div class="tp-columns">
         <div class="tp-col">
-          <div class="tp-col-label">Hour</div>
+          <div class="tp-col-label">{$_('time_picker.hour')}</div>
           <div class="tp-grid" class:tp-grid-4={!is24} class:tp-grid-6={is24}>
             {#each HOURS as h}
               <button class="tp-cell" class:tp-sel={selHour === h} on:click={() => selHour = h}>
@@ -101,7 +102,7 @@
         </div>
 
         <div class="tp-col">
-          <div class="tp-col-label">Minute</div>
+          <div class="tp-col-label">{$_('time_picker.minute')}</div>
           <div class="tp-grid tp-grid-4">
             {#each MINUTES as m}
               <button class="tp-cell" class:tp-sel={selMinute === m} on:click={() => selMinute = m}>{String(m).padStart(2, '0')}</button>
@@ -122,8 +123,8 @@
 
       <!-- Actions -->
       <div class="tp-actions">
-        <button class="btn btn-ghost" on:click={() => open = false}>Cancel</button>
-        <button class="btn btn-primary" on:click={_confirm}>Set Time</button>
+        <button class="btn btn-ghost" on:click={() => open = false}>{$_('time_picker.cancel')}</button>
+        <button class="btn btn-primary" on:click={_confirm}>{$_('time_picker.set_time')}</button>
       </div>
     </div>
   </div>

src/i18n/en.json

@@ -973,6 +973,17 @@
     "hex_code":               "Hex Code",
     "apply_color":            "Apply Color"
   },
+  "time_picker": {
+    "hour":          "Hour",
+    "minute":        "Minute",
+    "cancel":        "Cancel",
+    "set_time":      "Set Time"
+  },
+  "nutrition_facts": {
+    "title":         "Nutrition Facts",
+    "serving_size":  "Serving Size",
+    "amount_per":    "Amount Per Serving"
+  },
   "fasting_insights": {
     "title":               "Fasting",
     "avg_duration":        "Avg duration",