Project Docs

Next Fixes

This backlog captures the next implementation fixes after Volume 9 closed at Q450.

These are product and UX improvements, not additional Volume 9 questions.

Navigation And Header

Done: removed the Latest Batch quick card from the sidebar.
Done: removed First Batch and Latest Batch menu options.
Done: replaced Current Volume with Volume 9 Complete.
Done: added a breadcrumb area in the header so users understand where they are inside volume, batch, question, docs, and practice routes.
Done: simplified the theme control into a light/dark toggle.
Done: kept the initial theme based on the system preference without showing System as a selectable option.
Done follow-up: converted the theme control into a compact animated left/right switch.
Done follow-up: removed visible Light/Dark text from the theme switch so it is icon-only.
Done follow-up: softened dark-mode colors and removed remaining hardcoded light card surfaces from the main UI.

Main Menu Direction

Restructure the main menu around high-level learning areas:
- JavaScript
- TypeScript
- Frontend
- Backend
- Python
- future topics as needed
Keep current handbook volumes mapped under the most relevant group.
Make this menu model flexible enough to support backend, Python, or other future learning studios without redesigning navigation again.
Done first slice: sidebar now uses the shipped JavaScript, TypeScript, and Frontend groups.
Done follow-up: future Backend and Python planning is kept in docs/code comments only, not as visible placeholder menu items.

Home And Volume Cards

Fix volume card states so cards do not look permanently hovered.
Done follow-up: reviewed dark-mode card borders, glow, and selected states with variable-based panel surfaces.
Make card status, question count, description, and action spacing consistent.
Done first slice: removed permanent highlighted state from home volume cards and corrected Volume 9 to complete with 75 questions.
Done first slice: added a top user-history card that shows recently covered questions and docs.
Done first slice: user history reads from local reading-progress storage so it persists on the user's machine.
Done first slice: user history can be reset without affecting the content itself.
Done first slice: question pages now foreground scroll progress while reading time continues to record locally in the background.

Last-Minute Prep

Done first slice: expanded last-minute prep coverage beyond Q001-Q075 by auto-filling the remaining question cards from MDX metadata.
Done first slice: made the top question list horizontal and sticky.
Done first slice: synced the horizontal question list with the vertical card scroll position.
Done first slice: horizontal question scrolling moves the vertical question cards.
Done first slice: clicking a top question scrolls the target card into view.
Done first slice: clicked cards flash once for about 3 seconds.
Done first slice: the active horizontal item stays visible while users scroll vertically.

Practice Consoles

Done first slice: JavaScript and TypeScript practice pages now use a wider content area than reading pages.
Done first slice: editor and console panels keep larger equal-height work areas on desktop, then stack with stable heights on smaller screens.
Done first slice: the code-copy button now uses the clearer copy icon.
Done first slice: console copy is labeled as Copy console.
Done first slice: shortcut strip backgrounds now respect dark mode.
Done first slice: added a lightweight React practice console at /practice/react.
Done first slice: React console supports local App component input, JSX/TSX transpilation, render preview, console output, reset, clear, and copy controls.
Done follow-up: React console now includes starter examples for props, derived state, events, conditional rendering, and list rendering.
Done follow-up: React console now caps source length, console entries, and long console messages with visible truncation notices.
Done follow-up: React console now supports local saved snippets with save, load, delete, conflict confirmation, and empty states.
Done follow-up: added PRACTICE_LABS_QA.md for JavaScript, TypeScript, and React manual lab checks.
Done follow-up: added an in-page React sandbox scope note so users know the current render boundary.
Done follow-up: React preview now renders into an iframe document for DOM and style isolation.
Done follow-up: added /practice/compare for side-by-side JavaScript and TypeScript comparison drills.
Done follow-up: added output-question presets linked to relevant handbook question ids.
Done follow-up: added helper tests for console caps, truncation, run-state label, and preset metadata.
Done follow-up: comparison presets can now open directly in the matching JS or TS console with a one-time tab-local transfer.
Done follow-up: JS and TS consoles now show a return panel back to the originating comparison preset after a transfer.
Continue hardening the React console:
- Deepen iframe isolation before supporting broader arbitrary React drills.
- Keep the next iframe pass focused on JS-realm isolation, log forwarding, and clear error messaging.

Existing Pending Items To Keep

Recheck the live custom domain once HTTPS is reachable from the network.
Run final manual browser QA for JavaScript, TypeScript, and React practice ground workflows.
Run saved-snippets QA across JavaScript, TypeScript, dark mode, mobile, tablet, and desktop.
Refresh portfolio screenshots from the live site after the custom domain is reachable.
Decide the first Volume 10 direction.
Consider saved-snippet search, export, and import after the current local workflow is stable.
Add browser-level tests on top of the current helper tests if the practice ground grows further.

Recommended Next Implementation Order

Navigation cleanup and theme toggle simplification.
Volume card visual-state fix.
User-history card.
Last-minute prep sticky synced question rail.
Practice console layout and icon polish.
Basic React console first slice.
Manual browser QA and live-domain verification.
React iframe isolation hardening.
Deep-link comparison preset cards for external notes if needed.