# Implementation Plan - [x] 1. Create asset table column definitions - Create `frontend/src/components/asset/columns.ts` file with asset-specific column definitions - Define AssetColumnMeta interface with required callbacks and data - Implement createAssetColumns function following the shot columns pattern - Add asset-specific columns: select, thumbnail, name, category, status, task columns, description, updatedAt, actions - _Requirements: 1.1, 2.2, 3.1_ - [ ]* 1.1 Write property test for required column presence - **Property 2: Required column presence** - **Validates: Requirements 3.1** - [x] 2. Create AssetsDataTable component - Create `frontend/src/components/asset/AssetsDataTable.vue` component - Implement TanStack Table integration with proper props and emits - Add row selection logic with shift/ctrl support following ShotsDataTable pattern - Implement table rendering with FlexRender - _Requirements: 1.2, 2.1, 2.3_ - [ ]* 2.1 Write property test for table behavior consistency - **Property 1: Table behavior consistency** - **Validates: Requirements 1.2, 1.3, 1.4, 2.4, 4.2** - [x] 3. Integrate TanStack Table state in AssetBrowser - Add TanStack Table state management (sorting, columnVisibility, rowSelection) to AssetBrowser.vue - Replace custom table implementation with AssetsDataTable component - Implement column visibility persistence using session storage - Update table toolbar to work with new table state - _Requirements: 1.1, 2.3, 2.5_ - [ ]* 3.1 Write property test for column visibility persistence - **Property 3: Column visibility persistence** - **Validates: Requirements 2.5, 5.1** - [x] 4. Implement bulk operations for assets - Add bulk task status change functionality to asset columns - Implement popover interface for bulk operations matching shot table - Add optimistic updates for bulk status changes - Integrate with existing task status update handlers - _Requirements: 4.1, 4.2, 4.3_ - [ ]* 4.1 Write property test for bulk operations completeness - **Property 4: Bulk operations completeness** - **Validates: Requirements 4.1, 4.3, 4.4, 4.5** - [x] 5. Preserve existing asset functionality - Ensure EditableTaskStatus components work correctly in new table - Maintain thumbnail column functionality - Preserve category filtering integration - Keep all asset-specific actions (edit, delete, view tasks) working - Ensure detail panel integration remains functional - _Requirements: 3.2, 3.3, 3.4, 3.5, 5.2_ - [ ]* 5.1 Write property test for feature preservation - **Property 5: Feature preservation round trip** - **Validates: Requirements 3.2, 3.3, 3.4, 3.5, 5.2, 5.3, 5.4** - [x] 6. Update asset table toolbar integration - Modify existing toolbar components to work with TanStack Table state - Ensure column visibility controls work with new columnVisibility state - Update search and filtering to work with new table structure - Maintain view mode switching functionality - _Requirements: 1.3, 5.3, 5.4_ - [x] 7. Remove old table implementation - Remove custom table rendering code from AssetBrowser.vue - Clean up unused table-related methods and state - Update imports and dependencies - Ensure no breaking changes to external interfaces - _Requirements: 5.5_ - [ ] 8. Checkpoint - Ensure all tests pass - Ensure all tests pass, ask the user if questions arise. - [ ]* 8.1 Write unit tests for column definitions - Test createAssetColumns function with various task type configurations - Test column meta callbacks and data handling - Test column visibility and sorting configurations - _Requirements: 2.2, 3.1_ - [ ]* 8.2 Write unit tests for AssetsDataTable component - Test component props and emits - Test row selection logic with different modifier keys - Test table rendering with various data sets - _Requirements: 1.2, 2.1_ - [ ]* 8.3 Write integration tests for asset browser - Test asset table integration with detail panel - Test filter and search integration with new table structure - Test task status editing integration - Test bulk operations integration - _Requirements: 3.2, 4.1, 5.2_