@tanishqkancharla/diffmap 0.1.4 → 0.2.0

package/src/viewer/TableOfContents.tsx

@@ -1,39 +1,216 @@
-import { useEffect, useState, type RefObject } from "react";
-import { colors, focusRing, radius, spacing, text } from "maui";
+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,
+  text,
+} from "maui";
 import { style, useStyles } from "purse-styles";
 import type { ViewerHeading } from "../parseViewer.js";
 
 type TocItem = ViewerHeading & { children: TocItem[] };
 
+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;
+
+// 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;
+
+/**
+ * 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.
+ */
+const TOC_DOCKED_MIN_GUTTER_PX = 220;
+
+export function hasTableOfContents(headings: ViewerHeading[]) {
+  return tocHeadings(headings).length > 0;
+}
+
+export function tocLineWidth(level: number, shallowestLevel: number) {
+  const depth = Math.max(0, level - shallowestLevel);
+  return Math.max(TOC_LINE_MIN_PX, TOC_LINE_MAX_PX - depth * TOC_LINE_STEP_PX);
+}
+
 export function TableOfContents(props: {
   headings: ViewerHeading[];
   articleRef: RefObject<HTMLElement | null>;
 }) {
-  const items = nestHeadings(tocHeadings(props.headings));
+  const headings = tocHeadings(props.headings);
+  const items = nestHeadings(headings);
   const { activeId, setActiveId } = useActiveHeading(
     props.headings,
     props.articleRef,
   );
-  const navClass = useStyles(styles.nav);
+  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
-      className={navClass}
+      ref={navRef}
+      id="diffmap-toc"
+      className={railClass}
       aria-label="Table of contents"
       data-diffmap-kind="toc"
+      data-docked={docked ? "true" : "false"}
     >
-      <TocList
-        items={items}
-        className={listClass}
-        activeId={activeId}
-        onSelect={setActiveId}
-      />
+      {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 reduceMotion = Boolean(useReducedMotion());
+  const [open, setOpen] = useState(false);
+  const hoveringRef = useRef(false);
+  const dwellTimer = useRef<number | undefined>(undefined);
+  const closeTimer = useRef<number | undefined>(undefined);
+
+  useEffect(() => {
+    const onPageLeave = () => {
+      // Leaving the window must close a movement-opened nav, never open one.
+      // A left-edge exit used to land in the dwell zone and spring the drawer.
+      hoveringRef.current = false;
+      window.clearTimeout(dwellTimer.current);
+      window.clearTimeout(closeTimer.current);
+      dwellTimer.current = undefined;
+      closeTimer.current = undefined;
+      setOpen(false);
+    };
+    document.documentElement.addEventListener("mouseleave", onPageLeave);
+    return () => {
+      document.documentElement.removeEventListener("mouseleave", onPageLeave);
+      window.clearTimeout(dwellTimer.current);
+      window.clearTimeout(closeTimer.current);
+    };
+  }, []);
+
+  const shallowest = props.headings.reduce(
+    (min, heading) => Math.min(min, heading.level),
+    6,
+  );
+
+  return (
+    <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;
+          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}
+      >
+        {props.children}
+      </motion.div>
+    </div>
+  );
+}
+
 function TocList(props: {
   items: TocItem[];
   className: string;
@@ -117,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>,
@@ -150,40 +350,110 @@ function useActiveHeading(
   return { activeId, setActiveId };
 }
 
+const tocListRules = {
+  "& ol": {
+    listStyle: "none",
+    counterReset: "none",
+    margin: 0,
+    padding: 0,
+  },
+  "& ol ol": {
+    paddingInlineStart: spacing.value(6),
+  },
+  "& ol > li::before": {
+    content: "none",
+  },
+  "& a": {
+    fontWeight: 400,
+    textDecoration: "none",
+  },
+} as const;
+
 const styles = {
-  nav: style(spacing.padding({ left: 16, right: 6, top: 8, bottom: 8 }), {
-    boxSizing: "border-box",
+  rail: style({
+    // Sit in the prose grid's left gutter (column 1). Lines share that outer
+    // edge and grow inward. Sticky height keeps them in view, off the
+    // scrollbar, and on the article when Diff is open.
     gridColumn: "1",
-    alignSelf: "stretch",
-    minWidth: "240px",
-    width: "max-content",
-    maxWidth: "280px",
-    minHeight: 0,
-    height: "fit-content",
-    maxHeight: "100%",
-    marginTop: "auto",
-    marginBottom: "auto",
-    overflowY: "auto",
-    backgroundColor: "transparent",
-    "@media (max-width: 1100px)": {
-      display: "none",
-    },
-    "&[data-diffmap-kind='toc'] ol": {
-      listStyle: "none",
-      counterReset: "none",
-      margin: 0,
-      padding: 0,
+    gridRow: "1",
+    position: "sticky",
+    top: 0,
+    alignSelf: "start",
+    justifySelf: "stretch",
+    boxSizing: "border-box",
+    width: "100%",
+    minWidth: 0,
+    height: "100cqh",
+    zIndex: 3,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "flex-start",
+    pointerEvents: "none",
+  }),
+  cluster: style(spacing.padding({ top: 4, bottom: 4, left: 2, right: 6 }), {
+    position: "relative",
+    minWidth: "40px",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: "12px",
+    pointerEvents: "auto",
+    "&[data-open='true'] [data-diffmap-kind='toc-line']": {
+      opacity: 0,
     },
-    "&[data-diffmap-kind='toc'] ol ol": {
-      paddingInlineStart: spacing.value(6),
+  }),
+  line: style({
+    display: "block",
+    height: "1px",
+    flexShrink: 0,
+    borderRadius: "999px",
+    backgroundColor: colors.gray[8],
+    opacity: 1,
+    transition: `opacity ${String(TOC_TRANSITION_MS)}ms ${motionEasing}`,
+    "@media (prefers-reduced-motion: reduce)": {
+      transition: "none",
     },
-    "&[data-diffmap-kind='toc'] ol > li::before": {
-      content: "none",
+    "&[data-current='true']": {
+      backgroundColor: colors.gray[12],
     },
-    "&[data-diffmap-kind='toc'] a": {
-      fontWeight: 400,
-      textDecoration: "none",
+  }),
+  card: style(
+    radius.lg,
+    shadow.medium,
+    background.element,
+    spacing.padding({ x: 3, y: 3 }),
+    {
+      position: "absolute",
+      insetInlineStart: 0,
+      top: "50%",
+      zIndex: 1,
+      boxSizing: "border-box",
+      width: "min(240px, calc(100cqw - 24px))",
+      maxHeight: "min(32rem, calc(100cqh - 24px))",
+      overflowX: "hidden",
+      overflowY: "auto",
+      overscrollBehavior: "contain",
+      transformOrigin: "left center",
+      pointerEvents: "none",
+      "&[data-open='true']": {
+        pointerEvents: "auto",
+      },
+      ...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({
@@ -206,6 +476,10 @@ const styles = {
       "&[aria-current='location']": {
         color: colors.accent[9],
         fontWeight: 500,
+        backgroundColor: colors.accent[3],
+      },
+      "&[aria-current='location']:hover": {
+        backgroundColor: colors.accent[4],
       },
     },
   ),