app/routes/book.tsx

Functions

Imports

It imports app/components/writing/progress-panel.tsx, app/components/writing/status-label.tsx, app/lib/binder.server.ts, app/lib/books.server.ts, app/lib/context.ts, app/lib/novels/layout.ts, app/lib/roles.ts, app/lib/writing.server.ts, app/lib/writing/binder.ts. No module of this repo imports it.

Source

1// The book view: its chapters and scenes in reading order with each scene's header, the bible and
2// the outline, the flags the checks have open, and export for the Owner. The list is Carrel's index
3// of the book's folder in Git; Refresh reads Git again.
4
5import type { ReactNode } from "react";
6import { Form, Link, redirect, useNavigation } from "react-router";
7import { Alert, Banner } from "capsomer/react/banner";
8import { Button, ButtonGroup } from "capsomer/react/button";
9import { Empty } from "capsomer/react/empty";
10import { Field } from "capsomer/react/field";
11import { Panel } from "capsomer/react/panel";
12import { Row, RowList } from "capsomer/react/row-list";
13import { Select } from "capsomer/react/select";
14import { StatTile, StatTiles } from "capsomer/react/stat-tile";
15import { Status } from "capsomer/react/status";
16import { PageHead } from "capsomer/react/page-head";
17
18import { ProgressPanel } from "~/components/writing/progress-panel";
19import { StatusLabelPill } from "~/components/writing/status-label";
20
21import { bookRepo, draftPaths, exportGate, listFiles, listFindings, refreshBook, requireBookProject } from "~/lib/books.server";
22import { getEnv, getViewer } from "~/lib/context";
23import { chapterOf, nextNumbered, readingOrder, slugify, titleFromSegment } from "~/lib/novels/layout";
24import { can } from "~/lib/roles";
25import { reorderBook } from "~/lib/binder.server";
26import { parseOrder } from "~/lib/writing/binder";
27import { progressEntries, readGoal, saveGoal, statusList } from "~/lib/writing.server";
28
29import type { Route } from "./+types/book";
30
31export function meta({ loaderData: data }: Route.MetaArgs) {
32  return [{ title: data ? `${data.project.name} · Carrel` : "Carrel" }];
33}
34
35const BIBLE_FOLDERS = { character: "characters", place: "places", rule: "rules" } as const;
36
37export async function loader({ params, context }: Route.LoaderArgs) {
38  const env = getEnv(context);
39  const viewer = getViewer(context);
40  const project = await requireBookProject(env.DB, viewer, params.project, "read");
41  const [files, open, drafts, status, goal, entries] = await Promise.all([
42    listFiles(env.DB, project),
43    listFindings(env.DB, project, { status: "open" }),
44    draftPaths(env.DB, project, viewer),
45    statusList(env.DB, project),
46    readGoal(env.DB, project, viewer),
47    progressEntries(env.DB, project, viewer),
48  ]);
49  const flags = new Map<string, number>();
50  for (const f of open) flags.set(f.path, (flags.get(f.path) ?? 0) + 1);
51
52  const chapters: { slug: string; title: string; words: number; flags: number; scenes: { path: string; name: string; status: string; pov: string; date: string; location: string; words: number; flags: number }[] }[] = [];
53  for (const file of readingOrder(files)) {
54    const slug = chapterOf(file.path)!;
55    let chapter = chapters.at(-1);
56    if (!chapter || chapter.slug !== slug) {
57      chapter = { slug, title: titleFromSegment(slug), words: 0, flags: 0, scenes: [] };
58      chapters.push(chapter);
59    }
60    const header = file.meta.kind === "scene" ? file.meta.header : null;
61    const n = flags.get(file.path) ?? 0;
62    chapter.words += file.words;
63    chapter.flags += n;
64    chapter.scenes.push({
65      path: file.path,
66      name: titleFromSegment(file.path.split("/")[2]!.replace(/\.md$/, "")),
67      // An index row from before the status key reads as no status until its next save or refresh.
68      status: header?.status ?? "",
69      pov: header?.pov ?? "",
70      date: header?.date ?? "",
71      location: header?.location ?? "",
72      words: file.words,
73      flags: n,
74    });
75  }
76
77  const bible = files.flatMap(({ path, meta }) =>
78    meta.kind === "character" || meta.kind === "place" || meta.kind === "rule"
79      ? [{ path, kind: meta.kind, name: meta.entry.name, flags: flags.get(path) ?? 0 }]
80      : [],
81  );
82  const others = files.filter((f) => f.kind === "outline" || f.kind === "note" || f.kind === "book").map((f) => ({ path: f.path, kind: f.kind }));
83  const known = new Set(files.map((f) => f.path));
84  const bookMeta = files.find((f) => f.path === "book.md")?.meta;
85  const bookEntry = bookMeta?.kind === "book" ? bookMeta.entry : null;
86  const connection = bookRepo(env);
87  const canPublish = can(project.role, "publish");
88
89  return {
90    project: { slug: project.slug, name: project.name, book: project.book },
91    canEdit: can(project.role, "edit"),
92    canPublish,
93    connected: connection.repo !== null,
94    connectionDetail: connection.detail,
95    chapters,
96    bible,
97    others,
98    hasBookFile: known.has("book.md"),
99    words: files.filter((f) => f.kind === "scene").reduce((n, f) => n + f.words, 0),
100    open: open.length,
101    exportReady: canPublish ? (await exportGate(env.DB, project)).ok : false,
102    // Drafts of files Git does not have yet, so a started scene is not lost from view.
103    unsaved: drafts.filter((p) => !known.has(p)),
104    labels: status.labels,
105    progress: { entries, goal, projectTarget: bookEntry?.target ?? null, deadline: bookEntry?.deadline ?? "" },
106  };
107}
108
109export async function action({ params, request, context }: Route.ActionArgs) {
110  const env = getEnv(context);
111  const project = await requireBookProject(env.DB, getViewer(context), params.project, "read");
112  const form = await request.formData();
113  const intent = String(form.get("intent") ?? "");
114
115  if (intent === "goal") {
116    const saved = await saveGoal(env.DB, project, getViewer(context), {
117      mode: String(form.get("mode") ?? ""),
118      dailyTarget: String(form.get("dailyTarget") ?? ""),
119      writingDays: form.getAll("writingDays").map(String),
120      allowNegative: form.get("allowNegative") === "1",
121    });
122    return { refreshed: null, error: null, goal: saved.ok ? { saved: true, error: null } : { saved: false, error: saved.error } };
123  }
124
125  // A move in the binder: the whole new order, which the server turns into one commit of renames.
126  if (intent === "reorder") {
127    const order = parseOrder(String(form.get("order") ?? ""));
128    if (!order) throw new Response("Bad request", { status: 400 });
129    const { repo, detail } = bookRepo(env);
130    if (!repo) return { refreshed: null, error: null, reorder: { ok: false as const, reason: "failed" as const, message: `${detail} Nothing was moved.` } };
131    return { refreshed: null, error: null, reorder: await reorderBook(env.DB, repo, project, getViewer(context), order) };
132  }
133
134  if (intent === "refresh") {
135    const { repo, detail } = bookRepo(env);
136    if (!repo) return { refreshed: null, error: detail };
137    try {
138      return { refreshed: await refreshBook(env.DB, repo, project), error: null };
139    } catch (error) {
140      return { refreshed: null, error: error instanceof Error ? error.message : String(error) };
141    }
142  }
143
144  // Starting a file only opens the editor on it; nothing reaches Git until the first Save.
145  if (!can(project.role, "edit")) throw new Response("Forbidden", { status: 403 });
146  const name = String(form.get("name") ?? "").trim();
147  const slug = slugify(name);
148  if (!slug) return { refreshed: null, error: "Give it a name with at least one letter or digit." };
149  const files = await listFiles(env.DB, project);
150
151  if (intent === "new-chapter") {
152    const chapters = [...new Set(files.map((f) => chapterOf(f.path)).filter((c): c is string => c !== null))];
153    return redirect(`/b/${project.slug}/f/chapters/${nextNumbered(chapters, slug)}/01-${slugify(String(form.get("scene") ?? "")) || "opening"}.md`);
154  }
155  if (intent === "new-bible") {
156    const kind = String(form.get("kind") ?? "") as keyof typeof BIBLE_FOLDERS;
157    if (!Object.hasOwn(BIBLE_FOLDERS, kind)) throw new Response("Bad request", { status: 400 });
158    return redirect(`/b/${project.slug}/f/bible/${BIBLE_FOLDERS[kind]}/${slug}.md?name=${encodeURIComponent(name)}`);
159  }
160  if (intent === "new-outline") return redirect(`/b/${project.slug}/f/outline/${slug}.md`);
161  throw new Response("Bad request", { status: 400 });
162}
163
164export default function Book({ loaderData, actionData }: Route.ComponentProps) {
165  const { project, canEdit, canPublish, connected, connectionDetail, chapters, bible, others, words, open, exportReady, unsaved, hasBookFile, labels, progress } = loaderData;
166  const goalResult = actionData && "goal" in actionData ? actionData.goal : null;
167  const navigation = useNavigation();
168  const refreshing = navigation.state !== "idle" && navigation.formData?.get("intent") === "refresh";
169  const base = `/b/${project.slug}`;
170  const file = (path: string) => `${base}/f/${path}`;
171  const link = ({ href, children }: { href: string; children: ReactNode }) => <Link to={href}>{children}</Link>;
172
173  return (
174    <div className="app-page">
175      <PageHead
176        title={project.name}
177        lead={
178          <>
179            <span className="cap-mono">{project.book}/</span> in the writing repository.
180          </>
181        }
182        actions={
183          <>
184            {connected ? (
185              <Form method="post">
186                <Button type="submit" name="intent" value="refresh" pending={refreshing}>
187                  {refreshing ? "Refreshing" : "Refresh from Git"}
188                </Button>
189              </Form>
190            ) : null}
191            <Link to={`${base}/outliner`} className="cap-btn">
192              Outliner
193            </Link>
194            <Link to={`${base}/corkboard`} className="cap-btn">
195              Corkboard
196            </Link>
197            <Link to={`${base}/authorship`} className="cap-btn" reloadDocument>
198              Authorship record
199            </Link>
200            {canPublish ? (
201              exportReady ? (
202                <ButtonGroup label="Export">
203                  <a className="cap-btn" href={`${base}/export/epub`}>
204                    ePub
205                  </a>
206                  <a className="cap-btn" href={`${base}/export/docx`}>
207                    Word
208                  </a>
209                  <a className="cap-btn" href={`${base}/export/print`} target="_blank" rel="noreferrer">
210                    Print or PDF<span className="cap-sr-only"> (opens in a new tab)</span>
211                  </a>
212                </ButtonGroup>
213              ) : (
214                <Button disabledReason="Export waits until every flag is fixed or dismissed.">Export</Button>
215              )
216            ) : null}
217          </>
218        }
219      />
220
221      <StatTiles label="The book at a glance">
222        <StatTile label="Words in scenes" figure={words.toLocaleString()} detail={`${chapters.length} chapter${chapters.length === 1 ? "" : "s"}`} />
223        {open === 0 ? (
224          <StatTile label="Open flags" tone="ok" word="Clear" figure="0" detail="Nothing holds export." />
225        ) : (
226          <StatTile label="Open flags" tone="warn" word="Open" figure={open} detail="They hold export until fixed or dismissed." />
227        )}
228      </StatTiles>
229
230      {!connected ? (
231        <Banner tone="warn" title="Git is not connected yet">
232          {connectionDetail} The book shows Carrel's last index of it, and saving waits for the connection.
233        </Banner>
234      ) : null}
235
236      {actionData?.error && !goalResult ? (
237        <Alert tone="crit">{actionData.error}</Alert>
238      ) : actionData?.refreshed ? (
239        <Banner tone="ok">
240          {actionData.refreshed.files} files in Git, {actionData.refreshed.read} read again, {actionData.refreshed.removed} gone
241          {actionData.refreshed.more ? "; more on the next refresh" : ""}.
242        </Banner>
243      ) : null}
244
245      {unsaved.length > 0 ? (
246        <Panel title="Your drafts not yet in Git" count={unsaved.length} flush>
247          <RowList label="Your drafts not yet in Git">
248            {unsaved.map((p) => (
249              <Row key={p} title={<span className="cap-mono">{p}</span>} href={file(p)} renderLink={link} detail="Started here; nothing is in Git until the first Save." />
250            ))}
251          </RowList>
252        </Panel>
253      ) : null}
254
255      <div className="app-split" data-aside>
256        <Panel
257          title="Chapters"
258          count={chapters.length}
259          flush
260          footer={
261            canEdit ? (
262              <Form method="post" className="app-inline-form">
263                <input type="hidden" name="intent" value="new-chapter" />
264                <Field label="New chapter">
265                  <input className="cap-input" name="name" required placeholder="Chapter name" autoComplete="off" />
266                </Field>
267                <Field label="First scene">
268                  <input className="cap-input" name="scene" placeholder="Scene name" autoComplete="off" />
269                </Field>
270                <Button type="submit">Start it</Button>
271              </Form>
272            ) : undefined
273          }
274        >
275          {chapters.length === 0 ? (
276            <Empty kind="nothing-yet" flush title="No chapters in the index yet">
277              {canEdit ? "Start the first chapter below, or refresh from Git." : "Refresh from Git to read the book's folder."}
278            </Empty>
279          ) : (
280            chapters.map((chapter) => (
281              <section key={chapter.slug} className="app-chapter" aria-labelledby={`chapter-${chapter.slug}`}>
282                <h3 id={`chapter-${chapter.slug}`}>
283                  <Link to={`${base}/c/${chapter.slug}`}>{chapter.title}</Link>
284                  <span className="cap-muted">{chapter.words.toLocaleString()} words</span>
285                  {chapter.flags ? <Status tone="warn">{chapter.flags} flagged</Status> : null}
286                </h3>
287                <div className="cap-table-wrap" role="region" aria-labelledby={`scenes-${chapter.slug}`} tabIndex={0}>
288                  <table className="cap-table">
289                    <caption id={`scenes-${chapter.slug}`} className="cap-sr-only">
290                      Scenes in {chapter.title}
291                    </caption>
292                    <thead>
293                      <tr>
294                        <th scope="col">Scene</th>
295                        <th scope="col">Status</th>
296                        <th scope="col" data-drop="1">
297                          Point of view
298                        </th>
299                        <th scope="col" data-drop="1">
300                          Date
301                        </th>
302                        <th scope="col" data-drop="2">
303                          Location
304                        </th>
305                        <th scope="col" data-num>
306                          Words
307                        </th>
308                      </tr>
309                    </thead>
310                    <tbody>
311                      {chapter.scenes.map((s) => (
312                        <tr key={s.path}>
313                          <th scope="row">
314                            <Link className="cap-table-open" to={file(s.path)}>
315                              {s.name}
316                            </Link>
317                            {s.flags ? <Status tone="warn">{s.flags} flagged</Status> : null}
318                          </th>
319                          <td>
320                            <StatusLabelPill labels={labels} status={s.status} />
321                          </td>
322                          <td data-drop="1">{s.pov}</td>
323                          <td data-drop="1">{s.date}</td>
324                          <td data-drop="2">{s.location}</td>
325                          <td data-num>{s.words.toLocaleString()}</td>
326                        </tr>
327                      ))}
328                    </tbody>
329                  </table>
330                </div>
331              </section>
332            ))
333          )}
334        </Panel>
335
336        <div className="app-stack">
337          <ProgressPanel
338            {...progress}
339            wordsNow={words}
340            canEdit={canEdit}
341            titlePage={file("book.md")}
342            error={goalResult?.error ?? null}
343            saved={goalResult?.saved ?? false}
344          />
345          <Panel
346            title="Bible"
347            count={bible.length}
348            footer={
349              canEdit ? (
350                <Form method="post" className="app-inline-form">
351                  <input type="hidden" name="intent" value="new-bible" />
352                  <Field label="New entry">
353                    <Select
354                      name="kind"
355                      defaultValue="character"
356                      options={[
357                        { value: "character", label: "Character" },
358                        { value: "place", label: "Place" },
359                        { value: "rule", label: "World rule" },
360                      ]}
361                    />
362                  </Field>
363                  <Field label="Name">
364                    <input className="cap-input" name="name" required placeholder="Name" autoComplete="off" />
365                  </Field>
366                  <Button type="submit">Start it</Button>
367                </Form>
368              ) : undefined
369            }
370          >
371            {(["character", "place", "rule"] as const).map((kind) => {
372              const entries = bible.filter((b) => b.kind === kind);
373              const heading = kind === "character" ? "Characters" : kind === "place" ? "Places" : "World rules";
374              return (
375                <section key={kind} className="app-section" aria-labelledby={`bible-${kind}`}>
376                  <h3 id={`bible-${kind}`}>{heading}</h3>
377                  {entries.length === 0 ? (
378                    <p className="cap-muted">None yet.</p>
379                  ) : (
380                    <ul className="app-links">
381                      {entries.map((b) => (
382                        <li key={b.path}>
383                          <Link to={file(b.path)}>{b.name}</Link>
384                          {b.flags ? <Status tone="warn">{b.flags} flagged</Status> : null}
385                        </li>
386                      ))}
387                    </ul>
388                  )}
389                </section>
390              );
391            })}
392          </Panel>
393
394          <Panel
395            title="Outline and notes"
396            footer={
397              canEdit ? (
398                <Form method="post" className="app-inline-form">
399                  <input type="hidden" name="intent" value="new-outline" />
400                  <Field label="New outline file">
401                    <input className="cap-input" name="name" required placeholder="Name" autoComplete="off" />
402                  </Field>
403                  <Button type="submit">Start it</Button>
404                </Form>
405              ) : undefined
406            }
407          >
408            {others.length === 0 && (hasBookFile || !canEdit) ? (
409              <p className="cap-muted">None yet.</p>
410            ) : (
411              <ul className="app-links">
412                {others.map((o) => (
413                  <li key={o.path}>
414                    <Link to={file(o.path)}>{o.kind === "book" ? "Title page (book.md)" : o.path}</Link>
415                  </li>
416                ))}
417                {!hasBookFile && canEdit ? (
418                  <li>
419                    <Link to={file("book.md")}>Add a title page (book.md)</Link>
420                  </li>
421                ) : null}
422              </ul>
423            )}
424          </Panel>
425        </div>
426      </div>
427    </div>
428  );
429}