app/components/writing/binder.tsx

Functions

Imports

It imports app/lib/writing/binder.ts. Imported by app/routes/book.file.tsx, app/routes/editor.tsx.

Source

1// The binder beside the editor (design 4.1): the whole book as Capsomer's tree, the open file chosen.
2// A scene moves within its chapter or into another, and a chapter among the chapters, by dragging or
3// with Alt and the arrow keys. The tree shows the move at once; the book page's action turns the new
4// order into one commit of renames. If Git refuses, the tree goes back and says why. When the open
5// file is renamed, the page follows it to its new address.
6
7import { useEffect, useMemo, useRef, useState } from "react";
8import { useFetcher, useNavigate } from "react-router";
9import { Alert } from "capsomer/react/banner";
10import { Tree, type TreeNode } from "capsomer/react/tree";
11
12import { canMoveTo, fileId, orderFromTree, ROOT, type BinderNode, type Rename } from "~/lib/writing/binder";
13
14type ReorderAnswer = { reorder?: { ok: true; renames: Rename[] } | { ok: false; message: string } };
15
16const toTree = (nodes: BinderNode[]): TreeNode[] =>
17  nodes.map((n) => ({ id: n.id, label: n.label, href: n.href, meta: n.meta, children: n.children ? toTree(n.children) : undefined }));
18
19const fromTree = (nodes: TreeNode[]): BinderNode[] =>
20  nodes.map((n) => ({ id: n.id, label: n.label, href: n.href, meta: typeof n.meta === "string" ? n.meta : undefined, children: n.children ? fromTree(n.children) : undefined }));
21
22export function Binder({ nodes, book, current, canEdit }: { nodes: BinderNode[]; book: string; current: string; canEdit: boolean }) {
23  const shown = useMemo(() => toTree(nodes), [nodes]);
24  const [tree, setTree] = useState(shown);
25  // A fresh order from the server (after a move, a save or a refresh) replaces what the tree holds.
26  useEffect(() => setTree(shown), [shown]);
27  const mover = useFetcher<ReorderAnswer>();
28  const navigate = useNavigate();
29  const handled = useRef<unknown>(null);
30  const [problem, setProblem] = useState<string | null>(null);
31
32  useEffect(() => {
33    const answer = mover.data?.reorder;
34    if (mover.state !== "idle" || !answer || handled.current === answer) return;
35    handled.current = answer;
36    if (!answer.ok) {
37      setTree(shown);
38      setProblem(answer.message);
39      return;
40    }
41    setProblem(null);
42    const moved = answer.renames.find((r) => r.from === current);
43    if (moved) void navigate(`/b/${book}/f/${moved.to}`, { replace: true, preventScrollReset: true });
44  }, [mover.state, mover.data, current, book, navigate, shown]);
45
46  const chapter = current.startsWith("chapters/") ? `ch:${current.split("/")[1]}` : null;
47  const expanded = [ROOT.chapters, ...(chapter ? [chapter] : []), ...(current.startsWith("bible/") ? [ROOT.bible, `group:bible-${current.split("/")[1]}`] : []), ...(current.startsWith("outline/") ? [ROOT.outline] : []), ...(current.startsWith("notes/") ? [ROOT.notes] : [])];
48
49  return (
50    <div className="app-stack" data-tight>
51      <Tree
52        nodes={tree}
53        aria-label="Binder"
54        selection="single"
55        defaultSelected={[fileId(current)]}
56        defaultExpanded={expanded}
57        canMove={canEdit ? (move) => canMoveTo(move.id, move.to.parent) : () => false}
58        onMove={
59          canEdit
60            ? (_move, next) => {
61                setTree(next);
62                setProblem(null);
63                void mover.submit({ intent: "reorder", order: JSON.stringify(orderFromTree(fromTree(next))) }, { method: "post", action: `/b/${book}` });
64              }
65            : undefined
66        }
67      />
68      <p role="status" className="cap-muted app-note">
69        {mover.state !== "idle" ? "Saving the new order to Git." : ""}
70      </p>
71      {problem ? <Alert tone="crit">{problem}</Alert> : null}
72      {canEdit ? <p className="cap-muted app-note">Drag a scene or a chapter, or press Alt with an arrow key. The corkboard has buttons for each move.</p> : null}
73    </div>
74  );
75}
76
77/** A site project's binder beside the post editor: its writing by kind, the open item chosen. It only finds and opens. */
78export function SiteBinder({ nodes, current }: { nodes: BinderNode[]; current: string }) {
79  const shown = useMemo(() => toTree(nodes), [nodes]);
80  const open = nodes.find((k) => k.children?.some((c) => c.id === `item:${current}`))?.id;
81  return <Tree nodes={shown} aria-label="Binder" selection="single" defaultSelected={[`item:${current}`]} defaultExpanded={open ? [open] : []} />;
82}