# Shot Column Visibility - Unified with Task Page

# 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.