v0.2.29 - add chapter table of contents to story chronicle

package.json

@@ -1,6 +1,6 @@
 {
   "name": "polaris-task-force",
-  "version": "0.2.28",
+  "version": "0.2.29",
   "description": "Web app for the Arma 3 unit Polaris Task Force. Uses Next.js for client- and server-side rendering, with a Postgres database and some other neat libraries.",
   "license": "MIT",
   "type": "module",

src/app/(frontend)/story/page.tsx

@@ -9,6 +9,7 @@ import { BEAT_BODY_CLASSES } from "@/lib/story/richtextClasses";
 import { BeatReactions } from "@/components/frontend/story/BeatReactions";
 import { BeatReadMarker } from "@/components/frontend/story/BeatReadMarker";
 import { StoryViewer, type StoryViewerBeat } from "@/components/frontend/story/StoryViewer";
+import { StoryTableOfContents } from "@/components/frontend/story/StoryTableOfContents";
 import type { StoryReaction } from "@/lib/story/reactions";
 
 export const metadata = {
@@ -101,73 +102,86 @@ export default async function StoryPage() {
   }));
 
   return (
-    <div className="mx-auto max-w-3xl px-4 py-10">
+    <div className="mx-auto max-w-3xl px-4 py-10 xl:max-w-screen-2xl">
-      <header className="mb-12 text-center">
+      <div className="xl:grid xl:grid-cols-[minmax(0,1fr)_minmax(0,48rem)_minmax(0,1fr)] xl:gap-8">
-        <p className="text-xs uppercase tracking-[0.3em] text-muted-foreground">
+        <div className="min-w-0 xl:col-start-2">
-          The Unit Chronicle
+          <header className="mb-12 text-center">
-        </p>
+            <p className="text-xs uppercase tracking-[0.3em] text-muted-foreground">
-        <h1 className="mt-2 font-serif text-4xl font-bold">Story Chronicle</h1>
+              The Unit Chronicle
-        <p className="mt-3 text-muted-foreground">
+            </p>
-          Every operation leaves a mark. These are the beats of our story, told in
+            <h1 className="mt-2 font-serif text-4xl font-bold">Story Chronicle</h1>
-          order.
+            <p className="mt-3 text-muted-foreground">
-        </p>
+              Every operation leaves a mark. These are the beats of our story, told in
-        {sorted.length > 0 && (
+              order.
-          <div className="mt-5 flex justify-center">
+            </p>
-            <StoryViewer beats={readerBeats} />
+            {sorted.length > 0 && (
-          </div>
+              <div className="mt-5 flex justify-center">
-        )}
+                <StoryViewer beats={readerBeats} />
-      </header>
+              </div>
+            )}
+          </header>
 
-      {sorted.length === 0 ? (
+          {sorted.length === 0 ? (
-        <p className="text-center text-muted-foreground">
+            <p className="text-center text-muted-foreground">
-          No published chapters yet. Check back soon.
+              No published chapters yet. Check back soon.
-        </p>
+            </p>
-      ) : (
+          ) : (
-        <ol className="space-y-16">
+            <ol className="space-y-16">
-          {sorted.map((beat, index) => {
+              {sorted.map((beat, index) => {
-            const state = stateByBeat.get(beat.id);
+                const state = stateByBeat.get(beat.id);
-            const mission =
+                const mission =
-              beat.mission && typeof beat.mission !== "number" ? beat.mission : null;
+                  beat.mission && typeof beat.mission !== "number" ? beat.mission : null;
-            const missionLabel = mission
+                const missionLabel = mission
-              ? mission.codeName
+                  ? mission.codeName
-                ? `${mission.codeName} · ${mission.name}`
+                    ? `${mission.codeName} · ${mission.name}`
-                : mission.name
+                    : mission.name
-              : null;
+                  : null;
-            return (
+                return (
-              <li
+                  <li
-                key={beat.id}
+                    key={beat.id}
-                data-beat-id={beat.id}
+                    id={`beat-${beat.id}`}
-                className="relative border-l border-border pl-8"
+                    data-beat-id={beat.id}
-              >
+                    className="relative scroll-mt-20 border-l border-border pl-8"
-                <span className="absolute -left-[9px] top-1.5 size-4 rounded-full border-2 border-background bg-primary" />
+                  >
-                <div className="flex items-center justify-between gap-4">
+                    <span className="absolute -left-[9px] top-1.5 size-4 rounded-full border-2 border-background bg-primary" />
-                  <p className="text-xs uppercase tracking-widest text-muted-foreground">
+                    <div className="flex items-center justify-between gap-4">
-                    Chapter {index + 1}
+                      <p className="text-xs uppercase tracking-widest text-muted-foreground">
-                  </p>
+                        Chapter {index + 1}
-                  <BeatReadMarker beatId={beat.id} initialRead={Boolean(state?.readAt)} />
+                      </p>
-                </div>
+                      <BeatReadMarker beatId={beat.id} initialRead={Boolean(state?.readAt)} />
-                <h2 className="mt-2 font-serif text-2xl font-semibold">{beat.title}</h2>
+                    </div>
-                <div className="mt-1 flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
+                    <h2 className="mt-2 font-serif text-2xl font-semibold">{beat.title}</h2>
-                  {beat.occurredAt && <span>{DATE_FORMAT.format(new Date(beat.occurredAt))}</span>}
+                    <div className="mt-1 flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
-                  {missionLabel && (
+                      {beat.occurredAt && (
-                    <span className="rounded border border-border px-2 py-0.5">
+                        <span>{DATE_FORMAT.format(new Date(beat.occurredAt))}</span>
-                      {missionLabel}
+                      )}
-                    </span>
+                      {missionLabel && (
-                  )}
+                        <span className="rounded border border-border px-2 py-0.5">
-                </div>
+                          {missionLabel}
-                <div className="mt-4">
+                        </span>
-                  <RichText data={beat.body} className={cn(BEAT_BODY_CLASSES)} />
+                      )}
-                </div>
+                    </div>
-                <BeatReactions
+                    <div className="mt-4">
-                  beatId={beat.id}
+                      <RichText data={beat.body} className={cn(BEAT_BODY_CLASSES)} />
-                  initialReaction={state?.reaction ?? null}
+                    </div>
-                  initialCounts={counts.get(beat.id) ?? emptyCounts()}
+                    <BeatReactions
-                />
+                      beatId={beat.id}
-              </li>
+                      initialReaction={state?.reaction ?? null}
-            );
+                      initialCounts={counts.get(beat.id) ?? emptyCounts()}
-          })}
+                    />
-        </ol>
+                  </li>
-      )}
+                );
+              })}
+            </ol>
+          )}
+        </div>
+
+        {sorted.length > 0 && (
+          <aside className="hidden xl:col-start-1 xl:row-start-1 xl:block xl:pt-48 xl:min-w-max">
+            <StoryTableOfContents beats={readerBeats} />
+          </aside>
+        )}
+      </div>
     </div>
   );
 }

