Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2025-11-16 01:21:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor(frontend): remove unused React default imports (#4529)

Browse Source 
## 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>
This commit is contained in:
Ludy 2025-09-29 14:01:09 +02:00 committed by GitHub
parent d4985f57d4
commit 02189a67bd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
44 changed files with 90 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/App.tsx
View File

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

2
frontend/src/components/shared/FilePickerModal.tsx
View File

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

2
frontend/src/components/shared/FileUploadButton.tsx
View File

@ -1,4 +1,4 @@
import React, { useRef } from "react";
import { useRef } from "react";
import { FileButton, Button } from "@mantine/core";
import { useTranslation } from "react-i18next";

1
frontend/src/components/shared/Footer.tsx
View File

@ -1,5 +1,4 @@
import { Flex } from '@mantine/core';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { useCookieConsent } from '../../hooks/useCookieConsent';

11
frontend/src/components/shared/MultiSelectControls.tsx
View File

@ -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;
export default MultiSelectControls;

1
frontend/src/components/shared/NavigationWarningModal.tsx
View File

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

2
frontend/src/components/shared/RainbowThemeProvider.tsx
View File

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

11
frontend/src/components/toast/ToastRenderer.tsx
View File

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

4
frontend/src/components/tools/ToolRenderer.tsx
View File

@ -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}

5
frontend/src/components/tools/addWatermark/AddWatermarkSingleStepSettings.tsx
View File

@ -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;
export default AddWatermarkSingleStepSettings;

3
frontend/src/components/tools/addWatermark/WatermarkFormatting.tsx
View File

@ -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;
export default WatermarkFormatting;

1
frontend/src/components/tools/addWatermark/WatermarkImageFile.tsx
View File

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

3
frontend/src/components/tools/addWatermark/WatermarkStyleSettings.tsx
View File

@ -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;
export default WatermarkStyleSettings;

3
frontend/src/components/tools/addWatermark/WatermarkTextStyle.tsx
View File

@ -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")}

9
frontend/src/components/tools/automate/AutomationSelection.tsx
View File

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

4
frontend/src/components/tools/bookletImposition/BookletImpositionSettings.tsx
View File

@ -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;
export default BookletImpositionSettings;

2
frontend/src/components/tools/compress/CompressSettings.tsx
View File

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

1
frontend/src/components/tools/convert/ConvertFromEmailSettings.tsx
View File

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

1
frontend/src/components/tools/convert/ConvertFromImageSettings.tsx
View File

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

1
frontend/src/components/tools/convert/ConvertFromWebSettings.tsx
View File

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

2
frontend/src/components/tools/convert/ConvertSettings.tsx
View File

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

1
frontend/src/components/tools/convert/ConvertToImageSettings.tsx
View File

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

1
frontend/src/components/tools/convert/ConvertToPdfaSettings.tsx
View File

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

36
frontend/src/components/tools/convert/GroupedFormatDropdown.tsx
View File

@ -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;
export default GroupedFormatDropdown;

1
frontend/src/components/tools/pageLayout/PageLayoutSettings.tsx
View File

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

3
frontend/src/components/tools/reorganizePages/ReorganizePagesSettings.tsx
View File

@ -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)',

3
frontend/src/components/tools/replaceColor/ReplaceColorSettings.tsx
View File

@ -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;
export default ReplaceColorSettings;

3
frontend/src/components/tools/shared/FileMetadata.tsx
View File

@ -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;
export default FileMetadata;

1
frontend/src/components/tools/shared/NavigationControls.tsx
View File

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

20
frontend/src/components/tools/shared/NumberInputWithUnit.tsx
View File

@ -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;
export default NumberInputWithUnit;

1
frontend/src/components/tools/shared/OperationButton.tsx
View File

@ -1,4 +1,3 @@
import React from 'react';
import { Button } from '@mantine/core';
import { useTranslation } from 'react-i18next';

2
frontend/src/components/tools/shared/ResultsPreview.tsx
View File

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

4
frontend/src/components/tools/sign/SignSettings.tsx
View File

@ -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;
export default SignSettings;

2
frontend/src/components/tools/toolPicker/ToolSearch.tsx
View File

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

20
frontend/src/components/viewer/CustomSearchLayer.tsx
View File

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

4
frontend/src/components/viewer/LocalEmbedPDFWithAnnotations.tsx
View File

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

12
frontend/src/components/viewer/PdfViewerToolbar.tsx
View File

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

2
frontend/src/components/viewer/ThumbnailSidebar.tsx
View File

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

3
frontend/src/components/viewer/Viewer.tsx
View File

@ -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;
export default Viewer;

2
frontend/src/contexts/FileContext.tsx
View File

@ -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,

6
frontend/src/contexts/SidebarContext.tsx
View File

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

2
frontend/src/tools/OCR.tsx
View File

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

1
frontend/src/tools/RemovePages.tsx
View File

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

2
frontend/src/tools/ReorganizePages.tsx
View File

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