From 02189a67bda972840b03cd1fa5f5035a684059de Mon Sep 17 00:00:00 2001
From: Ludy <Ludy87@users.noreply.github.com>
Date: Mon, 29 Sep 2025 14:01:09 +0200
Subject: [PATCH] refactor(frontend): remove unused React default imports
 (#4529)

## Description of Changes

- Removed unused `React` default imports across multiple frontend
components.
- Updated imports to only include required React hooks and types (e.g.,
`useState`, `useEffect`, `Suspense`, `createContext`).
- Ensured consistency with React 17+ JSX transform, where default
`React` import is no longer required.
- This cleanup reduces bundle size slightly and aligns code with modern
React best practices.

---

## 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.

Co-authored-by: Reece Browne <74901996+reecebrowne@users.noreply.github.com>
---
 frontend/src/App.tsx                          |  2 +-
 .../src/components/shared/FilePickerModal.tsx |  2 +-
 .../components/shared/FileUploadButton.tsx    |  2 +-
 frontend/src/components/shared/Footer.tsx     |  1 -
 .../components/shared/MultiSelectControls.tsx | 11 +++---
 .../shared/NavigationWarningModal.tsx         |  1 -
 .../shared/RainbowThemeProvider.tsx           |  2 +-
 .../src/components/toast/ToastRenderer.tsx    | 11 +++---
 .../src/components/tools/ToolRenderer.tsx     |  4 +--
 .../AddWatermarkSingleStepSettings.tsx        |  5 ++-
 .../addWatermark/WatermarkFormatting.tsx      |  3 +-
 .../tools/addWatermark/WatermarkImageFile.tsx |  1 -
 .../addWatermark/WatermarkStyleSettings.tsx   |  3 +-
 .../tools/addWatermark/WatermarkTextStyle.tsx |  3 +-
 .../tools/automate/AutomationSelection.tsx    |  9 +++--
 .../BookletImpositionSettings.tsx             |  4 +--
 .../tools/compress/CompressSettings.tsx       |  2 +-
 .../convert/ConvertFromEmailSettings.tsx      |  1 -
 .../convert/ConvertFromImageSettings.tsx      |  1 -
 .../tools/convert/ConvertFromWebSettings.tsx  |  1 -
 .../tools/convert/ConvertSettings.tsx         |  2 +-
 .../tools/convert/ConvertToImageSettings.tsx  |  1 -
 .../tools/convert/ConvertToPdfaSettings.tsx   |  1 -
 .../tools/convert/GroupedFormatDropdown.tsx   | 36 +++++++++----------
 .../tools/pageLayout/PageLayoutSettings.tsx   |  1 -
 .../ReorganizePagesSettings.tsx               |  3 +-
 .../replaceColor/ReplaceColorSettings.tsx     |  3 +-
 .../components/tools/shared/FileMetadata.tsx  |  3 +-
 .../tools/shared/NavigationControls.tsx       |  1 -
 .../tools/shared/NumberInputWithUnit.tsx      | 20 +++++------
 .../tools/shared/OperationButton.tsx          |  1 -
 .../tools/shared/ResultsPreview.tsx           |  2 +-
 .../components/tools/sign/SignSettings.tsx    |  4 +--
 .../tools/toolPicker/ToolSearch.tsx           |  2 +-
 .../components/viewer/CustomSearchLayer.tsx   | 20 +++++------
 .../viewer/LocalEmbedPDFWithAnnotations.tsx   |  4 +--
 .../components/viewer/PdfViewerToolbar.tsx    | 12 +++----
 .../components/viewer/ThumbnailSidebar.tsx    |  2 +-
 frontend/src/components/viewer/Viewer.tsx     |  3 +-
 frontend/src/contexts/FileContext.tsx         |  2 +-
 frontend/src/contexts/SidebarContext.tsx      |  6 ++--
 frontend/src/tools/OCR.tsx                    |  2 +-
 frontend/src/tools/RemovePages.tsx            |  1 -
 frontend/src/tools/ReorganizePages.tsx        |  2 +-
 44 files changed, 90 insertions(+), 113 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index da9a14eb5..529da2643 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense } from "react";
+import { Suspense } from "react";
 import { RainbowThemeProvider } from "./components/shared/RainbowThemeProvider";
 import { FileContextProvider } from "./contexts/FileContext";
 import { NavigationProvider } from "./contexts/NavigationContext";
