198 lines
7.5 KiB
Markdown
198 lines
7.5 KiB
Markdown
# Implementation Plan
|
|
|
|
- [x] 1. Analyze Current Detail Panel Implementations
|
|
|
|
- Review ShotBrowser.vue detail panel implementation (already optimized)
|
|
- Examine AssetBrowser.vue detail panel behavior
|
|
- Examine TaskBrowser.vue detail panel behavior
|
|
- Document differences and inconsistencies
|
|
- _Requirements: 1.1, 1.2, 1.3_
|
|
|
|
- [ ] 2. Apply Consistent Behavior to AssetBrowser
|
|
- [x] 2.1 Update AssetBrowser detail panel state management
|
|
|
|
- Add isDetailPanelEnabled and isDetailPanelVisible state variables
|
|
- Implement combined panel visibility logic
|
|
- Update panel toggle button styling to match ShotBrowser
|
|
- _Requirements: 1.1, 1.4, 3.4_
|
|
|
|
- [x] 2.2 Implement keyboard shortcut handler for AssetBrowser
|
|
|
|
- Add 'i' key event listener with proper lifecycle management
|
|
- Implement same conditions as ShotBrowser (no dialogs, no input focus)
|
|
- Support both desktop overlay and mobile sheet
|
|
- _Requirements: 4.1, 4.2, 4.3, 4.5_
|
|
|
|
- [x] 2.3 Update AssetBrowser selection handlers
|
|
|
|
- Remove automatic hiding of manual panel visibility on row selection
|
|
- Preserve manual panel state when selecting different assets
|
|
- Update selectAsset and handleRowClick functions
|
|
- _Requirements: 2.1, 2.2, 2.3_
|
|
|
|
- [ ]* 2.4 Write property test for AssetBrowser panel persistence
|
|
- **Property 1: Manual Panel Persistence (Asset Variant)**
|
|
- **Validates: Requirements 2.1, 2.2**
|
|
|
|
- [ ] 3. Apply Consistent Behavior to TaskBrowser
|
|
- [x] 3.1 Update TaskBrowser detail panel state management
|
|
|
|
- Add isDetailPanelEnabled and isDetailPanelVisible state variables
|
|
- Implement combined panel visibility logic
|
|
- Add panel toggle button to TaskBrowser toolbar
|
|
- _Requirements: 1.1, 1.4, 3.4_
|
|
|
|
- [x] 3.2 Implement keyboard shortcut handler for TaskBrowser
|
|
|
|
- Add 'i' key event listener with proper lifecycle management
|
|
- Implement same conditions as ShotBrowser (no dialogs, no input focus)
|
|
- Support both desktop overlay and mobile sheet
|
|
- _Requirements: 4.1, 4.2, 4.3, 4.5_
|
|
|
|
- [x] 3.3 Update TaskBrowser selection handlers
|
|
|
|
|
|
- Remove automatic hiding of manual panel visibility on row selection
|
|
- Preserve manual panel state when selecting different tasks
|
|
- Update selectTask and handleRowClick functions
|
|
- _Requirements: 2.1, 2.2, 2.3_
|
|
|
|
- [ ]* 3.4 Write property test for TaskBrowser panel persistence
|
|
- **Property 1: Manual Panel Persistence (Task Variant)**
|
|
- **Validates: Requirements 2.1, 2.2**
|
|
|
|
- [-] 4. Create Shared Detail Panel Composable
|
|
|
|
|
|
|
|
|
|
- [x] 4.1 Extract common detail panel logic into composable
|
|
|
|
- Create useDetailPanel composable with consistent state management
|
|
- Include keyboard event handling logic
|
|
- Include panel visibility computation
|
|
- _Requirements: 1.1, 1.2, 1.3, 1.4, 1.5_
|
|
|
|
- [-] 4.2 Refactor all browsers to use shared composable
|
|
|
|
|
|
|
|
|
|
- Update ShotBrowser to use useDetailPanel composable
|
|
- Update AssetBrowser to use useDetailPanel composable
|
|
- Update TaskBrowser to use useDetailPanel composable
|
|
- _Requirements: 1.1, 1.2, 1.3, 1.4, 1.5_
|
|
|
|
- [ ]* 4.3 Write property test for composable consistency
|
|
- **Property 2: Keyboard Toggle Consistency**
|
|
- **Validates: Requirements 4.1**
|
|
|
|
- [ ] 5. Implement Session State Persistence
|
|
- [ ] 5.1 Add session storage for auto-enable preferences
|
|
- Store isDetailPanelEnabled state in sessionStorage per browser type
|
|
- Restore state on component mount
|
|
- Handle storage key naming consistently
|
|
- _Requirements: 5.1, 5.2, 5.3, 5.4_
|
|
|
|
- [ ] 5.2 Test state persistence across navigation
|
|
- Verify auto-enable state persists when switching between browsers
|
|
- Test manual state behavior during navigation
|
|
- Ensure proper cleanup on component unmount
|
|
- _Requirements: 5.1, 5.2, 5.3_
|
|
|
|
- [ ]* 5.3 Write property test for state persistence
|
|
- **Property 5: Selection State Preservation**
|
|
- **Validates: Requirements 5.1, 5.2**
|
|
|
|
- [ ] 6. Enhance Mobile Support Consistency
|
|
- [ ] 6.1 Ensure consistent mobile sheet behavior
|
|
- Verify 'i' key works with mobile sheets in all browsers
|
|
- Test touch interactions don't conflict with keyboard shortcuts
|
|
- Ensure mobile sheet state follows same logic as desktop panels
|
|
- _Requirements: 4.5_
|
|
|
|
- [ ] 6.2 Test responsive behavior consistency
|
|
- Test panel behavior at different screen sizes
|
|
- Verify smooth transitions between desktop and mobile modes
|
|
- Test orientation changes on mobile devices
|
|
- _Requirements: 4.5_
|
|
|
|
- [ ] 7. Input Field Protection Implementation
|
|
- [ ] 7.1 Enhance keyboard event filtering
|
|
- Improve detection of input field focus across all browsers
|
|
- Add support for contentEditable elements
|
|
- Test with various input types (text, search, select)
|
|
- _Requirements: 4.2, 4.3_
|
|
|
|
- [ ] 7.2 Test dialog interaction prevention
|
|
- Verify 'i' key doesn't work when create/edit dialogs are open
|
|
- Test with confirmation dialogs and modals
|
|
- Ensure proper event handling during dialog transitions
|
|
- _Requirements: 4.3_
|
|
|
|
- [ ]* 7.3 Write property test for input protection
|
|
- **Property 4: Input Field Protection**
|
|
- **Validates: Requirements 4.2**
|
|
|
|
- [ ] 8. Auto-Enable Independence Testing
|
|
- [ ] 8.1 Test all auto-enable and manual state combinations
|
|
- Test auto-enabled + manual visible
|
|
- Test auto-disabled + manual visible
|
|
- Test auto-enabled + manual hidden
|
|
- Test auto-disabled + manual hidden
|
|
- _Requirements: 3.1, 3.2, 3.3, 3.5_
|
|
|
|
- [ ] 8.2 Verify OR logic implementation
|
|
- Ensure panel shows when either condition is true
|
|
- Test state transitions between different combinations
|
|
- Verify manual control temporarily overrides auto-enable
|
|
- _Requirements: 3.1, 3.2, 3.3, 3.5_
|
|
|
|
- [ ]* 8.3 Write property test for auto-enable independence
|
|
- **Property 3: Auto-Enable Independence**
|
|
- **Validates: Requirements 3.5**
|
|
|
|
- [ ] 9. Cross-Browser Consistency Validation
|
|
- [ ] 9.1 Create comprehensive test suite
|
|
- Test identical behavior across ShotBrowser, AssetBrowser, TaskBrowser
|
|
- Verify keyboard shortcuts work consistently
|
|
- Test panel toggle button styling and behavior
|
|
- _Requirements: 1.1, 1.2, 1.3, 1.4, 1.5_
|
|
|
|
- [ ] 9.2 Performance and UX testing
|
|
- Ensure panel transitions are smooth across all browsers
|
|
- Test with large datasets to verify performance consistency
|
|
- Validate accessibility features work consistently
|
|
- _Requirements: 1.1, 1.2, 1.3, 1.4, 1.5_
|
|
|
|
- [ ] 10. Documentation and User Guide Updates
|
|
- [ ] 10.1 Update component documentation
|
|
- Document the consistent detail panel behavior
|
|
- Add examples of keyboard shortcuts and panel controls
|
|
- Document the useDetailPanel composable API
|
|
- _Requirements: 1.1, 1.2, 1.3, 1.4, 1.5_
|
|
|
|
- [ ] 10.2 Create user workflow examples
|
|
- Document common workflows using detail panels
|
|
- Provide examples of efficient multi-entity review processes
|
|
- Document mobile vs desktop interaction differences
|
|
- _Requirements: 2.1, 2.2, 2.3, 2.4, 2.5_
|
|
|
|
- [ ] 11. Final Integration Testing
|
|
- [ ] 11.1 End-to-end workflow testing
|
|
- Test complete user workflows across all entity browsers
|
|
- Verify consistent behavior in real-world usage scenarios
|
|
- Test with different user roles and permissions
|
|
- _Requirements: 1.1, 1.2, 1.3, 1.4, 1.5_
|
|
|
|
- [ ] 11.2 Regression testing
|
|
- Ensure existing functionality still works correctly
|
|
- Test backward compatibility with existing user preferences
|
|
- Verify no performance regressions introduced
|
|
- _Requirements: 5.1, 5.2, 5.3, 5.4, 5.5_
|
|
|
|
- [ ] 12. Final Checkpoint - Complete Consistency Validation
|
|
- Ensure all tests pass, ask the user if questions arise.
|
|
- Verify consistent behavior across all entity browsers
|
|
- Confirm user experience improvements meet requirements
|
|
- Validate session persistence works correctly |