nutrition

src/features/catalogue/CatalogueDetailDrawer.tsx

@@ -18,6 +18,7 @@ import {
 import { categoryForCatalogueProduct } from '@/features/store-admin/productCategory';
 import { aisleForCategory } from '@/features/store-admin/appAisle';
 import { HealthScorePanel } from '@/features/store-admin/HealthScorePanel';
+import { NutritionTable } from '@/features/catalogue/NutritionPanel';
 
 /**
  * One global-catalogue product, in full.
@@ -202,7 +203,7 @@ export function CatalogueDetailDrawer({
         category={product.category}
       />
 
-      {product.highlights?.length || product.nutrients?.length ? (
+      {product.highlights?.length || product.nutrients?.length || product.nutrition?.items?.length ? (
         <div className="drawer-bullets">
           {product.highlights?.length ? (
             <div className="drawer-section">
@@ -210,7 +211,13 @@ export function CatalogueDetailDrawer({
               <Bullets items={product.highlights} />
             </div>
           ) : null}
-          {product.nutrients?.length ? (
+          {/* The structured panel wins where the catalogue has one: it lines the
+              figures up so two products can be compared down a column, which is
+              most of what a nutrition table is for. The lines are the fallback
+              for every row the agent team has not reached yet. */}
+          {product.nutrition?.items?.length ? (
+            <NutritionTable panel={product.nutrition} />
+          ) : product.nutrients?.length ? (
             <div className="drawer-section">
               <h4 className="drawer-section-title">Nutrition</h4>
               <Bullets items={product.nutrients} />

src/features/catalogue/NutritionPanel.tsx

@@ -0,0 +1,80 @@
+import type { NutritionPanel as Panel } from '@/api/types';
+
+/**
+ * A nutrition panel, laid out the way a label is.
+ *
+ * ── Why this is not bullets ─────────────────────────────────────────────────
+ *
+ * Nutrition used to render through `Bullets`, because the catalogue only ever
+ * held display strings — "Energy 350kcal" — and a list was the honest shape for
+ * a list. The catalogue now carries a structured panel, and a structured panel
+ * read as bullets is worse than either: the figures no longer line up, so the
+ * eye cannot run down a column to compare two products, which is most of what a
+ * nutrition table is for.
+ *
+ * So: names left, figures right, aligned. The same information, in the shape it
+ * was printed in.
+ *
+ * ── Why `per` sits at the top and not beside each row ───────────────────────
+ *
+ * Because it applies to all of them. Repeating "per 100g" on seven rows is six
+ * repetitions of one fact, and a label does not do it either. Absent when the
+ * catalogue did not state it, rather than defaulted to "100g" — a wrong basis
+ * makes every figure beneath it a misstatement rather than an unknown.
+ */
+export function NutritionTable({ panel }: { panel: Panel }) {
+  if (!panel.items?.length) return null;
+
+  const basis = [
+    panel.per ? `per ${panel.per}` : null,
+    panel.servingsize ? `serving ${panel.servingsize}` : null,
+  ]
+    .filter(Boolean)
+    .join(' · ');
+
+  return (
+    <div className="drawer-section">
+      <h4 className="drawer-section-title">Nutrition</h4>
+      {basis ? (
+        <p style={{ margin: '0 0 8px', fontSize: 11.5, color: 'var(--color-ink-4)' }}>{basis}</p>
+      ) : null}
+      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
+        <tbody>
+          {panel.items.map((item, index) => (
+            <tr
+              key={`${item.name}-${index}`}
+              style={{ borderTop: index === 0 ? 'none' : '1px solid var(--color-line)' }}
+            >
+              <td style={{ padding: '6px 0', color: 'var(--color-ink-2)' }}>{item.name}</td>
+              <td
+                style={{
+                  padding: '6px 0',
+                  textAlign: 'right',
+                  whiteSpace: 'nowrap',
+                  fontVariantNumeric: 'tabular-nums',
+                  color: 'var(--color-ink-1)',
+                  fontWeight: 500,
+                }}
+              >
+                {/* A row with no figure is real label text — "Contains permitted
+                    natural colour" — carried through rather than shown as 0,
+                    which would state something false about the food. */}
+                {item.value || item.unit ? (
+                  <>
+                    {item.value}
+                    {item.unit ? (
+                      <span style={{ color: 'var(--color-ink-4)', fontWeight: 400 }}>
+                        {' '}
+                        {item.unit}
+                      </span>
+                    ) : null}
+                  </>
+                ) : null}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

src/features/store-admin/ProductDrawer.tsx

@@ -37,6 +37,7 @@ import {
   stateOf,
   catalogueFactsOf,
 } from './productState';
+import { NutritionTable } from '@/features/catalogue/NutritionPanel';
 
 /**
  * One product, in full.
@@ -406,7 +407,7 @@ function CatalogueExtras({
 
       {/* Highlights and nutrition side by side — two short lists that each read
           as a column, rather than one long stack that buries the second. */}
-      {data.highlights?.length || data.nutrients?.length ? (
+      {data.highlights?.length || data.nutrients?.length || data.nutrition?.items?.length ? (
         <div className="drawer-bullets">
           {data.highlights?.length ? (
             <div className="drawer-section">
@@ -414,7 +415,13 @@ function CatalogueExtras({
               <Bullets items={data.highlights} />
             </div>
           ) : null}
-          {data.nutrients?.length ? (
+          {/* The structured panel wins where the catalogue has one: it lines the
+              figures up so two products can be compared down a column, which is
+              most of what a nutrition table is for. The lines are the fallback
+              for every row the agent team has not reached yet. */}
+          {data.nutrition?.items?.length ? (
+            <NutritionTable panel={data.nutrition} />
+          ) : data.nutrients?.length ? (
             <div className="drawer-section">
               <h4 className="drawer-section-title">Nutrition</h4>
               <Bullets items={data.nutrients} />