docs(openspec): add ui polish round proposal, spec, and tasks

2026-06-16 15:56:06 +00:00
parent 972dae64f2
commit b3f47310c3
3 changed files with 508 additions and 0 deletions
@@ -0,0 +1,76 @@
+# 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.