app/routes/book.outliner.tsx

Functions

Imports

It imports app/components/frame.tsx, app/components/writing/status-label.tsx, 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/status.ts. No module of this repo imports it.

Source

1// The outliner (ruling, build step 1): every scene of the book as one table, in reading order, with
2// the header keys a writer plans by (status, summary, point of view, words against the target or
3// limit), filterable by status. It reads Carrel's index and stores nothing of its own. Below it, the
4// project's status list, which anyone who may write here can edit.
5
6import { Form, Link, useNavigation, useSearchParams } from "react-router";
7import { Alert, Banner } from "capsomer/react/banner";
8import { Button } from "capsomer/react/button";
9import { Disclosure } from "capsomer/react/disclosure";
10import { Empty } from "capsomer/react/empty";
11import { Field } from "capsomer/react/field";
12import { Panel } from "capsomer/react/panel";
13import { Select } from "capsomer/react/select";
14import { Status } from "capsomer/react/status";
15import { PageHead } from "capsomer/react/page-head";
16
17import { RouterLink } from "~/components/frame";
18import { StatusLabelPill } from "~/components/writing/status-label";
19
20import { listFiles, requireBookProject } from "~/lib/books.server";
21import { getEnv, getViewer } from "~/lib/context";
22import { chapterOf, readingOrder, titleFromSegment } from "~/lib/novels/layout";
23import { can } from "~/lib/roles";
24import { saveStatusList, statusList } from "~/lib/writing.server";
25import { COLOR_NAMES, labelFor, MAX_LABELS } from "~/lib/writing/status";
26
27import type { Route } from "./+types/book.outliner";
28
29export function meta({ loaderData: data }: Route.MetaArgs) {
30  return [{ title: data ? `Outliner · ${data.project.name} · Carrel` : "Carrel" }];
31}
32
33/** The filter's values besides the labels themselves. */
34const NONE = "none";
35const OTHER = "other";
36
37export async function loader({ params, request, context }: Route.LoaderArgs) {
38  const env = getEnv(context);
39  const project = await requireBookProject(env.DB, getViewer(context), params.project, "read");
40  const [files, status] = await Promise.all([listFiles(env.DB, project), statusList(env.DB, project)]);
41  const rows = readingOrder(files).map((f) => {
42    const header = f.meta.kind === "scene" ? f.meta.header : null;
43    const chapter = chapterOf(f.path)!;
44    return {
45      path: f.path,
46      chapter: titleFromSegment(chapter),
47      name: titleFromSegment(f.path.split("/")[2]!.replace(/\.md$/, "")),
48      // Index rows from before these keys carry none of them until the file is next read.
49      status: header?.status ?? "",
50      summary: header?.summary ?? "",
51      pov: header?.pov ?? "",
52      target: header?.target ?? null,
53      limit: header?.limit ?? null,
54      words: f.words,
55    };
56  });
57
58  const wanted = (new URL(request.url).searchParams.get("status") ?? "").trim().toLowerCase();
59  const shown = rows.filter((r) => {
60    if (!wanted) return true;
61    if (wanted === NONE) return !r.status;
62    if (wanted === OTHER) return Boolean(r.status) && !labelFor(status.labels, r.status);
63    return r.status.toLowerCase() === wanted;
64  });
65  const counts = new Map<string, number>();
66  for (const r of rows) {
67    const key = !r.status ? NONE : (labelFor(status.labels, r.status)?.label.toLowerCase() ?? OTHER);
68    counts.set(key, (counts.get(key) ?? 0) + 1);
69  }
70
71  return {
72    project: { slug: project.slug, name: project.name },
73    canEdit: can(project.role, "edit"),
74    labels: status.labels,
75    edited: status.edited,
76    rows: shown,
77    total: rows.length,
78    counts: Object.fromEntries(counts),
79    filter: wanted,
80  };
81}
82
83export async function action({ params, request, context }: Route.ActionArgs) {
84  const env = getEnv(context);
85  const project = await requireBookProject(env.DB, getViewer(context), params.project, "edit");
86  const form = await request.formData();
87  if (String(form.get("intent") ?? "") !== "labels") throw new Response("Bad request", { status: 400 });
88  const labels = form.getAll("label").map(String);
89  const colors = form.getAll("color").map(String);
90  const saved = await saveStatusList(env.DB, project, labels.map((label, i) => ({ label, color: colors[i] ?? "" })));
91  return saved.ok ? { saved: true, error: null } : { saved: false, error: saved.error };
92}
93
94function measure(words: number, target: number | null, limit: number | null) {
95  const n = (v: number) => v.toLocaleString("en-US");
96  if (limit !== null) {
97    return words > limit ? (
98      <>
99        {n(words)} of {n(limit)} <Status tone="warn">Over the limit</Status>
100      </>
101    ) : (
102      `${n(words)} of ${n(limit)} allowed`
103    );
104  }
105  if (target !== null) {
106    return words >= target ? (
107      <>
108        {n(words)} of {n(target)} <Status tone="ok">Reached</Status>
109      </>
110    ) : (
111      `${n(words)} of ${n(target)}`
112    );
113  }
114  return n(words);
115}
116
117export default function Outliner({ loaderData, actionData }: Route.ComponentProps) {
118  const { project, canEdit, labels, edited, rows, total, counts, filter } = loaderData;
119  const [params] = useSearchParams();
120  const navigation = useNavigation();
121  const saving = navigation.state !== "idle" && navigation.formData?.get("intent") === "labels";
122  const base = `/b/${project.slug}`;
123  const options = [
124    { value: "", label: `Every status (${total})` },
125    ...labels.map((l) => ({ value: l.label.toLowerCase(), label: `${l.label} (${counts[l.label.toLowerCase()] ?? 0})` })),
126    { value: NONE, label: `No status (${counts[NONE] ?? 0})` },
127    ...(counts[OTHER] ? [{ value: OTHER, label: `Not on the list (${counts[OTHER]})` }] : []),
128  ];
129  const filterName = options.find((o) => o.value === filter)?.label.replace(/ \(\d+\)$/, "") ?? filter;
130  // Room to add labels: two empty rows under the list, up to the limit.
131  const editRows = [...labels, ...Array.from({ length: Math.max(0, Math.min(2, MAX_LABELS - labels.length)) }, () => ({ label: "", color: 0 }))];
132
133  return (
134    <div className="app-page">
135      <PageHead
136        renderLink={RouterLink}
137        crumbs={[{ label: project.name, href: base }, { label: "Outliner" }]}
138        title="Outliner"
139        lead="Every scene in reading order, with the header keys you plan by. Change a scene's status, summary or target in its header."
140      />
141
142      <Form method="get" className="app-inline-form app-filter" aria-label="Filter by status">
143        <Field label="Status">
144          <Select name="status" defaultValue={params.get("status") ?? ""} options={options} />
145        </Field>
146        <Button type="submit">Filter</Button>
147      </Form>
148
149      <Panel title="Scenes" count={rows.length} flush>
150        <p className="cap-sr-only" role="status">
151          {filter ? `${rows.length} of ${total} scenes with the status ${filterName}.` : `${total} scenes.`}
152        </p>
153        {total === 0 ? (
154          <Empty kind="nothing-yet" flush title="No scenes in the index yet">
155            Start a chapter on the book page, or refresh from Git.
156          </Empty>
157        ) : rows.length === 0 ? (
158          <Empty kind="no-match" flush title={`No scenes have the status ${filterName}.`}>
159            <Link to={base + "/outliner"}>Show every scene</Link>
160          </Empty>
161        ) : (
162          <div className="cap-table-wrap" role="region" aria-labelledby="outliner-caption" tabIndex={0}>
163            <table className="cap-table">
164              <caption id="outliner-caption" className="cap-sr-only">
165                Scenes in reading order{filter ? `, with the status ${filterName}` : ""}
166              </caption>
167              <thead>
168                <tr>
169                  <th scope="col">Scene</th>
170                  <th scope="col">Status</th>
171                  <th scope="col" data-drop="1">
172                    Summary
173                  </th>
174                  <th scope="col" data-drop="2">
175                    Point of view
176                  </th>
177                  <th scope="col" data-num>
178                    Words
179                  </th>
180                </tr>
181              </thead>
182              <tbody>
183                {rows.map((r) => (
184                  <tr key={r.path}>
185                    <th scope="row">
186                      <Link className="cap-table-open" to={`${base}/f/${r.path}`}>
187                        {r.name}
188                      </Link>
189                      <span className="cap-muted app-outliner-chapter">{r.chapter}</span>
190                    </th>
191                    <td>{r.status ? <StatusLabelPill labels={labels} status={r.status} /> : <span className="cap-muted">None</span>}</td>
192                    <td data-drop="1">{r.summary || <span className="cap-muted">None</span>}</td>
193                    <td data-drop="2">{r.pov}</td>
194                    <td data-num>{measure(r.words, r.target, r.limit)}</td>
195                  </tr>
196                ))}
197              </tbody>
198            </table>
199          </div>
200        )}
201      </Panel>
202
203      <Panel title="Status list" count={labels.length} src={edited ? "This book's own" : "The starting list for books"}>
204        <div className="app-stack" data-tight>
205          <ul className="app-label-list" aria-label="Statuses, in order">
206            {labels.map((l) => (
207              <li key={l.label}>
208                <StatusLabelPill labels={labels} status={l.label} />
209              </li>
210            ))}
211          </ul>
212          <p className="cap-muted app-note">A scene takes one with status: in its header. A status not on the list still shows, as written.</p>
213          {actionData?.error ? <Alert tone="crit">{actionData.error}</Alert> : actionData?.saved ? <Banner tone="ok">The status list is saved.</Banner> : null}
214          {canEdit ? (
215            <Disclosure summary="Edit the list" defaultOpen={Boolean(actionData?.error)}>
216              <Form method="post" className="app-stack" data-tight>
217                <input type="hidden" name="intent" value="labels" />
218                <p className="cap-muted app-note">In order. Clear a label to remove it; renaming one does not change the scenes that carry the old word.</p>
219                <ol className="app-label-edit">
220                  {editRows.map((l, i) => (
221                    <li key={i} className="app-inline-form">
222                      <Field label={`Label ${i + 1}`}>
223                        <input className="cap-input" name="label" defaultValue={l.label} maxLength={40} autoComplete="off" />
224                      </Field>
225                      <Field label={`Color ${i + 1}`}>
226                        <Select name="color" defaultValue={String(l.color || (i % 8) + 1)} options={COLOR_NAMES.map((c, k) => ({ value: String(k + 1), label: c }))} />
227                      </Field>
228                    </li>
229                  ))}
230                </ol>
231                <div className="app-actions">
232                  <Button type="submit" pending={saving}>
233                    Save the list
234                  </Button>
235                </div>
236              </Form>
237            </Disclosure>
238          ) : null}
239        </div>
240      </Panel>
241    </div>
242  );
243}