Feature/v2/filemanagerimprovements (#4243)

- Select all/deselect all
- Delete Selected
- Download  Selected
- Recent file delete -> menu button with drop down for delete and
download
- Shift click selection added
<img width="1220" height="751"
alt="{330DF96D-7040-4CCB-B089-523F370E3185}"
src="https://github.com/user-attachments/assets/976e42cc-2124-4e62-83a8-25f184e8da3b"
/>
<img width="1160" height="749"
alt="{2D2F4876-7D35-45C3-B0CD-3127EEEEF7B5}"
src="https://github.com/user-attachments/assets/6879a174-a135-41f4-a876-984e7c2f96e2"
/>

---------

Co-authored-by: Connor Yoh <connor@stirlingpdf.com>

frontend/src/components/fileManager/DesktopLayout.tsx

@@ -4,6 +4,7 @@ import FileSourceButtons from './FileSourceButtons';
 import FileDetails from './FileDetails';
 import SearchInput from './SearchInput';
 import FileListArea from './FileListArea';
+import FileActions from './FileActions';
 import HiddenFileInput from './HiddenFileInput';
 import { useFileManagerContext } from '../../contexts/FileManagerContext';
 
@@ -17,27 +18,27 @@ const DesktopLayout: React.FC = () => {
   return (
     <Grid gutter="xs" h="100%" grow={false} style={{ flexWrap: 'nowrap', minWidth: 0 }}>
       {/* Column 1: File Sources */}
-      <Grid.Col span="content" p="lg" style={{ 
-        minWidth: '13.625rem', 
-        width: '13.625rem', 
-        flexShrink: 0, 
+      <Grid.Col span="content" p="lg" style={{
+        minWidth: '13.625rem',
+        width: '13.625rem',
+        flexShrink: 0,
         height: '100%',
       }}>
         <FileSourceButtons />
       </Grid.Col>
-      
+
       {/* Column 2: File List */}
-      <Grid.Col span="auto" style={{ 
-        display: 'flex', 
-        flexDirection: 'column', 
-        height: '100%', 
+      <Grid.Col span="auto" style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
         minHeight: 0,
         minWidth: 0,
         flex: '1 1 0px'
       }}>
-        <div style={{ 
-          flex: 1, 
-          display: 'flex', 
+        <div style={{
+          flex: 1,
+          display: 'flex',
           flexDirection: 'column',
           backgroundColor: 'var(--bg-file-list)',
           border: '1px solid var(--mantine-color-gray-2)',
@@ -45,18 +46,26 @@ const DesktopLayout: React.FC = () => {
           overflow: 'hidden'
         }}>
           {activeSource === 'recent' && (
-            <div style={{ 
-              flexShrink: 0,
-              borderBottom: '1px solid var(--mantine-color-gray-3)'
-            }}>
-              <SearchInput />
-            </div>
+            <>
+              <div style={{
+                flexShrink: 0,
+                borderBottom: '1px solid var(--mantine-color-gray-3)'
+              }}>
+                <SearchInput />
+              </div>
+              <div style={{
+                flexShrink: 0,
+                borderBottom: '1px solid var(--mantine-color-gray-3)'
+              }}>
+                <FileActions />
+              </div>
+            </>
           )}
-          
+
           <div style={{ flex: 1, minHeight: 0 }}>
             <FileListArea
               scrollAreaHeight={`calc(${modalHeight} )`}
-              scrollAreaStyle={{ 
+              scrollAreaStyle={{
                 height: activeSource === 'recent' && recentFiles.length > 0 ? modalHeight : '100%',
                 backgroundColor: 'transparent',
                 border: 'none',
@@ -66,12 +75,12 @@ const DesktopLayout: React.FC = () => {
           </div>
         </div>
       </Grid.Col>
-      
+
       {/* Column 3: File Details */}
-      <Grid.Col p="xl" span="content" style={{ 
-        minWidth: '25rem', 
-        width: '25rem', 
-        flexShrink: 0, 
+      <Grid.Col p="xl" span="content" style={{
+        minWidth: '25rem',
+        width: '25rem',
+        flexShrink: 0,
         height: '100%',
         maxWidth: '18rem'
       }}>
@@ -79,11 +88,11 @@ const DesktopLayout: React.FC = () => {
           <FileDetails />
         </div>
       </Grid.Col>
-      
+
       {/* Hidden file input for local file selection */}
       <HiddenFileInput />
     </Grid>
   );
 };
 
-export default DesktopLayout;
+export default DesktopLayout;

frontend/src/components/fileManager/FileActions.tsx

@@ -0,0 +1,115 @@
+import React from "react";
+import { Group, Text, ActionIcon, Tooltip } from "@mantine/core";
+import SelectAllIcon from "@mui/icons-material/SelectAll";
+import DeleteIcon from "@mui/icons-material/Delete";
+import DownloadIcon from "@mui/icons-material/Download";
+import { useTranslation } from "react-i18next";
+import { useFileManagerContext } from "../../contexts/FileManagerContext";
+
+const FileActions: React.FC = () => {
+  const { t } = useTranslation();
+  const { recentFiles, selectedFileIds, filteredFiles, onSelectAll, onDeleteSelected, onDownloadSelected } =
+    useFileManagerContext();
+
+  const handleSelectAll = () => {
+    onSelectAll();
+  };
+
+  const handleDeleteSelected = () => {
+    if (selectedFileIds.length > 0) {
+      onDeleteSelected();
+    }
+  };
+
+  const handleDownloadSelected = () => {
+    if (selectedFileIds.length > 0) {
+      onDownloadSelected();
+    }
+  };
+
+  // Only show actions if there are files
+  if (recentFiles.length === 0) {
+    return null;
+  }
+
+  const allFilesSelected = filteredFiles.length > 0 && selectedFileIds.length === filteredFiles.length;
+  const hasSelection = selectedFileIds.length > 0;
+
+  return (
+    <div
+      style={{
+        padding: "0.75rem 1rem",
+        backgroundColor: "var(--mantine-color-gray-1)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        minHeight: "3rem",
+        position: "relative",
+      }}
+    >
+      {/* Left: Select All */}
+      <div>
+        <Tooltip
+          label={allFilesSelected ? t("fileManager.deselectAll", "Deselect All") : t("fileManager.selectAll", "Select All")}
+        >
+          <ActionIcon
+            variant="light"
+            size="sm"
+            color="dimmed"
+            onClick={handleSelectAll}
+            disabled={filteredFiles.length === 0}
+            radius="sm"
+          >
+            <SelectAllIcon style={{ fontSize: "1rem" }} />
+          </ActionIcon>
+        </Tooltip>
+      </div>
+
+      {/* Center: Selected count */}
+      <div
+        style={{
+          position: "absolute",
+          left: "50%",
+          transform: "translateX(-50%)",
+        }}
+      >
+        {hasSelection && (
+          <Text size="sm" c="dimmed" fw={500}>
+            {t("fileManager.selectedCount", "{{count}} selected", { count: selectedFileIds.length })}
+          </Text>
+        )}
+      </div>
+
+      {/* Right: Delete and Download */}
+      <Group gap="xs">
+        <Tooltip label={t("fileManager.deleteSelected", "Delete Selected")}>
+          <ActionIcon
+            variant="light"
+            size="sm"
+            color="dimmed"
+            onClick={handleDeleteSelected}
+            disabled={!hasSelection}
+            radius="sm"
+          >
+            <DeleteIcon style={{ fontSize: "1rem" }} />
+          </ActionIcon>
+        </Tooltip>
+
+        <Tooltip label={t("fileManager.downloadSelected", "Download Selected")}>
+          <ActionIcon
+            variant="light"
+            size="sm"
+            color="dimmed"
+            onClick={handleDownloadSelected}
+            disabled={!hasSelection}
+            radius="sm"
+          >
+            <DownloadIcon style={{ fontSize: "1rem" }} />
+          </ActionIcon>
+        </Tooltip>
+      </Group>
+    </div>
+  );
+};
+
+export default FileActions;

frontend/src/components/fileManager/FileListArea.tsx

@@ -19,22 +19,23 @@ const FileListArea: React.FC<FileListAreaProps> = ({
     activeSource,
     recentFiles,
     filteredFiles,
-    selectedFileIds,
+    selectedFilesSet,
     onFileSelect,
     onFileRemove,
     onFileDoubleClick,
+    onDownloadSingle,
     isFileSupported,
   } = useFileManagerContext();
   const { t } = useTranslation();
 
   if (activeSource === 'recent') {
     return (
-      <ScrollArea 
+      <ScrollArea
         h={scrollAreaHeight}
-        style={{ 
+        style={{
           ...scrollAreaStyle
         }}
-        type="always" 
+        type="always"
         scrollbarSize={8}
       >
         <Stack gap={0}>
@@ -53,10 +54,11 @@ const FileListArea: React.FC<FileListAreaProps> = ({
               <FileListItem
                 key={file.id || file.name}
                 file={file}
-                isSelected={selectedFileIds.includes(file.id || file.name)}
+                isSelected={selectedFilesSet.has(file.id || file.name)}
                 isSupported={isFileSupported(file.name)}
-                onSelect={() => onFileSelect(file)}
+                onSelect={(shiftKey) => onFileSelect(file, index, shiftKey)}
                 onRemove={() => onFileRemove(index)}
+                onDownload={() => onDownloadSingle(file)}
                 onDoubleClick={() => onFileDoubleClick(file)}
               />
             ))
@@ -77,4 +79,4 @@ const FileListArea: React.FC<FileListAreaProps> = ({
   );
 };
 
-export default FileListArea;
+export default FileListArea;

frontend/src/components/fileManager/FileListItem.tsx

@@ -1,6 +1,9 @@
 import React, { useState } from 'react';
-import { Group, Box, Text, ActionIcon, Checkbox, Divider } from '@mantine/core';
+import { Group, Box, Text, ActionIcon, Checkbox, Divider, Menu } from '@mantine/core';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
 import DeleteIcon from '@mui/icons-material/Delete';
+import DownloadIcon from '@mui/icons-material/Download';
+import { useTranslation } from 'react-i18next';
 import { getFileSize, getFileDate } from '../../utils/fileUtils';
 import { FileWithUrl } from '../../types/file';
 
@@ -8,33 +11,44 @@ interface FileListItemProps {
   file: FileWithUrl;
   isSelected: boolean;
   isSupported: boolean;
-  onSelect: () => void;
+  onSelect: (shiftKey?: boolean) => void;
   onRemove: () => void;
+  onDownload?: () => void;
   onDoubleClick?: () => void;
   isLast?: boolean;
 }
 
-const FileListItem: React.FC<FileListItemProps> = ({ 
-  file, 
-  isSelected, 
-  isSupported, 
-  onSelect, 
-  onRemove, 
+const FileListItem: React.FC<FileListItemProps> = ({
+  file,
+  isSelected,
+  isSupported,
+  onSelect,
+  onRemove,
+  onDownload,
   onDoubleClick
 }) => {
   const [isHovered, setIsHovered] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const { t } = useTranslation();
+
+  // Keep item in hovered state if menu is open
+  const shouldShowHovered = isHovered || isMenuOpen;
 
   return (
     <>
-      <Box 
-        p="sm" 
-        style={{ 
+      <Box
+        p="sm"
+        style={{
           cursor: 'pointer',
-          backgroundColor: isSelected ? 'var(--mantine-color-gray-0)' : (isHovered ? 'var(--mantine-color-gray-0)' : 'var(--bg-file-list)'),
+          backgroundColor: isSelected ? 'var(--mantine-color-gray-1)' : (shouldShowHovered ? 'var(--mantine-color-gray-1)' : 'var(--bg-file-list)'),
           opacity: isSupported ? 1 : 0.5,
-          transition: 'background-color 0.15s ease'
+          transition: 'background-color 0.15s ease',
+          userSelect: 'none',
+          WebkitUserSelect: 'none',
+          MozUserSelect: 'none',
+          msUserSelect: 'none'
         }}
-        onClick={onSelect}
+        onClick={(e) => onSelect(e.shiftKey)}
         onDoubleClick={onDoubleClick}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
@@ -54,26 +68,59 @@ const FileListItem: React.FC<FileListItemProps> = ({
               }}
             />
           </Box>
-       
+
           <Box style={{ flex: 1, minWidth: 0 }}>
             <Text size="sm" fw={500} truncate>{file.name}</Text>
             <Text size="xs" c="dimmed">{getFileSize(file)} • {getFileDate(file)}</Text>
           </Box>
-          {/* Delete button - fades in/out on hover */}
-          <ActionIcon 
-            variant="subtle" 
-            c="dimmed"
-            size="md"
-            onClick={(e) => { e.stopPropagation(); onRemove(); }}
-            style={{
-              opacity: isHovered ? 1 : 0,
-              transform: isHovered ? 'scale(1)' : 'scale(0.8)',
-              transition: 'opacity 0.3s ease, transform 0.3s ease',
-              pointerEvents: isHovered ? 'auto' : 'none'
-            }}
+
+          {/* Three dots menu - fades in/out on hover */}
+          <Menu
+            position="bottom-end"
+            withinPortal
+            onOpen={() => setIsMenuOpen(true)}
+            onClose={() => setIsMenuOpen(false)}
           >
-            <DeleteIcon style={{ fontSize: 20 }} />
-          </ActionIcon>
+            <Menu.Target>
+              <ActionIcon
+                variant="subtle"
+                c="dimmed"
+                size="md"
+                onClick={(e) => e.stopPropagation()}
+                style={{
+                  opacity: shouldShowHovered ? 1 : 0,
+                  transform: shouldShowHovered ? 'scale(1)' : 'scale(0.8)',
+                  transition: 'opacity 0.3s ease, transform 0.3s ease',
+                  pointerEvents: shouldShowHovered ? 'auto' : 'none'
+                }}
+              >
+                <MoreVertIcon style={{ fontSize: 20 }} />
+              </ActionIcon>
+            </Menu.Target>
+
+            <Menu.Dropdown>
+              {onDownload && (
+                <Menu.Item
+                  leftSection={<DownloadIcon style={{ fontSize: 16 }} />}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDownload();
+                  }}
+                >
+                  {t('fileManager.download', 'Download')}
+                </Menu.Item>
+              )}
+              <Menu.Item
+                leftSection={<DeleteIcon style={{ fontSize: 16 }} />}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onRemove();
+                }}
+              >
+                {t('fileManager.delete', 'Delete')}
+              </Menu.Item>
+            </Menu.Dropdown>
+          </Menu>
         </Group>
       </Box>
       { <Divider color="var(--mantine-color-gray-3)" />}
@@ -81,4 +128,4 @@ const FileListItem: React.FC<FileListItemProps> = ({
   );
 };
 
-export default FileListItem;
+export default FileListItem;

frontend/src/components/fileManager/MobileLayout.tsx

@@ -4,6 +4,7 @@ import FileSourceButtons from './FileSourceButtons';
 import FileDetails from './FileDetails';
 import SearchInput from './SearchInput';
 import FileListArea from './FileListArea';
+import FileActions from './FileActions';
 import HiddenFileInput from './HiddenFileInput';
 import { useFileManagerContext } from '../../contexts/FileManagerContext';
 
@@ -22,10 +23,11 @@ const MobileLayout: React.FC = () => {
     // Estimate heights of fixed components
     const fileSourceHeight = '3rem'; // FileSourceButtons height
     const fileDetailsHeight = selectedFiles.length > 0 ? '10rem' : '8rem'; // FileDetails compact height
+    const fileActionsHeight = activeSource === 'recent' ? '3rem' : '0rem'; // FileActions height (now at bottom)
     const searchHeight = activeSource === 'recent' ? '3rem' : '0rem'; // SearchInput height
-    const gapHeight = activeSource === 'recent' ? '3rem' : '2rem'; // Stack gaps
+    const gapHeight = activeSource === 'recent' ? '3.75rem' : '2rem'; // Stack gaps
     
-    return `calc(${baseHeight} - ${fileSourceHeight} - ${fileDetailsHeight} - ${searchHeight} - ${gapHeight})`;
+    return `calc(${baseHeight} - ${fileSourceHeight} - ${fileDetailsHeight} - ${fileActionsHeight} - ${searchHeight} - ${gapHeight})`;
   };
 
   return (
@@ -51,12 +53,20 @@ const MobileLayout: React.FC = () => {
         minHeight: 0
       }}>
         {activeSource === 'recent' && (
-          <Box style={{ 
-            flexShrink: 0,
-            borderBottom: '1px solid var(--mantine-color-gray-2)'
-          }}>
-            <SearchInput />
-          </Box>
+          <>
+            <Box style={{ 
+              flexShrink: 0,
+              borderBottom: '1px solid var(--mantine-color-gray-2)'
+            }}>
+              <SearchInput />
+            </Box>
+            <Box style={{ 
+              flexShrink: 0,
+              borderBottom: '1px solid var(--mantine-color-gray-2)'
+            }}>
+              <FileActions />
+            </Box>
+          </>
         )}
         
         <Box style={{ flex: 1, minHeight: 0 }}>