Refactor to use nullish coalescing and add missing React imports

Replaced many uses of logical OR (||) with nullish coalescing (??) for more accurate handling of undefined/null values. Added missing explicit React imports to various component files to ensure compatibility with tooling and future React versions. Also updated some async function calls to use 'void' for better type safety and intent clarity. Minor whitespace and formatting adjustments included.
2025-09-26 17:52:59 +02:00 · 2025-09-25 07:36:19 +02:00 · 2025-09-25 07:36:19 +02:00 · 490c7c1018
commit 490c7c1018
parent 906dc9bd8f
57 changed files with 104 additions and 76 deletions
--- a/frontend/src/components/tools/addStamp/StampPreview.tsx
+++ b/frontend/src/components/tools/addStamp/StampPreview.tsx
@ -72,7 +72,7 @@ export default function StampPreview({ parameters, onParameterChange, file, show
        if (!cancelled) setPageSize(null);
      }
    };
-    load();
+    void load();
    return () => { cancelled = true; };
  }, [file]);

@ -88,12 +88,12 @@ export default function StampPreview({ parameters, onParameterChange, file, show
        const pageNumber = Math.max(1, getFirstSelectedPage(parameters.pageNumbers));
        const pageId = `${file.name}:${file.size}:${file.lastModified}:page:${pageNumber}`;
        const thumb = await requestThumbnail(pageId, file, pageNumber);
-        if (isActive) setPageThumbnail(thumb || null);
+        if (isActive) setPageThumbnail(thumb ?? null);
      } catch {
        if (isActive) setPageThumbnail(null);
      }
    };
-    loadThumb();
+    void loadThumb();
    return () => { isActive = false; };
  }, [file, parameters.pageNumbers, requestThumbnail]);

