Merge branch 'V2' of https://github.com/Stirling-Tools/Stirling-PDF into feature/v2/pageeditor-improved

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

@@ -996,7 +996,6 @@
     },
     "submit": "Change"
   },
-  
   "removePages": {
     "tags": "Remove pages,delete pages",
     "title": "Remove Pages",
@@ -1113,7 +1112,88 @@
     },
     "help": "Please read this documentation on how to use this for other languages and/or use not in docker",
     "credit": "This service uses qpdf and Tesseract for OCR.",
-    "submit": "Process PDF with OCR"
+    "submit": "Process PDF with OCR",
+    "operation": {
+      "submit": "Process OCR and Review"
+    },
+    "results": {
+      "title": "OCR Results"
+    },
+    "languagePicker": {
+      "additionalLanguages": "Looking for additional languages?",
+      "viewSetupGuide": "View setup guide →"
+    },
+    "settings": {
+      "title": "Settings",
+      "ocrMode": {
+        "label": "OCR Mode",
+        "auto": "Auto (skip text layers)",
+        "force": "Force (re-OCR all, replace text)",
+        "strict": "Strict (abort if text found)"
+      },
+      "languages": {
+        "label": "Languages",
+        "placeholder": "Select languages"
+      },
+      "compatibilityMode": {
+        "label": "Compatibility Mode"
+      },
+      "advancedOptions": {
+        "label": "Processing Options",
+        "sidecar": "Create a text file",
+        "deskew": "Deskew pages",
+        "clean": "Clean input file",
+        "cleanFinal": "Clean final output"
+      }
+    },
+    "tooltip": {
+      "header": {
+        "title": "OCR Settings Overview"
+      },
+      "mode": {
+        "title": "OCR Mode",
+        "text": "Optical Character Recognition (OCR) helps you turn scanned or screenshotted pages into text you can search, copy, or highlight.",
+        "bullet1": "Auto skips pages that already contain text layers.",
+        "bullet2": "Force re-OCRs every page and replaces all the text.",
+        "bullet3": "Strict halts if any selectable text is found."
+      },
+      "languages": {
+        "title": "Languages",
+        "text": "Improve OCR accuracy by specifying the expected languages. Choose one or more languages to guide detection."
+      },
+      "output": {
+        "title": "Output",
+        "text": "Decide how you want the text output formatted:",
+        "bullet1": "Searchable PDF embeds text behind the original image.",
+        "bullet2": "HOCR XML returns a structured machine-readable file.",
+        "bullet3": "Plain-text sidecar creates a separate .txt file with raw content."
+      },
+      "advanced": {
+        "header": {
+          "title": "Advanced OCR Processing"
+        },
+        "compatibility": {
+          "title": "Compatibility Mode",
+          "text": "Uses OCR 'sandwich PDF' mode: results in larger files, but more reliable with certain languages and older PDF software. By default we use hOCR for smaller, modern PDFs."
+        },
+        "sidecar": {
+          "title": "Create Text File",
+          "text": "Generates a separate .txt file alongside the PDF containing all extracted text content for easy access and processing."
+        },
+        "deskew": {
+          "title": "Deskew Pages",
+          "text": "Automatically corrects skewed or tilted pages to improve OCR accuracy. Useful for scanned documents that weren't perfectly aligned."
+        },
+        "clean": {
+          "title": "Clean Input File",
+          "text": "Preprocesses the input by removing noise, enhancing contrast, and optimising the image for better OCR recognition before processing."
+        },
+        "cleanFinal": {
+          "title": "Clean Final Output",
+          "text": "Post-processes the final PDF by removing OCR artefacts and optimising the text layer for better readability and smaller file size."
+        }
+      }
+    }
   },
   "extractImages": {
     "tags": "picture,photo,save,archive,zip,capture,grab",

frontend/src/components/pageEditor/FileThumbnail.tsx

@@ -1,11 +1,14 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
+import React, { useState, useCallback, useRef, useMemo, useEffect } from 'react';
-import { Text, Checkbox, Tooltip, ActionIcon, Badge } from '@mantine/core';
+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 | null;
   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();
+  const { pinFile, unpinFile, isFilePinned, activeFiles } = useFileContext();
 
-  // Drag and drop state
+  // ---- 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
+  // Resolve the actual File object for pin/unpin operations
-  const actualFile = activeFiles.find(f => f.name === file.name && f.size === file.size);
+  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,69 +172,164 @@ 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={`
+      data-selected={isSelected}
-        ${styles.pageContainer}
+      data-supported={isSupported}
-        !rounded-lg
+      className={`${styles.card} w-[18rem] h-[22rem] select-none flex flex-col shadow-sm transition-all relative`}
-        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' : ''}
-      `}
       style={{
-        opacity: isSupported ? (isDragging ? 0.5 : 1) : 0.5,
+        opacity: isSupported ? (isDragging ? 0.9 : 1) : 0.5,
-        filter: isSupported ? 'none' : 'grayscale(50%)'
+        filter: isSupported ? 'none' : 'grayscale(50%)',
       }}
+      tabIndex={0}
+      role="listitem"
+      aria-selected={isSelected}
+      onClick={handleCardClick}
     >
-        <div
+      {/* Header bar */}
-          className={styles.checkboxContainer}
+      <div
-          data-testid="file-thumbnail-checkbox"
+        className={`${styles.header} ${
-          style={{
+          isSelected ? styles.headerSelected : styles.headerResting
-            position: 'absolute',
+        }`}
-            top: 8,
+      >
-            right: 8,
+        {/* Logo/checkbox area */}
-            zIndex: 4,
+        <div className={styles.logoMark}>
-            backgroundColor: 'white',
+          {isSupported ? (
-            borderRadius: '4px',
+            <CheckboxIndicator
-            padding: '2px',
+              checked={isSelected}
-            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+              onChange={() => onToggleFile(file.id)}
-            pointerEvents: 'auto'
+              color="var(--checkbox-checked-bg)"
-          }}
+            />
-          onMouseDown={(e) => e.stopPropagation()}
+          ) : (
-          onDragStart={(e) => {
+            <div className={styles.unsupportedPill}>
-            e.preventDefault();
+              <span>
+                {t('unsupported', 'Unsupported')}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* 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);
           }}
         >
