fix(web): resolve QueryClient server-to-client error and refactor to React Query

[metacurb]

🐛 Problem

The application was throwing a Next.js error: "Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported." This occurred because the QueryClient class instance was being passed from a server component (layout.tsx) to client components.

Additionally, there was a nested modal issue where clicking "How to Play" in the header would open a modal containing another "How to Play" button.

🔧 Solution

This PR addresses both issues and includes a comprehensive refactor to improve the codebase:

QueryClient Fix

• Created QueryProvider client component wrapper to handle QueryClient instantiation on the client side
• Moved QueryClient from server component to client-side provider
• Fixed Next.js error about passing class instances to Client Components

Modal Fix

• Extracted HowToPlayContent component for reusability
• Fixed Header component to use content directly instead of nested modal
• Eliminated nested modal issue

React Query Migration

• Added useUser hook for centralized user state management
• Added useGameQuery hook for game data fetching with automatic polling
• Migrated game pages from manual state management to React Query hooks
• Improved error handling and loading states across components

UI Component Improvements

• Added reusable icon components (close, eye)
• Created display-name-editor component for user name updates
• Added board-position and game-piece components for game board
• Extracted reusable components from existing code

📋 Changes

• ✅ Fixed QueryClient server-to-client component error
• ✅ Resolved nested modal issue in How to Play
• ✅ Added React Query hooks for data management
• ✅ Created reusable UI components
• ✅ Refactored game pages to use new hook patterns
• ✅ Updated components to work with new data patterns
• ✅ Improved error handling and loading states

🧪 Testing

• Application loads without QueryClient error
• How to Play modal shows content correctly (no nested modals)
• Game pages load and function with new React Query hooks
• User management works with new useUser hook
• All existing functionality preserved

📝 Notes

This refactor significantly improves the codebase by:

• Centralizing data fetching logic in reusable hooks
• Eliminating manual polling in favor of React Query's built-in refetchInterval
• Improving component reusability and maintainability
• Following React Query best practices for data management

---

Note

Adds action history to game APIs and refactors the web app to React Query with a client-side QueryProvider and UI/component extractions.

• API:
  • Game retrieval: GET /games/:id now accepts ?includeHistory=true and returns actionHistory via mapGameToGameResponse.
  • Action history: GamesService.getActionHistory now maps entities to response DTOs; getByIdWithDerivedState accepts includeHistory flag.
  • Controllers: Updated signatures/return types; added ActionHistoryResponse typing; new mappers: map-action-history-to-response.
• Shared DTOs:
  • Added action-history.dto and exported types; extended GameResponse with optional actionHistory.
• Web:
  • React Query: Introduced QueryProvider in app/layout.tsx; added useUser, useGameQuery, useGamesListQuery; migrated pages games/[id] and games to hooks with polling and improved error/loading.
  • API client: api.getGame(id, secret, includeHistory) and typed getActionHistory.
  • UI refactor: Extracted board-position, game-piece, display-name-editor, HowToPlayContent; updated Header to use content directly (fixing nested modal).
• Tests:
  • Adjusted tests and fixtures for new fields and API behaviors.
• Deps:
  • Bumped @tanstack/react-query; added query client setup (lib/query-client).

^{Written by Cursor Bugbot for commit 9c46bbd. This will update automatically on new commits. Configure here.}