Developer
77 lines
2.6 KiB
Markdown
77 lines
2.6 KiB
Markdown
# OpenSpec Tasks: UI Polish Round — Config Sections, Home Paddings, Project Repos
|
|
|
|
## Change
|
|
`ui-polish-round-config-sections-home-projects`
|
|
|
|
## Parent Spec
|
|
`openspec/specs/ui-polish-round-config-sections-home-projects.md`
|
|
|
|
## Status
|
|
tasks
|
|
|
|
---
|
|
|
|
## Implementation Tasks
|
|
|
|
- [x] 1. Add shared config-section classes to `apps/web/src/styles/global.css`
|
|
- `.config-section`
|
|
- `.config-section-title`
|
|
- `.config-section-subtitle`
|
|
- `.config-section-header`
|
|
- Keep `.form-section` as backward-compatible alias
|
|
|
|
- [x] 2. Refactor `apps/web/src/components/features/tool/manifest-editor.tsx`
|
|
- Replace `.card-md.stack.stack-md` + `<h4 className="m-0">` blocks with `.config-section` + `.config-section-title`
|
|
- Keep preview block as `.card-md` if it is not a config section
|
|
|
|
- [x] 3. Refactor `apps/web/src/components/features/config-profiles/ConfigProfileEditorPanel.tsx`
|
|
- Replace `.form-section` grouped blocks with `.config-section`
|
|
- Use `.config-section-header` for title + action rows
|
|
- Add `.config-section-subtitle` where helpful
|
|
|
|
- [x] 4. Fix Home page paddings in `apps/web/src/styles/global.css`
|
|
- `.home-hero`: `--space-4` padding
|
|
- `.home-summary-card`: `--space-4` padding
|
|
- `.home-section`: `--space-4` padding
|
|
- Mobile (`max-width: 767px`): reduce to `--space-3`
|
|
|
|
- [x] 5. Improve project repository layout in `apps/web/src/components/features/project/ProjectCard.tsx`
|
|
- Wrap repositories in `<section className="project-repos">`
|
|
- Add `.project-repos-header` with "Repositories" title, repo count, and "Add Repository" button
|
|
- Remove old standalone `.project-add-repo` block
|
|
|
|
- [x] 6. Update `apps/web/src/styles/pages/projects.css`
|
|
- Left-align `.repo-list`
|
|
- Add `.project-repos` and `.project-repos-header` styles
|
|
- Remove or hide old `.project-add-repo` rules
|
|
- Add mobile stacking for `.project-repos-header`
|
|
|
|
- [x] 7. Verification
|
|
- Run `cd apps/web && npm run typecheck`
|
|
- Run `cd apps/web && npm run lint`
|
|
- Spot-check Tool Workshop, Config Profiles, Home, and Projects pages
|
|
- Test project card on mobile viewport
|
|
|
|
- [x] 8. Update OpenSpec artifacts
|
|
- Mark tasks complete
|
|
- Add final report note
|
|
|
|
---
|
|
|
|
## Acceptance Criteria
|
|
|
|
- All tasks above are completed.
|
|
- `npm run typecheck` passes.
|
|
- `npm run lint` passes.
|
|
- Tool Workshop and Config Profiles share the same `.config-section` visual style.
|
|
- Home page cards have comfortable padding on desktop and mobile.
|
|
- Project repositories are left-aligned with a clear header and an attached "Add Repository" button.
|
|
|
|
---
|
|
|
|
## Notes
|
|
|
|
- Do not delete `.form-section`; keep it as an alias.
|
|
- Do not change project data or behavior; only layout.
|
|
- Prefer one commit per task area.
|