app/routes/book.corkboard.tsx

Functions

Imports

It imports app/components/frame.tsx, app/components/writing/status-label.tsx, app/lib/binder.server.ts, app/lib/books.server.ts, app/lib/context.ts, app/lib/novels/frontmatter.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 corkboard (design 4.2): the book's chapters in order, then each chapter's scenes as cards with
2// the summary, point of view, status and words. Chapters and cards move by dragging a grip, by the
3// keyboard, or by Move up and Move down; a card also moves to another chapter. Every move is renames
4// of numbered files in one commit (lib/binder.server.ts). It works with no script: the lists sit in
5// forms whose buttons post the move.
6
7import { Form, Link, useFetcher } from "react-router";
8import { Alert, Banner } from "capsomer/react/banner";
9import { Button } from "capsomer/react/button";
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 { SortableList, moveId } from "capsomer/react/sortable-list";
15import { PageHead } from "capsomer/react/page-head";
16
17import { RouterLink } from "~/components/frame";
18import { StatusLabelPill } from "~/components/writing/status-label";
19
20import { reorderBook, chapterSources, type ReorderResult } from "~/lib/binder.server";
21import { bookRepo, listFiles, requireBookProject } from "~/lib/books.server";
22import { getEnv, getViewer } from "~/lib/context";
23import { parseFile } from "~/lib/novels/frontmatter";
24import { titleFromSegment } from "~/lib/novels/layout";
25import { can } from "~/lib/roles";
26import { currentOrder, firstSentence, withChapterOrder, type ChapterOrder } from "~/lib/writing/binder";
27import { statusList } from "~/lib/writing.server";
28
29import type { Route } from "./+types/book.corkboard";
30
31export function meta({ loaderData: data }: Route.MetaArgs) {
32  return [{ title: data ? `Corkboard · ${data.project.name} · Carrel` : "Carrel" }];
33}
34
35export async function loader({ params, context }: Route.LoaderArgs) {
36  const env = getEnv(context);
37  const project = await requireBookProject(env.DB, getViewer(context), params.project, "read");
38  const [files, status] = await Promise.all([listFiles(env.DB, project), statusList(env.DB, project)]);
39  const byPath = new Map(files.map((f) => [f.path, f]));
40  const order = currentOrder(files.map((f) => f.path));
41  const sources = await chapterSources(
42    env.DB,
43    project.id,
44    order.flatMap((c) => c.scenes),
45  );
46  return {
47    project: { slug: project.slug, name: project.name },
48    canMove: can(project.role, "edit") && bookRepo(env).repo !== null,
49    labels: status.labels,
50    chapters: order.map((c) => ({
51      slug: c.chapter,
52      title: titleFromSegment(c.chapter),
53      cards: c.scenes.map((path) => {
54        const meta = byPath.get(path)?.meta;
55        const header = meta?.kind === "scene" ? meta.header : null;
56        const summary = header?.summary ?? "";
57        return {
58          path,
59          title: titleFromSegment(path.split("/")[2]!.replace(/\.md$/, "")),
60          summary: summary || firstSentence(parseFile(sources.get(path) ?? "").body),
61          fromText: !summary,
62          pov: header?.pov ?? "",
63          status: header?.status ?? "",
64          words: byPath.get(path)?.words ?? 0,
65        };
66      }),
67    })),
68  };
69}
70
71/** One step up or down, as a list's buttons post it with no script. */
72function stepped(ids: string[], form: FormData): string[] {
73  const up = form.get("up");
74  const down = form.get("down");
75  const id = String(up ?? down ?? "");
76  const at = ids.indexOf(id);
77  if (at < 0) return ids;
78  return moveId(ids, id, Math.max(0, Math.min(ids.length - 1, at + (up ? -1 : 1))));
79}
80
81export async function action({ params, request, context }: Route.ActionArgs): Promise<{ result: ReorderResult }> {
82  const env = getEnv(context);
83  const viewer = getViewer(context);
84  const project = await requireBookProject(env.DB, viewer, params.project, "edit");
85  const form = await request.formData();
86  const intent = String(form.get("intent") ?? "");
87  const paths = (await listFiles(env.DB, project)).map((f) => f.path);
88  const now = currentOrder(paths);
89
90  let desired: ChapterOrder[];
91  if (intent === "chapters") {
92    const ids = stepped(form.getAll("order").map(String), form);
93    const by = new Map(now.map((c) => [c.chapter, c]));
94    desired = ids.map((id) => by.get(id) ?? { chapter: id, scenes: [] });
95  } else if (intent === "scenes") {
96    const chapter = String(form.get("chapter") ?? "");
97    desired = withChapterOrder(paths, chapter, stepped(form.getAll("order").map(String), form));
98  } else if (intent === "move-to") {
99    const path = String(form.get("path") ?? "");
100    const target = String(form.get("target") ?? "");
101    desired = now.map((c) => ({ chapter: c.chapter, scenes: c.scenes.filter((s) => s !== path) }));
102    const into = desired.find((c) => c.chapter === target);
103    if (!into || !now.some((c) => c.scenes.includes(path))) throw new Response("Bad request", { status: 400 });
104    into.scenes.push(path);
105  } else {
106    throw new Response("Bad request", { status: 400 });
107  }
108
109  const { repo, detail } = bookRepo(env);
110  if (!repo) return { result: { ok: false, reason: "failed", message: `${detail} Nothing was moved.` } };
111  return { result: await reorderBook(env.DB, repo, project, viewer, desired) };
112}
113
114type Card = Route.ComponentProps["loaderData"]["chapters"][number]["cards"][number];
115
116export default function Corkboard({ loaderData, actionData }: Route.ComponentProps) {
117  const { project, canMove, labels, chapters } = loaderData;
118  const mover = useFetcher<typeof action>();
119  const base = `/b/${project.slug}`;
120  const result = mover.data?.result ?? actionData?.result ?? null;
121  const moving = mover.state !== "idle";
122  const send = (fields: Record<string, string | string[]>) => {
123    const body = new FormData();
124    for (const [k, v] of Object.entries(fields)) for (const one of [v].flat()) body.append(k, one);
125    void mover.submit(body, { method: "post" });
126  };
127
128  // A card's "Move to" sits inside the list's form, so its controls belong to a form of their own
129  // placed after the list (the form attribute), never a form nested in another.
130  const moveForm = (c: Card) => `move-${c.path.replace(/[^a-z0-9]+/g, "-")}`;
131  const card = (c: Card, chapter: string) => (
132    <div className="app-card">
133      <div className="app-card-head">
134        <Link to={`${base}/f/${c.path}`} className="app-card-title">
135          {c.title}
136        </Link>
137        <StatusLabelPill labels={labels} status={c.status} />
138      </div>
139      <p className={c.fromText ? "app-card-summary cap-muted" : "app-card-summary"}>
140        {c.summary || "No summary yet."}
141        {c.fromText && c.summary ? <span className="cap-sr-only"> (the scene's first sentence; it has no summary)</span> : null}
142      </p>
143      <p className="app-card-facts cap-muted">
144        {c.pov ? <>{c.pov}, </> : null}
145        {c.words.toLocaleString("en-US")} words
146      </p>
147      {canMove && chapters.length > 1 ? (
148        <div className="app-card-move">
149          <Field label={<span>Move {c.title} to</span>}>
150            <Select form={moveForm(c)} name="target" size="sm" required defaultValue="" options={[{ value: "", label: "Another chapter", disabled: true }, ...chapters.filter((x) => x.slug !== chapter).map((x) => ({ value: x.slug, label: x.title }))]} />
151          </Field>
152          <Button type="submit" form={moveForm(c)} size="sm" pending={moving}>
153            Move
154          </Button>
155        </div>
156      ) : null}
157    </div>
158  );
159
160  return (
161    <div className="app-page">
162      <PageHead
163        renderLink={RouterLink}
164        crumbs={[{ label: project.name, href: base }, { label: "Corkboard" }]}
165        title="Corkboard"
166        lead="Each chapter's scenes as cards, in reading order. Moving a card or a chapter renumbers the files after it, in one commit."
167        actions={
168          <Link to={`${base}/outliner`} className="cap-btn">
169            Outliner
170          </Link>
171        }
172      />
173
174      <p role="status" className="app-note">
175        {moving ? "Saving the new order to Git." : result?.ok ? (result.renames.length === 0 ? "Nothing to move." : `Moved. ${result.renames.length} file${result.renames.length === 1 ? "" : "s"} renumbered in one commit.`) : ""}
176      </p>
177      {result && !result.ok ? <Alert tone="crit">{result.message}</Alert> : null}
178      {!canMove ? <Banner tone="info">The order is shown as it stands. Moving needs an Editor or the Owner, and Git connected.</Banner> : null}
179
180      {chapters.length === 0 ? (
181        <Empty kind="nothing-yet" title="No scenes yet">
182          Start a chapter on the book page, or refresh from Git.
183        </Empty>
184      ) : (
185        <>
186          <Panel title="Chapters" count={chapters.length}>
187            {canMove ? (
188              <Form method="post">
189                <input type="hidden" name="intent" value="chapters" />
190                <SortableList
191                  items={chapters}
192                  getId={(c) => c.slug}
193                  getLabel={(c) => c.title}
194                  name="order"
195                  aria-label="Chapters in order"
196                  renderItem={(c) => (
197                    <>
198                      <span className="cap-sortable-label">{c.title}</span>
199                      <span className="cap-sortable-detail">
200                        {c.cards.length} scene{c.cards.length === 1 ? "" : "s"}
201                      </span>
202                    </>
203                  )}
204                  onReorder={(order) => send({ intent: "chapters", order })}
205                />
206              </Form>
207            ) : (
208              <ol className="app-links">
209                {chapters.map((c) => (
210                  <li key={c.slug}>{c.title}</li>
211                ))}
212              </ol>
213            )}
214          </Panel>
215
216          {chapters.map((chapter) => (
217            <Panel key={chapter.slug} title={chapter.title} count={chapter.cards.length} headingId={`cork-${chapter.slug}`}>
218              {canMove ? (
219                <Form method="post">
220                  <input type="hidden" name="intent" value="scenes" />
221                  <input type="hidden" name="chapter" value={chapter.slug} />
222                  <SortableList items={chapter.cards} getId={(c) => c.path} getLabel={(c) => c.title} name="order" layout="cards" aria-labelledby={`cork-${chapter.slug}`} renderItem={(c) => card(c, chapter.slug)} onReorder={(order) => send({ intent: "scenes", chapter: chapter.slug, order })} />
223                </Form>
224              ) : null}
225              {canMove && chapters.length > 1
226                ? chapter.cards.map((c) => (
227                    <form
228                      key={c.path}
229                      id={moveForm(c)}
230                      method="post"
231                      hidden
232                      onSubmit={(e) => {
233                        e.preventDefault();
234                        send(Object.fromEntries(new FormData(e.currentTarget)) as Record<string, string>);
235                      }}
236                    >
237                      <input type="hidden" name="intent" value="move-to" />
238                      <input type="hidden" name="path" value={c.path} />
239                    </form>
240                  ))
241                : null}
242              {canMove ? null : (
243                <ol className="app-cards" aria-labelledby={`cork-${chapter.slug}`}>
244                  {chapter.cards.map((c) => (
245                    <li key={c.path}>{card(c, chapter.slug)}</li>
246                  ))}
247                </ol>
248              )}
249            </Panel>
250          ))}
251        </>
252      )}
253    </div>
254  );
255}