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

@@ -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";

frontend/src/components/shared/FilePickerModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import {
   Modal,
   Text,

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";
 

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';
 

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";
 

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';

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';

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';

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";

frontend/src/components/tools/addWatermark/AddWatermarkSingleStepSettings.tsx

@@ -6,7 +6,6 @@
  * 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";

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";

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";

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";

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";

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";

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";

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";

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';

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";

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';

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";

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";

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';

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";
 

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';

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';

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";

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';
 

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';

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 {

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';
 

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';

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";

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';

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';

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';

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';

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';
 

frontend/src/components/viewer/Viewer.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import EmbedPdfViewer from './EmbedPdfViewer';
 
 export interface ViewerProps {

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,

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);

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";

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";

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";