indigo/LinkDesk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Init Repo

Browse Source
This commit is contained in:
indigo
2026-02-28 03:22:04 +08:00
commit de59b57ee7
883 changed files with 156857 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.kiro/specs/detail-panel-behavior-consistency/design.md
+124
View File
@@ -0,0 +1,124 @@
# Design Document
## Overview
This design establishes consistent detail panel behavior across all entity browsers (shots, assets, tasks) in the VFX Project Management System. The design ensures users have a unified experience when working with detail panels regardless of the entity type.
## Architecture
The detail panel system uses a consistent state management pattern across all entity browsers:
- **Auto-Enable State**: Controls whether panels automatically show on entity selection
- **Manual Visibility State**: Controls manual panel visibility via keyboard shortcuts
- **Combined Logic**: Panel shows when either auto-enabled with selection OR manually visible
## Components and Interfaces
### State Variables (Per Browser)
```typescript
// Auto-enable toggle state
const isDetailPanelEnabled = ref(true)
// Manual visibility control
const isDetailPanelVisible = ref(false)
// Selected entity
const selectedEntity = ref<Entity | null>(null)
```
### Panel Visibility Logic
```typescript
// Panel shows when:
// 1. Auto-enabled AND entity selected, OR
// 2. Manually shown
const showPanel = computed(() =>
selectedEntity.value && (isDetailPanelEnabled.value || isDetailPanelVisible.value)
)
```
### Keyboard Handler Interface
```typescript
interface KeyboardHandler {
handleKeyDown(event: KeyboardEvent): void
// Conditions:
// - 'i' key pressed
// - Entity selected
// - No dialogs open
// - Not typing in input fields
}
```
## Data Models
### Panel State Model
```typescript
interface DetailPanelState {
isEnabled: boolean // Auto-enable toggle
isVisible: boolean // Manual visibility
selectedEntity: Entity | null
}
```
### Entity Selection Model
```typescript
interface EntitySelection {
entity: Entity
preserveManualState: boolean // Don't reset manual visibility
}
```
## Correctness Properties
*A property is a characteristic or behavior that should hold true across all valid executions of a system-essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
### Property 1: Manual Panel Persistence
*For any* entity browser with manually opened detail panel, selecting different entities should keep the panel visible and update content
**Validates: Requirements 2.1, 2.2, 2.3**
### Property 2: Keyboard Toggle Consistency
*For any* entity browser, pressing 'i' key with selected entity should toggle panel visibility consistently
**Validates: Requirements 4.1**
### Property 3: Auto-Enable Independence
*For any* combination of auto-enable and manual states, the panel visibility should follow OR logic (show if either condition is true)
**Validates: Requirements 3.5**
### Property 4: Input Field Protection
*For any* keyboard event while focused on input fields, the 'i' key should not trigger panel toggle
**Validates: Requirements 4.2**
### Property 5: Selection State Preservation
*For any* entity selection while panel is manually visible, the manual visibility state should be preserved
**Validates: Requirements 2.1**
## Error Handling
### Invalid States
- No entity selected + manual panel visible → Hide panel
- Dialog open + keyboard shortcut → Ignore shortcut
- Input field focused + keyboard shortcut → Ignore shortcut
### State Recovery
- Invalid combinations reset to safe defaults
- Manual state cleared when no entity selected
- Auto-enable state persists across sessions
## Testing Strategy
### Unit Testing
- Test individual state transitions
- Test keyboard event handling
- Test panel visibility logic
- Test edge cases (no selection, dialogs open)
### Property-Based Testing
- Generate random entity selections and verify panel behavior
- Test keyboard events with various application states
- Verify state consistency across browser types
- Test auto-enable/manual state combinations
### Integration Testing
- Test behavior across all entity browsers
- Test session persistence
- Test mobile vs desktop behavior
- Test with real user workflows
.kiro/specs/detail-panel-behavior-consistency/requirements.md
+75
View File
@@ -0,0 +1,75 @@
# Requirements Document
## Introduction
This specification defines consistent detail panel behavior across all entity browsers (shots, assets, tasks) in the VFX Project Management System. The detail panel provides users with detailed information about selected entities and should behave consistently regardless of the entity type being viewed.
## Glossary
- **Detail Panel**: A side panel that displays detailed information about a selected entity (shot, asset, or task)
- **Auto-Enable Mode**: When the detail panel automatically shows/hides based on entity selection
- **Manual Mode**: When the detail panel visibility is controlled by keyboard shortcuts
- **Entity Browser**: A component that displays a list/table of entities (ShotBrowser, AssetBrowser, TaskBrowser)
- **Keyboard Toggle**: The 'i' key shortcut that manually controls detail panel visibility
## Requirements
### Requirement 1
**User Story:** As a user, I want consistent detail panel behavior across all entity browsers, so that I can work efficiently without learning different interaction patterns.
#### Acceptance Criteria
1. WHEN I press the 'i' key with an entity selected THEN the system SHALL show the detail panel manually
2. WHEN the detail panel is manually shown and I select another entity THEN the system SHALL keep the panel visible and update the content
3. WHEN the detail panel is manually shown and I press 'i' again THEN the system SHALL hide the panel
4. WHEN auto-enable mode is active and I select an entity THEN the system SHALL show the detail panel automatically
5. WHEN auto-enable mode is disabled and I select an entity THEN the system SHALL not show the detail panel automatically
### Requirement 2
**User Story:** As a user, I want the detail panel to persist when manually opened, so that I can review multiple entities in sequence without the panel closing unexpectedly.
#### Acceptance Criteria
1. WHEN I manually open the detail panel with 'i' key THEN the system SHALL maintain panel visibility across entity selections
2. WHEN I click on different entity rows while panel is manually open THEN the system SHALL update panel content without hiding
3. WHEN I use keyboard navigation while panel is manually open THEN the system SHALL update panel content without hiding
4. WHEN I perform bulk operations while panel is manually open THEN the system SHALL maintain panel visibility
5. WHEN I close the panel manually with 'i' key THEN the system SHALL remember this state until toggled again
### Requirement 3
**User Story:** As a user, I want the auto-enable toggle to work independently of manual panel control, so that I can have flexible control over panel behavior.
#### Acceptance Criteria
1. WHEN auto-enable is active and I manually hide the panel THEN the system SHALL respect manual control temporarily
2. WHEN auto-enable is active and I select a new entity after manual hide THEN the system SHALL show the panel automatically
3. WHEN auto-enable is disabled and I manually show the panel THEN the system SHALL keep it visible until manually hidden
4. WHEN I toggle auto-enable mode THEN the system SHALL apply the new setting to subsequent entity selections
5. WHEN I have both auto-enable and manual control active THEN the system SHALL show the panel (OR logic)
### Requirement 4
**User Story:** As a user, I want keyboard shortcuts to work consistently across all entity browsers, so that muscle memory applies everywhere.
#### Acceptance Criteria
1. WHEN I press 'i' key in any entity browser THEN the system SHALL toggle detail panel visibility
2. WHEN I press 'i' key while typing in input fields THEN the system SHALL not trigger panel toggle
3. WHEN I press 'i' key while dialogs are open THEN the system SHALL not trigger panel toggle
4. WHEN no entity is selected and I press 'i' THEN the system SHALL not show the panel
5. WHEN I press 'i' key on mobile devices THEN the system SHALL toggle the mobile detail sheet
### Requirement 5
**User Story:** As a user, I want the detail panel state to be preserved during my session, so that my preferred workflow is maintained.
#### Acceptance Criteria
1. WHEN I enable auto-mode in one browser THEN the system SHALL remember this preference for the session
2. WHEN I manually show/hide panels THEN the system SHALL maintain this state until I change it
3. WHEN I navigate between different entity browsers THEN the system SHALL preserve auto-enable preferences
4. WHEN I refresh the page THEN the system SHALL restore the last auto-enable state from session storage
5. WHEN I close and reopen the application THEN the system SHALL use default auto-enable settings
.kiro/specs/detail-panel-behavior-consistency/tasks.md
+198
View File
@@ -0,0 +1,198 @@
# 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