# Workspace Visual Overhaul - Design

## Layout Architecture

### New Workspace Layout

```
┌──────────────────────────────────────────────────────────────────────┐
│  App Shell (Header + Nav)                                             │
├──────────────────────────────────────────────────────────────────────┤
│  Project Workspace Header                                             │
│  ┌─────────────────────────────────────────────────────────────────┐ │
│  │  📁 My Project          [History] [⚙️ Settings]                │ │
│  │                         (secondary actions on right)           │ │
│  └─────────────────────────────────────────────────────────────────┘ │
├──────────────────────┬───────────────────────────────────────────────┤
│                      │                                               │
│  Sidebar (280px)     │  Main Content                                 │
│  ┌────────────────┐  │  ┌─────────────────────────────────────────┐  │
│  │ Branch ▼        │  │  │ Breadcrumbs: src > components           │  │
│  ├────────────────┤  │  ├─────────────────────────────────────────┤  │
│  │ 📁 src/         │  │  │ Toolbar: [Edit] [Raw] [Blame]           │  │
│  │ 📁 tests/       │  │  ├─────────────────────────────────────────┤  │
│  │ 📄 README.md    │  │  │                                         │  │
│  │ ...             │  │  │ function hello() {                      │  │
│  │                 │  │  │   return "world";                       │  │
│  └────────────────┘  │  │ }                                       │  │
│                      │  │                                         │  │
│                      │  └─────────────────────────────────────────┘  │
│                      │                                               │
└──────────────────────┴───────────────────────────────────────────────┘
```

### Project Settings Page

```
┌──────────────────────────────────────────────────────────────────────┐
│  App Shell (Header + Nav)                                             │
├──────────────────────────────────────────────────────────────────────┤
│  Settings Header                                                      │
│  ┌─────────────────────────────────────────────────────────────────┐ │
│  │  ← Back to Project    My Project / Settings                    │ │
│  └─────────────────────────────────────────────────────────────────┘ │
├──────────────────┬───────────────────────────────────────────────────┤
│                  │                                                   │
│  Settings Tabs   │  Tab Content                                      │
│  ┌──────────────┐│  ┌─────────────────────────────────────────────┐  │
│  │ General      ││  │ General Settings                              │  │
│  ├──────────────┤│  │                                               │  │
│  │ Repositories ││  │ Project Name: [My Project        ]            │  │
│  ├──────────────┤│  │ Description:  [A test project... ]            │  │
│  │ Members      ││  │                                               │  │
│  ├──────────────┤│  │ [Save Changes]                                │  │
│  │ Danger Zone  ││  │                                               │  │
│  └──────────────┘│  └─────────────────────────────────────────────┘  │
│                  │                                                   │
└──────────────────┴───────────────────────────────────────────────────┘
```

## Component Changes

### 1. WorkspaceHeader (New Component)

**Location**: `apps/web/src/components/workspace-header.tsx`

**Props:**
```typescript
interface WorkspaceHeaderProps {
  project: Project;
  onNavigateToHistory: () => void;
  onNavigateToSettings: () => void;
}
```

**Layout:**
- Left: Project icon + Project name (bold)
- Right: Action buttons group
  - "History" button (clock icon)
  - "Settings" button (gear icon)
- Subtitle (optional): Project description or current repo name

### 2. ProjectSettingsPage (New Page)

**Location**: `apps/web/src/pages/project-settings.tsx`

**Route**: `/projects/:projectId/settings`

**Tabs:**
1. **General**
   - Project name input
   - Description textarea
   - Created date (read-only)
   - Save button

2. **Repositories** (moved from separate page)
   - List of project repositories
   - Add repository button
   - Repository cards with actions (delete)
   - Same functionality as current repo management

3. **Members** (placeholder for future)
   - "Coming soon" message

4. **Danger Zone**
   - Delete project button (with confirmation)

### 3. Sidebar Simplification

**Remove from sidebar:**
- "Manage Repositories" link (moved to settings)
- "History" link (moved to header)

**Keep in sidebar:**
- Branch selector
- File tree

### 4. Navigation Updates

**Current routes:**
- `/projects` → Project list (unchanged)
- `/projects/:id` → Workspace (new header)
- `/projects/:id/repositories` → Repository list (REMOVE)
- `/projects/:id/repositories/:repoId/history` → History (keep)
- `/projects/:id/settings` → NEW

**New navigation flow:**
```
Projects List
  ↓ click
Workspace (with header actions)
  ↓ click Settings
Project Settings
  ↓ click Repositories tab
Repository Management (in settings)
  ↓ click Back
Workspace
```

## CSS Changes

### Workspace Header
```css
.workspace-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--surface-color);
}

.workspace-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.workspace-header-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.workspace-header-actions {
  display: flex;
  gap: 0.5rem;
}

.workspace-header-action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--surface-color);
  color: var(--text-secondary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}

.workspace-header-action-btn:hover {
  background: var(--hover-color);
  border-color: var(--primary-color);
}
```

### Settings Layout
```css
.settings-container {
  display: flex;
  min-height: calc(100vh - var(--header-height));
}

.settings-sidebar {
  width: 240px;
  border-right: 1px solid var(--border-color);
  padding: 1.5rem 0;
}

.settings-tab {
  display: block;
  padding: 0.75rem 1.5rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  border-left: 3px solid transparent;
}

.settings-tab:hover {
  background: var(--hover-color);
}

.settings-tab.active {
  color: var(--primary-color);
  border-left-color: var(--primary-color);
  background: var(--primary-light);
}

.settings-content {
  flex: 1;
  padding: 2rem;
  max-width: 800px;
}
```

## API Changes

No new API endpoints needed. The settings page will use existing APIs:
- `GET /projects/:id` - project details
- `PUT /projects/:id` - update project (already exists? if not, add)
- `DELETE /projects/:id` - delete project (already exists)

## Implementation Order

1. **Create WorkspaceHeader component**
   - Extract from current workspace page
   - Add action buttons
   - Style appropriately

2. **Create ProjectSettingsPage**
   - Settings layout with tabs
   - General tab with project info
   - Danger zone with delete button

3. **Move repository management**
   - Move repo list from separate page to settings tab
   - Update routes

4. **Update workspace page**
   - Remove sidebar links
   - Add WorkspaceHeader
   - Keep file tree and viewer

5. **Update router**
   - Remove `/projects/:id/repositories` route
   - Add `/projects/:id/settings` route
   - Add tab routes: `/projects/:id/settings/general`, etc.

6. **Polish**
   - Ensure responsive design
   - Test navigation flow
   - Update breadcrumbs if needed

## Migration Notes

- Users currently accessing `/projects/:id/repositories` will need to navigate to Settings > Repositories
- Can add a redirect or show a message on the old route temporarily
- Update any hardcoded links in the codebase