mostly formatting, dependency fix

src/components/ReorderPanel.tsx

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