app/routes/book.history.tsx

Functions

Imports

It imports app/components/frame.tsx, app/components/history/draft-links.tsx, app/components/history/revision-picker.tsx, app/lib/ai.server.ts, app/lib/book-history.server.ts, app/lib/books.server.ts, app/lib/content.server.ts, app/lib/context.ts, app/lib/history.server.ts, app/lib/novels/layout.ts, app/lib/patch.ts. No module of this repo imports it.

Source

1// One book file's history, the twin of the site posts' history page: its versions
2// newest first (saved in Carrel, moved in the binder, or committed elsewhere), each opening its text;
3// any two set side by side or as a patch; and the person's own text against Git's or against an AI
4// draft saved beside it. Read-only, and it works for a Reader. The compare components and the patch
5// are the site page's.
6
7import { Link, useLocation, useNavigate, useNavigation } from "react-router";
8import { Alert, Banner } from "capsomer/react/banner";
9import { DraftCompare, DraftPatch } from "capsomer/react/draft-compare";
10import { Empty } from "capsomer/react/empty";
11import { Panel } from "capsomer/react/panel";
12import { Segmented } from "capsomer/react/segmented";
13import { Pill } from "capsomer/react/status";
14import { Time } from "capsomer/react/time";
15import { PageHead } from "capsomer/react/page-head";
16
17import { DraftLinks } from "~/components/history/draft-links";
18import { RevisionPicker } from "~/components/history/revision-picker";
19import { RouterLink } from "~/components/frame";
20import { listAiDrafts, readAiDraft } from "~/lib/ai.server";
21import { bookVersions, readVersion } from "~/lib/book-history.server";
22import { bookRepo, indexedFile, requireBookProject } from "~/lib/books.server";
23import { readDraft } from "~/lib/content.server";
24import { getEnv, getViewer } from "~/lib/context";
25import { orderPair } from "~/lib/history.server";
26import { isBookPath, kindOf, titleFromSegment } from "~/lib/novels/layout";
27import { unifiedPatch } from "~/lib/patch";
28
29import type { Route } from "./+types/book.history";
30
31export function meta({ loaderData: data }: Route.MetaArgs) {
32  return [{ title: data ? `History of ${data.label} · ${data.project.name} · Carrel` : "Carrel" }];
33}
34
35type Side = { title: string; who?: string; time?: string; text: string };
36type View =
37  | { kind: "none" }
38  | { kind: "problem"; message: string }
39  | { kind: "source"; version: string; message: string; author: string; at: string; source: string; current: boolean; previous: string | null; newest: string | null }
40  | { kind: "compare"; heading: string; lead: string; patch: string | null; before: Side | null; after: Side | null };
41
42const utc = (iso: string) => `${iso.slice(0, 16).replace("T", " ")} UTC`;
43
44function labelFor(path: string): string {
45  const file = titleFromSegment(path.split("/").pop()!.replace(/\.md$/, ""));
46  if (kindOf(path) === "scene") return `${titleFromSegment(path.split("/")[1]!)}: ${file}`;
47  if (kindOf(path) === "book") return "Title page";
48  return file;
49}
50
51/** Both texts are in hand: line by line is a patch built here, word by word the two texts side by side. */
52function sides(heading: string, lead: string, path: string, before: Side, after: Side, by: "line" | "word"): View {
53  if (by === "word") return { kind: "compare", heading, lead, patch: null, before, after };
54  return { kind: "compare", heading, lead, patch: unifiedPatch(path.split("/").pop()!, { text: before.text, label: before.title }, { text: after.text, label: after.title }), before: null, after: null };
55}
56
57export async function loader({ params, request, context }: Route.LoaderArgs) {
58  const env = getEnv(context);
59  const viewer = getViewer(context);
60  const project = await requireBookProject(env.DB, viewer, params.project, "read");
61  const path = params["*"] ?? "";
62  if (!isBookPath(path)) throw new Response("Not found", { status: 404 });
63  const query = new URL(request.url).searchParams;
64  // Side by side unless the person asks for the patch.
65  const by: "line" | "word" = query.get("by") === "line" ? "line" : "word";
66
67  const { repo, detail } = bookRepo(env);
68  const [{ versions, gitError }, draft, aiDrafts, indexed] = await Promise.all([
69    bookVersions(env.DB, repo, project, path),
70    readDraft(env.DB, project, viewer, path),
71    listAiDrafts(env.DB, project, viewer, path),
72    indexedFile(env.DB, project, path),
73  ]);
74  if (!indexed && versions.length === 0 && !draft && aiDrafts.length === 0) throw new Response("Not found", { status: 404 });
75  let current: string | null = indexed?.source ?? null;
76  if (repo) {
77    try {
78      current = (await repo.read(`${project.book}/${path}`))?.source ?? current;
79    } catch {
80      // The index's copy stands in; the problem is already said for the list.
81    }
82  }
83  const unread = repo ? null : `${detail} Without Git, only the versions Carrel recorded are listed, and their text cannot be opened.`;
84
85  const picks = query.getAll("v");
86  let view: View = { kind: "none" };
87  let picked: string[] = [];
88  const read = async (v: (typeof versions)[number]) => (repo ? readVersion(repo, project, v) : null);
89
90  if (query.get("compare") === "git") {
91    if (!draft) view = { kind: "problem", message: "You have no working draft of this file in Carrel, so there is nothing to set against Git's text." };
92    else if (current === null) view = { kind: "problem", message: "This file is not in Git yet, so there is no saved version to compare with." };
93    else {
94      view = sides(
95        "Your working draft against the saved file",
96        "Your autosaved copy in Carrel, set against the file as Git holds it now.",
97        path,
98        { title: "Saved in Git", text: current },
99        { title: "Your working draft", who: viewer.name, time: draft.updatedAt, text: draft.source },
100        by,
101      );
102    }
103  } else if (query.get("compare") === "ai") {
104    const id = Number(query.get("ai"));
105    if (!Number.isInteger(id) || id <= 0) view = { kind: "problem", message: "That AI draft is not one of yours for this file." };
106    else {
107      const ai = await readAiDraft(env.DB, project, viewer, path, id);
108      const mine: Side = draft
109        ? { title: "Your working draft", who: viewer.name, time: draft.updatedAt, text: draft.source }
110        : { title: "Your text, saved in Git", text: current ?? "" };
111      view = sides(
112        `Your ${draft ? "draft" : "text"} against the AI draft from ${ai.client}`,
113        draft ? "Your autosaved copy in Carrel, set against the AI draft saved beside it." : "You have no working draft, so this is the saved file against the AI draft saved beside it.",
114        path,
115        mine,
116        { title: `AI draft from ${ai.client}`, who: ai.client, time: ai.createdAt, text: ai.source },
117        by,
118      );
119    }
120  } else if (query.get("version")) {
121    const at = versions.findIndex((v) => v.version === query.get("version"));
122    if (at < 0) view = { kind: "problem", message: "This file has no such version." };
123    else {
124      const v = versions[at]!;
125      const source = await read(v);
126      view =
127        source === null
128          ? { kind: "problem", message: unread ?? "Git does not hold this file at that version." }
129          : { kind: "source", version: v.version, message: v.message, author: v.author, at: v.at, source, current: at === 0, previous: versions[at + 1]?.version ?? null, newest: at === 0 ? null : versions[0]!.version };
130    }
131  } else if (picks.length > 0) {
132    const pair = orderPair(versions, picks);
133    picked = picks;
134    if (!pair) view = { kind: "problem", message: "Pick two different versions to compare." };
135    else {
136      picked = [pair.from.version, pair.to.version];
137      const [before, after] = await Promise.all([read(pair.from), read(pair.to)]);
138      view =
139        before === null || after === null
140          ? { kind: "problem", message: unread ?? "Git does not hold the file at one of those versions." }
141          : sides(
142              `${utc(pair.from.at)} to ${utc(pair.to.at)}`,
143              `What changed between the version by ${pair.from.author} and the one by ${pair.to.author}.`,
144              path,
145              { title: "Earlier version", who: pair.from.author, time: pair.from.at, text: before },
146              { title: "Later version", who: pair.to.author, time: pair.to.at, text: after },
147              by,
148            );
149    }
150  }
151
152  return {
153    project: { slug: project.slug, name: project.name },
154    path,
155    label: labelFor(path),
156    by,
157    view,
158    picked,
159    versions: versions.map((v) => ({ version: v.version, at: v.at, author: v.author, message: v.message, kind: v.kind, path: v.path })),
160    notice: gitError ?? unread,
161    againstGit: Boolean(draft && current !== null),
162    aiDrafts: aiDrafts.map((d) => ({ id: d.id, client: d.client, createdAt: d.createdAt })),
163  };
164}
165
166export default function BookHistory({ loaderData }: Route.ComponentProps) {
167  const { project, path, label, by, view, picked, versions, notice, againstGit, aiDrafts } = loaderData;
168  const base = `/b/${project.slug}`;
169  const editor = `${base}/f/${path}`;
170  const historyPath = `${base}/h/${path}`;
171  const navigate = useNavigate();
172  const location = useLocation();
173  const pending = useNavigation().location;
174  const shown = pending ? (new URLSearchParams(pending.search).get("by") === "line" ? "line" : "word") : by;
175  const setBy = (next: "line" | "word") => {
176    const params = new URLSearchParams(location.search);
177    params.set("by", next);
178    void navigate(`${location.pathname}?${params.toString()}`, { preventScrollReset: true });
179  };
180  const moved = versions.filter((v) => v.path !== path).length;
181
182  return (
183    <div className="app-page">
184      <PageHead
185        renderLink={RouterLink}
186        crumbs={[{ label: project.name, href: base }, { label, href: editor }, { label: "History" }]}
187        title={`History of ${label}`}
188        lead={
189          <>
190            Every version of <span className="cap-mono">{path}</span>, newest first{moved ? ", followed back through its moves" : ""}. Looking here changes nothing.
191          </>
192        }
193        actions={
194          <Link to={editor} className="cap-btn">
195            Back to the editor
196          </Link>
197        }
198      />
199
200      {notice ? <Banner tone="warn">{notice}</Banner> : null}
201      {view.kind === "problem" ? <Alert tone="warn">{view.message}</Alert> : null}
202
203      {view.kind === "source" ? (
204        <Panel
205          title={view.message}
206          src={
207            <>
208              by {view.author}, <Time at={view.at} format="exact" />
209            </>
210          }
211          actions={
212            <>
213              {view.current ? <Pill tone="ok">Current</Pill> : null}
214              {view.previous ? (
215                <Link className="cap-btn" to={`${historyPath}?v=${encodeURIComponent(view.previous)}&v=${encodeURIComponent(view.version)}`}>
216                  Changes in this version
217                </Link>
218              ) : null}
219              {view.newest ? (
220                <Link className="cap-btn" to={`${historyPath}?v=${encodeURIComponent(view.version)}&v=${encodeURIComponent(view.newest)}`}>
221                  Compare with the current version
222                </Link>
223              ) : null}
224            </>
225          }
226        >
227          <pre className="app-ai-draft" aria-label="Text of this version">
228            {view.source}
229          </pre>
230        </Panel>
231      ) : null}
232
233      {view.kind === "compare" ? (
234        <Panel
235          title={view.heading}
236          description={view.lead}
237          actions={<Segmented legend="Compare by" hideLegend size="sm" value={shown} onChange={setBy} options={[{ value: "word", label: "Side by side" }, { value: "line", label: "By line" }]} />}
238        >
239          {view.patch !== null ? <DraftPatch patch={view.patch} title={view.heading} id="book-history-patch" /> : view.before && view.after ? <DraftCompare before={view.before} after={view.after} id="book-history-compare" /> : null}
240        </Panel>
241      ) : null}
242
243      {againstGit || aiDrafts.length > 0 ? (
244        <Panel title="Your text" src="Your draft, or the saved file when you have none">
245          {againstGit ? (
246            <ul className="app-flags" aria-label="Compare your draft with the saved file">
247              <li>
248                <span>
249                  <Link to={`${historyPath}?compare=git`}>Your working draft against the saved file</Link>
250                </span>
251              </li>
252            </ul>
253          ) : null}
254          <DraftLinks historyPath={historyPath} againstSite={false} aiDrafts={aiDrafts} />
255        </Panel>
256      ) : null}
257
258      <Panel title="Versions" count={versions.length} src="Saved in Carrel, moved in the binder, or committed elsewhere">
259        {versions.length === 0 ? (
260          <Empty kind="nothing-yet" title="No history to show">
261            {notice ? "Git is not answering." : "Nothing has been saved to this file yet."}
262          </Empty>
263        ) : (
264          <RevisionPicker
265            revisions={versions.map((v) => ({ ...v, message: v.kind === "outside" ? `${v.message} (outside Carrel)` : v.message }))}
266            historyPath={historyPath}
267            picked={picked}
268            label="Versions of this file"
269          />
270        )}
271      </Panel>
272    </div>
273  );
274}