From ba9f643cf5672d1448b0bb5786f37f7f468ce8ba Mon Sep 17 00:00:00 2001
From: Eszter Schuffert <schufferte@yahoo.com>
Date: Thu, 5 Nov 2026 22:08:50 +0100
Subject: [PATCH 1/6] Keep synced pages on reading-time calendar days without
 recorded time

Once a reader sends daily time, the Stats calendar switched to the time
view, and every day known only from sync history (before stats existed,
or read on a position-only device) showed a flat "read". Such a day now
keeps its synced pages: shown in the tip and shaded on the pages scale.
Days with recorded time are unchanged.

Fixes #63
---
 app/src/Stats.jsx      | 18 ++++++++++++++----
 app/src/Stats.test.jsx | 20 +++++++++++++++++---
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/app/src/Stats.jsx b/app/src/Stats.jsx
index e57ea87d..e02ee1d9 100644
--- a/app/src/Stats.jsx
+++ b/app/src/Stats.jsx
@@ -348,13 +348,17 @@ const DAYS_VIEW = {
 }
 
 // byDay: every read day -> amount (undefined when unknown); view describes the available data.
-function ReadingCalendar({ byDay, view, days = [], books = [] }) {
+// pages: synced print pages per day, shown for a day whose amount is unknown (#63).
+function ReadingCalendar({ byDay, view, days = [], books = [], pages }) {
   const [scale, setScale] = useState('year')
   const [back, setBack] = useState(0)
   const [sharing, setSharing] = useState(false)
   const scroller = useRef(null)
   const { level: amountLevel } = shadeLevels(byDay, { fallback: view.fallback })
-  const level = (day) => (!byDay.has(day) ? 0 : amountLevel(byDay.get(day)))
+  const { level: pageLevel } = shadeLevels(pages ?? new Map(), { fallback: FALLBACK_PAGES })
+  const syncedPages = (day) => (byDay.get(day) === undefined ? pages?.get(day) ?? 0 : 0)
+  const level = (day) => (!byDay.has(day) ? 0 : syncedPages(day) > 0 ? pageLevel(syncedPages(day)) : amountLevel(byDay.get(day)))
+  const tipFor = (day) => (syncedPages(day) > 0 ? PAGES_VIEW.tip(syncedPages(day)) : view.tip(byDay.get(day)))
   const today = new Date()
   today.setHours(12, 0, 0, 0)
   const { weeks, first, last, label } = calendarRange(scale, back, today)
@@ -374,7 +378,7 @@ function ReadingCalendar({ byDay, view, days = [], books = [] }) {
   const cell = (d, round) => {
     if (!shown(d)) return <div key={d.getTime()} className="aspect-square" />
     const key = localDay(d)
-    const tip = `${fmt(d, { weekday: 'short', month: 'short', day: 'numeric' })}: ${byDay.has(key) ? view.tip(byDay.get(key)) : 'no reading'}`
+    const tip = `${fmt(d, { weekday: 'short', month: 'short', day: 'numeric' })}: ${byDay.has(key) ? tipFor(key) : 'no reading'}`
     return <div key={d.getTime()} data-tip={tip} aria-label={tip} className={`aspect-square ${round} ${SHADES[level(key)]}`} />
   }
   // Share the visible period, reading days, available page/time totals and longest streak.
@@ -925,7 +929,13 @@ export default function Stats({ session, tab = '', summary, activity, books, act
               ['Books finished', books.filter((b) => b.status === 'finished').length],
             ]}
           />
-          <ReadingCalendar byDay={timeByDay(summary, activity)} view={daily ? TIME_VIEW : DAYS_VIEW} days={activity?.days} books={books} />
+          <ReadingCalendar
+            byDay={timeByDay(summary, activity)}
+            view={daily ? TIME_VIEW : DAYS_VIEW}
+            days={activity?.days}
+            books={books}
+            pages={activity ? pagesByDay(activity.days) : undefined}
+          />
           <div className="md:grid md:grid-cols-2 md:gap-4">
             <Bars title="Time of day" labels={['Morning', 'Afternoon', 'Evening', 'Night']} values={summary.tod} />
             <Bars title="Day of week" labels={['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']} values={summary.dow} />
diff --git a/app/src/Stats.test.jsx b/app/src/Stats.test.jsx
index 7f362f65..e4ff6a7f 100644
--- a/app/src/Stats.test.jsx
+++ b/app/src/Stats.test.jsx
@@ -195,7 +195,7 @@ describe('reading grids', () => {
     expect(queryByText('Today')).toBeNull()
     expect(queryByText('7-day average')).toBeNull()
     expect(queryByText('Less')).toBeNull()
-    expect(getByLabelText('Wed, Sep 30: read')).toBeTruthy()
+    expect(getByLabelText('Wed, Sep 30: 5 pages')).toBeTruthy()
     expect(getByLabelText('Tue, Sep 29: read')).toBeTruthy()
     fireEvent.click(getByRole('button', { name: 'Share your reading days' }))
     fireEvent.click(getByRole('button', { name: 'Render calendar share' }))
@@ -222,7 +222,7 @@ describe('reading grids', () => {
     const daily = [{ date: '2025-08-01', seconds: 600 }]
     const { getByText, getByLabelText } = render(<Stats session={{}} books={[]} activity={synced} summary={{ ...summary, daily }} />)
     expect(getByText('Reading time recorded by your reader')).toBeTruthy()
-    expect(getByLabelText('Wed, Sep 30: read')).toBeTruthy()
+    expect(getByLabelText('Wed, Sep 30: 5 pages')).toBeTruthy()
     expect(getByText('Today').nextElementSibling.textContent).toBe('0m')
   })
 
@@ -234,7 +234,8 @@ describe('reading grids', () => {
     rerender(<Stats {...props} activity={synced} />)
     expect(queryByRole('group', { name: 'Reading calendar measure' })).toBeNull()
     expect(queryByRole('button', { name: 'Pages read' })).toBeNull()
-    expect(getByLabelText(tip)).toBeTruthy()
+    // Recorded time wins; without it the day keeps its synced pages (#63).
+    expect(getByLabelText(hasDaily ? tip : 'Wed, Sep 30: 5 pages')).toBeTruthy()
     // The reader says Sep 29 was read; sync progress has pages only on Sep 28 and Sep 30.
     expect(getByLabelText('Tue, Sep 29: read')).toBeTruthy()
     expect(getByLabelText('Mon, Sep 28: no reading')).toBeTruthy()
@@ -250,6 +251,19 @@ describe('reading grids', () => {
     expect(getByLabelText('Wed, Sep 30: 5 pages')).toBeTruthy()
   })
 
+  // #63: once a reader sends time, days known only from sync history (before it did, or read on a
+  // position-only device) kept their pages instead of turning into a flat "read".
+  it('shows synced pages for days without recorded time', () => {
+    const history = {
+      books: [], pages_total: 32, reading_days: ['2026-09-20', '2026-09-24', '2026-09-30'],
+      days: [{ day: '2026-09-20', syncs: 2, pages: 12 }, { day: '2026-09-24', syncs: 1, pages: 0 }, { day: '2026-09-30', syncs: 1, pages: 20 }],
+    }
+    const { getByLabelText } = render(<Stats session={{}} books={[]} summary={summary} activity={history} />)
+    expect(getByLabelText('Wed, Sep 30: 1h 10m reading time')).toBeTruthy()
+    expect(getByLabelText('Sun, Sep 20: 12 pages')).toBeTruthy()
+    expect(getByLabelText('Thu, Sep 24: read')).toBeTruthy()
+  })
+
   it('updates both streaks from the same dates that fill the grid', () => {
     const summary = {
       devices: [{ device: 'CrossInk' }], current_streak: 8, streak: 12,

From da813d919c48b7d4b54d955b969316f758730e1d Mon Sep 17 00:00:00 2001
From: Eszter Schuffert <schufferte@yahoo.com>
Date: Thu, 5 Nov 2026 22:17:43 +0100
Subject: [PATCH 2/6] Say when the time calendar shows synced pages

---
 app/src/Stats.jsx      | 7 ++++++-
 app/src/Stats.test.jsx | 5 +++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/src/Stats.jsx b/app/src/Stats.jsx
index e02ee1d9..0f724f14 100644
--- a/app/src/Stats.jsx
+++ b/app/src/Stats.jsx
@@ -358,6 +358,7 @@ function ReadingCalendar({ byDay, view, days = [], books = [], pages }) {
   const { level: pageLevel } = shadeLevels(pages ?? new Map(), { fallback: FALLBACK_PAGES })
   const syncedPages = (day) => (byDay.get(day) === undefined ? pages?.get(day) ?? 0 : 0)
   const level = (day) => (!byDay.has(day) ? 0 : syncedPages(day) > 0 ? pageLevel(syncedPages(day)) : amountLevel(byDay.get(day)))
+  const usesPages = [...byDay.keys()].some((day) => syncedPages(day) > 0)
   const tipFor = (day) => (syncedPages(day) > 0 ? PAGES_VIEW.tip(syncedPages(day)) : view.tip(byDay.get(day)))
   const today = new Date()
   today.setHours(12, 0, 0, 0)
@@ -470,7 +471,11 @@ function ReadingCalendar({ byDay, view, days = [], books = [], pages }) {
           ))}
         </div>
       </div>
-      {view.source && <p className="mt-3 text-xs text-stone-500">{view.source}</p>}
+      {view.source && (
+        <p className="mt-3 text-xs text-stone-500">
+          {usesPages ? `${view.source}; synced pages where no time was recorded` : view.source}
+        </p>
+      )}
       <div className="mt-3 flex items-center justify-between">
         <button type="button" className={arrow} onClick={() => setBack(back + 1)} aria-label="Earlier">
           <ChevronLeft className="size-5" strokeWidth={1.75} />
diff --git a/app/src/Stats.test.jsx b/app/src/Stats.test.jsx
index e4ff6a7f..e52c6ca3 100644
--- a/app/src/Stats.test.jsx
+++ b/app/src/Stats.test.jsx
@@ -221,7 +221,7 @@ describe('reading grids', () => {
   it('keeps time available with daily history outside the visible period', () => {
     const daily = [{ date: '2025-08-01', seconds: 600 }]
     const { getByText, getByLabelText } = render(<Stats session={{}} books={[]} activity={synced} summary={{ ...summary, daily }} />)
-    expect(getByText('Reading time recorded by your reader')).toBeTruthy()
+    expect(getByText('Reading time recorded by your reader; synced pages where no time was recorded')).toBeTruthy()
     expect(getByLabelText('Wed, Sep 30: 5 pages')).toBeTruthy()
     expect(getByText('Today').nextElementSibling.textContent).toBe('0m')
   })
@@ -258,10 +258,11 @@ describe('reading grids', () => {
       books: [], pages_total: 32, reading_days: ['2026-09-20', '2026-09-24', '2026-09-30'],
       days: [{ day: '2026-09-20', syncs: 2, pages: 12 }, { day: '2026-09-24', syncs: 1, pages: 0 }, { day: '2026-09-30', syncs: 1, pages: 20 }],
     }
-    const { getByLabelText } = render(<Stats session={{}} books={[]} summary={summary} activity={history} />)
+    const { getByLabelText, getByText } = render(<Stats session={{}} books={[]} summary={summary} activity={history} />)
     expect(getByLabelText('Wed, Sep 30: 1h 10m reading time')).toBeTruthy()
     expect(getByLabelText('Sun, Sep 20: 12 pages')).toBeTruthy()
     expect(getByLabelText('Thu, Sep 24: read')).toBeTruthy()
+    expect(getByText('Reading time recorded by your reader; synced pages where no time was recorded')).toBeTruthy()
   })
 
   it('updates both streaks from the same dates that fill the grid', () => {

From c5e04cd0afc720e0dc8381e808cc0072c078078a Mon Sep 17 00:00:00 2001
From: Eszter Schuffert <schufferte@yahoo.com>
Date: Thu, 5 Nov 2026 22:29:58 +0100
Subject: [PATCH 3/6] feat(app): outline read days with no recorded time

A day the reader marked as read, with neither recorded time nor synced
pages, was shaded like a measured day. It is now outlined, with its own
legend line shown only when such a day is in view.
---
 app/src/Stats.jsx      | 40 +++++++++++++++++++++++++++++-----------
 app/src/Stats.test.jsx | 14 ++++++++------
 2 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/app/src/Stats.jsx b/app/src/Stats.jsx
index 0f724f14..e07303f1 100644
--- a/app/src/Stats.jsx
+++ b/app/src/Stats.jsx
@@ -10,17 +10,27 @@ export { decodeHistory } from './readingHistory.js'
 
 // Shades for the reading calendar, light to dark; levels 1-4 are relative to your median day.
 const SHADES = ['bg-stone-100', 'bg-brand-200', 'bg-brand-300', 'bg-brand-400', 'bg-brand-500']
+// A day the reader marked read but recorded no amount for (before daily time existed): outlined, not shaded.
+const UNKNOWN_SHADE = 'bg-stone-100 ring-1 ring-inset ring-brand-400'
 const FALLBACK_SECONDS = 30 * 60 // median assumed until there is enough history
 const FALLBACK_PAGES = 20
 
-function ShadeLegend() {
+function ShadeLegend({ unknown }) {
   return (
-    <div className="flex items-center gap-1 font-mono text-[0.65rem] text-stone-400">
-      Less
-      {SHADES.map((c) => (
-        <span key={c} aria-hidden="true" className={`size-2.5 rounded-[2px] ${c}`} />
-      ))}
-      More
+    <div className="font-mono text-[0.65rem] text-stone-400">
+      <div className="flex items-center gap-1">
+        Less
+        {SHADES.map((c) => (
+          <span key={c} aria-hidden="true" className={`size-2.5 rounded-[2px] ${c}`} />
+        ))}
+        More
+      </div>
+      {unknown && (
+        <div className="mt-1 flex items-center gap-1">
+          <span aria-hidden="true" className={`size-2.5 rounded-[2px] ${UNKNOWN_SHADE}`} />
+          {unknown}
+        </div>
+      )}
     </div>
   )
 }
@@ -340,6 +350,7 @@ const TIME_VIEW = {
   fallback: FALLBACK_SECONDS,
   tip: (seconds) => (seconds === undefined ? 'read' : `${duration(seconds)} reading time`),
   total: ['time read', duration],
+  unknown: 'read, no time recorded',
 }
 // Older firmware sends read-day flags without daily time counters.
 const DAYS_VIEW = {
@@ -359,13 +370,20 @@ function ReadingCalendar({ byDay, view, days = [], books = [], pages }) {
   const syncedPages = (day) => (byDay.get(day) === undefined ? pages?.get(day) ?? 0 : 0)
   const level = (day) => (!byDay.has(day) ? 0 : syncedPages(day) > 0 ? pageLevel(syncedPages(day)) : amountLevel(byDay.get(day)))
   const usesPages = [...byDay.keys()].some((day) => syncedPages(day) > 0)
-  const tipFor = (day) => (syncedPages(day) > 0 ? PAGES_VIEW.tip(syncedPages(day)) : view.tip(byDay.get(day)))
+  // Read, but with neither recorded time nor synced pages: nothing to measure it by.
+  const unmeasured = (day) => !!view.unknown && byDay.has(day) && byDay.get(day) === undefined && !(syncedPages(day) > 0)
+  const tipFor = (day) =>
+    unmeasured(day) ? view.unknown : syncedPages(day) > 0 ? PAGES_VIEW.tip(syncedPages(day)) : view.tip(byDay.get(day))
   const today = new Date()
   today.setHours(12, 0, 0, 0)
   const { weeks, first, last, label } = calendarRange(scale, back, today)
   const shown = (d) => d >= first && d <= last && d <= today
   let count = 0
-  for (let d = first; d <= last && d <= today; d = new Date(d.getTime() + DAY_MS)) if (byDay.has(localDay(d))) count++
+  let anyUnmeasured = false
+  for (let d = first; d <= last && d <= today; d = new Date(d.getTime() + DAY_MS)) {
+    if (byDay.has(localDay(d))) count++
+    if (unmeasured(localDay(d))) anyUnmeasured = true
+  }
   const month = scale === 'month'
   const year = scale === 'year'
   // The newest weeks sit on the right; start the (phone-scrollable) year there.
@@ -380,7 +398,7 @@ function ReadingCalendar({ byDay, view, days = [], books = [], pages }) {
     if (!shown(d)) return <div key={d.getTime()} className="aspect-square" />
     const key = localDay(d)
     const tip = `${fmt(d, { weekday: 'short', month: 'short', day: 'numeric' })}: ${byDay.has(key) ? tipFor(key) : 'no reading'}`
-    return <div key={d.getTime()} data-tip={tip} aria-label={tip} className={`aspect-square ${round} ${SHADES[level(key)]}`} />
+    return <div key={d.getTime()} data-tip={tip} aria-label={tip} className={`aspect-square ${round} ${unmeasured(key) ? UNKNOWN_SHADE : SHADES[level(key)]}`} />
   }
   // Share the visible period, reading days, available page/time totals and longest streak.
   const share = () => {
@@ -533,7 +551,7 @@ function ReadingCalendar({ byDay, view, days = [], books = [], pages }) {
           </div>
         )}
       </div>
-      {view.total && <div className="mt-3"><ShadeLegend /></div>}
+      {view.total && <div className="mt-3"><ShadeLegend unknown={anyUnmeasured ? view.unknown : null} /></div>}
     </Card>
   )
 }
diff --git a/app/src/Stats.test.jsx b/app/src/Stats.test.jsx
index e52c6ca3..9ae0a635 100644
--- a/app/src/Stats.test.jsx
+++ b/app/src/Stats.test.jsx
@@ -237,7 +237,7 @@ describe('reading grids', () => {
     // Recorded time wins; without it the day keeps its synced pages (#63).
     expect(getByLabelText(hasDaily ? tip : 'Wed, Sep 30: 5 pages')).toBeTruthy()
     // The reader says Sep 29 was read; sync progress has pages only on Sep 28 and Sep 30.
-    expect(getByLabelText('Tue, Sep 29: read')).toBeTruthy()
+    expect(getByLabelText(hasDaily ? 'Tue, Sep 29: read, no time recorded' : 'Tue, Sep 29: read')).toBeTruthy()
     expect(getByLabelText('Mon, Sep 28: no reading')).toBeTruthy()
     fireEvent.click(getByRole('button', { name: 'Share your reading days' }))
     fireEvent.click(getByRole('button', { name: 'Render calendar share' }))
@@ -261,7 +261,8 @@ describe('reading grids', () => {
     const { getByLabelText, getByText } = render(<Stats session={{}} books={[]} summary={summary} activity={history} />)
     expect(getByLabelText('Wed, Sep 30: 1h 10m reading time')).toBeTruthy()
     expect(getByLabelText('Sun, Sep 20: 12 pages')).toBeTruthy()
-    expect(getByLabelText('Thu, Sep 24: read')).toBeTruthy()
+    expect(getByLabelText('Thu, Sep 24: read, no time recorded')).toBeTruthy()
+    expect(getByText('read, no time recorded')).toBeTruthy()
     expect(getByText('Reading time recorded by your reader; synced pages where no time was recorded')).toBeTruthy()
   })
 
@@ -307,7 +308,7 @@ describe('reading grids', () => {
     pointer(cell('Tue, Sep 29'), 'pointerover', 'mouse')
     expect(getByRole('tooltip').textContent).toBe('Tue, Sep 29: 0m reading time')
     pointer(cell('Mon, Sep 28'), 'pointerover', 'mouse')
-    expect(getByRole('tooltip').textContent).toBe('Mon, Sep 28: read')
+    expect(getByRole('tooltip').textContent).toBe('Mon, Sep 28: read, no time recorded')
     pointer(cell('Sun, Sep 27'), 'pointerover', 'mouse')
     expect(getByRole('tooltip').textContent).toBe('Sun, Sep 27: no reading')
     pointer(cell('Wed, Sep 30'), 'pointerdown', 'touch')
@@ -361,7 +362,7 @@ describe('reading grids', () => {
     expect(queryByText('Time read')).toBeNull()
   })
 
-  it('shades device calendar days against the median day and gives unknown time the median shade', () => {
+  it('shades device calendar days against the median day and outlines days with unknown time', () => {
     const summary = {
       devices: [{ device: 'CrossInk' }], history_b64: btoa(String.fromCharCode(15)),
       anchor_day: anchorDay('2026-09-30'), seconds: 9600, pages: 0, sessions: 0, completed: 0,
@@ -373,7 +374,8 @@ describe('reading grids', () => {
     expect(cls('Wed, Sep 30')).toContain('bg-brand-200')
     expect(cls('Tue, Sep 29')).toContain('bg-brand-300')
     expect(cls('Mon, Sep 28')).toContain('bg-brand-500')
-    expect(cls('Sun, Sep 27')).toContain('bg-brand-300')
+    // Read with no recorded time: outlined, not shaded as if measured.
+    expect(cls('Sun, Sep 27')).toContain('ring-brand-400')
     expect(cls('Sat, Sep 26')).toContain('bg-stone-100')
     expect(container.querySelectorAll('[aria-hidden="true"]').length).toBeGreaterThanOrEqual(5)
   })
@@ -391,7 +393,7 @@ describe('reading grids', () => {
     fireEvent.click(getByText('Month'))
     const tips = [...container.querySelectorAll('[data-tip]')].map((el) => el.dataset.tip)
     expect(tips).toContain('Wed, Sep 30: 1h 10m reading time')
-    expect(tips).toContain('Tue, Sep 29: read')
+    expect(tips).toContain('Tue, Sep 29: read, no time recorded')
     expect(tips).toContain('Mon, Sep 28: no reading')
     expect(tips.length).toBe(30)
   })

From 95ef9dcbf7ba2f93a8700a6ba57275bfcc13ddec Mon Sep 17 00:00:00 2001
From: Eszter Schuffert <schufferte@yahoo.com>
Date: Thu, 5 Nov 2026 22:30:55 +0100
Subject: [PATCH 4/6] fix(app): show synced days older than the device history

The time calendar only listed days inside the 730-day device history,
so an older day known from sync showed as no reading even with pages.
---
 app/src/Stats.jsx      | 2 ++
 app/src/Stats.test.jsx | 8 ++++++++
 2 files changed, 10 insertions(+)

diff --git a/app/src/Stats.jsx b/app/src/Stats.jsx
index e07303f1..48bd342e 100644
--- a/app/src/Stats.jsx
+++ b/app/src/Stats.jsx
@@ -336,6 +336,8 @@ function timeByDay(summary, activity) {
     byDay.set(key, seconds.get(key))
   }
   for (const [key, s] of seconds) if (s > 0 && !byDay.has(key)) byDay.set(key, s)
+  // Synced days older than the device history window.
+  for (const day of activity?.reading_days ?? []) if (!byDay.has(day)) byDay.set(day, undefined)
   return byDay
 }
 
diff --git a/app/src/Stats.test.jsx b/app/src/Stats.test.jsx
index 9ae0a635..4df9c841 100644
--- a/app/src/Stats.test.jsx
+++ b/app/src/Stats.test.jsx
@@ -266,6 +266,14 @@ describe('reading grids', () => {
     expect(getByText('Reading time recorded by your reader; synced pages where no time was recorded')).toBeTruthy()
   })
 
+  it('shows synced pages older than the device history window', () => {
+    const history = { books: [], pages_total: 9, reading_days: ['2024-03-12'], days: [{ day: '2024-03-12', syncs: 1, pages: 9 }] }
+    const { getByLabelText, getByRole } = render(<Stats session={{}} books={[]} summary={summary} activity={history} />)
+    fireEvent.click(getByRole('button', { name: 'Earlier' }))
+    fireEvent.click(getByRole('button', { name: 'Earlier' }))
+    expect(getByLabelText('Tue, Mar 12: 9 pages')).toBeTruthy()
+  })
+
   it('updates both streaks from the same dates that fill the grid', () => {
     const summary = {
       devices: [{ device: 'CrossInk' }], current_streak: 8, streak: 12,

From 144a7e6a8092cbf03ad88b6fab296f2edac4f391 Mon Sep 17 00:00:00 2001
From: Eszter Schuffert <schufferte@yahoo.com>
Date: Thu, 5 Nov 2026 22:35:31 +0100
Subject: [PATCH 5/6] fix(app): outline untimed days on the shared calendar
 card

The shared card only shows time read, so a day shaded by synced pages
or with no amount at all read as a measured time. Those days are now
outlined on the card, as on screen.
---
 app/src/Stats.jsx      |  7 ++++++-
 app/src/Stats.test.jsx |  9 ++++++++-
 app/src/shareCard.js   | 11 +++++++++--
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/app/src/Stats.jsx b/app/src/Stats.jsx
index 48bd342e..b2b798fc 100644
--- a/app/src/Stats.jsx
+++ b/app/src/Stats.jsx
@@ -411,7 +411,12 @@ function ReadingCalendar({ byDay, view, days = [], books = [], pages }) {
       run = byDay.has(key) ? run + 1 : 0
       streak = Math.max(streak, run)
     }
-    const lv = (d) => (shown(d) ? level(localDay(d)) : null)
+    // The card shades by time only: a day without recorded time is outlined, not shaded by pages.
+    const lv = (d) => {
+      if (!shown(d)) return null
+      const key = localDay(d)
+      return view.unknown && byDay.has(key) && byDay.get(key) === undefined ? 'unknown' : level(key)
+    }
     const day = (monday, r) => new Date(monday.getTime() + r * DAY_MS)
     const strip = (ws) => ({
       grid: WEEKDAYS.map((_, r) => ws.map((m) => lv(day(m, r)))),
diff --git a/app/src/Stats.test.jsx b/app/src/Stats.test.jsx
index 4df9c841..cab02e4e 100644
--- a/app/src/Stats.test.jsx
+++ b/app/src/Stats.test.jsx
@@ -258,12 +258,19 @@ describe('reading grids', () => {
       books: [], pages_total: 32, reading_days: ['2026-09-20', '2026-09-24', '2026-09-30'],
       days: [{ day: '2026-09-20', syncs: 2, pages: 12 }, { day: '2026-09-24', syncs: 1, pages: 0 }, { day: '2026-09-30', syncs: 1, pages: 20 }],
     }
-    const { getByLabelText, getByText } = render(<Stats session={{}} books={[]} summary={summary} activity={history} />)
+    const { getByLabelText, getByText, getByRole } = render(<Stats session={{}} books={[]} summary={summary} activity={history} />)
     expect(getByLabelText('Wed, Sep 30: 1h 10m reading time')).toBeTruthy()
     expect(getByLabelText('Sun, Sep 20: 12 pages')).toBeTruthy()
     expect(getByLabelText('Thu, Sep 24: read, no time recorded')).toBeTruthy()
     expect(getByText('read, no time recorded')).toBeTruthy()
     expect(getByText('Reading time recorded by your reader; synced pages where no time was recorded')).toBeTruthy()
+    // The shared card shades by time only, so both days without recorded time are outlined there.
+    fireEvent.click(getByRole('button', { name: 'Share your reading days' }))
+    fireEvent.click(getByRole('button', { name: 'Render calendar share' }))
+    const cells = renderCalendarCard.mock.lastCall[0].blocks.flatMap((b) => b.grid.flat())
+    const untimed = [...document.querySelectorAll('[data-tip]')].filter((el) => / pages$|no time recorded$/.test(el.dataset.tip))
+    expect(untimed.length).toBeGreaterThanOrEqual(2)
+    expect(cells.filter((c) => c === 'unknown')).toHaveLength(untimed.length)
   })
 
   it('shows synced pages older than the device history window', () => {
diff --git a/app/src/shareCard.js b/app/src/shareCard.js
index bc638265..4f2b287e 100644
--- a/app/src/shareCard.js
+++ b/app/src/shareCard.js
@@ -413,7 +413,8 @@ export async function renderStatsCard({ heading, tiles, covers, chart, moods = [
 }
 
 // Reading-days calendar card. `blocks` are stacked calendars, each with `grid`
-// rows of shade levels (0-4, null = outside the period) and optional `top`
+// rows of shade levels (0-4, 'unknown' = read with no amount, null = outside
+// the period) and optional `top`
 // (column), `left` (row) and `bottom` (column) labels.
 const DAY_SHADES = ['#e7e5df', '#b3cfc2', '#8fb9a6', '#69917d', '#4a7a62']
 export async function renderCalendarCard({ eyebrow, heading, subtitle, tiles, blocks, moods = [] }) {
@@ -455,10 +456,16 @@ export async function renderCalendarCard({ eyebrow, heading, subtitle, tiles, bl
     grid.forEach((row, r) =>
       row.forEach((lv, c) => {
         if (lv == null) return
-        ctx.fillStyle = DAY_SHADES[lv]
+        const unknown = lv === 'unknown'
+        ctx.fillStyle = DAY_SHADES[unknown ? 0 : lv]
         ctx.beginPath()
         ctx.roundRect(x0 + c * step, y0 + r * step, size, size, radius)
         ctx.fill()
+        if (unknown) {
+          ctx.strokeStyle = DAY_SHADES[3]
+          ctx.lineWidth = Math.max(2, size * 0.08)
+          ctx.stroke()
+        }
       })
     )
     y = y0 + gridH + bottomH + blockGap

From ae84267046d65124464781ecbc7481399597ca8c Mon Sep 17 00:00:00 2001
From: Eszter Schuffert <schufferte@yahoo.com>
Date: Thu, 5 Nov 2026 22:43:01 +0100
Subject: [PATCH 6/6] fix(app): outline page-shaded days on cards without daily
 time

Readers without daily time use the days view, whose shared card has no
pages measure either. Days shaded by synced pages are outlined there too.
---
 app/src/Stats.jsx      | 3 ++-
 app/src/Stats.test.jsx | 2 ++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/src/Stats.jsx b/app/src/Stats.jsx
index b2b798fc..c373248f 100644
--- a/app/src/Stats.jsx
+++ b/app/src/Stats.jsx
@@ -415,7 +415,8 @@ function ReadingCalendar({ byDay, view, days = [], books = [], pages }) {
     const lv = (d) => {
       if (!shown(d)) return null
       const key = localDay(d)
-      return view.unknown && byDay.has(key) && byDay.get(key) === undefined ? 'unknown' : level(key)
+      const untimed = byDay.has(key) && byDay.get(key) === undefined
+      return untimed && (view.unknown || syncedPages(key) > 0) ? 'unknown' : level(key)
     }
     const day = (monday, r) => new Date(monday.getTime() + r * DAY_MS)
     const strip = (ws) => ({
diff --git a/app/src/Stats.test.jsx b/app/src/Stats.test.jsx
index cab02e4e..2c6dfe1a 100644
--- a/app/src/Stats.test.jsx
+++ b/app/src/Stats.test.jsx
@@ -246,6 +246,8 @@ describe('reading grids', () => {
       ...(hasDaily ? [['time read', '1h 10m']] : []),
       ['day streak', 2],
     ])
+    // Days shaded by synced pages are outlined on the card, which shows no pages measure.
+    expect(renderCalendarCard.mock.lastCall[0].blocks.flatMap((b) => b.grid.flat())).toContain('unknown')
     // Readers without device stats still get their original sync-page calendar.
     rerender(<Stats {...props} activity={synced} summary={null} />)
     expect(getByLabelText('Wed, Sep 30: 5 pages')).toBeTruthy()