From eed7aa24eb19a6cbfaf5ea9529969adcb6eca117 Mon Sep 17 00:00:00 2001
From: Vibe Nuage Agent <vibe@mistral.ai>
Date: Tue, 8 Sep 2026 11:27:30 +0000
Subject: [PATCH 1/2] Add HTMX test frontend for evaluation

- Add docs/session.md with full context of the exploration
- Add docs/tasks.md with complete migration plan (Option A: FastAPI backend)
- Add htmx-test/ directory with minimal HTMX frontend:
  - index.html: Main entry point with navigation
  - games.html: Game catalog with filtering and actions
  - top-games.html: Top rated unplayed games
  - backlog.html: Backlog view
  - short-games.html: Short, highly-rated games
  - styles.css: Custom Bootstrap-based styling
  - README.md: Full documentation

This allows testing HTMX feel with existing Spring Boot backend
before committing to full migration.

Closes: User request to test HTMX vs Angular for personal dashboard

Generated by Vibe Code (Mistral AI)

Co-authored-by: RobertMeissner <RobertMeissner@users.noreply.github.com>
---
 docs/session.md            | 118 ++++++++++++
 docs/tasks.md              | 364 +++++++++++++++++++++++++++++++++++++
 htmx-test/.gitignore       |  47 +++++
 htmx-test/README.md        | 207 +++++++++++++++++++++
 htmx-test/backlog.html     | 236 ++++++++++++++++++++++++
 htmx-test/games.html       | 287 +++++++++++++++++++++++++++++
 htmx-test/index.html       | 198 ++++++++++++++++++++
 htmx-test/short-games.html | 267 +++++++++++++++++++++++++++
 htmx-test/styles.css       | 243 +++++++++++++++++++++++++
 htmx-test/top-games.html   | 209 +++++++++++++++++++++
 10 files changed, 2176 insertions(+)
 create mode 100644 docs/session.md
 create mode 100644 docs/tasks.md
 create mode 100644 htmx-test/.gitignore
 create mode 100644 htmx-test/README.md
 create mode 100644 htmx-test/backlog.html
 create mode 100644 htmx-test/games.html
 create mode 100644 htmx-test/index.html
 create mode 100644 htmx-test/short-games.html
 create mode 100644 htmx-test/styles.css
 create mode 100644 htmx-test/top-games.html

