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
185 lines
4.2 KiB
Markdown
185 lines
4.2 KiB
Markdown
# Workspace Visual Overhaul Specification
|
|
|
|
## Requirements
|
|
|
|
### Functional Requirements
|
|
|
|
1. **Header Actions**: All primary project actions in workspace header (right-aligned)
|
|
2. **Project Settings Page**: Dedicated settings page with tabs
|
|
3. **Repository Management in Settings**: Move repo management to settings tab
|
|
4. **Sidebar Simplification**: Remove management links from sidebar
|
|
5. **Consistent Navigation**: Follow GitHub-style patterns
|
|
|
|
### Non-Functional Requirements
|
|
|
|
1. **Responsive**: Works on desktop, tablet, and mobile
|
|
2. **Accessible**: Keyboard navigation, screen reader support
|
|
3. **Performant**: No layout shifts, smooth transitions
|
|
4. **Maintainable**: Clean component separation
|
|
|
|
## UI Specification
|
|
|
|
### Workspace Header
|
|
|
|
**Left Side:**
|
|
- Project icon (📁 or custom)
|
|
- Project name (bold, 1.25rem)
|
|
- Optional: Current repository name (smaller, muted)
|
|
|
|
**Right Side (Actions):**
|
|
- "History" button (clock icon) → navigates to history
|
|
- "Settings" button (gear icon) → navigates to settings
|
|
|
|
**States:**
|
|
- Loading: Show skeleton or spinner
|
|
- Error: Show error message with retry
|
|
|
|
### Project Settings Page
|
|
|
|
**Layout:**
|
|
- Two-column layout (sidebar tabs + content)
|
|
- Mobile: Tabs at top, content below
|
|
|
|
**Tabs:**
|
|
|
|
#### General Tab
|
|
- Project name input (required)
|
|
- Description textarea (optional)
|
|
- Created at (read-only)
|
|
- Updated at (read-only)
|
|
- Save changes button
|
|
- Cancel button (if dirty)
|
|
|
|
#### Repositories Tab
|
|
- Repository list (same as current repo management)
|
|
- Add repository button
|
|
- Each repo card:
|
|
- Name
|
|
- Remote URL (truncated)
|
|
- Last updated
|
|
- Actions: Delete
|
|
|
|
#### Members Tab (Placeholder)
|
|
- "Coming soon" message
|
|
- Brief description of future feature
|
|
|
|
#### Danger Zone
|
|
- Red background/warning styling
|
|
- Delete project button
|
|
- Confirmation dialog on click
|
|
|
|
### Sidebar Changes
|
|
|
|
**Current sidebar items:**
|
|
- Branch selector
|
|
- File tree
|
|
- Manage Repositories link
|
|
|
|
**New sidebar items:**
|
|
- Branch selector (keep)
|
|
- File tree (keep)
|
|
- ~~Manage Repositories~~ (remove)
|
|
|
|
## Route Changes
|
|
|
|
### Remove Routes
|
|
- `/projects/:projectId/repositories` → Moved to settings
|
|
|
|
### New Routes
|
|
- `/projects/:projectId/settings` → Settings (defaults to General tab)
|
|
- `/projects/:projectId/settings/general` → General settings
|
|
- `/projects/:projectId/settings/repositories` → Repository management
|
|
- `/projects/:projectId/settings/members` → Members (placeholder)
|
|
|
|
### Keep Routes
|
|
- `/projects` → Project list
|
|
- `/projects/:projectId` → Workspace
|
|
- `/projects/:projectId/repositories/:repoId/history` → History
|
|
|
|
## Component Specification
|
|
|
|
### WorkspaceHeader
|
|
```typescript
|
|
interface WorkspaceHeaderProps {
|
|
project: {
|
|
id: string;
|
|
name: string;
|
|
description?: string;
|
|
};
|
|
currentRepo?: {
|
|
id: string;
|
|
name: string;
|
|
};
|
|
onNavigateToHistory: () => void;
|
|
onNavigateToSettings: () => void;
|
|
}
|
|
```
|
|
|
|
### ProjectSettingsPage
|
|
```typescript
|
|
interface ProjectSettingsProps {
|
|
projectId: string;
|
|
}
|
|
|
|
// Tabs configuration
|
|
const TABS = [
|
|
{ id: 'general', label: 'General', icon: 'settings' },
|
|
{ id: 'repositories', label: 'Repositories', icon: 'repo' },
|
|
{ id: 'members', label: 'Members', icon: 'people' },
|
|
];
|
|
```
|
|
|
|
### SettingsTabLayout
|
|
```typescript
|
|
interface SettingsTabLayoutProps {
|
|
projectId: string;
|
|
activeTab: string;
|
|
children: React.ReactNode;
|
|
}
|
|
```
|
|
|
|
## API Requirements
|
|
|
|
### PUT /projects/:id
|
|
Update project details.
|
|
|
|
**Request Body:**
|
|
```json
|
|
{
|
|
"name": "Updated Project Name",
|
|
"description": "Updated description"
|
|
}
|
|
```
|
|
|
|
**Response 200:**
|
|
```json
|
|
{
|
|
"id": "uuid",
|
|
"name": "Updated Project Name",
|
|
"description": "Updated description",
|
|
"created_at": "2024-01-01T00:00:00Z",
|
|
"updated_at": "2024-01-02T00:00:00Z"
|
|
}
|
|
```
|
|
|
|
## Error Handling
|
|
|
|
- **Project not found**: Show 404 page
|
|
- **Permission denied**: Show auth error, redirect to login
|
|
- **Save failed**: Show toast notification, keep form state
|
|
- **Delete failed**: Show error in danger zone
|
|
|
|
## Testing Strategy
|
|
|
|
### Frontend Tests
|
|
- Test header navigation (History, Settings buttons)
|
|
- Test settings tabs switching
|
|
- Test form validation (name required)
|
|
- Test delete confirmation flow
|
|
- Test responsive layout
|
|
|
|
### Integration Tests
|
|
- Test navigation flow: workspace → settings → back
|
|
- Test route changes
|
|
- Test data persistence (save project changes)
|