alexei.dolgolyov
86a9d344e6
Add the foundation for audio processing filters, mirroring the existing picture filter/postprocessing template system: - AudioFilter base class, AudioFilterRegistry, AudioFilterOptionDef - AudioProcessingTemplate dataclass + SQLite-backed store - audio_filter_template meta-filter with recursive resolution - Full REST API: CRUD templates + filter registry discovery - Dependency injection wired in dependencies.py and main.py
2.7 KiB
2.7 KiB
Phase 8: Frontend Design Consistency Review
Status: ⬜ Not Started Parent plan: PLAN.md Domain: frontend
Objective
Review all new frontend UI created in Phases 5-6 for visual consistency, design quality, and UX polish using the frontend-design skill agent. Fix any issues found.
Tasks
- Task 1: Review Audio Processing Templates section for design consistency
- Card layout, spacing, typography alignment with existing sections
- Filter editor modal — controls alignment, visual hierarchy, grouping
- Responsive behavior at different viewport widths
- Task 2: Review Processed Audio Source cards for design consistency
- Card style matches existing source cards (capture, picture, value sources)
- EntitySelect pickers are visually consistent
- Type badges/icons are clear and distinguishable
- Task 3: Review Capture Audio Source card (relabeled)
- Label/icon updates look correct
- No visual regressions from the rename
- Task 4: Review source type picker/creation flow
- Type selector is clear and accessible
- Transition between types is smooth
- Empty states handled properly
- Task 5: Review real-time audio preview UI
- Spectrum visualization looks polished
- Source picker and controls are well-placed
- Loading/error states
- Task 6: Fix all design issues found in Tasks 1-5
- CSS adjustments for spacing, alignment, typography
- Icon/color consistency
- Dark mode compatibility (if applicable)
- Hover/focus/active states on interactive elements
- Task 7: Cross-browser spot-check (if applicable)
Files to Modify/Create
static/css/dashboard.css— modify — design fixesstatic/js/features/audio-processing-templates.ts— modify — UX fixesstatic/js/features/audio-processing-template-modal.ts— modify — UX fixesstatic/js/features/audio-sources.ts— modify — UX fixes- Any template/HTML files — modify — structural fixes
Acceptance Criteria
- All new UI sections are visually consistent with existing sections
- No orphaned styles or visual regressions
- Filter editor is intuitive and well-organized
- Cards, modals, and controls follow existing design language
- Interactive elements have proper hover/focus/active states
Notes
- This phase uses the frontend-design skill agent for review
- Focus on consistency with existing UI, not a complete redesign
- The project uses vanilla CSS (no framework) — fixes must use the existing stylesheet approach
Review Checklist
- All tasks completed
- Code follows project conventions
- No unintended side effects
- Build passes
- Tests pass (new + existing)