@tanishqkancharla/diffmap 0.1.5 → 0.3.0

package/src/viewer/TableOfContents.tsx

@@ -1,9 +1,18 @@
-import { useEffect, useRef, useState, type RefObject } from "react";
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+  type RefObject,
+} from "react";
+import { motion, useReducedMotion, type Transition } from "motion/react";
 import {
   background,
   colors,
   focusRing,
   motionEasing,
+  overlayMotion,
   radius,
   shadow,
   spacing,
@@ -14,23 +23,37 @@ import type { ViewerHeading } from "../parseViewer.js";
 
 type TocItem = ViewerHeading & { children: TocItem[] };
 
-const TOC_LINE_MAX_PX = 24;
-const TOC_LINE_MIN_PX = 8;
-const TOC_LINE_STEP_PX = 6;
+const TOC_LINE_MAX_PX = 12;
+const TOC_LINE_MIN_PX = 3;
+const TOC_LINE_STEP_PX = 3;
 const DWELL_MS = 50;
 const LEAVE_MS = 100;
 const TOC_TRANSITION_MS = 180;
-const TOC_MOTION = `opacity ${String(TOC_TRANSITION_MS)}ms ${motionEasing}, transform ${String(TOC_TRANSITION_MS)}ms ${motionEasing}`;
+
+// Maui's Dialog motion (no-bounce spring in, ease-in out), about 25% faster
+// so the menu keeps up with hover.
+const cardEnter: Transition = {
+  type: "spring",
+  visualDuration: 0.15,
+  bounce: overlayMotion.dialogEnter.bounce,
+};
+const cardExit: Transition = {
+  duration: 0.09,
+  ease: "easeIn",
+};
+const cardReduced: Transition = {
+  duration: overlayMotion.reduced.durationMs / 1000,
+  ease: "easeInOut",
+};
 
 /** Equal side gutters so the line rail fits and the article column stays centered. */
 export const TOC_SIDE_MARGIN_PX = 48;
 
 /**
- * Same cutoff that used to open the wide overlay (1101px). Applied to the
- * article column's remaining width, so a resize or an open Diff panel can
- * drop below it even when the viewport used to qualify.
+ * Left gutter width at which the list sits there as-is. Narrower gutters (a
+ * small window, or an open Diff panel) collapse it to lines and a hover card.
  */
-export const TOC_OPEN_MIN_WIDTH_PX = 1101;
+const TOC_DOCKED_MIN_GUTTER_PX = 220;
 
 export function hasTableOfContents(headings: ViewerHeading[]) {
   return tocHeadings(headings).length > 0;
@@ -44,9 +67,6 @@ export function tocLineWidth(level: number, shallowestLevel: number) {
 export function TableOfContents(props: {
   headings: ViewerHeading[];
   articleRef: RefObject<HTMLElement | null>;
-  open: boolean;
-  onDwellOpen: () => void;
-  onDwellClose: () => void;
 }) {
   const headings = tocHeadings(props.headings);
   const items = nestHeadings(headings);
@@ -54,16 +74,59 @@ export function TableOfContents(props: {
     props.headings,
     props.articleRef,
   );
+  const navRef = useRef<HTMLElement>(null);
+  const docked = useDocked(navRef);
   const railClass = useStyles(styles.rail);
+  const dockedClass = useStyles(styles.docked);
+  const listClass = useStyles(styles.list);
+
+  if (items.length === 0) return undefined;
+
+  const list = (
+    <TocList
+      items={items}
+      className={listClass}
+      activeId={activeId}
+      onSelect={setActiveId}
+    />
+  );
+
+  return (
+    <nav
+      ref={navRef}
+      id="diffmap-toc"
+      className={railClass}
+      aria-label="Table of contents"
+      data-diffmap-kind="toc"
+      data-docked={docked ? "true" : "false"}
+    >
+      {docked ? (
+        <div className={dockedClass} data-diffmap-kind="toc-list">
+          {list}
+        </div>
+      ) : (
+        <TocRail headings={headings} activeId={activeId}>
+          {list}
+        </TocRail>
+      )}
+    </nav>
+  );
+}
+
+/** Heading lines that open the list in a floating card on hover. */
+function TocRail(props: {
+  headings: ViewerHeading[];
+  activeId: string | undefined;
+  children: ReactNode;
+}) {
   const clusterClass = useStyles(styles.cluster);
   const lineClass = useStyles(styles.line);
   const cardClass = useStyles(styles.card);
-  const listClass = useStyles(styles.list);
+  const reduceMotion = Boolean(useReducedMotion());
+  const [open, setOpen] = useState(false);
   const hoveringRef = useRef(false);
   const dwellTimer = useRef<number | undefined>(undefined);
   const closeTimer = useRef<number | undefined>(undefined);
-  const onDwellOpen = props.onDwellOpen;
-  const onDwellClose = props.onDwellClose;
 
   useEffect(() => {
     const onPageLeave = () => {
@@ -74,7 +137,7 @@ export function TableOfContents(props: {
       window.clearTimeout(closeTimer.current);
       dwellTimer.current = undefined;
       closeTimer.current = undefined;
-      onDwellClose();
+      setOpen(false);
     };
     document.documentElement.addEventListener("mouseleave", onPageLeave);
     return () => {
@@ -82,77 +145,69 @@ export function TableOfContents(props: {
       window.clearTimeout(dwellTimer.current);
       window.clearTimeout(closeTimer.current);
     };
-  }, [onDwellClose]);
-
-  if (items.length === 0) return undefined;
+  }, []);
 
-  const shallowest = headings.reduce(
+  const shallowest = props.headings.reduce(
     (min, heading) => Math.min(min, heading.level),
     6,
   );
 
   return (
-    <nav
-      id="diffmap-toc"
-      className={railClass}
-      aria-label="Table of contents"
-      data-diffmap-kind="toc"
-      data-open={props.open ? "true" : "false"}
-    >
-      <div
-        className={clusterClass}
-        data-open={props.open ? "true" : "false"}
-        onPointerEnter={() => {
-          hoveringRef.current = true;
-          window.clearTimeout(closeTimer.current);
-          closeTimer.current = undefined;
-          if (props.open || dwellTimer.current !== undefined) return;
-          dwellTimer.current = window.setTimeout(() => {
-            dwellTimer.current = undefined;
-            if (!hoveringRef.current) return;
-            onDwellOpen();
-          }, DWELL_MS);
-        }}
-        onPointerLeave={() => {
-          hoveringRef.current = false;
-          window.clearTimeout(dwellTimer.current);
+    <div
+      className={clusterClass}
+      data-open={open ? "true" : "false"}
+      onPointerEnter={() => {
+        hoveringRef.current = true;
+        window.clearTimeout(closeTimer.current);
+        closeTimer.current = undefined;
+        if (open || dwellTimer.current !== undefined) return;
+        dwellTimer.current = window.setTimeout(() => {
           dwellTimer.current = undefined;
-          window.clearTimeout(closeTimer.current);
-          closeTimer.current = window.setTimeout(() => {
-            closeTimer.current = undefined;
-            if (hoveringRef.current) return;
-            onDwellClose();
-          }, LEAVE_MS);
-        }}
+          if (!hoveringRef.current) return;
+          setOpen(true);
+        }, DWELL_MS);
+      }}
+      onPointerLeave={() => {
+        hoveringRef.current = false;
+        window.clearTimeout(dwellTimer.current);
+        dwellTimer.current = undefined;
+        window.clearTimeout(closeTimer.current);
+        closeTimer.current = window.setTimeout(() => {
+          closeTimer.current = undefined;
+          if (hoveringRef.current) return;
+          setOpen(false);
+        }, LEAVE_MS);
+      }}
+    >
+      {props.headings.map((heading) => (
+        <span
+          key={heading.id}
+          className={lineClass}
+          data-diffmap-kind="toc-line"
+          data-level={heading.level}
+          data-current={props.activeId === heading.id ? "true" : "false"}
+          style={{ width: tocLineWidth(heading.level, shallowest) }}
+        />
+      ))}
+      <motion.div
+        className={cardClass}
+        // Motion owns transform, so it also applies the vertical centering.
+        style={{ y: "-50%" }}
+        initial={false}
+        animate={
+          open
+            ? { opacity: 1, scale: 1 }
+            : { opacity: 0, scale: reduceMotion ? 1 : 0.94 }
+        }
+        transition={reduceMotion ? cardReduced : open ? cardEnter : cardExit}
+        data-diffmap-kind="toc-card"
+        data-open={open ? "true" : "false"}
+        aria-hidden={!open}
+        inert={!open}
       >
-        {headings.map((heading) => (
-          <span
-            key={heading.id}
-            className={lineClass}
-            data-diffmap-kind="toc-line"
-            data-level={heading.level}
-            data-current={activeId === heading.id ? "true" : "false"}
-            style={{ width: tocLineWidth(heading.level, shallowest) }}
-          />
-        ))}
-        <div
-          className={cardClass}
-          data-diffmap-kind="toc-card"
-          data-open={props.open ? "true" : "false"}
-          aria-hidden={!props.open}
-          inert={!props.open}
-        >
-          <TocList
-            items={items}
-            className={listClass}
-            activeId={activeId}
-            onSelect={(id) => {
-              setActiveId(id);
-            }}
-          />
-        </div>
-      </div>
-    </nav>
+        {props.children}
+      </motion.div>
+    </div>
   );
 }
 
@@ -239,6 +294,29 @@ function nestHeadings(headings: ViewerHeading[]): TocItem[] {
   return items;
 }
 
+/**
+ * The nav fills the gutter column in both modes, so its width is the gutter's
+ * and does not depend on which mode renders inside it.
+ */
+function useDocked(navRef: RefObject<HTMLElement | null>) {
+  const [docked, setDocked] = useState(false);
+
+  useLayoutEffect(() => {
+    const node = navRef.current;
+    if (node === null) return;
+    const measure = () => {
+      if (node.clientWidth === 0) return;
+      setDocked(node.clientWidth >= TOC_DOCKED_MIN_GUTTER_PX);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [navRef]);
+
+  return docked;
+}
+
 function useActiveHeading(
   headings: ViewerHeading[],
   articleRef: RefObject<HTMLElement | null>,
@@ -273,19 +351,19 @@ function useActiveHeading(
 }
 
 const tocListRules = {
-  "&[data-diffmap-kind='toc-card'] ol": {
+  "& ol": {
     listStyle: "none",
     counterReset: "none",
     margin: 0,
     padding: 0,
   },
-  "&[data-diffmap-kind='toc-card'] ol ol": {
+  "& ol ol": {
     paddingInlineStart: spacing.value(6),
   },
-  "&[data-diffmap-kind='toc-card'] ol > li::before": {
+  "& ol > li::before": {
     content: "none",
   },
-  "&[data-diffmap-kind='toc-card'] a": {
+  "& a": {
     fontWeight: 400,
     textDecoration: "none",
   },
@@ -315,10 +393,11 @@ const styles = {
   }),
   cluster: style(spacing.padding({ top: 4, bottom: 4, left: 2, right: 6 }), {
     position: "relative",
+    minWidth: "40px",
     display: "flex",
     flexDirection: "column",
     alignItems: "flex-start",
-    gap: spacing.value(6),
+    gap: "12px",
     pointerEvents: "auto",
     "&[data-open='true'] [data-diffmap-kind='toc-line']": {
       opacity: 0,
@@ -326,7 +405,7 @@ const styles = {
   }),
   line: style({
     display: "block",
-    height: "2px",
+    height: "1px",
     flexShrink: 0,
     borderRadius: "999px",
     backgroundColor: colors.gray[8],
@@ -356,21 +435,26 @@ const styles = {
       overflowY: "auto",
       overscrollBehavior: "contain",
       transformOrigin: "left center",
-      opacity: 0,
       pointerEvents: "none",
-      transform: "translateY(-50%) translateX(-6px) scale(0.98)",
-      transition: TOC_MOTION,
-      "@media (prefers-reduced-motion: reduce)": {
-        transition: "none",
-      },
       "&[data-open='true']": {
-        opacity: 1,
         pointerEvents: "auto",
-        transform: "translateY(-50%) translateX(0px) scale(1)",
       },
       ...tocListRules,
     },
   ),
+  // The same list as the card, laid straight into the gutter: no surface,
+  // shadow, or hover-to-open. Stays inside the gutter so it never covers prose.
+  docked: style(spacing.padding({ right: 6 }), {
+    boxSizing: "border-box",
+    width: "100%",
+    maxWidth: "240px",
+    maxHeight: "calc(100cqh - 24px)",
+    overflowX: "hidden",
+    overflowY: "auto",
+    overscrollBehavior: "contain",
+    pointerEvents: "auto",
+    ...tocListRules,
+  }),
   list: style(text({ size: "sm", fontWeight: 400, color: "lowContrast" })),
   item: style({
     "&::before": {

package/src/viewer/ViewerApp.tsx

@@ -1,10 +1,4 @@
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  type ReactNode,
-} from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 import {
   backgroundColor,
   border,
@@ -19,16 +13,15 @@ import {
   text,
 } from "maui";
 import { style, useStyles } from "purse-styles";
+import { ALL, WORKING, type Rev } from "../changes.js";
 import type { ViewerDocument } from "../parseViewer.js";
 import { ComarkView } from "./ComarkView.tsx";
 import { SourceDiffPanel, type SourceSelection } from "./SourceDiffPanel.js";
 import { CloseServerButton } from "./CloseServerButton.tsx";
 import { DiffButton } from "./DiffButton.tsx";
-import { TocButton } from "./TocButton.tsx";
 import {
   hasTableOfContents,
   TableOfContents,
-  TOC_OPEN_MIN_WIDTH_PX,
   TOC_SIDE_MARGIN_PX,
 } from "./TableOfContents.tsx";
 import { ViewerModeContext, type ViewerMode } from "./viewerMode.ts";
@@ -42,13 +35,31 @@ export function ViewerApp(props: {
   mode: ViewerMode;
   title?: string;
   headerActions?: ReactNode;
+  /** Changes the Diff button opens before any reference is selected, such as a pull request. */
+  defaultRev?: Rev;
 }) {
   const viewerDocument = props.document;
   const meta = useViewerMeta(props.mode === "local");
   const [selection, setSelection] = useState<SourceSelection>();
   const [showDiffPanel, setShowDiffPanel] = useState(false);
+  const local = props.mode === "local";
+  const documentRev =
+    props.defaultRev ??
+    viewerDocument.changeRevs[0] ??
+    viewerDocument.references.find((ref) => ref.rev !== undefined)?.rev ??
+    (local ? ALL : WORKING);
+  const [panelRev, setPanelRev] = useState(documentRev);
+  // A reference opens its own rev; a rev-less one opens uncommitted changes locally.
+  const select = (next: SourceSelection) => {
+    setSelection(next);
+    setPanelRev(next.reference.rev ?? (local ? WORKING : documentRev));
+  };
+  // A local viewer always has git changes to show.
   const hasSourceDiffs =
-    viewerDocument.sourceDiffs.length > 0 || viewerDocument.hasReferences;
+    local ||
+    viewerDocument.references.length > 0 ||
+    viewerDocument.changeRevs.length > 0 ||
+    props.defaultRev !== undefined;
   const diffPanelOpen = hasSourceDiffs && showDiffPanel;
   const body = useStyles(styles.body);
   const [shutDown, setShutDown] = useState(false);
@@ -71,61 +82,6 @@ export function ViewerApp(props: {
   const stage = useStyles(styles.stage);
   const articleRef = useRef<HTMLElement>(null);
   const hasToc = hasTableOfContents(viewerDocument.headings);
-  const tocDismissed = useRef(false);
-  const tocPinned = useRef(false);
-  const tocFits = useRef(window.innerWidth >= TOC_OPEN_MIN_WIDTH_PX);
-  const remeasureToc = useRef<() => void>(() => {});
-  const [tocOpen, setTocOpen] = useState<TocMode | undefined>(() =>
-    hasToc && window.innerWidth >= TOC_OPEN_MIN_WIDTH_PX ? "space" : undefined,
-  );
-  const tocExpanded = tocOpen !== undefined;
-  const onDwellOpen = useCallback(() => {
-    setTocOpen((mode) =>
-      mode === "click" || mode === "space" ? mode : "dwell",
-    );
-  }, []);
-  const onDwellClose = useCallback(() => {
-    setTocOpen((mode) => {
-      if (mode === "click" || mode === "space") return mode;
-      if (tocFits.current && !tocDismissed.current) {
-        return tocPinned.current ? "click" : "space";
-      }
-      return undefined;
-    });
-  }, []);
-
-  useEffect(() => {
-    if (!hasToc) return;
-    const measure = () => {
-      const node = articleRef.current;
-      if (node !== null && node.clientWidth === 0) return;
-      const width = node?.clientWidth ?? window.innerWidth;
-      const next = width >= TOC_OPEN_MIN_WIDTH_PX;
-      const previous = tocFits.current;
-      tocFits.current = next;
-      if (previous === next) return;
-      if (!next) {
-        setTocOpen(undefined);
-        return;
-      }
-      setTocOpen((mode) => {
-        if (mode === "click" || mode === "dwell") return mode;
-        if (tocDismissed.current) return undefined;
-        return tocPinned.current ? "click" : "space";
-      });
-    };
-    remeasureToc.current = measure;
-    const observer = new ResizeObserver(measure);
-    const articleNode = articleRef.current;
-    if (articleNode) observer.observe(articleNode);
-    window.addEventListener("resize", measure);
-    return () => {
-      observer.disconnect();
-      window.removeEventListener("resize", measure);
-      remeasureToc.current = () => {};
-    };
-  }, [hasToc]);
-
   useEffect(() => {
     document.title = title;
   }, [title]);
@@ -152,32 +108,13 @@ export function ViewerApp(props: {
       <div className={shell}>
         <header className={header}>
           <div className={heading}>
-            {hasToc && (
-              <TocButton
-                expanded={tocExpanded}
-                onClick={() => {
-                  if (tocExpanded) {
-                    tocDismissed.current = true;
-                    tocPinned.current = false;
-                    setTocOpen(undefined);
-                    return;
-                  }
-                  tocDismissed.current = false;
-                  tocPinned.current = true;
-                  setTocOpen("click");
-                }}
-              />
-            )}
             <div className={titleClass}>{title}</div>
           </div>
           <div className={actions}>
             {hasSourceDiffs && (
               <DiffButton
                 pressed={showDiffPanel}
-                onClick={() => {
-                  setShowDiffPanel((open) => !open);
-                  window.requestAnimationFrame(() => remeasureToc.current());
-                }}
+                onClick={() => setShowDiffPanel((open) => !open)}
               />
             )}
             {props.headerActions}
@@ -202,13 +139,10 @@ export function ViewerApp(props: {
                     selectedAnnotation={selection?.annotation}
                     onSelectAnnotation={(line) => {
                       setShowDiffPanel(true);
-                      setSelection({
+                      select({
                         annotation: line,
                         reference: line.references[0]!,
                       });
-                      window.requestAnimationFrame(() =>
-                        remeasureToc.current(),
-                      );
                     }}
                   />
                 </div>
@@ -216,18 +150,24 @@ export function ViewerApp(props: {
                   <TableOfContents
                     headings={viewerDocument.headings}
                     articleRef={articleRef}
-                    open={tocExpanded}
-                    onDwellOpen={onDwellOpen}
-                    onDwellClose={onDwellClose}
                   />
                 )}
               </div>
             </article>
             {diffPanelOpen && (
               <SourceDiffPanel
-                items={viewerDocument.sourceDiffs}
+                rev={panelRev}
+                onRevChange={
+                  local
+                    ? (rev) => {
+                        // A focused reference's lines belong to its own rev.
+                        setSelection(undefined);
+                        setPanelRev(rev);
+                      }
+                    : undefined
+                }
                 selection={selection}
-                onSelect={setSelection}
+                onSelect={select}
               />
             )}
           </div>
@@ -237,8 +177,6 @@ export function ViewerApp(props: {
   );
 }
 
-type TocMode = "click" | "dwell" | "space";
-
 function useViewerMeta(enabled: boolean) {
   const [meta, setMeta] = useState<ViewerMeta>();
   useEffect(() => {
@@ -350,24 +288,6 @@ const styles = {
     "& ul > li[data-task]::before, & ol > li[data-task]::before": {
       content: "none",
     },
-    "& ul > li[data-task] > .diffmap-task-checkbox, & ol > li[data-task] > .diffmap-task-checkbox":
-      {
-        // Maui proseHtml md listPadding.
-        position: "absolute",
-        left: "-20px",
-        top: "6px",
-      },
-    "& .diffmap-task-checkbox label > span:last-child": {
-      position: "absolute",
-      width: "1px",
-      height: "1px",
-      padding: 0,
-      margin: "-1px",
-      overflow: "hidden",
-      clip: "rect(0, 0, 0, 0)",
-      whiteSpace: "nowrap",
-      border: 0,
-    },
   }),
   closed: style(
     flex({