# Shot Column Visibility Fix

## Issue Description

The Column Visibility Control in `ShotTableToolbar.vue` was not showing all task type columns, specifically missing custom task types. Users could only see and toggle standard columns and standard task types, but custom task types added to the project were not appearing in the column visibility popover.

## Root Cause

The problem was in the `allColumns` definition in `ShotTableToolbar.vue`. It was implemented as a static array that used `props.allTaskTypes` at component initialization time:

```typescript
// ❌ BEFORE: Static array (non-reactive)
const allColumns = [
  { id: 'thumbnail', label: 'Thumbnail' },
  { id: 'name', label: 'Shot Name' },
  // ... other columns
  ...props.allTaskTypes.map(taskType => ({
    id: taskType,
    label: taskType.charAt(0).toUpperCase() + taskType.slice(1)
  }))
]
```

### Why This Failed

1. **Timing Issue**: The component renders before task types are loaded asynchronously
2. **Non-Reactive**: Static arrays don't react to prop changes
3. **Initialization Problem**: `props.allTaskTypes` is empty during component setup
4. **No Updates**: When task types load later, the static array never updates

## Solution

Changed `allColumns` from a static array to a computed property to make it reactive to changes in `props.allTaskTypes`:

```typescript
// ✅ AFTER: Computed property (reactive)
const allColumns = computed(() => [
  { id: 'thumbnail', label: 'Thumbnail' },
  { id: 'name', label: 'Shot Name' },
  // ... other columns
  ...props.allTaskTypes.map(taskType => ({
    id: taskType,
    label: taskType.charAt(0).toUpperCase() + taskType.slice(1)
  }))
])
```

Also updated the `hiddenColumnsCount` computed property to use `allColumns.value`:

```typescript
// ✅ Updated to use computed property
const hiddenColumnsCount = computed(() => {
  return allColumns.value.filter(col => props.columnVisibility[col.id] === false).length
})
```

## Data Flow (Fixed)

1. **Component Initialization**: ShotTableToolbar renders with empty `allTaskTypes`
2. **Computed Property**: `allColumns` computed returns basic columns only
3. **Async Loading**: ShotBrowser loads task types via `customTaskTypeService.getAllTaskTypes()`
4. **Prop Update**: `allTaskTypes` prop updates with loaded task types (standard + custom)
5. **Reactive Update**: `allColumns` computed automatically recalculates
6. **UI Update**: Column visibility popover shows all columns including custom types

## Files Modified

- `frontend/src/components/shot/ShotTableToolbar.vue`
  - Changed `allColumns` from static array to computed property
  - Updated `hiddenColumnsCount` to use `allColumns.value`
  - No template changes needed (Vue automatically unwraps computed properties)

## Benefits

- ✅ **Reactive Updates**: Column list updates when task types are loaded
- ✅ **Custom Task Types**: All custom task types now appear in column visibility control
- ✅ **Real-time Changes**: Adding/removing custom task types updates columns immediately
- ✅ **Proper Initialization**: Works correctly regardless of loading timing
- ✅ **Vue 3 Best Practices**: Uses computed properties for reactive data

## Testing

To verify the fix works:

1. **Initial Load**: Column visibility should show all standard columns
2. **After Task Types Load**: Custom task type columns should appear in visibility control
3. **Add Custom Task Type**: New columns should appear immediately in visibility control
4. **Remove Custom Task Type**: Columns should be removed from visibility control
5. **Column Toggle**: All columns (standard + custom) should be toggleable

## Related Components

- **AssetBrowser ColumnVisibilityControl**: Already implemented correctly with reactive custom task types
- **TaskTableToolbar**: Uses static columns (no dynamic task types), so no similar issue
- **ShotBrowser**: Correctly loads and passes task types to ShotTableToolbar

## Prevention

When creating column visibility controls that depend on dynamic data:

1. Always use computed properties for column definitions that depend on props
2. Ensure reactive data sources for any dynamic column generation
3. Test with asynchronously loaded data to catch timing issues
4. Follow the pattern used in AssetBrowser's ColumnVisibilityControl for reference