feat(games): add the games tab to the library pages by kris1027 · Pull Request #56 · kris1027/BeStats

kris1027 · 2026-10-25T09:26:12Z

What

Adds a GAMES tab to /watchlist, /upcoming and /watched. With ?type=game, those pages list your Want to play, Playing and Finished games. Each card has a cover, a rating badge, a date line, and a remove button with Undo. The tab sits behind a new NEXT_PUBLIC_GAMES_LIBRARY flag, which is off in production.

Why

Implements spec 0027 (scope feature G5). A game's status is stored, not worked out, so each tab is one plain Postgres page (24 rows, exact count) plus one IGDB read for those games. Until G6 or G7 gives people a way to find games, nothing in production leads to one. The flag keeps production from showing half a feature.

Changes

Flag and types

getGamesLibrary() and gamesLibraryEnabled() in lib/env.ts. The first one throws on an invalid value and only LibrarySection calls it. The second treats an invalid value as off, so the navbar never breaks.
LibraryType = MediaType | "game", LibraryPath, parseLibraryTypeParam, libraryTypeForLocation and gameHref in lib/catalog/media-type.ts. MediaType stays tv | movie. New typedHref overloads make typedHref("/search", "game") a compile error, and a @ts-expect-error test proves it.
.env.example and docs/deploy.md describe the flag: unset in Production, on in Preview.

Navbar

On the three library pages the tabs read SHOWS | MOVIES | GAMES, through the new WithLibraryTypedPage and PageMediaType.libraryType. The fallback shown before ?type loads draws all three tabs with none lit.
On a games tab, the Library links carry type=game. The navbar search is hidden (no game search until G7), and the logo never remembers game.

Reading the games

lib/tracking/game-library.ts: getGameLibraryPage makes one counted query on user_game_state, filtered on the session user_id as well as RLS. Each tab has its own order (added_at, started_at, finished_at, then game_id). A page past the end redirects, and PGRST103 is handled. getLibraryGames makes one getGamesByIds call per page. Only an IgdbError counts as failed.
LibrarySection sends game to the new gameLibraryTab. With the flag off, ?type=game shows the existing "That page doesn't exist" panel.

Cards and grid

GameLibraryCard: Want to play shows the IGDB community rating, plus a release pill (date or Date TBA) before release. Playing and Finished show your score if there is one, otherwise the community rating, with a Started or Finished {Mon YYYY} line in UTC (new formatMonthYear). A hidden game keeps its card but has no link. A missing id shows "No longer on IGDB".
GameLibraryGrid: a removal hides the card at once through useOptimistic and offers Undo. Focus moves the way it does on the movie grid. The Undo toast is now a plain showGameUndo function, taken out of useGameUndo so one grid can show a toast per card. It keeps the toast id game-undo-{id}.

States

CatalogFailed({ source }) replaces the body of TmdbFailed and adds a "Couldn't reach IGDB" panel with Retry.
New LibraryErrorBoundary (catchError) wraps each page's streamed section, so an invalid flag or an unexpected error shows a panel under the heading.
Games copy in LIBRARY_COPY: text only empty states (no browse page until G6) and grid labels.
/showcase gains a Game library card section covering every card state.

Docs

Spec 0027 with its verify list, the review, docs/deploy.md, and /sync updates to AGENTS.md and components/AGENTS.md. G5 is done in the games scope; specs 0023 to 0027 move to Accepted.

How to test / verify

Run NEXT_PUBLIC_GAMES_LIBRARY=on pnpm dev:docker and sign in as user-a@example.test.
Open /watchlist?type=game, /upcoming?type=game and /watched?type=game. GAMES should be lit, the search gone, and each game listed once in its tab's order with the right badge and date line.
Remove a card, then press Undo. The card should come back in its old place with its score and dates.
Turn the flag off (or set it to maybe). GAMES should vanish everywhere. ?type=game should show "That page doesn't exist" (with maybe, the library error panel instead).
The full step list is in docs/specs/0027-games-library-pages/verify.md.
Before pushing: every commit passes pnpm typecheck and pnpm lint:ci, and pnpm test passes at the tip (197 files, 3384 tests).

Risk & rollout

No migration and no database.types.ts change, so there's no supabase db push. The feature is off in production because NEXT_PUBLIC_GAMES_LIBRARY is unset there. It needs to be on in Vercel Preview. Because the flag is inlined at build time, changing it takes a redeploy. Rolling back means unsetting the flag, or reverting.

Residual risks accepted in review (docs/reviews/2026-10-25-feat-games-library-pages.md):

The month line uses UTC, so it can be a month off near a month boundary.
An error that isn't an IgdbError goes to the generic boundary without a logTrackingEvent line.
The search placeholder flashes once on a games tab while ?type loads.