change requests

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

@@ -1427,6 +1427,9 @@
     "settings": {
       "title": "Settings"
     },
+    "tooltip": {
+      "description": "Extracts the selected pages into a new PDF, preserving order."
+    },
     "error": {
       "failed": "Failed to extract pages"
     },
@@ -1511,6 +1514,7 @@
     }
   },
   "bulkSelection": {
+    "syntaxError": "There is a syntax issue. See Page Selection tips for help.",
     "header": {
       "title": "Page Selection Guide"
     },

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

@@ -902,6 +902,9 @@
     "settings": {
       "title": "Settings"
     },
+    "tooltip": {
+      "description": "Extracts the selected pages into a new PDF, preserving order."
+    },
     "error": {
       "failed": "Failed to extract pages"
     },
@@ -975,6 +978,7 @@
     }
   },
   "bulkSelection": {
+    "syntaxError": "There is a syntax issue. See Page Selection tips for help.",
     "header": { "title": "Page Selection Guide" },
     "syntax": {
       "title": "Syntax Basics",

frontend/src/core/components/shared/PageSelectionSyntaxHint.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Text } from '@mantine/core';
 import classes from '@app/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css';
 import { parseSelectionWithDiagnostics } from '@app/utils/bulkselection/parseSelection';
@@ -15,6 +16,7 @@ const FALLBACK_MAX_PAGES = 100000; // large upper bound for syntax validation wi
 
 const PageSelectionSyntaxHint = ({ input, maxPages, variant = 'panel' }: PageSelectionSyntaxHintProps) => {
   const [syntaxError, setSyntaxError] = useState<string | null>(null);
+  const { t } = useTranslation();
 
   useEffect(() => {
     const text = (input || '').trim();
@@ -25,9 +27,9 @@ const PageSelectionSyntaxHint = ({ input, maxPages, variant = 'panel' }: PageSel
 
     try {
       const { warning } = parseSelectionWithDiagnostics(text, maxPages && maxPages > 0 ? maxPages : FALLBACK_MAX_PAGES);
-      setSyntaxError(warning ? 'There is a syntax issue. See Page Selection tips for help.' : null);
+      setSyntaxError(warning ? t('bulkSelection.syntaxError', 'There is a syntax issue. See Page Selection tips for help.') : null);
     } catch {
-      setSyntaxError('There is a syntax issue. See Page Selection tips for help.');
+      setSyntaxError(t('bulkSelection.syntaxError', 'There is a syntax issue. See Page Selection tips for help.'));
     }
   }, [input, maxPages]);
 

frontend/src/core/components/tooltips/useExtractPagesTips.ts

@@ -0,0 +1,22 @@
+import { useTranslation } from 'react-i18next';
+import { TooltipContent } from '@app/types/tips';
+import { usePageSelectionTips } from '@app/components/tooltips/usePageSelectionTips';
+
+export const useExtractPagesTips = (): TooltipContent => {
+  const { t } = useTranslation();
+  const base = usePageSelectionTips();
+
+  return {
+    header: base.header,
+    tips: [
+      {
+        description: t('extractPages.tooltip.description', 'Extracts the selected pages into a new PDF, preserving order.')
+      },
+      ...(base.tips || [])
+    ]
+  };
+};
+
+export default useExtractPagesTips;
+
+

frontend/src/core/data/useTranslatedToolRegistry.tsx

@@ -79,6 +79,7 @@ import { overlayPdfsOperationConfig } from "@app/hooks/tools/overlayPdfs/useOver
 import { adjustPageScaleOperationConfig } from "@app/hooks/tools/adjustPageScale/useAdjustPageScaleOperation";
 import { scannerImageSplitOperationConfig } from "@app/hooks/tools/scannerImageSplit/useScannerImageSplitOperation";
 import { addPageNumbersOperationConfig } from "@app/components/tools/addPageNumbers/useAddPageNumbersOperation";
+import { extractPagesOperationConfig } from "@app/hooks/tools/extractPages/useExtractPagesOperation";
 import CompressSettings from "@app/components/tools/compress/CompressSettings";
 import AddPasswordSettings from "@app/components/tools/addPassword/AddPasswordSettings";
 import RemovePasswordSettings from "@app/components/tools/removePassword/RemovePasswordSettings";
@@ -108,7 +109,6 @@ import ExtractImages from "@app/tools/ExtractImages";
 import ExtractPages from "@app/tools/ExtractPages";
 import ExtractImagesSettings from "@app/components/tools/extractImages/ExtractImagesSettings";
 import ExtractPagesSettings from "@app/components/tools/extractPages/ExtractPagesSettings";
-import { extractPagesOperationConfig } from "@app/hooks/tools/extractPages/useExtractPagesOperation";
 import ReplaceColorSettings from "@app/components/tools/replaceColor/ReplaceColorSettings";
 import AddStampAutomationSettings from "@app/components/tools/addStamp/AddStampAutomationSettings";
 import CertSignAutomationSettings from "@app/components/tools/certSign/CertSignAutomationSettings";

frontend/src/core/hooks/tools/extractPages/useExtractPagesOperation.ts

@@ -12,7 +12,7 @@ async function resolveSelectionToCsv(expression: string, file: File): Promise<st
   const arrayBuffer = await file.arrayBuffer();
   const pdf = await pdfWorkerManager.createDocument(arrayBuffer, { disableAutoFetch: true, disableStream: true });
   try {
-    const maxPages = (pdf as any).numPages as number;
+    const maxPages = pdf.numPages;
     const pages = parseSelection(expression || '', maxPages);
     return pages.join(',');
   } finally {

frontend/src/core/tools/ExtractPages.tsx

@@ -5,9 +5,11 @@ import { useBaseTool } from "@app/hooks/tools/shared/useBaseTool";
 import { useExtractPagesParameters } from "@app/hooks/tools/extractPages/useExtractPagesParameters";
 import { useExtractPagesOperation } from "@app/hooks/tools/extractPages/useExtractPagesOperation";
 import ExtractPagesSettings from "@app/components/tools/extractPages/ExtractPagesSettings";
+import useExtractPagesTips from "@app/components/tooltips/useExtractPagesTips";
 
 const ExtractPages = (props: BaseToolProps) => {
   const { t } = useTranslation();
+  const tooltipContent = useExtractPagesTips();
 
   const base = useBaseTool(
     'extract-pages',
@@ -35,6 +37,7 @@ const ExtractPages = (props: BaseToolProps) => {
         isCollapsed: base.settingsCollapsed,
         onCollapsedClick: base.settingsCollapsed ? base.handleSettingsReset : undefined,
         content: settingsContent,
+        tooltip: tooltipContent,
       },
     ],
     executeButton: {