refactor: modularize App.tsx from 2400 to 563 lines with custom hooks and services

[arnestrickmann]

Overview

This PR refactors the bloated 2400-line App.tsx file into a clean, modular architecture following
React and TypeScript best practices.

Problem

• Single file with 2400+ lines mixing UI, business logic, and state management
• 20+ useState hooks scattered throughout
• 468-line function (handleCreateTask)
• Poor testability and maintainability
• Difficult onboarding for new engineers

Solution

Extracted functionality into specialized modules following single responsibility principle:

Custom Hooks (6 new hooks)

• useModalState - Centralized modal state management (10+ modals)
• usePanelLayout - Complex sidebar/panel layout logic
• useProjectManagement - Project CRUD, selection, and navigation
• useTaskManagement - Task operations, deletion, renaming
• useGithubIntegration - GitHub auth and device flow
• useAppInitialization - App startup and first launch detection

Services (2 new services)

• taskCreationService - Extracted 468-line task creation logic
• projectService - Project creation and cloning helpers

Components (2 new components)

• HomeView - Clean home screen UI
• MainContentArea - Content switching logic

Constants

• layout.ts - Layout constants and helpers
• providers.ts - Terminal provider definitions

Results

• App.tsx reduced by 77% (2404 → 563 lines)
• 15+ new modules, each < 300 lines
• Zero functionality changes - All features preserved
• Type-safe - Full TypeScript support maintained
• Better separation - Clear boundaries between UI, state, and logic

Testing

• TypeScript compilation passes (npm run type-check)
• ESLint passes (warnings only for existing any types)
• Manual testing of all major workflows:
  • Project creation/opening/deletion
  • Task creation/deletion/renaming
  • GitHub authentication
  • Modal operations
  • Panel resizing

Benefits

✅ Improved maintainability - Each module has single responsibility
✅ Better testability - Isolated hooks and pure functions
✅ Easier onboarding - Self-documenting module names
✅ Faster development - Easy to locate and modify specific features
✅ Performance ready - Better code splitting opportunities

File Structure

src/renderer/
├── components/
│ ├── HomeView.tsx (new)
│ └── MainContentArea.tsx (new)
├── constants/
│ ├── layout.ts (new)
│ └── providers.ts (new)
├── hooks/
│ ├── useModalState.ts (new)
│ ├── usePanelLayout.ts (new)
│ ├── useProjectManagement.ts (new)
│ ├── useTaskManagement.ts (new)
│ ├── useGithubIntegration.ts (new)
│ └── useAppInitialization.ts (new)
└── lib/
├── taskCreationService.ts (new)
└── projectService.ts (new)

Breaking Changes

None - This is a pure refactoring with no API or behavior changes.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
docs	Ready	Preview, Comment	Jan 17, 2026 3:16am