# Shot Table Checkbox Selection Fix

## Overview
Applied the same checkbox selection refactor to ShotsTableView component that was done for AssetBrowser, converting from array-based to object-based selection state.

## Changes Made

### 1. Selection State Structure
**Before:**
```typescript
const selectedShots = ref<number[]>([]);
```

**After:**
```typescript
const selectedShots = ref<Record<number, boolean>>({});
```

### 2. Select All Checkbox
**Before:**
```vue
<Checkbox
  :checked="selectedShots.length === filteredShots.length && filteredShots.length > 0"
  :indeterminate="selectedShots.length > 0 && selectedShots.length < filteredShots.length"
  @update:checked="toggleSelectAll"
/>
```

**After:**
```vue
<Checkbox v-model="selectAllChecked" />
```

With computed property:
```typescript
const selectAllChecked = computed({
  get: () => {
    return filteredShots.value.length > 0 && 
           filteredShots.value.every(shot => selectedShots.value[shot.id]);
  },
  set: (checked: boolean) => {
    filteredShots.value.forEach(shot => {
      selectedShots.value[shot.id] = checked;
    });
  }
});
```

### 3. Row Checkboxes
**Before:**
```vue
<Checkbox
  :checked="selectedShots.includes(shot.id)"
  @update:checked="(checked) => toggleShotSelection(shot.id, checked)"
  @click.stop
/>
```

**After:**
```vue
<Checkbox
  v-model="selectedShots[shot.id]"
  @click.stop
/>
```

### 4. Helper Method
Added helper to get selected IDs:
```typescript
const getSelectedShotIds = () => {
  return Object.keys(selectedShots.value)
    .filter(id => selectedShots.value[Number(id)])
    .map(id => Number(id));
};
```

### 5. Row Selection Logic
Updated to work with object-based state:
```typescript
const handleRowClick = (shot: Shot, event: MouseEvent) => {
  if (event.ctrlKey || event.metaKey) {
    // Multi-select with Ctrl/Cmd - toggle selection
    selectedShots.value[shot.id] = !selectedShots.value[shot.id];
  } else if (event.shiftKey && getSelectedShotIds().length > 0) {
    // Range select with Shift
    const selectedIds = getSelectedShotIds();
    const lastSelectedId = selectedIds[selectedIds.length - 1];
    // ... range selection logic
    selectedShots.value = {};
    for (let i = start; i <= end; i++) {
      selectedShots.value[filteredShots.value[i].id] = true;
    }
  } else {
    // Single select
    emit('select', shot);
  }
};
```

### 6. Watcher Update
**Before:**
```typescript
watch(() => props.shots, () => {
  selectedShots.value = []
})
```

**After:**
```typescript
watch(() => props.shots, () => {
  selectedShots.value = {}
})
```

## Benefits

1. **Consistent with AssetBrowser**: Both components now use the same pattern
2. **Direct v-model Binding**: Uses reka-ui's native v-model support
3. **Better Performance**: Object property access is faster than array operations
4. **Cleaner Code**: No manual event handlers needed
5. **Fully Reactive**: Vue's reactivity handles everything automatically

## Testing

Test the following scenarios:
1. Click individual checkboxes to select/deselect shots
2. Click the "Select All" checkbox to select/deselect all shots
3. Use Ctrl/Cmd+Click for multi-selection
4. Use Shift+Click for range selection
5. Verify the selection state persists correctly
6. Verify the row highlighting reflects the selection state

## Related Files

- `frontend/src/components/shot/ShotsTableView.vue` - Updated component
- `frontend/docs/checkbox-selection-refactor.md` - Original AssetBrowser refactor documentation