Merge branch 'V2' into feature/V2/rightRail

frontend/public/locales/en-GB/translation.json

@@ -604,6 +604,10 @@
       "desc": "Build multi-step workflows by chaining together PDF actions. Ideal for recurring tasks."
     }
   },
+  "landing": {
+    "addFiles": "Add Files",
+    "uploadFromComputer": "Upload from computer"
+  },
   "viewPdf": {
     "tags": "view,read,annotate,text,image,highlight,edit",
     "title": "View/Edit PDF",

frontend/public/locales/en-US/translation.json

@@ -608,6 +608,10 @@
       "desc": "Replace color for text and background in PDF and invert full color of pdf to reduce file size"
     }
   },
+  "landing": {
+    "addFiles": "Add Files",
+    "uploadFromComputer": "Upload from computer"
+  },
   "viewPdf": {
     "tags": "view,read,annotate,text,image,highlight,edit",
     "title": "View/Edit PDF",

frontend/src/components/shared/LandingPage.tsx

@@ -4,18 +4,25 @@ import { Dropzone } from '@mantine/dropzone';
 import AddIcon from '@mui/icons-material/Add';
 import { useTranslation } from 'react-i18next';
 import { useFileHandler } from '../../hooks/useFileHandler';
+import { useFilesModalContext } from '../../contexts/FilesModalContext';
 
 const LandingPage = () => {
   const { addMultipleFiles } = useFileHandler();
   const fileInputRef = React.useRef<HTMLInputElement>(null);
   const { colorScheme } = useMantineColorScheme();
   const { t } = useTranslation();
+  const { openFilesModal } = useFilesModalContext();
+  const [isUploadHover, setIsUploadHover] = React.useState(false);
 
   const handleFileDrop = async (files: File[]) => {
     await addMultipleFiles(files);
   };
 
-  const handleAddFilesClick = () => {
+  const handleOpenFilesModal = () => {
+    openFilesModal();
+  };
+
+  const handleNativeUploadClick = () => {
     fileInputRef.current?.click();
   };
 
@@ -44,7 +51,7 @@ const LandingPage = () => {
           borderRadius: '0.5rem 0.5rem 0 0',
           filter: 'var(--drop-shadow-filter)',
           backgroundColor: 'var(--landing-paper-bg)',
-          transition: 'background-color 0.2s ease',
+          transition: 'background-color 0.4s ease',
         }}
         activateOnClick={false}
         styles={{
@@ -99,26 +106,73 @@ const LandingPage = () => {
               />
             </Group>
 
-            {/* Add Files Button */}
+            {/* Add Files + Native Upload Buttons */}
-            <Button
+            <div
               style={{
-                backgroundColor: 'var(--landing-button-bg)',
+                display: 'flex',
-                color: 'var(--landing-button-color)',
+                alignItems: 'center',
-                border: '1px solid var(--landing-button-border)',
+                justifyContent: 'center',
-                borderRadius: '2rem',
+                gap: '0.6rem',
-                height: '38px',
                 width: '80%',
                 marginTop: '0.8rem',
-                marginBottom: '0.8rem',
+                marginBottom: '0.8rem'
-
               }}
-              onClick={handleAddFilesClick}
+              onMouseLeave={() => setIsUploadHover(false)}
             >
-              <AddIcon className="text-[var(--accent-interactive)]" />
+              <Button
-              <span>
+                style={{
-                {t('fileUpload.uploadFiles', 'Upload Files')}
+                  backgroundColor: 'var(--landing-button-bg)',
-              </span>
+                  color: 'var(--landing-button-color)',
-            </Button>
+                  border: '1px solid var(--landing-button-border)',
+                  borderRadius: '2rem',
+                  height: '38px',
+                  paddingLeft: isUploadHover ? 0 : '1rem',
+                  paddingRight: isUploadHover ? 0 : '1rem',
+                  width: isUploadHover ? '58px' : 'calc(100% - 58px - 0.6rem)',
+                  minWidth: isUploadHover ? '58px' : undefined,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  transition: 'width .5s ease, padding .5s ease'
+                }}
+                onClick={handleOpenFilesModal}
+                onMouseEnter={() => setIsUploadHover(false)}
+              >
+                <AddIcon className="text-[var(--accent-interactive)]" />
+                {!isUploadHover && (
+                  <span>
+                    {t('landing.addFiles', 'Add Files')}
+                  </span>
+                )}
+              </Button>
+              <Button
+                aria-label="Upload"
+                style={{
+                  backgroundColor: 'var(--landing-button-bg)',
+                  color: 'var(--landing-button-color)',
+                  border: '1px solid var(--landing-button-border)',
+                  borderRadius: '1rem',
+                  height: '38px',
+                  width: isUploadHover ? 'calc(100% - 50px)' : '58px',
+                  minWidth: '58px',
+                  paddingLeft: isUploadHover ? '1rem' : 0,
+                  paddingRight: isUploadHover ? '1rem' : 0,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  transition: 'width .5s ease, padding .5s ease'
+                }}
+                onClick={handleNativeUploadClick}
+                onMouseEnter={() => setIsUploadHover(true)}
+              >
+                <span className="material-symbols-rounded" style={{ fontSize: '1.25rem', color: 'var(--accent-interactive)' }}>upload</span>
+                {isUploadHover && (
+                  <span style={{ marginLeft: '.5rem' }}>
+                    {t('landing.uploadFromComputer', 'Upload from computer')}
+                  </span>
+                )}
+              </Button>
+            </div>
 
             {/* Hidden file input for native file picker */}
             <input