# Implementation Plan - [x] 1. Create TasksDataTable component with basic structure - Create new file `frontend/src/components/task/TasksDataTable.vue` - Define props interface (tasks, columnVisibility, projectId, isLoading) - Define emits interface (row-click, row-double-click, context-menu, selection-change, update:column-visibility) - Set up basic template structure with Table components - _Requirements: 1.1, 1.2_ - [x] 2. Implement table rendering and TanStack Table integration - Move TanStack Table configuration from TaskBrowser to TasksDataTable - Import and use createColumns() for column definitions - Set up table state (sorting, rowSelection, columnVisibility) - Implement table header rendering with select-all checkbox - Implement table body rendering with row iteration - _Requirements: 1.2, 1.3_ - [x] 3. Implement row selection state management - Create rowSelection ref with RowSelectionState type - Create lastClickedIndex ref for shift-click tracking - Implement getRowId to use task.id as row identifier - Set up watcher to emit selection-change events when rowSelection changes - Implement helper function to compute selected tasks from selection state - _Requirements: 2.1, 2.3, 2.4_ - [x] 4. Implement single-click selection behavior - Create handleRowClick function - Implement logic for click without modifiers (clear all, select one) - Implement logic for Ctrl/Cmd+click (toggle selection) - Implement logic for Shift+click (range selection) - Update lastClickedIndex on each click - Emit row-click event after updating selection - _Requirements: 3.1, 3.2, 3.3_ - [x] 5. Implement select-all checkbox functionality - Update select column header to use table.getIsAllPageRowsSelected() - Implement onUpdate:modelValue handler for select-all checkbox - Use table.toggleAllPageRowsSelected() to toggle all rows - Handle indeterminate state when some but not all rows selected - _Requirements: 3.4, 6.4, 6.5_ - [x] 6. Implement double-click and context menu handlers - Create handleRowDoubleClick function that emits row-double-click event - Create handleContextMenu function that prevents default and emits context-menu event - Add logic to preserve selection when right-clicking selected row - Add logic to add unselected row to selection when right-clicked - Pass selected tasks array in context-menu event - _Requirements: 3.5, 4.1, 4.2_ - [x] 7. Add visual feedback for selection and hover states - Apply conditional classes to TableRow based on selection state - Add hover:bg-muted/50 class for hover feedback - Add bg-muted/50 class for selected rows - Add select-none class to prevent text selection during shift-click - Ensure cursor-pointer class is applied to all rows - _Requirements: 6.1, 6.2, 6.3_ - [x] 8. Update TaskBrowser to use TasksDataTable component - Import TasksDataTable component - Replace existing table template with TasksDataTable component tag - Pass filteredTasks as tasks prop - Pass columnVisibility as prop - Pass projectId as prop - Pass isLoading as prop - _Requirements: 1.4_ - [x] 9. Implement event handlers in TaskBrowser - Create selectedTaskIds ref as Set - Create handleSelectionChange function to update selectedTaskIds - Wire up @selection-change event to handleSelectionChange - Wire up @row-click event to existing handleRowClick logic (if needed) - Wire up @row-double-click event to handleRowDoubleClick - Wire up @context-menu event to handleContextMenu - Wire up @update:column-visibility event to updateColumnVisibility - _Requirements: 2.3, 2.4, 2.5_ - [x] 10. Update selection-related computed properties in TaskBrowser - Update selectedTasks computed to filter filteredTasks by selectedTaskIds Set - Update selectedCount computed to return selectedTaskIds.size - Remove old rowSelection ref from TaskBrowser - Remove old table configuration from TaskBrowser - _Requirements: 2.5_ - [x] 11. Implement selection clearing on filter changes - Update watch on filter refs to clear selectedTaskIds Set - Ensure watch includes statusFilter, typeFilter, episodeFilter, assigneeFilter, contextFilter, searchQuery - Test that selection clears when any filter changes - _Requirements: 5.1, 5.2, 5.3, 5.4, 5.5_ - [x] 12. Update bulk action handlers to preserve selection - Remove any selection clearing logic from handleBulkStatusUpdate - Remove any selection clearing logic from handleBulkAssignment - Verify selection is preserved after successful bulk operations - Verify selection is preserved after failed bulk operations - _Requirements: 4.3, 4.4, 4.5, 7.4, 8.4_ - [x] 13. Update context menu handler in TaskBrowser - Modify handleContextMenu to receive event and tasks array from TasksDataTable - Remove row index parameter (no longer needed) - Remove selection update logic (now handled in TasksDataTable) - Keep context menu positioning and display logic - _Requirements: 4.1, 4.2, 4.4_ - [x] 14. Clean up and remove unused code from TaskBrowser - Remove table-related imports (FlexRender, table hooks, etc.) - Remove columns import (now used in TasksDataTable) - Remove sorting ref (now in TasksDataTable) - Remove rowSelection ref (replaced by selectedTaskIds) - Remove lastClickedIndex ref (now in TasksDataTable) - Remove old handleRowClick implementation - Remove table template code - _Requirements: 1.1_ - [x] 15. Test selection behavior - Test single-click selection (clears others, selects one) - Test Ctrl+click toggle selection - Test Shift+click range selection - Test select-all checkbox (all visible rows) - Test double-click opens detail panel without changing selection - _Requirements: 3.1, 3.2, 3.3, 3.4, 3.5_ - [ ] 16. Test context menu and bulk operations - Test right-click on selected row preserves selection - Test right-click on unselected row adds to selection - Test bulk status update with multiple selected tasks - Test bulk assignment with multiple selected tasks - Test selection preserved after bulk operations - _Requirements: 4.1, 4.2, 4.3, 7.1, 7.2, 7.3, 8.1, 8.2, 8.3_ - [ ] 17. Test filter changes clear selection - Test status filter change clears selection - Test type filter change clears selection - Test episode filter change clears selection - Test assignee filter change clears selection - Test search query change clears selection - _Requirements: 5.1, 5.2, 5.3, 5.4, 5.5_ - [ ] 18. Test existing TaskBrowser features still work - Test all filters work correctly - Test task detail panel opens on double-click (desktop and mobile) - Test column visibility controls work - Test sorting on all columns works - Test task count and selection count display correctly - _Requirements: 9.1, 9.2, 9.3, 9.4, 9.5_ - [ ] 19. Verify TypeScript types and fix any type errors - Run TypeScript compiler to check for type errors - Fix any type mismatches in TasksDataTable - Fix any type mismatches in TaskBrowser - Ensure all props and emits are properly typed - _Requirements: 1.1, 1.4_ - [ ] 20. Final validation and cleanup - Run full application and test all task browser functionality - Verify no console errors or warnings - Verify performance is acceptable with large task lists - Update any related documentation if needed - _Requirements: 9.1, 9.2, 9.3, 9.4, 9.5_