# Project Switcher Component

The ProjectSwitcher component provides a dropdown interface in the sidebar header that allows users to switch between different projects and navigate to project-specific views.

## Features

### 1. Project Selection
- **Dropdown Interface**: Click the project header to see all available projects
- **Visual Icons**: Each project has a unique icon for easy identification
- **Status Display**: Shows current project status (In Progress, Pre-Production, etc.)
- **Keyboard Shortcuts**: Use ⌘1, ⌘2, etc. to quickly switch projects

### 2. Project Views
- **All Projects**: Overview of all projects (default view)
- **Specific Projects**: Individual project dashboards
- **Automatic Navigation**: Switches routes when project is selected

### 3. Role-Based Features
- **Create Project**: Admins and coordinators can create new projects
- **Project Access**: Users see projects based on their permissions
- **Developer Mode**: Developers see a static header instead of project switcher

## Implementation

### Components Structure
```
ProjectSwitcher.vue
├── DropdownMenu (from shadcn-vue)
├── SidebarMenuButton
└── Project Icons (from lucide-vue-next)
```

### State Management
Uses `useProjectsStore()` for:
- Managing available projects
- Tracking active project
- Handling project switching
- Persisting project state

### Integration Points
- **AppSidebar**: Conditionally shows ProjectSwitcher for non-developer users
- **Router**: Automatically navigates to project-specific routes
- **Projects Store**: Manages project data and active state

## Usage Examples

### Basic Project Switching
1. Click the project header in the sidebar
2. Select a project from the dropdown
3. Automatically navigates to project view

### Creating New Projects
1. Click the project header dropdown
2. Select "Create project" (admins/coordinators only)
3. Navigates to project creation form

### Keyboard Navigation
- `⌘1` - Switch to first project
- `⌘2` - Switch to second project
- etc.

## Project Data Structure

```typescript
interface Project {
  id: number
  name: string
  status: string
  icon: Component
  description?: string
  member_count?: number
}
```

### Default Projects
- **Project Alpha**: Feature film (In Progress)
- **Project Beta**: Animated series (Pre-Production)  
- **Project Gamma**: Commercial campaign (Post-Production)
- **All Projects**: Overview view

## Responsive Behavior

### Desktop
- Dropdown opens to the right of the trigger
- Full project information displayed
- Keyboard shortcuts available

### Mobile
- Dropdown opens below the trigger
- Optimized for touch interaction
- Simplified layout for smaller screens

## Customization

### Adding New Projects
```typescript
const projectsStore = useProjectsStore()
projectsStore.addProject({
  name: 'New Project',
  status: 'Planning',
  icon: NewIcon,
  description: 'Project description'
})
```

### Custom Icons
Import from lucide-vue-next or use custom SVG components:
```typescript
import { CustomIcon } from '@/components/icons'
```

### Status Types
Common project statuses:
- `Planning`
- `Pre-Production`
- `In Progress`
- `Post-Production`
- `Completed`
- `On Hold`

## Integration with Routes

### Route Mapping
- `/projects` → All Projects view
- `/projects/1` → Project Alpha
- `/projects/2` → Project Beta
- `/projects/new` → Create new project

### Route Synchronization
The component automatically:
- Updates active project based on current route
- Navigates to appropriate route when project is selected
- Maintains project state across navigation

## Accessibility

### Features
- **Keyboard Navigation**: Full keyboard support
- **Screen Readers**: Proper ARIA labels and descriptions
- **Focus Management**: Logical tab order
- **High Contrast**: Works with system themes

### ARIA Labels
- Project buttons have descriptive labels
- Dropdown has proper role attributes
- Status information is announced

## Performance

### Optimizations
- **Computed Properties**: Reactive project filtering
- **Lazy Loading**: Projects loaded on demand
- **Minimal Re-renders**: Efficient Vue reactivity
- **Store Caching**: Project data cached in store

The ProjectSwitcher provides an intuitive way for users to navigate between projects while maintaining context and state throughout the application.