diff --git a/frontend/src/components/shared/FilePickerModal.tsx b/frontend/src/components/shared/FilePickerModal.tsx
index fde20f014..9bb2694a1 100644
--- a/frontend/src/components/shared/FilePickerModal.tsx
+++ b/frontend/src/components/shared/FilePickerModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import {
   Modal,
   Text,
diff --git a/frontend/src/components/shared/FileUploadButton.tsx b/frontend/src/components/shared/FileUploadButton.tsx
index 434aad1b4..f09cc19d0 100644
--- a/frontend/src/components/shared/FileUploadButton.tsx
+++ b/frontend/src/components/shared/FileUploadButton.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import { useRef } from "react";
 import { FileButton, Button } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 
diff --git a/frontend/src/components/shared/Footer.tsx b/frontend/src/components/shared/Footer.tsx
index 137914617..0c94efa0e 100644
--- a/frontend/src/components/shared/Footer.tsx
+++ b/frontend/src/components/shared/Footer.tsx
@@ -1,5 +1,4 @@
 import { Flex } from '@mantine/core';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCookieConsent } from '../../hooks/useCookieConsent';
 
diff --git a/frontend/src/components/shared/MultiSelectControls.tsx b/frontend/src/components/shared/MultiSelectControls.tsx
index 11790abf8..b6e0b24b9 100644
--- a/frontend/src/components/shared/MultiSelectControls.tsx
+++ b/frontend/src/components/shared/MultiSelectControls.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Box, Group, Text, Button } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 
@@ -37,7 +36,7 @@ const MultiSelectControls = ({
           >
             {t("fileManager.clearSelection", "Clear Selection")}
           </Button>
-          
+
           {onAddToUpload && (
             <Button
               size="xs"
@@ -47,7 +46,7 @@ const MultiSelectControls = ({
               {t("fileManager.addToUpload", "Add to Upload")}
             </Button>
           )}
-          
+
           {onOpenInFileEditor && (
             <Button
               size="xs"
@@ -58,7 +57,7 @@ const MultiSelectControls = ({
               {t("fileManager.openInFileEditor", "Open in File Editor")}
             </Button>
           )}
-          
+
           {onOpenInPageEditor && (
             <Button
               size="xs"
@@ -69,7 +68,7 @@ const MultiSelectControls = ({
               {t("fileManager.openInPageEditor", "Open in Page Editor")}
             </Button>
           )}
-          
+
           {onDeleteAll && (
             <Button
               size="xs"
@@ -85,4 +84,4 @@ const MultiSelectControls = ({
   );
 };
 
-export default MultiSelectControls;
\ No newline at end of file
+export default MultiSelectControls;
diff --git a/frontend/src/components/shared/NavigationWarningModal.tsx b/frontend/src/components/shared/NavigationWarningModal.tsx
index ede7b4bba..e9622d6d4 100644
--- a/frontend/src/components/shared/NavigationWarningModal.tsx
+++ b/frontend/src/components/shared/NavigationWarningModal.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Modal, Text, Button, Group, Stack } from '@mantine/core';
 import { useNavigationGuard } from '../../contexts/NavigationContext';
 import { useTranslation } from 'react-i18next';
diff --git a/frontend/src/components/shared/RainbowThemeProvider.tsx b/frontend/src/components/shared/RainbowThemeProvider.tsx
index e452538fb..d8a7eb765 100644
--- a/frontend/src/components/shared/RainbowThemeProvider.tsx
+++ b/frontend/src/components/shared/RainbowThemeProvider.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, ReactNode } from 'react';
+import { createContext, useContext, ReactNode } from 'react';
 import { MantineProvider } from '@mantine/core';
 import { useRainbowTheme } from '../../hooks/useRainbowTheme';
 import { mantineTheme } from '../../theme/mantineTheme';
diff --git a/frontend/src/components/toast/ToastRenderer.tsx b/frontend/src/components/toast/ToastRenderer.tsx
index b0108bfe9..38993bc30 100644
--- a/frontend/src/components/toast/ToastRenderer.tsx
+++ b/frontend/src/components/toast/ToastRenderer.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useToast } from './ToastContext';
 import { ToastInstance, ToastLocation } from './types';
 import { LocalIcon } from '../shared/LocalIcon';
@@ -66,7 +65,7 @@ export default function ToastRenderer() {
                       <LocalIcon icon={`material-symbols:${getDefaultIconName(t)}`} width={20} height={20} />
                     )}
                   </div>
-                  
+
                   {/* Title + count badge */}
                   <div className="toast-title-container">
                     <span>{t.title}</span>
@@ -74,7 +73,7 @@ export default function ToastRenderer() {
                       <span className="toast-count-badge">{t.count}</span>
                     )}
                   </div>
-                  
+
                   {/* Controls */}
                   <div className="toast-controls">
                     {t.expandable && (
@@ -101,20 +100,20 @@ export default function ToastRenderer() {
                 {/* Progress bar - always show when present */}
                 {typeof t.progress === 'number' && (
                   <div className="toast-progress-container">
-                    <div 
+                    <div
                       className={getProgressBarClass(t)}
                       style={{ width: `${t.progress}%` }}
                     />
                   </div>
                 )}
-                
+
                 {/* Body content - only show when expanded */}
                 {(t.isExpanded || !t.expandable) && (
                   <div className="toast-body">
                     {t.body}
                   </div>
                 )}
-                
+
                 {/* Button - always show when present, positioned below body */}
                 {t.buttonText && t.buttonCallback && (
                   <div className="toast-action-container">
diff --git a/frontend/src/components/tools/ToolRenderer.tsx b/frontend/src/components/tools/ToolRenderer.tsx
index 67c2b5dd9..fbd8100d1 100644
--- a/frontend/src/components/tools/ToolRenderer.tsx
+++ b/frontend/src/components/tools/ToolRenderer.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense } from "react";
+import { Suspense } from "react";
 import { useToolWorkflow } from "../../contexts/ToolWorkflowContext";
 import { BaseToolProps } from "../../types/tool";
 import ToolLoadingFallback from "./ToolLoadingFallback";
@@ -26,7 +26,7 @@ const ToolRenderer = ({
 
   // Wrap lazy-loaded component with Suspense
   return (
-    <Suspense fallback={<ToolLoadingFallback toolName={selectedTool.name} />}> 
+    <Suspense fallback={<ToolLoadingFallback toolName={selectedTool.name} />}>
       <ToolComponent
         onPreviewFile={onPreviewFile}
         onComplete={onComplete}
diff --git a/frontend/src/components/tools/addWatermark/AddWatermarkSingleStepSettings.tsx b/frontend/src/components/tools/addWatermark/AddWatermarkSingleStepSettings.tsx
index 59ed48e95..90e75e98a 100644
--- a/frontend/src/components/tools/addWatermark/AddWatermarkSingleStepSettings.tsx
+++ b/frontend/src/components/tools/addWatermark/AddWatermarkSingleStepSettings.tsx
@@ -1,12 +1,11 @@
 /**
  * AddWatermarkSingleStepSettings - Used for automation only
- * 
+ *
  * This component combines all watermark settings into a single step interface
  * for use in the automation system. It includes type selection and all relevant
  * settings in one unified component.
  */
 
-import React from "react";
 import { Stack } from "@mantine/core";
 import { AddWatermarkParameters } from "../../../hooks/tools/addWatermark/useAddWatermarkParameters";
 import WatermarkTypeSettings from "./WatermarkTypeSettings";
@@ -67,4 +66,4 @@ const AddWatermarkSingleStepSettings = ({ parameters, onParameterChange, disable
   );
 };
 
-export default AddWatermarkSingleStepSettings;
\ No newline at end of file
+export default AddWatermarkSingleStepSettings;
diff --git a/frontend/src/components/tools/addWatermark/WatermarkFormatting.tsx b/frontend/src/components/tools/addWatermark/WatermarkFormatting.tsx
index b6af3365c..4ebe62356 100644
--- a/frontend/src/components/tools/addWatermark/WatermarkFormatting.tsx
+++ b/frontend/src/components/tools/addWatermark/WatermarkFormatting.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Stack, Checkbox, Group } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { AddWatermarkParameters } from "../../../hooks/tools/addWatermark/useAddWatermarkParameters";
@@ -80,4 +79,4 @@ const WatermarkFormatting = ({ parameters, onParameterChange, disabled = false }
   );
 };
 
-export default WatermarkFormatting;
\ No newline at end of file
+export default WatermarkFormatting;
diff --git a/frontend/src/components/tools/addWatermark/WatermarkImageFile.tsx b/frontend/src/components/tools/addWatermark/WatermarkImageFile.tsx
index 85e723ccb..e64b03646 100644
--- a/frontend/src/components/tools/addWatermark/WatermarkImageFile.tsx
+++ b/frontend/src/components/tools/addWatermark/WatermarkImageFile.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Stack } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { AddWatermarkParameters } from "../../../hooks/tools/addWatermark/useAddWatermarkParameters";
diff --git a/frontend/src/components/tools/addWatermark/WatermarkStyleSettings.tsx b/frontend/src/components/tools/addWatermark/WatermarkStyleSettings.tsx
index f3c6751cf..f92ca48e5 100644
--- a/frontend/src/components/tools/addWatermark/WatermarkStyleSettings.tsx
+++ b/frontend/src/components/tools/addWatermark/WatermarkStyleSettings.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Stack, Text, NumberInput } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { AddWatermarkParameters } from "../../../hooks/tools/addWatermark/useAddWatermarkParameters";
@@ -60,4 +59,4 @@ const WatermarkStyleSettings = ({ parameters, onParameterChange, disabled = fals
   );
 };
 
-export default WatermarkStyleSettings;
\ No newline at end of file
+export default WatermarkStyleSettings;
diff --git a/frontend/src/components/tools/addWatermark/WatermarkTextStyle.tsx b/frontend/src/components/tools/addWatermark/WatermarkTextStyle.tsx
index 91217f76b..a445084b0 100644
--- a/frontend/src/components/tools/addWatermark/WatermarkTextStyle.tsx
+++ b/frontend/src/components/tools/addWatermark/WatermarkTextStyle.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Stack, Text, Select, ColorInput } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { AddWatermarkParameters } from "../../../hooks/tools/addWatermark/useAddWatermarkParameters";
@@ -27,7 +26,7 @@ const WatermarkTextStyle = ({ parameters, onParameterChange, disabled = false }:
           format="hex"
         />
       </Stack>
-      
+
       <Stack gap="xs">
         <Text size="xs" fw={500}>
           {t("watermark.settings.alphabet", "Alphabet")}
diff --git a/frontend/src/components/tools/automate/AutomationSelection.tsx b/frontend/src/components/tools/automate/AutomationSelection.tsx
index 7898dd864..a10ebb139 100644
--- a/frontend/src/components/tools/automate/AutomationSelection.tsx
+++ b/frontend/src/components/tools/automate/AutomationSelection.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { Title, Stack, Divider } from "@mantine/core";
 import AddCircleOutline from "@mui/icons-material/AddCircleOutline";
@@ -19,11 +18,11 @@ interface AutomationSelectionProps {
   toolRegistry: Record<string, ToolRegistryEntry>;
 }
 
-export default function AutomationSelection({ 
+export default function AutomationSelection({
   savedAutomations,
-  onCreateNew, 
-  onRun, 
-  onEdit, 
+  onCreateNew,
+  onRun,
+  onEdit,
   onDelete,
   onCopyFromSuggested,
   toolRegistry
diff --git a/frontend/src/components/tools/bookletImposition/BookletImpositionSettings.tsx b/frontend/src/components/tools/bookletImposition/BookletImpositionSettings.tsx
index e2e7a502b..967ac1d65 100644
--- a/frontend/src/components/tools/bookletImposition/BookletImpositionSettings.tsx
+++ b/frontend/src/components/tools/bookletImposition/BookletImpositionSettings.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Stack, Text, Divider, Collapse, Button, NumberInput } from "@mantine/core";
 import { BookletImpositionParameters } from "../../../hooks/tools/bookletImposition/useBookletImpositionParameters";
@@ -176,4 +176,4 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
   );
 };
 
-export default BookletImpositionSettings;
\ No newline at end of file
+export default BookletImpositionSettings;
diff --git a/frontend/src/components/tools/compress/CompressSettings.tsx b/frontend/src/components/tools/compress/CompressSettings.tsx
index 412962704..7304c09b0 100644
--- a/frontend/src/components/tools/compress/CompressSettings.tsx
+++ b/frontend/src/components/tools/compress/CompressSettings.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { Stack, Text, NumberInput, Select, Divider } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { CompressParameters } from "../../../hooks/tools/compress/useCompressParameters";
diff --git a/frontend/src/components/tools/convert/ConvertFromEmailSettings.tsx b/frontend/src/components/tools/convert/ConvertFromEmailSettings.tsx
index 943e0feed..070fe8b6a 100644
--- a/frontend/src/components/tools/convert/ConvertFromEmailSettings.tsx
+++ b/frontend/src/components/tools/convert/ConvertFromEmailSettings.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Stack, Text, NumberInput, Checkbox } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { ConvertParameters } from '../../../hooks/tools/convert/useConvertParameters';
diff --git a/frontend/src/components/tools/convert/ConvertFromImageSettings.tsx b/frontend/src/components/tools/convert/ConvertFromImageSettings.tsx
index eb0457f13..1767726db 100644
--- a/frontend/src/components/tools/convert/ConvertFromImageSettings.tsx
+++ b/frontend/src/components/tools/convert/ConvertFromImageSettings.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Stack, Text, Select, Switch } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { COLOR_TYPES, FIT_OPTIONS } from "../../../constants/convertConstants";
diff --git a/frontend/src/components/tools/convert/ConvertFromWebSettings.tsx b/frontend/src/components/tools/convert/ConvertFromWebSettings.tsx
index f6101d1c1..99d0809ab 100644
--- a/frontend/src/components/tools/convert/ConvertFromWebSettings.tsx
+++ b/frontend/src/components/tools/convert/ConvertFromWebSettings.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Stack, Text, NumberInput, Slider } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { ConvertParameters } from '../../../hooks/tools/convert/useConvertParameters';
diff --git a/frontend/src/components/tools/convert/ConvertSettings.tsx b/frontend/src/components/tools/convert/ConvertSettings.tsx
index 2b1de9302..9b065e571 100644
--- a/frontend/src/components/tools/convert/ConvertSettings.tsx
+++ b/frontend/src/components/tools/convert/ConvertSettings.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { Stack, Text, Group, Divider, UnstyledButton, useMantineTheme, useMantineColorScheme } from "@mantine/core";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { useTranslation } from "react-i18next";
diff --git a/frontend/src/components/tools/convert/ConvertToImageSettings.tsx b/frontend/src/components/tools/convert/ConvertToImageSettings.tsx
index 887685501..0d82181f7 100644
--- a/frontend/src/components/tools/convert/ConvertToImageSettings.tsx
+++ b/frontend/src/components/tools/convert/ConvertToImageSettings.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Stack, Text, Select, NumberInput, Group } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { COLOR_TYPES, OUTPUT_OPTIONS } from "../../../constants/convertConstants";
diff --git a/frontend/src/components/tools/convert/ConvertToPdfaSettings.tsx b/frontend/src/components/tools/convert/ConvertToPdfaSettings.tsx
index b9a572b8d..18d2bafcb 100644
--- a/frontend/src/components/tools/convert/ConvertToPdfaSettings.tsx
+++ b/frontend/src/components/tools/convert/ConvertToPdfaSettings.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Stack, Text, Select, Alert } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { ConvertParameters } from '../../../hooks/tools/convert/useConvertParameters';
diff --git a/frontend/src/components/tools/convert/GroupedFormatDropdown.tsx b/frontend/src/components/tools/convert/GroupedFormatDropdown.tsx
index 6ef1c25a3..104e2bb7d 100644
--- a/frontend/src/components/tools/convert/GroupedFormatDropdown.tsx
+++ b/frontend/src/components/tools/convert/GroupedFormatDropdown.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from "react";
+import { useState, useMemo } from "react";
 import { Stack, Text, Group, Button, Box, Popover, UnstyledButton, useMantineTheme, useMantineColorScheme } from "@mantine/core";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 
@@ -34,14 +34,14 @@ const GroupedFormatDropdown = ({
 
   const groupedOptions = useMemo(() => {
     const groups: Record<string, FormatOption[]> = {};
-    
+
     options.forEach(option => {
       if (!groups[option.group]) {
         groups[option.group] = [];
       }
       groups[option.group].push(option);
     });
-    
+
     return groups;
   }, [options]);
 
@@ -77,14 +77,14 @@ const GroupedFormatDropdown = ({
             padding: '0.5rem 0.75rem',
             border: `0.0625rem solid ${theme.colors.gray[4]}`,
             borderRadius: theme.radius.sm,
-            backgroundColor: disabled 
-              ? theme.colors.gray[1] 
-              : colorScheme === 'dark' 
-                ? theme.colors.dark[6] 
+            backgroundColor: disabled
+              ? theme.colors.gray[1]
+              : colorScheme === 'dark'
+                ? theme.colors.dark[6]
                 : theme.white,
             cursor: disabled ? 'not-allowed' : 'pointer',
             width: '100%',
-            color: disabled 
+            color: disabled
               ? colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.dark[7]
               : colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.dark[9]
           }}
@@ -93,19 +93,19 @@ const GroupedFormatDropdown = ({
             <Text size="sm" c={value ? undefined : 'dimmed'}>
               {selectedLabel}
             </Text>
-            <KeyboardArrowDownIcon 
-              style={{ 
+            <KeyboardArrowDownIcon
+              style={{
                 fontSize: '1rem',
                 transform: dropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',
                 transition: 'transform 0.2s ease',
                 color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6]
-              }} 
+              }}
             />
           </Group>
         </UnstyledButton>
       </Popover.Target>
-      <Popover.Dropdown 
-        style={{ 
+      <Popover.Dropdown
+        style={{
           minWidth: Math.min(350, parseInt(minWidth.replace('rem', '')) * 16),
           maxWidth: '90vw',
           maxHeight: '40vh',
@@ -117,10 +117,10 @@ const GroupedFormatDropdown = ({
         <Stack gap="md">
           {Object.entries(groupedOptions).map(([groupName, groupOptions]) => (
             <Box key={groupName}>
-              <Text 
-                size="sm" 
-                fw={600} 
-                c={colorScheme === 'dark' ? 'dark.2' : 'gray.6'} 
+              <Text
+                size="sm"
+                fw={600}
+                c={colorScheme === 'dark' ? 'dark.2' : 'gray.6'}
                 mb="xs"
               >
                 {groupName}
@@ -153,4 +153,4 @@ const GroupedFormatDropdown = ({
   );
 };
 
-export default GroupedFormatDropdown;
\ No newline at end of file
+export default GroupedFormatDropdown;
diff --git a/frontend/src/components/tools/pageLayout/PageLayoutSettings.tsx b/frontend/src/components/tools/pageLayout/PageLayoutSettings.tsx
index 8df230f2d..296bd73bb 100644
--- a/frontend/src/components/tools/pageLayout/PageLayoutSettings.tsx
+++ b/frontend/src/components/tools/pageLayout/PageLayoutSettings.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Divider, Select, Stack, Switch } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { PageLayoutParameters } from '../../../hooks/tools/pageLayout/usePageLayoutParameters';
diff --git a/frontend/src/components/tools/reorganizePages/ReorganizePagesSettings.tsx b/frontend/src/components/tools/reorganizePages/ReorganizePagesSettings.tsx
index 910d13f15..13328a631 100644
--- a/frontend/src/components/tools/reorganizePages/ReorganizePagesSettings.tsx
+++ b/frontend/src/components/tools/reorganizePages/ReorganizePagesSettings.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Divider, Select, Stack, TextInput } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { ReorganizePagesParameters } from '../../../hooks/tools/reorganizePages/useReorganizePagesParameters';
@@ -31,7 +30,7 @@ export default function ReorganizePagesSettings({
         disabled={disabled}
       />
       {selectedMode && (
-        <div 
+        <div
           style={{
             backgroundColor: 'var(--information-text-bg)',
             color: 'var(--information-text-color)',
diff --git a/frontend/src/components/tools/replaceColor/ReplaceColorSettings.tsx b/frontend/src/components/tools/replaceColor/ReplaceColorSettings.tsx
index 8630d1811..ac0db45ce 100644
--- a/frontend/src/components/tools/replaceColor/ReplaceColorSettings.tsx
+++ b/frontend/src/components/tools/replaceColor/ReplaceColorSettings.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Stack, Text, Select, ColorInput } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { ReplaceColorParameters } from "../../../hooks/tools/replaceColor/useReplaceColorParameters";
@@ -105,4 +104,4 @@ const ReplaceColorSettings = ({ parameters, onParameterChange, disabled = false
   );
 };
 
-export default ReplaceColorSettings;
\ No newline at end of file
+export default ReplaceColorSettings;
diff --git a/frontend/src/components/tools/shared/FileMetadata.tsx b/frontend/src/components/tools/shared/FileMetadata.tsx
index 00e33f175..8979f344e 100644
--- a/frontend/src/components/tools/shared/FileMetadata.tsx
+++ b/frontend/src/components/tools/shared/FileMetadata.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Stack, Text } from '@mantine/core';
 import { formatFileSize, getFileDate } from '../../../utils/fileUtils';
 
@@ -24,4 +23,4 @@ const FileMetadata = ({ file }: FileMetadataProps) => {
   );
 };
 
-export default FileMetadata;
\ No newline at end of file
+export default FileMetadata;
diff --git a/frontend/src/components/tools/shared/NavigationControls.tsx b/frontend/src/components/tools/shared/NavigationControls.tsx
index 93eda0d8a..f67c1ca55 100644
--- a/frontend/src/components/tools/shared/NavigationControls.tsx
+++ b/frontend/src/components/tools/shared/NavigationControls.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Stack, Group, ActionIcon, Text } from '@mantine/core';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
diff --git a/frontend/src/components/tools/shared/NumberInputWithUnit.tsx b/frontend/src/components/tools/shared/NumberInputWithUnit.tsx
index 4e30c40d1..bf28aa048 100644
--- a/frontend/src/components/tools/shared/NumberInputWithUnit.tsx
+++ b/frontend/src/components/tools/shared/NumberInputWithUnit.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Stack, Text, NumberInput } from "@mantine/core";
 
 interface NumberInputWithUnitProps {
@@ -11,14 +11,14 @@ interface NumberInputWithUnitProps {
   disabled?: boolean;
 }
 
-const NumberInputWithUnit = ({ 
-  label, 
-  value, 
-  onChange, 
-  unit, 
-  min, 
-  max, 
-  disabled = false 
+const NumberInputWithUnit = ({
+  label,
+  value,
+  onChange,
+  unit,
+  min,
+  max,
+  disabled = false
 }: NumberInputWithUnitProps) => {
   const [localValue, setLocalValue] = useState<number | string>(value);
 
@@ -54,4 +54,4 @@ const NumberInputWithUnit = ({
   );
 };
 
-export default NumberInputWithUnit;
\ No newline at end of file
+export default NumberInputWithUnit;
diff --git a/frontend/src/components/tools/shared/OperationButton.tsx b/frontend/src/components/tools/shared/OperationButton.tsx
index ec4a81e34..4e2acf83f 100644
--- a/frontend/src/components/tools/shared/OperationButton.tsx
+++ b/frontend/src/components/tools/shared/OperationButton.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 
diff --git a/frontend/src/components/tools/shared/ResultsPreview.tsx b/frontend/src/components/tools/shared/ResultsPreview.tsx
index 2ff0868d2..586700b85 100644
--- a/frontend/src/components/tools/shared/ResultsPreview.tsx
+++ b/frontend/src/components/tools/shared/ResultsPreview.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Box, Text, Loader, Stack, Center, Flex } from '@mantine/core';
 import FilePreview from '../../shared/FilePreview';
 import FileMetadata from './FileMetadata';
diff --git a/frontend/src/components/tools/sign/SignSettings.tsx b/frontend/src/components/tools/sign/SignSettings.tsx
index 74dc83d39..887aa24a6 100644
--- a/frontend/src/components/tools/sign/SignSettings.tsx
+++ b/frontend/src/components/tools/sign/SignSettings.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useTranslation } from "react-i18next";
 import { Stack, Button, Text, Alert, Tabs } from '@mantine/core';
 import { SignParameters } from "../../../hooks/tools/sign/useSignParameters";
@@ -256,4 +256,4 @@ const SignSettings = ({
   );
 };
 
-export default SignSettings;
\ No newline at end of file
+export default SignSettings;
diff --git a/frontend/src/components/tools/toolPicker/ToolSearch.tsx b/frontend/src/components/tools/toolPicker/ToolSearch.tsx
index a3ef4216a..90b86f4ef 100644
--- a/frontend/src/components/tools/toolPicker/ToolSearch.tsx
+++ b/frontend/src/components/tools/toolPicker/ToolSearch.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useMemo } from "react";
+import { useState, useRef, useEffect, useMemo } from "react";
 import { Stack, Button, Text } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import LocalIcon from '../../shared/LocalIcon';
diff --git a/frontend/src/components/viewer/CustomSearchLayer.tsx b/frontend/src/components/viewer/CustomSearchLayer.tsx
index 9df19a230..62e49d861 100644
--- a/frontend/src/components/viewer/CustomSearchLayer.tsx
+++ b/frontend/src/components/viewer/CustomSearchLayer.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useSearch } from '@embedpdf/plugin-search/react';
 import { useViewer } from '../../contexts/ViewerContext';
 import { SEARCH_CONSTANTS } from './constants/search';
@@ -24,9 +24,9 @@ interface SearchResultState {
   activeResultIndex?: number;
 }
 
-export function CustomSearchLayer({ 
-  pageIndex, 
-  scale, 
+export function CustomSearchLayer({
+  pageIndex,
+  scale,
   highlightColor = SEARCH_CONSTANTS.HIGHLIGHT_COLORS.BACKGROUND,
   activeHighlightColor = SEARCH_CONSTANTS.HIGHLIGHT_COLORS.ACTIVE_BACKGROUND,
   opacity = SEARCH_CONSTANTS.HIGHLIGHT_COLORS.OPACITY,
@@ -42,17 +42,17 @@ export function CustomSearchLayer({
     if (!searchProvides) {
       return;
     }
-    
+
     const unsubscribe = searchProvides.onSearchResultStateChange?.((state: SearchResultState) => {
       // Auto-scroll to active search result
       if (state?.results && state.activeResultIndex !== undefined && state.activeResultIndex >= 0) {
         const activeResult = state.results[state.activeResultIndex];
-        if (activeResult) {            
+        if (activeResult) {
           const pageNumber = activeResult.pageIndex + 1; // Convert to 1-based page number
           scrollActions.scrollToPage(pageNumber);
         }
       }
-      
+
       setSearchResultState(state);
     });
 
@@ -69,7 +69,7 @@ export function CustomSearchLayer({
     const filtered = searchResultState.results
       .map((result, originalIndex) => ({ result, originalIndex }))
       .filter(({ result }) => result.pageIndex === pageIndex);
-    
+
     return filtered;
   }, [searchResultState, pageIndex]);
 
@@ -78,7 +78,7 @@ export function CustomSearchLayer({
   }
 
   return (
-    <div style={{ 
+    <div style={{
       position: 'absolute',
       top: 0,
       left: 0,
@@ -117,4 +117,4 @@ export function CustomSearchLayer({
       ))}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/viewer/LocalEmbedPDFWithAnnotations.tsx b/frontend/src/components/viewer/LocalEmbedPDFWithAnnotations.tsx
index af60d8fa8..df9bb8b4c 100644
--- a/frontend/src/components/viewer/LocalEmbedPDFWithAnnotations.tsx
+++ b/frontend/src/components/viewer/LocalEmbedPDFWithAnnotations.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { createPluginRegistration } from '@embedpdf/core';
 import { EmbedPDF } from '@embedpdf/core/react';
 import { usePdfiumEngine } from '@embedpdf/engines/react';
@@ -312,4 +312,4 @@ export function LocalEmbedPDFWithAnnotations({
       </EmbedPDF>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/viewer/PdfViewerToolbar.tsx b/frontend/src/components/viewer/PdfViewerToolbar.tsx
index f4e64d5a5..48373ba02 100644
--- a/frontend/src/components/viewer/PdfViewerToolbar.tsx
+++ b/frontend/src/components/viewer/PdfViewerToolbar.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Button, Paper, Group, NumberInput } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { useViewer } from '../../contexts/ViewerContext';
@@ -14,11 +14,11 @@ interface PdfViewerToolbarProps {
   currentPage?: number;
   totalPages?: number;
   onPageChange?: (page: number) => void;
-  
+
   // Dual page toggle (placeholder for now)
   dualPage?: boolean;
   onDualPageToggle?: () => void;
-  
+
   // Zoom controls (connected via ViewerContext)
   currentZoom?: number;
 }
@@ -33,7 +33,7 @@ export function PdfViewerToolbar({
 }: PdfViewerToolbarProps) {
   const { t } = useTranslation();
   const { getScrollState, getZoomState, scrollActions, zoomActions, registerImmediateZoomUpdate, registerImmediateScrollUpdate } = useViewer();
-  
+
   const scrollState = getScrollState();
   const zoomState = getZoomState();
   const [pageInput, setPageInput] = useState(scrollState.currentPage || currentPage);
@@ -151,7 +151,7 @@ export function PdfViewerToolbar({
             input: { width: 48, textAlign: "center", fontWeight: 500, fontSize: 16 },
           }}
         />
-        
+
         <span style={{ fontWeight: 500, fontSize: 16 }}>
           / {scrollState.totalPages}
         </span>
@@ -229,4 +229,4 @@ export function PdfViewerToolbar({
         </Group>
       </Paper>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/viewer/ThumbnailSidebar.tsx b/frontend/src/components/viewer/ThumbnailSidebar.tsx
index b78e13774..2f65505c8 100644
--- a/frontend/src/components/viewer/ThumbnailSidebar.tsx
+++ b/frontend/src/components/viewer/ThumbnailSidebar.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Box, ScrollArea } from '@mantine/core';
 import { useViewer } from '../../contexts/ViewerContext';
 
diff --git a/frontend/src/components/viewer/Viewer.tsx b/frontend/src/components/viewer/Viewer.tsx
index 49d3a5854..ea2403fd0 100644
--- a/frontend/src/components/viewer/Viewer.tsx
+++ b/frontend/src/components/viewer/Viewer.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import EmbedPdfViewer from './EmbedPdfViewer';
 
 export interface ViewerProps {
@@ -13,4 +12,4 @@ const Viewer = (props: ViewerProps) => {
   return <EmbedPdfViewer {...props} />;
 };
 
-export default Viewer;
\ No newline at end of file
+export default Viewer;
diff --git a/frontend/src/contexts/FileContext.tsx b/frontend/src/contexts/FileContext.tsx
index 62f458eaf..f67a1acee 100644
--- a/frontend/src/contexts/FileContext.tsx
+++ b/frontend/src/contexts/FileContext.tsx
@@ -12,7 +12,7 @@
  * Memory management handled by FileLifecycleManager (PDF.js cleanup, blob URL revocation).
  */
 
-import React, { useReducer, useCallback, useEffect, useRef, useMemo } from 'react';
+import { useReducer, useCallback, useEffect, useRef, useMemo } from 'react';
 import {
   FileContextProviderProps,
   FileContextSelectors,
diff --git a/frontend/src/contexts/SidebarContext.tsx b/frontend/src/contexts/SidebarContext.tsx
index 64315fd45..1035cfb99 100644
--- a/frontend/src/contexts/SidebarContext.tsx
+++ b/frontend/src/contexts/SidebarContext.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useRef, useMemo } from 'react';
+import { createContext, useContext, useState, useRef, useMemo } from 'react';
 import { SidebarState, SidebarRefs, SidebarContextValue, SidebarProviderProps } from '../types/sidebar';
 
 const SidebarContext = createContext<SidebarContextValue | undefined>(undefined);
@@ -7,7 +7,7 @@ export function SidebarProvider({ children }: SidebarProviderProps) {
   // All sidebar state management
   const quickAccessRef = useRef<HTMLDivElement>(null);
   const toolPanelRef = useRef<HTMLDivElement>(null);
-  
+
   const [sidebarsVisible, setSidebarsVisible] = useState(true);
   const [leftPanelView, setLeftPanelView] = useState<'toolPicker' | 'toolContent'>('toolPicker');
   const [readerMode, setReaderMode] = useState(false);
@@ -44,4 +44,4 @@ export function useSidebarContext(): SidebarContextValue {
     throw new Error('useSidebarContext must be used within a SidebarProvider');
   }
   return context;
-} 
\ No newline at end of file
+}
diff --git a/frontend/src/tools/OCR.tsx b/frontend/src/tools/OCR.tsx
index c8a30fea4..c480972ad 100644
--- a/frontend/src/tools/OCR.tsx
+++ b/frontend/src/tools/OCR.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
 import { useFileSelection } from "../contexts/FileContext";
diff --git a/frontend/src/tools/RemovePages.tsx b/frontend/src/tools/RemovePages.tsx
index 5ae0f6934..ec3e9762d 100644
--- a/frontend/src/tools/RemovePages.tsx
+++ b/frontend/src/tools/RemovePages.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 import { BaseToolProps, ToolComponent } from "../types/tool";
diff --git a/frontend/src/tools/ReorganizePages.tsx b/frontend/src/tools/ReorganizePages.tsx
index 5f940a7ae..e2a68e883 100644
--- a/frontend/src/tools/ReorganizePages.tsx
+++ b/frontend/src/tools/ReorganizePages.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 import { BaseToolProps, ToolComponent } from "../types/tool";