Call out each calendar's in-use span on the answer cards

c56e682818a5f4e570eca45aecc0f48003f701d8 · Pavel Safronov · 2026-06-23 06:32:23 -0700 · parents bedc06094e6f

Call out each calendar's in-use span on the answer cards

Surface the era's start/end as a scannable line (e.g. "📅 In use here
since 1954") so a changeover is stated plainly instead of being buried
in the description prose, pairing with the timeline's clickable key
dates. Drawn from the era's own dates only (no cross-era guessing);
omitted for the synthetic global Gregorian default, whose 1927 start is
a deliberate simplification rather than a local switchover.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

 src/components/ResultPanel.tsx | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/components/ResultPanel.tsx b/src/components/ResultPanel.tsx
index fde20e9..206dba5 100644
--- a/src/components/ResultPanel.tsx
+++ b/src/components/ResultPanel.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import type { Answer, HistoricalDate, Resolution } from '../types';
+import type { Answer, Era, HistoricalDate, Resolution } from '../types';
 import { REPO_URL, repoFileUrl } from '../utils/report';
+import { parseGregorianDate } from '../utils/julianDay';
 
 interface ResultPanelProps {
     picked: { lat: number; lng: number } | null;
@@ -14,6 +15,23 @@ function yearText(date: HistoricalDate): string {
     return date.year > 0 ? `${date.year} CE` : `${1 - date.year} BCE`;
 }
 
+function yearLabel(year: number): string {
+    return year > 0 ? `${year} CE` : `${1 - year} BCE`;
+}
+
+// The era's span at this place, surfacing the changeover dates structurally —
+// e.g. "In use here since 1954" calls out Vietnam's switch to the Gregorian
+// calendar without burying it in the description prose. Drawn straight from the
+// era's own start/end (no cross-era guessing); null for timeless eras.
+function eraSpanText(era: Era): string | null {
+    const start = era.start ? parseGregorianDate(era.start).year : null;
+    const end = era.end ? parseGregorianDate(era.end).year : null;
+    if (start === null && end === null) return null;
+    if (start !== null && end !== null) return `In use here ${yearLabel(start)} – ${yearLabel(end)}`;
+    if (start !== null) return `In use here since ${yearLabel(start)}`;
+    return `In use here until ${yearLabel(end as number)}`;
+}
+
 const MONTHS = [
     'January', 'February', 'March', 'April', 'May', 'June',
     'July', 'August', 'September', 'October', 'November', 'December',
@@ -150,6 +168,15 @@ function AnswerCard({ answer, color }: { answer: Answer; color: string }) {
                 </>
             )}
 
+            {/* Call out the era's span (the changeover dates) — but not for the
+                synthetic global Gregorian default (no sourceFile), whose 1927
+                start is a deliberate simplification, not a local switchover. */}
+            {answer.sourceFile && eraSpanText(era) && (
+                <div style={{ marginTop: 6, fontSize: '0.85em', color: '#555' }}>
+                    📅 {eraSpanText(era)}
+                </div>
+            )}
+
             <Reckoning reckoning={conversion.reckoning} />
 
             {era.description && (