fix: dim only finished events in the timeline

The bar tested for an entry in the progress store, but an entry appears
there the moment a reader records an effort or a note. Recording "this
looks like a grind" greyed the event out as though it were already done.

Ask whether it is done instead.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
This commit is contained in:
Lucas Winther
2026-08-15 21:16:48 +02:00
co-authored by Claude Opus 5
parent b1df7b2581
commit ad3647bee2
2 changed files with 9 additions and 9 deletions
+1 -6
View File
@@ -260,12 +260,7 @@ export function App() {
)} )}
</> </>
) : ( ) : (
<Timeline <Timeline rows={visible} now={now} onOpen={setOpenId} isDone={isDone} />
rows={visible}
now={now}
onOpen={setOpenId}
completions={prog.progress}
/>
)} )}
<Controls <Controls
+8 -3
View File
@@ -30,12 +30,17 @@ export function Timeline({
rows, rows,
now, now,
onOpen, onOpen,
completions, isDone,
}: { }: {
rows: RowEvent[]; rows: RowEvent[];
now: number; now: number;
onOpen: (id: string) => void; onOpen: (id: string) => void;
completions: Record<string, unknown>; /**
* Asked rather than derived from the progress store: an entry exists there
* the moment a reader records an effort or a note, and dimming a bar for
* that would say "finished" about something they have not started.
*/
isDone: (id: string) => boolean;
}) { }) {
const scroller = useRef<HTMLDivElement>(null); const scroller = useRef<HTMLDivElement>(null);
@@ -119,7 +124,7 @@ export function Timeline({
const clippedStart = clock.startsMs < min; const clippedStart = clock.startsMs < min;
const left = Math.max(x(clock.startsMs), 0); const left = Math.max(x(clock.startsMs), 0);
const right = x(clock.endsMs ?? clock.startsMs + 14 * DAY); const right = x(clock.endsMs ?? clock.startsMs + 14 * DAY);
const done = completions[event.id] !== undefined; const done = isDone(event.id);
return ( return (
<button <button
key={event.id} key={event.id}