char-slop/berry

git clone https://git.t4t.associates/char-slop/berry

Charlotte Somallow editing conflicted commit diffs80904d52026-10-25

import { type View, type ViewContext } from "@berry/api/web.ts";
import { editing } from "./edit-view.tsx";
import { editable } from "./eligibility.ts";
import { fileKey, lineCounts } from "./model.ts";
import { type Layout, rendering } from "./render.tsx";
import type { FileDiff, Id, Reply, Revision, Shown } from "./types.ts";

const LAYOUT = "berry.diff.layout";
const VIEWED = "berry.diff.viewed";
/** How many files' viewed marks are remembered, the oldest forgotten first. */
const REMEMBERED = 5000;
const PAGE = 100;

// lockfiles and the like: shown folded, since nobody reads them line by line
const GENERATED = /(?:^|\/)(?:[\w.-]+\.lock|package-lock\.json|pnpm-lock\.yaml|go\.sum)$/;

// thousands of marks, which every file reads as it draws: parsed again only once another tab has changed them
let parsed: { raw: string | null; marks: Record<string, number> } | null = null;

function viewedMarks(): Record<string, number> {
  const raw = localStorage.getItem(VIEWED);
  if (parsed?.raw !== raw) {
    let marks = {};
    try {
      marks = JSON.parse(raw ?? "{}");
    } catch {
      // a mangled store forgets its marks
    }
    parsed = { raw, marks };
  }
  return parsed!.marks;
}

function markViewed(key: string, viewed: boolean) {
  const marks = { ...viewedMarks() };
  if (viewed) marks[key] = Date.now();
  else delete marks[key];
  const kept = Object.entries(marks).sort(([, a], [, b]) => b - a).slice(0, REMEMBERED);
  localStorage.setItem(VIEWED, JSON.stringify(Object.fromEntries(kept)));
}

const relative = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" });
const UNITS: [Intl.RelativeTimeFormatUnit, number][] = [
  ["year", 31536000],
  ["month", 2592000],
  ["week", 604800],
  ["day", 86400],
  ["hour", 3600],
  ["minute", 60],
];
function ago(timestamp: string) {
  const seconds = (new Date(timestamp).getTime() - Date.now()) / 1000;
  for (const [unit, size] of UNITS) {
    if (Math.abs(seconds) >= size) return relative.format(Math.trunc(seconds / size), unit);
  }
  return relative.format(0, "second");
}

const idOf = (id: Id, className: string, full = false) => (
  <span class={className}>
    {id.prefix ? <b>{id.prefix}</b> : []}
    {full ? id.full.slice(id.prefix.length) : id.rest}
  </span>
);

function ids(revision: Revision) {
  if (revision.commit === null) return [<span class="change">working tree</span>];
  return [
    ...(revision.change ? [idOf(revision.change, "change")] : []),
    idOf(revision.commit, "commit"),
  ];
}

const glyph = (revision: Revision) =>
  revision.workingCopy ? "@" : revision.conflict ? "×" : revision.immutable ? "◆" : "○";

const summaryOf = (revision: Revision) =>
  revision.description.split("\n")[0] ||
  (revision.commit === null ? "uncommitted changes" : "(no description set)");

type FileView = {
  file: FileDiff;
  key: string;
  section: HTMLElement;
  /** Which folds are open, by their place among the file's pieces. */
  unfolded: Set<number>;
  draw(): void;
  dispose(): void;
};

