Fusion
0bc0d99c21
- Create SettingsTabLayout component with sidebar navigation - Create ProjectSettingsPage with General settings tab - Create RepositoriesSettingsTab for repo management - Add Members placeholder tab - Update router with settings routes - Add CSS styles for settings layout - Navigate to /projects/:id/settings from workspace header
271 lines
11 KiB
Markdown
271 lines
11 KiB
Markdown
# 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
|