Shot Column Visibility - Unified with Task Page

✅ Implementation Complete

The shot page column visibility filter now uses the same UI pattern as the task page, providing a consistent user experience across the application.

🔄 Changes Made

Replaced ShotColumnVisibilityControl - Removed custom Select-based component
Added Popover + Command Pattern - Same as task page implementation
Updated ShotTableToolbar.vue - Integrated column visibility directly
Added Missing Imports - Settings2 icon and proper component imports
Added Column Definitions - Comprehensive list of all shot table columns
Added Helper Methods - toggleColumn and hiddenColumnsCount computed

🎨 UI Pattern Comparison

❌ Before (Shot Page)

<Select> <SelectTrigger> <Columns icon /> Columns </SelectTrigger> <SelectContent> <SelectItem> <input type="checkbox" /> Column Name </SelectItem> </SelectContent> </Select>

Issues:

Different UI pattern from task page
Select component with checkboxes
Inconsistent user experience

✅ After (Unified Pattern)

<Popover> <PopoverTrigger> <Settings2 icon /> View <Badge>{{ hiddenCount }}</Badge> </PopoverTrigger> <PopoverContent> <Command> <CommandInput /> <CommandItem> <Check icon /> Column Name </CommandItem> </Command> </PopoverContent> </Popover>

Benefits:

Consistent with task page
Popover + Command pattern
Search functionality
Visual feedback with badge

🏗️ Technical Implementation

// Column definitions (same pattern as task page) const allColumns = [ { id: 'thumbnail', label: 'Thumbnail' }, { id: 'name', label: 'Shot Name' }, { id: 'episode', label: 'Episode' }, { id: 'frameRange', label: 'Frame Range' }, { id: 'status', label: 'Status' }, { id: 'description', label: 'Description' }, // Dynamic task type columns ...props.allTaskTypes.map(taskType => ({ id: taskType, label: taskType.charAt(0).toUpperCase() + taskType.slice(1) })) ] // Hidden columns count (same as task page) const hiddenColumnsCount = computed(() => { return allColumns.filter(col => props.columnVisibility[col.id] === false).length }) // Toggle method (same as task page) const toggleColumn = (columnId: string, value: any) => { const newVisibility = { ...props.columnVisibility, [columnId]: value as boolean } emit('update:column-visibility', newVisibility) }

🎯 Features Unified

Consistent UI Pattern - Popover with Command components
Search Functionality - Filter columns by name
Visual Feedback - Badge showing hidden column count
Check Icons - Clear visual indication of selected columns
Proper Alignment - Right-aligned popover like task page
Dynamic Columns - Task type columns generated dynamically
Keyboard Navigation - Full accessibility support

📁 Files Modified

frontend/src/components/shot/ShotTableToolbar.vue (UPDATED) ├── Removed ShotColumnVisibilityControl import ├── Added Settings2 icon import ├── Added allColumns definition ├── Added hiddenColumnsCount computed ├── Added toggleColumn method └── Replaced column visibility section with Popover pattern frontend/src/components/shot/ShotColumnVisibilityControl.vue (DEPRECATED) └── No longer used - can be removed in future cleanup

🧪 Testing Checklist

To verify the unified column visibility works correctly:

Navigate to a project's shots page
Switch to table view mode
Click the "View" button (with Settings2 icon)
Verify popover opens with searchable column list
Toggle various columns on/off
Verify badge shows hidden column count
Test search functionality in column list
Verify task type columns appear dynamically
Compare with task page column visibility (should be identical)

🎨 UI Consistency Achieved

Both shot page and task page now use the identical pattern:

Task Page: Settings2 icon + "View" + Badge + Popover + Command + Search Shot Page: Settings2 icon + "View" + Badge + Popover + Command + Search

This provides a consistent, familiar experience for users switching between different data tables in the application.

✅ Status: Complete

The shot page column visibility filter now uses the same view filter component pattern as the task page. Users will experience consistent UI behavior across all data tables in the application.