LinkDesk/frontend/docs/user-menu.md

# User Menu Component

The UserMenu component provides a comprehensive user account interface in the sidebar footer, based on the NavUser pattern from shadcn-vue. It offers role-based features, account management, and quick access to user-specific functionality.

## Features

### 1. User Profile Display
- **Avatar**: Shows user avatar with fallback to generated initials
- **Name & Role**: Displays full name and user role
- **Email**: Shows user email in dropdown header
- **Consistent Branding**: Generated avatars with consistent colors

### 2. Role-Based Menu Items
- **Developer**: API Keys management
- **Admin/Coordinator**: Team Management, System Settings
- **All Users**: Profile, Preferences, Notifications

### 3. Account Management
- **Profile Settings**: Navigate to user profile page
- **Preferences**: Access user preferences and settings
- **Notifications**: Toggle notification settings
- **Logout**: Secure logout with redirect to login page

### 4. Help & Support
- **Help Documentation**: Access to help and support resources
- **Keyboard Shortcuts**: Quick reference for keyboard shortcuts
- **Interactive Shortcuts**: Shows common shortcuts in alert dialog

## Implementation

### Component Structure
```
UserMenu.vue
├── DropdownMenu (shadcn-vue)
├── Avatar (with fallback)
├── Role-based menu items
└── Account actions
```

### User Data Integration
- Uses `useAuthStore()` for user information
- Reactive user display name and initials
- Dynamic avatar generation with fallbacks

### Navigation Integration
- Uses Vue Router for seamless navigation
- Handles logout flow with proper cleanup
- Maintains user context across routes

## Menu Structure

### Header Section
- User avatar (generated or uploaded)
- Full name and email
- Role badge (capitalized)

### Role-Specific Features
```typescript
// Developer
- API Keys management

// Admin/Coordinator  
- Team Management
- System Settings (Admin only)
```

### Standard User Options
- Profile management
- User preferences
- Notification settings

### Help & Support
- Help documentation
- Keyboard shortcuts reference
- Support resources

### Account Actions
- Secure logout with confirmation

## Avatar System

### Avatar Sources (Priority Order)
1. **User Upload**: `user.avatar_url` if available
2. **Generated Avatar**: Dicebear API with initials
3. **Fallback**: Initials in colored circle

### Avatar Generation
```typescript
// Consistent avatar based on user email
const seed = user.value?.email || userDisplayName.value
const avatarUrl = `https://api.dicebear.com/7.x/initials/svg?seed=${seed}&backgroundColor=3b82f6&textColor=ffffff`
```

### Fallback Initials
- First letter of first name + first letter of last name
- Uppercase formatting
- Consistent color scheme

## Responsive Behavior

### Desktop
- Dropdown opens to the right of trigger
- Full menu with all options
- Hover states and smooth transitions

### Mobile
- Dropdown opens below trigger
- Touch-optimized spacing
- Simplified layout for smaller screens

## Role-Based Access Control

### Permission Levels
```typescript
// Admin: Full access
- Team Management
- System Settings
- All user features

// Coordinator: Management access
- Team Management
- Standard user features

// Developer: API access
- API Keys management
- Standard user features

// Artist/Director: Standard access
- Profile and preferences only
```

### Dynamic Menu Items
Menu items are conditionally rendered based on user role:
```vue
<DropdownMenuItem v-if="user?.role === 'developer'">
  API Keys
</DropdownMenuItem>
```

## Keyboard Shortcuts

### Supported Shortcuts
- `⌘/Ctrl + B` - Toggle sidebar
- `⌘/Ctrl + K` - Quick search
- `⌘/Ctrl + ,` - Open preferences
- `⌘/Ctrl + /` - Show help

### Shortcuts Display
- Interactive dialog showing available shortcuts
- Platform-specific key combinations
- Context-sensitive shortcuts

## Integration Points

### Authentication Store
- Reactive user data from `useAuthStore()`
- Logout functionality with proper cleanup
- Role-based permission checking

### Router Integration
- Seamless navigation to user pages
- Proper route handling for different user types
- Logout redirect to login page

### Sidebar Integration
- Consistent with sidebar collapse behavior
- Proper positioning and spacing
- Mobile-responsive dropdown positioning

## Customization

### Adding Menu Items
```vue
<DropdownMenuItem @click="customAction">
  <CustomIcon class="size-4" />
  Custom Action
</DropdownMenuItem>
```

### Role-Based Features
```typescript
const showCustomFeature = computed(() => {
  return user.value?.role === 'custom_role'
})
```

### Avatar Customization
```typescript
// Custom avatar service
const userAvatar = computed(() => {
  return user.value?.avatar_url || generateCustomAvatar(user.value)
})
```

## Accessibility

### Features
- **Keyboard Navigation**: Full keyboard support
- **Screen Readers**: Proper ARIA labels
- **Focus Management**: Logical tab order
- **High Contrast**: Theme-aware colors

### ARIA Labels
- Avatar has descriptive alt text
- Menu items have proper roles
- Dropdown has correct accessibility attributes

## Security Considerations

### Logout Process
- Clears authentication tokens
- Redirects to login page
- Handles logout errors gracefully

### Role Verification
- Server-side role validation
- Client-side UI adaptation
- Secure route protection

The UserMenu component provides a professional, role-aware user interface that adapts to different user types while maintaining consistency with the overall application design.