@ -189,7 +189,7 @@ export default function StampPreview({ parameters, onParameterChange, file, show

    draggingRef.current = {
      type,
-      startX: e.clientX - (rect?.left || 0),
+      startX: e.clientX - (rect?.left ?? 0),
      startY: (rect ? rect.bottom - e.clientY : 0), // convert to bottom-based coords
      initLeft: left,
      initBottom: bottom,
--- a/frontend/src/components/tools/addStamp/useAddStampOperation.ts
+++ b/frontend/src/components/tools/addStamp/useAddStampOperation.ts
@ -19,7 +19,7 @@ export const buildAddStampFormData = (parameters: AddStampParameters, file: File
  formData.append('alphabet', parameters.alphabet);

  // Stamp type and payload
-  formData.append('stampType', parameters.stampType || 'text');
+  formData.append('stampType', parameters.stampType ?? 'text');
  if (parameters.stampType === 'text') {
    formData.append('stampText', parameters.stampText);
  } else if (parameters.stampType === 'image' && parameters.stampImage) {
--- a/frontend/src/components/tools/addWatermark/WatermarkImageFile.tsx
+++ b/frontend/src/components/tools/addWatermark/WatermarkImageFile.tsx
@ -17,7 +17,7 @@ const WatermarkImageFile = ({ parameters, onParameterChange, disabled = false }:
    <Stack gap="sm">
      <FileUploadButton
        file={parameters.watermarkImage}
-        onChange={(file) => onParameterChange('watermarkImage', file || undefined)}
+        onChange={(file) => onParameterChange('watermarkImage', file ?? undefined)}
        accept="image/*"
        disabled={disabled}
        placeholder={t('watermark.settings.image.choose', 'Choose Image')}
--- a/frontend/src/components/tools/addWatermark/WatermarkTypeSettings.tsx
+++ b/frontend/src/components/tools/addWatermark/WatermarkTypeSettings.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import { useTranslation } from "react-i18next";
 import ButtonSelector from "../../shared/ButtonSelector";

--- a/frontend/src/components/tools/adjustPageScale/AdjustPageScaleSettings.test.tsx
+++ b/frontend/src/components/tools/adjustPageScale/AdjustPageScaleSettings.test.tsx
@ -1,3 +1,4 @@
+import React from 'react';
 import { describe, expect, test, vi, beforeEach } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { MantineProvider } from '@mantine/core';
--- a/frontend/src/components/tools/adjustPageScale/AdjustPageScaleSettings.tsx
+++ b/frontend/src/components/tools/adjustPageScale/AdjustPageScaleSettings.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import { Stack, NumberInput, Select } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { AdjustPageScaleParameters, PageSize } from "../../../hooks/tools/adjustPageScale/useAdjustPageScaleParameters";
--- a/frontend/src/components/tools/automate/AutomationCreation.tsx
+++ b/frontend/src/components/tools/automate/AutomationCreation.tsx
@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
  Button,
@ -100,7 +100,7 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
      icon: automationIcon,
      operations: selectedTools.map(tool => ({
        operation: tool.operation,
-        parameters: tool.parameters || {}
+        parameters: tool.parameters ?? {}
      }))
    };

--- a/frontend/src/components/tools/automate/AutomationEntry.tsx
+++ b/frontend/src/components/tools/automate/AutomationEntry.tsx
@ -240,7 +240,7 @@ export default function AutomationEntry({
  );

  // Show tooltip if there's a description OR operations to display
-  const shouldShowTooltip = description || operations.length > 0;
+  const shouldShowTooltip = description ?? operations.length > 0;

  return shouldShowTooltip ? (
    <Tooltip
--- a/frontend/src/components/tools/automate/AutomationRun.tsx
+++ b/frontend/src/components/tools/automate/AutomationRun.tsx
@ -26,7 +26,7 @@ export default function AutomationRun({ automation, onComplete, automateOperatio
  const [currentStepIndex, setCurrentStepIndex] = useState(-1);

  // Use the operation hook's loading state
-  const isExecuting = automateOperation?.isLoading || false;
+  const isExecuting = automateOperation?.isLoading ?? false;
  const hasResults = automateOperation?.files.length > 0 || automateOperation?.downloadUrl !== null;

  // Initialize execution steps from automation
@ -194,7 +194,7 @@ export default function AutomationRun({ automation, onComplete, automateOperatio
          <Button
            leftSection={<PlayArrowIcon />}
            onClick={executeAutomation}
-            disabled={isExecuting || !selectedFiles || selectedFiles.length === 0}
+            disabled={(isExecuting ?? !selectedFiles) ?? selectedFiles.length === 0}
            loading={isExecuting}
          >
            {isExecuting
--- a/frontend/src/components/tools/automate/ToolConfigurationModal.tsx
+++ b/frontend/src/components/tools/automate/ToolConfigurationModal.tsx
@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
  Modal,
--- a/frontend/src/components/tools/automate/ToolSelector.tsx
+++ b/frontend/src/components/tools/automate/ToolSelector.tsx
@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
+import React, { useState, useMemo, useCallback, useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Stack, Text, ScrollArea } from '@mantine/core';
 import { ToolRegistryEntry } from '../../../data/toolsTaxonomy';
@ -82,7 +82,7 @@ export default function ToolSelector({

    // Find the "all" section which contains all tools without duplicates
    const allSection = sections.find(s => (s as any).key === 'all');
-    return allSection?.subcategories || [];
+    return allSection?.subcategories ?? [];
  }, [isSearching, searchGroups, sections, baseFilteredTools]);

  const handleToolSelect = useCallback((toolKey: string) => {
@ -138,7 +138,7 @@ export default function ToolSelector({
    if (selectedValue && toolRegistry[selectedValue]) {
      return toolRegistry[selectedValue].name;
    }
-    return placeholder || t('automate.creation.tools.add', 'Add a tool...');
+    return placeholder ?? t('automate.creation.tools.add', 'Add a tool...');
  };

  return (
--- a/frontend/src/components/tools/certSign/CertificateFilesSettings.tsx
+++ b/frontend/src/components/tools/certSign/CertificateFilesSettings.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import { Stack, Text, TextInput } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { CertSignParameters } from "../../../hooks/tools/certSign/useCertSignParameters";
@ -19,7 +20,7 @@ const CertificateFilesSettings = ({ parameters, onParameterChange, disabled = fa
        <Stack gap="sm">
          <FileUploadButton
            file={parameters.privateKeyFile}
-            onChange={(file) => onParameterChange('privateKeyFile', file || undefined)}
+            onChange={(file) => onParameterChange('privateKeyFile', file ?? undefined)}
            accept=".pem,.der,.key"
            disabled={disabled}
            placeholder={t('certSign.choosePrivateKey', 'Choose Private Key File')}
@ -27,7 +28,7 @@ const CertificateFilesSettings = ({ parameters, onParameterChange, disabled = fa
          {parameters.privateKeyFile && (
            <FileUploadButton
              file={parameters.certFile}
-              onChange={(file) => onParameterChange('certFile', file || undefined)}
+              onChange={(file) => onParameterChange('certFile', file ?? undefined)}
              accept=".pem,.der,.crt,.cer"
              disabled={disabled}
              placeholder={t('certSign.chooseCertificate', 'Choose Certificate File')}
@ -39,7 +40,7 @@ const CertificateFilesSettings = ({ parameters, onParameterChange, disabled = fa
      {parameters.certType === 'PKCS12' && (
        <FileUploadButton
          file={parameters.p12File}
-          onChange={(file) => onParameterChange('p12File', file || undefined)}
+          onChange={(file) => onParameterChange('p12File', file ?? undefined)}
          accept=".p12"
          disabled={disabled}
          placeholder={t('certSign.chooseP12File', 'Choose PKCS12 File')}
@ -49,7 +50,7 @@ const CertificateFilesSettings = ({ parameters, onParameterChange, disabled = fa
      {parameters.certType === 'PFX' && (
        <FileUploadButton
          file={parameters.p12File}
-          onChange={(file) => onParameterChange('p12File', file || undefined)}
+          onChange={(file) => onParameterChange('p12File', file ?? undefined)}
          accept=".pfx"
          disabled={disabled}
          placeholder={t('certSign.choosePfxFile', 'Choose PFX File')}
@ -59,7 +60,7 @@ const CertificateFilesSettings = ({ parameters, onParameterChange, disabled = fa
      {parameters.certType === 'JKS' && (
        <FileUploadButton
          file={parameters.jksFile}
-          onChange={(file) => onParameterChange('jksFile', file || undefined)}
+          onChange={(file) => onParameterChange('jksFile', file ?? undefined)}
          accept=".jks,.keystore"
          disabled={disabled}
          placeholder={t('certSign.chooseJksFile', 'Choose JKS File')}
@ -74,9 +75,9 @@ const CertificateFilesSettings = ({ parameters, onParameterChange, disabled = fa

      {/* Password - only show when files are uploaded */}
      {parameters.certType && (
-        (parameters.certType === 'PEM' && parameters.privateKeyFile && parameters.certFile) ||
-        (parameters.certType === 'PKCS12' && parameters.p12File) ||
-        (parameters.certType === 'PFX' && parameters.p12File) ||
+        (parameters.certType === 'PEM' && parameters.privateKeyFile && parameters.certFile) ??
+        (parameters.certType === 'PKCS12' && parameters.p12File) ??
+        (parameters.certType === 'PFX' && parameters.p12File) ??
        (parameters.certType === 'JKS' && parameters.jksFile)
      ) && (
        <TextInput
--- a/frontend/src/components/tools/certSign/CertificateFormatSettings.tsx
+++ b/frontend/src/components/tools/certSign/CertificateFormatSettings.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import { Stack, Button } from "@mantine/core";
 import { CertSignParameters } from "../../../hooks/tools/certSign/useCertSignParameters";

--- a/frontend/src/components/tools/certSign/CertificateTypeSettings.tsx
+++ b/frontend/src/components/tools/certSign/CertificateTypeSettings.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import { Stack, Button } from "@mantine/core";
 import { CertSignParameters } from "../../../hooks/tools/certSign/useCertSignParameters";
 import { useAppConfig } from "../../../hooks/useAppConfig";
--- a/frontend/src/components/tools/certSign/SignatureAppearanceSettings.tsx
+++ b/frontend/src/components/tools/certSign/SignatureAppearanceSettings.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import { Stack, Text, Button, TextInput, NumberInput } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { CertSignParameters } from "../../../hooks/tools/certSign/useCertSignParameters";
--- a/frontend/src/components/tools/changeMetadata/ChangeMetadataSingleStep.tsx
+++ b/frontend/src/components/tools/changeMetadata/ChangeMetadataSingleStep.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import { Stack, Divider, Text } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { ChangeMetadataParameters, createCustomMetadataFunctions } from "../../../hooks/tools/changeMetadata/useChangeMetadataParameters";
--- a/frontend/src/components/tools/changeMetadata/steps/AdvancedOptionsStep.tsx
+++ b/frontend/src/components/tools/changeMetadata/steps/AdvancedOptionsStep.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import { Stack, Select, Divider } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { ChangeMetadataParameters } from "../../../../hooks/tools/changeMetadata/useChangeMetadataParameters";
--- a/frontend/src/components/tools/changeMetadata/steps/CustomMetadataStep.tsx
+++ b/frontend/src/components/tools/changeMetadata/steps/CustomMetadataStep.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import { Stack, TextInput, Button, Group, Text } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { ChangeMetadataParameters } from "../../../../hooks/tools/changeMetadata/useChangeMetadataParameters";
--- a/frontend/src/components/tools/changeMetadata/steps/DeleteAllStep.tsx
+++ b/frontend/src/components/tools/changeMetadata/steps/DeleteAllStep.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import { Checkbox } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { ChangeMetadataParameters } from "../../../../hooks/tools/changeMetadata/useChangeMetadataParameters";
--- a/frontend/src/components/tools/changeMetadata/steps/DocumentDatesStep.tsx
+++ b/frontend/src/components/tools/changeMetadata/steps/DocumentDatesStep.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import { Stack } from "@mantine/core";
 import { DateTimePicker } from "@mantine/dates";
 import { useTranslation } from "react-i18next";
--- a/frontend/src/components/tools/changeMetadata/steps/StandardMetadataStep.tsx
+++ b/frontend/src/components/tools/changeMetadata/steps/StandardMetadataStep.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import { Stack, TextInput } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { ChangeMetadataParameters } from "../../../../hooks/tools/changeMetadata/useChangeMetadataParameters";
--- a/frontend/src/components/tools/changePermissions/ChangePermissionsSettings.test.tsx
+++ b/frontend/src/components/tools/changePermissions/ChangePermissionsSettings.test.tsx
@ -1,3 +1,4 @@
+import React from 'react';
 import { describe, expect, test, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { MantineProvider } from '@mantine/core';
--- a/frontend/src/components/tools/changePermissions/ChangePermissionsSettings.tsx
+++ b/frontend/src/components/tools/changePermissions/ChangePermissionsSettings.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import { Stack, Checkbox } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { ChangePermissionsParameters } from "../../../hooks/tools/changePermissions/useChangePermissionsParameters";
--- a/frontend/src/components/tools/convert/ConvertToPdfaSettings.tsx
+++ b/frontend/src/components/tools/convert/ConvertToPdfaSettings.tsx
@ -44,7 +44,7 @@ const ConvertToPdfaSettings = ({
          value={parameters.pdfaOptions.outputFormat}
          onChange={(value) => onParameterChange('pdfaOptions', {
            ...parameters.pdfaOptions,
-            outputFormat: value || 'pdfa-1'
+            outputFormat: value ?? 'pdfa-1'
          })}
          data={pdfaFormatOptions}
          disabled={disabled || isChecking}
--- a/frontend/src/components/tools/crop/CropSettings.tsx
+++ b/frontend/src/components/tools/crop/CropSettings.tsx
@ -1,4 +1,4 @@
-import { useMemo, useState, useEffect } from "react";
+import React, { useMemo, useState, useEffect } from "react";
 import { Stack, Text, Box, Group, NumberInput, ActionIcon, Center, Alert } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import RestartAltIcon from "@mui/icons-material/RestartAlt";
@ -48,7 +48,7 @@ const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => {
        return;
      }

-      setThumbnail(selectedStub.thumbnailUrl || null);
+      setThumbnail(selectedStub.thumbnailUrl ?? null);

      try {
        // Get PDF dimensions from the actual file
@ -89,7 +89,7 @@ const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => {
      }
    };

-    loadPDFDimensions();
+    void loadPDFDimensions();
  }, [selectedStub, selectedFile, parameters]);

  // Current crop area
--- a/frontend/src/components/tools/flatten/FlattenSettings.tsx
+++ b/frontend/src/components/tools/flatten/FlattenSettings.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import { Stack, Text, Checkbox } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { FlattenParameters } from "../../../hooks/tools/flatten/useFlattenParameters";
--- a/frontend/src/components/tools/merge/MergeFileSorter.test.tsx
+++ b/frontend/src/components/tools/merge/MergeFileSorter.test.tsx
@ -1,3 +1,4 @@
+import React from 'react';
 import { describe, expect, test, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { MantineProvider } from '@mantine/core';
--- a/frontend/src/components/tools/merge/MergeSettings.test.tsx
+++ b/frontend/src/components/tools/merge/MergeSettings.test.tsx
@ -1,3 +1,4 @@
+import React from 'react';
 import { describe, expect, test, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { MantineProvider } from '@mantine/core';
--- a/frontend/src/components/tools/ocr/LanguagePicker.tsx
+++ b/frontend/src/components/tools/ocr/LanguagePicker.tsx
@ -75,7 +75,7 @@ const LanguagePicker: React.FC<LanguagePickerProps> = ({
      }
    };

-    fetchLanguages();
+    void fetchLanguages();
  }, [languagesEndpoint]);

  // Auto-fill OCR language based on browser language when languages are loaded
--- a/frontend/src/components/tools/ocr/OCRSettings.tsx
+++ b/frontend/src/components/tools/ocr/OCRSettings.tsx
@ -23,7 +23,7 @@ const OCRSettings: React.FC<OCRSettingsProps> = ({
      <Select
        label={t('ocr.settings.ocrMode.label', 'OCR Mode')}
        value={parameters.ocrType}
-        onChange={(value) => onParameterChange('ocrType', value || 'skip-text')}
+        onChange={(value) => onParameterChange('ocrType', value ?? 'skip-text')}
        data={[
          { value: 'skip-text', label: t('ocr.settings.ocrMode.auto', 'Auto (skip text layers)') },
          { value: 'force-ocr', label: t('ocr.settings.ocrMode.force', 'Force (re-OCR all, replace text)') },
--- a/frontend/src/components/tools/redact/RedactAdvancedSettings.test.tsx
+++ b/frontend/src/components/tools/redact/RedactAdvancedSettings.test.tsx
@ -1,3 +1,4 @@
+import React from 'react';
 import { describe, expect, test, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { MantineProvider } from '@mantine/core';
--- a/frontend/src/components/tools/redact/RedactAdvancedSettings.tsx
+++ b/frontend/src/components/tools/redact/RedactAdvancedSettings.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import { Stack, NumberInput, ColorInput, Checkbox } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { RedactParameters } from "../../../hooks/tools/redact/useRedactParameters";
--- a/frontend/src/components/tools/redact/RedactModeSelector.tsx
+++ b/frontend/src/components/tools/redact/RedactModeSelector.tsx
@ -1,3 +1,4 @@
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { RedactMode } from '../../../hooks/tools/redact/useRedactParameters';
 import ButtonSelector from '../../shared/ButtonSelector';
--- a/frontend/src/components/tools/redact/RedactSingleStepSettings.test.tsx
+++ b/frontend/src/components/tools/redact/RedactSingleStepSettings.test.tsx
@ -1,3 +1,4 @@
+import React from 'react';
 import { describe, expect, test, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { MantineProvider } from '@mantine/core';
--- a/frontend/src/components/viewer/SearchInterface.tsx
+++ b/frontend/src/components/viewer/SearchInterface.tsx
@ -80,7 +80,7 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {

  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.key === 'Enter') {
-      handleSearch(searchQuery);
+      void handleSearch(searchQuery);
    } else if (event.key === 'Escape') {
      onClose();
    }
--- a/frontend/src/components/viewer/ThumbnailSidebar.tsx
+++ b/frontend/src/components/viewer/ThumbnailSidebar.tsx
@ -65,7 +65,7 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle }: ThumbnailSide
      }
    };

-    generateThumbnails();
+    void generateThumbnails();
  }, [visible, scrollState.totalPages, thumbnailAPI]);

  const handlePageClick = (pageIndex: number) => {
--- a/frontend/src/contexts/FilesModalContext.tsx
+++ b/frontend/src/contexts/FilesModalContext.tsx
@ -43,7 +43,7 @@ export const FilesModalProvider: React.FC<{ children: React.ReactNode }> = ({ ch
      customHandler(files, insertAfterPage);
    } else {
      // Use normal file handling
-      addFiles(files);
+      void addFiles(files);
    }
    closeFilesModal();
  }, [addFiles, closeFilesModal, insertAfterPage, customHandler]);
@ -69,7 +69,11 @@ export const FilesModalProvider: React.FC<{ children: React.ReactNode }> = ({ ch
    } else {
      // Normal case - use addStirlingFileStubs to preserve metadata
      if (actions.addStirlingFileStubs) {
-        actions.addStirlingFileStubs(stirlingFileStubs, { selectFiles: true });
+        try {
+          await actions.addStirlingFileStubs(stirlingFileStubs, { selectFiles: true });
+        } catch (error) {
+          console.error('Error adding Stirling file stubs:', error);
+        }
      } else {
        console.error('addStirlingFileStubs action not available');
      }
--- a/frontend/src/hooks/tools/automate/useSavedAutomations.ts
+++ b/frontend/src/hooks/tools/automate/useSavedAutomations.ts
@ -26,7 +26,7 @@ export function useSavedAutomations() {
  }, []);

  const refreshAutomations = useCallback(() => {
-    loadSavedAutomations();
+    void loadSavedAutomations();
  }, [loadSavedAutomations]);

  const deleteAutomation = useCallback(async (id: string) => {
@ -80,7 +80,7 @@ export function useSavedAutomations() {

  // Load automations on mount
  useEffect(() => {
-    loadSavedAutomations();
+    void loadSavedAutomations();
  }, [loadSavedAutomations]);

  return {
--- a/frontend/src/hooks/tools/changeMetadata/useMetadataExtraction.ts
+++ b/frontend/src/hooks/tools/changeMetadata/useMetadataExtraction.ts
@ -60,7 +60,7 @@ export const useMetadataExtraction = (params: MetadataExtractionParams) => {
      setIsExtractingMetadata(false);
    };

-    extractMetadata();
+    void extractMetadata();
  }, [selectedFiles, hasExtractedMetadata, params]);

  return {
--- a/frontend/src/hooks/useAppConfig.ts
+++ b/frontend/src/hooks/useAppConfig.ts
@ -65,7 +65,7 @@ export function useAppConfig(): UseAppConfigReturn {
  };

  useEffect(() => {
-    fetchConfig();
+    void fetchConfig();
  }, []);

  return {
--- a/frontend/src/hooks/useEndpointConfig.ts
+++ b/frontend/src/hooks/useEndpointConfig.ts
@ -41,7 +41,7 @@ export function useEndpointEnabled(endpoint: string): {
  };

  useEffect(() => {
-    fetchEndpointStatus();
+    void fetchEndpointStatus();
  }, [endpoint]);

  return {
@ -105,7 +105,7 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
  };

  useEffect(() => {
-    fetchAllEndpointStatuses();
+    void fetchAllEndpointStatuses();
  }, [endpoints.join(',')]); // Re-run when endpoints array changes

  return {
--- a/frontend/src/hooks/useEnhancedProcessedFiles.ts
+++ b/frontend/src/hooks/useEnhancedProcessedFiles.ts
@ -104,7 +104,7 @@ export function useEnhancedProcessedFiles(
      }
    };

-    processFiles();
+    void processFiles();
  }, [activeFiles]); // Only depend on activeFiles to avoid infinite loops

  // Listen for processing completion
--- a/frontend/src/hooks/useIndexedDBThumbnail.ts
+++ b/frontend/src/hooks/useIndexedDBThumbnail.ts
@ -2,7 +2,6 @@ import { useState, useEffect } from "react";
 import { StirlingFileStub } from "../types/fileContext";
 import { useIndexedDB } from "../contexts/IndexedDBContext";
 import { generateThumbnailForFile } from "../utils/thumbnailUtils";
-import { FileId } from "../types/fileContext";


 /**
@ -75,7 +74,7 @@ export function useIndexedDBThumbnail(file: StirlingFileStub | undefined | null)
      }
    }

-    loadThumbnail();
+    void loadThumbnail();
    return () => { cancelled = true; };
  }, [file, file?.thumbnailUrl, file?.id, indexedDB, generating]);

--- a/frontend/src/hooks/usePdfSignatureDetection.ts
+++ b/frontend/src/hooks/usePdfSignatureDetection.ts
@ -58,7 +58,7 @@ export const usePdfSignatureDetection = (files: StirlingFile[]): PdfSignatureDet
      setIsChecking(false);
    };

-    checkForDigitalSignatures();
+    void checkForDigitalSignatures();
  }, [files]);

  return {
--- a/frontend/src/hooks/useProcessedFiles.ts
+++ b/frontend/src/hooks/useProcessedFiles.ts
@ -36,7 +36,7 @@ export function useProcessedFiles(activeFiles: File[]): UseProcessedFilesResult
      setProcessedFiles(newProcessedFiles);
    };

-    checkProcessing();
+    void checkProcessing();

    return unsubscribe;
  }, [activeFiles]);
--- a/frontend/src/i18n.ts
+++ b/frontend/src/i18n.ts
@ -52,7 +52,7 @@ export const supportedLanguages = {
 // RTL languages (based on your existing language.direction property)
 export const rtlLanguages = ['ar-AR', 'fa-IR'];

-i18n
+void i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
--- a/frontend/src/i18n/config.ts
+++ b/frontend/src/i18n/config.ts
@ -2,7 +2,7 @@ import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import Backend from 'i18next-http-backend';

-i18n
+void i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
--- a/frontend/src/services/enhancedPDFProcessingService.ts
+++ b/frontend/src/services/enhancedPDFProcessingService.ts
@ -70,7 +70,7 @@ export class EnhancedPDFProcessingService {
    };

    // Start processing
-    this.startProcessing(file, fileKey, config, analysis.estimatedProcessingTime);
+    await this.startProcessing(file, fileKey, config, analysis.estimatedProcessingTime);
    return null;
  }

--- a/frontend/src/services/fileProcessingService.ts
+++ b/frontend/src/services/fileProcessingService.ts
@ -60,7 +60,7 @@ class FileProcessingService {
    this.processingCache.set(fileId, operation);

    // Clean up cache after completion
-    processingPromise.finally(() => {
+    void processingPromise.finally(() => {
      this.processingCache.delete(fileId);
    });

--- a/frontend/src/services/fileStorage.ts
+++ b/frontend/src/services/fileStorage.ts
@ -78,7 +78,7 @@ class FileStorageService {

        request.onerror = () => {
          console.error('IndexedDB add error:', request.error);
-          reject(new Error(request.error?.message || 'Unknown error occurred'));
+          reject(new Error(request.error?.message ?? 'Unknown error occurred'));
        };
        request.onsuccess = () => {
          resolve();
@ -101,7 +101,7 @@ class FileStorageService {
      const store = transaction.objectStore(this.storeName);
      const request = store.get(id);

-      request.onerror = () => reject(new Error(request.error?.message || 'Unknown error occurred'));
+      request.onerror = () => reject(new Error(request.error?.message ?? 'Unknown error occurred'));
      request.onsuccess = () => {
        const record = request.result as StoredStirlingFileRecord | undefined;
        if (!record) {
@ -142,7 +142,7 @@ class FileStorageService {
      const store = transaction.objectStore(this.storeName);
      const request = store.get(id);

-      request.onerror = () => reject(new Error(request.error?.message || 'Unknown error occurred'));
+      request.onerror = () => reject(new Error(request.error?.message ?? 'Unknown error occurred'));
      request.onsuccess = () => {
        const record = request.result as StoredStirlingFileRecord | undefined;
        if (!record) {
@ -184,7 +184,7 @@ class FileStorageService {
      const request = store.openCursor();
      const stubs: StirlingFileStub[] = [];

-      request.onerror = () => reject(new Error(request.error?.message || 'Unknown error occurred'));
+      request.onerror = () => reject(new Error(request.error?.message ?? 'Unknown error occurred'));
      request.onsuccess = (event) => {
        const cursor = (event.target as IDBRequest).result;
        if (cursor) {
@ -227,7 +227,7 @@ class FileStorageService {
      const request = store.openCursor();
      const leafStubs: StirlingFileStub[] = [];

-      request.onerror = () => reject(new Error(request.error?.message || 'Unknown error occurred'));
+      request.onerror = () => reject(new Error(request.error?.message ?? 'Unknown error occurred'));
      request.onsuccess = (event) => {
        const cursor = (event.target as IDBRequest).result;
        if (cursor) {
@ -269,7 +269,7 @@ class FileStorageService {
      const store = transaction.objectStore(this.storeName);
      const request = store.delete(id);

-      request.onerror = () => reject(new Error(request.error?.message || 'Unknown error occurred'));
+      request.onerror = () => reject(new Error(request.error?.message ?? 'Unknown error occurred'));
      request.onsuccess = () => resolve();
    });
  }
@ -326,7 +326,7 @@ class FileStorageService {
      const store = transaction.objectStore(this.storeName);
      const request = store.clear();

-      request.onerror = () => reject(new Error(request.error?.message || 'Unknown error occurred'));
+      request.onerror = () => reject(new Error(request.error?.message ?? 'Unknown error occurred'));
      request.onsuccess = () => resolve();
    });
  }
@ -384,7 +384,7 @@ class FileStorageService {
        const store = transaction.objectStore(this.storeName);
        const request = store.get(id);

-        request.onerror = () => reject(new Error(request.error?.message || 'Unknown error occurred'));
+        request.onerror = () => reject(new Error(request.error?.message ?? 'Unknown error occurred'));
        request.onsuccess = () => {
          const record = request.result as StoredStirlingFileRecord | undefined;
          if (record) {
@ -415,7 +415,7 @@ class FileStorageService {
      const record = await new Promise<StoredStirlingFileRecord | undefined>((resolve, reject) => {
        const request = store.get(fileId);
        request.onsuccess = () => resolve(request.result);
-        request.onerror = () => reject(new Error(request.error?.message || 'Unknown error occurred'));
+        request.onerror = () => reject(new Error(request.error?.message ?? 'Unknown error occurred'));
      });

      if (!record) {
@ -428,7 +428,7 @@ class FileStorageService {
      await new Promise<void>((resolve, reject) => {
        const request = store.put(record);
        request.onsuccess = () => resolve();
-        request.onerror = () => reject(new Error(request.error?.message || 'Unknown error occurred'));
+        request.onerror = () => reject(new Error(request.error?.message ?? 'Unknown error occurred'));
      });

      return true;
@ -451,7 +451,7 @@ class FileStorageService {
      const record = await new Promise<StoredStirlingFileRecord | undefined>((resolve, reject) => {
        const request = store.get(fileId);
        request.onsuccess = () => resolve(request.result);
-        request.onerror = () => reject(new Error(request.error?.message || 'Unknown error occurred'));
+        request.onerror = () => reject(new Error(request.error?.message ?? 'Unknown error occurred'));
      });

      if (!record) {
@ -464,7 +464,7 @@ class FileStorageService {
      await new Promise<void>((resolve, reject) => {
        const request = store.put(record);
        request.onsuccess = () => resolve();
-        request.onerror = () => reject(new Error(request.error?.message || 'Unknown error occurred'));
+        request.onerror = () => reject(new Error(request.error?.message ?? 'Unknown error occurred'));
      });

      return true;
--- a/frontend/src/services/indexedDBManager.ts
+++ b/frontend/src/services/indexedDBManager.ts
@ -67,7 +67,7 @@ class IndexedDBManager {

      request.onerror = () => {
        console.error(`Failed to open ${config.name}:`, request.error);
-        reject(new Error(request.error?.message || 'Unknown error occurred while opening the database'));
+        reject(new Error(request.error?.message ?? 'Unknown error occurred while opening the database'));
      };

      request.onsuccess = () => {
@ -257,7 +257,7 @@ class IndexedDBManager {
    return new Promise((resolve, reject) => {
      const deleteRequest = indexedDB.deleteDatabase(name);

-      deleteRequest.onerror = () => reject(new Error(deleteRequest.error?.message || 'Unknown error occurred while deleting the database'));
+      deleteRequest.onerror = () => reject(new Error(deleteRequest.error?.message ?? 'Unknown error occurred while deleting the database'));
      deleteRequest.onsuccess = () => {
        console.log(`Deleted database: ${name}`);
        resolve();
--- a/frontend/src/services/pdfProcessingService.ts
+++ b/frontend/src/services/pdfProcessingService.ts
@ -35,7 +35,7 @@ export class PDFProcessingService {
    }

    // Start processing
-    this.startProcessing(file, fileKey);
+    void this.startProcessing(file, fileKey);
    return null;
  }

--- a/frontend/src/services/pdfWorkerManager.ts
+++ b/frontend/src/services/pdfWorkerManager.ts
@ -94,7 +94,7 @@ class PDFWorkerManager {
      // If document creation fails, make sure to clean up the loading task
      if (loadingTask) {
        try {
-          loadingTask.destroy();
+          await loadingTask.destroy();
        } catch {
          // Ignore errors
        }
@ -109,7 +109,7 @@ class PDFWorkerManager {
  destroyDocument(pdf: PDFDocumentProxy): void {
    if (this.activeDocuments.has(pdf)) {
      try {
-        pdf.destroy();
+        void pdf.destroy();
        this.activeDocuments.delete(pdf);
        this.workerCount = Math.max(0, this.workerCount - 1);
      } catch {
@ -167,7 +167,7 @@ class PDFWorkerManager {
    // Force destroy all documents
    this.activeDocuments.forEach(pdf => {
      try {
-        pdf.destroy();
+        void pdf.destroy();
      } catch {
        // Ignore errors
      }
--- a/frontend/src/tools/AdjustPageScale.tsx
+++ b/frontend/src/tools/AdjustPageScale.tsx
@ -52,7 +52,7 @@ const AdjustPageScale = (props: BaseToolProps) => {
      title: t("adjustPageScale.title", "Page Scale Results"),
      onFileClick: base.handleThumbnailClick,
      onUndo: () => {
-        base.handleUndo();
+        void base.handleUndo();
      },
    },
  });
--- a/frontend/src/tools/Crop.tsx
+++ b/frontend/src/tools/Crop.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 import CropSettings from "../components/tools/crop/CropSettings";
--- a/frontend/src/tools/RemovePassword.tsx
+++ b/frontend/src/tools/RemovePassword.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 import RemovePasswordSettings from "../components/tools/removePassword/RemovePasswordSettings";
--- a/frontend/src/tools/Rotate.tsx
+++ b/frontend/src/tools/Rotate.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 import RotateSettings from "../components/tools/rotate/RotateSettings";