app/components/writing/progress-panel.tsx

Functions

Imports

It imports app/lib/writing/progress.ts. Imported by app/routes/book.tsx.

Source

1// Today's writing on the book page (ruling 6): the words typed today against today's target, the
2// streak, the pace a deadline asks for, the last seven days, and the person's own goal. A day is the
3// local calendar day in this device's time zone, which only the browser knows, so the numbers are
4// worked out after the page loads; until then the panel says it is counting.
5
6import { useEffect, useState } from "react";
7import { Form, Link } from "react-router";
8import { Alert } from "capsomer/react/banner";
9import { Button } from "capsomer/react/button";
10import { Disclosure } from "capsomer/react/disclosure";
11import { Check, Field } from "capsomer/react/field";
12import { Meter } from "capsomer/react/meter";
13import { Panel } from "capsomer/react/panel";
14import { Status } from "capsomer/react/status";
15
16import { dayTotals, pace, recentDays, streak, targetFor, WEEKDAYS, dayKey, type Goal, type Pace, type SaveEntry } from "~/lib/writing/progress";
17
18const n = (value: number) => value.toLocaleString("en-US");
19
20function paceLine(paced: Pace, deadline: string) {
21  if (paced.ok) return `${n(paced.remaining)} words to go by ${deadline}: ${n(paced.perDay)} a day over ${paced.days} writing day${paced.days === 1 ? "" : "s"}.`;
22  switch (paced.reason) {
23    case "no-target":
24      return `No project target yet. Add target: to the title page (book.md) to work out a pace.`;
25    case "no-deadline":
26      return `No deadline yet. Add deadline: (YYYY-MM-DD) to the title page (book.md) to work out a pace.`;
27    case "past":
28      return `The deadline, ${deadline}, has passed.`;
29    case "no-days":
30      return "No writing days are left before the deadline.";
31    case "done":
32      return "The project has reached its target.";
33  }
34}
35
36function dayLabel(day: string, today: string) {
37  if (day === today) return "Today";
38  const weekday = WEEKDAYS[new Date(`${day}T12:00:00Z`).getUTCDay()]!;
39  return `${weekday} ${day.slice(5).replace("-", "/")}`;
40}
41
42export function ProgressPanel({
43  entries,
44  goal,
45  projectTarget,
46  deadline,
47  wordsNow,
48  canEdit,
49  titlePage,
50  error,
51  saved,
52}: {
53  entries: SaveEntry[];
54  goal: Goal;
55  projectTarget: number | null;
56  deadline: string;
57  wordsNow: number;
58  canEdit: boolean;
59  /** The title page's address, where the project target and deadline are set. */
60  titlePage: string;
61  error: string | null;
62  saved: boolean;
63}) {
64  // The device's zone, read once the page is in the browser. The server's render has none.
65  const [zone, setZone] = useState<string | null>(null);
66  const [mode, setMode] = useState(goal.mode);
67  useEffect(() => setZone(Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC"), []);
68  useEffect(() => setMode(goal.mode), [goal.mode]);
69
70  let body;
71  if (!zone) {
72    body = (
73      <p className="cap-muted" role="status">
74        Counting today's words in this device's time zone.
75      </p>
76    );
77  } else {
78    const today = dayKey(new Date(), zone);
79    const totals = dayTotals(entries, zone, goal.allowNegative);
80    const wordsToday = totals.get(today) ?? 0;
81    const paced = pace({ projectTarget, deadline, wordsNow, wordsToday, today, writingDays: goal.writingDays });
82    const target = targetFor(goal, today, paced);
83    const dayOff = !goal.writingDays.includes(new Date(`${today}T12:00:00Z`).getUTCDay());
84    const run = streak(totals, today, target, goal.writingDays);
85    const met = target !== null && wordsToday >= target;
86    const days = recentDays(totals, today, 7, goal.writingDays);
87
88    body = (
89      <div className="app-stack" data-tight>
90        {target !== null ? (
91          <Meter
92            label="Typed today"
93            value={Math.max(0, wordsToday)}
94            max={target}
95            display={`${n(wordsToday)} of ${n(target)}`}
96            valueText={`${n(wordsToday)} of ${n(target)} words typed today.${met ? " Target met." : ""}`}
97            tone={met ? "ok" : undefined}
98            note={met ? "Today's target is met." : `${n(target - wordsToday)} to go today.`}
99          />
100        ) : (
101          <p>
102            <strong>{n(wordsToday)}</strong> word{wordsToday === 1 ? "" : "s"} typed today.{" "}
103            <span className="cap-muted">{dayOff ? "A day off: no target today." : goal.mode === "deadline" ? "No pace to work out yet." : "No daily target set."}</span>
104          </p>
105        )}
106        {met ? <Status tone="ok">Target met</Status> : null}
107        <p>
108          Streak: <strong>{run}</strong> day{run === 1 ? "" : "s"} in a row at the target.
109          {target === null ? <span className="cap-muted"> A streak needs a target.</span> : null}
110        </p>
111        {goal.mode === "deadline" || deadline || projectTarget ? <p className="cap-muted">{paceLine(paced, deadline)}</p> : null}
112        <div className="cap-table-wrap" role="region" aria-labelledby="progress-week" tabIndex={0}>
113          <table className="cap-table">
114            <caption id="progress-week" className="cap-sr-only">
115              Words typed on each of the last seven days
116            </caption>
117            <thead>
118              <tr>
119                <th scope="col">Day</th>
120                <th scope="col" data-num>
121                  Words
122                </th>
123                <th scope="col">Target</th>
124              </tr>
125            </thead>
126            <tbody>
127              {days.map((d) => (
128                <tr key={d.day}>
129                  <th scope="row">{dayLabel(d.day, today)}</th>
130                  <td data-num>{n(d.words)}</td>
131                  <td>{!d.writingDay ? <span className="cap-muted">Day off</span> : target === null ? <span className="cap-muted">None set</span> : d.words >= target ? <Status tone="ok">Met</Status> : d.day === today ? <span className="cap-muted">Not yet</span> : <span className="cap-muted">Missed</span>}</td>
132                </tr>
133              ))}
134            </tbody>
135          </table>
136        </div>
137      </div>
138    );
139  }
140
141  return (
142    <Panel title="Today's writing" src="Typed words only">
143      <div className="app-stack" data-tight>
144        {body}
145        <p className="cap-muted app-note">Pastes, imports and AI drafts you take as your draft do not count. A day runs midnight to midnight on this device.</p>
146        {error ? <Alert tone="crit">{error}</Alert> : saved ? <p role="status">Your target is saved.</p> : null}
147        {canEdit ? (
148          <Disclosure summary="Your target" defaultOpen={Boolean(error)}>
149            <Form method="post" className="app-stack" data-tight>
150              <input type="hidden" name="intent" value="goal" />
151              <fieldset className="app-fieldset">
152                <legend>Set the daily target</legend>
153                <Check type="radio" name="mode" value="daily" label="By hand" checked={mode === "daily"} onChange={() => setMode("daily")} />
154                <Check type="radio" name="mode" value="deadline" label="From the deadline" checked={mode === "deadline"} onChange={() => setMode("deadline")} />
155              </fieldset>
156              <Field label="Words a day" help={mode === "deadline" ? "Used only when you set it by hand." : "Leave empty for no target."}>
157                <input className="cap-input" name="dailyTarget" inputMode="numeric" defaultValue={goal.dailyTarget ?? ""} autoComplete="off" />
158              </Field>
159              <p className="cap-muted app-note">
160                The deadline and the project target are target: and deadline: in the <Link to={titlePage}>title page</Link>.
161              </p>
162              <fieldset className="app-fieldset">
163                <legend>Writing days</legend>
164                <div className="app-days">
165                  {[1, 2, 3, 4, 5, 6, 0].map((d) => (
166                    <Check key={d} name="writingDays" value={String(d)} label={WEEKDAYS[d]!} defaultChecked={goal.writingDays.includes(d)} />
167                  ))}
168                </div>
169              </fieldset>
170              <Check name="allowNegative" value="1" label="Let deletions take a day below zero" defaultChecked={goal.allowNegative} />
171              <div className="app-actions">
172                <Button type="submit">Save my target</Button>
173              </div>
174            </Form>
175          </Disclosure>
176        ) : null}
177      </div>
178    </Panel>
179  );
180}