# Description of Changes
This PR refactors the frontend icon system to remove reliance on
@mui/icons-material and the Google Material Symbols webfont.
🔄 Changes
Introduced a new LocalIcon component powered by Iconify.
Added scripts/generate-icons.js to:
Scan the codebase for used icons.
Extract only required Material Symbols from
@iconify-json/material-symbols.
Generate a minimized JSON bundle and TypeScript types.
Updated .gitignore to exclude generated icon files.
Replaced all <span className="material-symbols-rounded"> and MUI icon
imports with <LocalIcon> usage.
Removed material-symbols CSS import and related font dependency.
Updated tsconfig.json to support JSON imports.
Added prebuild/predev hooks to auto-generate the icons.
✅ Benefits
No more 5MB+ Google webfont download → reduces initial page load size.
Smaller install footprint → no giant @mui/icons-material dependency.
Only ships the icons we actually use, cutting bundle size further.
Type-safe icons via auto-generated MaterialSymbolIcon union type.
Note most MUI not included in this update since they are low priority
due to small SVG sizing (don't grab whole bundle)
---
## Checklist
### General
- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings
### Documentation
- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)
### UI Changes (if applicable)
- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)
### Testing (if applicable)
- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.
---------
Co-authored-by: a <a>
# 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>
