feat: let readers record where they are and how much work it is

The done checkbox now cycles untouched → doing → done, in the order people actually move through. Effort, status and a note are set from the detail sheet. Rows carry chips for what the reader said, and a "tight" or "running out of time" flag when the remaining time no longer covers the effort they recorded. The detail sheet shows the arithmetic behind that rather than just asserting it, and calls it a rough guide. Imports from before this change are mapped forward rather than dropped. Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
2026-08-15 01:49:53 +02:00
parent 2f7e5bdf79
commit 89df140c00
4 changed files with 218 additions and 18 deletions
@@ -2,26 +2,42 @@ import { useEffect } from "react";
 import { gameMeta } from "../../shared/games.ts";
 import { formatAbsolute, formatRemaining } from "../../shared/time.ts";
 import type { RowEvent } from "./EventRow.tsx";
+import { pressure, pressureReason, type Effort } from "../../shared/effort.ts";
+import type { Status } from "../state/useProgress.ts";
+import { ProgressControls } from "./ProgressControls.tsx";
 import { Meter, URGENCY_COLOR } from "./Meter.tsx";

 export function EventDetail({
  row,
  completed,
  ignored,
+  status,
+  effort,
+  note,
  onToggle,
  onIgnore,
+  onStatus,
+  onEffort,
+  onNote,
  onClose,
 }: {
  row: RowEvent;
  completed: boolean;
  ignored: boolean;
+  status: Status | undefined;
+  effort: Effort | undefined;
+  note: string;
  onToggle: (id: string) => void;
  onIgnore: (id: string) => void;
+  onStatus: (id: string, s: Status | undefined) => void;
+  onEffort: (id: string, e: Effort | undefined) => void;
+  onNote: (id: string, n: string) => void;
  onClose: () => void;
 }) {
  const { event, clock } = row;
  const game = gameMeta(event.game);
  const heat = URGENCY_COLOR[clock.urgency];
+  const risk = status === "done" ? "fine" : pressure(effort, clock.msRemaining);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
@@ -85,6 +101,32 @@ export function EventDetail({
          <Field label="Type">{event.type}</Field>
        </dl>

+        {risk !== "fine" && effort !== undefined && clock.msRemaining !== null && (
+          <p
+            className="mt-4 rounded-lg border px-3 py-2 text-xs leading-relaxed"
+            style={{
+              borderColor:
+                risk === "unlikely"
+                  ? "color-mix(in srgb, var(--color-critical) 40%, transparent)"
+                  : "color-mix(in srgb, var(--color-soon) 40%, transparent)",
+              color:
+                risk === "unlikely" ? "var(--color-critical)" : "var(--color-soon)",
+            }}
+          >
+            {pressureReason(effort, clock.msRemaining)} It is a rough guide, not a
+            verdict — you know your own schedule.
+          </p>
+        )}
+
+        <ProgressControls
+          status={status}
+          effort={effort}
+          note={note}
+          onStatus={(s) => onStatus(event.id, s)}
+          onEffort={(e) => onEffort(event.id, e)}
+          onNote={(n) => onNote(event.id, n)}
+        />
+
        {event.endPrecision === "day" && event.endsAt !== null && (
          <p className="mt-3 text-xs leading-relaxed text-faint">
            The source gave a date but no time of day, so this end is accurate to
@@ -5,6 +5,8 @@ import {
  windowCaption,
  type EventClock,
 } from "../../shared/time.ts";
+import { EFFORT, pressure, type Effort } from "../../shared/effort.ts";
+import type { Status } from "../state/useProgress.ts";
 import { Meter, URGENCY_COLOR } from "./Meter.tsx";

 export interface RowEvent {
@@ -15,6 +17,8 @@ export interface RowEvent {
 interface EventRowProps {
  row: RowEvent;
  completed: boolean;
+  status?: Status | undefined;
+  effort?: Effort | undefined;
  /** Only ever true when the reader has chosen to reveal ignored events. */
  ignored?: boolean | undefined;
  onToggle: (id: string) => void;
@@ -25,6 +29,8 @@ interface EventRowProps {
 export function EventRow({
  row,
  completed,
+  status,
+  effort,
  ignored = false,
  onToggle,
  onRestore,
@@ -35,6 +41,9 @@ export function EventRow({
  const heat = URGENCY_COLOR[clock.urgency];

  const caption = windowCaption(clock, Date.now());
+  // Only ever a warning when the reader gave an estimate — inferring one to
+  // justify the warning would be inventing their input.
+  const risk = status === "done" ? "fine" : pressure(effort, clock.msRemaining);

  const countdown = clock.upcoming
    ? `starts in ${formatRemaining(clock.startsMs - Date.now())}`
@@ -95,6 +104,38 @@ export function EventRow({
            </span>
          </div>

+          {(status === "doing" || effort !== undefined || risk !== "fine") && (
+            <div className="mt-1.5 flex flex-wrap items-center gap-1.5">
+              {status === "doing" && (
+                <span className="rounded-[3px] bg-near/15 px-1.5 py-px text-[0.625rem] font-medium text-near">
+                  doing
+                </span>
+              )}
+              {effort !== undefined && (
+                <span className="rounded-[3px] bg-hairline px-1.5 py-px text-[0.625rem] text-muted">
+                  {EFFORT[effort].label.toLowerCase()}
+                </span>
+              )}
+              {risk !== "fine" && (
+                <span
+                  className="rounded-[3px] px-1.5 py-px text-[0.625rem] font-medium"
+                  style={{
+                    background:
+                      risk === "unlikely"
+                        ? "color-mix(in srgb, var(--color-critical) 18%, transparent)"
+                        : "color-mix(in srgb, var(--color-soon) 18%, transparent)",
+                    color:
+                      risk === "unlikely"
+                        ? "var(--color-critical)"
+                        : "var(--color-soon)",
+                  }}
+                >
+                  {risk === "unlikely" ? "running out of time" : "tight"}
+                </span>
+              )}
+            </div>
+          )}
+
          {event.summary !== null && (
            <p className="row-summary mt-1 line-clamp-2 text-[0.8125rem] leading-snug text-muted">
              {event.summary}
@@ -0,0 +1,95 @@
+import { EFFORT_LIST, type Effort } from "../../shared/effort.ts";
+import type { Status } from "../state/useProgress.ts";
+
+const STATUSES: Array<{ id: Status | undefined; label: string }> = [
+  { id: undefined, label: "Not started" },
+  { id: "doing", label: "Doing it" },
+  { id: "done", label: "Done" },
+];
+
+/**
+ * Where the reader is with an event, and how much work they reckon it is.
+ *
+ * Both are optional and both are theirs — nothing is inferred on their behalf.
+ * An event with no effort recorded never gets a "you won't finish this"
+ * warning, because we would be inventing the estimate the warning rests on.
+ */
+export function ProgressControls({
+  status,
+  effort,
+  note,
+  onStatus,
+  onEffort,
+  onNote,
+}: {
+  status: Status | undefined;
+  effort: Effort | undefined;
+  note: string;
+  onStatus: (s: Status | undefined) => void;
+  onEffort: (e: Effort | undefined) => void;
+  onNote: (n: string) => void;
+}) {
+  return (
+    <div className="mt-5 border-t border-hairline pt-4">
+      <p className="eyebrow">Where are you with it?</p>
+      <div className="mt-2 flex flex-wrap gap-1.5">
+        {STATUSES.map((s) => {
+          const on = status === s.id;
+          return (
+            <button
+              key={s.label}
+              type="button"
+              onClick={() => onStatus(s.id)}
+              aria-pressed={on}
+              className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors duration-150 ${
+                on
+                  ? "border-near/70 bg-near/15 text-near"
+                  : "border-hairline text-faint hover:text-muted"
+              }`}
+            >
+              {s.label}
+            </button>
+          );
+        })}
+      </div>
+
+      <p className="eyebrow mt-4">How much work is it?</p>
+      <div className="mt-2 flex flex-wrap gap-1.5">
+        {EFFORT_LIST.map((e) => {
+          const on = effort === e.id;
+          return (
+            <button
+              key={e.id}
+              type="button"
+              // Tapping the current value clears it — the way back from a
+              // wrong guess should not need a separate control.
+              onClick={() => onEffort(on ? undefined : e.id)}
+              aria-pressed={on}
+              title={e.hint}
+              className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors duration-150 ${
+                on
+                  ? "border-soon/70 bg-soon/15 text-soon"
+                  : "border-hairline text-faint hover:text-muted"
+              }`}
+            >
+              {e.label}
+              <span className="ml-1.5 text-[0.6875rem] opacity-70">{e.hint}</span>
+            </button>
+          );
+        })}
+      </div>
+
+      <label className="eyebrow mt-4 block" htmlFor="event-note">
+        Your notes
+      </label>
+      <textarea
+        id="event-note"
+        defaultValue={note}
+        onBlur={(e) => onNote(e.target.value)}
+        rows={2}
+        placeholder="Anything worth remembering — where you got to, what's left."
+        className="mt-2 w-full resize-y rounded-lg border border-hairline bg-ground px-3 py-2 text-sm text-ink placeholder:text-faint focus:border-faint focus:outline-none"
+      />
+    </div>
+  );
+}