feat: sort by what you're partway through

"What runs out first" is the question this app exists for, but it is not
the only one a reader arrives with. The other is "what was I in the
middle of?", and until now the list could not answer it.

Two modes, toggled from the list's own header rather than from settings,
because ordering is something you reach for while looking at a list.
Ticking a day off a daily counts as doing it without the reader also
setting the status — the tick already said so.

Sorting only ever groups. Both modes fall back to endingSoonestFirst
inside a group and live still beats upcoming, so choosing an order can
never cost the reader the deadline order the product is for.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>

src/client/App.tsx

@@ -15,7 +15,8 @@ import { useMarkSet } from "./state/useMarkSet.ts";
 import { useProgress } from "./state/useProgress.ts";
 import { useDailyLog, type DailyLogMap } from "./state/useDailyLog.ts";
 import { usePrefs } from "./state/usePrefs.ts";
-import { clockFor, DAY, endingSoonestFirst, formatRemaining } from "../shared/time.ts";
+import { compareRows, SORT_MODES, type Activity, type SortMode } from "./state/sort.ts";
+import { clockFor, DAY, formatRemaining } from "../shared/time.ts";
 import { dailySummary, isDaily } from "../shared/daily.ts";
 import type { GameId } from "../shared/schema.ts";
 
@@ -70,6 +71,20 @@ export function App() {
   // this question a lot, so keep a cheap shorthand.
   const isDone = (id: string) => prog.progress[id]?.status === "done";
 
+  /**
+   * How far into an event the reader is, for ordering only.
+   *
+   * Ticking a day off a repeating event counts as "doing it" without them
+   * having to also set the status — the tick already said so, and asking twice
+   * is how a sort ends up lying about what you were in the middle of.
+   */
+  const activityOf = (id: string): Activity => {
+    const status = prog.progress[id]?.status;
+    if (status === "done") return "done";
+    if (status === "doing") return "doing";
+    return daily.daysFor(id).length > 0 ? "doing" : "idle";
+  };
+
   /** Today's state for a repeating event, or undefined if it does not repeat. */
   const dailyBadge = (row: RowEvent): DailyBadge | undefined => {
     if (!isDaily(row.event)) return undefined;
@@ -128,12 +143,15 @@ export function App() {
         // — that is the whole point of ignoring one.
         .filter((r) => prefs.showIgnored || ignored.marks[r.event.id] === undefined)
         .filter((r) => prefs.showCompleted || !isDone(r.event.id))
-        .sort(endingSoonestFirst),
+        // Sorting only ever groups: both modes fall back to soonest-ending
+        // inside a group, so choosing one never costs the deadline order.
+        .sort(compareRows(prefs.sort, activityOf)),
     [
       allRows,
       prefs.hiddenGames,
       prefs.showCompleted,
       prefs.showIgnored,
+      prefs.sort,
       prog.progress,
       daily.logs,
       ignored.marks,
@@ -254,6 +272,14 @@ export function App() {
                     )}`
                   : undefined
               }
+              action={
+                visible.length > 1 ? (
+                  <SortControl
+                    value={prefs.sort}
+                    onChange={(sort) => update({ sort })}
+                  />
+                ) : undefined
+              }
             >
               {live.map((row) => (
                 <EventRow
@@ -272,7 +298,19 @@ export function App() {
           )}
 
           {upcoming.length > 0 && (
-            <Section title="Not started yet">
+            <Section
+              title="Not started yet"
+              // The ordering control lives with the first list on the page, so
+              // it is never missing when there is something to order.
+              action={
+                live.length === 0 && upcoming.length > 1 ? (
+                  <SortControl
+                    value={prefs.sort}
+                    onChange={(sort) => update({ sort })}
+                  />
+                ) : undefined
+              }
+            >
               {upcoming.map((row) => (
                 <EventRow
                   key={row.event.id}
@@ -374,18 +412,21 @@ function Section({
   title,
   hint,
   legend,
+  action,
   children,
 }: {
   title: string;
   hint?: string | undefined;
   legend?: boolean | undefined;
+  /** A control that belongs to this section, e.g. how it is ordered. */
+  action?: React.ReactNode | undefined;
   children: React.ReactNode;
 }) {
   return (
     <section className="pt-5">
       <div className="flex items-baseline justify-between gap-3 px-4 pb-2">
         <h2 className="eyebrow">{title}</h2>
-        {hint !== undefined && <p className="text-xs text-faint">{hint}</p>}
+        {action ?? (hint !== undefined && <p className="text-xs text-faint">{hint}</p>)}
       </div>
       {legend === true && <Legend />}
       <ul className="border-t border-hairline">{children}</ul>
@@ -393,6 +434,45 @@ function Section({
   );
 }
 
+/**
+ * Order the list by deadline, or by what the reader is partway through.
+ *
+ * Sits in the list's own header rather than down in settings: ordering is a
+ * thing you reach for while looking at the list, not a preference you go and
+ * configure.
+ */
+function SortControl({
+  value,
+  onChange,
+}: {
+  value: SortMode;
+  onChange: (mode: SortMode) => void;
+}) {
+  return (
+    <div role="group" aria-label="Sort events" className="flex gap-1">
+      {SORT_MODES.map((mode) => {
+        const on = value === mode.id;
+        return (
+          <button
+            key={mode.id}
+            type="button"
+            onClick={() => onChange(mode.id)}
+            aria-pressed={on}
+            title={mode.hint}
+            className={`rounded-full border px-2.5 py-1 text-[0.6875rem] font-medium transition-colors ${
+              on
+                ? "border-ink/60 text-ink"
+                : "border-transparent text-faint hover:text-muted"
+            }`}
+          >
+            {mode.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
 function exportProgress(
   progress: Record<string, unknown>,
   daily: DailyLogMap,

src/client/state/sort.ts

@@ -0,0 +1,49 @@
+import { endingSoonestFirst, type EventClock } from "../../shared/time.ts";
+
+/**
+ * How the list is ordered.
+ *
+ * "ending" is the product's thesis — what runs out first. "doing" answers the
+ * other question a reader arrives with, which is "what was I in the middle
+ * of?", and is a strictly weaker sort: it only groups, and inside every group
+ * the deadline order is preserved.
+ */
+export type SortMode = "ending" | "doing";
+
+export const SORT_MODES: Array<{ id: SortMode; label: string; hint: string }> = [
+  { id: "ending", label: "Ending soonest", hint: "What runs out first" },
+  { id: "doing", label: "Doing first", hint: "What you're partway through" },
+];
+
+/**
+ * What the reader is doing with an event, as far as ordering cares.
+ *
+ * Deliberately coarser than the stored status: ticking a day off a daily
+ * checklist is evidence you are mid-way through something just as much as
+ * setting the status is, and the reader should not have to say it twice.
+ */
+export type Activity = "doing" | "idle" | "done";
+
+const RANK: Record<Activity, number> = { doing: 0, idle: 1, done: 2 };
+
+/**
+ * Comparator for a list of rows.
+ *
+ * Both modes fall back to `endingSoonestFirst`, so an ordering change never
+ * costs the reader the deadline order they rely on — it only decides which
+ * block a row lands in.
+ */
+export function compareRows<T extends { event: { id: string }; clock: EventClock }>(
+  mode: SortMode,
+  activityOf: (id: string) => Activity,
+): (a: T, b: T) => number {
+  if (mode === "ending") return endingSoonestFirst;
+  return (a, b) => {
+    // Live before upcoming, always. You cannot be partway through something
+    // that has not started, so activity must not lift a future event above a
+    // running one.
+    if (a.clock.upcoming !== b.clock.upcoming) return a.clock.upcoming ? 1 : -1;
+    const delta = RANK[activityOf(a.event.id)] - RANK[activityOf(b.event.id)];
+    return delta !== 0 ? delta : endingSoonestFirst(a, b);
+  };
+}

src/client/state/usePrefs.ts

@@ -1,12 +1,15 @@
 import { useCallback, useEffect, useState } from "react";
 import type { GameId, Region } from "../../shared/schema.ts";
 import { guessRegion } from "../../shared/time.ts";
+import type { SortMode } from "./sort.ts";
 import { KEYS, readJson, writeJson } from "./storage.ts";
 
 export interface Prefs {
   region: Region;
   /** Games the reader has switched off. Stored as hidden so a newly added game shows up by default. */
   hiddenGames: GameId[];
+  /** How the list is ordered. Deadline order is the default and the fallback. */
+  sort: SortMode;
   showCompleted: boolean;
   /** Reveal events the reader has ignored, so they can be restored. */
   showIgnored: boolean;
@@ -20,6 +23,7 @@ function defaults(): Prefs {
   return {
     region: guessRegion(),
     hiddenGames: [],
+    sort: "ending",
     showCompleted: true,
     showIgnored: false,
     regionConfirmed: false,