Merge pull request #11 from enricobattocchi/claude/fix-future-events-placement-Yte3I

fix: position future events to the right of Now on the timeline

Author: enricobattocchi

src/app/[locale]/[...ids]/page.tsx

@@ -119,7 +119,7 @@ export default async function EventPage({ params, searchParams }: PageProps) {
   const nowName = tCommon("now");
 
   const spanT = (key: string, values?: Record<string, string | number>) => tDate(key, values);
-  const timeline = computeTimeline(events, 2, locale, nowName, spanT);
+  const timeline = computeTimeline(events, 2, locale, nowName, spanT, hideNow);
   const href = buildShareablePath(events);
 
   return (

src/app/api/og/route.tsx

@@ -76,21 +76,10 @@ export async function GET(request: NextRequest) {
 
   const font = await getFont();
 
-  let timeline = allEvents.length > 0 ? computeTimeline(allEvents) : null;
-
-  if (hideNow && timeline && allEvents.length >= 2) {
-    const lastMarker = timeline.markers[timeline.markers.length - 1];
-    if (lastMarker?.event.id === "0") {
-      timeline = {
-        ...timeline,
-        markers: timeline.markers.slice(0, -1),
-        segments: timeline.segments.slice(0, -1),
-      };
-    }
-  }
+  const nowLabel = messages.common?.now || "Now";
+  let timeline = allEvents.length > 0 ? computeTimeline(allEvents, 2, "en-US", nowLabel, undefined, hideNow) : null;
 
   const fallbackDescription = messages.meta?.siteDescription || "Visualize the time between historical events.";
-  const nowLabel = messages.common?.now || "Now";
 
   return new ImageResponse(
     (

src/components/Chooser/Chooser.tsx

@@ -175,8 +175,8 @@ export default function Chooser({
     window.history.replaceState(null, "", buildUrl(path, title, false));
   }, [selected, title, localePath]);
 
-  // Recompute client-side when format differs from default
-  const needsClientCompute = timespanFormat !== 2;
+  // Recompute client-side when format differs from default or hideNow changed
+  const needsClientCompute = timespanFormat !== 2 || hideNow !== (serverHideNow || false);
 
   const nowLabel = tCommon("now");
   const spanT = useCallback(
@@ -189,25 +189,14 @@ export default function Chooser({
     let h: string;
 
     if (needsClientCompute && selected.length > 0) {
-      const result = computeTimeline(selected, timespanFormat, locale, nowLabel, spanT);
+      const result = computeTimeline(selected, timespanFormat, locale, nowLabel, spanT, hideNow);
       tl = { markers: result.markers, segments: result.segments };
       h = buildShareablePath(selected);
     } else {
       tl = serverTimeline || { markers: [], segments: [] };
       h = serverHref || "/";
     }
 
-    // Strip Now marker + last segment when hidden and 2+ events
-    if (hideNow && selected.length >= 2 && tl.markers.length > 0) {
-      const lastMarker = tl.markers[tl.markers.length - 1];
-      if (lastMarker.event.id === "0") {
-        tl = {
-          markers: tl.markers.slice(0, -1),
-          segments: tl.segments.slice(0, -1),
-        };
-      }
-    }
-
     return { timeline: tl, href: h };
   }, [needsClientCompute, selected, timespanFormat, serverTimeline, serverHref, hideNow, locale, nowLabel, spanT]);
 

src/components/Timeline/Timeline.tsx

@@ -49,7 +49,7 @@ function AnimatedTimeline({ markers, segments, exit = false, onRemove, onToggleD
   const zoomedWidth = useMemo(() => {
     if (!zoomed || markers.length < 2) return undefined;
     if (typeof window !== "undefined" && window.innerWidth <= 640) return undefined;
-    // Normalize positions to the actual visible range (handles hidden Now marker)
+    // Normalize positions to the actual visible range
     const first = markers[0].position;
     const last = markers[markers.length - 1].position;
     const range = last - first;
@@ -232,7 +232,8 @@ function AnimatedTimeline({ markers, segments, exit = false, onRemove, onToggleD
       });
     } else {
       // ── SUBSEQUENT: new markers slide from Now, existing FLIP ──
-      const nowPos = markerEls[markerEls.length - 1][posProp];
+      const nowMarkerIdx = markers.findIndex(m => m.event.id === "0");
+      const nowPos = nowMarkerIdx >= 0 ? markerEls[nowMarkerIdx][posProp] : markerEls[markerEls.length - 1][posProp];
 
       markers.forEach((marker, i) => {
         const el = markerEls[i];

src/lib/timeline-math.test.ts

@@ -189,6 +189,113 @@ describe("computeTimeline", () => {
     });
   });
 
+  describe("future events", () => {
+    it("places a single future event to the right of Now", () => {
+      const events = [makeEvent({ id: "Q1", year: 2030 })];
+      const result = computeTimeline(events);
+      // Now should be at position 0, future event at position 100
+      const nowMarker = result.markers.find(m => m.event.id === "0");
+      const eventMarker = result.markers.find(m => m.event.id === "Q1");
+      expect(nowMarker!.position).toBe(0);
+      expect(eventMarker!.position).toBe(100);
+    });
+
+    it("positions Now chronologically between past and future events", () => {
+      const events = [
+        makeEvent({ id: "Q1", year: 2000 }),
+        makeEvent({ id: "Q2", year: 2048 }),
+      ];
+      const result = computeTimeline(events);
+      // 2000 → 2024 → 2048, total span = 48 years
+      const pastMarker = result.markers.find(m => m.event.id === "Q1");
+      const nowMarker = result.markers.find(m => m.event.id === "0");
+      const futureMarker = result.markers.find(m => m.event.id === "Q2");
+      expect(pastMarker!.position).toBe(0);
+      expect(nowMarker!.position).toBe(50); // 24/48 = 50%
+      expect(futureMarker!.position).toBe(100);
+    });
+
+    it("handles all events in the future", () => {
+      const events = [
+        makeEvent({ id: "Q1", year: 2030 }),
+        makeEvent({ id: "Q2", year: 2040 }),
+      ];
+      const result = computeTimeline(events);
+      // Now (2024) → 2030 → 2040, total span = 16 years
+      const nowMarker = result.markers.find(m => m.event.id === "0");
+      const event1 = result.markers.find(m => m.event.id === "Q1");
+      const event2 = result.markers.find(m => m.event.id === "Q2");
+      expect(nowMarker!.position).toBe(0);
+      expect(event1!.position).toBeCloseTo((6 / 16) * 100, 1); // 6/16
+      expect(event2!.position).toBe(100);
+    });
+
+    it("creates correct number of segments with mixed past/future", () => {
+      const events = [
+        makeEvent({ id: "Q1", year: 2000 }),
+        makeEvent({ id: "Q2", year: 2048 }),
+      ];
+      const result = computeTimeline(events);
+      // 3 points (event, now, event) → 2 segments
+      expect(result.segments).toHaveLength(2);
+      expect(result.markers).toHaveLength(3);
+    });
+
+    it("segment percentages sum to 100 with future events", () => {
+      const events = [
+        makeEvent({ id: "Q1", year: 2000 }),
+        makeEvent({ id: "Q2", year: 2030 }),
+        makeEvent({ id: "Q3", year: 2048 }),
+      ];
+      const result = computeTimeline(events);
+      const sum = result.segments.reduce((s, seg) => s + seg.percentage, 0);
+      expect(sum).toBeCloseTo(100, 5);
+    });
+
+    it("sorts Now among markers in chronological order", () => {
+      const events = [
+        makeEvent({ id: "Q1", name: "Past", year: 2000 }),
+        makeEvent({ id: "Q2", name: "Future", year: 2030 }),
+      ];
+      const result = computeTimeline(events);
+      expect(result.markers[0].event.name).toBe("Past");
+      expect(result.markers[1].event.name).toBe("Now");
+      expect(result.markers[2].event.name).toBe("Future");
+    });
+  });
+
+  describe("hideNow", () => {
+    it("excludes Now marker when hideNow is true and 2+ events", () => {
+      const events = [
+        makeEvent({ id: "Q1", year: 2000 }),
+        makeEvent({ id: "Q2", year: 2020 }),
+      ];
+      const result = computeTimeline(events, 2, "en-US", "Now", undefined, true);
+      // Only event markers, no Now
+      expect(result.markers).toHaveLength(2);
+      expect(result.markers.every(m => m.event.id !== "0")).toBe(true);
+    });
+
+    it("keeps Now when hideNow is true but only 1 event", () => {
+      const events = [makeEvent({ id: "Q1", year: 2000 })];
+      const result = computeTimeline(events, 2, "en-US", "Now", undefined, true);
+      expect(result.markers.some(m => m.event.id === "0")).toBe(true);
+    });
+
+    it("works with future events and hideNow", () => {
+      const events = [
+        makeEvent({ id: "Q1", year: 2000 }),
+        makeEvent({ id: "Q2", year: 2048 }),
+      ];
+      const result = computeTimeline(events, 2, "en-US", "Now", undefined, true);
+      expect(result.markers).toHaveLength(2);
+      expect(result.markers[0].position).toBe(0);
+      expect(result.markers[1].position).toBe(100);
+      expect(result.segments).toHaveLength(1);
+      expect(result.segments[0].percentage).toBe(100);
+    });
+  });
+
   describe("timespanFormat", () => {
     it("uses precise format by default (format 2)", () => {
       const events = [makeEvent({ id: "Q1", year: 2000, month: 6, day: 15 })];

src/lib/timeline-math.ts

@@ -46,7 +46,8 @@ export function computeTimeline(
   timespanFormat: TimespanFormat = 2,
   locale: string = "en-US",
   nowName: string = "Now",
-  spanT?: SpanTranslate
+  spanT?: SpanTranslate,
+  hideNow?: boolean
 ): TimelineResult {
   const precision = eventPrecision(events);
   const yearsOnly = precision === "year";
@@ -62,48 +63,81 @@ export function computeTimeline(
 
   const dates = sorted.map((e) => eventToDate(e, precision));
 
-  // Total span from oldest event to now
-  const totalSpan = spanValue(dates[0], now, precision);
+  // Find where Now belongs chronologically among the sorted events
+  const nowTime = now.getTime();
+  let nowIndex: number;
+  if (hideNow && sorted.length >= 2) {
+    nowIndex = -1; // Now excluded from timeline
+  } else {
+    nowIndex = dates.findIndex(d => d.getTime() > nowTime);
+    if (nowIndex === -1) nowIndex = dates.length; // Now is after all events
+  }
+
+  // Build full ordered list of all timeline points (events + Now when included)
+  const allDates = [...dates];
+  if (nowIndex >= 0) {
+    allDates.splice(nowIndex, 0, now);
+  }
 
-  // Build segments: between each consecutive pair of points (events + now)
-  const allDates = [...dates, now];
+  // Total span from first to last point on the timeline
+  const totalSpan = spanValue(allDates[0], allDates[allDates.length - 1], precision);
+
+  // Build segments between each consecutive pair of points
   const segments: SegmentData[] = [];
-  const total = sorted.length; // number of segments = number of events
+  const total = allDates.length - 1; // number of segments = points - 1
 
-  for (let i = 0; i < sorted.length; i++) {
+  for (let i = 0; i < total; i++) {
     const d1 = allDates[i];
     const d2 = allDates[i + 1];
     const span = spanValue(d1, d2, precision);
     const percentage = totalSpan > 0 ? (100 * span) / totalSpan : 100 / total;
 
+    const isFirst = i === 0;
+    const isLast = i === total - 1;
+
+    let startLabel = "";
+    if (isFirst) {
+      startLabel = nowIndex === 0
+        ? formatNowLabel(precision, now, locale)
+        : formatEventDate(sorted[0], locale);
+    }
+
+    let endLabel = "";
+    if (isLast) {
+      endLabel = nowIndex >= 0 && nowIndex === dates.length
+        ? formatNowLabel(precision, now, locale)
+        : formatEventDate(sorted[sorted.length - 1], locale);
+    }
+
     segments.push({
-      startLabel: i === 0 ? formatEventDate(sorted[0], locale) : "",
-      endLabel: i === sorted.length - 1 ? formatNowLabel(precision, now, locale) : "",
+      startLabel,
+      endLabel,
       spanLabel: formatSpan(d1, d2, yearsOnly, timespanFormat, monthsOnly, spanT),
       percentage,
       order: i,
       total,
     });
   }
 
-  // Build markers: one per event + "Now"
-  const markers: MarkerData[] = sorted.map((event, i) => {
-    const pos = totalSpan > 0
-      ? (100 * spanValue(dates[0], dates[i], precision)) / totalSpan
-      : (100 * i) / (sorted.length);
-    return {
-      event,
-      label: formatEventDate(event, locale),
-      position: pos,
-    };
-  });
+  // Build markers in chronological order with Now at its correct position (when included)
+  const nowEvent: Event = { id: "0", name: nowName, description: null, year: currentYear(), month: null, day: null, type: "", link: null, dateProperty: null, deathYear: null, deathMonth: null, deathDay: null, useDeath: false };
+  const markers: MarkerData[] = [];
+  let eventIdx = 0;
 
-  // "Now" marker
-  markers.push({
-    event: { id: "0", name: nowName, description: null, year: currentYear(), month: null, day: null, type: "", link: null, dateProperty: null, deathYear: null, deathMonth: null, deathDay: null, useDeath: false },
-    label: formatNowLabel(precision, now, locale),
-    position: 100,
-  });
+  for (let i = 0; i < allDates.length; i++) {
+    if (nowIndex >= 0 && i === nowIndex) {
+      const pos = totalSpan > 0
+        ? (100 * spanValue(allDates[0], now, precision)) / totalSpan
+        : (100 * nowIndex) / (allDates.length - 1 || 1);
+      markers.push({ event: nowEvent, label: formatNowLabel(precision, now, locale), position: pos });
+    } else {
+      const pos = totalSpan > 0
+        ? (100 * spanValue(allDates[0], dates[eventIdx], precision)) / totalSpan
+        : (100 * i) / (allDates.length - 1 || 1);
+      markers.push({ event: sorted[eventIdx], label: formatEventDate(sorted[eventIdx], locale), position: pos });
+      eventIdx++;
+    }
+  }
 
   return { markers, segments, totalDays: totalSpan, yearsOnly, precision };
 }