Feature/v2/file manager UI improvements (#4286)

# Description of Changes <img width="1171" height="416" alt="Screenshot 2025-08-26 at 1 33 14 AM" src="https://github.com/user-attachments/assets/7fd132fb-93ae-4849-b7b0-78182707cf14" /> --- ## 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.
2026-07-16 11:23:10 +02:00 · 2025-08-26 12:35:09 +01:00
parent 95b3e22229
commit 16e028a8ef
5 changed files with 558 additions and 299 deletions
@@ -1,11 +1,14 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
-import { Text, Checkbox, Tooltip, ActionIcon, Badge } from '@mantine/core';
+import React, { useState, useCallback, useRef, useMemo, useEffect } from 'react';
+import { Text, ActionIcon, CheckboxIndicator } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
-import CloseIcon from '@mui/icons-material/Close';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import DownloadOutlinedIcon from '@mui/icons-material/DownloadOutlined';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+
 import styles from './PageEditor.module.css';
 import { useFileContext } from '../../contexts/FileContext';

@@ -15,7 +18,7 @@ interface FileItem {
  pageCount: number;
  thumbnail: string;
  size: number;
-  splitBefore?: boolean;
+  modifiedAt?: number | string | Date;
 }

 interface FileThumbnailProps {
@@ -29,6 +32,7 @@ interface FileThumbnailProps {
  onViewFile: (fileId: string) => void;
  onSetStatus: (status: string) => void;
  onReorderFiles?: (sourceFileId: string, targetFileId: string, selectedFileIds: string[]) => void;
+  onDownloadFile?: (fileId: string) => void;
  toolMode?: boolean;
  isSupported?: boolean;
 }
@@ -36,36 +40,93 @@ interface FileThumbnailProps {
 const FileThumbnail = ({
  file,
  index,
-  totalFiles,
  selectedFiles,
-  selectionMode,
  onToggleFile,
  onDeleteFile,
  onViewFile,
  onSetStatus,
  onReorderFiles,
-  toolMode = false,
+  onDownloadFile,
  isSupported = true,
 }: FileThumbnailProps) => {
  const { t } = useTranslation();
-  const { pinnedFiles, pinFile, unpinFile, isFilePinned, activeFiles } = useFileContext();
-  
-  // Drag and drop state
+  const { pinFile, unpinFile, isFilePinned, activeFiles } = useFileContext();
+
+  // ---- Drag state ----
  const [isDragging, setIsDragging] = useState(false);
  const dragElementRef = useRef<HTMLDivElement | null>(null);
+  const [actionsWidth, setActionsWidth] = useState<number | undefined>(undefined);
+  const [showActions, setShowActions] = useState(false);

-  // Find the actual File object that corresponds to this FileItem
-  const actualFile = activeFiles.find(f => f.name === file.name && f.size === file.size);
+  // Resolve the actual File object for pin/unpin operations
+  const actualFile = useMemo(() => {
+    return activeFiles.find((f: File) => f.name === file.name && f.size === file.size);
+  }, [activeFiles, file.name, file.size]);
+  const isPinned = actualFile ? isFilePinned(actualFile) : false;

-  const formatFileSize = (bytes: number) => {
+  const downloadSelectedFile = useCallback(() => {
+    // Prefer parent-provided handler if available
+    if (typeof onDownloadFile === 'function') {
+      onDownloadFile(file.id);
+      return;
+    }
+
+    // Fallback: attempt to download using the File object if provided
+    const maybeFile = (file as unknown as { file?: File }).file;
+    if (maybeFile instanceof File) {
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(maybeFile);
+      link.download = maybeFile.name || file.name || 'download';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(link.href);
+      return;
+    }
+
+    // If we can't find a way to download, surface a status message
+    onSetStatus?.(typeof t === 'function' ? t('downloadUnavailable', 'Download unavailable for this item') : 'Download unavailable for this item');
+  }, [file, onDownloadFile, onSetStatus, t]);
+  const handleRef = useRef<HTMLSpanElement | null>(null);
+
+  // ---- Selection ----
+  const isSelected = selectedFiles.includes(file.id);
+
+  // ---- Meta formatting ----
+  const prettySize = useMemo(() => {
+    const bytes = file.size ?? 0;
    if (bytes === 0) return '0 B';
    const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
-  };
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+  }, [file.size]);

-  // Setup drag and drop using @atlaskit/pragmatic-drag-and-drop
+  const extUpper = useMemo(() => {
+    const m = /\.([a-z0-9]+)$/i.exec(file.name ?? '');
+    return (m?.[1] || '').toUpperCase();
+  }, [file.name]);
+
+  const pageLabel = useMemo(
+    () =>
+      file.pageCount > 0
+        ? `${file.pageCount} ${file.pageCount === 1 ? 'Page' : 'Pages'}`
+        : '',
+    [file.pageCount]
+  );
+
+  const dateLabel = useMemo(() => {
+    const d =
+      file.modifiedAt != null ? new Date(file.modifiedAt) : new Date(); // fallback
+    if (Number.isNaN(d.getTime())) return '';
+    return new Intl.DateTimeFormat(undefined, {
+      month: 'short',
+      day: '2-digit',
+      year: 'numeric',
+    }).format(d);
+  }, [file.modifiedAt]);
+
+  // ---- Drag & drop wiring ----
  const fileElementRef = useCallback((element: HTMLDivElement | null) => {
    if (!element) return;
    
@@ -111,252 +172,234 @@ const FileThumbnail = ({
      dragCleanup();
      dropCleanup();
    };
-  }, [file.id, file.name, selectionMode, selectedFiles, onReorderFiles]);
+  }, [file.id, file.name, selectedFiles, onReorderFiles]);
+
+  // Update dropdown width on resize
+  useEffect(() => {
+    const update = () => {
+      if (dragElementRef.current) setActionsWidth(dragElementRef.current.offsetWidth);
+    };
+    update();
+    window.addEventListener('resize', update);
+    return () => window.removeEventListener('resize', update);
+  }, []);
+
+  // Close the actions dropdown when hovering outside this file card (and its dropdown)
+  useEffect(() => {
+    if (!showActions) return;
+
+    const isInsideCard = (target: EventTarget | null) => {
+      const container = dragElementRef.current;
+      if (!container) return false;
+      return target instanceof Node && container.contains(target);
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isInsideCard(e.target)) {
+        setShowActions(false);
+      }
+    };
+
+    const handleTouchStart = (e: TouchEvent) => {
+      // On touch devices, close if the touch target is outside the card
+      if (!isInsideCard(e.target)) {
+        setShowActions(false);
+      }
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('touchstart', handleTouchStart, { passive: true });
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('touchstart', handleTouchStart);
+    };
+  }, [showActions]);
+
+  // ---- Card interactions ----
+  const handleCardClick = () => {
+    if (!isSupported) return;
+    onToggleFile(file.id);
+  };
+

  return (
    <div
      ref={fileElementRef}
      data-file-id={file.id}
      data-testid="file-thumbnail"
-      className={`
-        ${styles.pageContainer}
-        !rounded-lg
-        cursor-grab
-        select-none
-        w-[20rem]
-        h-[24rem]
-        flex flex-col items-center justify-center
-        flex-shrink-0
-        shadow-sm
-        hover:shadow-md
-        transition-all
-        relative
-        ${selectionMode
-          ? 'bg-white hover:bg-gray-50'
-          : 'bg-white hover:bg-gray-50'}
-        ${isDragging ? 'opacity-50 scale-95' : ''}
-      `}
+      data-selected={isSelected}
+      data-supported={isSupported}
+      className={`${styles.card} w-[18rem] h-[22rem] select-none flex flex-col shadow-sm transition-all relative`}
      style={{
-        opacity: isSupported ? (isDragging ? 0.5 : 1) : 0.5,
-        filter: isSupported ? 'none' : 'grayscale(50%)'
+        opacity: isSupported ? (isDragging ? 0.9 : 1) : 0.5,
+        filter: isSupported ? 'none' : 'grayscale(50%)',
      }}
+      tabIndex={0}
+      role="listitem"
+      aria-selected={isSelected}
+      onClick={handleCardClick}
    >
-        <div
-          className={styles.checkboxContainer}
-          data-testid="file-thumbnail-checkbox"
-          style={{
-            position: 'absolute',
-            top: 8,
-            right: 8,
-            zIndex: 4,
-            backgroundColor: 'white',
-            borderRadius: '4px',
-            padding: '2px',
-            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-            pointerEvents: 'auto'
-          }}
-          onMouseDown={(e) => e.stopPropagation()}
-          onDragStart={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-          }}
-        >
-          <Checkbox
-            checked={selectedFiles.includes(file.id)}
-            onChange={(event) => {
-              event.stopPropagation();
-              if (isSupported) {
-                onToggleFile(file.id);
-              }
-            }}
-            onClick={(e) => e.stopPropagation()}
-            disabled={!isSupported}
-            size="sm"
-          />
+      {/* Header bar */}
+      <div
+        className={`${styles.header} ${
+          isSelected ? styles.headerSelected : styles.headerResting
+        }`}
+      >
+        {/* Logo/checkbox area */}
+        <div className={styles.logoMark}>
+          {isSupported ? (
+            <CheckboxIndicator
+              checked={isSelected}
+              onChange={() => onToggleFile(file.id)}
+              color="var(--checkbox-checked-bg)"
+            />
+          ) : (
+            <div className={styles.unsupportedPill}>
+              <span>
+                {t('unsupported', 'Unsupported')}
+              </span>
+            </div>
+          )}
        </div>

-      {/* File content area */}
-      <div className="file-container w-[90%] h-[80%] relative">
-        {/* Stacked file effect - multiple shadows to simulate pages */}
-        <div
-          style={{
-            width: '100%',
-            height: '100%',
-            backgroundColor: 'var(--mantine-color-gray-1)',
-            borderRadius: 6,
-            border: '1px solid var(--mantine-color-gray-3)',
-            padding: 4,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            position: 'relative',
-            boxShadow: '2px 2px 0 rgba(0,0,0,0.1), 4px 4px 0 rgba(0,0,0,0.05)'
+        {/* Centered index */}
+        <div className={styles.headerIndex} aria-label={`Position ${index + 1}`}>
+          {index + 1}
+        </div>
+
+        {/* Kebab menu */}
+        <ActionIcon
+          aria-label={t('moreOptions', 'More options')}
+          variant="subtle"
+          className={styles.kebab}
+          onClick={(e) => {
+            e.stopPropagation();
+            setShowActions((v) => !v);
          }}
        >
+          <MoreVertIcon fontSize="small" />
+        </ActionIcon>
+      </div>
+
+      {/* Actions overlay */}
+      {showActions && (
+        <div
+          className={styles.actionsOverlay}
+          style={{ width: actionsWidth }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <button
+            className={styles.actionRow}
+            onClick={() => {
+              if (actualFile) {
+                if (isPinned) {
+                  unpinFile(actualFile);
+                  onSetStatus?.(`Unpinned ${file.name}`);
+                } else {
+                  pinFile(actualFile);
+                  onSetStatus?.(`Pinned ${file.name}`);
+                }
+              }
+              setShowActions(false);
+            }}
+          >
+            {isPinned ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
+            <span>{isPinned ? t('unpin', 'Unpin') : t('pin', 'Pin')}</span>
+          </button>
+
+          <button
+            className={styles.actionRow}
+            onClick={() => { downloadSelectedFile(); setShowActions(false); }}
+          >
+            <DownloadOutlinedIcon fontSize="small" />
+            <span>{t('download', 'Download')}</span>
+          </button>
+
+          <div className={styles.actionsDivider} />
+
+          <button
+            className={`${styles.actionRow} ${styles.actionDanger}`}
+            onClick={() => {
+              onDeleteFile(file.id);
+              onSetStatus(`Deleted ${file.name}`);
+              setShowActions(false);
+            }}
+          >
+            <DeleteOutlineIcon fontSize="small" />
+            <span>{t('delete', 'Delete')}</span>
+          </button>
+        </div>
+      )}
+
+      {/* Title + meta line */}
+      <div 
+      style={{
+        padding: '0.5rem',
+        textAlign: 'center',
+        background: 'var(--file-card-bg)',
+        marginTop: '0.5rem',
+        marginBottom: '0.5rem',
+      }}>
+        <Text size="lg" fw={700} className={styles.title} lineClamp={2}>
+          {file.name}
+        </Text>
+        <Text
+          size="sm"
+          c="dimmed"
+          className={styles.meta}
+          lineClamp={3}
+          title={`${extUpper || 'FILE'} • ${prettySize}`}
+        >
+          {/* e.g., Jan 29, 2025 - PDF file - 3 Pages */}
+          {dateLabel}
+          {extUpper ? ` - ${extUpper} file` : ''}
+          {pageLabel ? ` - ${pageLabel}` : ''}
+        </Text>
+      </div>
+
+      {/* Preview area */}
+      <div className={`${styles.previewBox} mx-6 mb-4 relative flex-1`}>
+        <div className={styles.previewPaper}>
          <img
            src={file.thumbnail}
            alt={file.name}
            draggable={false}
+            loading="lazy"
+            decoding="async"
            onError={(e) => {
-              // Hide broken image if blob URL was revoked
-              const img = e.target as HTMLImageElement;
+              const img = e.currentTarget;
              img.style.display = 'none';
+              img.parentElement?.setAttribute('data-thumb-missing', 'true');
            }}
            style={{
-              maxWidth: '100%',
-              maxHeight: '100%',
+              maxWidth: '80%',
+              maxHeight: '80%',
              objectFit: 'contain',
-              borderRadius: 2,
+              borderRadius: 0,
+              background: '#ffffff',
+              border: '1px solid var(--border-default)',
+              display: 'block',
+              marginLeft: 'auto',
+              marginRight: 'auto',
+              alignSelf: 'start'
            }}
          />
        </div>

-        {/* Page count badge - only show for PDFs */}
-        {file.pageCount > 0 && (
-          <Badge
-            size="sm"
-            variant="filled"
-            color="blue"
-            style={{
-              position: 'absolute',
-              top: 8,
-              left: 8,
-              zIndex: 3,
-            }}
-          >
-            {file.pageCount} {file.pageCount === 1 ? 'page' : 'pages'}
-          </Badge>
+        {/* Pin indicator (bottom-left) */}
+        {isPinned && (
+          <span className={styles.pinIndicator} aria-hidden>
+            <PushPinIcon fontSize="small" />
+          </span>
        )}

-        {/* Unsupported badge */}
-        {!isSupported && (
-          <Badge
-            size="sm"
-            variant="filled"
-            color="orange"
-            style={{
-              position: 'absolute',
-              top: 8,
-              right: selectionMode ? 48 : 8, // Avoid overlap with checkbox
-              zIndex: 3,
-            }}
-          >
-{t("fileManager.unsupported", "Unsupported")}
-          </Badge>
-        )}
-
-        {/* File name overlay */}
-        <Text
-          className={styles.pageNumber}
-          size="xs"
-          fw={500}
-          c="white"
-          style={{
-            position: 'absolute',
-            bottom: 5,
-            left: 5,
-            right: 5,
-            background: 'rgba(0, 0, 0, 0.8)',
-            padding: '4px 6px',
-            borderRadius: 4,
-            zIndex: 2,
-            opacity: 0,
-            transition: 'opacity 0.2s ease-in-out',
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-            whiteSpace: 'nowrap'
-          }}
-        >
-          {file.name}
-        </Text>
-
-        {/* Hover controls */}
-        <div
-          className={styles.pageHoverControls}
-          style={{
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            background: 'rgba(0, 0, 0, 0.8)',
-            padding: '8px 12px',
-            borderRadius: 20,
-            opacity: 0,
-            transition: 'opacity 0.2s ease-in-out',
-            zIndex: 3,
-            display: 'flex',
-            gap: '8px',
-            alignItems: 'center',
-            whiteSpace: 'nowrap'
-          }}
-        >
-
-          {actualFile && (
-            <Tooltip label={isFilePinned(actualFile) ? "Unpin File" : "Pin File"}>
-              <ActionIcon
-                size="md"
-                variant="subtle"
-                c={isFilePinned(actualFile) ? "yellow" : "white"}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  if (isFilePinned(actualFile)) {
-                    unpinFile(actualFile);
-                    onSetStatus(`Unpinned ${file.name}`);
-                  } else {
-                    pinFile(actualFile);
-                    onSetStatus(`Pinned ${file.name}`);
-                  }
-                }}
-              >
-                {isFilePinned(actualFile) ? (
-                  <PushPinIcon style={{ fontSize: 20 }} />
-                ) : (
-                  <PushPinOutlinedIcon style={{ fontSize: 20 }} />
-                )}
-              </ActionIcon>
-            </Tooltip>
-          )}
-
-          <Tooltip label="Close File">
-            <ActionIcon
-              size="md"
-              variant="subtle"
-              c="orange"
-              onClick={(e) => {
-                e.stopPropagation();
-                onDeleteFile(file.id);
-                onSetStatus(`Closed ${file.name}`);
-              }}
-            >
-              <CloseIcon style={{ fontSize: 20 }} />
-            </ActionIcon>
-          </Tooltip>
-        </div>
-
-        <DragIndicatorIcon
-          style={{
-            position: 'absolute',
-            bottom: 4,
-            right: 4,
-            color: 'rgba(0,0,0,0.3)',
-            fontSize: 16,
-            zIndex: 1
-          }}
-        />
+        {/* Drag handle (span wrapper so we can attach a ref reliably) */}
+        <span ref={handleRef} className={styles.dragHandle} aria-hidden>
+          <DragIndicatorIcon fontSize="small" />
+        </span>
      </div>
-
-      {/* File info */}
-      <div className="w-full px-4 py-2 text-center">
-        <Text size="sm" fw={500} truncate>
-          {file.name}
-        </Text>
-        <Text size="xs" c="dimmed">
-          {formatFileSize(file.size)}
-        </Text>
-      </div>
-
    </div>
  );
 };

-export default FileThumbnail;
+export default React.memo(FileThumbnail);