gaetan/knowledgify

Implement: Frontend — Go templates, Alpine.js review screen, and dashboard #18

New issue

Open

opened 2026-08-20 15:32:28 +02:00 by gaetan · 0 comments

gaetan commented

2026-08-20 15:32:28 +02:00

Owner

Wayfinder map: #1
Dependencies: #17 (HTTP handlers and routing)

Description

Build the frontend: Go HTML templates, Alpine.js for review interactivity, dashboard, and category pages.

Tasks

Create web/templates/ and web/static/ directories
Go HTML templates:
- dashboard.html — stats, due count, category cards
- categories.html — list of categories with card counts
- review.html — review screen with card display
Alpine.js for review interactivity:
- Space bar to reveal answer
- Keys 1-4 to rate (Again/Hard/Good/Easy)
- Q&A card flow: show question → space reveals answer → 1-4 rates
- Vrai/Faux flow: show statement → click V/F → show answer → 1-4 rates
Progress indicator (cards reviewed, remaining)
Category badges on cards
Post-session summary (cards reviewed, accuracy)
Static CSS for minimal styling
Top navigation bar: Dashboard | Categories
Update handlers to serve templates (not just JSON)

Acceptance criteria

Dashboard page renders with stats
Categories page lists all categories
Review screen works: reveal with space, rate with 1-4
Both Q&A and Vrai/Faux card types display correctly
Post-session summary shows after session complete
Top nav bar links work
CSS styling is minimal but functional

**Wayfinder map:** #1 **Dependencies:** #17 (HTTP handlers and routing) ## Description Build the frontend: Go HTML templates, Alpine.js for review interactivity, dashboard, and category pages. ## Tasks - [ ] Create `web/templates/` and `web/static/` directories - [ ] Go HTML templates: - `dashboard.html` — stats, due count, category cards - `categories.html` — list of categories with card counts - `review.html` — review screen with card display - [ ] Alpine.js for review interactivity: - Space bar to reveal answer - Keys 1-4 to rate (Again/Hard/Good/Easy) - Q&A card flow: show question → space reveals answer → 1-4 rates - Vrai/Faux flow: show statement → click V/F → show answer → 1-4 rates - [ ] Progress indicator (cards reviewed, remaining) - [ ] Category badges on cards - [ ] Post-session summary (cards reviewed, accuracy) - [ ] Static CSS for minimal styling - [ ] Top navigation bar: Dashboard | Categories - [ ] Update handlers to serve templates (not just JSON) ## Acceptance criteria - Dashboard page renders with stats - Categories page lists all categories - Review screen works: reveal with space, rate with 1-4 - Both Q&A and Vrai/Faux card types display correctly - Post-session summary shows after session complete - Top nav bar links work - CSS styling is minimal but functional

gaetan referenced this issue

2026-08-20 15:32:44 +02:00

Implement: Sample content (~50 cards) and end-to-end verification #19