feat: add project settings page with tabbed layout

- 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
2026-05-19 15:26:57 +02:00
parent 965f6f6585
commit 0bc0d99c21
17 changed files with 1136 additions and 16 deletions
@@ -0,0 +1,184 @@
+# 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)