/** A revision's changes beside the history it is in: the working copy at first. */
export function diffView(): View {
  const log = <nav class="diff-log" aria-label="history" /> as HTMLElement;
  const head = <header class="diff-head" /> as HTMLElement;
  const list = <div class="diff-files" /> as HTMLElement;
  const main = <section class="diff-main">{head}{list}</section> as HTMLElement;
  const element = <div class="diff-view">{log}{main}</div> as HTMLElement;

  let context: ViewContext | null = null;
  let shown: Shown | null = null;
  let error: string | null = null;
  let limit = PAGE;
  let layout: Layout = localStorage.getItem(LAYOUT) === "split" ? "split" : "unified";
  /** The request on its way, and the place it is for. */
  let fetching: { route: string; controller: AbortController } | null = null;
  let again = false;
  let disposed = false;
  /** The description being edited in place of the head's subject and body, and which it was. */
  let rewording: { change: string; before: string; editor: HTMLElement } | null = null;
  /** Whether each file is open, by path, as the user left it in this revision. */
  const open = new Map<string, boolean>();
  let files = new Map<string, FileView>();
  const renderer = rendering(main);
  const edits = editing(
    (path) => {
      const view = [...files.values()].find((view) => view.file.path === path);
      if (view) {
        open.set(path, true);
        view.draw();
      }
    },
    (path) => {
      if (!edits.has(path)) {
        files = new Map([...files].filter(([, view]) => {
          if (view.file.path !== path) return true;
          view.dispose();
          return false;
        }));
      }
      void refresh();
    },
    (message) => {
      error = message;
      drawHead();
    },
  );

  function fileView(file: FileDiff, key: string): FileView {
    const viewedKey = `${shown!.root}\0${key}`;
    const viewed = viewedKey in viewedMarks();
    const { additions, removals } = lineCounts(file);
    const toggle = <button type="button" class="chevron" /> as HTMLButtonElement;
    const box = <input type="checkbox" /> as HTMLInputElement;
    box.checked = viewed;
    const body = <div class="file-body" /> as HTMLElement;
    const { revision } = shown!;
    // jj rewrites a commit's descendants onto an edit to it, so any it would let change can be edited
    const canEdit = (revision.workingCopy || (shown!.vcs === "jj" && !revision.immutable)) &&
      editable(file);
    const begin = (line?: number) => {
      if (context?.route === shown!.revision.route) void edits.begin(view.file, shown!.root, line);
    };
    const editLink = (
      <button type="button" class="link" _onclick={() => begin()}>
        edit
      </button>
    ) as HTMLButtonElement;
    const modes = file.modes.old !== null && file.modes.new !== null &&
        file.modes.old !== file.modes.new
      ? [<span class="mode">{file.modes.old} → {file.modes.new}</span>]
      : [];
    const section = (
      <section class="file-diff">
        <header class="file-summary">
          {toggle}
          <span class="file-summary-content">
            <span class="path">{file.from ? `${file.from} → ${file.path}` : file.path}</span>
            <span class="file-actions">
              <span class="add-count">+{String(additions)}</span>
              <span class="del-count">-{String(removals)}</span>
              {file.status === "modified"
                ? []
                : <span class={`status ${file.status}`}>{file.status}</span>}
              {modes}
              {GENERATED.test(file.path) ? <span class="generated-note">generated</span> : []}
              {canEdit ? editLink : []}
              <label class="viewed">{box} viewed</label>
            </span>
          </span>
        </header>
        {body}
      </section>
    ) as HTMLElement;
    let drawn: { key: string; layout: Layout; content: ReturnType<typeof renderer.file> } | null =
      null;
    const reset = () => {
      drawn?.content.dispose();
      drawn = null;
    };
    const view: FileView = {
      file,
      key,
      section,
      unfolded: new Set(),
      draw,
      dispose: reset,
    };
    const isOpen = () =>
      open.get(file.path) ?? (!box.checked && !GENERATED.test(file.path) && !file.binary);

    function draw() {
      const file = view.file;
      box.checked = `${shown!.root}\0${view.key}` in viewedMarks();
      const { additions, removals } = lineCounts(file);
      section.querySelector(".add-count")!.textContent = `+${additions}`;
      section.querySelector(".del-count")!.textContent = `-${removals}`;
      const opened = isOpen();

      toggle.setAttribute("aria-expanded", String(opened));
      toggle.setAttribute("aria-label", `${opened ? "fold" : "unfold"} ${file.path}`);
      body.hidden = !opened;
      editLink.hidden = edits.has(file.path, shown!.revision.route);
      if (edits.attach(body, file, layout, shown!.revision.route)) {
        reset();
        return;
      }
      if (opened && drawn?.key === view.key && drawn.layout === layout) return;
      reset();
      section.style.setProperty("--rows", "0");
      if (!opened) return body.replaceChildren();
      if (file.binary) return body.replaceChildren(<p class="meta file-note">binary file</p>);
      if (file.hunks.length === 0) {
        return body.replaceChildren(
          <p class="meta file-note">
            {file.status === "added" ? "empty file" : "no changes to its content"}
          </p>,
        );
      }
      const content = renderer.file(file, layout, view.unfolded, (at) => {
        view.unfolded.add(at);
        reset();
        draw();
      }, canEdit ? begin : undefined);
      drawn = { key: view.key, layout, content };
      body.replaceChildren(content.element);
      section.style.setProperty("--rows", String(content.rows));
    }
    toggle.addEventListener("click", () => {
      open.set(file.path, !isOpen());
      draw();
    });
    box.addEventListener("change", () => {
      markViewed(`${shown!.root}\0${view.key}`, box.checked);
      open.set(file.path, !box.checked);
      draw();
      if (box.checked && section.getBoundingClientRect().top < main.getBoundingClientRect().top) {
        section.scrollIntoView({ block: "start" });
      }
    });
    draw();
    return view;
  }

  function reword(revision: Revision) {
    if (!context || !shown || rewording) return;
    const request = context.request;
    const root = shown.root;
    const change = revision.change!.full;
    const before = revision.description;
    const input = (
      <textarea
        aria-label="commit description"
        rows={Math.max(4, before.split("\n").length + 1)}
      />
    ) as HTMLTextAreaElement;
    input.value = before;
    const message = <p class="diff-error" role="alert" /> as HTMLElement;
    const save = <button type="button">save</button> as HTMLButtonElement;
    const cancel = <button type="button">cancel</button> as HTMLButtonElement;
    const editor = (
      <div class="commit-reword">
        {input}
        {message}
        <div class="commit-reword-actions">
          {save}
          {cancel}
          <span class="meta">ctrl+enter saves · esc cancels</span>
        </div>
      </div>
    ) as HTMLElement;
    const active = { change, before, editor };
    let pending = false;
    const close = () => {
      if (rewording !== active) return;
      const focused = editor.contains(document.activeElement);
      rewording = null;
      drawHead();
      if (focused) head.querySelector<HTMLElement>(".commit-subject")?.focus();
    };
    const submit = async () => {
      if (pending) return;
      pending = true;
      save.disabled = cancel.disabled = input.disabled = true;
      message.textContent = "";
      try {
        await request("reword", { root, change, before, description: input.value });
        close();
        void refresh();
      } catch (error) {
        message.textContent = error instanceof Error ? error.message : String(error);
      } finally {
        pending = false;
        save.disabled = cancel.disabled = input.disabled = false;
      }
    };
    save.addEventListener("click", submit);
    cancel.addEventListener("click", close);
    input.addEventListener("keydown", (event) => {
      if (event.key === "Escape" && !pending) {
        event.preventDefault();
        close();
      } else if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
        event.preventDefault();
        void submit();
      }
    });
    rewording = active;
    drawHead();
    input.focus();
  }

  /** Each revision's entry in the log, kept while what it shows stays the same, as it mostly does across refreshes. */
  let entries = new Map<string, { shows: string; link: HTMLElement }>();
  function drawLog() {
    if (!shown || !context) {
      entries.clear();
      return log.replaceChildren();
    }
    const current = shown.revision;
    const next = new Map<string, { shows: string; link: HTMLElement }>();
    const items = shown.log.map((revision) => {
      const key = `${revision.route}\0${revision.commit?.full ?? ""}`;
      const when = revision.author ? ago(revision.author.timestamp) : "";
      const href = context!.href(revision.route);
      const shows = JSON.stringify([revision, when, href]);
      const kept = entries.get(key);
      const link = kept?.shows === shows ? kept.link : (
        <a href={href} class="revision">
          <span class="revision-line">
            <span class="glyph">{glyph(revision)}</span>
            {ids(revision)}
            {revision.refs.map((ref) => <span class="ref">{ref}</span>)}
          </span>
          <span class={revision.description ? "revision-summary" : "revision-summary none"}>
            {revision.empty ? <span class="tag">(empty)</span> : []}
            {summaryOf(revision)}
          </span>
          {revision.author
            ? (
              <span
                class="revision-meta"
                title={new Date(revision.author.timestamp).toLocaleString()}
              >
                {revision.author.name} · {when}
              </span>
            )
            : []}
        </a>
      ) as HTMLElement;
      next.set(key, { shows, link });
      if (revision.route === current.route) link.setAttribute("aria-current", "page");
      else link.removeAttribute("aria-current");
      link.classList.toggle("immutable", revision.immutable);
      return link;
    });
    entries = next;
    const more = shown.log.length >= limit
      ? [
        (log.querySelector(":scope > .more") as HTMLElement | null) ?? (
          <button
            type="button"
            class="link more"
            _onclick={() => {
              limit += PAGE;
              void refresh();
            }}
          >
            older…
          </button>
        ) as HTMLElement,
      ]
      : [];
    const nodes = [...items, ...more];
    // moving nodes that stay would lose the reader's focus and lay the list out again
    if (nodes.length !== log.children.length || nodes.some((node, i) => node !== log.children[i])) {
      log.replaceChildren(...nodes);
    }
  }

  let heading: { key: string; editor: HTMLElement | null } | null = null;
  function drawHead() {
    if (!shown) {
      return head.replaceChildren(
        error ? <p class="diff-error">{error}</p> : <p class="meta">loading…</p>,
      );
    }
    const key = JSON.stringify([
      shown.root,
      shown.vcs,
      shown.revision,
      shown.omitted,
      [...files.keys()],
      layout,
      error,
    ]);
    const editor = rewording?.editor ?? null;
    if (heading?.key === key && heading.editor === editor) return;
    heading = { key, editor };
    const { revision, files: changed } = shown;
    const counts = changed.map(lineCounts);
    const authored = { additions: 0, removals: 0 };
    const generated = { additions: 0, removals: 0 };
    changed.forEach((file, at) => {
      const total = GENERATED.test(file.path) ? generated : authored;
      total.additions += counts[at].additions;
      total.removals += counts[at].removals;
    });
    const choice = (value: Layout) => (
      <button
        type="button"
        aria-pressed={String(layout === value)}
        _onclick={() => {
          if (layout === value) return;
          layout = value;
          localStorage.setItem(LAYOUT, value);
          for (const view of files.values()) view.draw();
          drawHead();
        }}
      >
        {value}
      </button>
    );
    const [subject, ...rest] = revision.description.trimEnd().split("\n");
    const body = rest.join("\n").trim();
    const meta = <table class="commit-meta" /> as HTMLTableElement;
    const row = (key: string, value: Node | string) =>
      meta.append(
        <tr>
          <th>{key}</th>
          <td>{value}</td>
        </tr>,
      );
    if (revision.author) {
      row("author", `${revision.author.name} <${revision.author.email}>`);
      row("date", new Date(revision.author.timestamp).toLocaleString());
    }
    if (revision.change) row("change", idOf(revision.change, "change", true));
    if (revision.commit) row("commit", idOf(revision.commit, "commit", true));
    if (revision.refs.length) row("refs", revision.refs.join(" "));
    row(shown.vcs, shown.root);
    const mutable = shown.vcs === "jj" && !revision.immutable && revision.change !== undefined;
    if (
      rewording &&
      !(mutable && rewording.change === revision.change!.full &&
        rewording.before === revision.description)
    ) rewording = null;
    const focused = rewording?.editor.contains(document.activeElement)
      ? document.activeElement as HTMLElement
      : null;
    const description = rewording ? [rewording.editor] : [
      <h2 class={subject ? "commit-subject" : "commit-subject none"}>
        {revision.empty ? <span class="tag">(empty)</span> : []}
        {revision.conflict ? <span class="tag conflict">(conflict)</span> : []}
        {subject || summaryOf(revision)}
      </h2>,
      ...(body ? [<pre class="commit-body">{body}</pre>] : []),
    ] as HTMLElement[];
    if (mutable && !rewording) {
      for (const target of description) {
        target.title = "double-click or press F2 to edit the description";
        target.tabIndex = 0;
        target.addEventListener("dblclick", () => reword(revision));
        target.addEventListener("keydown", (event) => {
          if (event.key === "F2") reword(revision);
        });
      }
    }
    head.replaceChildren(
      ...description,
      meta,
      <div class="diff-toolbar">
        <span class="diffstat">
          <span class="add-count">
            +{String(authored.additions)}
            {generated.additions
              ? (
                <span class="generated-count" title="generated file additions">
                  {` (+${generated.additions})`}
                </span>
              )
              : []}
          </span>
          <span class="del-count">
            -{String(authored.removals)}
            {generated.removals
              ? <span title="generated file removals">{` (-${generated.removals})`}</span>
              : []}
          </span>
          <span>{`${changed.length} changed file${changed.length === 1 ? "" : "s"}`}</span>
        </span>
        <span class="spacer" />
        <span class="diff-layout" role="group" aria-label="layout">
          {choice("unified")}
          {choice("split")}
        </span>
        <button type="button" class="link" _onclick={() => void refresh()}>refresh</button>
      </div>,
      ...(error ? [<p class="diff-error">{error}</p>] : []),
      ...(shown.omitted > 0
        ? [<p class="meta">{String(shown.omitted)} more untracked files not shown</p>]
        : []),
      ...(changed.length === 0 ? [<p class="meta">no changes</p>] : []),
      <ol class="diff-index">
        {changed.map((file, at) => (
          <li>
            <span class="add-count">+{String(counts[at].additions)}</span>
            <span class="del-count">-{String(counts[at].removals)}</span>
            <button
              type="button"
              class="link"
              _onclick={() => {
                const view = [...files.values()].find((view) => view.file.path === file.path);
                if (!view) return;
                open.set(file.path, true);
                view.draw();
                view.section.scrollIntoView({ block: "start" });
              }}
            >
              <span class={`status ${file.status}`}>{file.status[0].toUpperCase()}</span>
              <span>{file.path}</span>
            </button>
          </li>
        ))}
      </ol>,
    );
    // moving the editor blurs it, but the draft and its selection stay with the element
    focused?.focus();
  }

  function show(next: Reply, known: Map<string, FileView>) {
    const sameRevision = shown?.revision.route === next.revision.route &&
      shown.root === next.root;
    if (!sameRevision) {
      open.clear();
      main.scrollTop = 0;
    }
    // keep what has not changed, and the file at the top of the pane where it is
    const top = main.getBoundingClientRect().top;
    const anchor = [...files.values()].find((view) =>
      view.section.getBoundingClientRect().bottom > top
    );
    const offset = anchor ? anchor.section.getBoundingClientRect().top - top : 0;
    const previous = files;
    // a change left out is one the view has
    const sent = next.files.map(({ key, diff }) => ({
      key,
      file: diff ?? known.get(key)!.file,
    }));
    for (const file of edits.files(next.root, next.revision.route)) {
      if (!sent.some((item) => item.file.path === file.path)) {
        sent.push({ key: fileKey(file), file });
      }
    }
    shown = { ...next, files: sent.map(({ file }) => file) };
    files = new Map(
      sent.map(({ key, file }) => {
        const active = sameRevision && edits.has(file.path, next.revision.route)
          ? [...previous.values()].find((view) => view.file.path === file.path)
          : undefined;
        const view = active ?? (sameRevision ? previous.get(key) : undefined) ??
          fileView(file, key);
        const changed = active !== undefined && active.key !== key;
        view.file = file;
        view.key = key;
        if (active) view.draw();
        if (changed) edits.sync(file.path);
        return [key, view];
      }),
    );
    for (const [key, view] of previous) {
      if (files.get(key) !== view) {
        view.dispose();
      }
    }
    const nodes = [...files.values()].map((view) => view.section);
    if (
      nodes.length !== list.children.length || nodes.some((node, i) => node !== list.children[i])
    ) {
      const focused = document.activeElement as HTMLElement | null;
      list.replaceChildren(...nodes);
      if (focused && list.contains(focused)) focused.focus();
    }
    drawHead();
    drawLog();
    if (sameRevision && anchor && files.get(anchor.key) === anchor) {
      main.scrollTop += anchor.section.getBoundingClientRect().top - top - offset;
    }
  }

  async function refresh() {
    if (!context || disposed) return;
    const route = context.route;
    // the same place again waits for the answer on its way; another place makes that answer moot
    if (fetching?.route === route) return void (again = true);
    fetching?.controller.abort();
    const current = fetching = { route, controller: new AbortController() };
    again = false;
    head.classList.add("loading");
    try {
      const known = new Map(files);
      const value = await context.request("show", { route, limit, known: [...known.keys()] }, {
        signal: current.controller.signal,
      }) as unknown as Reply;
      if (fetching !== current) return;
      error = null;
      show(value, known);
    } catch (caught) {
      if (fetching !== current) return;
      error = caught instanceof Error ? caught.message : String(caught);
      drawHead();
    } finally {
      if (fetching === current) {
        fetching = null;
        head.classList.remove("loading");
        if (again) void refresh();
      }
    }
  }

  const onVisible = () => {
    if (document.visibilityState === "visible") void refresh();
  };
  document.addEventListener("visibilitychange", onVisible);

  return {
    element,
    update(next) {
      const previous = context;
      context = next;
      edits.update(next);
      if (previous?.route !== next.route && rewording) {
        rewording = null;
        drawHead();
      }
      if (previous?.route !== next.route || previous.latest !== next.latest) void refresh();
    },
    async beforeLeave(destination) {
      element.inert = true;
      try {
        return await edits.beforeLeave(destination);
      } finally {
        element.inert = false;
      }
    },
    flush: () => edits.flush(),
    dispose() {
      disposed = true;
      edits.dispose();
      fetching?.controller.abort();
      for (const view of files.values()) view.dispose();
      renderer.dispose();
      document.removeEventListener("visibilitychange", onVisible);
    },
  };
}