Add Frontend-owned product roadmap to README

Captures the Frontend UX slices of the cross-service product roadmap:
backlog tracking UI (status chips, filter bar, drag-reorder, game
detail), "what to play next" page, achievement views, public profile
route, friends + compare-backlogs, PWA / mobile, and UX details
(search, optimistic updates, keyboard shortcuts, empty states).
Cross-links to the umbrella roadmap in ToBePlayed-Deployment.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

README.md

@@ -65,3 +65,59 @@ The project has no test runner today. Suggested setup:
 - **Audit `localStorage` usage.** Currently used for `tbp_jwt` (planned to move) and `tbp_dark_mode`. Document any other keys before they accumulate.
 - **API base URL handling.** `VITE_API_URL` covers Auth; Core's base URL is implicit. Make both explicit (e.g. `VITE_AUTH_URL`, `VITE_API_URL`) so dev / prod / preview environments are unambiguous.
 
+## 🎯 Product Roadmap (Frontend-owned slices)
+
+The full cross-service product roadmap lives in `ToBePlayed-Deployment/README.md`. This section lists only the UI / UX slices that land in the Frontend.
+
+### 1. Backlog tracking UI
+
+Today `GameLibrary.jsx` is a paginated grid of synced Steam games — there is no per-game state. Once Core exposes status + notes + rating, the Frontend needs:
+
+- **Status chips** on each game card (`BACKLOG / PLAYING / COMPLETED / DROPPED / ON_HOLD / WISHLIST`) with one-click cycling or a popover for explicit selection.
+- **Status filter bar** above the grid; multi-select; persisted to URL search params so links are shareable and back-button works.
+- **Game detail page** (`GameDetail.jsx` exists — extend it) with rating widget (stars or 1–10), completion date picker, markdown notes editor with preview. Optimistic update on save, server reconciliation on failure.
+- **Drag-to-reorder** within `BACKLOG` for priority. Use a small library (`@dnd-kit/core`) — well-maintained, accessible.
+
+### 2. "What to play next" page
+
+- New route: `/play-next` (or surface from Dashboard).
+- Form: time budget radio (15 min / 1 h / weekend), mood tag multi-select.
+- On submit: call Core's picker endpoint, render 3 cards. "Reroll" button calls again.
+- One-tap "Start playing" sets game status to `PLAYING`.
+
+This page is the single best mobile entry point — design mobile-first.
+
+### 3. Achievement views
+
+Data is already in Core. The Frontend needs:
+
+- Achievement progress ring on each game card + game detail.
+- New route `/achievements` showing library-wide unlocked / total / percent.
+- "Closest to 100%" widget on Dashboard.
+
+### 4. Public profile + sharing
+
+- New route `/u/:username` rendered server-friendly (consider SSR / pre-render for SEO, or at least set proper `<title>` / `<meta>` via `react-router` loaders so link previews work).
+- "Currently playing" + "Recently completed" sections.
+- "Share my profile" button (copies URL).
+- Settings toggle for `profile_public`.
+
+### 5. Friends + compare
+
+- `/friends` page: list, request, accept, remove.
+- "Add friend" search by username (autocomplete against Auth endpoint).
+- "Compare backlogs with X" page: lists games both own, intersected with `BACKLOG` status on either side — i.e. "next co-op night candidates".
+
+### 6. Mobile / PWA
+
+- Verify the SPA is installable as a PWA: manifest, icons (already in `public/`?), service worker via `vite-plugin-pwa`.
+- Test core flows (login, picker, status update) on a real phone, not just devtools. The "what to play tonight" use case is mobile-primary.
+
+### 7. UX details that compound
+
+- **Search**: client-side fuzzy search across library (Fuse.js or similar) on the already-loaded page; server-side search if the library gets large enough that pagination hurts.
+- **Empty states**: every list should have an empty state with a clear next action ("Connect Steam to import games", "No completed games yet — mark one!").
+- **Optimistic updates** for any status / rating / notes change — they should feel instant.
+- **Keyboard shortcuts** for power users (`j/k` to navigate, `s` to set status, `?` to show shortcut list).
+- **i18n** is already wired (`i18next`); make sure every new string lands in the translation files, not hardcoded.
+