# Episode Dropdown Simplification

## Changes Made

Simplified the episode dropdown in the shot management interface to use basic episode names instead of complex displays with progress bars, badges, and icons.

## Before
The dropdown items showed:
- Status icons (Clock, Play, Pause, CheckCircle, XCircle)
- Episode name
- Progress bar with percentage
- Shot count badge with status-based styling
- Complex layout with multiple visual elements

The "All Episodes" option showed:
- Layers icon
- Overall progress bar
- Episode count badge
- Total shot count badge

## After
The dropdown items now show:
- Simple episode name only
- Clean, minimal design
- Easier to scan and select

The "All Episodes" option now shows:
- Just the text "All Episodes"

## Benefits

1. **Cleaner UI**: Less visual clutter in the dropdown
2. **Faster Loading**: No need to calculate progress or render complex components
3. **Better Performance**: Simpler rendering with fewer DOM elements
4. **Easier to Read**: Episode names are the primary focus
5. **Consistent with Standard Dropdowns**: Follows common UI patterns

## Files Modified

- `frontend/src/components/episode/EpisodeDropdown.vue`
  - Simplified SelectItem templates
  - Removed unused icon imports (Film, Layers, Clock, Play, Pause, CheckCircle, XCircle)
  - Removed unused Badge component import
  - Removed computed properties: `totalShotCount`, `overallProgress`
  - Simplified `sortedEpisodes` computed property
  - Removed methods: `getEpisodeStatusVariant()`, `getEpisodeStatusIcon()`

## Functionality Preserved

All core functionality remains intact:
- ✅ Episode selection
- ✅ "All Episodes" option
- ✅ Episode sorting (by episode number or name)
- ✅ Loading state
- ✅ Error state
- ✅ Create episode option (for coordinators/admins)
- ✅ Refresh button
- ✅ Episode filtering in shot browser

## Usage

The component works exactly the same way from a parent component perspective:

```vue
<EpisodeDropdown
  :project-id="projectId"
  :selected-episode-id="selectedEpisodeId"
  @episode-selected="handleEpisodeSelected"
  @create-episode="handleCreateEpisode"
/>
```

## Visual Comparison

### Before:
```
┌─────────────────────────────────────────┐
│ 📚 All Episodes  [▓▓▓░░] 75%  3 eps 12 shots │
├─────────────────────────────────────────┤
│ ⏰ Episode 1  [▓▓░░░] 40%  4 shots      │
│ ▶️ Episode 2  [▓▓▓▓░] 80%  5 shots      │
│ ✅ Episode 3  [▓▓▓▓▓] 100%  3 shots     │
└─────────────────────────────────────────┘
```

### After:
```
┌─────────────────────┐
│ All Episodes        │
├─────────────────────┤
│ Episode 1           │
│ Episode 2           │
│ Episode 3           │
└─────────────────────┘
```

## Future Enhancements

If detailed episode information is needed, consider:
1. Adding a tooltip on hover showing episode details
2. Creating a separate episode info panel
3. Adding episode details to the shot browser header
4. Creating an episode management page with full details