# Description of Changes
Because we used string typing for IDs and names, it was really easy to
make mistakes where variables named like `subcategory` would be stored
as an ID in one file, but then read assuming it's a name in another
file. This PR changes the code to consistently use enum cases when
referring to IDs of categories, subcategories, and tools (at least in as
many places as I can find them, ~I had to add a `ToolId` enum for this
work~ I originally added a `ToolId` type for this work, but it caused
too many issues when merging with #4222 so I've pulled it back out for
now).
Making that change made it obvious where we were inconsistently passing
IDs and reading them as names etc. allowing me to fix rendering issues
in the All Tools pane, where the subcategory IDs were being rendered
directly (instead of being translated) or where IDs were being
translated into names, but were then being re-translated, causing
warnings in the log.
Component Extraction & Context Refactor - Summary
🔧 What We Did
- Extracted HomePage's 286-line monolithic component into focused parts
- Created ToolPanel (105 lines) for tool selection UI
- Created Workbench (203 lines) for view management
- Created ToolWorkflowContext (220 lines) for centralized state
- Reduced HomePage to 60 lines of provider setup
- Eliminated all prop drilling - components use contexts directly
🏆 Why This is Good
- Maintainability: Each component has single purpose, easy
debugging/development
- Architecture: Clean separation of concerns, future features easier to
add
- Code Quality: 105% more lines but organized/purposeful vs tangled
spaghetti code
---------
Co-authored-by: Connor Yoh <connor@stirlingpdf.com>
Co-authored-by: James Brunton <jbrunton96@gmail.com>
Overview
Replaced scattered file inputs with a unified modal-based upload system.
Users now upload files via a global Files button with intelligent
tool-aware filtering.
Key Changes
🔄 New Upload Flow
- Before: Direct file inputs throughout the UI
- After: Single Files button → Modal → Tool filters files automatically
🎯 Smart File Filtering
- Modal shows only supported file types based on selected tool
- Visual indicators for unsupported files (grayed out + badges)
- Automatic duplicate detection
✨ Enhanced UX
- Files button shows active state when modal is open
- Consistent upload experience across all tools
- Professional modal workflow
Architecture
New Components
FilesModalProvider → FileUploadModal → Tool-aware filtering
Button System Redesign
type: 'navigation' | 'modal' | 'action'
// Only navigation buttons stay active
// Modal buttons show active when modal open
Files Changed
- ✅ QuickAccessBar.tsx - Added Files button
- ✅ FileUploadModal.tsx - New tool-aware modal
- ✅ HomePage.tsx - Integrated modal system
- ✅ ConvertE2E.spec.ts - Updated tests for modal workflow
Benefits
- Unified UX: One place to upload files
- Smart Filtering: Only see relevant file types
- Better Architecture: Clean separation of concerns
- Improved Testing: Reliable test automation
Migration: File uploads now go through Files button → modal instead of
direct inputs. All existing functionality preserved.
---------
Co-authored-by: Connor Yoh <connor@stirlingpdf.com>
