# 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<number>
  - 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_
