From 85c3a98a3df22a47adea7a136dec08e50a67fe10 Mon Sep 17 00:00:00 2001 From: Alan Trebugeais Date: Thu, 7 May 2026 00:34:45 +0200 Subject: [PATCH] del: plan file.. --- .kilo/plans/1778084832635-happy-otter.md | 214 ----------------------- 1 file changed, 214 deletions(-) delete mode 100644 .kilo/plans/1778084832635-happy-otter.md diff --git a/.kilo/plans/1778084832635-happy-otter.md b/.kilo/plans/1778084832635-happy-otter.md deleted file mode 100644 index 03437fb3..00000000 --- a/.kilo/plans/1778084832635-happy-otter.md +++ /dev/null @@ -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)