# Shot Browser Filter Layout Alignment

## Overview
Aligned the Shot page filter options and display column controls to match the Asset page layout for consistency across the application.

## Changes Made

### 1. Added Episode Filter
**Location**: Between View Toggle and Search input

**Implementation**:
```vue
<!-- Episode Filter -->
<Select v-model="selectedEpisode">
  <SelectTrigger class="w-[180px]">
    <SelectValue placeholder="All Episodes" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="all">All Episodes</SelectItem>
    <SelectItem
      v-for="episode in episodes"
      :key="episode.id"
      :value="episode.id.toString()"
    >
      {{ episode.name }}
    </SelectItem>
  </SelectContent>
</Select>
```

**Features**:
- Shows "All Episodes" by default
- Lists all episodes from the project
- Filters shots by selected episode
- Matches the Category Filter styling from Asset page (w-[180px])

### 2. Reordered Filter Controls
**New Order** (matching Asset page):
1. View Toggle (Grid/List/Table)
2. **Episode Filter** (NEW)
3. Search Input
4. Task Status Filter (table view only)
5. Column Visibility Control (table view only)
6. Action Buttons (right side)

**Previous Order**:
1. View Toggle
2. Search Input
3. Task Status Filter
4. Column Visibility Control
5. Action Buttons

### 3. Updated Filtering Logic
Added episode filtering to the `filteredShots` computed property:

```typescript
const filteredShots = computed(() => {
  let filtered = [...shots.value]

  // Filter by episode (NEW)
  if (selectedEpisode.value && selectedEpisode.value !== 'all') {
    const episodeId = parseInt(selectedEpisode.value)
    filtered = filtered.filter(shot => shot.episode_id === episodeId)
  }

  // Filter by search query
  if (searchQuery.value.trim()) {
    const query = searchQuery.value.toLowerCase().trim()
    filtered = filtered.filter(shot =>
      shot.name.toLowerCase().includes(query) ||
      shot.description?.toLowerCase().includes(query)
    )
  }

  return filtered
})
```

### 4. Added Required Imports
```typescript
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
```

### 5. Added State Variable
```typescript
const selectedEpisode = ref<string>('all')
```

## Benefits

### Consistency
- Both Asset and Shot pages now have identical filter layouts
- Users experience the same UX pattern across different sections
- Reduces cognitive load when switching between pages

### Usability
- Episode filter provides quick access to shots from specific episodes
- Matches the mental model: Episodes are to Shots what Categories are to Assets
- All filters work together seamlessly

### Maintainability
- Consistent patterns make the codebase easier to understand
- Future developers can apply the same pattern to other pages
- Reduces confusion about where controls should be placed

## Testing Checklist

- [ ] Episode filter dropdown displays all episodes
- [ ] Selecting an episode filters shots correctly
- [ ] "All Episodes" option shows all shots
- [ ] Episode filter works with search filter
- [ ] Episode filter works with task status filter
- [ ] Layout is responsive on mobile devices
- [ ] All existing functionality still works (view toggle, search, etc.)
- [ ] Column visibility control still works in table view
- [ ] Task status filter still works in table view

## Files Modified

- `frontend/src/components/shot/ShotBrowser.vue`
  - Added Episode Filter dropdown
  - Reordered filter controls
  - Added episode filtering logic
  - Added Select component imports
  - Added selectedEpisode state variable

## Related Documentation

- `frontend/docs/checkbox-selection-refactor.md` - Checkbox selection pattern
- `frontend/docs/shots-datatable-checkbox-fix.md` - Shot table checkbox fixes
- Asset Browser implementation - Reference for consistent patterns