zemion/pdf-tools
1
0
Fork 0
Code Issues Pull Requests Releases Activity

mostly formatting, dependency fix

Browse Source
This commit is contained in:
zemion
2026-05-17 02:39:32 +02:00
parent a5dc70aabf
commit cf9a0dd0b7
32 changed files with 837 additions and 836 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
prettierignore.txt → .prettierignore
View File

0
prettierrc.json → .prettierrc.json
View File

42
eslint.config.mjs
View File

@@ -1,49 +1,49 @@
import js from "@eslint/js";
import eslintConfigPrettier from "eslint-config-prettier";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import globals from "globals";
import tseslint from "typescript-eslint";
import js from '@eslint/js';
import eslintConfigPrettier from 'eslint-config-prettier';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import globals from 'globals';
import tseslint from 'typescript-eslint';
export default tseslint.config(
{
ignores: ["dist", "coverage", "node_modules"],
ignores: ['dist', 'coverage', 'node_modules'],
},
js.configs.recommended,
...tseslint.configs.recommended,
{
files: ["**/*.{ts,tsx}"],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2022,
sourceType: "module",
sourceType: 'module',
globals: {
...globals.browser,
...globals.es2022,
},
},
plugins: {
"react-hooks": reactHooks,
"react-refresh": reactRefresh,
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
"react-refresh/only-export-components": [
"warn",
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
"react-hooks/set-state-in-effect": "off",
"@typescript-eslint/no-unused-vars": [
"warn",
'react-hooks/set-state-in-effect': 'off',
'@typescript-eslint/no-unused-vars': [
'warn',
{
argsIgnorePattern: "^_",
varsIgnorePattern: "^_",
caughtErrorsIgnorePattern: "^_",
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
caughtErrorsIgnorePattern: '^_',
},
],
},
},
{
files: ["*.config.{js,ts}", "eslint.config.js"],
files: ['*.config.{js,ts}', 'eslint.config.js'],
languageOptions: {
globals: {
...globals.node,
@@ -51,5 +51,5 @@ export default tseslint.config(
},
},
},
eslintConfigPrettier,
eslintConfigPrettier
);

281
src/App.tsx
View File

@@ -1,19 +1,19 @@
import React, { useCallback, useEffect, useState } from "react";
import Layout from "./components/Layout";
import FileLoader from "./components/FileLoader";
import ReorderPanel from "./components/ReorderPanel";
import ActionsPanel from "./components/ActionsPanel";
import PagePreviewModal from "./components/PagePreviewModal";
import WorkspacePanel from "./components/WorkspacePanel";
import React, { useCallback, useEffect, useState } from 'react';
import Layout from './components/Layout';
import FileLoader from './components/FileLoader';
import ReorderPanel from './components/ReorderPanel';
import ActionsPanel from './components/ActionsPanel';
import PagePreviewModal from './components/PagePreviewModal';
import WorkspacePanel from './components/WorkspacePanel';
import ActionDialog, {
type ActionDialogAction,
} from "./components/ActionDialog";
import HelpDialog from "./components/HelpDialog";
import { PDFDocument } from "pdf-lib";
} from './components/ActionDialog';
import HelpDialog from './components/HelpDialog';
import { PDFDocument } from 'pdf-lib';
import type {
StoredWorkspace,
WorkspaceSummary,
} from "./workspace/workspaceTypes";
} from './workspace/workspaceTypes';
import {
createInitialPageRefs,
createPageRefId,
@@ -22,22 +22,22 @@ import {
defaultWorkspaceNameFromPdfName,
normalizeRotation,
useWorkspaceState,
} from "./workspace/useWorkspaceState";
} from './workspace/useWorkspaceState';
import {
deleteWorkspaceFromIndexedDb,
listWorkspaces,
loadWorkspaceFromIndexedDb,
saveWorkspaceToIndexedDb,
} from "./workspace/workspaceDb";
import type { PageRef, PdfFile } from "./pdf/pdfTypes";
} from './workspace/workspaceDb';
import type { PageRef, PdfFile } from './pdf/pdfTypes';
import {
loadPdfFromFile,
mergePdfFiles,
splitIntoSinglePages,
exportPages,
} from "./pdf/pdfService";
import { usePdfThumbnails } from "./pdf/usePdfThumbnails";
import { usePdfGeneratedOutputs } from "./hooks/usePdfGeneratedOutputs";
} from './pdf/pdfService';
import { usePdfThumbnails } from './pdf/usePdfThumbnails';
import { usePdfGeneratedOutputs } from './hooks/usePdfGeneratedOutputs';
import {
createSelectionPdfName,
createSelectionWorkspaceName,
@@ -50,9 +50,9 @@ function isEditableKeyboardTarget(target: EventTarget | null): boolean {
const tagName = target.tagName.toLowerCase();
return (
target.isContentEditable ||
tagName === "input" ||
tagName === "textarea" ||
tagName === "select"
tagName === 'input' ||
tagName === 'textarea' ||
tagName === 'select'
);
}
@@ -70,18 +70,18 @@ const App: React.FC = () => {
const [workspaces, setWorkspaces] = useState<WorkspaceSummary[]>([]);
const [activeWorkspaceId, setActiveWorkspaceId] = useState<string | null>(
null,
null
);
const [workspaceName, setWorkspaceName] = useState("");
const [workspaceName, setWorkspaceName] = useState('');
const [previewPageId, setPreviewPageId] = useState<string | null>(null);
const [pendingFile, setPendingFile] = useState<File | null>(null);
const [showMergeOptions, setShowMergeOptions] = useState(false);
const [mergeMode, setMergeMode] = useState<
"overwrite" | "append" | "insertAt"
>("append");
const [mergeInsertAt, setMergeInsertAt] = useState<string>("");
'overwrite' | 'append' | 'insertAt'
>('append');
const [mergeInsertAt, setMergeInsertAt] = useState<string>('');
const {
splitDownloads,
@@ -123,7 +123,7 @@ const App: React.FC = () => {
console.error(thrown);
setError(message);
},
[],
[]
);
const { thumbnails: reorderThumbnails, clearThumbnailCache } =
@@ -154,7 +154,7 @@ const App: React.FC = () => {
setWorkspaces(summaries);
} catch (e) {
console.error(e);
setError("Failed to read saved workspaces from browser storage.");
setError('Failed to read saved workspaces from browser storage.');
}
};
@@ -165,7 +165,7 @@ const App: React.FC = () => {
const resetWorkspaceState = () => {
setPdf(null);
setActiveWorkspaceId(null);
setWorkspaceName("");
setWorkspaceName('');
resetWorkspaceCommandState();
clearGeneratedOutputs();
clearThumbnailCache();
@@ -183,7 +183,7 @@ const App: React.FC = () => {
const workspaceId = activeWorkspaceId ?? createWorkspaceId();
const existing = workspaces.find(
(workspace) => workspace.id === workspaceId,
(workspace) => workspace.id === workspaceId
);
const workspace: StoredWorkspace = {
@@ -221,7 +221,7 @@ const App: React.FC = () => {
} catch (e) {
console.error(e);
setError(
"Failed to save workspace. The browser storage quota may be full.",
'Failed to save workspace. The browser storage quota may be full.'
);
return false;
} finally {
@@ -242,7 +242,7 @@ const App: React.FC = () => {
}
openActionDialog({
title: "Reset workspace?",
title: 'Reset workspace?',
content: (
<>
<p style={{ marginTop: 0 }}>This workspace has unsaved changes.</p>
@@ -253,21 +253,21 @@ const App: React.FC = () => {
),
actions: [
{
label: "Cancel",
variant: "secondary",
label: 'Cancel',
variant: 'secondary',
onClick: closeActionDialog,
},
{
label: "Reset without saving",
variant: "danger",
label: 'Reset without saving',
variant: 'danger',
onClick: () => {
closeActionDialog();
performResetWorkspace();
},
},
{
label: "Save and reset",
variant: "primary",
label: 'Save and reset',
variant: 'primary',
autoFocus: true,
onClick: async () => {
closeActionDialog();
@@ -289,7 +289,7 @@ const App: React.FC = () => {
const loaded = await loadWorkspaceFromIndexedDb(workspaceId);
if (!loaded) {
setError("Workspace not found.");
setError('Workspace not found.');
await refreshWorkspaces();
return;
}
@@ -324,7 +324,7 @@ const App: React.FC = () => {
setWorkspaceName(loaded.workspace.name);
} catch (e) {
console.error(e);
setError("Failed to load workspace from browser storage.");
setError('Failed to load workspace from browser storage.');
} finally {
setIsBusy(false);
}
@@ -332,10 +332,10 @@ const App: React.FC = () => {
const handleDeleteWorkspace = (workspaceId: string) => {
const workspace = workspaces.find((item) => item.id === workspaceId);
const name = workspace?.name ?? "this workspace";
const name = workspace?.name ?? 'this workspace';
openActionDialog({
title: "Delete workspace?",
title: 'Delete workspace?',
content: (
<>
<p style={{ marginTop: 0 }}>
@@ -350,13 +350,13 @@ const App: React.FC = () => {
),
actions: [
{
label: "Cancel",
variant: "secondary",
label: 'Cancel',
variant: 'secondary',
onClick: closeActionDialog,
},
{
label: "Delete workspace",
variant: "danger",
label: 'Delete workspace',
variant: 'danger',
autoFocus: true,
onClick: () => {
closeActionDialog();
@@ -377,14 +377,14 @@ const App: React.FC = () => {
setActiveWorkspaceId(null);
setWorkspaceDirty(true);
setWorkspaceMessage(
"Saved workspace deleted. Current in-memory document remains open.",
'Saved workspace deleted. Current in-memory document remains open.'
);
}
await refreshWorkspaces();
} catch (e) {
console.error(e);
setError("Failed to delete workspace.");
setError('Failed to delete workspace.');
}
};
@@ -411,7 +411,7 @@ const App: React.FC = () => {
setWorkspaceName(defaultWorkspaceNameFromPdfName(loaded.name));
} catch (e) {
console.error(e);
setError("Failed to load PDF (see console).");
setError('Failed to load PDF (see console).');
} finally {
setIsBusy(false);
}
@@ -423,7 +423,7 @@ const App: React.FC = () => {
} else {
setPendingFile(file);
setShowMergeOptions(true);
setMergeMode("append");
setMergeMode('append');
setMergeInsertAt(String(pages.length + 1));
}
};
@@ -436,7 +436,7 @@ const App: React.FC = () => {
const handleMergeConfirm = async () => {
if (!pendingFile) return;
if (!pdf || mergeMode === "overwrite") {
if (!pdf || mergeMode === 'overwrite') {
await loadFileAsNew(pendingFile);
setPendingFile(null);
setShowMergeOptions(false);
@@ -464,12 +464,12 @@ const App: React.FC = () => {
// 3) Determine insert position (0-based)
let insertAt = pages.length; // default: append at end
if (mergeMode === "insertAt") {
if (mergeMode === 'insertAt') {
const parsed = parseInt(mergeInsertAt, 10);
if (Number.isFinite(parsed)) {
insertAt = Math.min(Math.max(parsed - 1, 0), pages.length);
}
} else if (mergeMode === "append") {
} else if (mergeMode === 'append') {
insertAt = pages.length;
}
@@ -495,7 +495,7 @@ const App: React.FC = () => {
setActiveWorkspaceId(null);
} catch (e) {
console.error(e);
setError("Failed to merge PDF (see console).");
setError('Failed to merge PDF (see console).');
} finally {
setIsBusy(false);
setPendingFile(null);
@@ -518,16 +518,16 @@ const App: React.FC = () => {
const handleKeyDown = (e: KeyboardEvent) => {
if (isEditableKeyboardTarget(e.target)) return;
if (e.key === "F1" || e.key === "?") {
if (e.key === 'F1' || e.key === '?') {
e.preventDefault();
setHelpOpen(true);
}
};
window.addEventListener("keydown", handleKeyDown);
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener("keydown", handleKeyDown);
window.removeEventListener('keydown', handleKeyDown);
};
}, []);
@@ -537,13 +537,13 @@ const App: React.FC = () => {
const afterPages = pages.map((page) =>
page.id === pageId
? { ...page, rotation: (normalizeRotation(page.rotation) + 90) % 360 }
: page,
: page
);
executeWorkspaceCommand(
createWorkspaceCommand({
type: "page.rotate",
label: "Rotated page clockwise",
type: 'page.rotate',
label: 'Rotated page clockwise',
before,
after: {
...before,
@@ -553,7 +553,7 @@ const App: React.FC = () => {
pageId,
degrees: 90,
},
}),
})
);
};
@@ -562,13 +562,13 @@ const App: React.FC = () => {
const afterPages = pages.map((page) =>
page.id === pageId
? { ...page, rotation: (normalizeRotation(page.rotation) + 270) % 360 }
: page,
: page
);
executeWorkspaceCommand(
createWorkspaceCommand({
type: "page.rotate",
label: "Rotated page counterclockwise",
type: 'page.rotate',
label: 'Rotated page counterclockwise',
before,
after: {
...before,
@@ -578,7 +578,7 @@ const App: React.FC = () => {
pageId,
degrees: -90,
},
}),
})
);
};
@@ -586,10 +586,10 @@ const App: React.FC = () => {
const page = pages.find((item) => item.id === pageId);
const visualIndex = page ? pages.indexOf(page) : -1;
const pageLabel =
visualIndex >= 0 ? `page at position ${visualIndex + 1}` : "this page";
visualIndex >= 0 ? `page at position ${visualIndex + 1}` : 'this page';
openActionDialog({
title: "Delete page?",
title: 'Delete page?',
content: (
<p style={{ margin: 0 }}>
Delete <strong>{pageLabel}</strong> from the current workspace?
@@ -597,13 +597,13 @@ const App: React.FC = () => {
),
actions: [
{
label: "Cancel",
variant: "secondary",
label: 'Cancel',
variant: 'secondary',
onClick: closeActionDialog,
},
{
label: "Delete page",
variant: "danger",
label: 'Delete page',
variant: 'danger',
autoFocus: true,
onClick: () => {
closeActionDialog();
@@ -619,8 +619,8 @@ const App: React.FC = () => {
executeWorkspaceCommand(
createWorkspaceCommand({
type: "page.delete",
label: "Deleted page",
type: 'page.delete',
label: 'Deleted page',
before,
after: {
pages: pages.filter((page) => page.id !== pageId),
@@ -630,7 +630,7 @@ const App: React.FC = () => {
details: {
pageId,
},
}),
})
);
};
@@ -639,8 +639,8 @@ const App: React.FC = () => {
executeWorkspaceCommand(
createWorkspaceCommand({
type: "pages.reorder",
label: "Reordered pages",
type: 'pages.reorder',
label: 'Reordered pages',
before,
after: {
...before,
@@ -649,14 +649,14 @@ const App: React.FC = () => {
details: {
pageCount: newPages.length,
},
}),
})
);
};
const handleToggleSelect = (
pageId: string,
visualIndex: number,
e: React.MouseEvent<HTMLButtonElement>,
e: React.MouseEvent<HTMLButtonElement>
) => {
setSelectedPageIds((prev) => {
if (e.shiftKey && lastSelectedVisualIndex !== null && pages.length > 0) {
@@ -731,28 +731,28 @@ const App: React.FC = () => {
openActionDialog({
title:
idsToDelete.length === 1
? "Delete selected page?"
: "Delete selected pages?",
? 'Delete selected page?'
: 'Delete selected pages?',
content: (
<p style={{ margin: 0 }}>
Delete{" "}
Delete{' '}
<strong>
{idsToDelete.length === 1
? "1 selected page"
? '1 selected page'
: `${idsToDelete.length} selected pages`}
</strong>{" "}
</strong>{' '}
from the current workspace?
</p>
),
actions: [
{
label: "Cancel",
variant: "secondary",
label: 'Cancel',
variant: 'secondary',
onClick: closeActionDialog,
},
{
label: idsToDelete.length === 1 ? "Delete page" : "Delete pages",
variant: "danger",
label: idsToDelete.length === 1 ? 'Delete page' : 'Delete pages',
variant: 'danger',
autoFocus: true,
onClick: () => {
closeActionDialog();
@@ -795,10 +795,10 @@ const App: React.FC = () => {
executeWorkspaceCommand(
createWorkspaceCommand({
type: "pages.copy",
type: 'pages.copy',
label:
copiedPages.length === 1
? "Copied page"
? 'Copied page'
: `Copied ${copiedPages.length} pages`,
before,
after: {
@@ -810,7 +810,7 @@ const App: React.FC = () => {
count: copiedPages.length,
insertSlot: clampedSlot,
},
}),
})
);
};
@@ -852,7 +852,7 @@ const App: React.FC = () => {
const key = e.key.toLowerCase();
if ((e.ctrlKey || e.metaKey) && key === "z") {
if ((e.ctrlKey || e.metaKey) && key === 'z') {
e.preventDefault();
if (e.shiftKey) {
handleRedo();
@@ -862,13 +862,13 @@ const App: React.FC = () => {
return;
}
if ((e.ctrlKey || e.metaKey) && key === "y") {
if ((e.ctrlKey || e.metaKey) && key === 'y') {
e.preventDefault();
handleRedo();
return;
}
if ((e.ctrlKey || e.metaKey) && key === "a") {
if ((e.ctrlKey || e.metaKey) && key === 'a') {
e.preventDefault();
setSelectedPageIds(pages.map((page) => page.id));
setLastSelectedVisualIndex(null);
@@ -876,7 +876,7 @@ const App: React.FC = () => {
}
if (
(e.key === "Delete" || e.key === "Backspace") &&
(e.key === 'Delete' || e.key === 'Backspace') &&
selectedPageIds.length > 0
) {
e.preventDefault();
@@ -884,17 +884,17 @@ const App: React.FC = () => {
return;
}
if (e.key === "Escape" && selectedPageIds.length > 0) {
if (e.key === 'Escape' && selectedPageIds.length > 0) {
e.preventDefault();
setSelectedPageIds([]);
setLastSelectedVisualIndex(null);
}
};
window.addEventListener("keydown", handleKeyDown);
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener("keydown", handleKeyDown);
window.removeEventListener('keydown', handleKeyDown);
};
}, [
hasPdf,
@@ -919,7 +919,7 @@ const App: React.FC = () => {
replaceSplitResults(result);
} catch (e) {
console.error(e);
setError("Error while splitting PDF (see console).");
setError('Error while splitting PDF (see console).');
} finally {
setIsBusy(false);
}
@@ -939,18 +939,17 @@ const App: React.FC = () => {
if (selectedPages.length === 0) return;
const blob = await exportPages(pdf, selectedPages);
const base = pdf.name.replace(/\.pdf$/i, "");
const base = pdf.name.replace(/\.pdf$/i, '');
const filename = `${base}_selected.pdf`;
replaceSubsetResult(blob, filename);
} catch (e) {
console.error(e);
setError("Error while extracting selected pages (see console).");
setError('Error while extracting selected pages (see console).');
} finally {
setIsBusy(false);
}
};
const performOpenSelectionAsWorkspace = async () => {
if (!pdf || selectedPageIds.length === 0) return;
@@ -988,7 +987,7 @@ const App: React.FC = () => {
redoHistory: [],
dirty: true,
message: `Created a new workspace from ${selectedPageCount} selected ${
selectedPageCount === 1 ? "page" : "pages"
selectedPageCount === 1 ? 'page' : 'pages'
}.`,
});
@@ -999,7 +998,7 @@ const App: React.FC = () => {
clearThumbnailCache();
} catch (e) {
console.error(e);
setError("Error while opening selection as a new workspace.");
setError('Error while opening selection as a new workspace.');
} finally {
setIsBusy(false);
}
@@ -1017,13 +1016,13 @@ const App: React.FC = () => {
}
openActionDialog({
title: "Open selection as new workspace?",
title: 'Open selection as new workspace?',
content: (
<>
<p style={{ marginTop: 0 }}>
This will replace the current in-memory workspace with a new
workspace built from {selectedPages.length}{' '}
{selectedPages.length === 1 ? "selected page" : "selected pages"}.
{selectedPages.length === 1 ? 'selected page' : 'selected pages'}.
</p>
<p style={{ marginBottom: 0 }}>
The current workspace has unsaved changes. Do you want to save it
@@ -1033,21 +1032,21 @@ const App: React.FC = () => {
),
actions: [
{
label: "Cancel",
variant: "secondary",
label: 'Cancel',
variant: 'secondary',
onClick: closeActionDialog,
},
{
label: "Open without saving",
variant: "danger",
label: 'Open without saving',
variant: 'danger',
onClick: () => {
closeActionDialog();
void performOpenSelectionAsWorkspace();
},
},
{
label: "Save and open",
variant: "primary",
label: 'Save and open',
variant: 'primary',
autoFocus: true,
onClick: async () => {
closeActionDialog();
@@ -1068,12 +1067,12 @@ const App: React.FC = () => {
try {
const blob = await exportPages(pdf, pages);
const base = pdf.name.replace(/\.pdf$/i, "");
const base = pdf.name.replace(/\.pdf$/i, '');
const filename = `${base}_reordered.pdf`;
replaceExportResult(blob, filename);
} catch (e) {
console.error(e);
setError("Error while exporting reordered PDF (see console).");
setError('Error while exporting reordered PDF (see console).');
} finally {
setIsBusy(false);
}
@@ -1120,62 +1119,62 @@ const App: React.FC = () => {
{showMergeOptions && pendingFile && pdf && pages.length > 0 && (
<div
className="card"
style={{ border: "1px solid #bfdbfe", background: "#eff6ff" }}
style={{ border: '1px solid #bfdbfe', background: '#eff6ff' }}
>
<h2>Open file: merge or replace?</h2>
<p style={{ fontSize: "0.85rem", color: "#374151" }}>
You already have <strong>{pdf.name}</strong> with {pages.length}{" "}
pages open. What should happen with{" "}
<p style={{ fontSize: '0.85rem', color: '#374151' }}>
You already have <strong>{pdf.name}</strong> with {pages.length}{' '}
pages open. What should happen with{' '}
<strong>{pendingFile.name}</strong>?
</p>
<div
style={{
display: "flex",
flexDirection: "column",
gap: "0.5rem",
marginTop: "0.5rem",
fontSize: "0.9rem",
display: 'flex',
flexDirection: 'column',
gap: '0.5rem',
marginTop: '0.5rem',
fontSize: '0.9rem',
}}
>
<label
style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}
style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}
>
<input
type="radio"
name="mergeMode"
value="overwrite"
checked={mergeMode === "overwrite"}
onChange={() => setMergeMode("overwrite")}
checked={mergeMode === 'overwrite'}
onChange={() => setMergeMode('overwrite')}
/>
<span>Replace current document</span>
</label>
<label
style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}
style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}
>
<input
type="radio"
name="mergeMode"
value="append"
checked={mergeMode === "append"}
onChange={() => setMergeMode("append")}
checked={mergeMode === 'append'}
onChange={() => setMergeMode('append')}
/>
<span>Merge and append pages at the end</span>
</label>
<label
style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}
style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}
>
<input
type="radio"
name="mergeMode"
value="insertAt"
checked={mergeMode === "insertAt"}
onChange={() => setMergeMode("insertAt")}
checked={mergeMode === 'insertAt'}
onChange={() => setMergeMode('insertAt')}
/>
<span>
Merge and insert starting at position{" "}
Merge and insert starting at position{' '}
<input
type="number"
min={1}
@@ -1183,19 +1182,19 @@ const App: React.FC = () => {
value={mergeInsertAt}
onChange={(e) => setMergeInsertAt(e.target.value)}
style={{
width: "4rem",
padding: "0.15rem 0.3rem",
fontSize: "0.85rem",
width: '4rem',
padding: '0.15rem 0.3rem',
fontSize: '0.85rem',
}}
/>{" "}
<span style={{ color: "#6b7280" }}>
/>{' '}
<span style={{ color: '#6b7280' }}>
(1 = before first page, {pages.length + 1} = after last page)
</span>
</span>
</label>
</div>
<div className="button-row" style={{ marginTop: "0.75rem" }}>
<div className="button-row" style={{ marginTop: '0.75rem' }}>
<button
className="secondary"
type="button"
@@ -1210,7 +1209,7 @@ const App: React.FC = () => {
onClick={handleMergeConfirm}
disabled={isBusy}
>
{isBusy ? "Working…" : "Continue"}
{isBusy ? 'Working…' : 'Continue'}
</button>
</div>
</div>
@@ -1240,7 +1239,7 @@ const App: React.FC = () => {
selectedCount={selectedPageIds.length}
onSplit={handleSplit}
onExtractSelected={handleExtractSelected}
onOpenSelectionAsWorkspace={handleOpenSelectionAsWorkspace}
onOpenSelectionAsWorkspace={handleOpenSelectionAsWorkspace}
onExportReordered={handleExportReordered}
splitDownloads={splitDownloads}
subsetDownload={subsetDownload}
@@ -1250,7 +1249,7 @@ const App: React.FC = () => {
{error && (
<div
className="card"
style={{ border: "1px solid #fecaca", background: "#fef2f2" }}
style={{ border: '1px solid #fecaca', background: '#fef2f2' }}
>
<strong>Error:</strong> {error}
</div>
@@ -1272,7 +1271,7 @@ const App: React.FC = () => {
<ActionDialog
open={actionDialog !== null}
title={actionDialog?.title ?? ""}
title={actionDialog?.title ?? ''}
actions={actionDialog?.actions ?? []}
onClose={closeActionDialog}
>

118
src/components/ActionDialog.tsx
View File

@@ -1,9 +1,9 @@
import React, { useEffect } from "react";
import React, { useEffect } from 'react';
export interface ActionDialogAction {
label: string;
onClick: () => void | Promise<void>;
variant?: "primary" | "secondary" | "danger";
variant?: 'primary' | 'secondary' | 'danger';
disabled?: boolean;
autoFocus?: boolean;
title?: string;
@@ -18,21 +18,21 @@ interface ActionDialogProps {
}
const backgroundByVariant: Record<
NonNullable<ActionDialogAction["variant"]>,
NonNullable<ActionDialogAction['variant']>,
string
> = {
primary: "#2563eb",
secondary: "#e5e7eb",
danger: "#dc2626",
primary: '#2563eb',
secondary: '#e5e7eb',
danger: '#dc2626',
};
const colorByVariant: Record<
NonNullable<ActionDialogAction["variant"]>,
NonNullable<ActionDialogAction['variant']>,
string
> = {
primary: "white",
secondary: "#111827",
danger: "white",
primary: 'white',
secondary: '#111827',
danger: 'white',
};
const ActionDialog: React.FC<ActionDialogProps> = ({
@@ -46,16 +46,16 @@ const ActionDialog: React.FC<ActionDialogProps> = ({
if (!open) return;
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape") {
if (e.key === 'Escape') {
e.preventDefault();
onClose();
}
};
window.addEventListener("keydown", handleKeyDown);
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener("keydown", handleKeyDown);
window.removeEventListener('keydown', handleKeyDown);
};
}, [open, onClose]);
@@ -72,42 +72,42 @@ const ActionDialog: React.FC<ActionDialogProps> = ({
}
}}
style={{
position: "fixed",
position: 'fixed',
inset: 0,
zIndex: 70,
background: "rgba(15, 23, 42, 0.55)",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "1rem",
background: 'rgba(15, 23, 42, 0.55)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: '1rem',
}}
>
<div
style={{
width: "100%",
maxWidth: "440px",
background: "white",
borderRadius: "0.75rem",
boxShadow: "0 20px 40px rgba(15, 23, 42, 0.35)",
padding: "1rem",
display: "flex",
flexDirection: "column",
gap: "0.75rem",
width: '100%',
maxWidth: '440px',
background: 'white',
borderRadius: '0.75rem',
boxShadow: '0 20px 40px rgba(15, 23, 42, 0.35)',
padding: '1rem',
display: 'flex',
flexDirection: 'column',
gap: '0.75rem',
}}
>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: "0.75rem",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
gap: '0.75rem',
}}
>
<h2
id="action-dialog-title"
style={{
margin: 0,
fontSize: "1rem",
fontSize: '1rem',
}}
>
{title}
@@ -117,18 +117,18 @@ const ActionDialog: React.FC<ActionDialogProps> = ({
type="button"
onClick={onClose}
style={{
border: "none",
borderRadius: "999px",
width: "1.8rem",
height: "1.8rem",
background: "#e5e7eb",
color: "#111827",
cursor: "pointer",
fontSize: "1.1rem",
border: 'none',
borderRadius: '999px',
width: '1.8rem',
height: '1.8rem',
background: '#e5e7eb',
color: '#111827',
cursor: 'pointer',
fontSize: '1.1rem',
lineHeight: 1,
display: "flex",
alignItems: "center",
justifyContent: "center",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
aria-label="Close dialog"
>
@@ -138,8 +138,8 @@ const ActionDialog: React.FC<ActionDialogProps> = ({
<div
style={{
fontSize: "0.9rem",
color: "#4b5563",
fontSize: '0.9rem',
color: '#4b5563',
lineHeight: 1.45,
}}
>
@@ -148,15 +148,15 @@ const ActionDialog: React.FC<ActionDialogProps> = ({
<div
style={{
display: "flex",
justifyContent: "flex-end",
gap: "0.5rem",
flexWrap: "wrap",
marginTop: "0.25rem",
display: 'flex',
justifyContent: 'flex-end',
gap: '0.5rem',
flexWrap: 'wrap',
marginTop: '0.25rem',
}}
>
{actions.map((action) => {
const variant = action.variant ?? "secondary";
const variant = action.variant ?? 'secondary';
return (
<button
@@ -169,15 +169,15 @@ const ActionDialog: React.FC<ActionDialogProps> = ({
autoFocus={action.autoFocus}
title={action.title}
style={{
border: "none",
borderRadius: "0.5rem",
padding: "0.45rem 0.8rem",
border: 'none',
borderRadius: '0.5rem',
padding: '0.45rem 0.8rem',
background: action.disabled
? "#e5e7eb"
? '#e5e7eb'
: backgroundByVariant[variant],
color: action.disabled ? "#6b7280" : colorByVariant[variant],
cursor: action.disabled ? "default" : "pointer",
fontSize: "0.9rem",
color: action.disabled ? '#6b7280' : colorByVariant[variant],
cursor: action.disabled ? 'default' : 'pointer',
fontSize: '0.9rem',
}}
>
{action.label}

28
src/components/ActionsPanel.tsx
View File

@@ -1,8 +1,8 @@
import React from "react";
import React from 'react';
import type {
PdfDownload,
SplitPdfDownload,
} from "../hooks/usePdfGeneratedOutputs";
} from '../hooks/usePdfGeneratedOutputs';
interface ActionsPanelProps {
hasPdf: boolean;
@@ -47,20 +47,20 @@ const ActionsPanel: React.FC<ActionsPanelProps> = ({
return (
<div className="card">
<h2>Tools</h2>
<p style={{ fontSize: "0.85rem", color: "#6b7280" }}>
<p style={{ fontSize: '0.85rem', color: '#6b7280' }}>
Use these tools on the current in-memory document (reordered, rotated,
with deletions). Nothing is uploaded to a server.
</p>
<div
className="button-row"
style={{ justifyContent: "space-between", flexWrap: "wrap" }}
style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}
>
<button
className="secondary"
disabled={disabled}
onClick={onExportReordered}
style={{ flex: "1 1 45%" }}
style={{ flex: '1 1 45%' }}
>
🧾 Export new PDF
</button>
@@ -69,11 +69,11 @@ const ActionsPanel: React.FC<ActionsPanelProps> = ({
className="secondary"
disabled={disabled || selectedCount === 0}
onClick={handleExtractSelectedClick}
style={{ flex: "1 1 45%" }}
style={{ flex: '1 1 45%' }}
title={
selectedCount === 0
? "Select at least one page"
: "Create a PDF from selected pages"
? 'Select at least one page'
: 'Create a PDF from selected pages'
}
>
📤 Extract selected ({selectedCount})
@@ -97,15 +97,15 @@ const ActionsPanel: React.FC<ActionsPanelProps> = ({
className="secondary"
disabled={disabled}
onClick={onSplit}
style={{ flex: "1 1 45%" }}
style={{ flex: '1 1 45%' }}
>
📂 Split into single PDFs
</button>
</div>
{subsetDownload && (
<div style={{ marginTop: "0.5rem", fontSize: "0.9rem" }}>
<strong>Subset result:</strong>{" "}
<div style={{ marginTop: '0.5rem', fontSize: '0.9rem' }}>
<strong>Subset result:</strong>{' '}
<a
className="download-link"
href={subsetDownload.url}
@@ -117,8 +117,8 @@ const ActionsPanel: React.FC<ActionsPanelProps> = ({
)}
{exportDownload && (
<div style={{ marginTop: "0.5rem", fontSize: "0.9rem" }}>
<strong>Exported document:</strong>{" "}
<div style={{ marginTop: '0.5rem', fontSize: '0.9rem' }}>
<strong>Exported document:</strong>{' '}
<a
className="download-link"
href={exportDownload.url}
@@ -130,7 +130,7 @@ const ActionsPanel: React.FC<ActionsPanelProps> = ({
)}
{splitDownloads.length > 0 && (
<div style={{ marginTop: "0.75rem", fontSize: "0.9rem" }}>
<div style={{ marginTop: '0.75rem', fontSize: '0.9rem' }}>
<strong>Single-page PDFs:</strong>
<div>
{splitDownloads.map((download) => (

8
src/components/FileLoader.tsx
View File

@@ -1,5 +1,5 @@
import React from "react";
import type { PdfFile } from "../pdf/pdfTypes";
import React from 'react';
import type { PdfFile } from '../pdf/pdfTypes';
interface FileLoaderProps {
pdf: PdfFile | null;
@@ -11,7 +11,7 @@ const FileLoader: React.FC<FileLoaderProps> = ({ pdf, onFileLoaded }) => {
const file = e.target.files?.[0];
if (file) {
onFileLoaded(file);
e.target.value = "";
e.target.value = '';
}
};
@@ -22,7 +22,7 @@ const FileLoader: React.FC<FileLoaderProps> = ({ pdf, onFileLoaded }) => {
<input type="file" accept="application/pdf" onChange={handleChange} />
{pdf && (
<div style={{ marginTop: "0.75rem", fontSize: "0.9rem" }}>
<div style={{ marginTop: '0.75rem', fontSize: '0.9rem' }}>
<div>
<strong>Loaded:</strong> {pdf.name}
</div>

58
src/components/HelpDialog.tsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect } from "react";
import React, { useEffect } from 'react';
interface HelpDialogProps {
open: boolean;
@@ -6,55 +6,55 @@ interface HelpDialogProps {
}
const shortcuts = [
{ keys: "F1 / ?", description: "Open this help and tutorial dialog" },
{ keys: 'F1 / ?', description: 'Open this help and tutorial dialog' },
{
keys: "Ctrl/⌘ + A",
description: "Select all pages in the current workspace",
keys: 'Ctrl/⌘ + A',
description: 'Select all pages in the current workspace',
},
{
keys: "Delete / Backspace",
description: "Delete the selected pages after confirmation",
keys: 'Delete / Backspace',
description: 'Delete the selected pages after confirmation',
},
{
keys: "Esc",
description: "Clear the page selection or close an open dialog",
keys: 'Esc',
description: 'Clear the page selection or close an open dialog',
},
{ keys: "Ctrl/⌘ + Z", description: "Undo the latest workspace command" },
{ keys: 'Ctrl/⌘ + Z', description: 'Undo the latest workspace command' },
{
keys: "Ctrl/⌘ + Shift + Z",
description: "Redo the next workspace command",
keys: 'Ctrl/⌘ + Shift + Z',
description: 'Redo the next workspace command',
},
{ keys: "Ctrl/⌘ + Y", description: "Redo the next workspace command" },
{ keys: 'Ctrl/⌘ + Y', description: 'Redo the next workspace command' },
{
keys: "← / → in preview",
description: "Move to the previous or next page in the preview overlay",
keys: '← / → in preview',
description: 'Move to the previous or next page in the preview overlay',
},
];
const tutorialSteps = [
{
title: "1. Open a PDF or load a workspace",
body: "Start by selecting a local PDF file. If you saved workspaces before, you can restore one from browser storage instead.",
title: '1. Open a PDF or load a workspace',
body: 'Start by selecting a local PDF file. If you saved workspaces before, you can restore one from browser storage instead.',
},
{
title: "2. Arrange pages visually",
body: "Drag page cards to reorder them. Rotate single pages, open the large preview with a click, or remove pages you do not want in the export.",
title: '2. Arrange pages visually',
body: 'Drag page cards to reorder them. Rotate single pages, open the large preview with a click, or remove pages you do not want in the export.',
},
{
title: "3. Select, copy, and delete pages",
body: "Use the checkbox on a page card to select it. Shift-click extends a range. Dragging a selected page moves the whole selection; the copy controls duplicate selected pages into a chosen slot.",
title: '3. Select, copy, and delete pages',
body: 'Use the checkbox on a page card to select it. Shift-click extends a range. Dragging a selected page moves the whole selection; the copy controls duplicate selected pages into a chosen slot.',
},
{
title: "4. Extract selected pages or branch into a new workspace",
body: "Extract selected pages when you only need a download. Open the selection as a new workspace when you want to continue working on that subset.",
title: '4. Extract selected pages or branch into a new workspace',
body: 'Extract selected pages when you only need a download. Open the selection as a new workspace when you want to continue working on that subset.',
},
{
title: "5. Save your workspace or export a PDF",
body: "Saving a workspace keeps the current working state in this browser. Exporting creates a new PDF file for download.",
title: '5. Save your workspace or export a PDF',
body: 'Saving a workspace keeps the current working state in this browser. Exporting creates a new PDF file for download.',
},
{
title: "6. Use history deliberately",
body: "Each workspace operation is stored as a command with label and timestamp. Undo and redo walk through that command history.",
title: '6. Use history deliberately',
body: 'Each workspace operation is stored as a command with label and timestamp. Undo and redo walk through that command history.',
},
];
@@ -63,7 +63,7 @@ const HelpDialog: React.FC<HelpDialogProps> = ({ open, onClose }) => {
if (!open) return;
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key !== "Escape") return;
if (e.key !== 'Escape') return;
e.preventDefault();
e.stopPropagation();
@@ -71,10 +71,10 @@ const HelpDialog: React.FC<HelpDialogProps> = ({ open, onClose }) => {
onClose();
};
window.addEventListener("keydown", handleKeyDown, { capture: true });
window.addEventListener('keydown', handleKeyDown, { capture: true });
return () => {
window.removeEventListener("keydown", handleKeyDown, { capture: true });
window.removeEventListener('keydown', handleKeyDown, { capture: true });
};
}, [open, onClose]);

4
src/components/Layout.tsx
View File

@@ -1,5 +1,5 @@
import React from "react";
import { APP_VERSION } from "../version";
import React from 'react';
import { APP_VERSION } from '../version';
interface LayoutProps {
children: React.ReactNode;

157
src/components/PagePreviewModal.tsx
View File

@@ -1,7 +1,7 @@
import React, { useEffect, useRef } from "react";
import type { PdfFile } from "../pdf/pdfTypes";
import * as pdfjsLib from "pdfjs-dist";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker?worker&url";
import React, { useEffect, useRef } from 'react';
import type { PdfFile } from '../pdf/pdfTypes';
import * as pdfjsLib from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker?worker&url';
// pdf.js worker setup
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -43,28 +43,28 @@ const PagePreviewModal: React.FC<PagePreviewModalProps> = ({
if (!isOpen) return;
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape") {
if (e.key === 'Escape') {
e.preventDefault();
onClose();
return;
}
if (e.key === "ArrowLeft" && canGoPrevious) {
if (e.key === 'ArrowLeft' && canGoPrevious) {
e.preventDefault();
onPrevious();
return;
}
if (e.key === "ArrowRight" && canGoNext) {
if (e.key === 'ArrowRight' && canGoNext) {
e.preventDefault();
onNext();
}
};
window.addEventListener("keydown", handleKeyDown);
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener("keydown", handleKeyDown);
window.removeEventListener('keydown', handleKeyDown);
};
}, [isOpen, canGoPrevious, canGoNext, onPrevious, onNext, onClose]);
@@ -77,7 +77,7 @@ const PagePreviewModal: React.FC<PagePreviewModalProps> = ({
try {
const canvas = canvasRef.current;
if (canvas) {
const ctx = canvas.getContext("2d");
const ctx = canvas.getContext('2d');
if (ctx) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
@@ -102,7 +102,7 @@ const PagePreviewModal: React.FC<PagePreviewModalProps> = ({
const scale = Math.min(
maxWidth / viewport.width,
maxHeight / viewport.height,
maxHeight / viewport.height
);
const scaledViewport = page.getViewport({ scale });
@@ -110,7 +110,7 @@ const PagePreviewModal: React.FC<PagePreviewModalProps> = ({
const visibleCanvas = canvasRef.current;
if (!visibleCanvas) return;
const visibleCtx = visibleCanvas.getContext("2d");
const visibleCtx = visibleCanvas.getContext('2d');
if (!visibleCtx) return;
let canvasWidth = scaledViewport.width;
@@ -126,14 +126,15 @@ const PagePreviewModal: React.FC<PagePreviewModalProps> = ({
visibleCanvas.width = canvasWidth;
visibleCanvas.height = canvasHeight;
const baseCanvas = document.createElement("canvas");
const baseCtx = baseCanvas.getContext("2d");
const baseCanvas = document.createElement('canvas');
const baseCtx = baseCanvas.getContext('2d');
if (!baseCtx) return;
baseCanvas.width = scaledViewport.width;
baseCanvas.height = scaledViewport.height;
const renderTask = page.render({
canvas: baseCanvas,
canvasContext: baseCtx,
viewport: scaledViewport,
});
@@ -161,7 +162,7 @@ const PagePreviewModal: React.FC<PagePreviewModalProps> = ({
visibleCtx.drawImage(baseCanvas, 0, 0);
visibleCtx.restore();
} catch (e) {
console.error("Error rendering preview", e);
console.error('Error rendering preview', e);
}
})();
@@ -181,30 +182,30 @@ const PagePreviewModal: React.FC<PagePreviewModalProps> = ({
<div
onClick={onClose}
style={{
position: "fixed",
position: 'fixed',
inset: 0,
background: "rgba(15, 23, 42, 0.8)",
background: 'rgba(15, 23, 42, 0.8)',
zIndex: 50,
display: "flex",
justifyContent: "center",
alignItems: "center",
padding: "1rem",
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
padding: '1rem',
}}
>
<div
onClick={(e) => e.stopPropagation()}
style={{
position: "relative",
background: "#111827",
borderRadius: "0.75rem",
padding: "0.75rem",
maxWidth: "90vw",
maxHeight: "90vh",
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "0.5rem",
overflow: "visible",
position: 'relative',
background: '#111827',
borderRadius: '0.75rem',
padding: '0.75rem',
maxWidth: '90vw',
maxHeight: '90vh',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '0.5rem',
overflow: 'visible',
}}
>
{/* Previous page */}
@@ -216,22 +217,22 @@ const PagePreviewModal: React.FC<PagePreviewModalProps> = ({
}}
disabled={!canGoPrevious}
style={{
position: "absolute",
position: 'absolute',
left: 0,
top: "50%",
transform: "translate(-50%, -50%)",
width: "2.5rem",
height: "2.5rem",
borderRadius: "999px",
border: "none",
background: canGoPrevious ? "#374151" : "#1f2937",
color: canGoPrevious ? "#e5e7eb" : "#6b7280",
cursor: canGoPrevious ? "pointer" : "default",
fontSize: "1.35rem",
top: '50%',
transform: 'translate(-50%, -50%)',
width: '2.5rem',
height: '2.5rem',
borderRadius: '999px',
border: 'none',
background: canGoPrevious ? '#374151' : '#1f2937',
color: canGoPrevious ? '#e5e7eb' : '#6b7280',
cursor: canGoPrevious ? 'pointer' : 'default',
fontSize: '1.35rem',
lineHeight: 1,
display: "flex",
alignItems: "center",
justifyContent: "center",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
zIndex: 2,
}}
title="Previous page (←)"
@@ -249,22 +250,22 @@ const PagePreviewModal: React.FC<PagePreviewModalProps> = ({
}}
disabled={!canGoNext}
style={{
position: "absolute",
position: 'absolute',
right: 0,
top: "50%",
transform: "translate(50%, -50%)",
width: "2.5rem",
height: "2.5rem",
borderRadius: "999px",
border: "none",
background: canGoNext ? "#374151" : "#1f2937",
color: canGoNext ? "#e5e7eb" : "#6b7280",
cursor: canGoNext ? "pointer" : "default",
fontSize: "1.35rem",
top: '50%',
transform: 'translate(50%, -50%)',
width: '2.5rem',
height: '2.5rem',
borderRadius: '999px',
border: 'none',
background: canGoNext ? '#374151' : '#1f2937',
color: canGoNext ? '#e5e7eb' : '#6b7280',
cursor: canGoNext ? 'pointer' : 'default',
fontSize: '1.35rem',
lineHeight: 1,
display: "flex",
alignItems: "center",
justifyContent: "center",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
zIndex: 2,
}}
title="Next page (→)"
@@ -281,22 +282,22 @@ const PagePreviewModal: React.FC<PagePreviewModalProps> = ({
onClose();
}}
style={{
position: "absolute",
position: 'absolute',
top: 0,
right: 0,
transform: "translate(50%, -50%)",
width: "2.25rem",
height: "2.25rem",
borderRadius: "999px",
border: "none",
background: "#374151",
color: "#e5e7eb",
cursor: "pointer",
fontSize: "1.2rem",
transform: 'translate(50%, -50%)',
width: '2.25rem',
height: '2.25rem',
borderRadius: '999px',
border: 'none',
background: '#374151',
color: '#e5e7eb',
cursor: 'pointer',
fontSize: '1.2rem',
lineHeight: 1,
display: "flex",
alignItems: "center",
justifyContent: "center",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
zIndex: 3,
}}
title="Close preview (Esc)"
@@ -308,14 +309,14 @@ const PagePreviewModal: React.FC<PagePreviewModalProps> = ({
<canvas
ref={canvasRef}
style={{
maxWidth: "100%",
maxHeight: "75vh",
background: "white",
borderRadius: "0.5rem",
maxWidth: '100%',
maxHeight: '75vh',
background: 'white',
borderRadius: '0.5rem',
}}
/>
<div style={{ color: "#e5e7eb", fontSize: "0.85rem" }}>
<div style={{ color: '#e5e7eb', fontSize: '0.85rem' }}>
{positionLabel} · Original page {pageIndex + 1} · Rot {rotation}°
</div>
</div>

148
src/components/PageWorkspace/CopyPagesDialog.tsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect } from "react";
import React, { useEffect } from 'react';
interface CopyPagesDialogProps {
selectedCount: number;
@@ -21,16 +21,16 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
}) => {
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape") {
if (e.key === 'Escape') {
e.preventDefault();
onCancel();
}
};
window.addEventListener("keydown", handleKeyDown);
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener("keydown", handleKeyDown);
window.removeEventListener('keydown', handleKeyDown);
};
}, [onCancel]);
@@ -45,43 +45,43 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
}
}}
style={{
position: "fixed",
position: 'fixed',
inset: 0,
zIndex: 60,
background: "rgba(15, 23, 42, 0.55)",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "1rem",
background: 'rgba(15, 23, 42, 0.55)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: '1rem',
}}
>
<form
onSubmit={onConfirm}
style={{
width: "100%",
maxWidth: "420px",
background: "white",
borderRadius: "0.75rem",
boxShadow: "0 20px 40px rgba(15, 23, 42, 0.35)",
padding: "1rem",
display: "flex",
flexDirection: "column",
gap: "0.75rem",
width: '100%',
maxWidth: '420px',
background: 'white',
borderRadius: '0.75rem',
boxShadow: '0 20px 40px rgba(15, 23, 42, 0.35)',
padding: '1rem',
display: 'flex',
flexDirection: 'column',
gap: '0.75rem',
}}
>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: "0.75rem",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
gap: '0.75rem',
}}
>
<h2
id="copy-pages-dialog-title"
style={{
margin: 0,
fontSize: "1rem",
fontSize: '1rem',
}}
>
Copy selected pages
@@ -91,18 +91,18 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
type="button"
onClick={onCancel}
style={{
border: "none",
borderRadius: "999px",
width: "1.8rem",
height: "1.8rem",
background: "#e5e7eb",
color: "#111827",
cursor: "pointer",
fontSize: "1.1rem",
border: 'none',
borderRadius: '999px',
width: '1.8rem',
height: '1.8rem',
background: '#e5e7eb',
color: '#111827',
cursor: 'pointer',
fontSize: '1.1rem',
lineHeight: 1,
display: "flex",
alignItems: "center",
justifyContent: "center",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
aria-label="Close copy dialog"
>
@@ -113,25 +113,25 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
<p
style={{
margin: 0,
fontSize: "0.9rem",
color: "#4b5563",
fontSize: '0.9rem',
color: '#4b5563',
}}
>
Copy{" "}
Copy{' '}
<strong>
{selectedCount === 1
? "1 selected page"
? '1 selected page'
: `${selectedCount} selected pages`}
</strong>{" "}
</strong>{' '}
to a new position.
</p>
<label
style={{
display: "flex",
flexDirection: "column",
gap: "0.25rem",
fontSize: "0.9rem",
display: 'flex',
flexDirection: 'column',
gap: '0.25rem',
fontSize: '0.9rem',
}}
>
Insert before position
@@ -143,18 +143,18 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
autoFocus
onChange={(e) => onTargetPositionChange(e.target.value)}
style={{
padding: "0.45rem 0.55rem",
borderRadius: "0.5rem",
border: "1px solid #d1d5db",
fontSize: "0.95rem",
padding: '0.45rem 0.55rem',
borderRadius: '0.5rem',
border: '1px solid #d1d5db',
fontSize: '0.95rem',
}}
/>
</label>
<div
style={{
fontSize: "0.8rem",
color: "#6b7280",
fontSize: '0.8rem',
color: '#6b7280',
lineHeight: 1.4,
}}
>
@@ -165,12 +165,12 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
{error && (
<div
style={{
borderRadius: "0.5rem",
background: "#fef2f2",
border: "1px solid #fecaca",
color: "#b91c1c",
padding: "0.5rem",
fontSize: "0.85rem",
borderRadius: '0.5rem',
background: '#fef2f2',
border: '1px solid #fecaca',
color: '#b91c1c',
padding: '0.5rem',
fontSize: '0.85rem',
}}
>
{error}
@@ -179,23 +179,23 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
<div
style={{
display: "flex",
justifyContent: "flex-end",
gap: "0.5rem",
marginTop: "0.25rem",
display: 'flex',
justifyContent: 'flex-end',
gap: '0.5rem',
marginTop: '0.25rem',
}}
>
<button
type="button"
onClick={onCancel}
style={{
border: "none",
borderRadius: "0.5rem",
padding: "0.45rem 0.8rem",
background: "#e5e7eb",
color: "#111827",
cursor: "pointer",
fontSize: "0.9rem",
border: 'none',
borderRadius: '0.5rem',
padding: '0.45rem 0.8rem',
background: '#e5e7eb',
color: '#111827',
cursor: 'pointer',
fontSize: '0.9rem',
}}
>
Cancel
@@ -204,13 +204,13 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
<button
type="submit"
style={{
border: "none",
borderRadius: "0.5rem",
padding: "0.45rem 0.8rem",
background: "#16a34a",
color: "white",
cursor: "pointer",
fontSize: "0.9rem",
border: 'none',
borderRadius: '0.5rem',
padding: '0.45rem 0.8rem',
background: '#16a34a',
color: 'white',
cursor: 'pointer',
fontSize: '0.9rem',
}}
>
Copy pages

20
src/components/PageWorkspace/DropIndicator.tsx
View File

@@ -1,23 +1,23 @@
import React from "react";
import React from 'react';
interface DropIndicatorProps {
side: "left" | "right" | "end";
side: 'left' | 'right' | 'end';
color: string;
}
const DropIndicator: React.FC<DropIndicatorProps> = ({ side, color }) => {
const isEnd = side === "end";
const isEnd = side === 'end';
return (
<div
style={{
position: "absolute",
left: side === "left" ? "-4px" : isEnd ? "8px" : undefined,
right: side === "right" ? "-4px" : undefined,
top: "4px",
bottom: "4px",
width: "3px",
borderRadius: "999px",
position: 'absolute',
left: side === 'left' ? '-4px' : isEnd ? '8px' : undefined,
right: side === 'right' ? '-4px' : undefined,
top: '4px',
bottom: '4px',
width: '3px',
borderRadius: '999px',
background: color,
}}
/>

126
src/components/PageWorkspace/PageCard.tsx
View File

@@ -1,6 +1,6 @@
import React from "react";
import type { PageRef } from "../../pdf/pdfTypes";
import DropIndicator from "./DropIndicator";
import React from 'react';
import type { PageRef } from '../../pdf/pdfTypes';
import DropIndicator from './DropIndicator';
interface PageCardProps {
page: PageRef;
@@ -24,11 +24,11 @@ interface PageCardProps {
}
const pageActionButtonStyle: React.CSSProperties = {
border: "none",
borderRadius: "999px",
padding: "0.15rem 0.4rem",
fontSize: "0.75rem",
cursor: "pointer",
border: 'none',
borderRadius: '999px',
padding: '0.15rem 0.4rem',
fontSize: '0.75rem',
cursor: 'pointer',
};
const PageCard: React.FC<PageCardProps> = ({
@@ -53,11 +53,11 @@ const PageCard: React.FC<PageCardProps> = ({
}) => {
const background = isDraggingCard
? isCopyDragging
? "#dcfce7"
: "#dbeafe"
? '#dcfce7'
: '#dbeafe'
: selected
? "#eff6ff"
: "#f9fafb";
? '#eff6ff'
: '#f9fafb';
return (
<div
@@ -67,17 +67,17 @@ const PageCard: React.FC<PageCardProps> = ({
onDragOver={onDragOver}
onClick={onOpenPreview}
style={{
position: "relative",
width: "162px",
padding: "0.4rem",
borderRadius: "0.5rem",
border: "1px solid #e5e7eb",
position: 'relative',
width: '162px',
padding: '0.4rem',
borderRadius: '0.5rem',
border: '1px solid #e5e7eb',
background,
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "0.25rem",
cursor: isBusy ? "default" : isCopyDragging ? "copy" : "grab",
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '0.25rem',
cursor: isBusy ? 'default' : isCopyDragging ? 'copy' : 'grab',
opacity: isBusy ? 0.7 : 1,
}}
>
@@ -85,21 +85,21 @@ const PageCard: React.FC<PageCardProps> = ({
type="button"
onClick={onToggleSelect}
style={{
position: "absolute",
top: "4px",
left: "4px",
width: "20px",
height: "20px",
borderRadius: "0.4rem",
border: "1px solid #9ca3af",
background: selected ? "#2563eb" : "rgba(255,255,255,0.9)",
color: selected ? "white" : "transparent",
fontSize: "0.8rem",
display: "flex",
alignItems: "center",
justifyContent: "center",
position: 'absolute',
top: '4px',
left: '4px',
width: '20px',
height: '20px',
borderRadius: '0.4rem',
border: '1px solid #9ca3af',
background: selected ? '#2563eb' : 'rgba(255,255,255,0.9)',
color: selected ? 'white' : 'transparent',
fontSize: '0.8rem',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: 0,
cursor: "pointer",
cursor: 'pointer',
}}
title="Select page"
>
@@ -113,11 +113,11 @@ const PageCard: React.FC<PageCardProps> = ({
<div
style={{
width: "110px",
height: "90px",
display: "flex",
alignItems: "center",
justifyContent: "center",
width: '110px',
height: '90px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
{thumbnail ? (
@@ -125,41 +125,41 @@ const PageCard: React.FC<PageCardProps> = ({
src={thumbnail}
alt={`Page ${page.sourcePageIndex + 1}`}
style={{
maxWidth: "100%",
maxHeight: "100%",
width: "auto",
height: "auto",
objectFit: "contain",
borderRadius: "0.25rem",
border: "1px solid #e5e7eb",
background: "white",
maxWidth: '100%',
maxHeight: '100%',
width: 'auto',
height: 'auto',
objectFit: 'contain',
borderRadius: '0.25rem',
border: '1px solid #e5e7eb',
background: 'white',
}}
/>
) : (
<div
style={{
width: "60px",
height: "80px",
borderRadius: "0.25rem",
border: "1px dashed #d1d5db",
background: "#f3f4f6",
width: '60px',
height: '80px',
borderRadius: '0.25rem',
border: '1px dashed #d1d5db',
background: '#f3f4f6',
}}
/>
)}
</div>
<span style={{ fontSize: "0.8rem" }}>
<span style={{ fontSize: '0.8rem' }}>
Page {page.sourcePageIndex + 1}
</span>
<span style={{ fontSize: "0.7rem", color: "#6b7280" }}>
<span style={{ fontSize: '0.7rem', color: '#6b7280' }}>
Pos {visualIndex + 1} · Rot {page.rotation}°
</span>
<div
style={{
display: "flex",
gap: "0.25rem",
marginTop: "0.25rem",
display: 'flex',
gap: '0.25rem',
marginTop: '0.25rem',
}}
>
<button
@@ -170,7 +170,7 @@ const PageCard: React.FC<PageCardProps> = ({
}}
style={{
...pageActionButtonStyle,
background: "#e5e7eb",
background: '#e5e7eb',
}}
>
↻ 90°
@@ -184,7 +184,7 @@ const PageCard: React.FC<PageCardProps> = ({
}}
style={{
...pageActionButtonStyle,
background: "#e5e7eb",
background: '#e5e7eb',
}}
>
↺ 90°
@@ -198,8 +198,8 @@ const PageCard: React.FC<PageCardProps> = ({
}}
style={{
...pageActionButtonStyle,
background: "#fecaca",
color: "#b91c1c",
background: '#fecaca',
color: '#b91c1c',
}}
title="Remove this page from the exported PDF"
>

30
src/components/PageWorkspace/PageGrid.tsx
View File

@@ -1,7 +1,7 @@
import React from "react";
import type { PageRef } from "../../pdf/pdfTypes";
import DropIndicator from "./DropIndicator";
import PageCard from "./PageCard";
import React from 'react';
import type { PageRef } from '../../pdf/pdfTypes';
import DropIndicator from './DropIndicator';
import PageCard from './PageCard';
interface PageGridProps {
pages: PageRef[];
@@ -16,14 +16,14 @@ interface PageGridProps {
onDragStart: (visualIndex: number) => React.DragEventHandler<HTMLDivElement>;
onDragEnd: React.DragEventHandler<HTMLDivElement>;
onCardDragOver: (
visualIndex: number,
visualIndex: number
) => React.DragEventHandler<HTMLDivElement>;
onEndSlotDragOver: React.DragEventHandler<HTMLDivElement>;
onDrop: React.DragEventHandler<HTMLDivElement>;
onOpenPreview: (pageId: string) => void;
onToggleSelect: (
pageId: string,
visualIndex: number,
visualIndex: number
) => React.MouseEventHandler<HTMLButtonElement>;
onRotateClockwise: (pageId: string) => void;
onRotateCounterclockwise: (pageId: string) => void;
@@ -67,11 +67,11 @@ const PageGrid: React.FC<PageGridProps> = ({
return (
<div
style={{
display: "flex",
flexWrap: "wrap",
gap: "0.5rem",
alignItems: "flex-start",
marginBottom: "0.75rem",
display: 'flex',
flexWrap: 'wrap',
gap: '0.5rem',
alignItems: 'flex-start',
marginBottom: '0.75rem',
}}
onDrop={onDrop}
>
@@ -112,10 +112,10 @@ const PageGrid: React.FC<PageGridProps> = ({
onDragOver={onEndSlotDragOver}
onDrop={onDrop}
style={{
width: "20px",
height: "120px",
position: "relative",
alignSelf: "stretch",
width: '20px',
height: '120px',
position: 'relative',
alignSelf: 'stretch',
}}
>
{showEndLine() && (

52
src/components/PageWorkspace/PageSelectionToolbar.tsx
View File

@@ -1,4 +1,4 @@
import React from "react";
import React from 'react';
interface PageSelectionToolbarProps {
selectedCount: number;
@@ -9,10 +9,10 @@ interface PageSelectionToolbarProps {
}
const pillButtonStyle: React.CSSProperties = {
border: "none",
borderRadius: "999px",
padding: "0.15rem 0.6rem",
fontSize: "0.8rem",
border: 'none',
borderRadius: '999px',
padding: '0.15rem 0.6rem',
fontSize: '0.8rem',
};
const PageSelectionToolbar: React.FC<PageSelectionToolbarProps> = ({
@@ -27,11 +27,11 @@ const PageSelectionToolbar: React.FC<PageSelectionToolbarProps> = ({
return (
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: "0.5rem",
fontSize: "0.85rem",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: '0.5rem',
fontSize: '0.85rem',
}}
>
<span>
@@ -40,10 +40,10 @@ const PageSelectionToolbar: React.FC<PageSelectionToolbarProps> = ({
<div
style={{
display: "flex",
gap: "0.4rem",
flexWrap: "wrap",
justifyContent: "flex-end",
display: 'flex',
gap: '0.4rem',
flexWrap: 'wrap',
justifyContent: 'flex-end',
}}
>
{hasSelection && (
@@ -53,9 +53,9 @@ const PageSelectionToolbar: React.FC<PageSelectionToolbarProps> = ({
disabled={!hasSelection}
style={{
...pillButtonStyle,
background: "#dcfce7",
color: "#166534",
cursor: "pointer",
background: '#dcfce7',
color: '#166534',
cursor: 'pointer',
}}
title="Copy selected pages to another position"
>
@@ -69,9 +69,9 @@ const PageSelectionToolbar: React.FC<PageSelectionToolbarProps> = ({
onClick={onDeleteSelected}
style={{
...pillButtonStyle,
background: "#fee2e2",
color: "#b91c1c",
cursor: "pointer",
background: '#fee2e2',
color: '#b91c1c',
cursor: 'pointer',
}}
>
Delete selected
@@ -83,9 +83,9 @@ const PageSelectionToolbar: React.FC<PageSelectionToolbarProps> = ({
onClick={onSelectAll}
style={{
...pillButtonStyle,
background: "#8dcd8d",
color: "#111827",
cursor: "pointer",
background: '#8dcd8d',
color: '#111827',
cursor: 'pointer',
}}
>
Select all
@@ -97,9 +97,9 @@ const PageSelectionToolbar: React.FC<PageSelectionToolbarProps> = ({
disabled={!hasSelection}
style={{
...pillButtonStyle,
background: "#e5e7eb",
color: hasSelection ? "#111827" : "#6b7280",
cursor: hasSelection ? "pointer" : "default",
background: '#e5e7eb',
color: hasSelection ? '#111827' : '#6b7280',
cursor: hasSelection ? 'pointer' : 'default',
}}
>
Clear selection

56
src/components/ReorderPanel.tsx
View File

@@ -1,8 +1,8 @@
import React, { useRef, useState } from "react";
import type { PageRef } from "../pdf/pdfTypes";
import CopyPagesDialog from "./PageWorkspace/CopyPagesDialog";
import PageGrid from "./PageWorkspace/PageGrid";
import PageSelectionToolbar from "./PageWorkspace/PageSelectionToolbar";
import React, { useRef, useState } from 'react';
import type { PageRef } from '../pdf/pdfTypes';
import CopyPagesDialog from './PageWorkspace/CopyPagesDialog';
import PageGrid from './PageWorkspace/PageGrid';
import PageSelectionToolbar from './PageWorkspace/PageSelectionToolbar';
interface ReorderPanelProps {
pages: PageRef[];
@@ -20,7 +20,7 @@ interface ReorderPanelProps {
onToggleSelect: (
pageId: string,
visualIndex: number,
e: React.MouseEvent<HTMLButtonElement>,
e: React.MouseEvent<HTMLButtonElement>
) => void;
onSelectAll: () => void;
@@ -51,7 +51,7 @@ const ReorderPanel: React.FC<ReorderPanelProps> = ({
const [isCopyDragging, setIsCopyDragging] = useState(false);
const [copyDialogOpen, setCopyDialogOpen] = useState(false);
const [copyTargetPosition, setCopyTargetPosition] = useState("");
const [copyTargetPosition, setCopyTargetPosition] = useState('');
const [copyDialogError, setCopyDialogError] = useState<string | null>(null);
const dragGhostRef = useRef<HTMLDivElement | null>(null);
@@ -72,7 +72,7 @@ const ReorderPanel: React.FC<ReorderPanelProps> = ({
if (!draggedPage) return [];
const selectedInVisualOrder = pages.filter((page) =>
selectedPageIds.includes(page.id),
selectedPageIds.includes(page.id)
);
const draggingIsSelected =
@@ -85,20 +85,20 @@ const ReorderPanel: React.FC<ReorderPanelProps> = ({
const createDragGhost = (e: React.DragEvent, count: number) => {
cleanupDragGhost();
const ghost = document.createElement("div");
ghost.textContent = count === 1 ? "1 page" : `${count} pages`;
const ghost = document.createElement('div');
ghost.textContent = count === 1 ? '1 page' : `${count} pages`;
ghost.style.position = "fixed";
ghost.style.top = "0";
ghost.style.left = "0";
ghost.style.padding = "4px 8px";
ghost.style.borderRadius = "999px";
ghost.style.background = "#111827";
ghost.style.color = "#e5e7eb";
ghost.style.fontSize = "12px";
ghost.style.position = 'fixed';
ghost.style.top = '0';
ghost.style.left = '0';
ghost.style.padding = '4px 8px';
ghost.style.borderRadius = '999px';
ghost.style.background = '#111827';
ghost.style.color = '#e5e7eb';
ghost.style.fontSize = '12px';
ghost.style.fontFamily =
'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
ghost.style.zIndex = "9999";
ghost.style.zIndex = '9999';
document.body.appendChild(ghost);
dragGhostRef.current = ghost;
@@ -121,9 +121,9 @@ const ReorderPanel: React.FC<ReorderPanelProps> = ({
const copying = isCopyModifierPressed(e);
setIsCopyDragging(copying);
e.dataTransfer.effectAllowed = "copyMove";
e.dataTransfer.dropEffect = copying ? "copy" : "move";
e.dataTransfer.setData("text/plain", String(visualIndex));
e.dataTransfer.effectAllowed = 'copyMove';
e.dataTransfer.dropEffect = copying ? 'copy' : 'move';
e.dataTransfer.setData('text/plain', String(visualIndex));
const draggedPages = getDraggedPages(visualIndex);
createDragGhost(e, draggedPages.length);
@@ -141,7 +141,7 @@ const ReorderPanel: React.FC<ReorderPanelProps> = ({
const copying = isCopyModifierPressed(e);
setIsCopyDragging(copying);
e.dataTransfer.dropEffect = copying ? "copy" : "move";
e.dataTransfer.dropEffect = copying ? 'copy' : 'move';
const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();
const x = e.clientX - rect.left;
@@ -158,7 +158,7 @@ const ReorderPanel: React.FC<ReorderPanelProps> = ({
const copying = isCopyModifierPressed(e);
setIsCopyDragging(copying);
e.dataTransfer.dropEffect = copying ? "copy" : "move";
e.dataTransfer.dropEffect = copying ? 'copy' : 'move';
setDropIndex(pages.length);
};
@@ -177,7 +177,7 @@ const ReorderPanel: React.FC<ReorderPanelProps> = ({
if (shouldCopy) {
onCopyPagesToSlot(
draggedPages.map((page) => page.id),
dropIndex,
dropIndex
);
setDraggingIndex(null);
@@ -247,7 +247,7 @@ const ReorderPanel: React.FC<ReorderPanelProps> = ({
e?.preventDefault();
if (selectedPageIds.length === 0) {
setCopyDialogError("No pages selected.");
setCopyDialogError('No pages selected.');
return;
}
@@ -279,13 +279,13 @@ const ReorderPanel: React.FC<ReorderPanelProps> = ({
draggingPage != null &&
selectedPageIds.length > 0 &&
selectedPageIds.includes(draggingPage.id);
const dropIndicatorColor = isCopyDragging ? "#16a34a" : "#2563eb";
const dropIndicatorColor = isCopyDragging ? '#16a34a' : '#2563eb';
return (
<>
<div className="card">
<h2>Pages</h2>
<p style={{ fontSize: "0.85rem", color: "#6b7280" }}>
<p style={{ fontSize: '0.85rem', color: '#6b7280' }}>
Tap/click a page to preview it. Use the checkbox to select pages
(Shift for ranges). Drag to reorder; dragging a selected page moves
the whole selection. Hold Ctrl/⌘ while dropping to copy instead of

156
src/components/WorkspacePanel.tsx
View File

@@ -1,6 +1,6 @@
import React from "react";
import type { WorkspaceSummary } from "../workspace/workspaceTypes";
import type { WorkspaceCommandRecord } from "../workspace/workspaceCommands";
import React from 'react';
import type { WorkspaceSummary } from '../workspace/workspaceTypes';
import type { WorkspaceCommandRecord } from '../workspace/workspaceCommands';
interface WorkspacePanelProps {
hasPdf: boolean;
@@ -54,17 +54,17 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
<div className="card">
<h2>Workspace</h2>
<p style={{ fontSize: "0.85rem", color: "#6b7280" }}>
<p style={{ fontSize: '0.85rem', color: '#6b7280' }}>
Save named workspaces in this browser. PDF binaries are stored in
IndexedDB; nothing is uploaded.
</p>
<div
style={{
display: "flex",
gap: "0.5rem",
flexWrap: "wrap",
alignItems: "center",
display: 'flex',
gap: '0.5rem',
flexWrap: 'wrap',
alignItems: 'center',
}}
>
<input
@@ -74,12 +74,12 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
placeholder="Workspace name"
disabled={!hasPdf || isBusy}
style={{
flex: "1 1 220px",
flex: '1 1 220px',
minWidth: 0,
padding: "0.45rem 0.55rem",
borderRadius: "0.5rem",
border: "1px solid #d1d5db",
fontSize: "0.9rem",
padding: '0.45rem 0.55rem',
borderRadius: '0.5rem',
border: '1px solid #d1d5db',
fontSize: '0.9rem',
}}
/>
@@ -88,7 +88,7 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
className="secondary"
onClick={onUndo}
disabled={!hasPdf || isBusy || !canUndo}
title={latestUndo ? `Undo: ${latestUndo.label}` : "Nothing to undo"}
title={latestUndo ? `Undo: ${latestUndo.label}` : 'Nothing to undo'}
>
↶ Undo
</button>
@@ -98,7 +98,7 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
className="secondary"
onClick={onRedo}
disabled={!hasPdf || isBusy || !canRedo}
title={latestRedo ? `Redo: ${latestRedo.label}` : "Nothing to redo"}
title={latestRedo ? `Redo: ${latestRedo.label}` : 'Nothing to redo'}
>
↷ Redo
</button>
@@ -108,9 +108,9 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
className="secondary"
onClick={onSaveWorkspace}
disabled={!hasPdf || isBusy}
title={!hasPdf ? "Open a PDF first" : "Save workspace"}
title={!hasPdf ? 'Open a PDF first' : 'Save workspace'}
>
💾 {activeWorkspaceId ? "Save" : "Save as"}
💾 {activeWorkspaceId ? 'Save' : 'Save as'}
</button>
<button
@@ -119,7 +119,7 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
onClick={onResetWorkspace}
disabled={!hasPdf || isBusy}
title={
!hasPdf ? "No active workspace" : "Close the current workspace"
!hasPdf ? 'No active workspace' : 'Close the current workspace'
}
>
Reset workspace
@@ -138,9 +138,9 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
{workspaceDirty && hasPdf && (
<div
style={{
marginTop: "0.5rem",
fontSize: "0.8rem",
color: "#92400e",
marginTop: '0.5rem',
fontSize: '0.8rem',
color: '#92400e',
}}
>
Unsaved workspace changes.
@@ -150,9 +150,9 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
{workspaceMessage && (
<div
style={{
marginTop: "0.5rem",
fontSize: "0.85rem",
color: "#166534",
marginTop: '0.5rem',
fontSize: '0.85rem',
color: '#166534',
}}
>
{workspaceMessage}
@@ -160,15 +160,15 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
)}
{workspaces.length > 0 && (
<div style={{ marginTop: "0.75rem" }}>
<strong style={{ fontSize: "0.9rem" }}>Saved workspaces</strong>
<div style={{ marginTop: '0.75rem' }}>
<strong style={{ fontSize: '0.9rem' }}>Saved workspaces</strong>
<div
style={{
display: "flex",
flexDirection: "column",
gap: "0.4rem",
marginTop: "0.4rem",
display: 'flex',
flexDirection: 'column',
gap: '0.4rem',
marginTop: '0.4rem',
}}
>
{workspaces.map((workspace) => {
@@ -178,29 +178,29 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
<div
key={workspace.id}
style={{
border: "1px solid #e5e7eb",
borderRadius: "0.5rem",
padding: "0.5rem",
background: active ? "#eff6ff" : "#f9fafb",
display: "flex",
justifyContent: "space-between",
gap: "0.75rem",
alignItems: "center",
flexWrap: "wrap",
border: '1px solid #e5e7eb',
borderRadius: '0.5rem',
padding: '0.5rem',
background: active ? '#eff6ff' : '#f9fafb',
display: 'flex',
justifyContent: 'space-between',
gap: '0.75rem',
alignItems: 'center',
flexWrap: 'wrap',
}}
>
<div style={{ minWidth: 0 }}>
<div style={{ fontSize: "0.9rem" }}>
<div style={{ fontSize: '0.9rem' }}>
<strong>{workspace.name}</strong>
{active && (
<span style={{ color: "#2563eb" }}> · active</span>
<span style={{ color: '#2563eb' }}> · active</span>
)}
</div>
<div style={{ fontSize: "0.75rem", color: "#6b7280" }}>
{workspace.pdfName} · source pages:{" "}
{workspace.sourcePageCount} · workspace pages:{" "}
{workspace.workspacePageCount} · undo:{" "}
<div style={{ fontSize: '0.75rem', color: '#6b7280' }}>
{workspace.pdfName} · source pages:{' '}
{workspace.sourcePageCount} · workspace pages:{' '}
{workspace.workspacePageCount} · undo:{' '}
{workspace.historyCount} · redo: {workspace.redoCount} ·
updated {new Date(workspace.updatedAt).toLocaleString()}
</div>
@@ -208,9 +208,9 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
<div
style={{
display: "flex",
gap: "0.35rem",
flexWrap: "wrap",
display: 'flex',
gap: '0.35rem',
flexWrap: 'wrap',
}}
>
<button
@@ -228,8 +228,8 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
disabled={isBusy}
onClick={() => onDeleteWorkspace(workspace.id)}
style={{
background: "#fee2e2",
color: "#991b1b",
background: '#fee2e2',
color: '#991b1b',
}}
>
Delete
@@ -243,36 +243,36 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
)}
{(history.length > 0 || redoHistory.length > 0) && (
<details style={{ marginTop: "0.75rem" }} open>
<summary style={{ cursor: "pointer", fontSize: "0.9rem" }}>
<details style={{ marginTop: '0.75rem' }} open>
<summary style={{ cursor: 'pointer', fontSize: '0.9rem' }}>
Command history ({history.length} undo / {redoHistory.length} redo)
</summary>
<div
style={{
marginTop: "0.5rem",
display: "flex",
flexDirection: "column",
gap: "0.25rem",
marginTop: '0.5rem',
display: 'flex',
flexDirection: 'column',
gap: '0.25rem',
}}
>
{history.map((entry, index) => (
<div
key={entry.id}
style={{
fontSize: "0.8rem",
color: "#374151",
borderLeft: "3px solid #2563eb",
paddingLeft: "0.45rem",
paddingTop: "0.2rem",
paddingBottom: "0.2rem",
fontSize: '0.8rem',
color: '#374151',
borderLeft: '3px solid #2563eb',
paddingLeft: '0.45rem',
paddingTop: '0.2rem',
paddingBottom: '0.2rem',
}}
>
<strong>
Undo {history.length - index}. {entry.label}
</strong>
<br />
<span style={{ color: "#6b7280" }}>
<span style={{ color: '#6b7280' }}>
{new Date(entry.timestamp).toLocaleString()}
</span>
</div>
@@ -280,15 +280,15 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
<div
style={{
margin: "0.25rem 0",
borderRadius: "999px",
background: "#ecfdf5",
color: "#166534",
fontSize: "0.8rem",
margin: '0.25rem 0',
borderRadius: '999px',
background: '#ecfdf5',
color: '#166534',
fontSize: '0.8rem',
fontWeight: 600,
alignSelf: "flex-start",
border: "2px solid #166534",
width: "100%",
alignSelf: 'flex-start',
border: '2px solid #166534',
width: '100%',
}}
></div>
@@ -299,12 +299,12 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
<div
key={entry.id}
style={{
fontSize: "0.8rem",
color: "#9ca3af",
borderLeft: "3px solid #d1d5db",
paddingLeft: "0.45rem",
paddingTop: "0.2rem",
paddingBottom: "0.2rem",
fontSize: '0.8rem',
color: '#9ca3af',
borderLeft: '3px solid #d1d5db',
paddingLeft: '0.45rem',
paddingTop: '0.2rem',
paddingBottom: '0.2rem',
opacity: 0.75,
}}
>
@@ -312,7 +312,7 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
Redo {index + 1}. {entry.label}
</strong>
<br />
<span style={{ color: "#9ca3af" }}>
<span style={{ color: '#9ca3af' }}>
{new Date(entry.timestamp).toLocaleString()}
</span>
</div>

14
src/hooks/usePdfGeneratedOutputs.ts
View File

@@ -1,5 +1,5 @@
import { useCallback, useEffect, useRef, useState } from "react";
import type { SplitResult } from "../pdf/pdfTypes";
import { useCallback, useEffect, useRef, useState } from 'react';
import type { SplitResult } from '../pdf/pdfTypes';
export interface PdfDownload {
id: string;
@@ -32,10 +32,10 @@ function createDownload(id: string, filename: string, blob: Blob): PdfDownload {
export function usePdfGeneratedOutputs() {
const [splitDownloads, setSplitDownloads] = useState<SplitPdfDownload[]>([]);
const [subsetDownload, setSubsetDownload] = useState<PdfDownload | null>(
null,
null
);
const [exportDownload, setExportDownload] = useState<PdfDownload | null>(
null,
null
);
const splitDownloadsRef = useRef<SplitPdfDownload[]>([]);
@@ -47,7 +47,7 @@ export function usePdfGeneratedOutputs() {
...createDownload(
`split-${result.pageIndex}-${result.filename}`,
result.filename,
result.blob,
result.blob
),
pageIndex: result.pageIndex,
}));
@@ -64,7 +64,7 @@ export function usePdfGeneratedOutputs() {
}, []);
const replaceSubsetResult = useCallback((blob: Blob, filename: string) => {
const nextDownload = createDownload("subset", filename, blob);
const nextDownload = createDownload('subset', filename, blob);
revokeDownload(subsetDownloadRef.current);
subsetDownloadRef.current = nextDownload;
@@ -78,7 +78,7 @@ export function usePdfGeneratedOutputs() {
}, []);
const replaceExportResult = useCallback((blob: Blob, filename: string) => {
const nextDownload = createDownload("export", filename, blob);
const nextDownload = createDownload('export', filename, blob);
revokeDownload(exportDownloadRef.current);
exportDownloadRef.current = nextDownload;

12
src/main.tsx
View File

@@ -1,10 +1,10 @@
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./styles.css";
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './styles.css';
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<App />
</React.StrictMode>,
</React.StrictMode>
);

38
src/pdf/pdfService.ts
View File

@@ -1,5 +1,5 @@
import { PDFDocument, degrees } from "pdf-lib";
import type { PdfFile, PageRef, SplitResult, Range } from "./pdfTypes";
import { PDFDocument, degrees } from 'pdf-lib';
import type { PdfFile, PageRef, SplitResult, Range } from './pdfTypes';
function createId() {
return Math.random().toString(36).slice(2);
@@ -12,7 +12,7 @@ function pdfBytesToArrayBuffer(bytes: Uint8Array): ArrayBuffer {
}
function pdfBytesToBlob(bytes: Uint8Array): Blob {
return new Blob([pdfBytesToArrayBuffer(bytes)], { type: "application/pdf" });
return new Blob([pdfBytesToArrayBuffer(bytes)], { type: 'application/pdf' });
}
export async function loadPdfFromFile(file: File): Promise<PdfFile> {
@@ -31,7 +31,7 @@ export async function loadPdfFromFile(file: File): Promise<PdfFile> {
export async function mergePdfFiles(
basePdf: PdfFile,
newPdf: PdfFile,
insertAt: number,
insertAt: number
): Promise<PdfFile> {
const baseDoc = basePdf.doc ?? (await PDFDocument.load(basePdf.arrayBuffer));
const newDoc = newPdf.doc ?? (await PDFDocument.load(newPdf.arrayBuffer));
@@ -45,11 +45,11 @@ export async function mergePdfFiles(
const basePages = await mergedDoc.copyPages(
baseDoc,
Array.from({ length: basePageCount }, (_, i) => i),
Array.from({ length: basePageCount }, (_, i) => i)
);
const newPages = await mergedDoc.copyPages(
newDoc,
Array.from({ length: newPageCount }, (_, i) => i),
Array.from({ length: newPageCount }, (_, i) => i)
);
for (let i = 0; i < clampedInsertAt; i += 1) {
@@ -65,8 +65,8 @@ export async function mergePdfFiles(
const bytes = await mergedDoc.save();
const buffer = pdfBytesToArrayBuffer(bytes);
const baseName = basePdf.name.replace(/\.pdf$/i, "");
const newName = newPdf.name.replace(/\.pdf$/i, "");
const baseName = basePdf.name.replace(/\.pdf$/i, '');
const newName = newPdf.name.replace(/\.pdf$/i, '');
return {
id: createId(),
@@ -78,7 +78,7 @@ export async function mergePdfFiles(
}
export async function splitIntoSinglePages(
pdf: PdfFile,
pdf: PdfFile
): Promise<SplitResult[]> {
const { doc, name } = pdf;
@@ -110,8 +110,8 @@ export async function splitIntoSinglePages(
const bytes = await newDoc.save();
const blob = pdfBytesToBlob(bytes);
const base = name.replace(/\.pdf$/i, "");
const filename = `${base}_page_${String(i + 1).padStart(3, "0")}.pdf`;
const base = name.replace(/\.pdf$/i, '');
const filename = `${base}_page_${String(i + 1).padStart(3, '0')}.pdf`;
results.push({
pageIndex: i,
@@ -131,7 +131,7 @@ export async function extractRange(pdf: PdfFile, range: Range): Promise<Blob> {
const toIndex = Math.min(pageCount - 1, range.to - 1);
if (fromIndex > toIndex) {
throw new Error("Invalid range: from > to");
throw new Error('Invalid range: from > to');
}
const newDoc = await PDFDocument.create();
@@ -161,21 +161,21 @@ export async function mergePdfs(pdfs: PdfFile[]): Promise<Blob> {
export async function exportPages(
pdf: PdfFile,
pages: PageRef[],
pages: PageRef[]
): Promise<Blob> {
const { doc } = pdf;
const pageCount = doc.getPageCount();
if (pages.length === 0) {
throw new Error("Pages must contain at least one page");
throw new Error('Pages must contain at least one page');
}
if (
pages.some(
(page) => page.sourcePageIndex < 0 || page.sourcePageIndex >= pageCount,
(page) => page.sourcePageIndex < 0 || page.sourcePageIndex >= pageCount
)
) {
throw new Error("Pages contain invalid source page indices");
throw new Error('Pages contain invalid source page indices');
}
const newDoc = await PDFDocument.create();
@@ -186,7 +186,7 @@ export async function exportPages(
copiedPages.forEach((page, idx) => {
const angle = pages[idx].rotation;
if (typeof angle === "number" && angle % 360 !== 0) {
if (typeof angle === 'number' && angle % 360 !== 0) {
page.setRotation(degrees(angle));
}
@@ -200,7 +200,7 @@ export async function exportPages(
export async function exportReordered(
pdf: PdfFile,
order: number[],
rotations?: Record<number, number>,
rotations?: Record<number, number>
): Promise<Blob> {
return exportPages(
pdf,
@@ -208,6 +208,6 @@ export async function exportReordered(
id: String(sourcePageIndex),
sourcePageIndex,
rotation: rotations?.[sourcePageIndex] ?? 0,
})),
}))
);
}

39
src/pdf/pdfThumbnailService.ts
View File

@@ -1,5 +1,5 @@
import * as pdfjsLib from "pdfjs-dist";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker?worker&url";
import * as pdfjsLib from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker?worker&url';
// pdf.js worker setup for Vite
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -42,7 +42,7 @@ interface ThumbnailGenerationOptions {
*/
export async function generateThumbnailsProgressive(
arrayBuffer: ArrayBuffer,
options: ThumbnailGenerationOptions = {},
options: ThumbnailGenerationOptions = {}
): Promise<string[]> {
return generateThumbnailsInternal(arrayBuffer, {}, options);
}
@@ -53,7 +53,7 @@ export async function generateThumbnailsProgressive(
export async function generateThumbnailsWithRotationsProgressive(
arrayBuffer: ArrayBuffer,
rotations: RotationsMap,
options: ThumbnailGenerationOptions = {},
options: ThumbnailGenerationOptions = {}
): Promise<string[]> {
return generateThumbnailsInternal(arrayBuffer, rotations, options);
}
@@ -61,7 +61,7 @@ export async function generateThumbnailsWithRotationsProgressive(
async function generateThumbnailsInternal(
arrayBuffer: ArrayBuffer,
rotations: RotationsMap,
options: ThumbnailGenerationOptions = {},
options: ThumbnailGenerationOptions = {}
): Promise<string[]> {
const maxHeight = options.maxHeight ?? 150;
const maxWidth = options.maxWidth ?? 140;
@@ -72,15 +72,15 @@ async function generateThumbnailsInternal(
const loadingTask = pdfjsLib.getDocument({ data: dataCopy });
const pdf = await loadingTask.promise;
const thumbs = Array<string>(pdf.numPages).fill("");
const thumbs = Array<string>(pdf.numPages).fill('');
const pageNums = options.pageIndices
? Array.from(
new Set(
options.pageIndices
.filter((pageIndex) => pageIndex >= 0 && pageIndex < pdf.numPages)
.map((pageIndex) => pageIndex + 1),
),
.map((pageIndex) => pageIndex + 1)
)
)
: Array.from({ length: pdf.numPages }, (_, index) => index + 1);
@@ -98,7 +98,7 @@ async function generateThumbnailsInternal(
pageIndex,
rotations,
maxHeight,
maxWidth,
maxWidth
);
if (signal?.aborted) return;
@@ -134,13 +134,13 @@ async function generateThumbnailsInternal(
async function renderPageThumbnail(
page: Awaited<
ReturnType<
Awaited<ReturnType<typeof pdfjsLib.getDocument>["promise"]>["getPage"]
Awaited<ReturnType<typeof pdfjsLib.getDocument>['promise']>['getPage']
>
>,
originalIndex: number,
rotations: RotationsMap,
maxHeight: number,
maxWidth: number,
maxWidth: number
): Promise<string> {
const viewport = page.getViewport({ scale: 1 });
const scaleH = maxHeight / viewport.height;
@@ -148,15 +148,16 @@ async function renderPageThumbnail(
const scale = Math.min(scaleH, scaleW);
const scaledViewport = page.getViewport({ scale });
const baseCanvas = document.createElement("canvas");
const baseCtx = baseCanvas.getContext("2d");
const baseCanvas = document.createElement('canvas');
const baseCtx = baseCanvas.getContext('2d');
if (!baseCtx) return "";
if (!baseCtx) return '';
baseCanvas.width = scaledViewport.width;
baseCanvas.height = scaledViewport.height;
const renderTask = page.render({
canvas: baseCanvas,
canvasContext: baseCtx,
viewport: scaledViewport,
});
@@ -167,14 +168,14 @@ async function renderPageThumbnail(
const rotationDeg = ((rotationDegRaw % 360) + 360) % 360;
if (rotationDeg === 0) {
return baseCanvas.toDataURL("image/png");
return baseCanvas.toDataURL('image/png');
}
const rotatedCanvas = document.createElement("canvas");
const rotatedCtx = rotatedCanvas.getContext("2d");
const rotatedCanvas = document.createElement('canvas');
const rotatedCtx = rotatedCanvas.getContext('2d');
if (!rotatedCtx) {
return baseCanvas.toDataURL("image/png");
return baseCanvas.toDataURL('image/png');
}
const rad = (rotationDeg * Math.PI) / 180;
@@ -207,5 +208,5 @@ async function renderPageThumbnail(
rotatedCtx.drawImage(baseCanvas, 0, 0);
rotatedCtx.restore();
return rotatedCanvas.toDataURL("image/png");
return rotatedCanvas.toDataURL('image/png');
}

2
src/pdf/pdfTypes.ts
View File

@@ -1,4 +1,4 @@
import type { PDFDocument } from "pdf-lib";
import type { PDFDocument } from 'pdf-lib';
export interface PdfFile {
id: string;

30
src/pdf/usePdfThumbnails.ts
View File

@@ -1,7 +1,7 @@
import { useCallback, useEffect, useRef, useState } from "react";
import type { PageRef, PdfFile } from "./pdfTypes";
import { generateThumbnailsWithRotationsProgressive } from "./pdfThumbnailService";
import { normalizeRotation } from "../workspace/useWorkspaceState";
import { useCallback, useEffect, useRef, useState } from 'react';
import type { PageRef, PdfFile } from './pdfTypes';
import { generateThumbnailsWithRotationsProgressive } from './pdfThumbnailService';
import { normalizeRotation } from '../workspace/useWorkspaceState';
const DEFAULT_MAX_HEIGHT = 150;
const DEFAULT_MAX_WIDTH = 140;
@@ -27,7 +27,7 @@ function thumbnailCacheKey(
sourcePageIndex: number,
rotation: number,
maxWidth: number,
maxHeight: number,
maxHeight: number
): string {
return [
pdfId,
@@ -35,13 +35,13 @@ function thumbnailCacheKey(
normalizeRotation(rotation),
maxWidth,
maxHeight,
].join(":");
].join(':');
}
function pruneAndMergeThumbnails(
previous: Record<string, string>,
pages: PageRef[],
updates: Record<string, string>,
updates: Record<string, string>
): Record<string, string> {
const pageIds = new Set(pages.map((page) => page.id));
const next: Record<string, string> = {};
@@ -113,7 +113,7 @@ export function usePdfThumbnails({
page.sourcePageIndex,
rotation,
maxWidth,
maxHeight,
maxHeight
);
const cached = thumbnailCacheRef.current.get(cacheKey);
@@ -128,7 +128,7 @@ export function usePdfThumbnails({
}
setThumbnails((previous) =>
pruneAndMergeThumbnails(previous, pages, cachedUpdates),
pruneAndMergeThumbnails(previous, pages, cachedUpdates)
);
if (renderGroups.size === 0) return;
@@ -162,9 +162,9 @@ export function usePdfThumbnails({
pageIndex,
rotation,
maxWidth,
maxHeight,
maxHeight
),
dataUrl,
dataUrl
);
const updates: Record<string, string> = {};
@@ -184,18 +184,18 @@ export function usePdfThumbnails({
pruneAndMergeThumbnails(
previous,
latestPagesRef.current,
updates,
),
updates
)
);
},
},
}
);
}
};
void renderMissingThumbnails().catch((error) => {
if (!controller.signal.aborted) {
onError?.("Failed to generate thumbnails (see console).", error);
onError?.('Failed to generate thumbnails (see console).', error);
}
});

2
src/styles.css
View File

@@ -10,7 +10,7 @@ body {
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
'Segoe UI',
sans-serif;
background-color: #f3f4f6;
color: #111827;

2
src/version.ts
View File

@@ -1 +1 @@
export const APP_VERSION = "0.3.0";
export const APP_VERSION = '0.3.0';

82
src/workspace/useWorkspaceState.test.tsx
View File

@@ -1,12 +1,12 @@
import React, { forwardRef, useImperativeHandle } from "react";
import { act, render } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import type { PageRef } from "../pdf/pdfTypes";
import React, { forwardRef, useImperativeHandle } from 'react';
import { act, render } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import type { PageRef } from '../pdf/pdfTypes';
import type {
WorkspaceCommandRecord,
WorkspaceCommandState,
} from "./workspaceCommands";
import { useWorkspaceState } from "./useWorkspaceState";
} from './workspaceCommands';
import { useWorkspaceState } from './useWorkspaceState';
function page(id: string, sourcePageIndex: number, rotation = 0): PageRef {
return { id, sourcePageIndex, rotation };
@@ -15,7 +15,7 @@ function page(id: string, sourcePageIndex: number, rotation = 0): PageRef {
function state(
pages: PageRef[],
selectedPageIds: string[] = [],
lastSelectedVisualIndex: number | null = null,
lastSelectedVisualIndex: number | null = null
): WorkspaceCommandState {
return { pages, selectedPageIds, lastSelectedVisualIndex };
}
@@ -32,18 +32,18 @@ interface HarnessRef {
};
replaceWorkspaceState: ReturnType<
typeof useWorkspaceState
>["replaceWorkspaceState"];
>['replaceWorkspaceState'];
getCurrentCommandState: ReturnType<
typeof useWorkspaceState
>["getCurrentCommandState"];
>['getCurrentCommandState'];
createWorkspaceCommand: ReturnType<
typeof useWorkspaceState
>["createWorkspaceCommand"];
>['createWorkspaceCommand'];
executeWorkspaceCommand: ReturnType<
typeof useWorkspaceState
>["executeWorkspaceCommand"];
handleUndo: ReturnType<typeof useWorkspaceState>["handleUndo"];
handleRedo: ReturnType<typeof useWorkspaceState>["handleRedo"];
>['executeWorkspaceCommand'];
handleUndo: ReturnType<typeof useWorkspaceState>['handleUndo'];
handleRedo: ReturnType<typeof useWorkspaceState>['handleRedo'];
}
const Harness = forwardRef<HarnessRef, { onContentChanged?: () => void }>(
@@ -69,7 +69,7 @@ const Harness = forwardRef<HarnessRef, { onContentChanged?: () => void }>(
}));
return null;
},
}
);
function renderHarness(onContentChanged = vi.fn()) {
@@ -77,54 +77,54 @@ function renderHarness(onContentChanged = vi.fn()) {
render(<Harness ref={ref} onContentChanged={onContentChanged} />);
if (!ref.current) {
throw new Error("Harness ref was not initialized");
throw new Error('Harness ref was not initialized');
}
return { ref, onContentChanged };
}
describe("useWorkspaceState", () => {
it("replaces workspace state from loaded data without marking it dirty", () => {
describe('useWorkspaceState', () => {
it('replaces workspace state from loaded data without marking it dirty', () => {
const { ref } = renderHarness();
const loadedPages = [page("p1", 0), page("p2", 1, 90)];
const loadedPages = [page('p1', 0), page('p2', 1, 90)];
act(() => {
ref.current?.replaceWorkspaceState({
pages: loadedPages,
selectedPageIds: ["p2"],
selectedPageIds: ['p2'],
lastSelectedVisualIndex: 1,
history: [],
redoHistory: [],
dirty: false,
message: "Workspace loaded.",
message: 'Workspace loaded.',
});
});
expect(ref.current?.snapshot()).toMatchObject({
pages: loadedPages,
selectedPageIds: ["p2"],
selectedPageIds: ['p2'],
lastSelectedVisualIndex: 1,
workspaceDirty: false,
workspaceMessage: "Workspace loaded.",
workspaceMessage: 'Workspace loaded.',
workspaceHistory: [],
redoHistory: [],
});
});
it("executes commands, stores history, clears redo, and marks content changed", () => {
it('executes commands, stores history, clears redo, and marks content changed', () => {
const { ref, onContentChanged } = renderHarness();
const before = state([page("p1", 0), page("p2", 1)], ["p1"], 0);
const after = state([page("p2", 1), page("p1", 0)], ["p2"], 0);
const before = state([page('p1', 0), page('p2', 1)], ['p1'], 0);
const after = state([page('p2', 1), page('p1', 0)], ['p2'], 0);
act(() => {
ref.current?.replaceWorkspaceState({
...before,
redoHistory: [
{
id: "redo-record",
type: "old-redo",
label: "Old redo",
timestamp: "2026-05-17T10:00:00.000Z",
id: 'redo-record',
type: 'old-redo',
label: 'Old redo',
timestamp: '2026-05-17T10:00:00.000Z',
payload: { before, after },
},
],
@@ -133,34 +133,34 @@ describe("useWorkspaceState", () => {
act(() => {
const command = ref.current?.createWorkspaceCommand({
type: "reorder-pages",
label: "Move page 2 before page 1",
type: 'reorder-pages',
label: 'Move page 2 before page 1',
before,
after,
});
if (!command) throw new Error("Command was not created");
if (!command) throw new Error('Command was not created');
ref.current?.executeWorkspaceCommand(command);
});
const snapshot = ref.current?.snapshot();
expect(snapshot?.pages).toEqual(after.pages);
expect(snapshot?.selectedPageIds).toEqual(["p2"]);
expect(snapshot?.selectedPageIds).toEqual(['p2']);
expect(snapshot?.workspaceDirty).toBe(true);
expect(snapshot?.workspaceMessage).toBeNull();
expect(snapshot?.workspaceHistory).toHaveLength(1);
expect(snapshot?.workspaceHistory[0]).toMatchObject({
type: "reorder-pages",
label: "Move page 2 before page 1",
type: 'reorder-pages',
label: 'Move page 2 before page 1',
});
expect(snapshot?.redoHistory).toHaveLength(0);
expect(onContentChanged).toHaveBeenCalledTimes(1);
});
it("undoes and redoes command records in stack order", () => {
it('undoes and redoes command records in stack order', () => {
const { ref, onContentChanged } = renderHarness();
const initial = state([page("p1", 0), page("p2", 1)], ["p1"], 0);
const reordered = state([page("p2", 1), page("p1", 0)], ["p2"], 0);
const initial = state([page('p1', 0), page('p2', 1)], ['p1'], 0);
const reordered = state([page('p2', 1), page('p1', 0)], ['p2'], 0);
act(() => {
ref.current?.replaceWorkspaceState(initial);
@@ -168,13 +168,13 @@ describe("useWorkspaceState", () => {
act(() => {
const command = ref.current?.createWorkspaceCommand({
type: "reorder-pages",
label: "Move page",
type: 'reorder-pages',
label: 'Move page',
before: initial,
after: reordered,
});
if (!command) throw new Error("Command was not created");
if (!command) throw new Error('Command was not created');
ref.current?.executeWorkspaceCommand(command);
});

36
src/workspace/useWorkspaceState.ts
View File

@@ -1,18 +1,18 @@
import { useCallback, useRef, useState } from "react";
import type { PageRef } from "../pdf/pdfTypes";
import { useCallback, useRef, useState } from 'react';
import type { PageRef } from '../pdf/pdfTypes';
import type {
WorkspaceCommand,
WorkspaceCommandRecord,
WorkspaceCommandState,
} from "./workspaceCommands";
} from './workspaceCommands';
import {
createSnapshotCommand,
reviveWorkspaceCommand,
toWorkspaceCommandRecord,
} from "./workspaceCommands";
} from './workspaceCommands';
function createId(prefix: string): string {
if (typeof crypto !== "undefined" && crypto.randomUUID) {
if (typeof crypto !== 'undefined' && crypto.randomUUID) {
return crypto.randomUUID();
}
@@ -20,7 +20,7 @@ function createId(prefix: string): string {
}
export function createWorkspaceId(): string {
return createId("workspace");
return createId('workspace');
}
export function createPdfId(): string {
@@ -28,11 +28,11 @@ export function createPdfId(): string {
}
export function defaultWorkspaceNameFromPdfName(pdfName: string): string {
return pdfName.replace(/\.pdf$/i, "") || "Untitled workspace";
return pdfName.replace(/\.pdf$/i, '') || 'Untitled workspace';
}
export function createPageRefId(): string {
return createId("page");
return createId('page');
}
export function createInitialPageRefs(pageCount: number): PageRef[] {
@@ -84,7 +84,7 @@ export function useWorkspaceState({
const setPages = useCallback((action: SetStateAction<PageRef[]>) => {
setPagesState((previous) => {
const next = typeof action === "function" ? action(previous) : action;
const next = typeof action === 'function' ? action(previous) : action;
latestPagesRef.current = next;
return next;
});
@@ -92,7 +92,7 @@ export function useWorkspaceState({
const setSelectedPageIds = useCallback((action: SetStateAction<string[]>) => {
setSelectedPageIdsState((previous) => {
const next = typeof action === "function" ? action(previous) : action;
const next = typeof action === 'function' ? action(previous) : action;
selectedPageIdsRef.current = next;
return next;
});
@@ -101,12 +101,12 @@ export function useWorkspaceState({
const setLastSelectedVisualIndex = useCallback(
(action: SetStateAction<number | null>) => {
setLastSelectedVisualIndexState((previous) => {
const next = typeof action === "function" ? action(previous) : action;
const next = typeof action === 'function' ? action(previous) : action;
lastSelectedVisualIndexRef.current = next;
return next;
});
},
[],
[]
);
const getCurrentCommandState = useCallback(
@@ -115,7 +115,7 @@ export function useWorkspaceState({
selectedPageIds: selectedPageIdsRef.current,
lastSelectedVisualIndex: lastSelectedVisualIndexRef.current,
}),
[],
[]
);
const applyCommandState = useCallback(
@@ -124,7 +124,7 @@ export function useWorkspaceState({
setSelectedPageIds(state.selectedPageIds);
setLastSelectedVisualIndex(state.lastSelectedVisualIndex);
},
[setLastSelectedVisualIndex, setPages, setSelectedPageIds],
[setLastSelectedVisualIndex, setPages, setSelectedPageIds]
);
const markWorkspaceChanged = useCallback(() => {
@@ -142,14 +142,14 @@ export function useWorkspaceState({
details?: Record<string, unknown>;
}): WorkspaceCommand =>
createSnapshotCommand({
id: createId("command"),
id: createId('command'),
type: params.type,
label: params.label,
before: params.before,
after: params.after,
details: params.details,
}),
[],
[]
);
const executeWorkspaceCommand = useCallback(
@@ -164,7 +164,7 @@ export function useWorkspaceState({
setRedoHistory([]);
markWorkspaceChanged();
},
[applyCommandState, getCurrentCommandState, markWorkspaceChanged],
[applyCommandState, getCurrentCommandState, markWorkspaceChanged]
);
const handleUndo = useCallback(() => {
@@ -213,7 +213,7 @@ export function useWorkspaceState({
setWorkspaceDirty(state.dirty ?? false);
setWorkspaceMessage(state.message ?? null);
},
[setLastSelectedVisualIndex, setPages, setSelectedPageIds],
[setLastSelectedVisualIndex, setPages, setSelectedPageIds]
);
const resetWorkspaceState = useCallback(() => {

72
src/workspace/workspaceCommands.test.ts
View File

@@ -1,11 +1,11 @@
import { describe, expect, it } from "vitest";
import type { WorkspaceCommandState } from "./workspaceCommands";
import { describe, expect, it } from 'vitest';
import type { WorkspaceCommandState } from './workspaceCommands';
import {
cloneCommandState,
createSnapshotCommand,
reviveWorkspaceCommand,
toWorkspaceCommandRecord,
} from "./workspaceCommands";
} from './workspaceCommands';
function makeState(pageIds: string[]): WorkspaceCommandState {
return {
@@ -19,36 +19,36 @@ function makeState(pageIds: string[]): WorkspaceCommandState {
};
}
describe("workspaceCommands", () => {
it("clones command state deeply enough for page and selection changes", () => {
const original = makeState(["a", "b"]);
describe('workspaceCommands', () => {
it('clones command state deeply enough for page and selection changes', () => {
const original = makeState(['a', 'b']);
const cloned = cloneCommandState(original);
original.pages[0].rotation = 270;
original.selectedPageIds.push("b");
original.selectedPageIds.push('b');
original.lastSelectedVisualIndex = 1;
expect(cloned).toEqual({
pages: [
{ id: "a", sourcePageIndex: 0, rotation: 0 },
{ id: "b", sourcePageIndex: 1, rotation: 90 },
{ id: 'a', sourcePageIndex: 0, rotation: 0 },
{ id: 'b', sourcePageIndex: 1, rotation: 90 },
],
selectedPageIds: ["a"],
selectedPageIds: ['a'],
lastSelectedVisualIndex: 0,
});
});
it("creates snapshot commands that are stable after source states mutate", () => {
const before = makeState(["a", "b"]);
const after = makeState(["b", "a"]);
after.selectedPageIds = ["b"];
it('creates snapshot commands that are stable after source states mutate', () => {
const before = makeState(['a', 'b']);
const after = makeState(['b', 'a']);
after.selectedPageIds = ['b'];
after.lastSelectedVisualIndex = 0;
const command = createSnapshotCommand({
id: "cmd-1",
type: "reorder-pages",
label: "Move page",
timestamp: "2026-05-17T10:00:00.000Z",
id: 'cmd-1',
type: 'reorder-pages',
label: 'Move page',
timestamp: '2026-05-17T10:00:00.000Z',
before,
after,
details: { moved: 1 },
@@ -56,40 +56,40 @@ describe("workspaceCommands", () => {
before.pages.length = 0;
after.pages[0].rotation = 180;
after.selectedPageIds.push("a");
after.selectedPageIds.push('a');
expect(command.undo(makeState(["ignored"]))).toEqual({
expect(command.undo(makeState(['ignored']))).toEqual({
pages: [
{ id: "a", sourcePageIndex: 0, rotation: 0 },
{ id: "b", sourcePageIndex: 1, rotation: 90 },
{ id: 'a', sourcePageIndex: 0, rotation: 0 },
{ id: 'b', sourcePageIndex: 1, rotation: 90 },
],
selectedPageIds: ["a"],
selectedPageIds: ['a'],
lastSelectedVisualIndex: 0,
});
expect(command.do(makeState(["ignored"]))).toEqual({
expect(command.do(makeState(['ignored']))).toEqual({
pages: [
{ id: "b", sourcePageIndex: 0, rotation: 0 },
{ id: "a", sourcePageIndex: 1, rotation: 90 },
{ id: 'b', sourcePageIndex: 0, rotation: 0 },
{ id: 'a', sourcePageIndex: 1, rotation: 90 },
],
selectedPageIds: ["b"],
selectedPageIds: ['b'],
lastSelectedVisualIndex: 0,
});
});
it("round-trips commands through serializable records", () => {
const before = makeState(["a", "b", "c"]);
it('round-trips commands through serializable records', () => {
const before = makeState(['a', 'b', 'c']);
const after: WorkspaceCommandState = {
pages: [before.pages[2], before.pages[0], before.pages[1]],
selectedPageIds: ["c"],
selectedPageIds: ['c'],
lastSelectedVisualIndex: 0,
};
const command = createSnapshotCommand({
id: "cmd-2",
type: "copy-pages",
label: "Copy pages",
timestamp: "2026-05-17T10:05:00.000Z",
id: 'cmd-2',
type: 'copy-pages',
label: 'Copy pages',
timestamp: '2026-05-17T10:05:00.000Z',
before,
after,
});
@@ -97,8 +97,8 @@ describe("workspaceCommands", () => {
const record = toWorkspaceCommandRecord(command);
const revived = reviveWorkspaceCommand(record);
expect(record).not.toHaveProperty("do");
expect(record).not.toHaveProperty("undo");
expect(record).not.toHaveProperty('do');
expect(record).not.toHaveProperty('undo');
expect(revived.do(before)).toEqual(after);
expect(revived.undo(after)).toEqual(before);
});

8
src/workspace/workspaceCommands.ts
View File

@@ -1,4 +1,4 @@
import type { PageRef } from "../pdf/pdfTypes";
import type { PageRef } from '../pdf/pdfTypes';
export interface WorkspaceCommandState {
pages: PageRef[];
@@ -26,7 +26,7 @@ export interface WorkspaceCommand extends WorkspaceCommandRecord {
}
export function cloneCommandState(
state: WorkspaceCommandState,
state: WorkspaceCommandState
): WorkspaceCommandState {
return {
pages: state.pages.map((page) => ({ ...page })),
@@ -58,7 +58,7 @@ export function createSnapshotCommand(params: {
}
export function reviveWorkspaceCommand(
record: WorkspaceCommandRecord,
record: WorkspaceCommandRecord
): WorkspaceCommand {
return {
...record,
@@ -68,7 +68,7 @@ export function reviveWorkspaceCommand(
}
export function toWorkspaceCommandRecord(
command: WorkspaceCommand,
command: WorkspaceCommand
): WorkspaceCommandRecord {
return {
id: command.id,

42
src/workspace/workspaceDb.ts
View File

@@ -2,13 +2,13 @@ import type {
LoadedWorkspace,
StoredWorkspace,
WorkspaceSummary,
} from "./workspaceTypes";
} from './workspaceTypes';
const DB_NAME = "pdf-tools-workspaces";
const DB_NAME = 'pdf-tools-workspaces';
const DB_VERSION = 1;
const WORKSPACE_STORE = "workspaces";
const PDF_STORE = "pdfBinaries";
const WORKSPACE_STORE = 'workspaces';
const PDF_STORE = 'pdfBinaries';
interface PdfBinaryRecord {
pdfId: string;
@@ -48,21 +48,21 @@ function openWorkspaceDb(): Promise<IDBDatabase> {
if (!db.objectStoreNames.contains(WORKSPACE_STORE)) {
const workspaceStore = db.createObjectStore(WORKSPACE_STORE, {
keyPath: "id",
keyPath: 'id',
});
workspaceStore.createIndex("updatedAt", "updatedAt", {
workspaceStore.createIndex('updatedAt', 'updatedAt', {
unique: false,
});
workspaceStore.createIndex("pdfId", "pdfId", {
workspaceStore.createIndex('pdfId', 'pdfId', {
unique: false,
});
}
if (!db.objectStoreNames.contains(PDF_STORE)) {
db.createObjectStore(PDF_STORE, {
keyPath: "pdfId",
keyPath: 'pdfId',
});
}
};
@@ -76,7 +76,7 @@ export async function listWorkspaces(): Promise<WorkspaceSummary[]> {
const db = await openWorkspaceDb();
try {
const tx = db.transaction(WORKSPACE_STORE, "readonly");
const tx = db.transaction(WORKSPACE_STORE, 'readonly');
const store = tx.objectStore(WORKSPACE_STORE);
const records = await requestToPromise<StoredWorkspace[]>(store.getAll());
@@ -113,13 +113,13 @@ export async function saveWorkspaceToIndexedDb({
const pdfRecord: PdfBinaryRecord = {
pdfId: workspace.pdfId,
name: workspace.pdfName,
blob: new Blob([pdfArrayBuffer], { type: "application/pdf" }),
blob: new Blob([pdfArrayBuffer], { type: 'application/pdf' }),
size: pdfArrayBuffer.byteLength,
createdAt: workspace.createdAt,
updatedAt: now,
};
const tx = db.transaction([WORKSPACE_STORE, PDF_STORE], "readwrite");
const tx = db.transaction([WORKSPACE_STORE, PDF_STORE], 'readwrite');
tx.objectStore(PDF_STORE).put(pdfRecord);
tx.objectStore(WORKSPACE_STORE).put(workspace);
@@ -131,15 +131,15 @@ export async function saveWorkspaceToIndexedDb({
}
export async function loadWorkspaceFromIndexedDb(
workspaceId: string,
workspaceId: string
): Promise<LoadedWorkspace | null> {
const db = await openWorkspaceDb();
try {
const tx = db.transaction([WORKSPACE_STORE, PDF_STORE], "readonly");
const tx = db.transaction([WORKSPACE_STORE, PDF_STORE], 'readonly');
const workspace = await requestToPromise<StoredWorkspace | undefined>(
tx.objectStore(WORKSPACE_STORE).get(workspaceId),
tx.objectStore(WORKSPACE_STORE).get(workspaceId)
);
if (!workspace) {
@@ -148,7 +148,7 @@ export async function loadWorkspaceFromIndexedDb(
}
const pdfRecord = await requestToPromise<PdfBinaryRecord | undefined>(
tx.objectStore(PDF_STORE).get(workspace.pdfId),
tx.objectStore(PDF_STORE).get(workspace.pdfId)
);
await transactionDone(tx);
@@ -169,20 +169,20 @@ export async function loadWorkspaceFromIndexedDb(
}
export async function deleteWorkspaceFromIndexedDb(
workspaceId: string,
workspaceId: string
): Promise<void> {
const db = await openWorkspaceDb();
try {
const lookupTx = db.transaction(WORKSPACE_STORE, "readonly");
const lookupTx = db.transaction(WORKSPACE_STORE, 'readonly');
const workspace = await requestToPromise<StoredWorkspace | undefined>(
lookupTx.objectStore(WORKSPACE_STORE).get(workspaceId),
lookupTx.objectStore(WORKSPACE_STORE).get(workspaceId)
);
await transactionDone(lookupTx);
if (!workspace) return;
const deleteTx = db.transaction([WORKSPACE_STORE, PDF_STORE], "readwrite");
const deleteTx = db.transaction([WORKSPACE_STORE, PDF_STORE], 'readwrite');
deleteTx.objectStore(WORKSPACE_STORE).delete(workspaceId);
await transactionDone(deleteTx);
@@ -190,14 +190,14 @@ export async function deleteWorkspaceFromIndexedDb(
const remainingWorkspaces = await listWorkspaces();
const pdfStillUsed = remainingWorkspaces.some(
(summary) => summary.pdfId === workspace.pdfId,
(summary) => summary.pdfId === workspace.pdfId
);
if (!pdfStillUsed) {
const cleanupDb = await openWorkspaceDb();
try {
const cleanupTx = cleanupDb.transaction(PDF_STORE, "readwrite");
const cleanupTx = cleanupDb.transaction(PDF_STORE, 'readwrite');
cleanupTx.objectStore(PDF_STORE).delete(workspace.pdfId);
await transactionDone(cleanupTx);
} finally {

4
src/workspace/workspaceTypes.ts
View File

@@ -1,5 +1,5 @@
import type { PageRef } from "../pdf/pdfTypes";
import type { WorkspaceCommandRecord } from "./workspaceCommands";
import type { PageRef } from '../pdf/pdfTypes';
import type { WorkspaceCommandRecord } from './workspaceCommands';
export interface StoredWorkspace {
schemaVersion: 1;

6
vite.config.ts
View File

@@ -1,10 +1,10 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
host: true,
allowedHosts: ["pdftools.add-ideas.de"], // ← ADD THIS
allowedHosts: ['pdftools.add-ideas.de'], // ← ADD THIS
},
});