+ {/* Timeline rail: a dot per marker, with the segment between the chosen
+ start and end lit so the selected section reads as one run. */}
+
+
+
+
+
+
+ {/* The rail spans the full row, so the breathing room goes on the button —
+ the line stays continuous while neighbouring rings no longer touch. */}
+
+
+
+
+);
+
+type Props = {
+ /** Newest first — the list renders them in the order given. */
+ markers: Marker[];
+ startMarkerId: string;
+ endMarkerId: string;
+ error: string | null;
+ /** Resolves true once the marker exists, so the input only clears on success. */
+ onAdd: (message: string) => Promise;
+ onSelect: (id: number) => void;
+ onDelete: (id: number) => void;
+ className?: string;
+};
+
+const MarkerList = ({ markers, startMarkerId, endMarkerId, error, onAdd, onSelect, onDelete, className }: Props) => {
+ const [message, setMessage] = useState("");
+ const [busy, setBusy] = useState(false);
+
+ const handleAdd = async () => {
+ if (!message.trim() || busy) return;
+ setBusy(true);
+ if (await onAdd(message.trim())) setMessage("");
+ setBusy(false);
+ };
+
+ // Either of the two may have been picked first, so the lit run is bounded by
+ // whichever indices come first/last rather than by start/end.
+ const startIndex = markers.findIndex((m) => String(m.id) === startMarkerId);
+ const endIndex = markers.findIndex((m) => String(m.id) === endMarkerId);
+ const hasRange = startIndex !== -1 && endIndex !== -1;
+ const rangeFrom = hasRange ? Math.min(startIndex, endIndex) : -1;
+ const rangeTo = hasRange ? Math.max(startIndex, endIndex) : -1;
+ // The rail segment sitting between marker `i` and the one after it.
+ const railSegment = (i: number): RailSegment => {
+ if (i < 0 || i >= markers.length - 1) return "none";
+ return hasRange && i >= rangeFrom && i < rangeTo ? "lit" : "plain";
+ };
+
+ return (
+
+
+ {/* Marker timeline. First on narrow screens, where marking
+ something as it happens beats the action forms for urgency. */}
+
{/* Forefront actions */}
-