src/components/frontend/story/StoryTableOfContents.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { StoryViewerBeat } from "@/components/frontend/story/StoryViewer";
+import { cn } from "@/lib/utils";
+
+export type StoryTableOfContentsBeat = Pick<
+  StoryViewerBeat,
+  "id" | "title" | "chapter" | "initialRead"
+>;
+
+export function StoryTableOfContents({
+  beats,
+}: {
+  readonly beats: readonly StoryTableOfContentsBeat[];
+}) {
+  const [activeBeatId, setActiveBeatId] = useState<number | null>(beats[0]?.id ?? null);
+
+  useEffect(() => {
+    if (beats.length === 0) return;
+
+    const elements = beats
+      .map(({ id }) => document.querySelector<HTMLElement>(`[data-beat-id="${id}"]`))
+      .filter((element): element is HTMLElement => element !== null);
+
+    if (elements.length === 0 || !("IntersectionObserver" in window)) return;
+
+    const updateActiveBeat = () => {
+      const viewportMarker = window.innerHeight * 0.3;
+      const visibleBeats = elements
+        .map((element) => ({
+          id: Number(element.dataset.beatId),
+          rect: element.getBoundingClientRect(),
+        }))
+        .filter(
+          ({ id, rect }) =>
+            Number.isFinite(id) && rect.bottom > 0 && rect.top < window.innerHeight,
+        );
+      const activeBeat =
+        visibleBeats
+          .filter(({ rect }) => rect.top <= viewportMarker)
+          .sort((a, b) => b.rect.top - a.rect.top)[0] ??
+        visibleBeats.sort((a, b) => a.rect.top - b.rect.top)[0];
+
+      if (activeBeat) setActiveBeatId(activeBeat.id);
+    };
+
+    const observer = new IntersectionObserver(updateActiveBeat, {
+      rootMargin: "-20% 0px -60% 0px",
+      threshold: 0,
+    });
+    elements.forEach((element) => observer.observe(element));
+    updateActiveBeat();
+
+    return () => observer.disconnect();
+  }, [beats]);
+
+  if (beats.length === 0) return null;
+
+  function scrollToBeat(beatId: number) {
+    const element = document.querySelector<HTMLElement>(`[data-beat-id="${beatId}"]`);
+    if (!element) return;
+
+    setActiveBeatId(beatId);
+    element.scrollIntoView({
+      behavior: window.matchMedia("(prefers-reduced-motion: no-preference)").matches
+        ? "smooth"
+        : "auto",
+      block: "start",
+    });
+  }
+
+  return (
+    <nav aria-label="Chronicle chapters" className="sticky top-6 overflow-visible">
+      <p className="mb-3 px-3 text-xs font-mono uppercase tracking-widest text-muted-foreground">
+        Chapters
+      </p>
+      <ol className="border-l border-border">
+        {beats.map((beat) => {
+          const active = activeBeatId === beat.id;
+          const readLabel = beat.initialRead ? "Read" : "Unread";
+
+          return (
+            <li key={beat.id}>
+              <button
+                type="button"
+                aria-current={active ? "location" : undefined}
+                aria-label={`Chapter ${beat.chapter}: ${beat.title}. ${readLabel}.`}
+                onClick={() => scrollToBeat(beat.id)}
+                className={cn(
+                  "group relative -ml-px flex w-full items-start gap-2 border-l-2 px-2 py-2 text-left text-xs transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                  active
+                    ? "border-primary text-foreground"
+                    : "border-transparent text-muted-foreground hover:text-foreground",
+                )}
+              >
+                <span className="shrink-0 font-mono tabular-nums">{beat.chapter.toString().padStart(2, "0")}</span>
+                <span className="min-w-0 flex-1">
+                  <span
+                    className={cn(
+                      "-mx-1 -my-0.5 inline-block max-w-full truncate align-bottom rounded-sm px-1 py-0.5",
+                      "group-hover:relative group-hover:z-10 group-hover:max-w-none group-hover:overflow-visible group-hover:whitespace-nowrap group-hover:bg-muted/60 group-hover:text-foreground",
+                    )}
+                  >
+                    {beat.title}
+                  </span>
+                </span>
+                <span
+                  aria-hidden="true"
+                  className={cn(
+                    "mt-1.5 size-1.5 shrink-0 rounded-full",
+                    beat.initialRead ? "bg-emerald-500" : "bg-amber-500",
+                  )}
+                />
+              </button>
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}