alex/headquarter
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
cccf4379d8af193b361b8991aceffdd33de528b3
headquarter/openspec/changes/repo-restructure/apply-2.3-report.md
T
Developer cccf4379d8 refactor: extract CSS modules for session/settings and delete styles.css (Task 2.3) 
- Create InstanceList.module.css, AppShell.module.css, SettingsTabLayout.module.css
- Create CommitPanel.module.css, FileViewer.module.css
- Create page CSS files: sessions, repo-workspace, dashboard, projects,
  git-history, ssh-keys, settings
- Update components to import and use CSS modules
- Delete monolithic styles.css (2,255 lines)
- Update main.tsx to import page CSS and new modules

Quality gates: tsc (pass), eslint (pass), build (pass)
Refs: repo-restructure Task 2.3
2026-06-02 21:09:57 +00:00

2.9 KiB
Raw Blame History

Task 2.3 Apply Report: Extract CSS Modules for Session/Settings Components and Delete styles.css

Status: Success

Files Created (14)

CSS Modules

  • apps/web/src/components/features/session/InstanceList.module.css — Instance list, card, meta, actions, status dot, error badge, inline confirm
  • apps/web/src/components/layout/AppShell.module.css — Shell layout, header, nav, session item, nav badge, responsive queries
  • apps/web/src/components/features/settings/SettingsTabLayout.module.css — Settings layout, sidebar, nav links, panel, breadcrumb, responsive queries
  • apps/web/src/components/features/git/CommitPanel.module.css — Commit panel, file list, file item, commit form, button
  • apps/web/src/components/features/git/FileViewer.module.css — File viewer, header, breadcrumbs, content, empty state

Page CSS Files

  • apps/web/src/styles/pages/sessions.css — Sessions page layout, last session, active/recent sessions, create form, status badges
  • apps/web/src/styles/pages/repo-workspace.css — Repo workspace, header, layout, sidebar, responsive queries
  • apps/web/src/styles/pages/dashboard.css — Home page, hero, summary/project/session grids
  • apps/web/src/styles/pages/projects.css — Project list, project card, actions
  • apps/web/src/styles/pages/git-history.css — History container, commit list, detail panel, stats, diff
  • apps/web/src/styles/pages/ssh-keys.css — Key list, key card, SSH key item
  • apps/web/src/styles/pages/settings.css — Settings page, tabs, panel, actions

Files Modified (6)

  • apps/web/src/components/instance-list.tsx — Import InstanceList.module.css, replace className strings with styles.* references
  • apps/web/src/components/app-shell.tsx — Import AppShell.module.css, replace shell/nav/session class names
  • apps/web/src/components/settings-tab-layout.tsx — Import SettingsTabLayout.module.css, replace settings class names
  • apps/web/src/components/commit-panel.tsx — Import CommitPanel.module.css, replace commit panel class names
  • apps/web/src/main.tsx — Import all page CSS files

Files Deleted (1)

  • apps/web/src/styles.css — Monolithic 2,255-line stylesheet deleted

Quality Gate Results

Gate Result
npm run typecheck ✅ PASS — zero errors
npm run lint ✅ PASS — zero warnings
npm run build ✅ PASS — build succeeds, CSS 40.29 kB
styles.css deleted ✅ PASS — test -f styles.css fails

Notes

  • All component-specific CSS has been extracted into .module.css files
  • All page-specific CSS has been extracted into styles/pages/*.css files
  • Generic utilities (.stack, .row, .card, .button, .dialog, .form-field) remain in styles/utilities.css
  • Shell layout and resets remain in styles/global.css
  • Design tokens remain in styles/tokens.css
  • Syntax highlighting remains in styles/syntax-highlight.css
  • No visual regressions expected since all rules are preserved, just reorganized
Reference in New Issue View Git Blame Copy Permalink