Chapter dates: read date setting and tiered release dates (BL-0047)

- Chapter rows show when you first finished a chapter (setting: date + hour,
  date, off) from a new durable progress doneAt; older reads fall back to the
  reading clock's earliest remembered completion.
- chapter.json keeps added (arrival in this library, now kept on replace) plus
  x-dates.source (source upload, bulk imports flagged), x-dates.release
  (official, for a later metadata job) and x-dates.ecosystem (first entry into
  any Manga Circus library; carried over peering, earliest wins, clamped).
- Rows show one release date by tier: official > source upload > ecosystem >
  library, with all known dates in the tooltip (setting to hide).
- Fixes: WeebCentral dates came from the chapter page, which has none (every
  chapter got the download time); they now come from the full chapter list.
  MangaDex no longer writes a group's publishAt into added. Peering sends dates.
- tools/backfill-chapter-dates.js migrates an existing library (dry run default).
- Coverage dry run on the server: docs/chapter-dates-coverage-2026-10-24.md.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

public/app.css

@@ -180,6 +180,11 @@ main { max-width: 1200px; margin: 0 auto; padding: 16px; }
 .ch { display: flex; width: 100%; max-width: 100%; align-items: center; gap: 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
 .ch-main { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 76px 52px minmax(70px, 1fr) max-content; gap: 8px; align-items: baseline; padding: 6px 4px; text-decoration: none; }
 .ch-main.has-time { grid-template-columns: 76px 52px 72px minmax(70px, 1fr) max-content; }
+.ch-main.has-date { grid-template-columns: 76px 52px 104px minmax(70px, 1fr) max-content; }
+.ch-main.has-time.has-date { grid-template-columns: 76px 52px 104px 72px minmax(70px, 1fr) max-content; }
+.ch-date { min-width: 0; overflow: hidden; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
+.ch-date.tier-official { color: inherit; }
+.ch-date.tier-ecosystem, .ch-date.tier-library { opacity: .75; }
 .ch-main:hover .ch-title { text-decoration: underline; }
 .ch-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 650; font-variant-numeric: tabular-nums; }
 .ch-pages { min-width: 0; overflow: hidden; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; text-align: left; white-space: nowrap; }
@@ -205,6 +210,10 @@ main { max-width: 1200px; margin: 0 auto; padding: 16px; }
   .ch { flex-wrap: nowrap; gap: 4px; overflow: hidden; }
   .ch-main { grid-template-columns: 64px 44px minmax(0, 1fr) max-content; gap: 6px; }
   .ch-main.has-time { grid-template-columns: 64px 44px 62px minmax(0, 1fr) max-content; }
+  /* Phones: the date takes the page-count column. */
+  .ch-main.has-date { grid-template-columns: 64px 64px minmax(0, 1fr) max-content; }
+  .ch-main.has-time.has-date { grid-template-columns: 64px 64px 62px minmax(0, 1fr) max-content; }
+  .ch-main.has-date .ch-pages { display: none; }
   .ch > .btn.small { min-width: 0; padding-left: 5px; padding-right: 5px; }
   .ch > .state { flex: none; }
 }

public/manga.js

