LinkDesk/frontend/docs/shot-browser-filter-alignment.md

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:

<!-- 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:

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

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

5. Added State Variable

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