LinkDesk/.kiro/specs/task-browser-refactor/tasks.md

Implementation Plan

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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