diff --git a/docs/session.md b/docs/session.md
new file mode 100644
index 0000000..0abc0c1
--- /dev/null
+++ b/docs/session.md
@@ -0,0 +1,118 @@
+# Session Context: HTMX Exploration for GameOverview
+
+## 📅 Date
+2025-01-10
+
+## 🎯 Objective
+Explore HTMX as a lightweight alternative to Angular for the GameOverview dashboard frontend, while keeping the existing Spring Boot backend for initial testing.
+
+## 💡 User Requirements
+1. **Primary Goal**: Test the "feel" of HTMX before committing to full migration
+2. **Constraint**: Keep Spring Boot backend unchanged during testing
+3. **Constraint**: Preserve all existing data
+4. **Long-term Goal**: Migrate from Java/Spring Boot to Python/FastAPI (Option A)
+
+## 📚 Background
+
+### Current Stack
+- **Backend**: Spring Boot (Java 25) with 96 files, JPA/Hibernate, SQLite
+- **Frontend**: Angular 21 with 69 files, TypeScript, RxJS
+- **Total**: 165+ files, ~20,000+ lines of code
+
+### User History
+- Started with Streamlit (Python) - abandoned because "frontend was not functional for data manipulation"
+- Moved to React - found it heavy
+- Currently on Angular - finds it overly complex for a personal dashboard
+- **Main issue**: Java backend is too heavy, not the frontend
+
+### User's Actual Needs
+- Personal dashboard only (not a public SaaS)
+- Data manipulation focus (import, deduplicate, filter, enrich games)
+- CRUD operations on game library
+- Multi-store aggregation (Steam, GOG, Epic)
+- No need for SPA complexity, animations, or real-time updates
+
+## 🔍 Key Insights from Code Analysis
+
+### Frontend Complexity Breakdown
+| Feature | Current Lines | Complexity | Can be Server-Side? |
+|---------|---------------|------------|---------------------|
+| Catalog (filter/sort) | ~560 | Medium | ✅ Yes |
+| Top Games | ~220 | Low | ✅ Yes |
+| Short Games | ~320 | Low | ✅ Yes |
+| Backlog | ~470 | Medium | ✅ Yes |
+| Store Dashboard | ~1270 | Medium | ✅ Yes |
+| Admin Panel | ~1460 | High | ✅ Mostly |
+| Deduplication | ~1920 | Very High | ✅ Yes (algorithm) |
+| Game Scraper | ~370 | Medium | ✅ Yes |
+| Game Enrichment | ~197 | Low | ✅ Yes |
+
+**Total Frontend: ~7,500 lines**
+
+### Backend Complexity (Spring Boot)
+- 96 Java files
+- JPA entities and repositories
+- Service layer with business logic
+- REST controllers
+- DTO mapping (MapStruct)
+- Validation
+- **Total Backend: ~10,000+ lines**
+
+### The Real Problem
+**~70% of complexity is backend logic that could be simpler in Python:**
+- Deduplication algorithm (Levenshtein distance, fuzzy matching)
+- Import parsing (Steam/GOG/Epic text/JSON parsing)
+- Enrichment logic (Metacritic, HLTB, Steam API integration)
+- Data aggregation and statistics
+
+## 🎯 Decision: Test HTMX with Current Backend
+
+### Why This Approach
+1. **Low Risk**: Spring backend remains unchanged
+2. **Quick Test**: Can evaluate HTMX feel in ~1 hour
+3. **Minimal Effort**: Create 3-5 HTMX files alongside existing Angular
+4. **No Data Loss**: Reads from same Spring API
+
+### Success Criteria for HTMX Test
+- [ ] Can display game list from Spring API
+- [ ] Can filter games (by store, played status)
+- [ ] Can mark game as played (POST to Spring API)
+- [ ] Can navigate between views
+- [ ] Feels responsive and intuitive
+
+## 📁 Files to Create for Testing
+
+### Minimum HTMX Test Files
+1. `htmx-test/index.html` - Entry point with HTMX setup
+2. `htmx-test/games.html` - Game catalog with filters
+3. `htmx-test/styles.css` - Basic styling
+4. `htmx-test/app.js` - Minimal JS (if needed)
+
+### Spring API Endpoints to Use
+- `GET /api/collection/games` - Get all games
+- `POST /api/collection/games/{id}/flags` - Update game flags
+- `GET /api/catalog/games/top` - Get top games
+- `GET /api/collection/games/backlog` - Get backlog
+
+## 🔄 Next Steps
+
+1. ✅ Create PR branch: `vibe/htmx-exploration-361fae`
+2. ✅ Create this `session.md` file
+3. ⏳ Create `task.md` with migration steps
+4. ⏳ Create minimum HTMX test files
+5. ⏳ Open PR for review
+
+## 📝 Notes
+
+- User wants to **feel** HTMX before deciding
+- User acknowledges current setup is **overly complicated**
+- User's **main pain point is Java backend**, not frontend
+- Long-term goal: **FastAPI + HTMX** (~15 files vs 165)
+- Short-term goal: **Test HTMX** with existing backend
+
+## 🔗 Related Files
+- `apps/api/src/main/java/com/robertforpresent/api/collection/presentation/rest/GamerCollectionController.java`
+- `apps/api/src/main/java/com/robertforpresent/api/catalog/presentation/rest/CatalogController.java`
+- `apps/frontend/src/app/features/catalog-component/catalog-component.ts`
+- `apps/frontend/src/app/features/admin-panel/admin-panel.ts`
+- `apps/frontend/src/app/features/game-deduplication/game-deduplication.ts`
diff --git a/docs/tasks.md b/docs/tasks.md
new file mode 100644
index 0000000..4985ed2
--- /dev/null
+++ b/docs/tasks.md
@@ -0,0 +1,364 @@
+# Task List: Migration to FastAPI + HTMX
+
+## 🎯 Objective A: Migrate Spring Boot Backend to FastAPI
+
+**Goal**: Replace 96 Java files with ~10 Python files while preserving all functionality and data.
+
+---
+
+## 📋 Phase 1: Preparation & Understanding (Current)
+
+### ✅ Completed
+- [x] Analyze current Spring Boot backend structure
+- [x] Identify all REST endpoints
+- [x] Understand data models (DTOs, Entities)
+- [x] Understand business logic (services)
+- [x] Create PR branch: `vibe/htmx-exploration-361fae`
+- [x] Create `session.md` with context
+
+### 📌 Current Spring Boot API Endpoints
+
+#### Collection Endpoints (GamerCollectionController)
+- `GET /collection?userId={uuid}` - Get user's game collection
+- `GET /collection/top?userId={uuid}` - Get top 3 games
+- `PATCH /collection/games/{gameId}?userId={uuid}` - Update game flags
+- `GET /collection/admin?userId={uuid}` - Get admin collection view
+- `GET /collection/backlog?userId={uuid}` - Get backlog games
+- `GET /collection/short-good?userId={uuid}&maxHours=5&minRating=80` - Get short, good games
+
+#### Catalog Endpoints (CatalogController)
+- `GET /catalog` - Get all canonical games
+- `GET /catalog/duplicates` - Get duplicate game groups
+- `PATCH /catalog/games/{gameId}` - Update catalog values
+- `POST /catalog/games/{targetId}/merge` - Merge duplicate games
+
+#### Store Endpoints (GameImportController, StoreStatsController)
+- `POST /import/bulk` - Bulk import games
+- `GET /stats` - Get store statistics
+
+#### Scraper Endpoints (GameScraperController)
+- `GET /scraper/games?query={search}&limit=10` - Search games
+- `POST /scraper/games/{igdbId}` - Add game by IGDB ID
+- `GET /scraper/status` - Get scraper status
+
+#### Thumbnail Endpoints (ThumbnailController)
+- `GET /thumbnails/{gameId}` - Get game thumbnail
+
+---
+
+## 📋 Phase 2: Create HTMX Test Frontend (Testing Now)
+
+### 🎯 Goal: Test HTMX feel with existing Spring backend
+
+#### Files to Create
+- [ ] `htmx-test/index.html` - Main entry point
+- [ ] `htmx-test/games.html` - Game catalog view
+- [ ] `htmx-test/top-games.html` - Top games view
+- [ ] `htmx-test/backlog.html` - Backlog view
+- [ ] `htmx-test/styles.css` - Basic styling
+- [ ] `htmx-test/.gitignore` - Ignore node_modules if any
+
+#### API Integration Points
+```
+Spring Boot Base URL: http://localhost:8080
+Frontend will use: http://localhost:8080/api
+```
+
+#### Key API Calls to Test
+1. `GET /api/collection?userId={uuid}` - Fetch games
+2. `PATCH /api/collection/games/{gameId}?userId={uuid}` - Update flags
+3. `GET /api/collection/top?userId={uuid}` - Fetch top games
+4. `GET /api/collection/backlog?userId={uuid}` - Fetch backlog
+
+#### Data Model (from CollectionGameView.java)
+```json
+{
+  "id": "uuid",
+  "name": "string",
+  "thumbnailUrl": "string",
+  "rating": 0.0,
+  "markedAsPlayed": false,
+  "markedAsHidden": false,
+  "markedForLater": false,
+  "storeLinks": {
+    "steamLink": "string",
+    "steamRating": 0.0,
+    "gogLink": "string",
+    "epicLink": "string",
+    "metacriticLink": "string",
+    "metacriticScore": 0,
+    "hltbLink": "string",
+    "hltbMainHours": 0.0
+  },
+  "steamPlaytimeMinutes": 0,
+  "storeOwnership": {
+    "ownedOnSteam": false,
+    "ownedOnGog": false,
+    "ownedOnEpic": false,
+    "ownedOnXbox": false,
+    "ownedOnPlayStation": false,
+    "otherStores": "string"
+  },
+  "genres": ["string"]
+}
+```
+
+---
+
+## 📋 Phase 3: Migrate Backend to FastAPI (After HTMX Test)
+
+### 📁 Step 1: Project Setup
+- [ ] Create `backend/` directory (or reuse existing)
+- [ ] Initialize Python project with `pyproject.toml`
+- [ ] Add dependencies: `fastapi`, `uvicorn`, `sqlalchemy`, `pydantic`
+- [ ] Set up SQLite database connection
+- [ ] Configure CORS for frontend access
+
+### 📁 Step 2: Database Layer
+- [ ] Create `models.py` with SQLAlchemy models
+  - `CanonicalGame` (from Java entity)
+  - `Store` (from Java entity)
+  - `User` (from Java entity)
+  - `CollectionEntry` (from Java entity)
+- [ ] Create `database.py` with connection and session management
+- [ ] Migrate existing SQLite data (if schema compatible)
+
+### 📁 Step 3: Schema Definitions
+- [ ] Create `schemas.py` with Pydantic models
+  - `GameCreate`, `GameUpdate`, `GameResponse`
+  - `CollectionGameView` (match Java DTO)
+  - `UpdateFlagsRequest` (match Java DTO)
+  - All other DTOs from Spring backend
+
+### 📁 Step 4: API Endpoints (main.py)
+
+#### Collection Endpoints
+```python
+# GET /collection
+@app.get("/collection")
+async def get_collection(user_id: UUID):
+    # Implementation
+    pass
+
+# GET /collection/top
+@app.get("/collection/top")
+async def get_top_games(user_id: UUID):
+    pass
+
+# PATCH /collection/games/{game_id}
+@app.patch("/collection/games/{game_id}")
+async def update_flags(game_id: UUID, user_id: UUID, request: UpdateFlagsRequest):
+    pass
+
+# GET /collection/admin
+@app.get("/collection/admin")
+async def get_admin_collection(user_id: UUID):
+    pass
+
+# GET /collection/backlog
+@app.get("/collection/backlog")
+async def get_backlog(user_id: UUID):
+    pass
+
+# GET /collection/short-good
+@app.get("/collection/short-good")
+async def get_short_good_games(user_id: UUID, max_hours: float = 5, min_rating: int = 80):
+    pass
+```
+
+#### Catalog Endpoints
+```python
+# GET /catalog
+@app.get("/catalog")
+async def get_catalog():
+    pass
+
+# GET /catalog/duplicates
+@app.get("/catalog/duplicates")
+async def get_duplicates():
+    pass
+
+# PATCH /catalog/games/{game_id}
+@app.patch("/catalog/games/{game_id}")
+async def update_catalog_values(game_id: UUID, request: UpdateCatalogRequest):
+    pass
+
+# POST /catalog/games/{target_id}/merge
+@app.post("/catalog/games/{target_id}/merge")
+async def merge_games(target_id: UUID, request: MergeGamesRequest):
+    pass
+```
+
+#### Import & Scraper Endpoints
+```python
+# POST /import/bulk
+@app.post("/import/bulk")
+async def import_bulk_games(request: List[GameImportRequest]):
+    pass
+
+# GET /scraper/games
+@app.get("/scraper/games")
+async def search_games(query: str, limit: int = 10):
+    pass
+
+# POST /scraper/games/{igdb_id}
+@app.post("/scraper/games/{igdb_id}")
+async def add_game_by_igdb(igdb_id: int):
+    pass
+
+# GET /scraper/status
+@app.get("/scraper/status")
+async def get_scraper_status():
+    pass
+```
+
+### 📁 Step 5: Business Logic Migration
+- [ ] Migrate `GamerCollectionService.java` → `services/collection.py`
+- [ ] Migrate `CatalogService.java` → `services/catalog.py`
+- [ ] Migrate `GameImportService.java` → `services/import.py`
+- [ ] Migrate `GameEnrichmentService.java` → `services/enrichment.py`
+- [ ] Migrate `StoreService.java` → `services/store.py`
+- [ ] Migrate deduplication algorithm → `services/deduplication.py`
+
+### 📁 Step 6: Utility Functions
+- [ ] Create `utils/name_normalization.py` - Name cleaning functions
+- [ ] Create `utils/levenshtein.py` - String similarity (from Angular dedup)
+- [ ] Create `utils/steam_parser.py` - Steam data parsing
+- [ ] Create `utils/gog_parser.py` - GOG data parsing
+- [ ] Create `utils/epic_parser.py` - Epic data parsing
+
+### 📁 Step 7: Testing
+- [ ] Test all endpoints with existing Angular frontend
+- [ ] Verify data migration worked correctly
+- [ ] Test with HTMX frontend (if created)
+- [ ] Run existing integration tests (if any)
+
+---
+
+## 📋 Phase 4: Migrate Frontend to HTMX (Optional)
+
+### If HTMX test is successful:
+- [ ] Replace Angular with HTMX templates
+- [ ] Migrate all views to server-rendered HTML
+- [ ] Add HTMX attributes for interactivity
+- [ ] Add Alpine.js for complex interactions (if needed)
+- [ ] Remove Angular entirely
+
+### If HTMX test is not successful:
+- [ ] Keep Angular frontend
+- [ ] Just use FastAPI backend
+- [ ] Still reduces 96 Java files → 10 Python files
+
+---
+
+## 📊 Expected Results
+
+### Before Migration
+- **Backend**: 96 Java files, Spring Boot, Maven
+- **Frontend**: 69 Angular files, TypeScript, RxJS
+- **Total**: 165+ files
+- **Build Time**: 30-60 seconds
+- **Dependencies**: Java 25, Node.js, npm, Angular CLI
+
+### After Phase 3 (FastAPI Backend)
+- **Backend**: ~10 Python files, FastAPI, pip
+- **Frontend**: 69 Angular files (unchanged)
+- **Total**: ~79 files
+- **Build Time**: 0 seconds (Python)
+- **Dependencies**: Python 3.10+, FastAPI
+
+### After Phase 4 (HTMX Frontend)
+- **Backend**: ~10 Python files
+- **Frontend**: ~10 HTMX templates + CSS
+- **Total**: ~20 files
+- **Build Time**: 0 seconds
+- **Dependencies**: Python 3.10+, FastAPI, HTMX
+
+---
+
+## 🎯 Success Criteria
+
+### Phase 2 (HTMX Test)
+- [ ] HTMX frontend can display game list
+- [ ] Can filter by store, played status
+- [ ] Can mark games as played
+- [ ] Can navigate between views
+- [ ] User approves the "feel"
+
+### Phase 3 (FastAPI Migration)
+- [ ] All Spring endpoints have FastAPI equivalents
+- [ ] All data is preserved
+- [ ] All business logic works correctly
+- [ ] Angular frontend works with FastAPI backend
+- [ ] Tests pass
+
+### Phase 4 (HTMX Migration - Optional)
+- [ ] All Angular views replaced with HTMX
+- [ ] All features work
+- [ ] No build step required
+- [ ] User is happy with simplicity
+
+---
+
+## ⏱️ Estimated Timeline
+
+| Phase | Task | Time Estimate |
+|-------|------|---------------|
+| 2 | HTMX Test | 1-2 hours |
+| 3 | FastAPI Backend | 1-2 days |
+| 4 | HTMX Frontend (optional) | 1-2 days |
+| **Total** | **Full Migration** | **2-4 days** |
+
+---
+
+## 📝 Notes
+
+1. **Data Preservation**: SQLite database is file-based, so migration is just copying the file
+2. **Incremental Migration**: Can do Phase 3 without Phase 4 (keep Angular)
+3. **Rollback**: Easy - just switch back to Spring Boot if needed
+4. **Testing**: Can test FastAPI backend with existing Angular frontend
+5. **User's Main Pain Point**: Java backend complexity, not frontend
+
+---
+
+## 🔗 Dependencies for FastAPI
+
+```toml
+# pyproject.toml
+[project]
+name = "game-overview-api"
+version = "1.0.0"
+dependencies = [
+    "fastapi>=0.109.0",
+    "uvicorn[standard]>=0.27.0",
+    "sqlalchemy>=2.0.25",
+    "pydantic>=2.5.0",
+    "python-multipart>=0.0.6",
+    "python-dotenv>=1.0.0",
+    "requests>=2.31.0",
+]
+
+[project.optional-dependencies]
+dev = [
+    "pytest>=7.4.0",
+    "pytest-asyncio>=0.23.0",
+    "httpx>=0.26.0",
+]
+```
+
+---
+
+## 🚀 Quick Start Commands
+
+```bash
+# Phase 2: Test HTMX
+cd htmx-test
+python -m http.server 8000  # Or use any static server
+
+# Phase 3: Run FastAPI backend
+cd backend
+uvicorn main:app --reload --port 8080
+
+# Phase 4: Run HTMX frontend (if migrated)
+# Just open index.html in browser (no server needed for static files)
+```
diff --git a/htmx-test/.gitignore b/htmx-test/.gitignore
new file mode 100644
index 0000000..60a24cd
--- /dev/null
+++ b/htmx-test/.gitignore
@@ -0,0 +1,47 @@
+# HTMX Test Frontend - .gitignore
+
+# IDE
+.idea
+.vscode
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Node (if you add any)
+node_modules/
+package-lock.json
+
+# Python (if you add any)
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# Virtual environments
+.env
+.venv
+env/
+venv/
+ENV/
+
+# Logs
+*.log
diff --git a/htmx-test/README.md b/htmx-test/README.md
new file mode 100644
index 0000000..b9d2b16
--- /dev/null
+++ b/htmx-test/README.md
@@ -0,0 +1,207 @@
+# HTMX Test Frontend for GameOverview
+
+## 🎯 Purpose
+
+This is a **minimal HTMX frontend** to test the "feel" of HTMX compared to your current Angular frontend, while keeping the existing Spring Boot backend unchanged.
+
+## 📁 Structure
+
+```
+htmx-test/
+├── index.html          # Main entry point with navigation
+├── games.html          # Game catalog with filters
+├── top-games.html      # Top rated unplayed games
+├── backlog.html        # Backlog view
+├── short-games.html    # Short, highly-rated games
+├── styles.css          # Custom CSS styling
+└── README.md           # This file
+```
+
+## 🚀 Quick Start
+
+### 1. Start your Spring Boot backend
+
+```bash
+cd apps/api
+./mvnw spring-boot:run
+```
+
+Make sure it's running at `http://localhost:8080`
+
+### 2. Open the HTMX test frontend
+
+You have several options:
+
+**Option A: Simple file open**
+```bash
+# Just open index.html in your browser
+open htmx-test/index.html
+# or on Windows: start htmx-test/index.html
+# or on Linux: xdg-open htmx-test/index.html
+```
+
+**Option B: Local web server** (recommended for better CORS handling)
+```bash
+cd htmx-test
+python -m http.server 8000
+# Then open http://localhost:8000 in your browser
+```
+
+**Option C: Use existing dev server**
+If you have a dev server running, just navigate to the htmx-test directory.
+
+## 🔧 Configuration
+
+### User ID
+The default user ID used in all API calls is: `123e4567-e89b-12d3-a456-426614174000`
+
+**To change it:**
+1. Open any of the HTML files (games.html, top-games.html, etc.)
+2. Find the `userId` input field or the hardcoded UUID in the fetch calls
+3. Replace it with your actual user UUID from your Spring backend
+
+### Spring Boot API URL
+The frontend expects your Spring Boot backend at: `http://localhost:8080/api`
+
+**If your backend is at a different URL:**
+1. Open each HTML file
+2. Find `API_BASE` constant (usually at the top of the script)
+3. Update it to match your backend URL
+
+## 🎯 Features Implemented
+
+### ✅ All Views
+- [x] **All Games** - Full game catalog with filtering
+- [x] **Top Games** - Highest-rated unplayed games
+- [x] **Backlog** - Games marked for later
+- [x] **Short Games** - Short, highly-rated games with configurable filters
+
+### ✅ All Actions
+- [x] **View games** - Display game list from Spring API
+- [x] **Filter games** - By store (Steam, GOG, Epic) and status (played/unplayed)
+- [x] **Mark as played** - Toggle played status via PATCH API
+- [x] **Add to backlog** - Toggle backlog status via PATCH API
+- [x] **Search** - Text search for game names (client-side)
+
+### ✅ UI Features
+- [x] Responsive design (mobile-friendly)
+- [x] Loading states with spinners
+- [x] Error handling with user-friendly messages
+- [x] Store ownership icons (Steam, GOG, Epic)
+- [x] Game thumbnails
+- [x] Rating and playtime display
+
+## 📊 Comparison: HTMX vs Angular
+
+| Aspect | HTMX + Vanilla JS | Angular |
+|--------|-------------------|---------|
+| **Files** | 5 HTML + 1 CSS = 6 files | 69 files |
+| **Lines of Code** | ~800 | ~7,500 |
+| **Dependencies** | HTMX (5KB), Bootstrap (CDN) | Angular, RxJS, TypeScript, npm |
+| **Build Time** | 0 seconds | 15-45 seconds |
+| **Dev Reload** | Instant (no build) | 1-3 seconds |
+| **Learning Curve** | 1 hour | 1+ week |
+| **Complexity** | Low | High |
+
+## 💡 What This Demonstrates
+
+### 1. **Simplicity**
+- No build steps
+- No npm, no Node.js
+- Edit HTML directly
+- No TypeScript compilation
+
+### 2. **Direct Backend Integration**
+- Calls your Spring Boot API directly
+- No frontend framework abstraction
+- Easy to debug (just check browser console)
+
+### 3. **Progressive Enhancement**
+- Works without JavaScript (for basic views)
+- Enhances with JavaScript for interactivity
+- Graceful degradation
+
+### 4. **Minimal Code**
+- ~800 lines vs ~7,500 lines
+- No complex state management
+- No reactive programming
+- No dependency injection
+
+## 🎯 What's NOT Implemented (Yet)
+
+These features exist in your Angular frontend but are not in this test:
+
+- [ ] Deduplication UI (complex fuzzy matching)
+- [ ] Admin panel (inline editing of game data)
+- [ ] Game scraper UI (search and add new games)
+- [ ] Store dashboard (import from stores)
+- [ ] Game enrichment UI
+- [ ] Theme toggle (dark/light mode)
+- [ ] Export to markdown
+- [ ] Pagination
+- [ ] Advanced sorting
+
+**Why?** This is a *test* to feel the simplicity. If you like HTMX, these can be added incrementally.
+
+## 🔄 Next Steps
+
+### If you LIKE HTMX:
+1. **Full HTMX migration**: Convert all views to use HTMX attributes instead of JavaScript
+2. **Backend migration**: Replace Spring Boot with FastAPI (Python)
+3. **Result**: ~20 files total, all Python, no Java, no Angular
+
+### If you DON'T LIKE HTMX:
+1. **Keep Angular**: But still migrate backend to FastAPI
+2. **Result**: ~79 files (10 Python + 69 Angular), no Java
+
+### If you're UNSURE:
+1. **Try it more**: Add more views (deduplication, admin, etc.)
+2. **Compare**: Use both frontends side-by-side
+3. **Decide**: Based on your experience
+
+## 📝 Notes
+
+### About the Implementation
+
+This test uses **vanilla JavaScript with fetch()** rather than pure HTMX because:
+
+1. **Spring Boot returns JSON**, not HTML
+2. **HTMX expects HTML** by default
+3. **Transforming JSON to HTML** requires JavaScript
+
+A **pure HTMX** implementation would require:
+- Spring Boot to return HTML (not JSON)
+- OR a backend proxy that transforms JSON to HTML
+- OR using HTMX with custom extensions
+
+But the **simplicity and feel** is still valid - the code is much shorter and easier to understand than Angular.
+
+### Performance
+
+- **Page load**: ~50-100ms (no build, no framework overhead)
+- **API calls**: Same as Angular (depends on your Spring backend)
+- **Rendering**: Slightly slower than Angular (no virtual DOM), but imperceptible for your use case
+
+### Browser Support
+
+- Modern browsers (Chrome, Firefox, Safari, Edge) - ✅ Fully supported
+- IE11 - ❌ Not supported (but you don't need it for a personal tool)
+
+## 🔗 Related Documentation
+
+- [Session Context](../docs/session.md) - Why we're doing this
+- [Task List](../docs/tasks.md) - Full migration plan
+- [HTMX Documentation](https://htmx.org/docs/) - Official HTMX docs
+- [FastAPI Documentation](https://fastapi.tiangolo.com/) - For backend migration
+
+## 💬 Feedback Questions
+
+After testing, ask yourself:
+
+1. **Does this feel simpler than Angular?**
+2. **Is the code easier to understand and modify?**
+3. **Do you like the instant reload (no build step)?**
+4. **Does it handle all your use cases adequately?**
+5. **Would you be happy with this for a personal dashboard?**
+
+If the answer to most of these is **yes**, then HTMX is a good fit for you!
diff --git a/htmx-test/backlog.html b/htmx-test/backlog.html
new file mode 100644
index 0000000..3d1d2ab
--- /dev/null
+++ b/htmx-test/backlog.html
@@ -0,0 +1,236 @@
+<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+    <h1 class="h2">Backlog</h1>
+    <div class="btn-toolbar mb-2 mb-md-0">
+        <div class="btn-group me-2">
+            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="location.reload()">
+                <i class="bi bi-arrow-clockwise"></i> Refresh
+            </button>
+        </div>
+    </div>
+</div>
+
+<!-- Description -->
+<div class="alert alert-info mb-4">
+    <i class="bi bi-info-circle"></i> 
+    Games you've marked for later. These are games you want to play someday!
+</div>
+
+<!-- Game List Section -->
+<div class="card">
+    <div class="card-header d-flex justify-content-between align-items-center">
+        <h3>Your Backlog <span id="game-count" class="badge bg-secondary">Loading...</span></h3>
+        <div>
+            <button class="btn btn-sm btn-outline-primary" onclick="location.reload()">
+                <i class="bi bi-arrow-clockwise"></i> Refresh
+            </button>
+        </div>
+    </div>
+    <div class="card-body p-0">
+        <div class="table-responsive">
+            <table class="table table-hover mb-0">
+                <thead class="table-light">
+                    <tr>
+                        <th>Name</th>
+                        <th>Rating</th>
+                        <th>Playtime</th>
+                        <th>Stores</th>
+                        <th>Actions</th>
+                    </tr>
+                </thead>
+                <tbody id="game-list">
+                    <tr>
+                        <td colspan="5" class="text-center text-muted py-4">
+                            <div class="spinner-border spinner-border-sm" role="status"></div>
+                            Loading backlog from Spring backend...
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <div class="card-footer text-muted">
+        <small>Connected to Spring Boot API at <code>http://localhost:8080/api</code></small>
+    </div>
+</div>
+
+<script>
+const API_BASE = 'http://localhost:8080/api';
+
+// Load backlog games
+async function loadBacklog() {
+    const userId = document.getElementById('userId')?.value || '123e4567-e89b-12d3-a456-426614174000';
+    const gameList = document.getElementById('game-list');
+    const gameCount = document.getElementById('game-count');
+    
+    gameList.innerHTML = '<tr><td colspan="5" class="text-center"><div class="spinner-border spinner-border-sm"></div> Loading...</td></tr>';
+    
+    try {
+        const url = `${API_BASE}/collection/backlog?userId=${userId}`;
+        const response = await fetch(url);
+        
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        
+        const games = await response.json();
+        
+        if (gameCount) {
+            gameCount.textContent = games.length;
+        }
+        
+        if (games.length === 0) {
+            gameList.innerHTML = '<tr><td colspan="5" class="text-center text-muted">No games in backlog</td></tr>';
+            return;
+        }
+        
+        gameList.innerHTML = games.map(game => renderGameRow(game, userId)).join('');
+        
+    } catch (error) {
+        console.error('Error loading backlog:', error);
+        gameList.innerHTML = `
+            <tr>
+                <td colspan="5" class="text-center text-danger">
+                    <i class="bi bi-exclamation-triangle"></i> 
+                    Error loading backlog: ${error.message}
+                    <br><small>Make sure Spring Boot is running at http://localhost:8080</small>
+                </td>
+            </tr>
+        `;
+    }
+}
+
+// Render a single game row
+function renderGameRow(game, userId) {
+    const playedClass = game.markedAsPlayed ? 'success' : 'secondary';
+    const backlogClass = game.markedForLater ? 'warning' : 'secondary';
+    const playedIcon = game.markedAsPlayed ? 'bi-check-circle' : 'bi-circle';
+    const backlogIcon = game.markedForLater ? 'bi-bookmark-fill' : 'bi-bookmark';
+    const playedText = game.markedAsPlayed ? 'Played' : 'Mark Played';
+    const backlogText = game.markedForLater ? 'Remove from Backlog' : 'Add to Backlog';
+    
+    const playtime = game.storeLinks?.hltbMainHours ? `${game.storeLinks.hltbMainHours}h` : 'N/A';
+    const rating = game.rating ? game.rating.toFixed(1) : 'N/A';
+    const name = game.name || 'Unknown';
+    
+    // Store ownership icons
+    const storeIcons = [];
+    if (game.storeOwnership?.ownedOnSteam) storeIcons.push('<i class="bi bi-steam text-primary" title="Steam"></i>');
+    if (game.storeOwnership?.ownedOnGog) storeIcons.push('<i class="bi bi-box-seam text-success" title="GOG"></i>');
+    if (game.storeOwnership?.ownedOnEpic) storeIcons.push('<i class="bi bi-controller text-warning" title="Epic"></i>');
+    
+    const thumbnail = game.thumbnailUrl ? 
+        `<img src="${game.thumbnailUrl}" alt="${name}" class="game-thumbnail me-2" style="width: 40px; height: 40px; object-fit: cover; border-radius: 4px;">` : 
+        '<div class="me-2" style="width: 40px; height: 40px;"></div>';
+    
+    return `
+        <tr class="game-row" id="game-${game.id}">
+            <td>
+                <div class="d-flex align-items-center">
+                    ${thumbnail}
+                    <span>${name}</span>
+                </div>
+            </td>
+            <td><span class="badge bg-primary">${rating}</span></td>
+            <td>${playtime}</td>
+            <td>${storeIcons.join(' ')}</td>
+            <td>
+                <div class="btn-group btn-group-sm" role="group">
+                    <button class="btn btn-outline-${playedClass} btn-mark-played" 
+                            onclick="togglePlayed('${game.id}', ${game.markedAsPlayed}, '${userId}')"
+                            data-game-id="${game.id}">
+                        <i class="bi ${playedIcon}"></i> ${playedText}
+                    </button>
+                    <button class="btn btn-outline-${backlogClass} btn-mark-backlog" 
+                            onclick="toggleBacklog('${game.id}', ${game.markedForLater}, '${userId}')"
+                            data-game-id="${game.id}">
+                        <i class="bi ${backlogIcon}"></i> ${backlogText}
+                    </button>
+                </div>
+            </td>
+        </tr>
+    `;
+}
+
+// Toggle played status
+async function togglePlayed(gameId, currentStatus, userId) {
+    const newStatus = !currentStatus;
+    await updateGameFlags(gameId, { markedAsPlayed: newStatus }, userId);
+}
+
+// Toggle backlog status (will remove from list if unmarked)
+async function toggleBacklog(gameId, currentStatus, userId) {
+    const newStatus = !currentStatus;
+    const result = await updateGameFlags(gameId, { markedForLater: newStatus }, userId);
+    
+    // If we removed from backlog, remove from UI
+    if (!newStatus && result) {
+        const row = document.getElementById(`game-${gameId}`);
+        if (row) {
+            row.style.opacity = '0.5';
+            row.style.transition = 'opacity 0.3s';
+            setTimeout(() => {
+                row.remove();
+                // Update count
+                const count = document.getElementById('game-count');
+                if (count) {
+                    const current = parseInt(count.textContent) || 0;
+                    count.textContent = current - 1;
+                }
+            }, 300);
+        }
+    } else {
+        // Just reload
+        await loadBacklog();
+    }
+}
+
+// Update game flags via Spring API
+async function updateGameFlags(gameId, flags, userId) {
+    const button = document.querySelector(`[data-game-id="${gameId}"]`);
+    const originalHtml = button.innerHTML;
+    
+    try {
+        button.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Loading...';
+        button.disabled = true;
+        
+        // Get current state of the game
+        const response = await fetch(`${API_BASE}/collection?userId=${userId}`);
+        const games = await response.json();
+        const game = games.find(g => g.id === gameId);
+        
+        if (!game) {
+            throw new Error('Game not found');
+        }
+        
+        const updateBody = {
+            markedAsPlayed: flags.markedAsPlayed !== undefined ? flags.markedAsPlayed : game.markedAsPlayed,
+            markedAsHidden: game.markedAsHidden,
+            markedForLater: flags.markedForLater !== undefined ? flags.markedForLater : game.markedForLater
+        };
+        
+        const updateResponse = await fetch(`${API_BASE}/collection/games/${gameId}?userId=${userId}`, {
+            method: 'PATCH',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(updateBody)
+        });
+        
+        if (!updateResponse.ok) {
+            throw new Error(`HTTP ${updateResponse.status}: ${updateResponse.statusText}`);
+        }
+        
+        return true;
+        
+    } catch (error) {
+        console.error('Error updating game:', error);
+        button.innerHTML = originalHtml;
+        button.disabled = false;
+        alert(`Error: ${error.message}`);
+        return false;
+    }
+}
+
+// Load on page load
+loadBacklog();
+</script>
diff --git a/htmx-test/games.html b/htmx-test/games.html
new file mode 100644
index 0000000..bc7e658
--- /dev/null
+++ b/htmx-test/games.html
@@ -0,0 +1,287 @@
+<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+    <h1 class="h2">All Games</h1>
+    <div class="btn-toolbar mb-2 mb-md-0">
+        <div class="btn-group me-2">
+            <button type="button" class="btn btn-sm btn-outline-secondary" 
+                    onclick="location.reload()">
+                <i class="bi bi-arrow-clockwise"></i> Refresh
+            </button>
+        </div>
+    </div>
+</div>
+
+<!-- Filters Section -->
+<div class="card mb-4">
+    <div class="card-header">
+        <h3>Filters</h3>
+    </div>
+    <div class="card-body">
+        <form class="row g-3" id="filter-form">
+            <div class="col-md-3">
+                <label for="userId" class="form-label">User ID</label>
+                <input type="text" class="form-control" id="userId" 
+                       value="123e4567-e89b-12d3-a456-426614174000"
+                       placeholder="Enter UUID">
+                <small class="text-muted">Update this to your actual user ID</small>
+            </div>
+            
+            <div class="col-md-3">
+                <label for="storeFilter" class="form-label">Store</label>
+                <select class="form-select" id="storeFilter">
+                    <option value="">All Stores</option>
+                    <option value="steam">Steam</option>
+                    <option value="gog">GOG</option>
+                    <option value="epic">Epic</option>
+                </select>
+            </div>
+            
+            <div class="col-md-3">
+                <label for="playedFilter" class="form-label">Status</label>
+                <select class="form-select" id="playedFilter">
+                    <option value="">All</option>
+                    <option value="true">Played</option>
+                    <option value="false">Unplayed</option>
+                </select>
+            </div>
+            
+            <div class="col-md-3 d-flex align-items-end">
+                <button type="submit" class="btn btn-primary w-100">
+                    <i class="bi bi-funnel"></i> Apply Filters
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<!-- Game List Section -->
+<div class="card">
+    <div class="card-header d-flex justify-content-between align-items-center">
+        <h3>Games <span id="game-count" class="badge bg-secondary">Loading...</span></h3>
+        <div>
+            <button class="btn btn-sm btn-outline-primary" onclick="location.reload()">
+                <i class="bi bi-arrow-clockwise"></i> Reset
+            </button>
+        </div>
+    </div>
+    <div class="card-body p-0">
+        <div class="table-responsive">
+            <table class="table table-hover mb-0">
+                <thead class="table-light">
+                    <tr>
+                        <th>Name</th>
+                        <th>Rating</th>
+                        <th>Playtime</th>
+                        <th>Stores</th>
+                        <th>Actions</th>
+                    </tr>
+                </thead>
+                <tbody id="game-list">
+                    <tr>
+                        <td colspan="5" class="text-center text-muted py-4">
+                            <div class="spinner-border spinner-border-sm" role="status"></div>
+                            Loading games from Spring backend (http://localhost:8080)...
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <div class="card-footer text-muted">
+        <small>Connected to Spring Boot API at <code>http://localhost:8080/api</code></small>
+    </div>
+</div>
+
+<script>
+// Simple fetch-based approach since HTMX + JSON from Spring is complex
+// This gives you the "feel" of HTMX-style simplicity
+
+const API_BASE = 'http://localhost:8080/api';
+
+// Load games on page load
+async function loadGames() {
+    const userId = document.getElementById('userId').value;
+    const storeFilter = document.getElementById('storeFilter').value;
+    const playedFilter = document.getElementById('playedFilter').value;
+    
+    const gameList = document.getElementById('game-list');
+    const gameCount = document.getElementById('game-count');
+    
+    gameList.innerHTML = '<tr><td colspan="5" class="text-center"><div class="spinner-border spinner-border-sm"></div> Loading...</td></tr>';
+    
+    try {
+        // Build query parameters
+        const params = new URLSearchParams();
+        params.append('userId', userId);
+        
+        let url = `${API_BASE}/collection?${params.toString()}`;
+        
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        
+        const games = await response.json();
+        
+        if (gameCount) {
+            gameCount.textContent = games.length;
+        }
+        
+        if (games.length === 0) {
+            gameList.innerHTML = '<tr><td colspan="5" class="text-center text-muted">No games found</td></tr>';
+            return;
+        }
+        
+        // Filter locally (since Spring API doesn't support all these filters)
+        let filteredGames = games;
+        
+        if (storeFilter) {
+            filteredGames = filteredGames.filter(g => 
+                g.storeOwnership?.ownedOnSteam && storeFilter === 'steam' ||
+                g.storeOwnership?.ownedOnGog && storeFilter === 'gog' ||
+                g.storeOwnership?.ownedOnEpic && storeFilter === 'epic'
+            );
+        }
+        
+        if (playedFilter) {
+            const showPlayed = playedFilter === 'true';
+            filteredGames = filteredGames.filter(g => g.markedAsPlayed === showPlayed);
+        }
+        
+        gameList.innerHTML = filteredGames.map(game => renderGameRow(game, userId)).join('');
+        
+    } catch (error) {
+        console.error('Error loading games:', error);
+        gameList.innerHTML = `
+            <tr>
+                <td colspan="5" class="text-center text-danger">
+                    <i class="bi bi-exclamation-triangle"></i> 
+                    Error loading games: ${error.message}
+                    <br><small>Make sure Spring Boot is running at http://localhost:8080</small>
+                </td>
+            </tr>
+        `;
+    }
+}
+
+// Render a single game row
+function renderGameRow(game, userId) {
+    const playedClass = game.markedAsPlayed ? 'success' : 'secondary';
+    const backlogClass = game.markedForLater ? 'warning' : 'secondary';
+    const playedIcon = game.markedAsPlayed ? 'bi-check-circle' : 'bi-circle';
+    const backlogIcon = game.markedForLater ? 'bi-bookmark-fill' : 'bi-bookmark';
+    const playedText = game.markedAsPlayed ? 'Played' : 'Mark Played';
+    const backlogText = game.markedForLater ? 'Backlog' : 'Add to Backlog';
+    
+    const playtime = game.storeLinks?.hltbMainHours ? `${game.storeLinks.hltbMainHours}h` : 'N/A';
+    const rating = game.rating ? game.rating.toFixed(1) : 'N/A';
+    const name = game.name || 'Unknown';
+    
+    // Store ownership icons
+    const storeIcons = [];
+    if (game.storeOwnership?.ownedOnSteam) storeIcons.push('<i class="bi bi-steam text-primary" title="Steam"></i>');
+    if (game.storeOwnership?.ownedOnGog) storeIcons.push('<i class="bi bi-box-seam text-success" title="GOG"></i>');
+    if (game.storeOwnership?.ownedOnEpic) storeIcons.push('<i class="bi bi-controller text-warning" title="Epic"></i>');
+    
+    const thumbnail = game.thumbnailUrl ? 
+        `<img src="${game.thumbnailUrl}" alt="${name}" class="game-thumbnail me-2" style="width: 40px; height: 40px; object-fit: cover; border-radius: 4px;">` : 
+        '<div class="me-2" style="width: 40px; height: 40px;"></div>';
+    
+    return `
+        <tr class="game-row" id="game-${game.id}">
+            <td>
+                <div class="d-flex align-items-center">
+                    ${thumbnail}
+                    <span>${name}</span>
+                </div>
+            </td>
+            <td><span class="badge bg-primary">${rating}</span></td>
+            <td>${playtime}</td>
+            <td>${storeIcons.join(' ')}</td>
+            <td>
+                <div class="btn-group btn-group-sm" role="group">
+                    <button class="btn btn-outline-${playedClass} btn-mark-played" 
+                            onclick="togglePlayed('${game.id}', ${game.markedAsPlayed}, '${userId}')"
+                            data-game-id="${game.id}">
+                        <i class="bi ${playedIcon}"></i> ${playedText}
+                    </button>
+                    <button class="btn btn-outline-${backlogClass} btn-mark-backlog" 
+                            onclick="toggleBacklog('${game.id}', ${game.markedForLater}, '${userId}')"
+                            data-game-id="${game.id}">
+                        <i class="bi ${backlogIcon}"></i> ${backlogText}
+                    </button>
+                </div>
+            </td>
+        </tr>
+    `;
+}
+
+// Toggle played status
+async function togglePlayed(gameId, currentStatus, userId) {
+    const newStatus = !currentStatus;
+    await updateGameFlags(gameId, { markedAsPlayed: newStatus }, userId);
+}
+
+// Toggle backlog status
+async function toggleBacklog(gameId, currentStatus, userId) {
+    const newStatus = !currentStatus;
+    await updateGameFlags(gameId, { markedForLater: newStatus }, userId);
+}
+
+// Update game flags via Spring API
+async function updateGameFlags(gameId, flags, userId) {
+    const button = document.querySelector(`[data-game-id="${gameId}"]`);
+    const originalHtml = button.innerHTML;
+    
+    try {
+        // Show loading state
+        button.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Loading...';
+        button.disabled = true;
+        
+        // Get current state of the game
+        const response = await fetch(`${API_BASE}/collection?userId=${userId}`);
+        const games = await response.json();
+        const game = games.find(g => g.id === gameId);
+        
+        if (!game) {
+            throw new Error('Game not found');
+        }
+        
+        // Merge flags with current state
+        const updateBody = {
+            markedAsPlayed: flags.markedAsPlayed !== undefined ? flags.markedAsPlayed : game.markedAsPlayed,
+            markedAsHidden: game.markedAsHidden,
+            markedForLater: flags.markedForLater !== undefined ? flags.markedForLater : game.markedForLater
+        };
+        
+        const updateResponse = await fetch(`${API_BASE}/collection/games/${gameId}?userId=${userId}`, {
+            method: 'PATCH',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(updateBody)
+        });
+        
+        if (!updateResponse.ok) {
+            throw new Error(`HTTP ${updateResponse.status}: ${updateResponse.statusText}`);
+        }
+        
+        // Reload the game list
+        await loadGames();
+        
+    } catch (error) {
+        console.error('Error updating game:', error);
+        button.innerHTML = originalHtml;
+        button.disabled = false;
+        alert(`Error: ${error.message}`);
+    }
+}
+
+// Form submission handler
+document.getElementById('filter-form').addEventListener('submit', function(e) {
+    e.preventDefault();
+    loadGames();
+});
+
+// Load games on page load
+loadGames();
+</script>
diff --git a/htmx-test/index.html b/htmx-test/index.html
new file mode 100644
index 0000000..f3e0047
--- /dev/null
+++ b/htmx-test/index.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GameOverview - HTMX Test</title>
+    <!-- HTMX from CDN -->
+    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
+    <!-- Bootstrap for quick styling -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Bootstrap Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container-fluid">
+        <div class="row">
+            <!-- Sidebar -->
+            <nav class="col-md-2 d-none d-md-block bg-light sidebar vh-100 position-fixed">
+                <div class="sidebar-sticky pt-3">
+                    <div class="sidebar-brand">
+                        <h4>GameOverview <span class="badge bg-primary">HTMX Test</span></h4>
+                    </div>
+                    <ul class="nav flex-column px-3 mt-3">
+                        <li class="nav-item">
+                            <a class="nav-link active" href="#" 
+                               onclick="loadView('games.html')">
+                                <i class="bi bi-controller"></i> All Games
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#" 
+                               onclick="loadView('top-games.html')">
+                                <i class="bi bi-star"></i> Top Games
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#" 
+                               onclick="loadView('backlog.html')">
+                                <i class="bi bi-bookmark"></i> Backlog
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#" 
+                               onclick="loadView('short-games.html')">
+                                <i class="bi bi-clock"></i> Short Games
+                            </a>
+                        </li>
+                    </ul>
+                    <div class="px-3 mt-4">
+                        <small class="text-muted">Spring Backend: http://localhost:8080</small>
+                    </div>
+                </div>
+            </nav>
+
+            <!-- Main Content Area -->
+            <main role="main" class="col-md-9 ms-sm-auto col-lg-10 px-md-4" id="main-content">
+                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+                    <h1 class="h2">GameOverview HTMX Test</h1>
+                </div>
+
+                <!-- Welcome Content -->
+                <div class="card mb-4">
+                    <div class="card-body">
+                        <h2 class="card-title">Welcome to HTMX Test!</h2>
+                        <p class="card-text">
+                            This is a <strong>minimal HTMX frontend</strong> that connects to your existing Spring Boot backend.
+                            The goal is to test the "feel" of HTMX compared to Angular.
+                        </p>
+                        
+                        <h4 class="mt-4">What you're testing:</h4>
+                        <ul>
+                            <li><strong>Simplicity:</strong> No build steps, no npm, no Angular CLI</li>
+                            <li><strong>Direct HTML:</strong> Edit files directly, no TypeScript compilation</li>
+                            <li><strong>Server-side focus:</strong> Business logic stays in the backend</li>
+                            <li><strong>Progressive enhancement:</strong> Works without JavaScript (mostly)</li>
+                        </ul>
+                        
+                        <h4 class="mt-4">How to test:</h4>
+                        <ol>
+                            <li>Start your Spring Boot backend: <code>cd apps/api && ./mvnw spring-boot:run</code></li>
+                            <li>Make sure it's running at <code>http://localhost:8080</code></li>
+                            <li>Click on the navigation links above to test different views</li>
+                            <li>Try filtering games by store or status</li>
+                            <li>Try marking games as played or adding to backlog</li>
+                            <li>Notice how simple the code is compared to Angular</li>
+                        </ol>
+                        
+                        <div class="alert alert-info mt-3">
+                            <i class="bi bi-info-circle"></i> 
+                            <strong>Note:</strong> You may need to update the <code>userId</code> in each view. 
+                            The default is <code>123e4567-e89b-12d3-a456-426614174000</code> - replace it with your actual UUID.
+                        </div>
+                        
+                        <div class="alert alert-warning mt-3">
+                            <i class="bi bi-exclamation-triangle"></i> 
+                            <strong>Important:</strong> This is a <em>test frontend only</em>. 
+                            It uses simple JavaScript fetch() calls to demonstrate the concept. 
+                            A full HTMX implementation would use HTMX attributes for all interactions.
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Quick Test Section -->
+                <div class="card">
+                    <div class="card-header">
+                        <h3>Quick API Test</h3>
+                    </div>
+                    <div class="card-body">
+                        <p>Test your Spring Boot API connection:</p>
+                        <button class="btn btn-primary me-2" 
+                                onclick="testApiConnection()">
+                            <i class="bi bi-check-circle"></i> Test API Connection
+                        </button>
+                        <button class="btn btn-outline-secondary" 
+                                onclick="loadView('games.html')">
+                            <i class="bi bi-controller"></i> Load Game Catalog
+                        </button>
+                        <div id="test-result" class="mt-3"></div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </div>
+
+    <script>
+        // Simple view loader - this simulates HTMX navigation
+        function loadView(viewName) {
+            // Update active state in sidebar
+            document.querySelectorAll('.nav-link').forEach(link => {
+                link.classList.remove('active');
+            });
+            event.target.classList.add('active');
+            
+            // Load the view
+            fetch(`htmx-test/${viewName}`)
+                .then(response => response.text())
+                .then(html => {
+                    document.getElementById('main-content').innerHTML = html;
+                })
+                .catch(error => {
+                    console.error('Error loading view:', error);
+                    alert(`Error loading ${viewName}: ${error.message}`);
+                });
+        }
+        
+        // Test API connection
+        async function testApiConnection() {
+            const resultDiv = document.getElementById('test-result');
+            const testUserId = '123e4567-e89b-12d3-a456-426614174000';
+            
+            resultDiv.innerHTML = '<div class="alert alert-info"><i class="bi bi-hourglass-split"></i> Testing connection to http://localhost:8080/api...</div>';
+            
+            try {
+                const response = await fetch(`http://localhost:8080/api/collection?userId=${testUserId}`);
+                
+                if (response.ok) {
+                    const games = await response.json();
+                    resultDiv.innerHTML = `
+                        <div class="alert alert-success">
+                            <i class="bi bi-check-circle"></i> 
+                            <strong>Connection successful!</strong> 
+                            Found ${games.length} games in your collection.
+                        </div>
+                    `;
+                } else {
+                    resultDiv.innerHTML = `
+                        <div class="alert alert-danger">
+                            <i class="bi bi-exclamation-triangle"></i> 
+                            <strong>Connection failed!</strong> 
+                            HTTP ${response.status}: ${response.statusText}
+                            <br><small>Make sure Spring Boot is running at http://localhost:8080</small>
+                        </div>
+                    `;
+                }
+            } catch (error) {
+                resultDiv.innerHTML = `
+                    <div class="alert alert-danger">
+                        <i class="bi bi-exclamation-triangle"></i> 
+                        <strong>Connection failed!</strong> 
+                        ${error.message}
+                        <br><small>Make sure Spring Boot is running at http://localhost:8080</small>
+                    </div>
+                `;
+            }
+        }
+        
+        // Make sidebar links work with click (not just onclick attribute)
+        document.querySelectorAll('.nav-link').forEach(link => {
+            link.addEventListener('click', function(e) {
+                e.preventDefault();
+                const viewName = this.getAttribute('onclick').match(/loadView\(['"](.+)['"]\)/)[1];
+                loadView(viewName);
+            });
+        });
+    </script>
+</body>
+</html>
diff --git a/htmx-test/short-games.html b/htmx-test/short-games.html
new file mode 100644
index 0000000..c814f94
--- /dev/null
+++ b/htmx-test/short-games.html
@@ -0,0 +1,267 @@
+<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+    <h1 class="h2">Short Games</h1>
+    <div class="btn-toolbar mb-2 mb-md-0">
+        <div class="btn-group me-2">
+            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="location.reload()">
+                <i class="bi bi-arrow-clockwise"></i> Refresh
+            </button>
+        </div>
+    </div>
+</div>
+
+<!-- Filters Section -->
+<div class="card mb-4">
+    <div class="card-header">
+        <h3>Filters</h3>
+    </div>
+    <div class="card-body">
+        <form class="row g-3" id="filter-form">
+            <div class="col-md-4">
+                <label for="userId" class="form-label">User ID</label>
+                <input type="text" class="form-control" id="userId" 
+                       value="123e4567-e89b-12d3-a456-426614174000"
+                       placeholder="Enter UUID">
+                <small class="text-muted">Update this to your actual user ID</small>
+            </div>
+            
+            <div class="col-md-4">
+                <label for="maxHours" class="form-label">Max Playtime (hours)</label>
+                <input type="number" class="form-control" id="maxHours" 
+                       value="5" step="0.5" min="0">
+            </div>
+            
+            <div class="col-md-4">
+                <label for="minRating" class="form-label">Min Rating</label>
+                <input type="number" class="form-control" id="minRating" 
+                       value="80" min="0" max="100">
+            </div>
+            
+            <div class="col-12 d-flex justify-content-end">
+                <button type="submit" class="btn btn-primary">
+                    <i class="bi bi-funnel"></i> Apply Filters
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<!-- Description -->
+<div class="alert alert-info mb-4">
+    <i class="bi bi-info-circle"></i> 
+    Short, highly-rated games that you haven't played yet. Perfect for a quick gaming session!
+</div>
+
+<!-- Game List Section -->
+<div class="card">
+    <div class="card-header d-flex justify-content-between align-items-center">
+        <h3>Short & Good Games <span id="game-count" class="badge bg-secondary">Loading...</span></h3>
+        <div>
+            <button class="btn btn-sm btn-outline-primary" onclick="location.reload()">
+                <i class="bi bi-arrow-clockwise"></i> Reset
+            </button>
+        </div>
+    </div>
+    <div class="card-body p-0">
+        <div class="table-responsive">
+            <table class="table table-hover mb-0">
+                <thead class="table-light">
+                    <tr>
+                        <th>Name</th>
+                        <th>Rating</th>
+                        <th>Playtime</th>
+                        <th>Stores</th>
+                        <th>Actions</th>
+                    </tr>
+                </thead>
+                <tbody id="game-list">
+                    <tr>
+                        <td colspan="5" class="text-center text-muted py-4">
+                            <div class="spinner-border spinner-border-sm" role="status"></div>
+                            Loading short games from Spring backend...
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <div class="card-footer text-muted">
+        <small>Connected to Spring Boot API at <code>http://localhost:8080/api</code></small>
+    </div>
+</div>
+
+<script>
+const API_BASE = 'http://localhost:8080/api';
+
+// Load short games
+async function loadShortGames() {
+    const userId = document.getElementById('userId').value;
+    const maxHours = document.getElementById('maxHours').value;
+    const minRating = document.getElementById('minRating').value;
+    
+    const gameList = document.getElementById('game-list');
+    const gameCount = document.getElementById('game-count');
+    
+    gameList.innerHTML = '<tr><td colspan="5" class="text-center"><div class="spinner-border spinner-border-sm"></div> Loading...</td></tr>';
+    
+    try {
+        const url = `${API_BASE}/collection/short-good?userId=${userId}&maxHours=${maxHours}&minRating=${minRating}`;
+        const response = await fetch(url);
+        
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        
+        const games = await response.json();
+        
+        if (gameCount) {
+            gameCount.textContent = games.length;
+        }
+        
+        if (games.length === 0) {
+            gameList.innerHTML = '<tr><td colspan="5" class="text-center text-muted">No short games found</td></tr>';
+            return;
+        }
+        
+        // Sort by playtime (shortest first)
+        const sortedGames = games.sort((a, b) => {
+            const aHours = a.storeLinks?.hltbMainHours || Infinity;
+            const bHours = b.storeLinks?.hltbMainHours || Infinity;
+            return aHours - bHours;
+        });
+        
+        gameList.innerHTML = sortedGames.map(game => renderGameRow(game, userId)).join('');
+        
+    } catch (error) {
+        console.error('Error loading short games:', error);
+        gameList.innerHTML = `
+            <tr>
+                <td colspan="5" class="text-center text-danger">
+                    <i class="bi bi-exclamation-triangle"></i> 
+                    Error loading short games: ${error.message}
+                    <br><small>Make sure Spring Boot is running at http://localhost:8080</small>
+                </td>
+            </tr>
+        `;
+    }
+}
+
+// Render a single game row
+function renderGameRow(game, userId) {
+    const playedClass = game.markedAsPlayed ? 'success' : 'secondary';
+    const backlogClass = game.markedForLater ? 'warning' : 'secondary';
+    const playedIcon = game.markedAsPlayed ? 'bi-check-circle' : 'bi-circle';
+    const backlogIcon = game.markedForLater ? 'bi-bookmark-fill' : 'bi-bookmark';
+    const playedText = game.markedAsPlayed ? 'Played' : 'Mark Played';
+    const backlogText = game.markedForLater ? 'Backlog' : 'Add to Backlog';
+    
+    const playtime = game.storeLinks?.hltbMainHours ? `${game.storeLinks.hltbMainHours}h` : 'N/A';
+    const rating = game.rating ? game.rating.toFixed(1) : 'N/A';
+    const name = game.name || 'Unknown';
+    
+    // Store ownership icons
+    const storeIcons = [];
+    if (game.storeOwnership?.ownedOnSteam) storeIcons.push('<i class="bi bi-steam text-primary" title="Steam"></i>');
+    if (game.storeOwnership?.ownedOnGog) storeIcons.push('<i class="bi bi-box-seam text-success" title="GOG"></i>');
+    if (game.storeOwnership?.ownedOnEpic) storeIcons.push('<i class="bi bi-controller text-warning" title="Epic"></i>');
+    
+    const thumbnail = game.thumbnailUrl ? 
+        `<img src="${game.thumbnailUrl}" alt="${name}" class="game-thumbnail me-2" style="width: 40px; height: 40px; object-fit: cover; border-radius: 4px;">` : 
+        '<div class="me-2" style="width: 40px; height: 40px;"></div>';
+    
+    return `
+        <tr class="game-row" id="game-${game.id}">
+            <td>
+                <div class="d-flex align-items-center">
+                    ${thumbnail}
+                    <span>${name}</span>
+                </div>
+            </td>
+            <td><span class="badge bg-primary">${rating}</span></td>
+            <td><span class="badge bg-info">${playtime}</span></td>
+            <td>${storeIcons.join(' ')}</td>
+            <td>
+                <div class="btn-group btn-group-sm" role="group">
+                    <button class="btn btn-outline-${playedClass} btn-mark-played" 
+                            onclick="togglePlayed('${game.id}', ${game.markedAsPlayed}, '${userId}')"
+                            data-game-id="${game.id}">
+                        <i class="bi ${playedIcon}"></i> ${playedText}
+                    </button>
+                    <button class="btn btn-outline-${backlogClass} btn-mark-backlog" 
+                            onclick="toggleBacklog('${game.id}', ${game.markedForLater}, '${userId}')"
+                            data-game-id="${game.id}">
+                        <i class="bi ${backlogIcon}"></i> ${backlogText}
+                    </button>
+                </div>
+            </td>
+        </tr>
+    `;
+}
+
+// Toggle played status
+async function togglePlayed(gameId, currentStatus, userId) {
+    const newStatus = !currentStatus;
+    await updateGameFlags(gameId, { markedAsPlayed: newStatus }, userId);
+}
+
+// Toggle backlog status
+async function toggleBacklog(gameId, currentStatus, userId) {
+    const newStatus = !currentStatus;
+    await updateGameFlags(gameId, { markedForLater: newStatus }, userId);
+}
+
+// Update game flags via Spring API
+async function updateGameFlags(gameId, flags, userId) {
+    const button = document.querySelector(`[data-game-id="${gameId}"]`);
+    const originalHtml = button.innerHTML;
+    
+    try {
+        button.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Loading...';
+        button.disabled = true;
+        
+        // Get current state of the game
+        const response = await fetch(`${API_BASE}/collection?userId=${userId}`);
+        const games = await response.json();
+        const game = games.find(g => g.id === gameId);
+        
+        if (!game) {
+            throw new Error('Game not found');
+        }
+        
+        const updateBody = {
+            markedAsPlayed: flags.markedAsPlayed !== undefined ? flags.markedAsPlayed : game.markedAsPlayed,
+            markedAsHidden: game.markedAsHidden,
+            markedForLater: flags.markedForLater !== undefined ? flags.markedForLater : game.markedForLater
+        };
+        
+        const updateResponse = await fetch(`${API_BASE}/collection/games/${gameId}?userId=${userId}`, {
+            method: 'PATCH',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(updateBody)
+        });
+        
+        if (!updateResponse.ok) {
+            throw new Error(`HTTP ${updateResponse.status}: ${updateResponse.statusText}`);
+        }
+        
+        // Reload the list
+        await loadShortGames();
+        
+    } catch (error) {
+        console.error('Error updating game:', error);
+        button.innerHTML = originalHtml;
+        button.disabled = false;
+        alert(`Error: ${error.message}`);
+    }
+}
+
+// Form submission handler
+document.getElementById('filter-form').addEventListener('submit', function(e) {
+    e.preventDefault();
+    loadShortGames();
+});
+
+// Load on page load
+loadShortGames();
+</script>
diff --git a/htmx-test/styles.css b/htmx-test/styles.css
new file mode 100644
index 0000000..c7d4044
--- /dev/null
+++ b/htmx-test/styles.css
@@ -0,0 +1,243 @@
+/* GameOverview HTMX Test - Custom Styles */
+
+/* Sidebar styling */
+.sidebar {
+    background-color: #f8f9fa;
+    border-right: 1px solid #dee2e6;
+    height: 100vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 1000;
+}
+
+.sidebar .nav-link {
+    color: #495057;
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    transition: all 0.2s ease;
+}
+
+.sidebar .nav-link:hover {
+    background-color: #e9ecef;
+    color: #212529;
+}
+
+.sidebar .nav-link.active {
+    background-color: #0d6efd;
+    color: white;
+}
+
+.sidebar .nav-link i {
+    margin-right: 0.5rem;
+    font-size: 1.25rem;
+}
+
+.sidebar-brand {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    border-bottom: 1px solid #dee2e6;
+}
+
+.sidebar-brand h4 {
+    margin: 0;
+    font-size: 1.25rem;
+}
+
+.toggle-btn {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: #6c757d;
+}
+
+.toggle-btn:hover {
+    color: #212529;
+}
+
+/* Main content area */
+.main-content {
+    margin-left: 0;
+}
+
+@media (min-width: 768px) {
+    .sidebar {
+        width: 250px;
+    }
+    
+    .main-content {
+        margin-left: 250px;
+    }
+}
+
+/* Game table styling */
+.table th {
+    font-weight: 600;
+    border-bottom: 2px solid #dee2e6;
+    padding: 0.75rem;
+}
+
+.table td {
+    padding: 0.75rem;
+    vertical-align: middle;
+}
+
+.table-hover tbody tr:hover {
+    background-color: rgba(0, 0, 0, 0.02);
+}
+
+.game-row {
+    transition: all 0.2s ease;
+}
+
+.game-row:hover {
+    background-color: #f8f9fa;
+}
+
+/* Game thumbnail styling */
+.game-thumbnail {
+    border-radius: 4px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+/* Badge styling */
+.badge {
+    font-size: 0.875em;
+    padding: 0.35em 0.65em;
+    border-radius: 0.25rem;
+}
+
+/* Button styling */
+.btn-group-sm .btn {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+}
+
+.btn-outline-success {
+    border-color: #198754;
+    color: #198754;
+}
+
+.btn-outline-success:hover {
+    background-color: #198754;
+    color: white;
+}
+
+.btn-outline-warning {
+    border-color: #ffc107;
+    color: #856404;
+}
+
+.btn-outline-warning:hover {
+    background-color: #ffc107;
+    color: #212529;
+}
+
+/* Loading spinner */
+.spinner-border-sm {
+    width: 1rem;
+    height: 1rem;
+    border-width: 0.15em;
+}
+
+/* Card styling */
+.card {
+    border: none;
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+    margin-bottom: 1.5rem;
+    border-radius: 0.5rem;
+}
+
+.card-header {
+    background-color: transparent;
+    border-bottom: 1px solid #e5e5e5;
+    padding: 1rem 1.5rem;
+}
+
+.card-body {
+    padding: 1.5rem;
+}
+
+.card-footer {
+    background-color: transparent;
+    border-top: 1px solid #e5e5e5;
+    padding: 0.75rem 1.5rem;
+}
+
+/* Alert styling */
+.alert {
+    border-radius: 0.5rem;
+    border: none;
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+}
+
+.alert-info {
+    background-color: rgba(13, 110, 253, 0.1);
+    color: #0d6efd;
+}
+
+.alert-danger {
+    background-color: rgba(220, 53, 69, 0.1);
+    color: #dc3545;
+}
+
+/* Form styling */
+.form-control {
+    border-radius: 0.375rem;
+}
+
+.form-select {
+    border-radius: 0.375rem;
+}
+
+/* Responsive adjustments */
+@media (max-width: 767.98px) {
+    .sidebar {
+        display: none !important;
+    }
+    
+    .main-content {
+        margin-left: 0;
+    }
+    
+    .table-responsive {
+        overflow-x: auto;
+    }
+    
+    .btn-group-sm .btn {
+        padding: 0.2rem 0.4rem;
+        font-size: 0.75rem;
+    }
+}
+
+/* Smooth transitions */
+* {
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+/* Focus styles */
+.btn:focus,
+.form-control:focus,
+.form-select:focus {
+    outline: none;
+    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+/* Disabled state */
+.btn:disabled {
+    opacity: 0.65;
+    cursor: not-allowed;
+}
+
+/* Text styling */
+.text-muted {
+    color: #6c757d !important;
+}
+
+/* Border bottom for header */
+.border-bottom {
+    border-bottom: 1px solid #dee2e6 !important;
+}
diff --git a/htmx-test/top-games.html b/htmx-test/top-games.html
new file mode 100644
index 0000000..1238980
--- /dev/null
+++ b/htmx-test/top-games.html
@@ -0,0 +1,209 @@
+<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+    <h1 class="h2">Top Games</h1>
+    <div class="btn-toolbar mb-2 mb-md-0">
+        <div class="btn-group me-2">
+            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="location.reload()">
+                <i class="bi bi-arrow-clockwise"></i> Refresh
+            </button>
+        </div>
+    </div>
+</div>
+
+<!-- Description -->
+<div class="alert alert-info mb-4">
+    <i class="bi bi-info-circle"></i> 
+    These are your highest-rated unplayed games - perfect for finding what to play next!
+</div>
+
+<!-- Game List Section -->
+<div class="card">
+    <div class="card-header d-flex justify-content-between align-items-center">
+        <h3>Top Rated Unplayed Games <span id="game-count" class="badge bg-secondary">Loading...</span></h3>
+        <div>
+            <button class="btn btn-sm btn-outline-primary" onclick="location.reload()">
+                <i class="bi bi-arrow-clockwise"></i> Refresh
+            </button>
+        </div>
+    </div>
+    <div class="card-body p-0">
+        <div class="table-responsive">
+            <table class="table table-hover mb-0">
+                <thead class="table-light">
+                    <tr>
+                        <th>#</th>
+                        <th>Name</th>
+                        <th>Rating</th>
+                        <th>Playtime</th>
+                        <th>Actions</th>
+                    </tr>
+                </thead>
+                <tbody id="game-list">
+                    <tr>
+                        <td colspan="5" class="text-center text-muted py-4">
+                            <div class="spinner-border spinner-border-sm" role="status"></div>
+                            Loading top games from Spring backend...
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <div class="card-footer text-muted">
+        <small>Connected to Spring Boot API at <code>http://localhost:8080/api</code></small>
+    </div>
+</div>
+
+<script>
+const API_BASE = 'http://localhost:8080/api';
+
+// Load top games
+async function loadTopGames() {
+    const userId = document.getElementById('userId')?.value || '123e4567-e89b-12d3-a456-426614174000';
+    const gameList = document.getElementById('game-list');
+    const gameCount = document.getElementById('game-count');
+    
+    gameList.innerHTML = '<tr><td colspan="5" class="text-center"><div class="spinner-border spinner-border-sm"></div> Loading...</td></tr>';
+    
+    try {
+        const url = `${API_BASE}/collection/top?userId=${userId}`;
+        const response = await fetch(url);
+        
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        
+        const games = await response.json();
+        
+        if (gameCount) {
+            gameCount.textContent = games.length;
+        }
+        
+        if (games.length === 0) {
+            gameList.innerHTML = '<tr><td colspan="5" class="text-center text-muted">No top games found</td></tr>';
+            return;
+        }
+        
+        gameList.innerHTML = games.map((game, index) => renderGameRow(game, userId, index + 1)).join('');
+        
+    } catch (error) {
+        console.error('Error loading top games:', error);
+        gameList.innerHTML = `
+            <tr>
+                <td colspan="5" class="text-center text-danger">
+                    <i class="bi bi-exclamation-triangle"></i> 
+                    Error loading top games: ${error.message}
+                    <br><small>Make sure Spring Boot is running at http://localhost:8080</small>
+                </td>
+            </tr>
+        `;
+    }
+}
+
+// Render a single game row for top games
+function renderGameRow(game, userId, rank) {
+    const playedClass = game.markedAsPlayed ? 'success' : 'secondary';
+    const backlogClass = game.markedForLater ? 'warning' : 'secondary';
+    const playedIcon = game.markedAsPlayed ? 'bi-check-circle' : 'bi-circle';
+    const backlogIcon = game.markedForLater ? 'bi-bookmark-fill' : 'bi-bookmark';
+    const playedText = game.markedAsPlayed ? 'Played' : 'Mark Played';
+    const backlogText = game.markedForLater ? 'Backlog' : 'Add to Backlog';
+    
+    const playtime = game.storeLinks?.hltbMainHours ? `${game.storeLinks.hltbMainHours}h` : 'N/A';
+    const rating = game.rating ? game.rating.toFixed(1) : 'N/A';
+    const name = game.name || 'Unknown';
+    
+    const thumbnail = game.thumbnailUrl ? 
+        `<img src="${game.thumbnailUrl}" alt="${name}" class="game-thumbnail me-2" style="width: 40px; height: 40px; object-fit: cover; border-radius: 4px;">` : 
+        '<div class="me-2" style="width: 40px; height: 40px;"></div>';
+    
+    return `
+        <tr class="game-row" id="game-${game.id}">
+            <td class="text-center">${rank}</td>
+            <td>
+                <div class="d-flex align-items-center">
+                    ${thumbnail}
+                    <span><strong>${name}</strong></span>
+                </div>
+            </td>
+            <td><span class="badge bg-primary">${rating}</span></td>
+            <td>${playtime}</td>
+            <td>
+                <div class="btn-group btn-group-sm" role="group">
+                    <button class="btn btn-outline-${playedClass} btn-mark-played" 
+                            onclick="togglePlayed('${game.id}', ${game.markedAsPlayed}, '${userId}')"
+                            data-game-id="${game.id}">
+                        <i class="bi ${playedIcon}"></i> ${playedText}
+                    </button>
+                    <button class="btn btn-outline-${backlogClass} btn-mark-backlog" 
+                            onclick="toggleBacklog('${game.id}', ${game.markedForLater}, '${userId}')"
+                            data-game-id="${game.id}">
+                        <i class="bi ${backlogIcon}"></i> ${backlogText}
+                    </button>
+                </div>
+            </td>
+        </tr>
+    `;
+}
+
+// Toggle played status
+async function togglePlayed(gameId, currentStatus, userId) {
+    const newStatus = !currentStatus;
+    await updateGameFlags(gameId, { markedAsPlayed: newStatus }, userId);
+}
+
+// Toggle backlog status
+async function toggleBacklog(gameId, currentStatus, userId) {
+    const newStatus = !currentStatus;
+    await updateGameFlags(gameId, { markedForLater: newStatus }, userId);
+}
+
+// Update game flags via Spring API
+async function updateGameFlags(gameId, flags, userId) {
+    const button = document.querySelector(`[data-game-id="${gameId}"]`);
+    const originalHtml = button.innerHTML;
+    
+    try {
+        button.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Loading...';
+        button.disabled = true;
+        
+        // Get current state of the game
+        const response = await fetch(`${API_BASE}/collection?userId=${userId}`);
+        const games = await response.json();
+        const game = games.find(g => g.id === gameId);
+        
+        if (!game) {
+            throw new Error('Game not found');
+        }
+        
+        const updateBody = {
+            markedAsPlayed: flags.markedAsPlayed !== undefined ? flags.markedAsPlayed : game.markedAsPlayed,
+            markedAsHidden: game.markedAsHidden,
+            markedForLater: flags.markedForLater !== undefined ? flags.markedForLater : game.markedForLater
+        };
+        
+        const updateResponse = await fetch(`${API_BASE}/collection/games/${gameId}?userId=${userId}`, {
+            method: 'PATCH',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(updateBody)
+        });
+        
+        if (!updateResponse.ok) {
+            throw new Error(`HTTP ${updateResponse.status}: ${updateResponse.statusText}`);
+        }
+        
+        // Reload the list
+        await loadTopGames();
+        
+    } catch (error) {
+        console.error('Error updating game:', error);
+        button.innerHTML = originalHtml;
+        button.disabled = false;
+        alert(`Error: ${error.message}`);
+    }
+}
+
+// Load on page load
+loadTopGames();
+</script>

From f16ac630e699edc6d269a28b416ad63e9cc2ce9b Mon Sep 17 00:00:00 2001
From: RobertMeissner <>
Date: Tue, 8 Sep 2026 15:03:26 +0200
Subject: [PATCH 2/2] gamov-85 fix urls

---
 .../presentation/rest/GamerCollectionController.java        | 2 +-
 htmx-test/README.md                                         | 2 +-
 htmx-test/backlog.html                                      | 2 +-
 htmx-test/games.html                                        | 2 +-
 htmx-test/index.html                                        | 6 +++---
 htmx-test/short-games.html                                  | 2 +-
 htmx-test/top-games.html                                    | 2 +-
 7 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/api/src/main/java/com/robertforpresent/api/collection/presentation/rest/GamerCollectionController.java b/apps/api/src/main/java/com/robertforpresent/api/collection/presentation/rest/GamerCollectionController.java
index d1b4b0a..544a6c7 100644
--- a/apps/api/src/main/java/com/robertforpresent/api/collection/presentation/rest/GamerCollectionController.java
+++ b/apps/api/src/main/java/com/robertforpresent/api/collection/presentation/rest/GamerCollectionController.java
@@ -12,7 +12,7 @@
 
 @Slf4j
 @RestController
-@CrossOrigin(origins = "http://localhost:4200")
+@CrossOrigin(origins = "*")
 public class GamerCollectionController {
     private final TopRankedMapper mapper;
 
diff --git a/htmx-test/README.md b/htmx-test/README.md
index b9d2b16..3abc2ca 100644
--- a/htmx-test/README.md
+++ b/htmx-test/README.md
@@ -53,7 +53,7 @@ If you have a dev server running, just navigate to the htmx-test directory.
 ## 🔧 Configuration
 
 ### User ID
-The default user ID used in all API calls is: `123e4567-e89b-12d3-a456-426614174000`
+The default user ID used in all API calls is: `00000000-0000-0000-0000-000000000001`
 
 **To change it:**
 1. Open any of the HTML files (games.html, top-games.html, etc.)
diff --git a/htmx-test/backlog.html b/htmx-test/backlog.html
index 3d1d2ab..4282b86 100644
--- a/htmx-test/backlog.html
+++ b/htmx-test/backlog.html
@@ -58,7 +58,7 @@ <h3>Your Backlog <span id="game-count" class="badge bg-secondary">Loading...</sp
 
 // Load backlog games
 async function loadBacklog() {
-    const userId = document.getElementById('userId')?.value || '123e4567-e89b-12d3-a456-426614174000';
+    const userId = document.getElementById('userId')?.value || '00000000-0000-0000-0000-000000000001';
     const gameList = document.getElementById('game-list');
     const gameCount = document.getElementById('game-count');
     
diff --git a/htmx-test/games.html b/htmx-test/games.html
index bc7e658..8c5edce 100644
--- a/htmx-test/games.html
+++ b/htmx-test/games.html
@@ -20,7 +20,7 @@ <h3>Filters</h3>
             <div class="col-md-3">
                 <label for="userId" class="form-label">User ID</label>
                 <input type="text" class="form-control" id="userId" 
-                       value="123e4567-e89b-12d3-a456-426614174000"
+                       value="00000000-0000-0000-0000-000000000001"
                        placeholder="Enter UUID">
                 <small class="text-muted">Update this to your actual user ID</small>
             </div>
diff --git a/htmx-test/index.html b/htmx-test/index.html
index f3e0047..4fc7a67 100644
--- a/htmx-test/index.html
+++ b/htmx-test/index.html
@@ -89,7 +89,7 @@ <h4 class="mt-4">How to test:</h4>
                         <div class="alert alert-info mt-3">
                             <i class="bi bi-info-circle"></i> 
                             <strong>Note:</strong> You may need to update the <code>userId</code> in each view. 
-                            The default is <code>123e4567-e89b-12d3-a456-426614174000</code> - replace it with your actual UUID.
+                            The default is <code>00000000-0000-0000-0000-000000000001</code> - replace it with your actual UUID.
                         </div>
                         
                         <div class="alert alert-warning mt-3">
@@ -133,7 +133,7 @@ <h3>Quick API Test</h3>
             event.target.classList.add('active');
             
             // Load the view
-            fetch(`htmx-test/${viewName}`)
+            fetch(`${viewName}`)
                 .then(response => response.text())
                 .then(html => {
                     document.getElementById('main-content').innerHTML = html;
@@ -147,7 +147,7 @@ <h3>Quick API Test</h3>
         // Test API connection
         async function testApiConnection() {
             const resultDiv = document.getElementById('test-result');
-            const testUserId = '123e4567-e89b-12d3-a456-426614174000';
+            const testUserId = '00000000-0000-0000-0000-000000000001';
             
             resultDiv.innerHTML = '<div class="alert alert-info"><i class="bi bi-hourglass-split"></i> Testing connection to http://localhost:8080/api...</div>';
             
diff --git a/htmx-test/short-games.html b/htmx-test/short-games.html
index c814f94..602c935 100644
--- a/htmx-test/short-games.html
+++ b/htmx-test/short-games.html
@@ -19,7 +19,7 @@ <h3>Filters</h3>
             <div class="col-md-4">
                 <label for="userId" class="form-label">User ID</label>
                 <input type="text" class="form-control" id="userId" 
-                       value="123e4567-e89b-12d3-a456-426614174000"
+                       value="00000000-0000-0000-0000-000000000001"
                        placeholder="Enter UUID">
                 <small class="text-muted">Update this to your actual user ID</small>
             </div>
diff --git a/htmx-test/top-games.html b/htmx-test/top-games.html
index 1238980..495d20d 100644
--- a/htmx-test/top-games.html
+++ b/htmx-test/top-games.html
@@ -58,7 +58,7 @@ <h3>Top Rated Unplayed Games <span id="game-count" class="badge bg-secondary">Lo
 
 // Load top games
 async function loadTopGames() {
-    const userId = document.getElementById('userId')?.value || '123e4567-e89b-12d3-a456-426614174000';
+    const userId = document.getElementById('userId')?.value || '00000000-0000-0000-0000-000000000001';
     const gameList = document.getElementById('game-list');
     const gameCount = document.getElementById('game-count');