Refactor App.js into smaller, more maintainable components

[Johay90]

Current Behavior:
The App.js file (400+ lines) contains all the core logic of the application including:

• File processing functions
• State management
• Event handlers
• UI rendering
• Batch processing logic

This makes the code harder to maintain, test, and understand.

Proposed Solution:
Split the App.js file into several logical modules and components:

1. File Processing Module (src/utils/fileProcessing/):

   • batchProcessor.js - Batch processing logic
   • fileScanner.js - File scanning and entry processing
   • directoryHandler.js - Directory traversal logic

2. Custom Hooks (src/hooks/):

   • useFileProcessing.js - File processing state and logic
   • useProgress.js - Progress tracking state
   • useErrorHandling.js - Error state management

3. Types/Interfaces (src/types/):

   • Define TypeScript/JSDoc interfaces for file structures
   • Define common types used across components

4. State Management:

   • Consider using React Context for global state
   • Split state into logical domains (files, progress, UI)

Example Structure:

// src/hooks/useFileProcessing.js
export const useFileProcessing = () => {
  // Move file processing state and logic here
  return {
    processFiles,
    scanDirectory,
    // ... other methods
  };
};

// src/hooks/useProgress.js
export const useProgress = () => {
  const [progress, setProgress] = useState({
    status: '',
    current: '',
    processed: 0,
    total: 0
  });
  // ... progress tracking logic
};

Implementation Steps:

1. Create new directory structure
2. Extract file processing logic to utilities
3. Create custom hooks for state management
4. Update imports and dependencies