LinkDesk/frontend/docs/project-switcher.md

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

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

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:

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.