mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-08-26 14:19:24 +00:00

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>
30 lines
960 B
TypeScript
30 lines
960 B
TypeScript
import React, { createContext, useContext } from 'react';
|
|
import { useFilesModal, UseFilesModalReturn } from '../hooks/useFilesModal';
|
|
import { useFileHandler } from '../hooks/useFileHandler';
|
|
|
|
interface FilesModalContextType extends UseFilesModalReturn {}
|
|
|
|
const FilesModalContext = createContext<FilesModalContextType | null>(null);
|
|
|
|
export const FilesModalProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const { addToActiveFiles, addMultipleFiles } = useFileHandler();
|
|
|
|
const filesModal = useFilesModal({
|
|
onFileSelect: addToActiveFiles,
|
|
onFilesSelect: addMultipleFiles,
|
|
});
|
|
|
|
return (
|
|
<FilesModalContext.Provider value={filesModal}>
|
|
{children}
|
|
</FilesModalContext.Provider>
|
|
);
|
|
};
|
|
|
|
export const useFilesModalContext = () => {
|
|
const context = useContext(FilesModalContext);
|
|
if (!context) {
|
|
throw new Error('useFilesModalContext must be used within FilesModalProvider');
|
|
}
|
|
return context;
|
|
}; |