+ {thumbnailData?.src ? (
+ 
+ ) : (
+
+ );
+};
+
const DragDropGrid =
+ Moving page...
+
+ )}
+
- {rowVirtualizer.getVirtualItems().map((virtualRow) => {
- const startIndex = virtualRow.index * itemsPerRow;
- const endIndex = Math.min(startIndex + itemsPerRow, items.length);
- const rowItems = items.slice(startIndex, endIndex);
+
+
+ {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+ const startIndex = virtualRow.index * itemsPerRow;
+ const endIndex = Math.min(startIndex + itemsPerRow, filteredItems.length);
+ const rowItems = filteredItems.slice(startIndex, endIndex);
- return (
-
-
+ );
+ })}
+
+ return (
- );
- })}
-
- {rowItems.map((item, itemIndex) => {
- const actualIndex = startIndex + itemIndex;
- return (
-
- {/* Item */}
- {renderItem(item, actualIndex, itemRefs)}
-
- );
- })}
+
-
+ {rowItems.map((item, itemIndex) => {
+ const actualIndex = startIndex + itemIndex;
+ const originalIndex = filteredToOriginalIndex[actualIndex];
+ return (
+
+ {
+ const node = renderItem(...args);
+ const style = getDropIndicatorStyle(item.id);
+ return
+ );
+ })}
+
+ {dropTargetId && dropHint.hoveredId === dropTargetId && dropHint.dropSide && (
+
+ )}
+
{node}
;
+ }}
+ />
+
+ {/* Split Lines Overlay */}
+
{(() => {
// Calculate remToPx once outside the map to avoid layout thrashing
const containerWidth = containerDimensions.width;
@@ -757,7 +1118,7 @@ const PageEditor = ({
const gridOffset = Math.max(0, (containerWidth - gridWidth) / 2);
const leftPosition = gridOffset + col * itemWithGap + ITEM_WIDTH + (ITEM_GAP / 2);
- const topPosition = row * ITEM_HEIGHT + (ITEM_HEIGHT * 0.05); // Center vertically (5% offset since page is 90% height)
+ const topPosition = row * ITEM_HEIGHT + (ITEM_HEIGHT * 0.05) + ITEM_GAP; // Center vertically (5% offset since page is 90% height) + gap offset
return (
(
- {}}
- onSetMovingPage={setMovingPage}
- onDeletePage={handleDeletePage}
- createRotateCommand={createRotateCommand}
- createDeleteCommand={createDeleteCommand}
- createSplitCommand={createSplitCommand}
- pdfDocument={displayDocument}
- setPdfDocument={setEditedDocument}
- splitPositions={splitPositions}
- onInsertFiles={handleInsertFiles}
- />
- )}
+ zoomLevel={zoomLevel}
+ getThumbnailData={(pageId) => {
+ const page = displayDocument.pages.find(p => p.id === pageId);
+ if (!page?.thumbnail) return null;
+ return {
+ src: page.thumbnail,
+ rotation: page.rotation || 0
+ };
+ }}
+ renderItem={(page, index, refs, boxSelectedIds, clearBoxSelection, _getBoxSelection, _activeId, activeDragIds, justMoved, _isOver, dragHandleProps, zoomLevel) => {
+ const fileColorIndex = page.originalFileId ? fileColorIndexMap.get(page.originalFileId) ?? 0 : 0;
+ const isBoxSelected = boxSelectedIds.includes(page.id);
+ return (
+ {}}
+ onSetMovingPage={setMovingPage}
+ onDeletePage={handleDeletePage}
+ createRotateCommand={createRotateCommand}
+ createDeleteCommand={createDeleteCommand}
+ createSplitCommand={createSplitCommand}
+ pdfDocument={displayDocument}
+ setPdfDocument={setEditedDocument}
+ splitPositions={splitPositions}
+ onInsertFiles={handleInsertFiles}
+ zoomLevel={zoomLevel}
+ />
+ );
+ }}
/>
-
)}
@@ -825,6 +1202,7 @@ const PageEditor = ({
await onExportAll();
}}
/>
+
);
};
diff --git a/frontend/src/core/components/pageEditor/PageEditorControls.tsx b/frontend/src/core/components/pageEditor/PageEditorControls.tsx
index 3e36b06b6..7e16064a9 100644
--- a/frontend/src/core/components/pageEditor/PageEditorControls.tsx
+++ b/frontend/src/core/components/pageEditor/PageEditorControls.tsx
@@ -138,12 +138,12 @@ const PageEditorControls = ({
{/* Undo/Redo */}
-
+
-
+
@@ -156,7 +156,7 @@ const PageEditorControls = ({
onClick={() => onRotate('left')}
disabled={selectedPageIds.length === 0}
variant="subtle"
- style={{ color: 'var(--mantine-color-dimmed)' }}
+ style={{ color: selectedPageIds.length > 0 ? 'var(--right-rail-icon)' : 'var(--right-rail-icon-disabled)' }}
radius="md"
size="lg"
>
@@ -168,7 +168,7 @@ const PageEditorControls = ({
onClick={() => onRotate('right')}
disabled={selectedPageIds.length === 0}
variant="subtle"
- style={{ color: 'var(--mantine-color-dimmed)' }}
+ style={{ color: selectedPageIds.length > 0 ? 'var(--right-rail-icon)' : 'var(--right-rail-icon-disabled)' }}
radius="md"
size="lg"
>
@@ -180,7 +180,7 @@ const PageEditorControls = ({
onClick={onDelete}
disabled={selectedPageIds.length === 0}
variant="subtle"
- style={{ color: 'var(--mantine-color-dimmed)' }}
+ style={{ color: selectedPageIds.length > 0 ? 'var(--right-rail-icon)' : 'var(--right-rail-icon-disabled)' }}
radius="md"
size="lg"
>
@@ -192,7 +192,7 @@ const PageEditorControls = ({
onClick={onSplit}
disabled={selectedPageIds.length === 0}
variant="subtle"
- style={{ color: 'var(--mantine-color-dimmed)' }}
+ style={{ color: selectedPageIds.length > 0 ? 'var(--right-rail-icon)' : 'var(--right-rail-icon-disabled)' }}
radius="md"
size="lg"
>
@@ -204,7 +204,7 @@ const PageEditorControls = ({
onClick={onPageBreak}
disabled={selectedPageIds.length === 0}
variant="subtle"
- style={{ color: 'var(--mantine-color-dimmed)' }}
+ style={{ color: selectedPageIds.length > 0 ? 'var(--right-rail-icon)' : 'var(--right-rail-icon-disabled)' }}
radius="md"
size="lg"
>
diff --git a/frontend/src/core/components/pageEditor/PageThumbnail.tsx b/frontend/src/core/components/pageEditor/PageThumbnail.tsx
index f0124b2c6..f5586c394 100644
--- a/frontend/src/core/components/pageEditor/PageThumbnail.tsx
+++ b/frontend/src/core/components/pageEditor/PageThumbnail.tsx
@@ -8,12 +8,13 @@ import RotateRightIcon from '@mui/icons-material/RotateRight';
import DeleteIcon from '@mui/icons-material/Delete';
import ContentCutIcon from '@mui/icons-material/ContentCut';
import AddIcon from '@mui/icons-material/Add';
-import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
import { PDFPage, PDFDocument } from '@app/types/pageEditor';
import { useThumbnailGeneration } from '@app/hooks/useThumbnailGeneration';
import { useFilesModalContext } from '@app/contexts/FilesModalContext';
+import { getFileColorWithOpacity } from '@app/components/pageEditor/fileColors';
import styles from '@app/components/pageEditor/PageEditor.module.css';
import HoverActionMenu, { HoverAction } from '@app/components/shared/HoverActionMenu';
+import { StirlingFileStub } from '@app/types/fileContext';
interface PageThumbnailProps {
@@ -21,11 +22,17 @@ interface PageThumbnailProps {
index: number;
totalPages: number;
originalFile?: File;
+ fileColorIndex: number;
selectedPageIds: string[];
selectionMode: boolean;
movingPage: number | null;
isAnimating: boolean;
+ isBoxSelected?: boolean;
+ clearBoxSelection?: () => void;
+ activeDragIds: string[];
+ justMoved?: boolean;
pageRefs: React.MutableRefObject>;
+ dragHandleProps?: any;
onReorderPages: (sourcePageNumber: number, targetIndex: number, selectedPageIds?: string[]) => void;
onTogglePage: (pageId: string) => void;
onAnimateReorder: () => void;
@@ -39,7 +46,8 @@ interface PageThumbnailProps {
pdfDocument: PDFDocument;
setPdfDocument: (doc: PDFDocument) => void;
splitPositions: Set;
- onInsertFiles?: (files: File[], insertAfterPage: number) => void;
+ onInsertFiles?: (files: File[] | StirlingFileStub[], insertAfterPage: number, isFromStorage?: boolean) => void;
+ zoomLevel?: number;
}
const PageThumbnail: React.FC = ({
@@ -47,11 +55,16 @@ const PageThumbnail: React.FC = ({
index,
totalPages,
originalFile,
+ fileColorIndex,
selectedPageIds,
selectionMode,
movingPage,
isAnimating,
+ isBoxSelected = false,
+ clearBoxSelection,
+ activeDragIds,
pageRefs,
+ dragHandleProps,
onReorderPages,
onTogglePage,
onExecuteCommand,
@@ -63,17 +76,22 @@ const PageThumbnail: React.FC = ({
pdfDocument,
splitPositions,
onInsertFiles,
+ zoomLevel = 1.0,
+ justMoved = false,
}: PageThumbnailProps) => {
- const [isDragging, setIsDragging] = useState(false);
const [isMouseDown, setIsMouseDown] = useState(false);
const [mouseStartPos, setMouseStartPos] = useState<{x: number, y: number} | null>(null);
const [isHovered, setIsHovered] = useState(false);
const isMobile = useMediaQuery('(max-width: 1024px)');
- const dragElementRef = useRef(null);
+ const lastClickTimeRef = useRef(0);
const [thumbnailUrl, setThumbnailUrl] = useState(page.thumbnail);
- const { getThumbnailFromCache, requestThumbnail } = useThumbnailGeneration();
+ const elementRef = useRef(null);
+ const { getThumbnailFromCache, requestThumbnail} = useThumbnailGeneration();
const { openFilesModal } = useFilesModalContext();
+ // Check if this page is currently being dragged
+ const isDragging = activeDragIds.includes(page.id);
+
// Calculate document aspect ratio from first non-blank page
const getDocumentAspectRatio = useCallback(() => {
// Find first non-blank page with a thumbnail to get aspect ratio
@@ -130,63 +148,22 @@ const PageThumbnail: React.FC = ({
};
}, [page.id, page.thumbnail, originalFile, getThumbnailFromCache, requestThumbnail]);
- const pageElementRef = useCallback((element: HTMLDivElement | null) => {
+ // Merge refs - combine our ref tracking with dnd-kit's ref
+ const mergedRef = useCallback((element: HTMLDivElement | null) => {
+ // Track in our refs map
+ elementRef.current = element;
if (element) {
pageRefs.current.set(page.id, element);
- dragElementRef.current = element;
-
- const dragCleanup = draggable({
- element,
- getInitialData: () => ({
- pageNumber: page.pageNumber,
- pageId: page.id,
- selectedPageIds: [page.id]
- }),
- onDragStart: () => {
- setIsDragging(true);
- },
- onDrop: ({ location }) => {
- setIsDragging(false);
-
- if (location.current.dropTargets.length === 0) {
- return;
- }
-
- const dropTarget = location.current.dropTargets[0];
- const targetData = dropTarget.data;
-
- if (targetData.type === 'page') {
- const targetPageNumber = targetData.pageNumber as number;
- const targetIndex = pdfDocument.pages.findIndex(p => p.pageNumber === targetPageNumber);
- if (targetIndex !== -1) {
- onReorderPages(page.pageNumber, targetIndex, undefined);
- }
- }
- }
- });
-
- element.style.cursor = 'grab';
-
- const dropCleanup = dropTargetForElements({
- element,
- getData: () => ({
- type: 'page',
- pageNumber: page.pageNumber
- }),
- onDrop: (_) => {}
- });
-
- (element as any).__dragCleanup = () => {
- dragCleanup();
- dropCleanup();
- };
} else {
pageRefs.current.delete(page.id);
- if (dragElementRef.current && (dragElementRef.current as any).__dragCleanup) {
- (dragElementRef.current as any).__dragCleanup();
- }
}
- }, [page.id, page.pageNumber, pageRefs, selectionMode, selectedPageIds, pdfDocument.pages, onReorderPages]);
+
+ // Call dnd-kit's ref if provided
+ if (dragHandleProps?.ref) {
+ dragHandleProps.ref(element);
+ }
+ }, [page.id, pageRefs, dragHandleProps]);
+
// DOM command handlers
const handleRotateLeft = useCallback((e: React.MouseEvent) => {
@@ -230,9 +207,9 @@ const PageThumbnail: React.FC = ({
// Open file manager modal with custom handler for page insertion
openFilesModal({
insertAfterPage: page.pageNumber,
- customHandler: (files: File[], insertAfterPage?: number) => {
+ customHandler: (files: File[] | StirlingFileStub[], insertAfterPage?: number, isFromStorage?: boolean) => {
if (insertAfterPage !== undefined) {
- onInsertFiles(files, insertAfterPage);
+ onInsertFiles(files, insertAfterPage, isFromStorage);
}
}
});
@@ -262,14 +239,28 @@ const PageThumbnail: React.FC = ({
const deltaY = Math.abs(e.clientY - mouseStartPos.y);
const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
- // If mouse moved less than 5 pixels, consider it a click (not a drag)
- if (distance < 5 && !isDragging) {
- onTogglePage(page.id);
+ // If mouse moved less than 2 pixels, consider it a click (not a drag)
+ if (distance < 2 && !isDragging) {
+ // Prevent rapid double-clicks from causing issues (debounce with 100ms threshold)
+ const now = Date.now();
+ if (now - lastClickTimeRef.current > 100) {
+ lastClickTimeRef.current = now;
+
+ // Clear box selection when clicking on a non-selected page
+ if (!isBoxSelected && clearBoxSelection) {
+ clearBoxSelection();
+ }
+
+ // Don't toggle page selection if it's box-selected (just keep the box selection)
+ if (!isBoxSelected) {
+ onTogglePage(page.id);
+ }
+ }
}
setIsMouseDown(false);
setMouseStartPos(null);
- }, [isMouseDown, mouseStartPos, isDragging, page.id, onTogglePage]);
+ }, [isMouseDown, mouseStartPos, isDragging, page.id, isBoxSelected, clearBoxSelection, onTogglePage]);
const handleMouseLeave = useCallback(() => {
setIsMouseDown(false);
@@ -277,6 +268,11 @@ const PageThumbnail: React.FC = ({
setIsHovered(false);
}, []);
+ const fileColorBorder = page.isBlankPage ? 'transparent' : getFileColorWithOpacity(fileColorIndex, 0.3);
+
+ // Spread dragHandleProps but use our merged ref
+ const { ref: _, ...restDragProps } = dragHandleProps || {};
+
// Build hover menu actions
const hoverActions = useMemo(() => [
{
@@ -345,7 +341,8 @@ const PageThumbnail: React.FC = ({
return (
(null);
+ const pageEditorState = usePageEditorDropdownState();
+
const handleViewChange = useCallback((view: string) => {
if (!isValidWorkbench(view)) {
return;
@@ -165,12 +168,24 @@ const TopControls = ({
});
}, [setCurrentView]);
+ // Memoize view options to prevent SegmentedControl re-renders
+ const viewOptions = useMemo(() => createViewOptions(
+ currentView,
+ switchingTo,
+ activeFiles,
+ currentFileIndex,
+ onFileSelect,
+ pageEditorState,
+ customViews
+ ), [currentView, switchingTo, activeFiles, currentFileIndex, onFileSelect, pageEditorState, customViews]);
+
return (
= ({
!rounded-lg
${selectionMode ? 'cursor-pointer' : 'cursor-grab'}
select-none
- w-[20rem]
- h-[20rem]
flex items-center justify-center
flex-shrink-0
shadow-sm
hover:shadow-md
transition-all
relative
- ${selectionMode
- ? 'bg-white hover:bg-gray-50'
- : 'bg-white hover:bg-gray-50'}
${isDragging ? 'opacity-50 scale-95' : ''}
${movingPage === page.pageNumber ? 'page-moving' : ''}
+ ${isBoxSelected ? 'ring-4 ring-blue-400 ring-offset-2' : ''}
`}
style={{
- transition: isAnimating ? 'none' : 'transform 0.2s ease-in-out'
+ width: `calc(20rem * ${zoomLevel})`,
+ height: `calc(20rem * ${zoomLevel})`,
+ transition: isAnimating ? 'none' : 'transform 0.2s ease-in-out',
+ zIndex: isHovered ? 50 : 1,
+ ...(isBoxSelected && {
+ boxShadow: '0 0 0 4px rgba(59, 130, 246, 0.5)',
+ }),
}}
- draggable={false}
onMouseDown={handleMouseDown}
onMouseUp={handleMouseUp}
onMouseEnter={() => setIsHovered(true)}
@@ -413,12 +411,13 @@ const PageThumbnail: React.FC = ({
) : thumbnailUrl ? (
![]()
= ({
position: 'absolute',
top: 5,
left: 5,
- background: page.isBlankPage ? 'rgba(255, 165, 0, 0.8)' : 'rgba(162, 201, 255, 0.8)',
+ background: 'rgba(162, 201, 255, 0.8)',
padding: '6px 8px',
borderRadius: 8,
zIndex: 2,
diff --git a/frontend/src/core/components/pageEditor/commands/pageCommands.ts b/frontend/src/core/components/pageEditor/commands/pageCommands.ts
index b39fe663d..0248cac1e 100644
--- a/frontend/src/core/components/pageEditor/commands/pageCommands.ts
+++ b/frontend/src/core/components/pageEditor/commands/pageCommands.ts
@@ -161,7 +161,8 @@ export class ReorderPagesCommand extends DOMCommand {
private targetIndex: number,
private selectedPages: number[] | undefined,
private getCurrentDocument: () => PDFDocument | null,
- private setDocument: (doc: PDFDocument) => void
+ private setDocument: (doc: PDFDocument) => void,
+ private onReorderComplete?: (newPages: PDFPage[]) => void
) {
super();
}
@@ -196,7 +197,13 @@ export class ReorderPagesCommand extends DOMCommand {
} else {
// Single page reorder
const [movedPage] = newPages.splice(sourceIndex, 1);
- newPages.splice(this.targetIndex, 0, movedPage);
+
+ // Adjust target index if moving forward (after removal, indices shift)
+ const adjustedTargetIndex = sourceIndex < this.targetIndex
+ ? this.targetIndex - 1
+ : this.targetIndex;
+
+ newPages.splice(adjustedTargetIndex, 0, movedPage);
newPages.forEach((page, index) => {
page.pageNumber = index + 1;
@@ -210,6 +217,11 @@ export class ReorderPagesCommand extends DOMCommand {
};
this.setDocument(reorderedDocument);
+
+ // Notify that reordering is complete
+ if (this.onReorderComplete) {
+ this.onReorderComplete(newPages);
+ }
}
undo(): void {
@@ -408,6 +420,14 @@ export class SplitAllCommand extends DOMCommand {
}
}
+export type PageSize = 'A4' | 'Letter' | 'Legal' | 'A3' | 'A5';
+export type PageOrientation = 'portrait' | 'landscape';
+
+export interface PageBreakSettings {
+ size: PageSize;
+ orientation: PageOrientation;
+}
+
export class PageBreakCommand extends DOMCommand {
private insertedPages: PDFPage[] = [];
private originalDocument: PDFDocument | null = null;
@@ -415,7 +435,8 @@ export class PageBreakCommand extends DOMCommand {
constructor(
private selectedPageNumbers: number[],
private getCurrentDocument: () => PDFDocument | null,
- private setDocument: (doc: PDFDocument) => void
+ private setDocument: (doc: PDFDocument) => void,
+ private settings?: PageBreakSettings
) {
super();
}
@@ -450,7 +471,8 @@ export class PageBreakCommand extends DOMCommand {
rotation: 0,
selected: false,
splitAfter: false,
- isBlankPage: true // Custom flag for blank pages
+ isBlankPage: true, // Custom flag for blank pages
+ pageBreakSettings: this.settings // Store settings for export
};
newPages.push(blankPage);
this.insertedPages.push(blankPage);
@@ -694,7 +716,7 @@ export class InsertFilesCommand extends DOMCommand {
private async generateThumbnailsForInsertedPages(updatedDocument: PDFDocument): Promise {
try {
- const { thumbnailGenerationService } = await import('@app/services/thumbnailGenerationService');
+ const { thumbnailGenerationService } = await import('../../../services/thumbnailGenerationService');
// Group pages by file ID to generate thumbnails efficiently
const pagesByFileId = new Map();
@@ -776,7 +798,7 @@ export class InsertFilesCommand extends DOMCommand {
const clonedArrayBuffer = arrayBuffer.slice(0);
// Use PDF.js via the worker manager to extract pages
- const { pdfWorkerManager } = await import('@app/services/pdfWorkerManager');
+ const { pdfWorkerManager } = await import('../../../services/pdfWorkerManager');
const pdf = await pdfWorkerManager.createDocument(clonedArrayBuffer);
const pageCount = pdf.numPages;
@@ -883,6 +905,10 @@ export class UndoManager {
return this.redoStack.length > 0;
}
+ hasHistory(): boolean {
+ return this.undoStack.length > 0;
+ }
+
clear(): void {
this.undoStack = [];
this.redoStack = [];
diff --git a/frontend/src/core/components/pageEditor/fileColors.ts b/frontend/src/core/components/pageEditor/fileColors.ts
new file mode 100644
index 000000000..fa9b0c35f
--- /dev/null
+++ b/frontend/src/core/components/pageEditor/fileColors.ts
@@ -0,0 +1,61 @@
+/**
+ * File color palette for page editor
+ * Each file gets a distinct color for visual organization
+ * Colors are applied at 0.3 opacity for subtle highlighting
+ * Maximum 20 files supported in page editor
+ */
+
+export const FILE_COLORS = [
+ // Subtle colors (1-6) - fit well with UI theme
+ 'rgb(59, 130, 246)', // Blue
+ 'rgb(16, 185, 129)', // Green
+ 'rgb(139, 92, 246)', // Purple
+ 'rgb(6, 182, 212)', // Cyan
+ 'rgb(20, 184, 166)', // Teal
+ 'rgb(99, 102, 241)', // Indigo
+
+ // Mid-range colors (7-12) - more distinct
+ 'rgb(244, 114, 182)', // Pink
+ 'rgb(251, 146, 60)', // Orange
+ 'rgb(234, 179, 8)', // Yellow
+ 'rgb(132, 204, 22)', // Lime
+ 'rgb(248, 113, 113)', // Red
+ 'rgb(168, 85, 247)', // Violet
+
+ // Vibrant colors (13-20) - maximum distinction
+ 'rgb(236, 72, 153)', // Fuchsia
+ 'rgb(245, 158, 11)', // Amber
+ 'rgb(34, 197, 94)', // Emerald
+ 'rgb(14, 165, 233)', // Sky
+ 'rgb(239, 68, 68)', // Rose
+ 'rgb(168, 162, 158)', // Stone
+ 'rgb(251, 191, 36)', // Gold
+ 'rgb(192, 132, 252)', // Light Purple
+] as const;
+
+export const MAX_PAGE_EDITOR_FILES = 20;
+
+/**
+ * Get color for a file by its index
+ * @param index - Zero-based file index
+ * @returns RGB color string
+ */
+export function getFileColor(index: number): string {
+ if (index < 0 || index >= FILE_COLORS.length) {
+ console.warn(`File index ${index} out of range, using default color`);
+ return FILE_COLORS[0];
+ }
+ return FILE_COLORS[index];
+}
+
+/**
+ * Get color with specified opacity
+ * @param index - Zero-based file index
+ * @param opacity - Opacity value (0-1), defaults to 0.3
+ * @returns RGBA color string
+ */
+export function getFileColorWithOpacity(index: number, opacity: number = 0.2): string {
+ const rgb = getFileColor(index);
+ // Convert rgb(r, g, b) to rgba(r, g, b, a)
+ return rgb.replace('rgb(', 'rgba(').replace(')', `, ${opacity})`);
+}
diff --git a/frontend/src/core/components/pageEditor/hooks/useFileColorMap.ts b/frontend/src/core/components/pageEditor/hooks/useFileColorMap.ts
new file mode 100644
index 000000000..463289a4e
--- /dev/null
+++ b/frontend/src/core/components/pageEditor/hooks/useFileColorMap.ts
@@ -0,0 +1,33 @@
+import { useMemo, useRef } from 'react';
+import { FileId } from '@app/types/file';
+
+/**
+ * Maintains stable color assignments for a collection of file IDs.
+ * Colors are assigned by insertion order and preserved across reorders.
+ */
+export function useFileColorMap(fileIds: FileId[]): Map {
+ const assignmentsRef = useRef(new Map());
+
+ const serializedIds = useMemo(() => fileIds.join(','), [fileIds]);
+
+ return useMemo(() => {
+ const assignments = assignmentsRef.current;
+ const activeIds = new Set(fileIds);
+
+ // Remove colors for files that no longer exist
+ for (const id of Array.from(assignments.keys())) {
+ if (!activeIds.has(id)) {
+ assignments.delete(id);
+ }
+ }
+
+ // Assign colors to any new files
+ fileIds.forEach((id) => {
+ if (!assignments.has(id)) {
+ assignments.set(id, assignments.size);
+ }
+ });
+
+ return assignments;
+ }, [serializedIds, fileIds]);
+}
diff --git a/frontend/src/core/components/pageEditor/hooks/useInitialPageDocument.ts b/frontend/src/core/components/pageEditor/hooks/useInitialPageDocument.ts
new file mode 100644
index 000000000..617633e5c
--- /dev/null
+++ b/frontend/src/core/components/pageEditor/hooks/useInitialPageDocument.ts
@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react';
+import { usePageDocument } from './usePageDocument';
+import { PDFDocument } from '@app/types/pageEditor';
+
+/**
+ * Hook that calls usePageDocument but only returns the FIRST non-null result
+ * After initialization, it ignores all subsequent updates
+ */
+export function useInitialPageDocument(): PDFDocument | null {
+ const { document: liveDocument } = usePageDocument();
+ const [initialDocument, setInitialDocument] = useState(null);
+
+ useEffect(() => {
+ // Only set once when we get the first non-null document
+ if (liveDocument && !initialDocument) {
+ console.log('📄 useInitialPageDocument: Captured initial document with', liveDocument.pages.length, 'pages');
+ setInitialDocument(liveDocument);
+ }
+ }, [liveDocument, initialDocument]);
+
+ return initialDocument;
+}
diff --git a/frontend/src/core/components/pageEditor/hooks/usePageDocument.ts b/frontend/src/core/components/pageEditor/hooks/usePageDocument.ts
index 1d3ecfb22..f9c4be006 100644
--- a/frontend/src/core/components/pageEditor/hooks/usePageDocument.ts
+++ b/frontend/src/core/components/pageEditor/hooks/usePageDocument.ts
@@ -1,5 +1,6 @@
import { useMemo } from 'react';
import { useFileState } from '@app/contexts/FileContext';
+import { usePageEditor } from '@app/contexts/PageEditorContext';
import { PDFDocument, PDFPage } from '@app/types/pageEditor';
import { FileId } from '@app/types/file';
@@ -15,14 +16,29 @@ export interface PageDocumentHook {
*/
export function usePageDocument(): PageDocumentHook {
const { state, selectors } = useFileState();
+ const { fileOrder } = usePageEditor();
- // Prefer IDs + selectors to avoid array identity churn
- const activeFileIds = state.files.ids;
- const primaryFileId = activeFileIds[0] ?? null;
+ // Use PageEditorContext's fileOrder instead of FileContext's global order
+ // This ensures the page editor respects its own workspace ordering
+ const allFileIds = fileOrder;
- // Stable signature for effects (prevents loops)
+ // Derive selected file IDs directly from FileContext (single source of truth)
+ // Filter to only include PDF files (PageEditor only supports PDFs)
+ // Use stable string keys to prevent infinite loops
+ const allFileIdsKey = allFileIds.join(',');
+ const selectedFileIdsKey = [...state.ui.selectedFileIds].sort().join(',');
const activeFilesSignature = selectors.getFilesSignature();
+ // Get ALL PDF files (selected or not) for document building with placeholders
+ const activeFileIds = useMemo(() => {
+ return allFileIds.filter(id => {
+ const stub = selectors.getStirlingFileStub(id);
+ return stub?.name?.toLowerCase().endsWith('.pdf') ?? false;
+ });
+ }, [allFileIdsKey, activeFilesSignature, selectors]);
+
+ const primaryFileId = activeFileIds[0] ?? null;
+
// UI state
const globalProcessing = state.ui.isProcessing;
@@ -69,13 +85,28 @@ export function usePageDocument(): PageDocumentHook {
// Build pages by interleaving original pages with insertions
let pages: PDFPage[] = [];
- // Helper function to create pages from a file
- const createPagesFromFile = (fileId: FileId, startPageNumber: number): PDFPage[] => {
+ // Helper function to create pages from a file (or placeholder if deselected)
+ const createPagesFromFile = (fileId: FileId, startPageNumber: number, isSelected: boolean): PDFPage[] => {
const stirlingFileStub = selectors.getStirlingFileStub(fileId);
if (!stirlingFileStub) {
return [];
}
+ // If file is deselected, create a single placeholder page
+ if (!isSelected) {
+ return [{
+ id: `${fileId}-placeholder`,
+ pageNumber: startPageNumber,
+ originalPageNumber: 1,
+ originalFileId: fileId,
+ rotation: 0,
+ thumbnail: null,
+ selected: false,
+ splitAfter: false,
+ isPlaceholder: true,
+ }];
+ }
+
const processedFile = stirlingFileStub.processedFile;
let filePages: PDFPage[] = [];
@@ -90,6 +121,7 @@ export function usePageDocument(): PageDocumentHook {
splitAfter: page.splitAfter || false,
originalPageNumber: page.originalPageNumber || page.pageNumber || pageIndex + 1,
originalFileId: fileId,
+ isPlaceholder: false,
}));
} else if (processedFile?.totalPages) {
// Fallback: create pages without thumbnails but with correct count
@@ -102,16 +134,30 @@ export function usePageDocument(): PageDocumentHook {
thumbnail: null,
selected: false,
splitAfter: false,
+ isPlaceholder: false,
}));
}
return filePages;
};
- // Collect all pages from original files (without renumbering yet)
+ // Collect all pages from original files, respecting their previous positions
+ const selectedFileIdsSet = new Set(state.ui.selectedFileIds);
+
+ // Sort original files by their position in fileOrder (so placeholders stay in correct spot)
+ // Use fileOrder as source of truth since it persists across page editor sessions
+ const fileOrderMap = new Map(allFileIds.map((id, index) => [id, index]));
+
+ const sortedOriginalFileIds = [...originalFileIds].sort((a, b) => {
+ const posA = fileOrderMap.get(a) ?? Number.MAX_SAFE_INTEGER;
+ const posB = fileOrderMap.get(b) ?? Number.MAX_SAFE_INTEGER;
+ return posA - posB;
+ });
+
const originalFilePages: PDFPage[] = [];
- originalFileIds.forEach(fileId => {
- const filePages = createPagesFromFile(fileId, 1); // Temporary numbering
+ sortedOriginalFileIds.forEach(fileId => {
+ const isSelected = selectedFileIdsSet.has(fileId);
+ const filePages = createPagesFromFile(fileId, 1, isSelected); // Temporary numbering
originalFilePages.push(...filePages);
});
@@ -130,7 +176,8 @@ export function usePageDocument(): PageDocumentHook {
// Collect all pages to insert
const allNewPages: PDFPage[] = [];
fileIds.forEach(fileId => {
- const insertedPages = createPagesFromFile(fileId, 1);
+ const isSelected = selectedFileIdsSet.has(fileId);
+ const insertedPages = createPagesFromFile(fileId, 1, isSelected);
allNewPages.push(...insertedPages);
});
@@ -147,6 +194,13 @@ export function usePageDocument(): PageDocumentHook {
return null;
}
+ // Pages are already in the correct order from the sorted assembly above
+ // Just ensure page numbers are sequential
+ pages = pages.map((page, index) => ({
+ ...page,
+ pageNumber: index + 1,
+ }));
+
const mergedDoc: PDFDocument = {
id: activeFileIds.join('-'),
name,
@@ -156,7 +210,7 @@ export function usePageDocument(): PageDocumentHook {
};
return mergedDoc;
- }, [activeFileIds, primaryFileId, primaryStirlingFileStub, processedFilePages, processedFileTotalPages, selectors, activeFilesSignature]);
+ }, [activeFileIds, primaryFileId, primaryStirlingFileStub, processedFilePages, processedFileTotalPages, selectors, activeFilesSignature, selectedFileIdsKey, state.ui.selectedFileIds, allFileIds]);
// Large document detection for smart loading
const isVeryLargeDocument = useMemo(() => {
diff --git a/frontend/src/core/components/pageEditor/hooks/usePageEditorDropdownState.ts b/frontend/src/core/components/pageEditor/hooks/usePageEditorDropdownState.ts
new file mode 100644
index 000000000..cc8d51725
--- /dev/null
+++ b/frontend/src/core/components/pageEditor/hooks/usePageEditorDropdownState.ts
@@ -0,0 +1,65 @@
+import { useMemo } from 'react';
+import { usePageEditor } from '@app/contexts/PageEditorContext';
+import { useFileState } from '@app/contexts/FileContext';
+import { FileId } from '@app/types/file';
+import { useFileColorMap } from '@app/components/pageEditor/hooks/useFileColorMap';
+
+export interface PageEditorDropdownFile {
+ fileId: FileId;
+ name: string;
+ versionNumber?: number;
+ isSelected: boolean;
+}
+
+export interface PageEditorDropdownState {
+ files: PageEditorDropdownFile[];
+ selectedCount: number;
+ totalCount: number;
+ onToggleSelection: (fileId: FileId) => void;
+ onReorder: (fromIndex: number, toIndex: number) => void;
+ fileColorMap: Map;
+}
+
+const isPdf = (name?: string | null) =>
+ typeof name === 'string' && name.toLowerCase().endsWith('.pdf');
+
+export function usePageEditorDropdownState(): PageEditorDropdownState {
+ const { state, selectors } = useFileState();
+ const {
+ toggleFileSelection,
+ reorderFiles,
+ fileOrder,
+ } = usePageEditor();
+
+ const pageEditorFiles = useMemo(() => {
+ return fileOrder
+ .map((fileId) => {
+ const stub = selectors.getStirlingFileStub(fileId);
+ if (!isPdf(stub?.name)) return null;
+
+ return {
+ fileId,
+ name: stub?.name || '',
+ versionNumber: stub?.versionNumber,
+ isSelected: state.ui.selectedFileIds.includes(fileId),
+ };
+ })
+ .filter((file): file is PageEditorDropdownFile => file !== null);
+ }, [fileOrder, selectors, state.ui.selectedFileIds]);
+
+ const fileColorMap = useFileColorMap(pageEditorFiles.map((file) => file.fileId));
+
+ const selectedCount = useMemo(
+ () => pageEditorFiles.filter((file) => file.isSelected).length,
+ [pageEditorFiles]
+ );
+
+ return useMemo(() => ({
+ files: pageEditorFiles,
+ selectedCount,
+ totalCount: pageEditorFiles.length,
+ onToggleSelection: toggleFileSelection,
+ onReorder: reorderFiles,
+ fileColorMap,
+ }), [pageEditorFiles, selectedCount, toggleFileSelection, reorderFiles, fileColorMap]);
+}
diff --git a/frontend/src/core/components/pageEditor/pageEditorRightRailButtons.tsx b/frontend/src/core/components/pageEditor/pageEditorRightRailButtons.tsx
index 03479c943..4aae339a7 100644
--- a/frontend/src/core/components/pageEditor/pageEditorRightRailButtons.tsx
+++ b/frontend/src/core/components/pageEditor/pageEditorRightRailButtons.tsx
@@ -16,6 +16,7 @@ interface PageEditorRightRailButtonsParams {
handleDeselectAll: () => void;
handleDelete: () => void;
onExportSelected: () => void;
+ onSaveChanges: () => void;
exportLoading: boolean;
activeFileCount: number;
closePdf: () => void;
@@ -34,6 +35,7 @@ export function usePageEditorRightRailButtons(params: PageEditorRightRailButtons
handleDeselectAll,
handleDelete,
onExportSelected,
+ onSaveChanges,
exportLoading,
activeFileCount,
closePdf,
@@ -47,6 +49,7 @@ export function usePageEditorRightRailButtons(params: PageEditorRightRailButtons
const selectByNumberLabel = t('rightRail.selectByNumber', 'Select by Page Numbers');
const deleteSelectedLabel = t('rightRail.deleteSelected', 'Delete Selected Pages');
const exportSelectedLabel = t('rightRail.exportSelected', 'Export Selected Pages');
+ const saveChangesLabel = t('rightRail.saveChanges', 'Save Changes');
const closePdfLabel = t('rightRail.closePdf', 'Close PDF');
const buttons = useMemo(() => {
@@ -116,6 +119,17 @@ export function usePageEditorRightRailButtons(params: PageEditorRightRailButtons
visible: totalPages > 0,
onClick: onExportSelected,
},
+ {
+ id: 'page-save-changes',
+ icon: = ({
{action.icon}
diff --git a/frontend/src/core/components/shared/PageEditorFileDropdown.tsx b/frontend/src/core/components/shared/PageEditorFileDropdown.tsx
new file mode 100644
index 000000000..9d15af93f
--- /dev/null
+++ b/frontend/src/core/components/shared/PageEditorFileDropdown.tsx
@@ -0,0 +1,328 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { Menu, Loader, Group, Text, Checkbox } from '@mantine/core';
+import { LocalIcon } from '../shared/LocalIcon';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+import AddIcon from '@mui/icons-material/Add';
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import FitText from './FitText';
+import { getFileColorWithOpacity } from '../pageEditor/fileColors';
+import { useFilesModalContext } from '../../contexts/FilesModalContext';
+
+import { FileId } from '../../types/file';
+
+// Local interface for PageEditor file display
+interface PageEditorFile {
+ fileId: FileId;
+ name: string;
+ versionNumber?: number;
+ isSelected: boolean;
+}
+
+interface FileMenuItemProps {
+ file: PageEditorFile;
+ index: number;
+ colorIndex: number;
+ onToggleSelection: (fileId: FileId) => void;
+ onReorder: (fromIndex: number, toIndex: number) => void;
+}
+
+const FileMenuItem: React.FC = ({
+ file,
+ index,
+ colorIndex,
+ onToggleSelection,
+ onReorder,
+}) => {
+ const [isDragging, setIsDragging] = useState(false);
+ const [isDragOver, setIsDragOver] = useState(false);
+ const [dropPosition, setDropPosition] = useState<'above' | 'below'>('below');
+ const itemRef = useRef(null);
+
+ // Keep latest values without re-registering DnD
+ const indexRef = useRef(index);
+ const fileIdRef = useRef(file.fileId);
+ const dropPositionRef = useRef<'above' | 'below'>('below');
+ useEffect(() => { indexRef.current = index; }, [index]);
+ useEffect(() => { fileIdRef.current = file.fileId; }, [file.fileId]);
+ useEffect(() => { dropPositionRef.current = dropPosition; }, [dropPosition]);
+
+ // NEW: keep latest onReorder without effect re-run
+ const onReorderRef = useRef(onReorder);
+ useEffect(() => { onReorderRef.current = onReorder; }, [onReorder]);
+
+ // Gesture guard for row click vs drag
+ const movedRef = useRef(false);
+ const startRef = useRef<{ x: number; y: number } | null>(null);
+
+ const onPointerDown = (e: React.PointerEvent) => {
+ startRef.current = { x: e.clientX, y: e.clientY };
+ movedRef.current = false;
+ };
+
+ const onPointerMove = (e: React.PointerEvent) => {
+ if (!startRef.current) return;
+ const dx = e.clientX - startRef.current.x;
+ const dy = e.clientY - startRef.current.y;
+ if (dx * dx + dy * dy > 25) movedRef.current = true; // ~5px threshold
+ };
+
+ const onPointerUp = () => {
+ startRef.current = null;
+ };
+
+ useEffect(() => {
+ const element = itemRef.current;
+ if (!element) return;
+
+ const dragCleanup = draggable({
+ element,
+ getInitialData: () => ({
+ type: 'file-item',
+ fileId: fileIdRef.current,
+ fromIndex: indexRef.current,
+ }),
+ onDragStart: () => setIsDragging((p) => (p ? p : true)),
+ onDrop: () => setIsDragging((p) => (p ? false : p)),
+ canDrag: () => true,
+ });
+
+ const dropCleanup = dropTargetForElements({
+ element,
+ getData: () => ({
+ type: 'file-item',
+ fileId: fileIdRef.current,
+ toIndex: indexRef.current,
+ }),
+ onDragEnter: () => setIsDragOver((p) => (p ? p : true)),
+ onDragLeave: () => {
+ setIsDragOver((p) => (p ? false : p));
+ setDropPosition('below');
+ },
+ onDrag: ({ source }) => {
+ // Determine drop position based on cursor location
+ const element = itemRef.current;
+ if (!element) return;
+
+ const rect = element.getBoundingClientRect();
+ const clientY = (source as any).element?.getBoundingClientRect().top || 0;
+ const midpoint = rect.top + rect.height / 2;
+
+ setDropPosition(clientY < midpoint ? 'below' : 'above');
+ },
+ onDrop: ({ source }) => {
+ setIsDragOver(false);
+ const dropPos = dropPositionRef.current;
+ setDropPosition('below');
+ const sourceData = source.data as any;
+ if (sourceData?.type === 'file-item') {
+ const fromIndex = sourceData.fromIndex as number;
+ let toIndex = indexRef.current;
+
+ // Adjust toIndex based on drop position
+ // If dropping below and dragging from above, or dropping above and dragging from below
+ if (dropPos === 'below' && fromIndex < toIndex) {
+ // Dragging down, drop after target - no adjustment needed
+ } else if (dropPos === 'above' && fromIndex > toIndex) {
+ // Dragging up, drop before target - no adjustment needed
+ } else if (dropPos === 'below' && fromIndex > toIndex) {
+ // Dragging up but want below target
+ toIndex = toIndex + 1;
+ } else if (dropPos === 'above' && fromIndex < toIndex) {
+ // Dragging down but want above target
+ toIndex = toIndex - 1;
+ }
+
+ if (fromIndex !== toIndex) {
+ onReorderRef.current(fromIndex, toIndex);
+ }
+ }
+ }
+ });
+
+ return () => {
+ try { dragCleanup(); } catch { /* cleanup */ }
+ try { dropCleanup(); } catch { /* cleanup */ }
+ };
+ }, []); // NOTE: no `onReorder` here
+
+ const itemName = file?.name || 'Untitled';
+ const fileColorBorder = getFileColorWithOpacity(colorIndex, 1);
+ const fileColorBorderHover = getFileColorWithOpacity(colorIndex, 1.0);
+
+ return (
+ ;
+ selectedCount: number;
+ totalCount: number;
+}
+
+export const PageEditorFileDropdown: React.FC = ({
+ files,
+ onToggleSelection,
+ onReorder,
+ switchingTo,
+ viewOptionStyle,
+ fileColorMap,
+ selectedCount,
+ totalCount,
+}) => {
+ const { openFilesModal } = useFilesModalContext();
+
+ return (
+
+ );
+};
diff --git a/frontend/src/core/components/shared/ToolChain.tsx b/frontend/src/core/components/shared/ToolChain.tsx
index d3c25f653..97a05224a 100644
--- a/frontend/src/core/components/shared/ToolChain.tsx
+++ b/frontend/src/core/components/shared/ToolChain.tsx
@@ -24,10 +24,10 @@ const ToolChain: React.FC = ({
size = 'xs',
color = 'var(--mantine-color-blue-7)'
}) => {
- if (!toolChain || toolChain.length === 0) return null;
-
const { t } = useTranslation();
+ if (!toolChain || toolChain.length === 0) return null;
+
const toolIds = toolChain.map(tool => tool.toolId);
const getToolName = (toolId: ToolId) => {
diff --git a/frontend/src/core/components/shared/Tooltip.tsx b/frontend/src/core/components/shared/Tooltip.tsx
index 77db24d46..0b83657ee 100644
--- a/frontend/src/core/components/shared/Tooltip.tsx
+++ b/frontend/src/core/components/shared/Tooltip.tsx
@@ -72,7 +72,7 @@ export const Tooltip: React.FC = ({
}
}, []);
- const sidebarContext = sidebarTooltip ? useSidebarContext() : null;
+ const sidebarContext = useSidebarContext();
const isControlled = controlledOpen !== undefined;
const open = (isControlled ? !!controlledOpen : internalOpen) && !disabled;
@@ -172,7 +172,7 @@ export const Tooltip: React.FC = ({
const related = e.relatedTarget as Node | null;
// Moving into the tooltip → keep open
- if (related && tooltipRef.current && tooltipRef.current.contains(related)) {
+ if (related && related instanceof Node && tooltipRef.current && tooltipRef.current.contains(related)) {
(children.props as any)?.onPointerLeave?.(e);
return;
}
diff --git a/frontend/src/core/components/shared/TopControls.tsx b/frontend/src/core/components/shared/TopControls.tsx
index 6c6ac6999..d29ecc438 100644
--- a/frontend/src/core/components/shared/TopControls.tsx
+++ b/frontend/src/core/components/shared/TopControls.tsx
@@ -1,46 +1,48 @@
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useMemo } from "react";
import { SegmentedControl, Loader } from "@mantine/core";
-import { useRainbowThemeContext } from "@app/components/shared/RainbowThemeProvider";
+import { useRainbowThemeContext } from '@app/components/shared/RainbowThemeProvider';
import rainbowStyles from '@app/styles/rainbow.module.css';
import VisibilityIcon from "@mui/icons-material/Visibility";
-import EditNoteIcon from "@mui/icons-material/EditNote";
import FolderIcon from "@mui/icons-material/Folder";
import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
+import { LocalIcon } from '@app/components/shared/LocalIcon';
import { WorkbenchType, isValidWorkbench } from '@app/types/workbench';
+import { PageEditorFileDropdown } from '@app/components/shared/PageEditorFileDropdown';
import type { CustomWorkbenchViewInstance } from '@app/contexts/ToolWorkflowContext';
import { FileDropdownMenu } from '@app/components/shared/FileDropdownMenu';
-
+import { usePageEditorDropdownState, PageEditorDropdownState } from '@app/components/pageEditor/hooks/usePageEditorDropdownState';
const viewOptionStyle: React.CSSProperties = {
display: 'inline-flex',
flexDirection: 'row',
alignItems: 'center',
- gap: 6,
- whiteSpace: 'nowrap',
- paddingTop: '0.3rem',
+ gap: '0.5rem',
+ justifyContent: 'center',
+ padding: '2px 1rem',
};
-
-// Build view options showing text always
+// Helper function to create view options for SegmentedControl
const createViewOptions = (
currentView: WorkbenchType,
switchingTo: WorkbenchType | null,
activeFiles: Array<{ fileId: string; name: string; versionNumber?: number }>,
currentFileIndex: number,
onFileSelect?: (index: number) => void,
+ pageEditorState?: PageEditorDropdownState,
customViews?: CustomWorkbenchViewInstance[]
) => {
+ // Viewer dropdown logic
const currentFile = activeFiles[currentFileIndex];
const isInViewer = currentView === 'viewer';
const fileName = currentFile?.name || '';
- const displayName = isInViewer && fileName ? fileName : 'Viewer';
+ const viewerDisplayName = isInViewer && fileName ? fileName : 'Viewer';
const hasMultipleFiles = activeFiles.length > 1;
- const showDropdown = isInViewer && hasMultipleFiles;
+ const showViewerDropdown = isInViewer && hasMultipleFiles;
const viewerOption = {
- label: showDropdown ? (
+ label: showViewerDropdown ? (
{switchingTo === "viewer" ? (
-
),
value: "viewer",
};
+ // Page Editor dropdown logic
+ const isInPageEditor = currentView === 'pageEditor';
+ const hasPageEditorFiles = pageEditorState && pageEditorState.totalCount > 0;
+ const showPageEditorDropdown = isInPageEditor && hasPageEditorFiles;
+
const pageEditorOption = {
- label: (
+ label: showPageEditorDropdown ? (
+ = ({
backgroundColor: 'white',
border: '1px solid #e9ecef',
borderRadius: 2
- }}>
+ }} />
+ {/* Drop indicator line */}
+ {isDragOver && (
+
+ )}
+
+ );
+};
+
+interface PageEditorFileDropdownProps {
+ files: PageEditorFile[];
+ onToggleSelection: (fileId: FileId) => void;
+ onReorder: (fromIndex: number, toIndex: number) => void;
+ switchingTo?: string | null;
+ viewOptionStyle: React.CSSProperties;
+ fileColorMap: Map {
+ e.stopPropagation();
+ if (movedRef.current) return; // ignore click after drag
+ onToggleSelection(file.fileId);
+ }}
+ style={{
+ padding: '0.75rem 0.75rem',
+ cursor: isDragging ? 'grabbing' : 'grab',
+ backgroundColor: file.isSelected ? 'rgba(0, 0, 0, 0.05)' : 'transparent',
+ borderLeft: `6px solid ${fileColorBorder}`,
+ opacity: isDragging ? 0.5 : 1,
+ transition: 'opacity 0.2s ease-in-out, background-color 0.15s ease',
+ userSelect: 'none',
+ }}
+ onMouseEnter={(e) => {
+ if (!isDragging) {
+ (e.currentTarget as HTMLDivElement).style.backgroundColor = 'rgba(0, 0, 0, 0.05)';
+ (e.currentTarget as HTMLDivElement).style.borderLeftColor = fileColorBorderHover;
+ }
+ }}
+ onMouseLeave={(e) => {
+ if (!isDragging) {
+ (e.currentTarget as HTMLDivElement).style.backgroundColor = file.isSelected ? 'rgba(0, 0, 0, 0.05)' : 'transparent';
+ (e.currentTarget as HTMLDivElement).style.borderLeftColor = fileColorBorder;
+ }
+ }}
+ >
+
+ onToggleSelection(file.fileId)}
+ onClick={(e) => e.stopPropagation()}
+ size="sm"
+ />
+
+ v{file.versionNumber}
+
+ )}
+
+
+
+
+
+
+ {file.versionNumber && file.versionNumber > 1 && (
+
- {currentView === "pageEditor" ? (
- <>
- {switchingTo === "pageEditor" ?
),
@@ -82,17 +93,7 @@ const createViewOptions = (
const fileEditorOption = {
label: (
- {currentView === "fileEditor" ? (
- <>
- {switchingTo === "fileEditor" ?
),
value: "fileEditor",
@@ -110,9 +111,9 @@ const createViewOptions = (
label: (
{switchingTo === view.workbenchId ? (
-
@@ -143,6 +144,8 @@ const TopControls = ({
const { isRainbowMode } = useRainbowThemeContext();
const [switchingTo, setSwitchingTo] = useState
-
+
({
);
}
-export function createReviewToolStep(
- createStep: (title: string, props: any, children?: React.ReactNode) => React.ReactElement,
- props: ReviewToolStepProps
-): React.ReactElement {
+export function CreateReviewToolStep(props: ReviewToolStepProps & {
+ createStep: (title: string, props: any, children?: React.ReactNode) => React.ReactElement
+}): React.ReactElement {
const { t } = useTranslation();
+ const { createStep, ...stepProps } = props;
return createStep(
t("review", "Review"),
{
- isVisible: props.isVisible,
- isCollapsed: props.isCollapsed,
- onCollapsedClick: props.onCollapsedClick,
+ isVisible: stepProps.isVisible,
+ isCollapsed: stepProps.isCollapsed,
+ onCollapsedClick: stepProps.onCollapsedClick,
_excludeFromCount: true,
_noPadding: true,
},
- (
+ createStep: (title: string, props: any, children?: React.ReactNode) => React.ReactElement,
+ props: ReviewToolStepProps
+): React.ReactElement {
+ return
{
+/**
+ * Hook that returns tooltip content for ALL split methods
+ * Can be called once and then looked up by method
+ */
+export const useSplitSettingsTips = (): Record => {
const { t } = useTranslation();
- if (!method) return null;
-
const tooltipMap: Record = {
[SPLIT_METHODS.BY_PAGES]: {
header: {
@@ -130,5 +132,5 @@ export const useSplitSettingsTips = (method: SplitMethod | ''): TooltipContent |
}
};
- return tooltipMap[method];
+ return tooltipMap;
};
\ No newline at end of file
diff --git a/frontend/src/core/contexts/FilesModalContext.tsx b/frontend/src/core/contexts/FilesModalContext.tsx
index 468609f7d..1096eee11 100644
--- a/frontend/src/core/contexts/FilesModalContext.tsx
+++ b/frontend/src/core/contexts/FilesModalContext.tsx
@@ -2,11 +2,10 @@ import React, { createContext, useContext, useState, useCallback, useMemo } from
import { useFileHandler } from '@app/hooks/useFileHandler';
import { useFileActions } from '@app/contexts/FileContext';
import { StirlingFileStub } from '@app/types/fileContext';
-import { fileStorage } from '@app/services/fileStorage';
interface FilesModalContextType {
isFilesModalOpen: boolean;
- openFilesModal: (options?: { insertAfterPage?: number; customHandler?: (files: File[], insertAfterPage?: number) => void }) => void;
+ openFilesModal: (options?: { insertAfterPage?: number; customHandler?: (files: File[] | StirlingFileStub[], insertAfterPage?: number, isFromStorage?: boolean) => void }) => void;
closeFilesModal: () => void;
onFileUpload: (files: File[]) => void;
onRecentFileSelect: (stirlingFileStubs: StirlingFileStub[]) => void;
@@ -22,9 +21,9 @@ export const FilesModalProvider: React.FC<{ children: React.ReactNode }> = ({ ch
const [isFilesModalOpen, setIsFilesModalOpen] = useState(false);
const [onModalClose, setOnModalClose] = useState<(() => void) | undefined>();
const [insertAfterPage, setInsertAfterPage] = useState();
- const [customHandler, setCustomHandler] = useState<((files: File[], insertAfterPage?: number) => void) | undefined>();
+ const [customHandler, setCustomHandler] = useState<((files: File[] | StirlingFileStub[], insertAfterPage?: number, isFromStorage?: boolean) => void) | undefined>();
- const openFilesModal = useCallback((options?: { insertAfterPage?: number; customHandler?: (files: File[], insertAfterPage?: number) => void }) => {
+ const openFilesModal = useCallback((options?: { insertAfterPage?: number; customHandler?: (files: File[] | StirlingFileStub[], insertAfterPage?: number, isFromStorage?: boolean) => void }) => {
setInsertAfterPage(options?.insertAfterPage);
setCustomHandler(() => options?.customHandler);
setIsFilesModalOpen(true);
@@ -50,22 +49,8 @@ export const FilesModalProvider: React.FC<{ children: React.ReactNode }> = ({ ch
const handleRecentFileSelect = useCallback(async (stirlingFileStubs: StirlingFileStub[]) => {
if (customHandler) {
- // Load the actual files from storage for custom handler
- try {
- const loadedFiles: File[] = [];
- for (const stub of stirlingFileStubs) {
- const stirlingFile = await fileStorage.getStirlingFile(stub.id);
- if (stirlingFile) {
- loadedFiles.push(stirlingFile);
- }
- }
-
- if (loadedFiles.length > 0) {
- customHandler(loadedFiles, insertAfterPage);
- }
- } catch (error) {
- console.error('Failed to load files for custom handler:', error);
- }
+ // Pass stubs directly to custom handler with flag indicating they're from storage
+ customHandler(stirlingFileStubs, insertAfterPage, true);
} else {
// Normal case - use addStirlingFileStubs to preserve metadata
if (actions.addStirlingFileStubs) {
diff --git a/frontend/src/core/contexts/PageEditorContext.tsx b/frontend/src/core/contexts/PageEditorContext.tsx
new file mode 100644
index 000000000..2cd95adfa
--- /dev/null
+++ b/frontend/src/core/contexts/PageEditorContext.tsx
@@ -0,0 +1,359 @@
+import React, { createContext, useContext, useState, useCallback, ReactNode, useMemo } from 'react';
+import { FileId } from '@app/types/file';
+import { useFileActions, useFileState } from '@app/contexts/FileContext';
+import { PDFPage } from '@app/types/pageEditor';
+import { MAX_PAGE_EDITOR_FILES } from '@app/components/pageEditor/fileColors';
+
+// PageEditorFile is now defined locally in consuming components
+// Components should derive file list directly from FileContext
+
+/**
+ * Computes file order based on the position of each file's first page
+ * @param pages - Current page order
+ * @returns Array of FileIds in order based on first page positions
+ */
+function computeFileOrderFromPages(pages: PDFPage[]): FileId[] {
+ // Find the first page for each file
+ const fileFirstPagePositions = new Map();
+
+ pages.forEach((page, index) => {
+ const fileId = page.originalFileId;
+ if (!fileId) return;
+
+ if (!fileFirstPagePositions.has(fileId)) {
+ fileFirstPagePositions.set(fileId, index);
+ }
+ });
+
+ // Sort files by their first page position
+ const fileOrder = Array.from(fileFirstPagePositions.entries())
+ .sort((a, b) => a[1] - b[1])
+ .map(entry => entry[0]);
+
+ return fileOrder;
+}
+
+/**
+ * Reorders pages based on file reordering while preserving interlacing and manual page order
+ * @param currentPages - Current page order (may include manual reordering and interlacing)
+ * @param fromIndex - Source file index in the file order
+ * @param toIndex - Target file index in the file order
+ * @param orderedFileIds - File IDs in their current order
+ * @returns Reordered pages with updated page numbers
+ */
+function reorderPagesForFileMove(
+ currentPages: PDFPage[],
+ fromIndex: number,
+ toIndex: number,
+ orderedFileIds: FileId[]
+): PDFPage[] {
+ // Get the file ID being moved
+ const movedFileId = orderedFileIds[fromIndex];
+ const targetFileId = orderedFileIds[toIndex];
+
+ // Extract pages belonging to the moved file (maintaining their relative order)
+ const movedFilePages: PDFPage[] = [];
+ const remainingPages: PDFPage[] = [];
+
+ currentPages.forEach(page => {
+ if (page.originalFileId === movedFileId) {
+ movedFilePages.push(page);
+ } else {
+ remainingPages.push(page);
+ }
+ });
+
+ // Find the insertion point based on the target file
+ let insertionIndex = 0;
+
+ if (fromIndex < toIndex) {
+ // Moving down: insert AFTER the last page of ANY file that should come before us
+ // We need to find the last page belonging to any file at index <= toIndex in orderedFileIds
+ const filesBeforeUs = new Set(orderedFileIds.slice(0, toIndex + 1));
+ for (let i = remainingPages.length - 1; i >= 0; i--) {
+ const pageFileId = remainingPages[i].originalFileId;
+ if (pageFileId && filesBeforeUs.has(pageFileId)) {
+ insertionIndex = i + 1;
+ break;
+ }
+ }
+ } else {
+ // Moving up: insert BEFORE the first page of target file
+ for (let i = 0; i < remainingPages.length; i++) {
+ if (remainingPages[i].originalFileId === targetFileId) {
+ insertionIndex = i;
+ break;
+ }
+ }
+ }
+
+ // Insert moved pages at the calculated position
+ const reorderedPages = [
+ ...remainingPages.slice(0, insertionIndex),
+ ...movedFilePages,
+ ...remainingPages.slice(insertionIndex)
+ ];
+
+ // Renumber all pages sequentially (clone to avoid mutation)
+ return reorderedPages.map((page, index) => ({
+ ...page,
+ pageNumber: index + 1
+ }));
+}
+
+interface PageEditorContextValue {
+ // Current page order (updated by PageEditor, used for file reordering)
+ currentPages: PDFPage[] | null;
+ updateCurrentPages: (pages: PDFPage[] | null) => void;
+
+ // Reordered pages (when file reordering happens)
+ reorderedPages: PDFPage[] | null;
+ clearReorderedPages: () => void;
+
+ // Page editor's own file order (independent of FileContext global order)
+ fileOrder: FileId[];
+ setFileOrder: (order: FileId[]) => void;
+
+ // Set file selection (calls FileContext actions)
+ setFileSelection: (fileId: FileId, selected: boolean) => void;
+
+ // Toggle file selection (calls FileContext actions)
+ toggleFileSelection: (fileId: FileId) => void;
+
+ // Select/deselect all files (calls FileContext actions)
+ selectAll: () => void;
+ deselectAll: () => void;
+
+ // Reorder files (only affects page editor's local order)
+ reorderFiles: (fromIndex: number, toIndex: number) => void;
+
+ // Update file order based on page positions (when pages are manually reordered)
+ updateFileOrderFromPages: (pages: PDFPage[]) => void;
+}
+
+const PageEditorContext = createContext(undefined);
+
+interface PageEditorProviderProps {
+ children: ReactNode;
+}
+
+export function PageEditorProvider({ children }: PageEditorProviderProps) {
+ const [currentPages, setCurrentPages] = useState(null);
+ const [reorderedPages, setReorderedPages] = useState(null);
+
+ // Page editor's own file order (independent of FileContext)
+ const [fileOrder, setFileOrder] = useState([]);
+
+ // Read from FileContext (for file metadata only, not order)
+ const { actions: fileActions } = useFileActions();
+ const { state } = useFileState();
+
+ // Keep a ref to always read latest state in stable callbacks
+ const stateRef = React.useRef(state);
+ React.useEffect(() => {
+ stateRef.current = state;
+ }, [state]);
+
+ // Track the previous FileContext order to detect actual changes
+ const prevFileContextIdsRef = React.useRef([]);
+
+ // Initialize fileOrder from FileContext when files change (add/remove only)
+ React.useEffect(() => {
+ const currentFileIds = state.files.ids;
+ const prevFileIds = prevFileContextIdsRef.current;
+
+ // Only react to FileContext changes, not our own fileOrder changes
+ const fileContextChanged =
+ currentFileIds.length !== prevFileIds.length ||
+ !currentFileIds.every((id, idx) => id === prevFileIds[idx]);
+
+ if (!fileContextChanged) {
+ return;
+ }
+
+ prevFileContextIdsRef.current = currentFileIds;
+
+ // Collect new file IDs outside the setState callback so we can clear them after
+ let newFileIdsToProcess: FileId[] = [];
+
+ // Use functional setState to read latest fileOrder without depending on it
+ setFileOrder(currentOrder => {
+ // Identify new files
+ const newFileIds = currentFileIds.filter(id => !currentOrder.includes(id));
+ newFileIdsToProcess = newFileIds; // Store for cleanup
+
+ // Remove deleted files
+ const validFileOrder = currentOrder.filter(id => currentFileIds.includes(id));
+
+ if (newFileIds.length === 0 && validFileOrder.length === currentOrder.length) {
+ return currentOrder; // No changes needed
+ }
+
+ // Always append new files to end
+ // If files have insertAfterPageId, page-level insertion is handled by usePageDocument
+ return [...validFileOrder, ...newFileIds];
+ });
+
+ // Clear insertAfterPageId after a delay to allow usePageDocument to consume it first
+ setTimeout(() => {
+ newFileIdsToProcess.forEach(fileId => {
+ const stub = state.files.byId[fileId];
+ if (stub?.insertAfterPageId) {
+ fileActions.updateStirlingFileStub(fileId, { insertAfterPageId: undefined });
+ }
+ });
+ }, 100);
+ }, [state.files.ids, state.files.byId, fileActions]);
+
+ const updateCurrentPages = useCallback((pages: PDFPage[] | null) => {
+ setCurrentPages(pages);
+ }, []);
+
+ const clearReorderedPages = useCallback(() => {
+ setReorderedPages(null);
+ }, []);
+
+ const setFileSelection = useCallback((fileId: FileId, selected: boolean) => {
+ const currentSelection = stateRef.current.ui.selectedFileIds;
+ const isAlreadySelected = currentSelection.includes(fileId);
+
+ // Check if we're trying to select when at limit
+ if (selected && !isAlreadySelected && currentSelection.length >= MAX_PAGE_EDITOR_FILES) {
+ console.warn(`Page editor supports maximum ${MAX_PAGE_EDITOR_FILES} files. Cannot select more files.`);
+ return;
+ }
+
+ // Update FileContext selection
+ const newSelectedIds = selected
+ ? [...currentSelection, fileId]
+ : currentSelection.filter(id => id !== fileId);
+
+ fileActions.setSelectedFiles(newSelectedIds);
+ }, [fileActions]);
+
+ const toggleFileSelection = useCallback((fileId: FileId) => {
+ const currentSelection = stateRef.current.ui.selectedFileIds;
+ const isCurrentlySelected = currentSelection.includes(fileId);
+
+ // If toggling on and at limit, don't allow
+ if (!isCurrentlySelected && currentSelection.length >= MAX_PAGE_EDITOR_FILES) {
+ console.warn(`Page editor supports maximum ${MAX_PAGE_EDITOR_FILES} files. Cannot select more files.`);
+ return;
+ }
+
+ // Update FileContext selection
+ const newSelectedIds = isCurrentlySelected
+ ? currentSelection.filter(id => id !== fileId)
+ : [...currentSelection, fileId];
+
+ fileActions.setSelectedFiles(newSelectedIds);
+ }, [fileActions]);
+
+ const selectAll = useCallback(() => {
+ const allFileIds = stateRef.current.files.ids;
+
+ if (allFileIds.length > MAX_PAGE_EDITOR_FILES) {
+ console.warn(`Page editor supports maximum ${MAX_PAGE_EDITOR_FILES} files. Only first ${MAX_PAGE_EDITOR_FILES} files will be selected.`);
+ fileActions.setSelectedFiles(allFileIds.slice(0, MAX_PAGE_EDITOR_FILES));
+ } else {
+ fileActions.setSelectedFiles(allFileIds);
+ }
+ }, [fileActions]);
+
+ const deselectAll = useCallback(() => {
+ fileActions.setSelectedFiles([]);
+ }, [fileActions]);
+
+ const reorderFiles = useCallback((fromIndex: number, toIndex: number) => {
+ // Reorder local fileOrder array (page editor workspace only)
+ const newOrder = [...fileOrder];
+ const [movedFileId] = newOrder.splice(fromIndex, 1);
+ newOrder.splice(toIndex, 0, movedFileId);
+ setFileOrder(newOrder);
+
+ // If current pages available, reorder them based on file move
+ if (currentPages && currentPages.length > 0 && fromIndex !== toIndex) {
+ // Get the current file order from pages (files that have pages loaded)
+ const currentFileOrder: FileId[] = [];
+ const filesSeen = new Set();
+ currentPages.forEach(page => {
+ const fileId = page.originalFileId;
+ if (fileId && !filesSeen.has(fileId)) {
+ filesSeen.add(fileId);
+ currentFileOrder.push(fileId);
+ }
+ });
+
+ // Get the target file ID from the NEW order (after the move)
+ // When moving down: we want to position after the file at toIndex-1 (file just before insertion)
+ // When moving up: we want to position before the file at toIndex+1 (file just after insertion)
+ const targetFileId = fromIndex < toIndex
+ ? newOrder[toIndex - 1] // Moving down: target is the file just before where we inserted
+ : newOrder[toIndex + 1]; // Moving up: target is the file just after where we inserted
+
+ // Find their positions in the current page order (not the full file list)
+ const pageOrderFromIndex = currentFileOrder.findIndex(id => id === movedFileId);
+ const pageOrderToIndex = currentFileOrder.findIndex(id => id === targetFileId);
+
+ // Only reorder pages if both files have pages loaded
+ if (pageOrderFromIndex >= 0 && pageOrderToIndex >= 0) {
+ const reorderedPagesResult = reorderPagesForFileMove(currentPages, pageOrderFromIndex, pageOrderToIndex, currentFileOrder);
+ setReorderedPages(reorderedPagesResult);
+ }
+ }
+ }, [fileOrder, currentPages]);
+
+ const updateFileOrderFromPages = useCallback((pages: PDFPage[]) => {
+ if (!pages || pages.length === 0) return;
+
+ // Compute the new file order based on page positions
+ const newFileOrder = computeFileOrderFromPages(pages);
+
+ if (newFileOrder.length > 0) {
+ // Update local page editor file order (not FileContext)
+ setFileOrder(newFileOrder);
+ }
+ }, []);
+
+
+ const value: PageEditorContextValue = useMemo(() => ({
+ currentPages,
+ updateCurrentPages,
+ reorderedPages,
+ clearReorderedPages,
+ fileOrder,
+ setFileOrder,
+ setFileSelection,
+ toggleFileSelection,
+ selectAll,
+ deselectAll,
+ reorderFiles,
+ updateFileOrderFromPages,
+ }), [
+ currentPages,
+ updateCurrentPages,
+ reorderedPages,
+ clearReorderedPages,
+ fileOrder,
+ setFileSelection,
+ toggleFileSelection,
+ selectAll,
+ deselectAll,
+ reorderFiles,
+ updateFileOrderFromPages,
+ ]);
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function usePageEditor() {
+ const context = useContext(PageEditorContext);
+ if (!context) {
+ throw new Error('usePageEditor must be used within PageEditorProvider');
+ }
+ return context;
+}
diff --git a/frontend/src/core/contexts/PreferencesContext.tsx b/frontend/src/core/contexts/PreferencesContext.tsx
index b28d1b35b..482e0fed0 100644
--- a/frontend/src/core/contexts/PreferencesContext.tsx
+++ b/frontend/src/core/contexts/PreferencesContext.tsx
@@ -34,14 +34,14 @@ export const PreferencesProvider: React.FC<{ children: React.ReactNode }> = ({ c
setPreferences(preferencesService.getAllPreferences());
}, []);
+ const value = React.useMemo(() => ({
+ preferences,
+ updatePreference,
+ resetPreferences,
+ }), [preferences, updatePreference, resetPreferences]);
+
return (
-
+
{children}
);
diff --git a/frontend/src/core/contexts/ViewerContext.tsx b/frontend/src/core/contexts/ViewerContext.tsx
index 8e0bea44a..8afc1a9ea 100644
--- a/frontend/src/core/contexts/ViewerContext.tsx
+++ b/frontend/src/core/contexts/ViewerContext.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, ReactNode, useRef } from 'react';
+import React, { createContext, useContext, useState, ReactNode, useRef, useMemo, useCallback } from 'react';
import { SpreadMode } from '@embedpdf/plugin-spread/react';
import { useNavigation } from '@app/contexts/NavigationContext';
@@ -280,21 +280,21 @@ export const ViewerProvider: React.FC = ({ children }) => {
}
};
- const toggleThumbnailSidebar = () => {
+ const toggleThumbnailSidebar = useCallback(() => {
setIsThumbnailSidebarVisible(prev => !prev);
- };
+ }, []);
- const toggleAnnotationsVisibility = () => {
+ const toggleAnnotationsVisibility = useCallback(() => {
setIsAnnotationsVisible(prev => !prev);
- };
+ }, []);
- const setAnnotationMode = (enabled: boolean) => {
+ const setAnnotationMode = useCallback((enabled: boolean) => {
setIsAnnotationModeState(enabled);
- };
+ }, []);
- const toggleAnnotationMode = () => {
+ const toggleAnnotationMode = useCallback(() => {
setIsAnnotationModeState(prev => !prev);
- };
+ }, []);
// State getters - read from bridge refs
const getScrollState = (): ScrollState => {
@@ -334,7 +334,7 @@ export const ViewerProvider: React.FC = ({ children }) => {
};
// Action handlers - call APIs directly
- const scrollActions = {
+ const scrollActions = useMemo(() => ({
scrollToPage: (page: number) => {
const api = bridgeRefs.current.scroll?.api;
if (api?.scrollToPage) {
@@ -366,9 +366,9 @@ export const ViewerProvider: React.FC = ({ children }) => {
api.scrollToPage({ pageNumber: scrollState.totalPages });
}
}
- };
+ }), []);
- const zoomActions = {
+ const zoomActions = useMemo(() => ({
zoomIn: () => {
const api = bridgeRefs.current.zoom?.api;
if (api?.zoomIn) {
@@ -405,9 +405,9 @@ export const ViewerProvider: React.FC = ({ children }) => {
api.requestZoom(level);
}
}
- };
+ }), []);
- const panActions = {
+ const panActions = useMemo(() => ({
enablePan: () => {
const api = bridgeRefs.current.pan?.api;
if (api?.enable) {
@@ -426,9 +426,9 @@ export const ViewerProvider: React.FC = ({ children }) => {
api.toggle();
}
}
- };
+ }), []);
- const selectionActions = {
+ const selectionActions = useMemo(() => ({
copyToClipboard: () => {
const api = bridgeRefs.current.selection?.api;
if (api?.copyToClipboard) {
@@ -449,9 +449,9 @@ export const ViewerProvider: React.FC = ({ children }) => {
}
return null;
}
- };
+ }), []);
- const spreadActions = {
+ const spreadActions = useMemo(() => ({
setSpreadMode: (mode: SpreadMode) => {
const api = bridgeRefs.current.spread?.api;
if (api?.setSpreadMode) {
@@ -471,9 +471,9 @@ export const ViewerProvider: React.FC = ({ children }) => {
api.toggleSpreadMode();
}
}
- };
+ }), []);
- const rotationActions = {
+ const rotationActions = useMemo(() => ({
rotateForward: () => {
const api = bridgeRefs.current.rotation?.api;
if (api?.rotateForward) {
@@ -499,9 +499,9 @@ export const ViewerProvider: React.FC = ({ children }) => {
}
return 0;
}
- };
+ }), []);
- const searchActions = {
+ const searchActions = useMemo(() => ({
search: async (query: string) => {
const api = bridgeRefs.current.search?.api;
if (api?.search) {
@@ -526,9 +526,9 @@ export const ViewerProvider: React.FC = ({ children }) => {
api.clear();
}
}
- };
+ }), []);
- const exportActions = {
+ const exportActions = useMemo(() => ({
download: () => {
const api = bridgeRefs.current.export?.api;
if (api?.download) {
@@ -548,29 +548,29 @@ export const ViewerProvider: React.FC = ({ children }) => {
}
return null;
}
- };
+ }), []);
- const registerImmediateZoomUpdate = (callback: (percent: number) => void) => {
+ const registerImmediateZoomUpdate = useCallback((callback: (percent: number) => void) => {
immediateZoomUpdateCallback.current = callback;
- };
+ }, []);
- const registerImmediateScrollUpdate = (callback: (currentPage: number, totalPages: number) => void) => {
+ const registerImmediateScrollUpdate = useCallback((callback: (currentPage: number, totalPages: number) => void) => {
immediateScrollUpdateCallback.current = callback;
- };
+ }, []);
- const triggerImmediateScrollUpdate = (currentPage: number, totalPages: number) => {
+ const triggerImmediateScrollUpdate = useCallback((currentPage: number, totalPages: number) => {
if (immediateScrollUpdateCallback.current) {
immediateScrollUpdateCallback.current(currentPage, totalPages);
}
- };
+ }, []);
- const triggerImmediateZoomUpdate = (zoomPercent: number) => {
+ const triggerImmediateZoomUpdate = useCallback((zoomPercent: number) => {
if (immediateZoomUpdateCallback.current) {
immediateZoomUpdateCallback.current(zoomPercent);
}
- };
+ }, []);
- const value: ViewerContextType = {
+ const value = useMemo(() => ({
// UI state
isThumbnailSidebarVisible,
toggleThumbnailSidebar,
@@ -615,7 +615,20 @@ export const ViewerProvider: React.FC = ({ children }) => {
// Bridge registration
registerBridge,
- };
+ }), [
+ isThumbnailSidebarVisible,
+ isAnnotationsVisible,
+ isAnnotationMode,
+ activeFileIndex,
+ scrollActions,
+ zoomActions,
+ panActions,
+ selectionActions,
+ spreadActions,
+ rotationActions,
+ searchActions,
+ exportActions,
+ ]);
return (
diff --git a/frontend/src/core/contexts/file/FileReducer.ts b/frontend/src/core/contexts/file/FileReducer.ts
index 2baa22a86..7cb46c05c 100644
--- a/frontend/src/core/contexts/file/FileReducer.ts
+++ b/frontend/src/core/contexts/file/FileReducer.ts
@@ -75,20 +75,43 @@ export function fileContextReducer(state: FileContextState, action: FileContextA
const { stirlingFileStubs } = action.payload;
const newIds: FileId[] = [];
const newById: Record = { ...state.files.byId };
+ let hasInsertionPosition = false;
stirlingFileStubs.forEach(record => {
// Only add if not already present (dedupe by stable ID)
if (!newById[record.id]) {
newIds.push(record.id);
+
+ // Track if any file has an insertion position
+ if (record.insertAfterPageId) {
+ hasInsertionPosition = true;
+ }
+
+ // Store record WITH insertAfterPageId temporarily
+ // PageEditorContext will read it and clear it
newById[record.id] = record;
}
});
+ // Determine final file order
+ // NOTE: If files have insertAfterPageId, we just append to end
+ // The page-level insertion is handled by usePageDocument
+ const finalIds = [...state.files.ids, ...newIds];
+
+ // Auto-select inserted files
+ const newSelectedFileIds = hasInsertionPosition
+ ? [...state.ui.selectedFileIds, ...newIds]
+ : state.ui.selectedFileIds;
+
return {
...state,
files: {
- ids: [...state.files.ids, ...newIds],
+ ids: finalIds,
byId: newById
+ },
+ ui: {
+ ...state.ui,
+ selectedFileIds: newSelectedFileIds
}
};
}
@@ -149,17 +172,13 @@ export function fileContextReducer(state: FileContextState, action: FileContextA
// Validate that all IDs exist in current state
const validIds = orderedFileIds.filter(id => state.files.byId[id]);
- // Reorder selected files by passed order
- const selectedFileIds = orderedFileIds.filter(id => state.ui.selectedFileIds.includes(id));
+
+ // Don't touch selectedFileIds - it's just a reference list, order doesn't matter
return {
...state,
files: {
...state.files,
ids: validIds
- },
- ui: {
- ...state.ui,
- selectedFileIds,
}
};
}
diff --git a/frontend/src/core/hooks/tools/shared/useBaseParameters.ts b/frontend/src/core/hooks/tools/shared/useBaseParameters.ts
index 941f8cdd2..7dd021752 100644
--- a/frontend/src/core/hooks/tools/shared/useBaseParameters.ts
+++ b/frontend/src/core/hooks/tools/shared/useBaseParameters.ts
@@ -34,16 +34,17 @@ export function useBaseParameters(config: BaseParametersConfig): BaseParam
}, [parameters, config.validateFn]);
const endpointName = config.endpointName;
- let getEndpointName: () => string;
- if (typeof endpointName === "string") {
- getEndpointName = useCallback(() => {
- return endpointName;
- }, []);
- } else {
- getEndpointName = useCallback(() => {
- return endpointName(parameters);
- }, [parameters]);
- }
+ const isStringEndpoint = typeof endpointName === "string";
+
+ const getEndpointNameString = useCallback(() => {
+ return endpointName as string;
+ }, [endpointName]);
+
+ const getEndpointNameFunction = useCallback(() => {
+ return (endpointName as (params: T) => string)(parameters);
+ }, [endpointName, parameters]);
+
+ const getEndpointName = isStringEndpoint ? getEndpointNameString : getEndpointNameFunction;
return {
parameters,
diff --git a/frontend/src/core/tools/Split.tsx b/frontend/src/core/tools/Split.tsx
index 769a25a08..d90afb6f8 100644
--- a/frontend/src/core/tools/Split.tsx
+++ b/frontend/src/core/tools/Split.tsx
@@ -21,11 +21,16 @@ const Split = (props: BaseToolProps) => {
);
const methodTips = useSplitMethodTips();
- const settingsTips = useSplitSettingsTips(base.params.parameters.method);
+ const allSettingsTips = useSplitSettingsTips();
+
+ // Get tooltip content for the currently selected method
+ const settingsTips = base.params.parameters.method
+ ? allSettingsTips[base.params.parameters.method]
+ : null;
// Get tooltip content for a specific method
const getMethodTooltip = (option: MethodOption) => {
- const tooltipContent = useSplitSettingsTips(option.value);
+ const tooltipContent = allSettingsTips[option.value];
return tooltipContent?.tips || [];
};
@@ -50,8 +55,7 @@ const Split = (props: BaseToolProps) => {
{
title: t("split.steps.chooseMethod", "Choose Method"),
isCollapsed: !!base.params.parameters.method, // Collapse when method is selected
- onCollapsedClick: () => base.params.updateParameter('method', '')
- ,
+ onCollapsedClick: () => base.params.updateParameter('method', ''),
tooltip: methodTips,
content: (
@@ -86,7 +90,7 @@ const Split = (props: BaseToolProps) => {
review: {
isVisible: base.hasResults,
operation: base.operation,
- title: "Split Results",
+ title: t("split.resultsTitle", "Split Results"),
onFileClick: base.handleThumbnailClick,
onUndo: base.handleUndo,
},
diff --git a/frontend/src/core/types/pageEditor.ts b/frontend/src/core/types/pageEditor.ts
index 5c46ed063..60c1e1988 100644
--- a/frontend/src/core/types/pageEditor.ts
+++ b/frontend/src/core/types/pageEditor.ts
@@ -1,4 +1,9 @@
+<<<<<<< HEAD:frontend/src/core/types/pageEditor.ts
import { FileId } from '@app/types/file';
+=======
+import { FileId } from './file';
+import { PageBreakSettings } from '../components/pageEditor/commands/pageCommands';
+>>>>>>> feature/v2/selected-pageeditor:frontend/src/types/pageEditor.ts
export interface PDFPage {
id: string;
@@ -9,7 +14,9 @@ export interface PDFPage {
selected: boolean;
splitAfter?: boolean;
isBlankPage?: boolean;
+ isPlaceholder?: boolean;
originalFileId?: FileId;
+ pageBreakSettings?: PageBreakSettings;
}
export interface PDFDocument {