papilot 0.7.0 → 0.8.0

package/vendor/latex-review/src/web/review.tsx

@@ -18,8 +18,16 @@ import type {
 } from "../types.ts";
 import { PdfStrip } from "./PdfStrip.tsx";
 import { ChangeMap } from "./ChangeMap.tsx";
+import { EFFECTS_EVENT, EFFECTS_STORAGE, readExpandedEffects } from "./effect-preferences.ts";
 import { STATUS } from "./overview.tsx";
-import { locale, t, tn, withLanguage } from "./i18n.ts";
+import { language, locale, t, tn, withLanguage } from "./i18n.ts";
+import {
+  ConfirmReferences,
+  ReferenceBanner,
+  ReferenceEntries,
+  risks,
+  useReferenceChecks,
+} from "./references.tsx";
 import { bindingLabel, readShortcuts, resolveShortcuts, shortcutAction, SHORTCUT_EVENT, SHORTCUT_STORAGE } from "./shortcuts.ts";
 import {
   STATE,
@@ -137,6 +145,13 @@ export function ReviewApp({
       Record<string, PlaceView[] | "loading" | { error: string }>
     >({}),
     [composer, setComposer] = useState<Composer | null>(null),
+    // Accepting bibliography entries that are not verified waits for this.
+    [confirm, setConfirm] = useState<{
+      kind: Kind;
+      chosen: string[];
+      body: string;
+      items: { label: string; reasons: string[] }[];
+    } | null>(null),
     [draft, setDraft] = useState(""),
     [help, setHelp] = useState(false),
     // A note can reveal a decided change without opening the history controls.
@@ -152,6 +167,18 @@ export function ReviewApp({
     scrollUntil = useRef(0),
     snapshot = useRef({ state, detail, busy, composer, current });
   const [shortcuts, setShortcuts] = useState(readShortcuts);
+  const [expandedEffects, setExpandedEffects] = useState(readExpandedEffects);
+  // Per-edit disclosure is temporary and scoped to its round. Changing the
+  // global preference resets those overrides without reloading the review.
+  const [effectOverrides, setEffectOverrides] = useState<Record<string, boolean>>({});
+  useEffect(() => {
+    const changed = (event: Event) => setExpandedEffects((event as CustomEvent).detail === true);
+    const stored = (event: StorageEvent) => { if (event.key === EFFECTS_STORAGE || event.key === null) setExpandedEffects(readExpandedEffects()); };
+    window.addEventListener(EFFECTS_EVENT, changed);
+    window.addEventListener('storage', stored);
+    return () => { window.removeEventListener(EFFECTS_EVENT, changed); window.removeEventListener('storage', stored); };
+  }, []);
+  useEffect(() => { setEffectOverrides({}); }, [expandedEffects]);
   useEffect(() => {
     const changed = (event: Event) => setShortcuts(resolveShortcuts((event as CustomEvent).detail));
     const stored = (event: StorageEvent) => { if (event.key === SHORTCUT_STORAGE || event.key === null) setShortcuts(readShortcuts()); };
@@ -191,6 +218,13 @@ export function ReviewApp({
     undecided = Object.keys(decisions).filter(
       (id) => decisions[id] === "pending",
     ),
+    references = useReferenceChecks(detail, api),
+    hazards = useMemo(
+      () => risks(detail?.references, references.checks, references.pending, references.confirmed),
+      [detail, references.checks, references.pending, references.confirmed],
+    ),
+    // Batch acceptance leaves the changes whose entries need a look.
+    batch = undecided.filter((id) => !hazards.has(id)),
     latest = Boolean(
       detail && state && detail.round === state.latest && !state.closed,
     ),
@@ -198,6 +232,9 @@ export function ReviewApp({
     label = (kind: string) => t((changes ? CHANGE_ACTION : ACTION)[kind] ?? kind),
     stateLabel = (value: string) =>
       t((changes ? CHANGE_STATE : STATE)[value] ?? value);
+  // Keyboard handlers read the newest checks, not those of their render.
+  const hazardsNow = useRef(hazards);
+  hazardsNow.current = hazards;
   // What each button acts on: undecided changes, or in changes mode the
   // staged ones for Unstage and every change still on disk for Revert.
   const targets = (units: string[], kind: Kind) =>
@@ -281,11 +318,20 @@ export function ReviewApp({
         const article = paper.current?.querySelector<HTMLElement>(
           `[data-stop="${index}"]`,
         );
-        article?.scrollIntoView({ block: "start", behavior: "smooth" });
+        if (article) reveal(article, "smooth");
         article?.focus({ preventScroll: true });
       });
     }
   }
+  function reveal(article: HTMLElement, behavior: ScrollBehavior = "instant") {
+    const root = paper.current;
+    if (!root) return;
+    // scrollIntoView also scrolls ancestors across the embedding iframe.
+    // Navigation belongs to the paper, independently of the host's Chat.
+    const padding = parseFloat(getComputedStyle(root).scrollPaddingTop) || 0;
+    const margin = parseFloat(getComputedStyle(article).scrollMarginTop) || 0;
+    root.scrollTo({ top: root.scrollTop + article.getBoundingClientRect().top - root.getBoundingClientRect().top - padding - margin, behavior });
+  }
   useEffect(() => {
     let cancelled = false,
       timer: ReturnType<typeof setTimeout>;
@@ -369,11 +415,10 @@ export function ReviewApp({
   }, [task, pinned]);
   useEffect(() => {
     if (detail && current >= 0)
-      requestAnimationFrame(() =>
-        paper.current
-          ?.querySelector<HTMLElement>(`[data-stop="${current}"]`)
-          ?.scrollIntoView({ block: "start" }),
-      );
+      requestAnimationFrame(() => {
+        const article = paper.current?.querySelector<HTMLElement>(`[data-stop="${current}"]`);
+        if (article) reveal(article);
+      });
   }, [detail?.round]);
   useEffect(() => {
     if (state) document.title = `${t(state.title)} · LaTeX Review`;
@@ -408,6 +453,7 @@ export function ReviewApp({
     kind: Kind,
     chosen = targets(stops[current]?.units ?? [], kind),
     body = "",
+    confirmed = false,
   ) {
     if (
       !chosen.length ||
@@ -417,6 +463,13 @@ export function ReviewApp({
       blocked(kind)
     )
       return;
+    if (kind === "accept" && !confirmed) {
+      const items = chosen.flatMap((id) => hazardsNow.current.get(id) ?? []);
+      if (items.length) {
+        setConfirm({ kind, chosen, body, items });
+        return;
+      }
+    }
     epoch.current++;
     setBusy(true);
     snapshot.current.busy = true;
@@ -530,7 +583,8 @@ export function ReviewApp({
         typing =
           target.matches("input,textarea,select") || target.isContentEditable;
       if (event.key === "Escape") {
-        if (help) setHelp(false);
+        if (confirm) setConfirm(null);
+        else if (help) setHelp(false);
         else if (composer) closeComposer();
         return;
       }
@@ -543,7 +597,7 @@ export function ReviewApp({
         void submitComposer();
         return;
       }
-      if (typing || help || window.getSelection()?.toString()) return;
+      if (typing || help || confirm || window.getSelection()?.toString()) return;
       if ((event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey && event.key.toLowerCase() === "z") {
         event.preventDefault();
         void undo();
@@ -568,7 +622,7 @@ export function ReviewApp({
     };
     window.addEventListener("keydown", listener);
     return () => window.removeEventListener("keydown", listener);
-  }, [state, detail, current, busy, composer, draft, help, history, shortcuts]);
+  }, [state, detail, current, busy, composer, draft, help, confirm, history, shortcuts]);
   function onScroll() {
     if (
       !paper.current ||
@@ -698,7 +752,10 @@ export function ReviewApp({
     clean: boolean,
   ): ReactNode {
     const { total, shown } = unit.effects!,
-      loaded = more[`${detail!.round}:${unit.id}`],
+      key = `${detail!.round}:${unit.id}`,
+      open = effectOverrides[key] ?? (expandedEffects || unit.visual === "unmapped" || unit.visual === "identical"),
+      bodyId = `effects-${detail!.round}-${unit.id}`,
+      loaded = more[key],
       places = [...shown, ...(Array.isArray(loaded) ? loaded : [])],
       strips = (items: Strip[], side: "before" | "after") =>
         items.length > 0 && (
@@ -720,47 +777,57 @@ export function ReviewApp({
     return (
       <section className="effects" key={unit.id}>
         <p className="effects-head">
-          {tn(total, "Affects {n} place", "Affects {n} places")}
-        </p>
-        {places.map((place, i) => (
-          <div className="place" key={i}>
-            <p className="place-where">
-              {t("p. {pages}", { pages: place.page })}
-              {place.section ? ` · ${place.section}` : ""}
-              {place.with
-                ? ` · ${t("with {changes}", {
-                    changes: place.with
-                      .map((id) =>
-                        firstStop.has(id)
-                          ? t("Change {n}", { n: firstStop.get(id)! + 1 })
-                          : (units.get(id)?.file ?? id),
-                      )
-                      .join(", "),
-                  })}`
-                : ""}
-            </p>
-            {strips(place.before, "before")}
-            {strips(place.after, "after")}
-          </div>
-        ))}
-        {total > places.length && (
-          <button
-            className="link more-places"
-            disabled={loaded === "loading"}
-            onClick={() => void loadPlaces(unit.id)}
-          >
-            {loaded === "loading"
-              ? t("Loading…")
-              : tn(
-                  total - places.length,
-                  "Show {n} more",
-                  "Show {n} more",
-                )}
+          <button className="link effects-toggle" aria-expanded={open} aria-controls={bodyId}
+            onClick={() => setEffectOverrides((values) => ({ ...values, [key]: !open }))}>
+            <span aria-hidden="true">{open ? "▾" : "▸"}</span>{" "}
+            {tn(total, "Affects {n} place", "Affects {n} places")}
           </button>
-        )}
-        {loaded && typeof loaded === "object" && "error" in loaded && (
-          <p className="caption">{loaded.error}</p>
-        )}
+        </p>
+        <div id={bodyId} hidden={!open}>
+          {open && (
+            <>
+              {places.map((place, i) => (
+                <div className="place" key={i}>
+                  <p className="place-where">
+                    {t("p. {pages}", { pages: place.page })}
+                    {place.section ? ` · ${place.section}` : ""}
+                    {place.with
+                      ? ` · ${t("with {changes}", {
+                          changes: place.with
+                            .map((id) =>
+                              firstStop.has(id)
+                                ? t("Change {n}", { n: firstStop.get(id)! + 1 })
+                                : (units.get(id)?.file ?? id),
+                            )
+                            .join(", "),
+                        })}`
+                      : ""}
+                  </p>
+                  {strips(place.before, "before")}
+                  {strips(place.after, "after")}
+                </div>
+              ))}
+              {total > places.length && (
+                <button
+                  className="link more-places"
+                  disabled={loaded === "loading"}
+                  onClick={() => void loadPlaces(unit.id)}
+                >
+                  {loaded === "loading"
+                    ? t("Loading…")
+                    : tn(
+                        total - places.length,
+                        "Show {n} more",
+                        "Show {n} more",
+                      )}
+                </button>
+              )}
+              {loaded && typeof loaded === "object" && "error" in loaded && (
+                <p className="caption">{loaded.error}</p>
+              )}
+            </>
+          )}
+        </div>
       </section>
     );
   }
@@ -770,6 +837,10 @@ export function ReviewApp({
     inline: boolean,
   ): ReactNode {
     const known = block.units.map((id) => units.get(id)!).filter(Boolean),
+      // A .bib edit is shown entry by entry, every field, rather than as
+      // the bibliography's typeset lines alone.
+      bib = detail!.references?.entries.filter((e) => (e.units ?? [e.unit]).some((id) => block.units.includes(id))) ?? [],
+      uncited = detail!.references?.missing.filter((m) => m.unit && block.units.includes(m.unit)) ?? [],
       status = stopState(block.units, decisions),
       reviewed = !pendingUnits(stops[index], decisions).length,
       expanded = browsing || index === linkedChange,
@@ -785,15 +856,17 @@ export function ReviewApp({
             (status === "commented" ? "after" : undefined),
       source =
         openSource.has(index) ||
-        block.identical ||
-        (!block.before.length && !block.after.length),
+        (!bib.length &&
+          (block.identical || (!block.before.length && !block.after.length))),
       remarks = [
         ...new Set(
           block.units.map((id) => state?.comments[id]).filter(Boolean),
         ),
       ],
       location = describeLocation(known, t),
-      kindLabel = block.reflow
+      kindLabel = bib.length
+        ? t("Bibliography")
+        : block.reflow
         ? t("Reflow")
         : [
             ...new Set(
@@ -905,7 +978,7 @@ export function ReviewApp({
           block.before.length > 0 &&
           images(block.before, "before")}
         {block.after.length > 0 && images(block.after, "after")}
-        {block.identical && (
+        {block.identical && !bib.length && (
           <p className="caption">
             {t("No visible change in the PDF; see the LaTeX source.")}
           </p>
@@ -925,6 +998,25 @@ export function ReviewApp({
             ))}
           </div>
         )}
+        {uncited.length > 0 && (
+          <p className="reference-problem reference-uncited">
+            {uncited
+              .map((m) => t("Cites {key}, which no bibliography entry defines.", { key: m.key }))
+              .join(language() === "zh-CN" ? "" : " ")}
+          </p>
+        )}
+        {bib.length > 0 && (
+          <ReferenceEntries
+            entries={bib}
+            checks={references.checks}
+            pending={references.pending > 0}
+            onRetry={references.retry}
+            confirmed={references.confirmed}
+            onConfirm={(id, on) =>
+              void references.confirm(id, on).catch((e) => setToast((e as Error).message))
+            }
+          />
+        )}
         {source && (
           <div className="source">
             {known.map((unit) => (
@@ -1036,7 +1128,7 @@ export function ReviewApp({
           {/* Batch decisions cover only undecided changes; accepted,
               rejected and commented changes keep their state. A single
               undecided change is decided from its own bar. */}
-          {count.pending > 1 && (
+          {count.pending > 1 && batch.length > 0 && (
             <button
               className="ghost accept accept-all"
               disabled={
@@ -1047,30 +1139,41 @@ export function ReviewApp({
               }
               title={
                 state?.decisionLock ||
-                (changes
-                  ? tn(
-                      count.pending,
-                      "Stage the {n} unstaged change.",
-                      "Stage the {n} unstaged changes.",
-                    )
-                  : tn(
-                      count.pending,
-                      "Accept {n} undecided change",
-                      "Accept {n} undecided changes",
-                    ))
+                [
+                  changes
+                    ? tn(
+                        batch.length,
+                        "Stage the {n} unstaged change.",
+                        "Stage the {n} unstaged changes.",
+                      )
+                    : tn(
+                        batch.length,
+                        "Accept {n} undecided change",
+                        "Accept {n} undecided changes",
+                      ),
+                  undecided.length > batch.length
+                    ? tn(
+                        undecided.length - batch.length,
+                        "Leaves {n} change with bibliography entries to check.",
+                        "Leaves {n} changes with bibliography entries to check.",
+                      )
+                    : "",
+                ]
+                  .filter(Boolean)
+                  .join(" ")
               }
               aria-label={
                 changes
-                  ? t("Stage all ({n})", { n: count.pending })
-                  : t("Accept all ({n})", { n: count.pending })
+                  ? t("Stage all ({n})", { n: batch.length })
+                  : t("Accept all ({n})", { n: batch.length })
               }
               aria-describedby={state?.decisionLock ? "review-lock" : undefined}
-              onClick={() => void decide("accept", undecided)}
+              onClick={() => void decide("accept", batch)}
             >
               <span className="batch-label">
                 {changes ? t("Stage all") : t("Accept all")}
               </span>
-              <span className="batch-count">{count.pending}</span>
+              <span className="batch-count">{batch.length}</span>
             </button>
           )}
           {count.pending > 1 && !changes && (
@@ -1223,66 +1326,8 @@ export function ReviewApp({
       )}
       <div className="review-body">
         <main id="paper" ref={paper} tabIndex={-1} onScroll={onScroll}>
-          {(state?.commentLock || state?.decisionLock) && (
-            <div className="banner" id="review-lock" role="status">
-              {t((state.commentLock || state.decisionLock)!)}
-            </div>
-          )}
-          {state?.closed && !state.commentLock && (
-            <div className="banner">
-              {t(
-                "This review is finished. Accepted changes are in your manuscript.",
-              )}
-            </div>
-          )}
-          {state?.state === "build_failed" && (
-            <div className="banner">
-              <strong>
-                {changes
-                  ? t("The comparison could not be built: ")
-                  : t("The latest publish failed: ")}
-              </strong>
-              {state.job?.error}
-              {state.job?.details && (
-                <pre className="details">{state.job.details.join("\n")}</pre>
-              )}
-            </div>
-          )}
-          {state?.state === "building" && detail && !state.decisionLock && (
-            <div className="banner">
-              {changes
-                ? t(
-                    "Updating the comparison with your latest edits. You can keep staging and reverting meanwhile.",
-                  )
-                : t(
-                    "Updating changes…",
-                  )}
-            </div>
-          )}
-          {!changes && detail && state?.latest && detail.round !== state.latest && (
-            <div className="banner">
-              {t("Viewing earlier changes.")}{" "}
-              <a href={withLanguage(`?task=${encodeURIComponent(task)}`)}>
-                {t("Back to current changes →")}
-              </a>
-            </div>
-          )}
-          {detail?.warnings.length ? (
-            <div className="banner">
-              <details>
-                <summary>
-                  {tn(
-                    detail.warnings.length,
-                    "{n} new LaTeX warning",
-                    "{n} new LaTeX warnings",
-                  )}
-                </summary>
-                <pre className="details">{detail.warnings.join("\n")}</pre>
-              </details>
-            </div>
-          ) : null}
           {changes && detail && !count.pending && (count.accepted > 0 || !stops.length) && (
-            <div className="review-complete" role="status">
+            <div className="review-complete" role="status" tabIndex={-1}>
               <strong>
                 {count.accepted
                   ? t("All changes are staged")
@@ -1297,7 +1342,7 @@ export function ReviewApp({
             </div>
           )}
           {!changes && detail && !history && !count.pending && (
-            <div className="review-complete" role="status">
+            <div className="review-complete" role="status" tabIndex={-1}>
               <strong>
                 {t(
                   state?.workspace?.status === "waiting_input"
@@ -1343,6 +1388,77 @@ export function ReviewApp({
               <div className="review-complete-actions" />
             </div>
           )}
+          {(state?.commentLock || state?.decisionLock) && (
+            <div className="banner" id="review-lock" role="status">
+              {t((state.commentLock || state.decisionLock)!)}
+            </div>
+          )}
+          {state?.closed && !state.commentLock && (
+            <div className="banner">
+              {t(
+                "This review is finished. Accepted changes are in your manuscript.",
+              )}
+            </div>
+          )}
+          {state?.state === "build_failed" && (
+            <div className="banner">
+              <strong>
+                {changes
+                  ? t("The comparison could not be built: ")
+                  : t("The latest publish failed: ")}
+              </strong>
+              {state.job?.error}
+              {state.job?.details && (
+                <pre className="details">{state.job.details.join("\n")}</pre>
+              )}
+            </div>
+          )}
+          {state?.state === "building" && detail && !state.decisionLock && (
+            <div className="banner">
+              {changes
+                ? t(
+                    "Updating the comparison with your latest edits. You can keep staging and reverting meanwhile.",
+                  )
+                : t(
+                    "Updating changes…",
+                  )}
+            </div>
+          )}
+          {!changes && detail && state?.latest && detail.round !== state.latest && (
+            <div className="banner">
+              {t("Viewing earlier changes.")}{" "}
+              <a href={withLanguage(`?task=${encodeURIComponent(task)}`)}>
+                {t("Back to current changes →")}
+              </a>
+            </div>
+          )}
+          {detail?.warnings.length ? (
+            <div className="banner">
+              <details>
+                <summary>
+                  {tn(
+                    detail.warnings.length,
+                    "{n} new LaTeX warning",
+                    "{n} new LaTeX warnings",
+                  )}
+                </summary>
+                <pre className="details">{detail.warnings.join("\n")}</pre>
+              </details>
+            </div>
+          ) : null}
+          {detail?.references &&
+            (detail.references.entries.length > 0 ||
+              detail.references.missing.length > 0) && (
+              <ReferenceBanner
+                references={detail.references}
+                checks={references.checks}
+                pending={references.pending}
+                confirmed={references.confirmed}
+                changeOf={(unit) => (unit ? (firstStop.get(unit) ?? -1) : -1)}
+                onSelect={(index) => select(index)}
+                onRetry={references.retry}
+              />
+            )}
           <div className="document">
             {detail ? (
               <>
@@ -1463,6 +1579,18 @@ export function ReviewApp({
           {toast}
         </div>
       )}
+      {confirm && (
+        <ConfirmReferences
+          items={confirm.items}
+          staging={changes}
+          onCancel={() => setConfirm(null)}
+          onConfirm={() => {
+            const chosen = confirm;
+            setConfirm(null);
+            void decide(chosen.kind, chosen.chosen, chosen.body, true);
+          }}
+        />
+      )}
       {help && (
         <div className="help-backdrop" onClick={() => setHelp(false)}>
           <dialog