Shot Page Layout Refactor

Refactoring Overview

Successfully refactored the shot page layout following the task page component pattern:

✅ Created new ShotTableToolbar.vue component
✅ Extracted toolbar functionality from ShotBrowser.vue
✅ Moved episode filter from header to toolbar as popover
✅ Simplified ProjectShotsView.vue header
✅ Maintained all existing functionality

New Component: ShotTableToolbar.vue

Features Included

View Toggle: Grid/List/Table view switcher
Episode Filter: Popover with episode selection (moved from header)
Task Status Filter: For table view only
Column Visibility Control: For table view only
Search: Shot name and description search
Detail Panel Toggle: Show/hide shot details panel
Action Buttons: Create Shot and Bulk Create
Clear Filters: Reset all filters

Props Interface

viewMode - Current view mode
episodeFilter - Selected episode ID
search - Search query
columnVisibility - Table column visibility
episodes - Available episodes
allTaskTypes - Available task types
projectId - Current project ID
selectedShot - Currently selected shot
isDetailPanelVisible - Detail panel visibility

Events Emitted

update:view-mode - View mode changes
update:episode-filter - Episode filter changes
update:search - Search query changes
update:column-visibility - Column visibility changes
task-status-filter-changed - Task status filter changes
toggle-detail-panel - Detail panel toggle
bulk-create - Bulk create action
create-shot - Create shot action

Updated Components

ShotBrowser.vue Changes

✅ Removed inline toolbar HTML (simplified template)
✅ Added ShotTableToolbar component
✅ Added episode loading and filtering logic
✅ Added handleEpisodeFilterChange method
✅ Updated filtering logic to include episode filter
✅ Updated shot creation to use episode filter
✅ Maintained all existing functionality

ProjectShotsView.vue Changes

✅ Removed episode dropdown from header
✅ Simplified header layout
✅ Removed unused imports and methods
✅ Cleaned up episode selection logic
✅ Removed episode creation dialog

Episode Filter Migration

Before (Header)

Episode dropdown in ProjectShotsView header
Managed episode selection at page level
URL routing for episode context

After (Toolbar Popover)

Episode filter popover in ShotTableToolbar
Managed episode filtering at component level
Client-side filtering of shots by episode
Consistent with task page pattern

Benefits

Consistency: Matches task page layout pattern
Flexibility: Episode filter integrated with other filters
Cleaner Header: Simplified page header
Better UX: All filters in one location

Architecture Improvements

Separation of Concerns

ProjectShotsView: Page layout and routing
ShotTableToolbar: Filtering and view controls
ShotBrowser: Data display and management

Reusability

ShotTableToolbar can be reused in other contexts
Consistent pattern with TaskTableToolbar
Modular component design

Maintainability

Clear component boundaries
Focused responsibilities
Easier to test and modify

Testing Instructions

Navigate to a project's shots page
Verify the header only shows title and description
Verify the toolbar contains all filter controls
Test episode filter popover functionality
Verify episode filtering works correctly
Test view mode switching (grid/list/table)
Test search functionality
Test task status filter (table view)
Test column visibility control (table view)
Test detail panel toggle
Test create shot and bulk create buttons
Test clear filters functionality
Verify shot creation works with episode selection

Files Modified

New Files

frontend/src/components/shot/ShotTableToolbar.vue - New toolbar component

Modified Files

frontend/src/components/shot/ShotBrowser.vue - Refactored to use toolbar
frontend/src/views/project/ProjectShotsView.vue - Simplified header

Pattern Consistency

The shot page now follows the same pattern as the task page:

TaskTableToolbar.vue ↔ ShotTableToolbar.vue
TaskBrowser.vue ↔ ShotBrowser.vue
Consistent component structure and responsibilities