@@ -213,14 +213,16 @@
     const panel = h('div', { class: 'versions', hidden: true });
     function draw() {
       const p = ch.progress, done = p && p.done;
-      const state = h('button', { class: 'state' + (done ? ' done' : ''), title: done ? 'Mark as unread' : 'Mark as read' },
-        done ? '✓ read' : p ? `page ${p.p + 1} / ${p.n}` : 'unread');
+      const readAt = done ? readDate(ch.readAt) : null;
+      const state = h('button', { class: 'state' + (done ? ' done' : ''), title: (readAt ? readAt.title + ' · ' : '') + (done ? 'Mark as unread' : 'Mark as read') },
+        done ? (readAt ? '✓ ' + readAt.text : '✓ read') : p ? `page ${p.p + 1} / ${p.n}` : 'unread');
       state.onclick = async () => {
-        if (done) { await api('api/unread', { m: M.id, c: ch.id }); ch.progress = null; }
+        if (done) { await api('api/unread', { m: M.id, c: ch.id }); ch.progress = null; ch.readAt = null; }
         else {
           const version = ch.versions[0];
           await api('api/progress', { m: M.id, c: ch.id, v: version.id, p: version.pages - 1, n: version.pages, done: true });
           ch.progress = { v: version.id, p: version.pages - 1, n: version.pages, done: true };
+          ch.readAt = { at: Date.now(), approx: false };
         }
         draw();
       };
@@ -228,12 +230,14 @@
         ? h('button', { class: 'btn small', onclick: () => { panel.hidden = !panel.hidden; } }, ch.versions.length + ' versions')
         : null;
       const pages = ch.versions[0] ? ch.versions[0].pages : 0;
-      const timing = chapterTiming(ch);
+      const timing = chapterTiming(ch), released = chapterRelease(ch.dates);
       wrap.textContent = '';
       wrap.append(h('div', { class: 'ch' + (done ? ' read' : '') },
-        h('a', { class: 'ch-main' + (timing ? ' has-time' : ''), href: readUrl(M.id, ch.id) },
+        h('a', { class: 'ch-main' + (timing ? ' has-time' : '') + (M.chapterDates?.release ? ' has-date' : ''), href: readUrl(M.id, ch.id) },
           h('span', { class: 'ch-label' }, ch.label),
           h('span', { class: 'ch-pages' }, `${pages} p.`),
+          M.chapterDates?.release ? h('span', { class: 'ch-date' + (released ? ' tier-' + released.tier : ''), title: released ? released.title : 'No date known', 'aria-label': released ? released.title : 'No date known' },
+            released ? released.text : '–') : null,
           timing ? h('span', { class: 'ch-time', title: timing.title, 'aria-label': timing.title }, timing.text) : null,
           h('span', { class: 'ch-title', title: ch.title || '' }, ch.title || 'Untitled'),
           ch.extra ? h('span', { class: 'tag' }, 'extra') : null),
@@ -261,6 +265,42 @@
     return wrap;
   }
 
+  // Phones (the chapter-row breakpoint in app.css) get numeric dates to leave room for titles.
+  const compact = matchMedia('(max-width: 640px)').matches;
+
+  // Read date: the day and the hour (local time) the chapter was first completed.
+  function readDate(value) {
+    const mode = M.chapterDates?.read;
+    if (!value || !value.at || mode === 'off') return null;
+    const when = new Date(value.at), thisYear = when.getFullYear() === new Date().getFullYear();
+    const day = when.toLocaleDateString(undefined, compact ? { day: '2-digit', month: '2-digit', ...(thisYear ? {} : { year: '2-digit' }) }
+      : { day: 'numeric', month: 'short', ...(thisYear ? {} : { year: 'numeric' }) });
+    const text = (value.approx ? '≤ ' : '') + day + (mode === 'hour' ? `, ${String(when.getHours()).padStart(2, '0')}h` : '');
+    const full = when.toLocaleDateString(undefined, { dateStyle: 'long' }) + (mode === 'hour' ? `, ${String(when.getHours()).padStart(2, '0')}:00–${String((when.getHours() + 1) % 24).padStart(2, '0')}:00` : '');
+    return { text, title: (value.approx ? 'Read by ' : 'Read on ') + full + (value.approx ? ' (earlier reads were not recorded)' : '') };
+  }
+
+  // Release date by tier: official > source upload > Manga Circus ecosystem > this library.
+  const TIER = { official: { mark: '' }, source: { mark: '≈' }, ecosystem: { mark: '◎' }, library: { mark: '↓' } };
+  const dayText = (at, precision, long) => {
+    // Day-precision dates are calendar dates, not instants: show them in UTC so they do not shift.
+    const dayOnly = !String(at).includes('T');
+    const opts = precision === 'year' ? { year: 'numeric' } : precision === 'month' ? { year: 'numeric', month: 'short' }
+      : long ? { dateStyle: 'long' } : compact ? { day: '2-digit', month: '2-digit', year: '2-digit' } : { day: 'numeric', month: 'short', year: 'numeric' };
+    return new Date(at).toLocaleDateString(undefined, { ...opts, ...(dayOnly ? { timeZone: 'UTC' } : {}) });
+  };
+  function chapterRelease(dates) {
+    if (!dates || !dates.release) return null;
+    const known = dates.known || {}, lines = [];
+    if (known.official) lines.push(`Released ${dayText(known.official.at, known.official.precision, true)}${known.official.name ? ' (' + known.official.name + ')' : ''}`);
+    if (known.source) lines.push(`Uploaded at ${known.source.name || 'the source'} ${dayText(known.source.at, 'day', true)}`);
+    if (known.batch) lines.push(`Bulk upload at ${known.batch.name || 'the source'} ${dayText(known.batch.at, 'day', true)} (not a release date)`);
+    if (known.ecosystem) lines.push(`First in Manga Circus ${dayText(known.ecosystem.at, 'day', true)}${known.ecosystem.name && known.ecosystem.name !== 'this server' ? ' (via ' + known.ecosystem.name + ')' : ''}`);
+    if (known.library) lines.push(`Added to this library ${dayText(known.library.at, 'day', true)}`);
+    const tier = TIER[dates.tier] || TIER.library;
+    return { tier: dates.tier, text: tier.mark + dayText(dates.release.at, dates.release.precision), title: lines.join('\n') };
+  }
+
   function chapterTiming(chapter) {
     if (!M.reading) return null;
     const value = chapter.reading;

public/settings.js

@@ -38,6 +38,11 @@
     h('option', { value: 'dim' }, 'Dim (70% brightness)'),
     h('option', { value: 'extra-dim' }, 'Extra dim (45% brightness)'));
   tone.value = S.pageTone;
+  const readDate = h('select', { onchange: e => save({ readDate: e.target.value }) },
+    h('option', { value: 'hour' }, 'Date and hour (e.g. 23 Oct, 21h)'),
+    h('option', { value: 'date' }, 'Date only'),
+    h('option', { value: 'off' }, 'Do not show'));
+  readDate.value = S.readDate;
   const LABEL = { flow: 'Flow', page: 'Page', book: 'Book', strip: 'Webtoon flow' };
   const zooms = () => Object.keys(LABEL).map(k => `${LABEL[k]} ${Math.round((S.zoom[k] || 1) * 100)}%`).join(' · ');
   const zoomText = h('span', { class: 'muted' }, zooms());
@@ -85,6 +90,13 @@
       h('button', { class: 'btn small', onclick: async () => { await save({ zoom: {} }); zoomText.textContent = zooms(); } }, 'Reset to fit'),
       h('div', { class: 'muted small' }, '100% = the page fits the screen. Change it in the reader with Ctrl + mouse wheel, a pinch, or the + / - keys.'))));
 
+  section('user/reading').append(h('section', { class: 'card' },
+    h('h2', {}, 'Chapter list dates'),
+    h('label', { class: 'field' }, h('span', {}, 'When I read a chapter'), readDate,
+      h('div', { class: 'muted small' }, 'Shown next to ✓ in the chapter list: when you first finished the chapter, in your local time. Marking it unread clears it.')),
+    check('releaseDate', 'Show when each chapter was released',
+      'Best known date first: the official release, else the upload at the source (≈), else when it first reached Manga Circus (◎), else when it was added here (↓). Hover a date for all known dates.')));
+
   const readingHoursBody = h('div', {}, h('p', { class: 'muted' }, 'Loading server reading hours…'));
   section('user/reading-hours').append(h('section', { class: 'card' },
     h('h2', {}, 'Server reading hours'), readingHoursBody,