feat(web/ui): consolidate dialogs, cards, and breakpoints (Pass 3)
- Unify modal/dialog system; .modal-* are now aliases of .dialog-* - Migrate WorkspacesPage, start-tool-modal, merge-dialog, workspace-tools-panel to .dialog-* - Add .card-sm/.card-md/.card-lg/.card-elevated/.card-borderless modifiers - Apply card utilities across workspaces, projects, ssh-keys, workspace-detail, git-history - Remove duplicated card-like background/border/padding from page CSS - Remove 860px breakpoint; standardize on 767px/768px mobile split - Add docs/development/ui-review-checklist.md - Archive web-ui-spacing-typography-rework OpenSpec change
This commit is contained in:
Developer
+99
@@ -0,0 +1,99 @@
|
||||
# OpenSpec Tasks: Web UI Component Cleanup — Inline Styles, Forms, Badges
|
||||
|
||||
## Change
|
||||
`web-ui-spacing-typography-rework` — Pass 2: Component Cleanup
|
||||
|
||||
## Parent Spec
|
||||
`openspec/specs/web-ui-spacing-typography-rework-pass2.md`
|
||||
|
||||
## Status
|
||||
tasks
|
||||
|
||||
---
|
||||
|
||||
## Implementation Tasks
|
||||
|
||||
- [x] 1. Add utility classes to `apps/web/src/styles/utilities.css`
|
||||
- Layout: `.row`, `.row-sm`, `.row-md`, `.row-lg`, `.stack`, `.stack-sm`, `.stack-md`, `.stack-lg`, `.stack-xl`, `.items-start`, `.items-center`, `.items-end`, `.justify-between`, `.justify-center`, `.justify-end`, `.flex-1`, `.flex-none`, `.w-full`, `.min-w-0`, `.max-w-prose`, `.max-w-form`
|
||||
- Spacing: `.m-0`, `.mt-1` through `.mt-6`, `.mb-0` through `.mb-6`, `.ml-auto`, `.mr-auto`, `.p-1` through `.p-5`, `.px-2` through `.px-4`, `.py-1` through `.py-4`
|
||||
- Typography: `.text-xs`, `.text-sm`, `.text-base`, `.text-lg`, `.text-xl`, `.font-mono`, `.font-medium`, `.font-semibold`, `.text-center`, `.text-left`, `.text-right`
|
||||
- Visual: `.cursor-pointer`, `.overflow-auto`, `.overflow-hidden`, `.rounded-sm`, `.rounded-md`, `.rounded-lg`, `.rounded-xl`, `.rounded-full`
|
||||
- Cards: `.card-sm`, `.card-md`, `.card-lg`
|
||||
|
||||
- [x] 2. Add form utilities to `apps/web/src/styles/global.css`
|
||||
- `.form-section`
|
||||
- `.form-row`
|
||||
- `.form-help`
|
||||
- `.text-error`
|
||||
- Unify `.form-group` and `.form-field` into one rule block
|
||||
|
||||
- [x] 3. Add button aliases in `apps/web/src/styles/global.css`
|
||||
- `.primary-button` → alias to `.btn.btn-primary`
|
||||
- `.secondary-button` / `.button-secondary` → alias to `.btn.btn-secondary`
|
||||
- `.ghost-button` → explicit style or alias to `.btn.btn-secondary`
|
||||
- `.btn-icon` modifier
|
||||
|
||||
- [x] 4. Add status badge family to `apps/web/src/styles/global.css`
|
||||
- `.status-badge`
|
||||
- `.status-badge--running`, `.status-badge--success`
|
||||
- `.status-badge--error`, `.status-badge--failed`
|
||||
- `.status-badge--warning`
|
||||
- `.status-badge--info`, `.status-badge--pending`, `.status-badge--idle`
|
||||
- Keep `.instance-chip` as deprecated alias if widely used
|
||||
|
||||
- [x] 5. Refactor `apps/web/src/components/features/tool/manifest-editor.tsx`
|
||||
- Replace static inline styles with utility classes
|
||||
- Keep dynamic values inline (e.g. drag-over background, preview content)
|
||||
- Target ≥50% reduction in inline style blocks
|
||||
|
||||
- [x] 6. Refactor `apps/web/src/components/features/config-profiles/ConfigProfileEditorPanel.tsx`
|
||||
- Replace static inline styles with utility classes
|
||||
- Use `.alert-success` for save success banner
|
||||
- Use `.drag-item` / `.drag-item-active` for include list items
|
||||
- Use `.dialog-actions` for sticky footer
|
||||
|
||||
- [x] 7. Refactor `apps/web/src/components/features/tool-workshop/ToolTypeEditorPanel.tsx`
|
||||
- Replace static inline styles with utility classes
|
||||
- Use shared empty-state and form header patterns
|
||||
|
||||
- [x] 8. Refactor `apps/web/src/components/features/tool-workshop/ToolTypeListSidebar.tsx`
|
||||
- Replace `280px` with `var(--sidebar-width)`
|
||||
- Replace list-item inline spacing with utility classes
|
||||
|
||||
- [x] 9. Refactor `apps/web/src/components/features/config-profiles/ConfigProfileListSidebar.tsx`
|
||||
- Replace `280px` with `var(--sidebar-width)`
|
||||
- Replace remaining inline badge styles with `.badge`/`.badge-secondary`
|
||||
- Replace inline delete button with `.btn-icon` or `.ghost-button.small`
|
||||
|
||||
- [x] 10. Refactor `apps/web/src/components/features/git/git-mount-editor.tsx`
|
||||
- Replace static inline styles with utility classes
|
||||
- Use `.stack`, `.row`, `.card-*`, `.gap-*`, `.p-*`, `.mb-*`
|
||||
|
||||
- [x] 11. Verification
|
||||
- Run `cd apps/web && npm run typecheck`
|
||||
- Run `cd apps/web && npm run lint`
|
||||
- Count inline style blocks in target components; confirm ≥50% reduction overall
|
||||
- Search for `280px` in `apps/web/src`; confirm zero matches
|
||||
- Spot-check Tool Workshop and Config Profiles pages
|
||||
|
||||
---
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- All tasks above are completed.
|
||||
- `npm run typecheck` passes.
|
||||
- `npm run lint` passes.
|
||||
- Inline style blocks in the six target components reduced by at least 50% overall.
|
||||
- No hardcoded `280px` sidebar widths remain in source.
|
||||
- `.status-badge` family is defined and used by at least one caller.
|
||||
- `.form-group` and `.form-field` share a single CSS rule block.
|
||||
- Button aliases work visually.
|
||||
|
||||
---
|
||||
|
||||
## Notes
|
||||
|
||||
- Do not rename or remove existing classes without aliases; backward compatibility matters.
|
||||
- Keep dynamic inline styles (computed values) in JS.
|
||||
- Do not unify modals or cards across page CSS files in this pass (Pass 3).
|
||||
- Prefer one commit per major component or utility group.
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
# OpenSpec Tasks: Web UI Consolidation & Polish — Modals, Cards, Breakpoints
|
||||
|
||||
## Change
|
||||
`web-ui-spacing-typography-rework` — Pass 3: Consolidation & Polish
|
||||
|
||||
## Parent Spec
|
||||
`openspec/specs/web-ui-spacing-typography-rework-pass3.md`
|
||||
|
||||
## Status
|
||||
tasks
|
||||
|
||||
---
|
||||
|
||||
## Implementation Tasks
|
||||
|
||||
- [x] 1. Unify modal/dialog system in `apps/web/src/styles/global.css`
|
||||
- Ensure `.dialog-overlay`, `.dialog`, `.dialog-lg`, `.dialog-header`, `.dialog-body`, `.dialog-footer`, `.dialog-actions`, `.dialog-close` are canonical
|
||||
- Add `.modal-overlay` and `.modal-content` as aliases/wrappers
|
||||
- Add mobile dialog slide-up behavior at `767px`
|
||||
|
||||
- [x] 2. Migrate at least two `.modal-*` callers to `.dialog-*`
|
||||
- Candidates: `components/features/tool/start-tool-modal.tsx`, `components/features/workspace/workspace-tools-panel.tsx`, `components/features/git/merge-dialog.tsx`, `pages/WorkspacesPage.tsx`, `pages/SessionsPage.tsx`, `components/features/tool/start-tool-fab.tsx`
|
||||
|
||||
- [x] 3. Consolidate card patterns in `apps/web/src/styles/global.css`
|
||||
- `.card`, `.card-sm`, `.card-md`, `.card-lg`, `.card-elevated`, `.card-borderless`
|
||||
|
||||
- [x] 4. Remove duplicated card rules from page CSS files
|
||||
- `styles/pages/workspaces.css`
|
||||
- `styles/pages/sessions.css`
|
||||
- `styles/pages/ssh-keys.css`
|
||||
- `styles/pages/workspace-detail.css`
|
||||
- `styles/pages/projects.css`
|
||||
- `styles/pages/git-history.css`
|
||||
|
||||
- [x] 5. Standardize breakpoints
|
||||
- Remove `860px` breakpoint from `global.css`
|
||||
- Make `global.css` line 779 use `767px` instead of `768px`
|
||||
- Ensure all `@media` queries use `480px`, `767px`, `768px`, `1024px`, or `1280px`
|
||||
- Prefer mobile-first `min-width: 768px` for refactored rules
|
||||
|
||||
- [x] 6. Add token documentation header to `apps/web/src/styles/tokens.css`
|
||||
|
||||
- [x] 7. Create `docs/development/ui-review-checklist.md`
|
||||
|
||||
- [x] 8. Verification
|
||||
- Run `cd apps/web && npm run typecheck`
|
||||
- Run `cd apps/web && npm run lint`
|
||||
- Search for `860px` in `apps/web/src`; confirm zero matches
|
||||
- Search for `.modal-overlay` / `.modal-content`; confirm they are aliases or have fewer direct callers
|
||||
- Open a dialog on desktop and mobile viewport and verify behavior
|
||||
- Confirm `tokens.css` documentation header exists
|
||||
- Confirm `docs/development/ui-review-checklist.md` exists
|
||||
|
||||
- [x] 9. Update OpenSpec artifacts
|
||||
- Mark tasks in `openspec/tasks/web-ui-spacing-typography-rework-pass3.md` complete
|
||||
- Add final report note
|
||||
|
||||
- [x] 10. Archive OpenSpec change
|
||||
- Move `openspec/proposals/`, `openspec/specs/`, `openspec/tasks/` files for this change to `openspec/changes/archive/web-ui-spacing-typography-rework/` (or current archive structure)
|
||||
- Update `progress.md` if applicable
|
||||
|
||||
---
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- All tasks above are completed.
|
||||
- `npm run typecheck` passes.
|
||||
- `npm run lint` passes.
|
||||
- `.modal-overlay` and `.modal-content` are aliases/wrappers of `.dialog-*`.
|
||||
- At least two `.modal-*` callers migrated to `.dialog-*`.
|
||||
- `.card` family exists and is used by at least two page CSS files.
|
||||
- `860px` breakpoint removed.
|
||||
- `tokens.css` has documentation header.
|
||||
- `docs/development/ui-review-checklist.md` exists.
|
||||
- OpenSpec change archived.
|
||||
|
||||
---
|
||||
|
||||
## Notes
|
||||
|
||||
- Keep aliases for backward compatibility; do not delete `.modal-*` classes if other callers remain.
|
||||
- Do not change behavior of dialogs; only visual unification.
|
||||
- Do not remove page-specific layout grids; only remove duplicated card-like background/border/padding.
|
||||
- Prefer one commit per major area (modals, cards, breakpoints, docs).
|
||||
+108
@@ -0,0 +1,108 @@
|
||||
# OpenSpec Tasks: Web UI Foundations — Spacing, Typography & Visual Rhythm
|
||||
|
||||
## Change
|
||||
`web-ui-spacing-typography-rework` — Pass 1: Foundations
|
||||
|
||||
## Parent Spec
|
||||
`openspec/specs/web-ui-spacing-typography-rework.md`
|
||||
|
||||
## Status
|
||||
tasks
|
||||
|
||||
---
|
||||
|
||||
## Implementation Tasks
|
||||
|
||||
- [x] 1. Expand token scale in `apps/web/src/styles/tokens.css`
|
||||
- Add `--space-7`, `--space-9`, `--space-12`
|
||||
- Add `--radius-sm`, `--radius-md`, `--radius-lg`, `--radius-xl`, `--radius-full`
|
||||
- Add `--line-height-tight`, `--line-height-normal`, `--line-height-relaxed`
|
||||
- Add `--shadow-sm`, `--shadow-md`, `--shadow-lg`, `--shadow-xl`
|
||||
- Add `--touch-target`, `--sidebar-width`, `--mobile-nav-height`
|
||||
- Add a documentation header comment explaining the token naming convention
|
||||
|
||||
- [x] 2. Add button primitives to `apps/web/src/styles/global.css`
|
||||
- `.btn`, `.btn-primary`, `.btn-secondary`, `.btn-sm`
|
||||
- Include `:focus-visible`, `:hover`, and `:disabled` states
|
||||
|
||||
- [x] 3. Add link-button primitive to `apps/web/src/styles/global.css`
|
||||
|
||||
- [x] 4. Add form primitives to `apps/web/src/styles/global.css`
|
||||
- `.form-input`, `.form-textarea`
|
||||
- `.checkbox-label`
|
||||
- `.hint`
|
||||
- `.form-error`, `.error-message`
|
||||
|
||||
- [x] 5. Add alert primitives to `apps/web/src/styles/global.css`
|
||||
- `.alert`, `.alert-error`, `.alert-warning`, `.alert-info`
|
||||
|
||||
- [x] 6. Add loading-state primitive to `apps/web/src/styles/global.css`
|
||||
|
||||
- [x] 7. Add badge primitives to `apps/web/src/styles/global.css`
|
||||
- `.badge`, `.badge-success`, `.badge-secondary`
|
||||
|
||||
- [x] 8. Add text utility primitives
|
||||
- `.text-muted` in `global.css`
|
||||
|
||||
- [x] 9. Add mobile detail view styles to `apps/web/src/styles/utilities.css`
|
||||
- `.mobile-detail-view`
|
||||
- `.mobile-detail-header`
|
||||
- `.mobile-detail-header-content`
|
||||
- `.mobile-detail-title`
|
||||
- `.mobile-detail-subtitle`
|
||||
- `.mobile-detail-actions`
|
||||
- `.mobile-detail-fields`
|
||||
- `.mobile-detail-field`
|
||||
- `.mobile-detail-field-label`
|
||||
- `.mobile-detail-field-value`
|
||||
- `.mobile-detail-code`
|
||||
|
||||
- [x] 10. Add mobile list search styles to `apps/web/src/styles/utilities.css`
|
||||
- `.mobile-list-search`
|
||||
- `.mobile-list-search-input`
|
||||
|
||||
- [x] 11. Fix mobile nav / FAB / bottom-sheet collisions
|
||||
- Update `--mobile-nav-height` usage in `utilities.css` and `global.css`
|
||||
- `.start-tool-fab` uses `calc(var(--mobile-nav-height) + var(--space-3))`
|
||||
- `.shell-content.mobile` uses `calc(var(--mobile-nav-height) + var(--space-3))`
|
||||
- `.mobile-edit-actions` uses `var(--mobile-nav-height)`
|
||||
|
||||
- [x] 12. Add visible focus states
|
||||
- Add `:focus-visible` rings for `.nav-item`, `.mobile-nav-item`, `.tab`, `.tree-entry`, `.btn`, `.form-input`, `.form-textarea`, `.link-button`
|
||||
|
||||
- [x] 13. Replace critical inline font-size violations
|
||||
- Replace `fontSize: "0.7rem"` in `ConfigProfileListSidebar.tsx` with token-based class
|
||||
- Audit for other `0.7rem` / `10px` / `11px` inline styles and fix
|
||||
|
||||
- [x] 14. Add SSH key page signing/verification styles
|
||||
- `.key-signing`, `.key-verification`, `.signature-result`, `.verify-result` in `utilities.css`
|
||||
|
||||
- [x] 15. Add profile page avatar styles
|
||||
- `.profile-avatar-section`, `.avatar-preview`, `.avatar-image`, `.avatar-placeholder` in `utilities.css`
|
||||
|
||||
- [x] 16. Verification
|
||||
- Run `cd apps/web && npm run typecheck`
|
||||
- Run `cd apps/web && npm run lint`
|
||||
- Search for each previously undefined class and confirm it now has a rule
|
||||
- Spot-check mobile detail view, SSH keys page, and profile page
|
||||
|
||||
---
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- All tasks above are completed.
|
||||
- `npm run typecheck` passes.
|
||||
- `npm run lint` passes.
|
||||
- No referenced class from the audit remains undefined.
|
||||
- Mobile nav/FAB/edit-actions no longer collide on devices with safe-area insets.
|
||||
- All interactive controls have visible `:focus-visible` states.
|
||||
- Inline `0.7rem` font sizes are replaced with token-based classes.
|
||||
|
||||
---
|
||||
|
||||
## Notes
|
||||
|
||||
- Do not rename or remove existing tokens; only add new ones.
|
||||
- Do not refactor inline styles in editor components in this pass (Pass 2).
|
||||
- Do not unify modals/dialogs in this pass (Pass 3).
|
||||
- Keep each commit focused; prefer one commit per task group.
|
||||
Reference in New Issue
Block a user