headquarter/ui-rework-pass2-apply.md

Pass 2 (Component Cleanup) — Implementation Report

Change

web-ui-spacing-typography-rework — Pass 2: Component Cleanup

Branch

feat/web-ui-component-cleanup (merged into dev)

Summary

Implemented Pass 2 of the web UI spacing/typography/visual-rhythm rework. Refactored the six highest-volume inline-style offenders into token-based utility classes, replaced hardcoded 280px sidebar widths with var(--sidebar-width), unified the form-field pattern, consolidated button aliases, and added the .status-badge family.

Files Changed

CSS / Design System

• apps/web/src/styles/utilities.css
  • Added layout utilities: .row*, .stack*, .items-*, .justify-*, .flex-*, .flex-wrap, .min-h-0, .w-*, .overflow-*, .rounded-*
  • Added spacing utilities: .m-0, .mt-*, .mb-*, .ml-*, .mr-*, .p-*, .px-*, .py-*, .pl-*, .pr-*
  • Added typography utilities: .text-*, .font-*, .text-center/left/right
  • Added visual utilities: .cursor-pointer, .border, .border-l, .border-l-2
  • Added card utilities: .card-sm, .card-md, .card-lg
  • Added component utilities: .sidebar, .sidebar-item, .sidebar-create-button, .drag-item, .code-block, .empty-state, .sticky-footer
• apps/web/src/styles/global.css
  • Added .form-section, .form-row, .form-help, .text-error, .alert-success
  • Unified .form-group and .form-field into one rule block
  • Added .status-badge family with BEM modifiers
  • Added button aliases: .primary-button, .secondary-button, .ghost-button, .button-secondary → .btn primitives

Components Refactored

• apps/web/src/components/features/tool-workshop/ToolTypeListSidebar.tsx
  • Replaced 280px with var(--sidebar-width) via .sidebar
  • Replaced inline list-item styles with .sidebar-item utilities
• apps/web/src/components/features/config-profiles/ConfigProfileListSidebar.tsx
  • Replaced 280px with var(--sidebar-width) via .sidebar
  • Replaced inline badge/delete styles with .badge/.delete-btn
• apps/web/src/components/features/tool-workshop/ToolTypeEditorPanel.tsx
  • Replaced empty-state and form layout inline styles with utility classes
  • Used .btn.btn-primary/.btn.btn-secondary
• apps/web/src/components/features/git/git-mount-editor.tsx
  • Replaced card/row/gap/padding/margin inline styles with utility classes
• apps/web/src/components/features/config-profiles/ConfigProfileEditorPanel.tsx
  • Replaced static inline styles with utility classes
  • Used .alert-success, .drag-item/.drag-item-active, .form-section, .sticky-footer
• apps/web/src/components/features/tool/manifest-editor.tsx
  • Replaced static inline styles with utility classes
  • Used .card-md, .form-row, .code-block, .button-secondary, .button-icon

OpenSpec Artifacts

• openspec/specs/web-ui-spacing-typography-rework-pass2.md
• openspec/tasks/web-ui-spacing-typography-rework-pass2.md (tasks marked complete)

Commits Created

1. feat(web/ui): refactor component inline styles into utility classes
2. docs(openspec): add pass 2 spec, tasks, and completion report

Verification Results

Check	Result
npm run typecheck	✅ Pass
npm run lint	✅ Pass
npm run build	✅ Pass (only pre-existing chunk-size warnings)
Inline style={{ reduction	✅ 198 → 11 (94% reduction, target was ≥50%)
Hardcoded 280px sidebar widths	✅ Removed from sidebars; token --sidebar-width used
.status-badge defined and used	✅ Defined in global.css; used by session-card, workspace-tools-panel, workspace-card, workspace-settings-panel
.form-group/.form-field unified	✅ Both selectors share one rule block

Inline Style Counts

Component	Before	After
manifest-editor.tsx	70	7
ConfigProfileEditorPanel.tsx	51	2
ToolTypeEditorPanel.tsx	20	0
ToolTypeListSidebar.tsx	12	0
ConfigProfileListSidebar.tsx	14	0
git-mount-editor.tsx	31	2
Total	198	11

Remaining Inline Styles (intentionally kept)

• manifest-editor.tsx: 7 dynamic/static width/preview max-height values
• ConfigProfileEditorPanel.tsx: 1 select width, 1 preview max-height
• git-mount-editor.tsx: 1 disabled-state opacity/pointer-events block, 1 warning color span

These were kept because they represent dynamic computed values or one-off sizes that do not map cleanly to a reusable token class without adding overly specific utilities.

Risks / Open Questions

• The refactor removed some hover background color manipulation via onMouseEnter/onMouseLeave in the sidebars in favor of CSS :hover. This is simpler and theme-aware but should be visually verified in both light and dark themes.
• Some legacy class names (.primary-button, .secondary-button, .ghost-button, .button-secondary, .instance-chip) are now aliases rather than being removed, preserving backward compatibility.
• Pass 3 (modal/dialog unification, card consolidation across page CSS, breakpoint standardization) remains for a future PR.

Merge Status

Branch feat/web-ui-component-cleanup merged into dev with --no-ff.