-          <Checkbox
+          <MoreVertIcon fontSize="small" />
-            checked={selectedFiles.includes(file.id)}
+        </ActionIcon>
-            onChange={(event) => {
+      </div>
-              event.stopPropagation();
+
-              if (isSupported) {
+      {/* Actions overlay */}
-                onToggleFile(file.id);
+      {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);
             }}
-            onClick={(e) => e.stopPropagation()}
+          >
-            disabled={!isSupported}
+            {isPinned ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
-            size="sm"
+            <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>
+      )}
 
       {/* File content area */}
       <div className="file-container w-[90%] h-[80%] relative">
@@ -204,161 +360,35 @@ const FileThumbnail = ({
                 img.style.display = 'none';
               }}
             style={{
-              maxWidth: '100%',
+              maxWidth: '80%',
-              maxHeight: '100%',
+              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 */}
+        {/* Pin indicator (bottom-left) */}
-        {file.pageCount > 0 && (
+        {isPinned && (
-          <Badge
+          <span className={styles.pinIndicator} aria-hidden>
-            size="sm"
+            <PushPinIcon fontSize="small" />
-            variant="filled"
+          </span>
-            color="blue"
-            style={{
-              position: 'absolute',
-              top: 8,
-              left: 8,
-              zIndex: 3,
-            }}
-          >
-            {file.pageCount} {file.pageCount === 1 ? 'page' : 'pages'}
-          </Badge>
         )}
 
-        {/* Unsupported badge */}
+        {/* Drag handle (span wrapper so we can attach a ref reliably) */}
-        {!isSupported && (
+        <span ref={handleRef} className={styles.dragHandle} aria-hidden>
-          <Badge
+          <DragIndicatorIcon fontSize="small" />
-            size="sm"
+        </span>
-            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
-          }}
-        />
       </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);

frontend/src/components/pageEditor/PageEditor.module.css

@@ -57,11 +57,29 @@
   0%, 100% {
     opacity: 1;
   }
-  50% {
+  .actionRow:hover { background: var(--hover-bg); }
-    opacity: 0.5;
+  .actionDanger { color: var(--text-brand-accent); }
-  }
+  .actionsDivider { height: 1px; background: var(--border-default); margin: 4px 0; }
+
+.pinIndicator {
+  position: absolute;
+  bottom: 4px;
+  left: 4px;
+  z-index: 1;
+  color: rgba(0, 0, 0, 0.35); /* match drag handle color */
 }
 
-.pulse {
+.unsupportedPill {
-  animation: pulse 1s infinite;
+  margin-left: 1.75rem;
+  background: #6B7280;
+  color: white;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 10px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 80px;
+  height: 20px;
 }

frontend/src/components/shared/TopControls.tsx

@@ -27,7 +27,7 @@ const createViewOptions = (switchingTo: ModeType | null) => [
         ) : (
           <VisibilityIcon fontSize="small" />
         )}
-        <span>Read</span>
+        <span>Viewer</span>
       </div>
     ),
     value: "viewer",

frontend/src/components/tooltips/useAdvancedOCRTips.ts

@@ -0,0 +1,34 @@
+import { useTranslation } from 'react-i18next';
+import { TooltipContent } from '../../types/tips';
+
+export const useAdvancedOCRTips = (): TooltipContent => {
+  const { t } = useTranslation();
+
+  return {
+    header: {
+      title: t("ocr.tooltip.advanced.header.title", "Advanced OCR Processing"),
+    },
+    tips: [
+      {
+        title: t("ocr.tooltip.advanced.compatibility.title", "Compatibility Mode"),
+        description: t("ocr.tooltip.advanced.compatibility.text", "Uses OCR 'sandwich PDF' mode: results in larger files, but more reliable with certain languages and older PDF software. By default we use hOCR for smaller, modern PDFs.")
+      },
+      {
+        title: t("ocr.tooltip.advanced.sidecar.title", "Create Text File"),
+        description: t("ocr.tooltip.advanced.sidecar.text", "Generates a separate .txt file alongside the PDF containing all extracted text content for easy access and processing.")
+      },
+      {
+        title: t("ocr.tooltip.advanced.deskew.title", "Deskew Pages"),
+        description: t("ocr.tooltip.advanced.deskew.text", "Automatically corrects skewed or tilted pages to improve OCR accuracy. Useful for scanned documents that weren't perfectly aligned.")
+      },
+      {
+        title: t("ocr.tooltip.advanced.clean.title", "Clean Input File"),
+        description: t("ocr.tooltip.advanced.clean.text", "Preprocesses the input by removing noise, enhancing contrast, and optimising the image for better OCR recognition before processing.")
+      },
+      {
+        title: t("ocr.tooltip.advanced.cleanFinal.title", "Clean Final Output"),
+        description: t("ocr.tooltip.advanced.cleanFinal.text", "Post-processes the final PDF by removing OCR artefacts and optimising the text layer for better readability and smaller file size.")
+      }
+    ]
+  };
+};

frontend/src/hooks/useRainbowTheme.ts

@@ -161,8 +161,8 @@ export function useRainbowTheme(initialTheme: 'light' | 'dark' = 'light'): Rainb
     }
     lastToggleTime.current = currentTime;
 
