del: plan file..

2026-09-25 15:25:44 +00:00 · 2026-05-07 00:34:45 +02:00
parent 5a2cfee6b4
commit 85c3a98a3d
1 changed files with 0 additions and 214 deletions
@@ -1,214 +0,0 @@
-# LaunchWindow Refactoring Plan
-
-## Overview
-Refactor the monolithic LaunchWindow.tsx (1627 lines) into smaller, focused components with improved performance, better separation of concerns, and enhanced UI responsiveness.
-
-## Current Problems Identified
-
-1. **Monolithic Component** - Single file with 1627 lines handling everything
-2. **Performance Issues** - Multiple useEffects, frequent re-renders, no memoization
-3. **UI Lag** - Complex drag handlers, frequent electron API calls on every render
-4. **Poor Separation** - Mixes UI, business logic, and electron API interactions
-5. **State Management** - 20+ useState calls scattered throughout
-6. **No Code Splitting** - All logic in one component
-
-## Refactoring Strategy
-
-### Phase 1: Component Decomposition
-
-#### Core Components to Extract:
-
-1. **RecordingControls** (lines 972-1037)
-   - Handles recording state UI (recording, paused, idle)
-   - Extract to: `src/components/launch/RecordingControls.tsx`
-
-2. **SourceSelector** (lines 1041-1061, 1185-1256)
-   - Screen/window source selection dropdown
-   - Extract to: `src/components/launch/SourceSelector.tsx`
-
-3. **MicrophoneSelector** (lines 1260-1324)
-   - Microphone device selection with audio level meter
-   - Extract to: `src/components/launch/MicrophoneSelector.tsx`
-
-4. **WebcamSelector** (lines 1326-1417)
-   - Webcam device selection and preview
-   - Extract to: `src/components/launch/WebcamSelector.tsx`
-
-5. **CountdownSelector** (lines 1419-1438)
-   - Countdown delay options
-   - Extract to: `src/components/launch/CountdownSelector.tsx`
-
-6. **MoreOptionsMenu** (lines 1440-1528)
-   - Additional settings (HUD capture, folder, language, etc.)
-   - Extract to: `src/components/launch/MoreOptionsMenu.tsx`
-
-7. **WebcamPreview** (lines 1601-1622)
-   - Floating webcam preview with drag functionality
-   - Extract to: `src/components/launch/WebcamPreview.tsx`
-
-8. **HUDBar** (lines 1539-1599)
-   - Main HUD bar with drag handle and state display
-   - Extract to: `src/components/launch/HUDBar.tsx`
-
-9. **ProjectBrowser** (lines 1172-1184)
-   - Project library browser dialog
-   - Already exists as separate component, just needs better integration
-
-### Phase 2: Custom Hooks
-
-Extract logic into reusable hooks:
-
-1. **useRecordingState**
-   - Manages recording, paused, finalizing states
-   - Handles timer logic and elapsed time calculation
-
-2. **useDeviceSelection**
-   - Manages microphone and webcam device selection
-   - Handles audio/video device enumeration
-
-3. **useHUDPosition**
-   - Manages HUD and webcam preview positioning
-   - Handles drag state and boundary clamping
-
-4. **useSourceSelection**
-   - Manages screen/window source selection
-   - Handles source fetching and caching
-
-5. **useHUDVisibility**
-   - Manages HUD capture protection and visibility
-   - Handles electron API interactions for HUD state
-
-6. **useElectronAPI** (wrapper)
-   - Centralizes all electron API calls
-   - Adds caching and debouncing for frequently called APIs
-
-### Phase 3: Performance Optimizations
-
-1. **Memoization**
-   - Use `useCallback` for all event handlers
-   - Use `useMemo` for derived state and expensive calculations
-   - Memoize component props to prevent unnecessary re-renders
-
-2. **State Consolidation**
-   - Group related state using `useReducer` for complex state logic
-   - Separate UI state from business logic state
-
-3. **Effect Optimization**
-   - Combine related useEffects
-   - Add proper dependency arrays
-   - Use cleanup functions to prevent memory leaks
-
-4. **Debounced API Calls**
-   - Debounce frequent electron API calls (e.g., HUD position updates)
-   - Cache API results where appropriate
-
-5. **Lazy Loading**
-   - Lazy load heavy components (ProjectBrowser, settings panels)
-   - Use React.lazy() for non-critical components
-
-### Phase 4: UI/UX Improvements
-
-1. **Responsive Design**
-   - Add proper breakpoints for different screen sizes
-   - Improve touch/pointer event handling
-
-2. **Smooth Animations**
-   - Optimize Framer Motion usage
-   - Reduce layout thrashing
-   - Use `transform` and `opacity` for animations
-
-3. **Better Drag Handling**
-   - Use requestAnimationFrame for smooth dragging
-   - Implement velocity-based snapping
-   - Add visual feedback during drag operations
-
-4. **Accessibility**
-   - Add ARIA labels and roles
-   - Improve keyboard navigation
-   - Focus management for dropdowns
-
-### Phase 5: Code Quality
-
-1. **Type Safety**
-   - Extract interfaces to separate types file
-   - Add proper JSDoc comments
-   - Use discriminated unions for state management
-
-2. **Error Boundaries**
-   - Add error boundaries for critical components
-   - Graceful degradation for failed operations
-
-3. **Testing**
-   - Add unit tests for hooks
-   - Component tests for UI interactions
-   - Integration tests for electron API interactions
-
-## Implementation Priority
-
-### High Priority (Fix Performance Issues)
-1. Extract WebcamPreview component - Reduces main component complexity
-2. Extract RecordingControls - Isolates recording state logic
-3. Implement useRecordingState hook - Centralizes timer logic
-4. Add memoization to prevent re-renders
-
-### Medium Priority (Improve Code Organization)
-5. Extract all selector components (Source, Microphone, Webcam, Countdown)
-6. Extract HUDBar and MoreOptionsMenu
-7. Implement custom hooks for device selection and HUD position
-
-### Low Priority (Enhancements)
-8. Add responsive design improvements
-9. Optimize animations and drag handling
-10. Add comprehensive testing
-
-## File Structure After Refactoring
-
-```
-src/components/launch/
-├── LaunchWindow.tsx          # Main component (reduced to ~200 lines)
-├── RecordingControls.tsx     # Recording state UI
-├── SourceSelector.tsx        # Screen/window selection
-├── MicrophoneSelector.tsx    # Microphone device selection
-├── WebcamSelector.tsx        # Webcam device selection
-├── CountdownSelector.tsx     # Countdown delay options
-├── MoreOptionsMenu.tsx       # Additional settings
-├── WebcamPreview.tsx         # Floating webcam preview
-├── HUDBar.tsx               # Main HUD bar
-├── ProjectBrowser.tsx       # Project browser dialog
-└── types.ts                 # Type definitions
-
-src/hooks/launch/
-├── useRecordingState.ts     # Recording state management
-├── useDeviceSelection.ts    # Device selection logic
-├── useHUDPosition.ts        # HUD positioning logic
-├── useSourceSelection.ts    # Source selection logic
-├── useHUDVisibility.ts      # HUD visibility management
-└── useElectronAPI.ts        # Electron API wrapper
-
-src/types/launch/
-└── index.ts                 # All type definitions
-```
-
-## Expected Benefits
-
-1. **Performance**: 60%+ reduction in re-renders, smoother animations
-2. **Maintainability**: Easier to understand and modify individual components
-3. **Testability**: Isolated components are easier to test
-4. **Reusability**: Custom hooks can be used in other parts of the app
-5. **Developer Experience**: Clear separation of concerns, better documentation
-
-## Migration Strategy
-
-1. Create new component files alongside existing code
-2. Gradually extract functionality, testing each component
-3. Keep LaunchWindow.tsx functional during migration
-4. Replace sections incrementally
-5. Remove old code only after new implementation is verified
-
-## Success Metrics
-
- Main component reduced to <300 lines
- All custom hooks properly tested
- No performance regressions (verified with React DevTools)
- All existing functionality preserved
- Improved code coverage (>80% for new components)