Create basic UI pages (Library and Generate) #3

New issue

Closed

opened 2026-03-28 12:21:47 +00:00 by KnallerKalle · 1 comment

KnallerKalle commented

2026-03-28 12:21:47 +00:00

(Migrated from github.com)

Context

As part of Phase 1 (Foundation), we need to create the basic UI pages for the application.

Description

Create the following pages:

Library page (/library) - Lesson library with grid/list views, search, and filter
Generate page (/generate) - Lesson generation UI with parameter controls

Requirements

Library Page

Grid and list view modes
Search functionality by title/description
Filter by category, difficulty
Display lesson cards with metadata
Responsive mobile-first design
Use Tailwind CSS with Forest Canopy theme

Generate Page

Parameter inputs (sliders, dropdowns)
Duration slider (10-90 minutes)
Difficulty level selection
Focus area selection
Group vs. individual style toggle
Preview area for generated lessons

Shared Components

Mobile navigation (bottom tab bar)
Consistent header layout
Loading states
Empty states

Acceptance Criteria

Library page displays lessons in grid view
Library page supports list view toggle
Search functionality works
Filter by category/difficulty works
Generate page has all parameter inputs
Mobile navigation works (Home, Library, Generate)
Responsive design for mobile and desktop
Loading and empty states implemented

Design Reference

See .development/docs/design-document.md section "UI/UX Design"

Priority

High - This is Milestone 4 of Phase 1

Notes

Use existing database API when available for testing.
Mock lesson data for UI development until real data populate.

## Context As part of Phase 1 (Foundation), we need to create the basic UI pages for the application. ## Description Create the following pages: - Library page (/library) - Lesson library with grid/list views, search, and filter - Generate page (/generate) - Lesson generation UI with parameter controls ## Requirements ### Library Page - Grid and list view modes - Search functionality by title/description - Filter by category, difficulty - Display lesson cards with metadata - Responsive mobile-first design - Use Tailwind CSS with Forest Canopy theme ### Generate Page - Parameter inputs (sliders, dropdowns) - Duration slider (10-90 minutes) - Difficulty level selection - Focus area selection - Group vs. individual style toggle - Preview area for generated lessons ### Shared Components - Mobile navigation (bottom tab bar) - Consistent header layout - Loading states - Empty states ## Acceptance Criteria - [ ] Library page displays lessons in grid view - [ ] Library page supports list view toggle - [ ] Search functionality works - [ ] Filter by category/difficulty works - [ ] Generate page has all parameter inputs - [ ] Mobile navigation works (Home, Library, Generate) - [ ] Responsive design for mobile and desktop - [ ] Loading and empty states implemented ## Design Reference See .development/docs/design-document.md section "UI/UX Design" ## Priority High - This is Milestone 4 of Phase 1 ## Notes Use existing database API when available for testing. Mock lesson data for UI development until real data populate.

KnallerKalle commented

2026-03-28 12:25:42 +00:00

(Migrated from github.com)

Closed by commit 9913e3c. All acceptance criteria met:

✅ Library page displays lessons in grid view
✅ Library page supports list view toggle
✅ Search functionality works
✅ Filter by category/difficulty works
✅ Generate page has all parameter inputs
✅ Mobile navigation works (Home, Library, Generate)
✅ Responsive design for mobile and desktop
✅ Loading and empty states implemented

Closed by commit 9913e3c. All acceptance criteria met: - ✅ Library page displays lessons in grid view - ✅ Library page supports list view toggle - ✅ Search functionality works - ✅ Filter by category/difficulty works - ✅ Generate page has all parameter inputs - ✅ Mobile navigation works (Home, Library, Generate) - ✅ Responsive design for mobile and desktop - ✅ Loading and empty states implemented