From 374e630d8fd0fa063753ffaa3537ada4fb4bc11e Mon Sep 17 00:00:00 2001
From: Alexander Heldt <me@alexanderheldt.se>
Date: Fri, 24 Jul 2026 15:17:09 +0000
Subject: [PATCH] Show the age counter as weeks with a months breakdown

Weeks and calendar months disagreed at a glance ("16 weeks" but only
"3 months"). Now the counter reads "16 weeks (3 months and 3 weeks)
old" so the two units line up, and drops the weeks past 4 months to
show just the months form.
---
 src/app.js         | 15 +++++++++++++--
 src/changelog.json |  1 +
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/app.js b/src/app.js
index 237d17a..cfb77f3 100644
--- a/src/app.js
+++ b/src/app.js
@@ -245,16 +245,27 @@
                  (ref.getMonth() - birth.getMonth());
     if (ref.getDate() < birth.getDate()) months--;
     if (months < 0) months = 0;
-    return { days, weeks, months };
+    // Whole weeks left over after the calendar months (so "N months and M weeks").
+    const anchor = startOfDay(new Date(birth.getFullYear(),
+                                       birth.getMonth() + months, birth.getDate()));
+    const remWeeks = Math.floor((ref - anchor) / 86_400_000 / 7);
+    return { days, weeks, months, remWeeks };
   }
 
+  // e.g. "16 weeks (3 months and 3 weeks) old". Weeks are the headline unit while
+  // the puppy is young; once it's 4+ months the week count is just noise, so we
+  // drop it and lead with the months form ("4 months and 1 week old").
   function formatAge(birthday, at) {
     const a = ageParts(birthday, at);
     if (!a) return "";
     const wk = `${a.weeks} week${a.weeks === 1 ? "" : "s"}`;
     if (a.months < 1) return `${wk} old`;
     const mo = `${a.months} month${a.months === 1 ? "" : "s"}`;
-    return `${wk} · ${mo} old`;
+    const rw = a.remWeeks > 0
+      ? ` and ${a.remWeeks} week${a.remWeeks === 1 ? "" : "s"}` : "";
+    const monthPhrase = `${mo}${rw}`;
+    if (a.months >= 4) return `${monthPhrase} old`;
+    return `${wk} (${monthPhrase}) old`;
   }
 
   // Rough age-based daily sleep goal (hours), for the trend chart's goal band:
diff --git a/src/changelog.json b/src/changelog.json
index baddd50..199ba67 100644
--- a/src/changelog.json
+++ b/src/changelog.json
@@ -1,4 +1,5 @@
 [
+  { "date": "2026-07-24", "text": "The age counter reads \"16 weeks (3 months and 3 weeks) old\" so weeks and months line up; past 4 months it drops the weeks and shows just months (e.g. \"5 months and 2 weeks old\")" },
   { "date": "2026-07-17", "text": "The Sleep trend chart follows the selected day — pick a past day to see its full curve against the day before and the average leading up to it" },
   { "date": "2026-07-15", "text": "The Sleep trend y-axis is stretched above 10h, giving the hours around the sleep goal most of the chart" },
   { "date": "2026-07-15", "text": "The Sleep trend chart shows the sleep goal for your puppy's age as a shaded band — the projection chip gets a ✓ when today is on track" },