Developer
101 lines
3.7 KiB
Markdown
101 lines
3.7 KiB
Markdown
# SDD Proposal: UI Polish Round — Config Sections, Home Paddings, Project Repos
|
|
|
|
## Status
|
|
**Phase:** proposal
|
|
**Date:** 2026-06-16
|
|
**Owner:** el Gentleman
|
|
|
|
---
|
|
|
|
## User Story
|
|
|
|
As a Headquarter user, I want the Tool Workshop and Config Profiles editors to share a consistent section pattern, the Home page to have readable card paddings, and the Projects page to clearly show which repositories belong to a project so that the UI feels coherent and scannable.
|
|
|
|
---
|
|
|
|
## Problems
|
|
|
|
1. **Config sections are inconsistent**
|
|
- Config Profiles uses `.form-section`.
|
|
- Tool Workshop's `manifest-editor.tsx` uses `.card-md.stack.stack-md` with bare `<h4>` headings.
|
|
- Both serve the same purpose: a grouped configuration block with a title.
|
|
|
|
2. **Home page cards lost padding**
|
|
- The `.home-summary-card` has no padding.
|
|
- `.home-hero` and `.home-section` may have lost explicit padding during the card consolidation pass.
|
|
- The result is cards that touch their borders and feel cramped.
|
|
|
|
3. **Project repositories look misaligned**
|
|
- In the expanded project card, the repository list is rendered but visually floats on the right/indented.
|
|
- There is no clear "Repositories" header.
|
|
- The "Add Repository" button is detached from the repo list; it is unclear whether it adds a repo or performs a project-level action.
|
|
|
|
---
|
|
|
|
## Goals
|
|
|
|
1. Introduce a single shared `.config-section` component class and use it in both Config Profiles and Tool Workshop.
|
|
2. Restore comfortable, token-based padding on Home hero, summary cards, and section cards.
|
|
3. Left-align repositories under the project header, add a clear "Repositories" section header, and visually attach the "Add Repository" button to the repo list.
|
|
|
|
---
|
|
|
|
## Non-Goals
|
|
|
|
- No changes to backend APIs or data models.
|
|
- No redesign of the Home page layout or information architecture.
|
|
- No changes to mobile project list behavior.
|
|
- No new features (e.g., no new repo actions).
|
|
|
|
---
|
|
|
|
## High-Level Approach
|
|
|
|
1. **Shared config section**
|
|
- Add `.config-section` and `.config-section-title` to `global.css`.
|
|
- Refactor `manifest-editor.tsx` to use `.config-section` instead of `.card-md.stack.stack-md` + `<h4>`.
|
|
- Refactor `ConfigProfileEditorPanel.tsx` to use `.config-section` instead of `.form-section` for its grouped blocks.
|
|
|
|
2. **Home padding fix**
|
|
- Add explicit padding to `.home-hero`, `.home-summary-card`, and `.home-section`.
|
|
- Use `--space-*` tokens.
|
|
|
|
3. **Project repo layout**
|
|
- In `ProjectCard.tsx`, wrap repositories in a `<section className="project-repos">`.
|
|
- Add a header row with "Repositories" label and repo count.
|
|
- Move the "Add Repository" button into the repo section footer, directly under the list.
|
|
- Left-align `.repo-list` so blocks fill from the left edge of the project detail area.
|
|
- Update `styles/pages/projects.css` accordingly.
|
|
|
|
---
|
|
|
|
## Risks
|
|
|
|
| Risk | Severity | Mitigation |
|
|
|------|----------|------------|
|
|
| `.form-section` has other consumers outside config profiles | Low | Keep `.form-section` as alias; do not delete. |
|
|
| `.card-md` consumers outside manifest editor | Low | `.config-section` will be equivalent; verify no visual change. |
|
|
| Project repo layout changes affect mobile | Medium | Test both desktop and mobile expanded project card. |
|
|
|
|
---
|
|
|
|
## Effort Estimate
|
|
|
|
| Area | Files | Lines (est) |
|
|
|---|---|---|
|
|
| Shared config section | 3 | ~120 |
|
|
| Home padding | 2 | ~40 |
|
|
| Project repo layout | 2 | ~100 |
|
|
| OpenSpec artifacts | 3 | ~80 |
|
|
| **Total** | **10** | **~340** |
|
|
|
|
Review workload is within the 400-line budget.
|
|
|
|
---
|
|
|
|
## Next Recommended Phase
|
|
|
|
**Spec** — detail the exact CSS rules, component markup changes, and acceptance criteria.
|
|
|
|
Should I proceed to spec?
|