LinkDesk/frontend/docs/episode-dropdown-simplification.md

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:

<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