feat(filter): focus one game at a time

Switching games on and off says which games you play, and is set once. It's the wrong tool for what a player of four games does while reading — clear one game, move to the next — which cost two taps per game and left the settings panel no longer describing what they play. Focus is a lens over that filter, not a second filter: a bar at the top, above everything it narrows, with a "next game" control that steps through and ends by returning to all. It never touches hiddenGames, and a focus on a game since switched off is ignored rather than obeyed, so it can't strand you on a blank page whose cause is elsewhere. Each chip carries that game's outstanding count, so a game with nothing waiting says so before you visit it. Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
2026-08-16 20:42:42 +02:00
parent 2a7a117705
commit d70720e2af
11 changed files with 350 additions and 24 deletions
@@ -73,9 +73,9 @@ export function Dailies({
    previous.current = { total, complete };
    if (was === null || !allDone) return;
    // Celebrate finishing the last one, and only that. The list also gets
-    // shorter when the reader marks a repeating event done, which can land on
-    // "all complete" without them having ticked anything — a burst there is the
-    // app congratulating them for filtering.
+    // shorter when the reader focuses a single game or marks a repeating event
+    // done, which can land on "all complete" without them having ticked
+    // anything — a burst there is the app congratulating them for filtering.
    if (was.total === total && complete > was.complete) setBurst((n) => n + 1);
  }, [total, complete, allDone]);

@@ -0,0 +1,132 @@
+import { gameMeta } from "../../shared/games.ts";
+import type { GameId } from "../../shared/schema.ts";
+
+/**
+ * One game at a time.
+ *
+ * The settings panel already lets a reader switch games on and off, but that is
+ * a different job: it says which games they play, and it is set once. This is
+ * the thing a reader does *while reading* — clear the deck down to one game,
+ * finish it, move to the next. Doing that with the on/off switches means two
+ * taps per game and a settings panel that no longer describes what they play.
+ *
+ * So focus is a lens, not a setting: it never changes which games are switched
+ * on, "All" is always one tap away, and the rotation ends by returning to All
+ * rather than looping forever.
+ */
+export function GameFocus({
+  games,
+  focus,
+  counts,
+  total,
+  next,
+  onFocus,
+  onAdvance,
+}: {
+  /** Games the reader has switched on, in feed order. */
+  games: GameId[];
+  focus: GameId | null;
+  /** Outstanding rows per game, so a chip says whether it is worth a visit. */
+  counts: Partial<Record<GameId, number>>;
+  total: number;
+  /** Where "next" goes — null means back to all games. */
+  next: GameId | null;
+  onFocus: (game: GameId | null) => void;
+  onAdvance: () => void;
+}) {
+  // With one game there is nothing to focus down to, and the bar would just be
+  // a chip that does nothing.
+  if (games.length < 2) return null;
+
+  return (
+    <section className="border-b border-hairline px-4 py-3">
+      <div className="flex items-baseline justify-between gap-3">
+        <p className="eyebrow">Focus</p>
+        <button
+          type="button"
+          onClick={onAdvance}
+          className="shrink-0 text-[0.6875rem] font-medium text-faint transition-colors hover:text-ink"
+        >
+          {next === null ? "Show all games" : `Next: ${gameMeta(next).short}`}
+          <span aria-hidden> →</span>
+        </button>
+      </div>
+
+      <div
+        role="group"
+        aria-label="Focus on one game"
+        className="scroll-x -mx-4 mt-2 flex gap-1.5 px-4 pb-1"
+      >
+        <Chip
+          label="All"
+          count={total}
+          on={focus === null}
+          hue="var(--color-ink)"
+          onClick={() => onFocus(null)}
+        />
+        {games.map((id) => {
+          const game = gameMeta(id);
+          return (
+            <Chip
+              key={id}
+              label={game.short}
+              ariaLabel={game.name}
+              count={counts[id] ?? 0}
+              on={focus === id}
+              hue={game.hue}
+              // Tapping the focused game backs out to all of them, so the chip
+              // that got you here is also the way back.
+              onClick={() => onFocus(focus === id ? null : id)}
+            />
+          );
+        })}
+      </div>
+    </section>
+  );
+}
+
+/**
+ * A game chip.
+ *
+ * Carries its hue whether or not it is selected — dimmer when it is not — so
+ * the row reads as a set of games at a glance rather than as one coloured chip
+ * among a row of grey ones. The count is what makes it worth tapping: a game
+ * with nothing outstanding says so before you visit it.
+ */
+function Chip({
+  label,
+  ariaLabel,
+  count,
+  on,
+  hue,
+  onClick,
+}: {
+  label: string;
+  ariaLabel?: string | undefined;
+  count: number;
+  on: boolean;
+  hue: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={on}
+      aria-label={`${ariaLabel ?? label}, ${count} outstanding`}
+      className="flex shrink-0 items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors"
+      style={{
+        borderColor: on ? hue : `color-mix(in srgb, ${hue} 30%, transparent)`,
+        color: on ? hue : "var(--color-muted)",
+        background: on
+          ? `color-mix(in srgb, ${hue} 14%, transparent)`
+          : "transparent",
+        // Nothing to do here — still reachable, just not competing for the eye.
+        opacity: count === 0 && !on ? 0.5 : 1,
+      }}
+    >
+      {label}
+      <span className="tnum text-[0.625rem] opacity-70">{count}</span>
+    </button>
+  );
+}
@@ -12,6 +12,7 @@ import { Meter, URGENCY_COLOR } from "./Meter.tsx";
 */
 export function NextUp({
  row,
+  focused,
  onOpen,
 }: {
  /**
@@ -21,6 +22,8 @@ export function NextUp({
   * they have chosen to keep it elsewhere.
   */
  row: RowEvent | null;
+  /** Name of the game being focused on, when the page is narrowed to one. */
+  focused: string | null;
  onOpen: (id: string) => void;
 }) {
  if (row === null) {
@@ -28,8 +31,9 @@ export function NextUp({
      <section className="border-b border-hairline px-4 py-8">
        <p className="eyebrow">Nothing running</p>
        <p className="mt-2 max-w-sm text-sm text-muted">
-          Nothing live and unfinished in the games you have switched on. Turn a
-          game back on below, or check again after the next patch.
+          {focused === null
+            ? "Nothing live and unfinished in the games you have switched on. Turn a game back on below, or check again after the next patch."
+            : `Nothing live and unfinished in ${focused}. Move to the next game, or show all of them.`}
        </p>
      </section>
    );