# Workspace Visual Overhaul - Tasks

## Phase 1: Workspace Header

- [ ] **Task 1.1**: Create WorkspaceHeader component
  - Create `components/workspace-header.tsx`
  - Project icon + name on left
  - History + Settings buttons on right
  - Props: project, currentRepo, onNavigateToHistory, onNavigateToSettings
  - Add CSS styles

- [ ] **Task 1.2**: Integrate WorkspaceHeader into RepoWorkspace
  - Replace current project header in `pages/repo-workspace.tsx`
  - Add navigation handlers
  - Remove old header styles

## Phase 2: Project Settings Page

- [ ] **Task 2.1**: Create SettingsTabLayout component
  - Create `components/settings-tab-layout.tsx`
  - Sidebar with tab links
  - Content area for tab content
  - Active tab highlighting
  - Mobile responsive (tabs at top)

- [ ] **Task 2.2**: Create ProjectSettingsPage
  - Create `pages/project-settings.tsx`
  - Use SettingsTabLayout
  - Implement General tab (name, description, dates)
  - Save/cancel buttons
  - Danger zone section

- [ ] **Task 2.3**: Add API endpoint for project updates
  - Add `PUT /projects/:id` to `src/api/projects.py`
  - Update name and description
  - Return updated project
  - Add validation

## Phase 3: Move Repository Management

- [ ] **Task 3.1**: Create RepositoriesSettingsTab
  - Create `components/repositories-settings-tab.tsx`
  - Move logic from `pages/git-repositories.tsx`
  - Repository list with cards
  - Add/delete functionality
  - Integrate into settings page

- [ ] **Task 3.2**: Update routes
  - Remove `/projects/:id/repositories` route
  - Add `/projects/:id/settings` route
  - Add tab routes: `/settings/general`, `/settings/repositories`
  - Add redirect from old repo management URL

- [ ] **Task 3.3**: Update navigation
  - Remove "Manage Repositories" from sidebar
  - Update any links to old repo management page
  - Add "Settings" link to workspace header

## Phase 4: Sidebar Cleanup

- [ ] **Task 4.1**: Simplify sidebar
  - Remove management links from sidebar
  - Keep only: Branch selector, File tree
  - Adjust sidebar width if needed
  - Update sidebar styles

- [ ] **Task 4.2**: Update workspace layout
  - Ensure clean separation between header, sidebar, and main content
  - Fix any layout issues from header changes
  - Ensure consistent spacing

## Phase 5: Members Placeholder

- [ ] **Task 5.1**: Create Members tab placeholder
  - Create `components/members-settings-tab.tsx`
  - "Coming soon" message
  - Brief feature description
  - Add to settings tabs

## Phase 6: Polish & Integration

- [ ] **Task 6.1**: Add breadcrumbs
  - Add breadcrumb navigation to settings page
  - Format: Projects > My Project > Settings > General
  - Make segments clickable

- [ ] **Task 6.2**: Add mobile responsiveness
  - Settings tabs become horizontal on mobile
  - Header actions collapse to icons only
  - Sidebar becomes toggleable overlay

- [ ] **Task 6.3**: Add transitions
  - Tab switching animations
  - Page transition animations
  - Button hover effects

- [ ] **Task 6.4**: Test navigation flow
  - Workspace → Settings → back
  - Settings tabs switching
  - Save changes flow
  - Delete project flow

## Phase 7: Quality Gates

- [ ] **Task 7.1**: Run backend checks
  - ruff check
  - mypy
  - pytest

- [ ] **Task 7.2**: Run frontend checks
  - TypeScript typecheck
  - ESLint
  - Build

- [ ] **Task 7.3**: Manual testing
  - Test all navigation flows
  - Test responsive breakpoints
  - Test form validation
  - Verify no broken links