Developer
563ff13969
- Add ProjectListItem component with project header actions - Show repositories horizontally with branch labels - List workspaces vertically under each repo - Show running tools per workspace from useSessions - Link workspace names to /workspaces/:id - Link tool names to web URL or terminal page - Keep existing mobile view and dialogs unchanged
81 lines
2.2 KiB
Markdown
81 lines
2.2 KiB
Markdown
# OpenSpec Tasks: Project Pane Rework
|
|
|
|
## Change
|
|
`project-pane-rework`
|
|
|
|
## Parent Spec
|
|
`openspec/specs/project-pane-rework.md`
|
|
|
|
## Status
|
|
tasks
|
|
|
|
---
|
|
|
|
## Implementation Tasks
|
|
|
|
- [ ] 1. Create `apps/web/src/components/features/project/ProjectListItem.tsx`
|
|
- Project header with name, description, Edit/Delete buttons
|
|
- Horizontal repo list using `ProjectRepoItem` helper
|
|
- Vertical workspace/tool lists using `SessionToolLink` helper
|
|
- Match running sessions from `useSessions` to workspaces/repos/projects
|
|
|
|
- [ ] 2. Update `apps/web/src/pages/ProjectsPage.tsx`
|
|
- Import `ProjectListItem` and `useSessions`
|
|
- Replace desktop `ProjectCard` map with `ProjectListItem` map
|
|
- Remove unused `expandedProject` state and toggle logic from desktop view
|
|
- Keep mobile view and dialogs unchanged
|
|
|
|
- [ ] 3. Add CSS to `apps/web/src/styles/pages/projects.css`
|
|
- `.project-list`
|
|
- `.project-list-item`
|
|
- `.project-list-item-header`
|
|
- `.project-list-item-title`
|
|
- `.project-list-item-actions`
|
|
- `.project-repo-list`
|
|
- `.project-repo-item`
|
|
- `.project-repo-item-header`
|
|
- `.project-repo-name`
|
|
- `.project-repo-branch`
|
|
- `.project-repo-workspaces`
|
|
- `.project-repo-workspace`
|
|
- `.workspace-name`
|
|
- `.workspace-tool-list`
|
|
- `.workspace-tool-link`
|
|
- `.session-status-dot`
|
|
- `.tool-name`
|
|
|
|
- [ ] 4. Verification
|
|
- Run `cd apps/web && npm run typecheck`
|
|
- Run `cd apps/web && npm run lint`
|
|
- Spot-check desktop Projects page
|
|
- Test workspace and tool links
|
|
- Verify mobile view still works
|
|
|
|
- [ ] 5. Update OpenSpec artifacts
|
|
- Mark tasks complete
|
|
- Add final report note
|
|
|
|
---
|
|
|
|
## Acceptance Criteria
|
|
|
|
- All tasks above are completed.
|
|
- `npm run typecheck` passes.
|
|
- `npm run lint` passes.
|
|
- Desktop Projects page shows the new flat list layout.
|
|
- Each project header has name + Edit + Delete.
|
|
- Repositories are horizontal.
|
|
- Each repo shows name + branch.
|
|
- Workspaces and running tools are listed vertically under each repo.
|
|
- Workspace links navigate to `/workspaces/:workspaceId`.
|
|
- Tool links open the tool.
|
|
- Mobile view remains functional.
|
|
|
|
---
|
|
|
|
## Notes
|
|
|
|
- Do not change backend APIs or data models.
|
|
- Keep mobile behavior unchanged.
|
|
- Prefer one commit per major area (component, page integration, CSS).
|