removePage

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

@@ -1011,7 +1011,49 @@
     "submit": "Change"
   },
   "removePages": {
-    "tags": "Remove pages,delete pages"
+    "tags": "Remove pages,delete pages",
+    "title": "Remove Pages",
+    "pageNumbers": "Pages to Remove",
+    "pageNumbersPlaceholder": "e.g. 1,3,5-7",
+    "pageNumbersHelp": "Enter page numbers separated by commas, or ranges like 1-5. Example: 1,3,5-7",
+    "filenamePrefix": "pages_removed",
+    "files": {
+      "placeholder": "Select a PDF file in the main view to get started"
+    },
+    "settings": {
+      "title": "Page Selection"
+    },
+    "error": {
+      "failed": "An error occurred whilst removing pages."
+    },
+    "results": {
+      "title": "Page Removal Results"
+    },
+    "submit": "Remove Pages"
+  },
+  "pageSelection": {
+    "tooltip": {
+      "header": {
+        "title": "Page Selection Guide"
+      },
+      "basic": {
+        "title": "Basic Usage",
+        "text": "Select specific pages from your PDF document using simple syntax.",
+        "bullet1": "Individual pages: 1,3,5",
+        "bullet2": "Page ranges: 3-6 or 10-15",
+        "bullet3": "All pages: all"
+      },
+      "advanced": {
+        "title": "Advanced Features"
+      },
+      "tips": {
+        "title": "Tips",
+        "text": "Keep these guidelines in mind:",
+        "bullet1": "Page numbers start from 1 (not 0)",
+        "bullet2": "Spaces are automatically removed",
+        "bullet3": "Invalid expressions are ignored"
+      }
+    }
   },
   "compressPdfs": {
     "tags": "squish,small,tiny"

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

@@ -738,7 +738,72 @@
     "submit": "Change"
   },
   "removePages": {
-    "tags": "Remove pages,delete pages"
+    "tags": "Remove pages,delete pages",
+    "title": "Remove Pages",
+    "pageNumbers": "Pages to Remove",
+    "pageNumbersPlaceholder": "e.g. 1,3,5-7",
+    "pageNumbersHelp": "Enter page numbers separated by commas, or ranges like 1-5. Example: 1,3,5-7",
+    "filenamePrefix": "pages_removed",
+    "files": {
+      "placeholder": "Select a PDF file in the main view to get started"
+    },
+    "settings": {
+      "title": "Page Selection"
+    },
+    "error": {
+      "failed": "An error occurred while removing pages."
+    },
+    "results": {
+      "title": "Page Removal Results"
+    },
+    "submit": "Remove Pages"
+  },
+  "pageSelection": {
+    "tooltip": {
+      "header": {
+        "title": "Page Selection Guide"
+      },
+      "basic": {
+        "title": "Basic Usage",
+        "text": "Select specific pages from your PDF document using simple syntax.",
+        "bullet1": "Individual pages: 1,3,5",
+        "bullet2": "Page ranges: 3-6 or 10-15",
+        "bullet3": "All pages: all"
+      },
+      "advanced": {
+        "title": "Advanced Features",
+        "expandText": "▶ Show advanced options",
+        "collapseText": "▼ Hide advanced options",
+        "mathematical": {
+          "title": "Mathematical Functions",
+          "text": "Use mathematical expressions to select page patterns:",
+          "bullet1": "2n - all even pages (2, 4, 6, 8...)",
+          "bullet2": "2n+1 - all odd pages (1, 3, 5, 7...)",
+          "bullet3": "3n - every 3rd page (3, 6, 9, 12...)",
+          "bullet4": "4n-1 - pages 3, 7, 11, 15..."
+        },
+        "ranges": {
+          "title": "Open-ended Ranges",
+          "text": "Select from a starting point to the end:",
+          "bullet1": "5- selects pages 5 to end of document",
+          "bullet2": "10- selects pages 10 to end"
+        },
+        "combinations": {
+          "title": "Complex Combinations",
+          "text": "Combine different selection methods:",
+          "bullet1": "1,3-5,8,2n - pages 1, 3-5, 8, and all even pages",
+          "bullet2": "10-,2n+1 - pages 10 to end plus all odd pages",
+          "bullet3": "1-5,15-,3n - pages 1-5, 15 to end, and every 3rd page"
+        }
+      },
+      "tips": {
+        "title": "Tips",
+        "text": "Keep these guidelines in mind:",
+        "bullet1": "Page numbers start from 1 (not 0)",
+        "bullet2": "Spaces are automatically removed",
+        "bullet3": "Invalid expressions are ignored"
+      }
+    }
   },
   "compressPdfs": {
     "tags": "squish,small,tiny"

frontend/src/components/tools/deletePages/DeletePagesSettings.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Stack, Text, TextInput, Divider } from "@mantine/core";
+import { useTranslation } from 'react-i18next';
+import { DeletePagesParameters } from '../../../hooks/tools/deletePages/useDeletePagesParameters';
+
+interface DeletePagesSettingsProps {
+  parameters: DeletePagesParameters;
+  onParameterChange: <K extends keyof DeletePagesParameters>(parameter: K, value: DeletePagesParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const DeletePagesSettings: React.FC<DeletePagesSettingsProps> = ({ 
+  parameters, 
+  onParameterChange, 
+  disabled = false 
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      <Divider ml='-md' />
+      <Stack gap="sm">
+        <Text size="sm" fw={500}>
+          {t('removePages.pageNumbers', 'Pages to Remove')}
+        </Text>
+        <TextInput
+          value={parameters.pageNumbers}
+          onChange={(e) => onParameterChange('pageNumbers', e.target.value.replace(/\s+/g, ''))}
+          placeholder={t('removePages.pageNumbersPlaceholder', 'e.g. 1,3,5-7')}
+          disabled={disabled}
+          description={t('removePages.pageNumbersHelp', 'Enter page numbers separated by commas, or ranges like 1-5. Example: 1,3,5-7')}
+        />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default DeletePagesSettings;

frontend/src/components/tooltips/usePageSelectionTips.tsx

@@ -0,0 +1,62 @@
+import { useTranslation } from 'react-i18next';
+import { TooltipContent } from '../../types/tips';
+
+/**
+ * Reusable tooltip for page selection functionality.
+ * Can be used by any tool that uses the GeneralUtils.parsePageList syntax.
+ */
+export const usePageSelectionTips = (): TooltipContent => {
+  const { t } = useTranslation();
+
+  return {
+    header: {
+      title: t("pageSelection.tooltip.header.title", "Page Selection Guide")
+    },
+    tips: [
+      {
+        description: t("pageSelection.tooltip.description", "Choose which pages to use for the operation. Supports single pages, ranges, formulas, and the all keyword.")
+      },
+      {
+        title: t("pageSelection.tooltip.individual.title", "Individual Pages"),
+        description: t("pageSelection.tooltip.individual.description", "Enter numbers separated by commas."),
+        bullets: [
+          t("pageSelection.tooltip.individual.bullet1", "<strong>1,3,5</strong> → selects pages 1, 3, 5"),
+          t("pageSelection.tooltip.individual.bullet2", "<strong>2,7,12</strong> → selects pages 2, 7, 12")
+        ]
+      },
+      {
+        title: t("pageSelection.tooltip.ranges.title", "Page Ranges"),
+        description: t("pageSelection.tooltip.ranges.description", "Use - for consecutive pages."),
+        bullets: [
+          t("pageSelection.tooltip.ranges.bullet1", "<strong>3-6</strong> → selects pages 3–6"),
+          t("pageSelection.tooltip.ranges.bullet2", "<strong>10-15</strong> → selects pages 10–15"),
+          t("pageSelection.tooltip.ranges.bullet3", "<strong>5-</strong> → selects pages 5 to end")
+        ]
+      },
+      {
+        title: t("pageSelection.tooltip.mathematical.title", "Mathematical Functions"),
+        description: t("pageSelection.tooltip.mathematical.description", "Use n in formulas for patterns."),
+        bullets: [
+		  t("pageSelection.tooltip.mathematical.bullet2", "<strong>2n-1</strong> → all odd pages (1, 3, 5…)"),
+          t("pageSelection.tooltip.mathematical.bullet1", "<strong>2n</strong> → all even pages (2, 4, 6…)"),
+          t("pageSelection.tooltip.mathematical.bullet3", "<strong>3n</strong> → every 3rd page (3, 6, 9…)"),
+          t("pageSelection.tooltip.mathematical.bullet4", "<strong>4n-1</strong> → pages 3, 7, 11, 15…")
+        ]
+      },
+      {
+        title: t("pageSelection.tooltip.special.title", "Special Keywords"),
+        bullets: [
+          t("pageSelection.tooltip.special.bullet1", "<strong>all</strong> → selects all pages"),
+        ]
+      },
+      {
+        title: t("pageSelection.tooltip.complex.title", "Complex Combinations"),
+        description: t("pageSelection.tooltip.complex.description", "Mix different types."),
+        bullets: [
+          t("pageSelection.tooltip.complex.bullet1", "<strong>1,3-5,8,2n</strong> → pages 1, 3–5, 8, plus evens"),
+          t("pageSelection.tooltip.complex.bullet2", "<strong>10-,2n-1</strong> → from page 10 to end + odd pages")
+        ]
+      }
+    ]
+  };
+};

frontend/src/data/useTranslatedToolRegistry.tsx

@@ -11,6 +11,7 @@ import RemovePassword from '../tools/RemovePassword';
 import { SubcategoryId, ToolCategory, ToolRegistry } from './toolsTaxonomy';
 import AddWatermark from '../tools/AddWatermark';
 import Repair from '../tools/Repair';
+import DeletePages from '../tools/DeletePages';
 
 // Hook to get the translated tool registry
 export function useFlatToolRegistry(): ToolRegistry {
@@ -275,11 +276,13 @@ export function useFlatToolRegistry(): ToolRegistry {
     "remove": {
         icon: <span className="material-symbols-rounded">delete</span>,
         name: t("home.removePages.title", "Remove Pages"),
-        component: null,
+        component: DeletePages,
         view: "remove",
         description: t("home.removePages.desc", "Remove specific pages from a PDF document"),
         category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.REMOVAL
+        subcategory: SubcategoryId.REMOVAL,
+        maxFiles: -1,
+        endpoints: ["remove-pages"]
     },
     "remove-blank-pages": {
         icon: <span className="material-symbols-rounded">scan_delete</span>,

frontend/src/hooks/tools/deletePages/useDeletePagesOperation.ts

@@ -0,0 +1,24 @@
+import { useTranslation } from 'react-i18next';
+import { useToolOperation } from '../shared/useToolOperation';
+import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
+import { DeletePagesParameters } from './useDeletePagesParameters';
+
+export const useDeletePagesOperation = () => {
+  const { t } = useTranslation();
+
+  const buildFormData = (parameters: DeletePagesParameters, file: File): FormData => {
+    const formData = new FormData();
+    formData.append("fileInput", file);
+    formData.append("pageNumbers", parameters.pageNumbers);
+    return formData;
+  };
+
+  return useToolOperation<DeletePagesParameters>({
+    operationType: 'deletePages',
+    endpoint: '/api/v1/general/remove-pages',
+    buildFormData,
+    filePrefix: t('removePages.filenamePrefix', 'pages_removed') + '_',
+    multiFileEndpoint: false,
+    getErrorMessage: createStandardErrorHandler(t('removePages.error.failed', 'An error occurred while removing pages.'))
+  });
+};

frontend/src/hooks/tools/deletePages/useDeletePagesParameters.ts

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+
+export interface DeletePagesParameters {
+  pageNumbers: string;
+}
+
+export interface DeletePagesParametersHook {
+  parameters: DeletePagesParameters;
+  updateParameter: (parameter: keyof DeletePagesParameters, value: string) => void;
+  resetParameters: () => void;
+  validateParameters: () => boolean;
+  getEndpointName: () => string;
+}
+
+const initialParameters: DeletePagesParameters = {
+  pageNumbers: "1"
+};
+
+export const useDeletePagesParameters = (): DeletePagesParametersHook => {
+  const [parameters, setParameters] = useState<DeletePagesParameters>(initialParameters);
+
+  const updateParameter = (parameter: keyof DeletePagesParameters, value: string) => {
+    setParameters(prev => ({ ...prev, [parameter]: value }));
+  };
+
+  const resetParameters = () => {
+    setParameters(initialParameters);
+  };
+
+  const validateParameters = () => {
+    return parameters.pageNumbers.trim() !== "";
+  };
+
+  const getEndpointName = () => {
+    return 'remove-pages';
+  };
+
+  return {
+    parameters,
+    updateParameter,
+    resetParameters,
+    validateParameters,
+    getEndpointName,
+  };
+};

frontend/src/tools/DeletePages.tsx

@@ -0,0 +1,99 @@
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useEndpointEnabled } from "../hooks/useEndpointConfig";
+import { useFileContext } from "../contexts/FileContext";
+import { useToolFileSelection } from "../contexts/FileSelectionContext";
+
+import { createToolFlow } from "../components/tools/shared/createToolFlow";
+
+import { useDeletePagesParameters } from "../hooks/tools/deletePages/useDeletePagesParameters";
+import { useDeletePagesOperation } from "../hooks/tools/deletePages/useDeletePagesOperation";
+import DeletePagesSettings from "../components/tools/deletePages/DeletePagesSettings";
+import { usePageSelectionTips } from "../components/tooltips/usePageSelectionTips";
+import { BaseToolProps } from "../types/tool";
+
+const DeletePages = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
+  const { t } = useTranslation();
+  const { setCurrentMode } = useFileContext();
+  const { selectedFiles } = useToolFileSelection();
+
+  const deletePagesParams = useDeletePagesParameters();
+  const deletePagesOperation = useDeletePagesOperation();
+  const pageSelectionTips = usePageSelectionTips();
+
+  // Endpoint validation
+  const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled(deletePagesParams.getEndpointName());
+
+  useEffect(() => {
+    deletePagesOperation.resetResults();
+    onPreviewFile?.(null);
+  }, [deletePagesParams.parameters]);
+
+  const handleDeletePages = async () => {
+    try {
+      await deletePagesOperation.executeOperation(deletePagesParams.parameters, selectedFiles);
+      if (deletePagesOperation.files && onComplete) {
+        onComplete(deletePagesOperation.files);
+      }
+    } catch (error) {
+      if (onError) {
+        onError(error instanceof Error ? error.message : t("removePages.error.failed", "Delete pages operation failed"));
+      }
+    }
+  };
+
+  const handleThumbnailClick = (file: File) => {
+    onPreviewFile?.(file);
+    sessionStorage.setItem("previousMode", "deletePages");
+    setCurrentMode("viewer");
+  };
+
+  const handleSettingsReset = () => {
+    deletePagesOperation.resetResults();
+    onPreviewFile?.(null);
+    setCurrentMode("deletePages");
+  };
+
+  const hasFiles = selectedFiles.length > 0;
+  const hasResults = deletePagesOperation.files.length > 0 || deletePagesOperation.downloadUrl !== null;
+
+  const settingsCollapsed = !hasFiles || hasResults;
+
+  return createToolFlow({
+    files: {
+      selectedFiles,
+      isCollapsed: hasFiles && !hasResults,
+      placeholder: t("removePages.files.placeholder", "Select a PDF file in the main view to get started"),
+    },
+    steps: [
+      {
+        title: t("removePages.settings.title", "Page Selection"),
+        isCollapsed: settingsCollapsed,
+        onCollapsedClick: settingsCollapsed ? handleSettingsReset : undefined,
+        tooltip: pageSelectionTips,
+        content: (
+          <DeletePagesSettings
+            parameters={deletePagesParams.parameters}
+            onParameterChange={deletePagesParams.updateParameter}
+            disabled={endpointLoading}
+          />
+        ),
+      }
+    ],
+    executeButton: {
+      text: t("removePages.submit", "Remove Pages"),
+      isVisible: !hasResults,
+      loadingText: t("loading"),
+      onClick: handleDeletePages,
+      disabled: !deletePagesParams.validateParameters() || !hasFiles || !endpointEnabled,
+    },
+    review: {
+      isVisible: hasResults,
+      operation: deletePagesOperation,
+      title: t("removePages.results.title", "Page Removal Results"),
+      onFileClick: handleThumbnailClick,
+    },
+  });
+};
+
+export default DeletePages;

frontend/src/types/fileContext.ts

@@ -19,7 +19,8 @@ export type ModeType =
   | 'changePermissions'
   | 'watermark'
   | 'removePassword'
-  | 'repair';
+  | 'repair'
+  | 'deletePages';
 
 export type ViewType = 'viewer' | 'pageEditor' | 'fileEditor';
 

frontend/src/types/parameters.ts

@@ -4,4 +4,4 @@ export interface BaseParameters {
   // Base interface that all tool parameters should extend
   // Provides a foundation for adding common properties across all tools
   // Examples of future additions: userId, sessionId, commonFlags, etc.
-}
+}