-    // Easter egg: Activate rainbow mode after 6 rapid toggles
+    // Easter egg: Activate rainbow mode after 10 rapid toggles
-    if (toggleCount.current >= 6) {
+    if (toggleCount.current >= 10) {
       setThemeMode('rainbow');
       console.log('🌈 RAINBOW MODE ACTIVATED! 🌈 You found the secret easter egg!');
       console.log('🌈 Button will be disabled for 3 seconds, then click once to exit!');

frontend/src/styles/theme.css

@@ -162,10 +162,22 @@
   --landing-drop-inner-paper-bg: #BBDEFB;
   --landing-drop-inner-paper-border: #90CAF9;
 
+  /* selected file header colors */
+  --header-selected-bg: #1E88E5; /* light mode selected header matches dark */
+  --header-selected-fg: #FFFFFF;
+  --file-card-bg: #FFFFFF;  /* file card background (light/dark paired) */
+
   /* shadows */
   --drop-shadow-color: rgba(0, 0, 0, 0.08);
   --drop-shadow-color-strong: rgba(0, 0, 0, 0.04);
   --drop-shadow-filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.08)) drop-shadow(0 0.6rem 0.6rem rgba(0, 0, 0, 0.06)) drop-shadow(0 1.2rem 1rem rgba(0, 0, 0, 0.04));
+
+  /* Light mode card hover and selection */
+  --header-hover-bg: #3B4B6E; /* same family as selected, a touch muted for hover */
+  --card-selected-border: #3FAFFF; /* slightly more blue than dark mode header */
+  --checkbox-border: #2F83BF;
+  --checkbox-checked-bg: #3FAFFF;
+  --checkbox-tick: #FFFFFF;
 }
 
 [data-mantine-color-scheme="dark"] {
@@ -272,6 +284,12 @@
   --landing-drop-inner-paper-bg: #2A3441;
   --landing-drop-inner-paper-border: #3A4451;
 
+  /* selected file header colors for dark */
+  --header-selected-bg: #1E88E5;
+  --header-selected-fg: #FFFFFF;
+  /* file card background (dark) */
+  --file-card-bg: #1F2329;
+
   /* shadows */
   --drop-shadow-color: rgba(255, 255, 255, 0.08);
   --drop-shadow-color-strong: rgba(255, 255, 255, 0.04);

frontend/src/tools/OCR.tsx

@@ -13,15 +13,16 @@ import { useOCRParameters } from "../hooks/tools/ocr/useOCRParameters";
 import { useOCROperation } from "../hooks/tools/ocr/useOCROperation";
 import { BaseToolProps, ToolComponent } from "../types/tool";
 import { useOCRTips } from "../components/tooltips/useOCRTips";
+import { useAdvancedOCRTips } from "../components/tooltips/useAdvancedOCRTips";
 
 const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
-  const { actions } = useNavigationActions();
   const { selectedFiles } = useFileSelection();
 
   const ocrParams = useOCRParameters();
   const ocrOperation = useOCROperation();
   const ocrTips = useOCRTips();
+  const advancedOCRTips = useAdvancedOCRTips();
 
   // Step expansion state management
   const [expandedStep, setExpandedStep] = useState<"files" | "settings" | "advanced" | null>("files");
@@ -82,7 +83,7 @@ const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
     },
     steps: [
       {
-        title: "Settings",
+        title: t("ocr.settings.title", "Settings"),
         isCollapsed: !hasFiles || settingsCollapsed,
         onCollapsedClick: hasResults
           ? handleSettingsReset
@@ -108,6 +109,7 @@ const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
               if (!hasFiles) return; // Only allow if files are selected
               setExpandedStep(expandedStep === "advanced" ? null : "advanced");
             },
+        tooltip: advancedOCRTips,
         content: (
           <AdvancedOCRSettings
             advancedOptions={ocrParams.parameters.additionalOptions}