+ {pageResults.map(({ result, originalIndex }, idx) => (
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/components/viewer/EmbedPdfViewer.tsx b/frontend/src/components/viewer/EmbedPdfViewer.tsx
new file mode 100644
index 000000000..ac61bca5b
--- /dev/null
+++ b/frontend/src/components/viewer/EmbedPdfViewer.tsx
@@ -0,0 +1,233 @@
+import React from 'react';
+import { Box, Center, Text, ActionIcon } from '@mantine/core';
+import { useMantineTheme, useMantineColorScheme } from '@mantine/core';
+import CloseIcon from '@mui/icons-material/Close';
+
+import { useFileState } from "../../contexts/FileContext";
+import { useFileWithUrl } from "../../hooks/useFileWithUrl";
+import { useViewer } from "../../contexts/ViewerContext";
+import { LocalEmbedPDF } from './LocalEmbedPDF';
+import { PdfViewerToolbar } from './PdfViewerToolbar';
+import { ThumbnailSidebar } from './ThumbnailSidebar';
+
+export interface EmbedPdfViewerProps {
+ sidebarsVisible: boolean;
+ setSidebarsVisible: (v: boolean) => void;
+ onClose?: () => void;
+ previewFile?: File | null;
+}
+
+const EmbedPdfViewerContent = ({
+ sidebarsVisible: _sidebarsVisible,
+ setSidebarsVisible: _setSidebarsVisible,
+ onClose,
+ previewFile,
+}: EmbedPdfViewerProps) => {
+ const theme = useMantineTheme();
+ const { colorScheme: _colorScheme } = useMantineColorScheme();
+ const viewerRef = React.useRef
+ {result.rects.map((rect, rectIdx) => (
+
+ ))}
+
+ ))}
+
+
+ )}
+
+
+ {/* Thumbnail Sidebar */}
+
+ {
+ // Page navigation handled by scrollActions
+ console.log('Navigate to page:', page);
+ }}
+ dualPage={spreadState.isDualPage}
+ onDualPageToggle={() => {
+ spreadActions.toggleSpreadMode();
+ }}
+ currentZoom={zoomState.zoomPercent}
+ />
+
+ 📄
+ ❌
+
+
+
+
+ (
+
+
+
+
+ )}
+ />
+
+
+
+
+ );
+}
diff --git a/frontend/src/components/viewer/PanAPIBridge.tsx b/frontend/src/components/viewer/PanAPIBridge.tsx
new file mode 100644
index 000000000..26e8c73ee
--- /dev/null
+++ b/frontend/src/components/viewer/PanAPIBridge.tsx
@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+import { usePan } from '@embedpdf/plugin-pan/react';
+import { useViewer } from '../../contexts/ViewerContext';
+
+/**
+ * Component that runs inside EmbedPDF context and updates pan state in ViewerContext
+ */
+export function PanAPIBridge() {
+ const { provides: pan, isPanning } = usePan();
+ const { registerBridge } = useViewer();
+
+ // Store state locally
+ const [_localState, setLocalState] = useState({
+ isPanning: false
+ });
+
+ useEffect(() => {
+ if (pan) {
+ // Update local state
+ const newState = {
+ isPanning
+ };
+ setLocalState(newState);
+
+ // Register this bridge with ViewerContext
+ registerBridge('pan', {
+ state: newState,
+ api: {
+ enable: () => {
+ pan.enablePan();
+ },
+ disable: () => {
+ pan.disablePan();
+ },
+ toggle: () => {
+ pan.togglePan();
+ },
+ makePanDefault: () => pan.makePanDefault(),
+ }
+ });
+ }
+ }, [pan, isPanning]);
+
+ return null;
+}
diff --git a/frontend/src/components/viewer/PdfViewerToolbar.tsx b/frontend/src/components/viewer/PdfViewerToolbar.tsx
new file mode 100644
index 000000000..f4e64d5a5
--- /dev/null
+++ b/frontend/src/components/viewer/PdfViewerToolbar.tsx
@@ -0,0 +1,232 @@
+import React, { useState, useEffect } from 'react';
+import { Button, Paper, Group, NumberInput } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { useViewer } from '../../contexts/ViewerContext';
+import FirstPageIcon from '@mui/icons-material/FirstPage';
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import LastPageIcon from '@mui/icons-material/LastPage';
+import DescriptionIcon from '@mui/icons-material/Description';
+import ViewWeekIcon from '@mui/icons-material/ViewWeek';
+
+interface PdfViewerToolbarProps {
+ // Page navigation props (placeholders for now)
+ 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;
+}
+
+export function PdfViewerToolbar({
+ currentPage = 1,
+ totalPages: _totalPages = 1,
+ onPageChange,
+ dualPage = false,
+ onDualPageToggle,
+ currentZoom: _currentZoom = 100,
+}: 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);
+ const [displayZoomPercent, setDisplayZoomPercent] = useState(zoomState.zoomPercent || 140);
+
+ // Register for immediate scroll updates and sync with actual scroll state
+ useEffect(() => {
+ registerImmediateScrollUpdate((currentPage, _totalPages) => {
+ setPageInput(currentPage);
+ });
+ setPageInput(scrollState.currentPage);
+ }, [registerImmediateScrollUpdate]);
+
+ // Register for immediate zoom updates and sync with actual zoom state
+ useEffect(() => {
+ registerImmediateZoomUpdate(setDisplayZoomPercent);
+ setDisplayZoomPercent(zoomState.zoomPercent || 140);
+ }, [zoomState.zoomPercent, registerImmediateZoomUpdate]);
+
+ const handleZoomOut = () => {
+ zoomActions.zoomOut();
+ };
+
+ const handleZoomIn = () => {
+ zoomActions.zoomIn();
+ };
+
+ const handlePageNavigation = (page: number) => {
+ scrollActions.scrollToPage(page);
+ if (onPageChange) {
+ onPageChange(page);
+ }
+ setPageInput(page);
+ };
+
+ const handleFirstPage = () => {
+ scrollActions.scrollToFirstPage();
+ };
+
+ const handlePreviousPage = () => {
+ scrollActions.scrollToPreviousPage();
+ };
+
+ const handleNextPage = () => {
+ scrollActions.scrollToNextPage();
+ };
+
+ const handleLastPage = () => {
+ scrollActions.scrollToLastPage();
+ };
+
+ return (
+ e.preventDefault()}
+ onDrop={(e) => e.preventDefault()}
+ onDragOver={(e) => e.preventDefault()}
+ >
+ {/* High-resolution tile layer */}
+
+
+ {Array.from({ length: scrollState.totalPages }, (_, pageIndex) => (
+ handlePageClick(pageIndex)}
+ style={{
+ cursor: 'pointer',
+ borderRadius: '8px',
+ padding: '8px',
+ backgroundColor: scrollState.currentPage === pageIndex + 1
+ ? 'var(--color-primary-100)'
+ : 'transparent',
+ border: scrollState.currentPage === pageIndex + 1
+ ? '2px solid var(--color-primary-500)'
+ : '2px solid transparent',
+ transition: 'all 0.2s ease',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ gap: '8px'
+ }}
+ onMouseEnter={(e) => {
+ if (scrollState.currentPage !== pageIndex + 1) {
+ e.currentTarget.style.backgroundColor = 'var(--hover-bg)';
+ }
+ }}
+ onMouseLeave={(e) => {
+ if (scrollState.currentPage !== pageIndex + 1) {
+ e.currentTarget.style.backgroundColor = 'transparent';
+ }
+ }}
+ >
+ {/* Thumbnail Image */}
+ {thumbnails[pageIndex] && thumbnails[pageIndex] !== 'error' ? (
+ 
+ ) : thumbnails[pageIndex] === 'error' ? (
+
+ ))}
+
+
+ Failed
+
+ ) : (
+
+ Loading...
+
+ )}
+
+ {/* Page Number */}
+
+ Page {pageIndex + 1}
+
+
- {isVisible ? (
- Page {pageIndex + 1}
- )}
-
- );
-};
+import React from 'react';
+import EmbedPdfViewer from './EmbedPdfViewer';
export interface ViewerProps {
sidebarsVisible: boolean;
setSidebarsVisible: (v: boolean) => void;
onClose?: () => void;
- previewFile: File | null; // For preview mode - bypasses context
+ previewFile?: File | null;
}
-const Viewer = ({
- onClose,
- previewFile,
-}: ViewerProps) => {
- const { t } = useTranslation();
- const theme = useMantineTheme();
-
- // Get current file from FileContext
- const { selectors } = useFileState();
-
- const activeFiles = selectors.getFiles();
-
- // Tab management for multiple files
- const [activeTab, setActiveTab] = useState
-
- Loading page {pageIndex + 1}...
-
- ) : (
-
-
- ) : (
-
-
-
-
- {
- const page = Number(value);
- if (!isNaN(page) && page >= 1 && page <= numPages) {
- scrollToPage(page);
- }
- }}
- min={1}
- max={numPages}
- hideControls
- styles={{
- input: { width: 48, textAlign: "center", fontWeight: 500, fontSize: 16},
- }}
- />
-
- / {numPages}
-
-
-
-
-
-
- {Math.round(zoom * 100)}%
-
-
-
-
-