alexei.dolgolyov
6b0e4e5539
Fix audio source modal error class (modal-error), use Modal.showError(), reorder audio source card description, remove redundant APT filter count badge, clean up unused imports in audio-sources.ts.
66 lines
2.7 KiB
Markdown
66 lines
2.7 KiB
Markdown
# Phase 8: Frontend Design Consistency Review
|
|
|
|
**Status:** ✅ Done
|
|
**Parent plan:** [PLAN.md](./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
|
|
|
|
- [x] 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
|
|
- [x] 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
|
|
- [x] Task 3: Review Capture Audio Source card (relabeled)
|
|
- Label/icon updates look correct
|
|
- No visual regressions from the rename
|
|
- [x] Task 4: Review source type picker/creation flow
|
|
- Type selector is clear and accessible
|
|
- Transition between types is smooth
|
|
- Empty states handled properly
|
|
- [x] Task 5: Review real-time audio preview UI
|
|
- Spectrum visualization looks polished
|
|
- Source picker and controls are well-placed
|
|
- Loading/error states
|
|
- [x] 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
|
|
- [x] Task 7: Cross-browser spot-check (if applicable)
|
|
|
|
## Files to Modify/Create
|
|
- `static/css/dashboard.css` — **modify** — design fixes
|
|
- `static/js/features/audio-processing-templates.ts` — **modify** — UX fixes
|
|
- `static/js/features/audio-processing-template-modal.ts` — **modify** — UX fixes
|
|
- `static/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
|
|
- [x] All tasks completed
|
|
- [x] Code follows project conventions
|
|
- [x] No unintended side effects
|
|
- [x] Build passes
|
|
- [x] Tests pass (new + existing)
|
|
|
|
## Handoff to Next Phase
|
|
<!-- N/A — final phase -->
|