Replace kebab menu in file editor with on hover menu (#4624)

Replace kebab menu in file editor with on hover menu by refactoring page
editor's menu into a new component. In mobile sizes, the hover menus are
always visible.

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

@@ -90,6 +90,11 @@
   "moreOptions": "More Options",
   "editYourNewFiles": "Edit your new file(s)",
   "close": "Close",
+  "openInViewer": "Open in Viewer",
+  "confirmClose": "Confirm Close",
+  "confirmCloseMessage": "Are you sure you want to close this file?",
+  "confirmCloseCancel": "Cancel",
+  "confirmCloseConfirm": "Close File",
   "fileSelected": "Selected: {{filename}}",
   "chooseFile": "Choose File",
   "filesSelected": "{{count}} files selected",

frontend/src/components/fileEditor/FileEditor.module.css

@@ -9,7 +9,7 @@
   transition: box-shadow 0.18s ease, outline-color 0.18s ease, transform 0.18s ease;
   max-width: 100%;
   max-height: 100%;
-  overflow: hidden;
+  overflow: visible;
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }

frontend/src/components/fileEditor/FileEditorThumbnail.tsx

@@ -1,10 +1,11 @@
-import React, { useState, useCallback, useRef, useMemo, useEffect } from 'react';
-import { Text, ActionIcon, CheckboxIndicator, Tooltip } from '@mantine/core';
+import React, { useState, useCallback, useRef, useMemo } from 'react';
+import { Text, ActionIcon, CheckboxIndicator, Tooltip, Modal, Button, Group, Stack } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
 import { alert } from '../toast';
 import { useTranslation } from 'react-i18next';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
 import DownloadOutlinedIcon from '@mui/icons-material/DownloadOutlined';
 import CloseIcon from '@mui/icons-material/Close';
+import VisibilityIcon from '@mui/icons-material/Visibility';
 import UnarchiveIcon from '@mui/icons-material/Unarchive';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
@@ -19,6 +20,7 @@ import { useFileState } from '../../contexts/file/fileHooks';
 import { FileId } from '../../types/file';
 import { formatFileSize } from '../../utils/fileUtils';
 import ToolChain from '../shared/ToolChain';
+import HoverActionMenu, { HoverAction } from '../shared/HoverActionMenu';
 
 
 
