headquarter/openspec/proposals/ui-polish-round-config-sections-home-projects.md

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?