@@ -60,8 +62,9 @@ const FileEditorThumbnail = ({
   // ---- 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);
+  const [showHoverMenu, setShowHoverMenu] = useState(false);
+  const isMobile = useMediaQuery('(max-width: 1024px)');
+  const [showCloseModal, setShowCloseModal] = useState(false);
 
   // Resolve the actual File object for pin/unpin operations
   const actualFile = useMemo(() => {
@@ -155,46 +158,66 @@ const FileEditorThumbnail = ({
     };
   }, [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);
+  // Handle close with confirmation
+  const handleCloseWithConfirmation = useCallback(() => {
+    setShowCloseModal(true);
   }, []);
 
-  // Close the actions dropdown when hovering outside this file card (and its dropdown)
-  useEffect(() => {
-    if (!showActions) return;
+  const handleConfirmClose = useCallback(() => {
+    onCloseFile(file.id);
+    alert({ alertType: 'neutral', title: `Closed ${file.name}`, expandable: false, durationMs: 3500 });
+    setShowCloseModal(false);
+  }, [file.id, file.name, onCloseFile]);
 
-    const isInsideCard = (target: EventTarget | null) => {
-      const container = dragElementRef.current;
-      if (!container) return false;
-      return target instanceof Node && container.contains(target);
-    };
+  const handleCancelClose = useCallback(() => {
+    setShowCloseModal(false);
+  }, []);
 
-    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]);
+  // Build hover menu actions
+  const hoverActions = useMemo<HoverAction[]>(() => [
+    {
+      id: 'view',
+      icon: <VisibilityIcon style={{ fontSize: 20 }} />,
+      label: t('openInViewer', 'Open in Viewer'),
+      onClick: (e) => {
+        e.stopPropagation();
+        onViewFile(file.id);
+      },
+    },
+    {
+      id: 'download',
+      icon: <DownloadOutlinedIcon style={{ fontSize: 20 }} />,
+      label: t('download', 'Download'),
+      onClick: (e) => {
+        e.stopPropagation();
+        onDownloadFile(file.id);
+        alert({ alertType: 'success', title: `Downloading ${file.name}`, expandable: false, durationMs: 2500 });
+      },
+    },
+    {
+      id: 'unzip',
+      icon: <UnarchiveIcon style={{ fontSize: 20 }} />,
+      label: t('fileManager.unzip', 'Unzip'),
+      onClick: (e) => {
+        e.stopPropagation();
+        if (onUnzipFile) {
+          onUnzipFile(file.id);
+          alert({ alertType: 'success', title: `Unzipping ${file.name}`, expandable: false, durationMs: 2500 });
+        }
+      },
+      hidden: !isZipFile || !onUnzipFile,
+    },
+    {
+      id: 'close',
+      icon: <CloseIcon style={{ fontSize: 20 }} />,
+      label: t('close', 'Close'),
+      onClick: (e) => {
+        e.stopPropagation();
+        handleCloseWithConfirmation();
+      },
+      color: 'red',
+    }
+  ], [t, file.id, file.name, isZipFile, onViewFile, onDownloadFile, onUnzipFile, handleCloseWithConfirmation]);
 
   // ---- Card interactions ----
   const handleCardClick = () => {
@@ -232,6 +255,8 @@ const FileEditorThumbnail = ({
       role="listitem"
       aria-selected={isSelected}
       onClick={handleCardClick}
+      onMouseEnter={() => setShowHoverMenu(true)}
+      onMouseLeave={() => setShowHoverMenu(false)}
       onDoubleClick={handleCardDoubleClick}
     >
       {/* Header bar */}
@@ -289,98 +314,9 @@ const FileEditorThumbnail = ({
               {isPinned ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
             </ActionIcon>
           </Tooltip>
-
-          {/* Download icon */}
-          <Tooltip label={t('download', 'Download')}>
-            <ActionIcon
-              aria-label={t('download', 'Download')}
-              variant="subtle"
-              className={styles.headerIconButton}
-              onClick={(e) => {
-                e.stopPropagation();
-                onDownloadFile(file.id);
-                alert({ alertType: 'success', title: `Downloading ${file.name}`, expandable: false, durationMs: 2500 });
-              }}
-            >
-              <DownloadOutlinedIcon fontSize="small" />
-            </ActionIcon>
-          </Tooltip>
-
-          {/* Kebab menu */}
-          <ActionIcon
-            aria-label={t('moreOptions', 'More options')}
-            variant="subtle"
-            className={styles.headerIconButton}
-            onClick={(e) => {
-              e.stopPropagation();
-              setShowActions((v) => !v);
-            }}
-          >
-            <MoreVertIcon fontSize="small" />
-          </ActionIcon>
         </div>
       </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);
-                  alert({ alertType: 'neutral', title: `Unpinned ${file.name}`, expandable: false, durationMs: 3000 });
-                } else {
-                  pinFile(actualFile);
-                  alert({ alertType: 'success', title: `Pinned ${file.name}`, expandable: false, durationMs: 3000 });
-                }
-              }
-              setShowActions(false);
-            }}
-          >
-            {isPinned ? <PushPinIcon className={styles.pinned} fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
-            <span>{isPinned ? t('unpin', 'Unpin') : t('pin', 'Pin')}</span>
-          </button>
-
-          <button
-            className={styles.actionRow}
-            onClick={() => { onDownloadFile(file.id); alert({ alertType: 'success', title: `Downloading ${file.name}`, expandable: false, durationMs: 2500 }); setShowActions(false); }}
-          >
-            <DownloadOutlinedIcon fontSize="small" />
-            <span>{t('download', 'Download')}</span>
-          </button>
-
-          {isZipFile && onUnzipFile && (
-            <button
-              className={styles.actionRow}
-              onClick={() => { onUnzipFile(file.id); alert({ alertType: 'success', title: `Unzipping ${file.name}`, expandable: false, durationMs: 2500 }); setShowActions(false); }}
-            >
-              <UnarchiveIcon fontSize="small" />
-              <span>{t('fileManager.unzip', 'Unzip')}</span>
-            </button>
-          )}
-
-          <div className={styles.actionsDivider} />
-
-          <button
-            className={`${styles.actionRow} ${styles.actionDanger}`}
-            onClick={() => {
-              onCloseFile(file.id);
-              alert({ alertType: 'neutral', title: `Closed ${file.name}`, expandable: false, durationMs: 3500 });
-              setShowActions(false);
-            }}
-          >
-            <CloseIcon fontSize="small" />
-            <span>{t('close', 'Close')}</span>
-          </button>
-        </div>
-      )}
-
       {/* Title + meta line */}
       <div
       style={{
@@ -471,6 +407,37 @@ const FileEditorThumbnail = ({
           </div>
         )}
       </div>
+
+      {/* Hover Menu */}
+      <HoverActionMenu
+        show={showHoverMenu || isMobile}
+        actions={hoverActions}
+        position="outside"
+      />
+
+      {/* Close Confirmation Modal */}
+      <Modal
+        opened={showCloseModal}
+        onClose={handleCancelClose}
+        title={t('confirmClose', 'Confirm Close')}
+        centered
+        size="auto"
+      >
+        <Stack gap="md">
+          <Text size="md">{t('confirmCloseMessage', 'Are you sure you want to close this file?')}</Text>
+          <Text size="sm" c="dimmed" fw={500}>
+            {file.name}
+          </Text>
+          <Group justify="flex-end" gap="sm">
+            <Button variant="light" onClick={handleCancelClose}>
+              {t('confirmCloseCancel', 'Cancel')}
+            </Button>
+            <Button variant="filled" color="red" onClick={handleConfirmClose}>
+              {t('confirmCloseConfirm', 'Close File')}
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
     </div>
   );
 };

frontend/src/components/pageEditor/PageThumbnail.tsx

@@ -1,5 +1,6 @@
-import React, { useCallback, useState, useEffect, useRef } from 'react';
-import { Text, Checkbox, Tooltip, ActionIcon } from '@mantine/core';
+import React, { useCallback, useState, useEffect, useRef, useMemo } from 'react';
+import { Text, Checkbox } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import RotateLeftIcon from '@mui/icons-material/RotateLeft';
@@ -12,6 +13,7 @@ import { PDFPage, PDFDocument } from '../../types/pageEditor';
 import { useThumbnailGeneration } from '../../hooks/useThumbnailGeneration';
 import { useFilesModalContext } from '../../contexts/FilesModalContext';
 import styles from './PageEditor.module.css';
+import HoverActionMenu, { HoverAction } from '../shared/HoverActionMenu';
 
 
 interface PageThumbnailProps {
@@ -65,6 +67,8 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
   const [isDragging, setIsDragging] = useState(false);
   const [isMouseDown, setIsMouseDown] = useState(false);
   const [mouseStartPos, setMouseStartPos] = useState<{x: number, y: number} | null>(null);
+  const [isHovered, setIsHovered] = useState(false);
+  const isMobile = useMediaQuery('(max-width: 1024px)');
   const dragElementRef = useRef<HTMLDivElement>(null);
   const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(page.thumbnail);
   const { getThumbnailFromCache, requestThumbnail } = useThumbnailGeneration();
@@ -270,8 +274,75 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
   const handleMouseLeave = useCallback(() => {
     setIsMouseDown(false);
     setMouseStartPos(null);
+    setIsHovered(false);
   }, []);
 
+  // Build hover menu actions
+  const hoverActions = useMemo<HoverAction[]>(() => [
+    {
+      id: 'move-left',
+      icon: <ArrowBackIcon style={{ fontSize: 20 }} />,
+      label: 'Move Left',
+      onClick: (e) => {
+        e.stopPropagation();
+        if (index > 0 && !movingPage && !isAnimating) {
+          onSetMovingPage(page.pageNumber);
+          onReorderPages(page.pageNumber, index - 1);
+          setTimeout(() => onSetMovingPage(null), 650);
+          onSetStatus(`Moved page ${page.pageNumber} left`);
+        }
+      },
+      disabled: index === 0
+    },
+    {
+      id: 'move-right',
+      icon: <ArrowForwardIcon style={{ fontSize: 20 }} />,
+      label: 'Move Right',
+      onClick: (e) => {
+        e.stopPropagation();
+        if (index < totalPages - 1 && !movingPage && !isAnimating) {
+          onSetMovingPage(page.pageNumber);
+          onReorderPages(page.pageNumber, index + 1);
+          setTimeout(() => onSetMovingPage(null), 650);
+          onSetStatus(`Moved page ${page.pageNumber} right`);
+        }
+      },
+      disabled: index === totalPages - 1
+    },
+    {
+      id: 'rotate-left',
+      icon: <RotateLeftIcon style={{ fontSize: 20 }} />,
+      label: 'Rotate Left',
+      onClick: handleRotateLeft,
+    },
+    {
+      id: 'rotate-right',
+      icon: <RotateRightIcon style={{ fontSize: 20 }} />,
+      label: 'Rotate Right',
+      onClick: handleRotateRight,
+    },
+    {
+      id: 'delete',
+      icon: <DeleteIcon style={{ fontSize: 20 }} />,
+      label: 'Delete Page',
+      onClick: handleDelete,
+      color: 'red',
+    },
+    {
+      id: 'split',
+      icon: <ContentCutIcon style={{ fontSize: 20 }} />,
+      label: 'Split After',
+      onClick: handleSplit,
+      hidden: index >= totalPages - 1,
+    },
+    {
+      id: 'insert',
+      icon: <AddIcon style={{ fontSize: 20 }} />,
+      label: 'Insert File After',
+      onClick: handleInsertFileAfter,
+    }
+  ], [index, totalPages, movingPage, isAnimating, page.pageNumber, handleRotateLeft, handleRotateRight, handleDelete, handleSplit, handleInsertFileAfter, onReorderPages, onSetMovingPage, onSetStatus]);
+
   return (
     <div
       ref={pageElementRef}
@@ -302,6 +373,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
       draggable={false}
       onMouseDown={handleMouseDown}
       onMouseUp={handleMouseUp}
+      onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={handleMouseLeave}
     >
       {
@@ -413,128 +485,12 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
           {page.pageNumber}
         </Text>
 
-        <div
+        <HoverActionMenu
+          show={isHovered || isMobile}
+          actions={hoverActions}
+          position="inside"
           className={styles.pageHoverControls}
-          style={{
-            position: 'absolute',
-            bottom: 8,
-            left: '50%',
-            transform: 'translateX(-50%)',
-            backgroundColor: 'var(--bg-toolbar)',
-            border: '1px solid var(--border-default)',
-            padding: '6px 12px',
-            borderRadius: 20,
-            opacity: 0,
-            transition: 'opacity 0.2s ease-in-out',
-            zIndex: 3,
-            display: 'flex',
-            gap: '8px',
-            alignItems: 'center',
-            whiteSpace: 'nowrap'
-          }}
-          onMouseDown={(e) => e.stopPropagation()}
-          onMouseUp={(e) => e.stopPropagation()}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <Tooltip label="Move Left">
-            <ActionIcon
-              size="md"
-              variant="subtle"
-              style={{ color: 'var(--mantine-color-dimmed)' }}
-              disabled={index === 0}
-              onClick={(e) => {
-                e.stopPropagation();
-                if (index > 0 && !movingPage && !isAnimating) {
-                  onSetMovingPage(page.pageNumber);
-                  // Actually move the page left (swap with previous page)
-                  onReorderPages(page.pageNumber, index - 1);
-                  setTimeout(() => onSetMovingPage(null), 650);
-                  onSetStatus(`Moved page ${page.pageNumber} left`);
-                }
-              }}
-            >
-              <ArrowBackIcon style={{ fontSize: 20 }} />
-            </ActionIcon>
-          </Tooltip>
-
-          <Tooltip label="Move Right">
-            <ActionIcon
-              size="md"
-              variant="subtle"
-              style={{ color: 'var(--mantine-color-dimmed)' }}
-              disabled={index === totalPages - 1}
-              onClick={(e) => {
-                e.stopPropagation();
-                if (index < totalPages - 1 && !movingPage && !isAnimating) {
-                  onSetMovingPage(page.pageNumber);
-                  // Actually move the page right (swap with next page)
-                  onReorderPages(page.pageNumber, index + 1);
-                  setTimeout(() => onSetMovingPage(null), 650);
-                  onSetStatus(`Moved page ${page.pageNumber} right`);
-                }
-              }}
-            >
-              <ArrowForwardIcon style={{ fontSize: 20 }} />
-            </ActionIcon>
-          </Tooltip>
-
-          <Tooltip label="Rotate Left">
-            <ActionIcon
-              size="md"
-              variant="subtle"
-              style={{ color: 'var(--mantine-color-dimmed)' }}
-              onClick={handleRotateLeft}
-            >
-              <RotateLeftIcon style={{ fontSize: 20 }} />
-            </ActionIcon>
-          </Tooltip>
-
-          <Tooltip label="Rotate Right">
-            <ActionIcon
-              size="md"
-              variant="subtle"
-              style={{ color: 'var(--mantine-color-dimmed)' }}
-              onClick={handleRotateRight}
-            >
-              <RotateRightIcon style={{ fontSize: 20 }} />
-            </ActionIcon>
-          </Tooltip>
-
-          <Tooltip label="Delete Page">
-            <ActionIcon
-              size="md"
-              variant="subtle"
-              c="red"
-              onClick={handleDelete}
-            >
-              <DeleteIcon style={{ fontSize: 20 }} />
-            </ActionIcon>
-          </Tooltip>
-
-          {index < totalPages - 1 && (
-            <Tooltip label="Split After">
-              <ActionIcon
-                size="md"
-                variant="subtle"
-                style={{ color: 'var(--mantine-color-dimmed)' }}
-                onClick={handleSplit}
-              >
-                <ContentCutIcon style={{ fontSize: 20 }} />
-              </ActionIcon>
-            </Tooltip>
-          )}
-
-          <Tooltip label="Insert File After">
-            <ActionIcon
-              size="md"
-              variant="subtle"
-              style={{ color: 'var(--mantine-color-dimmed)' }}
-              onClick={handleInsertFileAfter}
-            >
-              <AddIcon style={{ fontSize: 20 }} />
-            </ActionIcon>
-          </Tooltip>
-        </div>
+        />
 
       </div>
 

frontend/src/components/shared/HoverActionMenu.module.css

@@ -0,0 +1,28 @@
+/* Base Hover Menu */
+.hoverMenu {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  background: var(--bg-toolbar);
+  border: 1px solid var(--border-default);
+  padding: 6px 12px;
+  border-radius: 20px;
+  box-shadow: var(--shadow-md);
+  z-index: 30;
+  white-space: nowrap;
+  pointer-events: auto;
+  transition: opacity 0.2s ease-in-out;
+}
+
+/* Inside positioning (Page Editor style) - within container */
+.inside {
+  bottom: 8px;
+}
+
+/* Outside positioning (File Editor style) - below container */
+.outside {
+  bottom: -8px;
+}

frontend/src/components/shared/HoverActionMenu.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { ActionIcon, Tooltip } from '@mantine/core';
+import styles from './HoverActionMenu.module.css';
+
+export interface HoverAction {
+  id: string;
+  icon: React.ReactNode;
+  label: string;
+  onClick: (e: React.MouseEvent) => void;
+  disabled?: boolean;
+  color?: string;
+  hidden?: boolean;
+}
+
+interface HoverActionMenuProps {
+  show: boolean;
+  actions: HoverAction[];
+  position?: 'inside' | 'outside';
+  className?: string;
+}
+
+const HoverActionMenu: React.FC<HoverActionMenuProps> = ({
+  show,
+  actions,
+  position = 'inside',
+  className = ''
+}) => {
+  const visibleActions = actions.filter(action => !action.hidden);
+
+  if (visibleActions.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`${styles.hoverMenu} ${position === 'outside' ? styles.outside : styles.inside} ${className}`}
+      style={{ opacity: show ? 1 : 0 }}
+      onMouseDown={(e) => e.stopPropagation()}
+      onMouseUp={(e) => e.stopPropagation()}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {visibleActions.map((action) => (
+        <Tooltip key={action.id} label={action.label}>
+          <ActionIcon
+            size="md"
+            variant="subtle"
+            style={{ color: action.color || 'var(--mantine-color-dimmed)' }}
+            disabled={action.disabled}
+            onClick={action.onClick}
+            c={action.color}
+          >
+            {action.icon}
+          </ActionIcon>
+        </Tooltip>
+      ))}
+    </div>
+  );
+};
+
+export default HoverActionMenu;