From 812dd43783118ba7983047c49d20f869759115fd Mon Sep 17 00:00:00 2001
From: Sumit Sahoo <sumitsahoo1988@gmail.com>
Date: Sat, 11 Apr 2026 13:33:42 +0530
Subject: [PATCH 1/4] feat: add TouchDragOverlay component for improved touch
 drag experience

---
 src/components/TouchDragOverlay.tsx | 36 +++++++++++++++++++++++++++++
 src/hooks/useSortableDrag.ts        |  9 +++++++-
 src/tools/AddBlankPage.tsx          | 26 ++++++++++++++++++++-
 src/tools/DuplicatePage.tsx         | 27 +++++++++++++++++++++-
 src/tools/ReorderPages.tsx          | 16 ++++++++++++-
 5 files changed, 110 insertions(+), 4 deletions(-)
 create mode 100644 src/components/TouchDragOverlay.tsx

diff --git a/src/components/TouchDragOverlay.tsx b/src/components/TouchDragOverlay.tsx
new file mode 100644
index 0000000..0e7afeb
--- /dev/null
+++ b/src/components/TouchDragOverlay.tsx
@@ -0,0 +1,36 @@
+/**
+ * TouchDragOverlay — floating preview that follows the finger during touch drag.
+ *
+ * On desktop, the HTML5 Drag API provides a built-in ghost image. On mobile,
+ * touch events have no equivalent, so this component renders a small
+ * semi-transparent thumbnail at the current touch position via a portal.
+ */
+
+import { createPortal } from "react-dom";
+
+interface TouchDragOverlayProps {
+  /** Current touch coordinates (null when not dragging via touch). */
+  touchPos: { x: number; y: number } | null;
+  children: React.ReactNode;
+}
+
+export function TouchDragOverlay({ touchPos, children }: TouchDragOverlayProps) {
+  if (!touchPos) return null;
+
+  return createPortal(
+    <div
+      style={{
+        position: "fixed",
+        left: touchPos.x,
+        top: touchPos.y,
+        transform: "translate(-50%, -60%) rotate(-3deg)",
+        pointerEvents: "none",
+        zIndex: 9999,
+      }}
+      className="opacity-80 scale-90 shadow-xl rounded-lg"
+    >
+      {children}
+    </div>,
+    document.body,
+  );
+}
diff --git a/src/hooks/useSortableDrag.ts b/src/hooks/useSortableDrag.ts
index 208ab92..c432a82 100644
--- a/src/hooks/useSortableDrag.ts
+++ b/src/hooks/useSortableDrag.ts
@@ -21,6 +21,8 @@ import { useState, useEffect, useRef, useCallback } from "react";
 export function useSortableDrag(onMove: (fromIndex: number, toSlot: number) => void) {
   const [dragIndex, setDragIndex] = useState<number | null>(null);
   const [dragOverSlot, setDragOverSlot] = useState<number | null>(null);
+  /** Current touch position — non-null only during an active touch drag. */
+  const [touchPos, setTouchPos] = useState<{ x: number; y: number } | null>(null);
 
   // Refs so the document-level listeners don't need to be re-registered
   const touchStartSlot = useRef<number | null>(null);
@@ -65,6 +67,9 @@ export function useSortableDrag(onMove: (fromIndex: number, toSlot: number) => v
       // Prevent page scroll while reordering.
       e.preventDefault();
 
+      // Track finger position for the drag overlay.
+      setTouchPos({ x: touch.clientX, y: touch.clientY });
+
       // Find which drop-zone slot is under the finger.
       const el = document.elementFromPoint(touch.clientX, touch.clientY);
       const zone = el?.closest("[data-drop-slot]") as HTMLElement | null;
@@ -97,6 +102,7 @@ export function useSortableDrag(onMove: (fromIndex: number, toSlot: number) => v
       touchStartPos.current = null;
       setDragIndex(null);
       setDragOverSlot(null);
+      setTouchPos(null);
     };
 
     const handleTouchCancel = () => {
@@ -105,6 +111,7 @@ export function useSortableDrag(onMove: (fromIndex: number, toSlot: number) => v
       touchStartPos.current = null;
       setDragIndex(null);
       setDragOverSlot(null);
+      setTouchPos(null);
     };
 
     // Non-passive so we can call preventDefault() during active drag.
@@ -119,5 +126,5 @@ export function useSortableDrag(onMove: (fromIndex: number, toSlot: number) => v
     };
   }, []); // all mutable state accessed via refs — no deps needed
 
-  return { dragIndex, dragOverSlot, setDragIndex, setDragOverSlot, getTouchHandlers };
+  return { dragIndex, dragOverSlot, touchPos, setDragIndex, setDragOverSlot, getTouchHandlers };
 }
diff --git a/src/tools/AddBlankPage.tsx b/src/tools/AddBlankPage.tsx
index a0ebf9f..56c742b 100644
--- a/src/tools/AddBlankPage.tsx
+++ b/src/tools/AddBlankPage.tsx
@@ -11,6 +11,7 @@ import { FileDropZone } from "../components/FileDropZone.tsx";
 import { categoryAccent, categoryGlow } from "../config/theme.ts";
 import { downloadPdf, formatFileSize } from "../utils/file-helpers.ts";
 import { useSortableDrag } from "../hooks/useSortableDrag.ts";
+import { TouchDragOverlay } from "../components/TouchDragOverlay.tsx";
 import { addBlankPages } from "../utils/pdf-operations.ts";
 import { renderAllThumbnails } from "../utils/pdf-renderer.ts";
 import { Undo2, Plus } from "lucide-react";
@@ -43,7 +44,7 @@ export default function AddBlankPage() {
   }, []);
 
   // Drag state (desktop + mobile touch)
-  const { dragIndex, dragOverSlot, setDragIndex, setDragOverSlot, getTouchHandlers } =
+  const { dragIndex, dragOverSlot, touchPos, setDragIndex, setDragOverSlot, getTouchHandlers } =
     useSortableDrag(handleMove);
 
   const handleFile = useCallback(async (files: File[]) => {
@@ -330,6 +331,29 @@ export default function AddBlankPage() {
                   {renderItems()}
                 </div>
 
+                {dragIndex !== null && (
+                  <TouchDragOverlay touchPos={touchPos}>
+                    {items[dragIndex]?.type === "blank" ? (
+                      <div className="w-20 sm:w-24 md:w-28 aspect-[3/4] rounded-lg border-2 border-dashed border-primary-400 bg-primary-50 dark:bg-primary-900/20 flex items-center justify-center shadow-lg">
+                        <span className="text-primary-500 text-2xl font-light">+</span>
+                      </div>
+                    ) : (
+                      <div className="w-20 sm:w-24 md:w-28 aspect-[3/4] bg-white dark:bg-dark-surface rounded-lg overflow-hidden border-2 border-primary-400 shadow-lg">
+                        <img
+                          src={
+                            thumbnails[
+                              (items[dragIndex] as { type: "original"; index: number }).index
+                            ]
+                          }
+                          className="w-full h-full object-contain"
+                          alt=""
+                          draggable={false}
+                        />
+                      </div>
+                    )}
+                  </TouchDragOverlay>
+                )}
+
                 {hasBlankPages && (
                   <p className="text-xs text-primary-600 dark:text-primary-400 font-medium">
                     {items.filter((it) => it.type === "blank").length} blank page(s) added — click
diff --git a/src/tools/DuplicatePage.tsx b/src/tools/DuplicatePage.tsx
index 993f5ce..1a849ed 100644
--- a/src/tools/DuplicatePage.tsx
+++ b/src/tools/DuplicatePage.tsx
@@ -11,6 +11,7 @@ import { FileDropZone } from "../components/FileDropZone.tsx";
 import { categoryAccent, categoryGlow } from "../config/theme.ts";
 import { downloadPdf, formatFileSize } from "../utils/file-helpers.ts";
 import { useSortableDrag } from "../hooks/useSortableDrag.ts";
+import { TouchDragOverlay } from "../components/TouchDragOverlay.tsx";
 import { duplicatePages } from "../utils/pdf-operations.ts";
 import { renderAllThumbnails } from "../utils/pdf-renderer.ts";
 import { Undo2 } from "lucide-react";
@@ -43,7 +44,7 @@ export default function DuplicatePage() {
   }, []);
 
   // Drag state (desktop + mobile touch)
-  const { dragIndex, dragOverSlot, setDragIndex, setDragOverSlot, getTouchHandlers } =
+  const { dragIndex, dragOverSlot, touchPos, setDragIndex, setDragOverSlot, getTouchHandlers } =
     useSortableDrag(handleMove);
 
   const handleFile = useCallback(async (files: File[]) => {
@@ -335,6 +336,30 @@ export default function DuplicatePage() {
                   {renderItems()}
                 </div>
 
+                {dragIndex !== null &&
+                  (() => {
+                    const item = items[dragIndex];
+                    const srcIdx =
+                      item?.type === "copy"
+                        ? item.sourceIndex
+                        : item?.type === "original"
+                          ? item.index
+                          : null;
+                    if (srcIdx === null) return null;
+                    return (
+                      <TouchDragOverlay touchPos={touchPos}>
+                        <div className="w-20 sm:w-24 md:w-28 aspect-[3/4] bg-white dark:bg-dark-surface rounded-lg overflow-hidden border-2 border-primary-400 shadow-lg">
+                          <img
+                            src={thumbnails[srcIdx]}
+                            className="w-full h-full object-contain"
+                            alt=""
+                            draggable={false}
+                          />
+                        </div>
+                      </TouchDragOverlay>
+                    );
+                  })()}
+
                 {hasCopies && (
                   <p className="text-xs text-primary-600 dark:text-primary-400 font-medium">
                     {items.filter((it) => it.type === "copy").length} copy(ies) added — click below
diff --git a/src/tools/ReorderPages.tsx b/src/tools/ReorderPages.tsx
index 1fb0949..640216b 100644
--- a/src/tools/ReorderPages.tsx
+++ b/src/tools/ReorderPages.tsx
@@ -15,6 +15,7 @@ import { reorderPages } from "../utils/pdf-operations.ts";
 import { renderAllThumbnails } from "../utils/pdf-renderer.ts";
 import { downloadPdf } from "../utils/file-helpers.ts";
 import { useSortableDrag } from "../hooks/useSortableDrag.ts";
+import { TouchDragOverlay } from "../components/TouchDragOverlay.tsx";
 import { Undo2 } from "lucide-react";
 
 export default function ReorderPages() {
@@ -37,7 +38,7 @@ export default function ReorderPages() {
   }, []);
 
   // Drag state (desktop + mobile touch)
-  const { dragIndex, dragOverSlot, setDragIndex, setDragOverSlot, getTouchHandlers } =
+  const { dragIndex, dragOverSlot, touchPos, setDragIndex, setDragOverSlot, getTouchHandlers } =
     useSortableDrag(handleMove);
 
   const handleFile = useCallback(async (files: File[]) => {
@@ -266,6 +267,19 @@ export default function ReorderPages() {
                   {renderItems()}
                 </div>
 
+                {dragIndex !== null && (
+                  <TouchDragOverlay touchPos={touchPos}>
+                    <div className="w-20 sm:w-24 md:w-28 aspect-[3/4] bg-white dark:bg-dark-surface rounded-lg overflow-hidden border-2 border-primary-400 shadow-lg">
+                      <img
+                        src={thumbnails[order[dragIndex]]}
+                        className="w-full h-full object-contain"
+                        alt=""
+                        draggable={false}
+                      />
+                    </div>
+                  </TouchDragOverlay>
+                )}
+
                 {isReordered && (
                   <p className="text-xs text-primary-600 dark:text-primary-400 font-medium">
                     Order changed — click below to apply

From 4c01a661217fcd32b608de214c3e6f939763484c Mon Sep 17 00:00:00 2001
From: Sumit Sahoo <sumitsahoo1988@gmail.com>
Date: Sat, 11 Apr 2026 13:46:06 +0530
Subject: [PATCH 2/4] feat: implement SortableGrid component for drag-and-drop
 functionality

- Added SortableGrid component to facilitate reusable drag-and-drop grid for item reordering.
- Updated TouchDragOverlay to remove rotation for better alignment.
- Refactored useSortableDrag hook to provide getItemProps for handling both HTML5 and touch events.
- Integrated SortableGrid into AddBlankPage, DuplicatePage, and ReorderPages components for consistent drag-and-drop behavior.
- Removed redundant drag-and-drop logic from AddBlankPage and DuplicatePage, leveraging SortableGrid instead.
---
 src/components/SortableGrid.tsx     | 122 +++++++++++
 src/components/TouchDragOverlay.tsx |   2 +-
 src/hooks/useSortableDrag.ts        |  39 +++-
 src/tools/AddBlankPage.tsx          | 297 +++++++++++----------------
 src/tools/DuplicatePage.tsx         | 308 ++++++++++++----------------
 src/tools/ReorderPages.tsx          | 209 ++++++-------------
 6 files changed, 467 insertions(+), 510 deletions(-)
 create mode 100644 src/components/SortableGrid.tsx

diff --git a/src/components/SortableGrid.tsx b/src/components/SortableGrid.tsx
new file mode 100644
index 0000000..bfb9c68
--- /dev/null
+++ b/src/components/SortableGrid.tsx
@@ -0,0 +1,122 @@
+/**
+ * SortableGrid — reusable drag-and-drop grid for page reordering.
+ *
+ * Renders an interleaved layout of drop-zones and items:
+ *   [drop_0] [item_0] [drop_1] [item_1] ... [item_N-1] [drop_N]
+ *
+ * Drop-zones expand when hovering during a drag to show where the item will
+ * land. A floating TouchDragOverlay follows the finger on mobile.
+ *
+ * Usage:
+ *   const drag = useSortableDrag(handleMove);
+ *
+ *   <SortableGrid
+ *     itemCount={items.length}
+ *     drag={drag}
+ *     onMove={handleMove}
+ *     renderItem={(slot, isSource) => <PageCard ... />}
+ *     renderOverlay={(dragIndex) => <OverlayContent ... />}
+ *   />
+ */
+
+import type { SortableDrag } from "../hooks/useSortableDrag.ts";
+import { TouchDragOverlay } from "./TouchDragOverlay.tsx";
+
+interface SortableGridProps {
+  /** Total number of items in the list. */
+  itemCount: number;
+  /** Drag state bag from useSortableDrag. */
+  drag: SortableDrag;
+  /** Called when an item is dropped at a new slot (desktop HTML5 drag path). */
+  onMove: (fromIndex: number, toSlot: number) => void;
+  /**
+   * Render a single item at the given slot.
+   * The item is responsible for spreading `drag.getItemProps(slot)` (or a
+   * subset of it) onto its root element to make it draggable.
+   */
+  renderItem: (slot: number, isSource: boolean) => React.ReactNode;
+  /** Render the content shown inside the floating touch-drag overlay. */
+  renderOverlay?: (dragIndex: number) => React.ReactNode;
+  /** Optional class override for the grid wrapper. */
+  className?: string;
+}
+
+export function SortableGrid({
+  itemCount,
+  drag,
+  onMove,
+  renderItem,
+  renderOverlay,
+  className,
+}: SortableGridProps) {
+  const { dragIndex, dragOverSlot, touchPos, setDragIndex, setDragOverSlot } = drag;
+  const isDragging = dragIndex !== null;
+
+  const elements: React.ReactNode[] = [];
+
+  for (let slot = 0; slot <= itemCount; slot++) {
+    const isAdjacentToDrag = dragIndex !== null && (slot === dragIndex || slot === dragIndex + 1);
+
+    // ── Drop zone ──
+    elements.push(
+      <div
+        key={`drop-${slot}`}
+        data-drop-slot={slot}
+        onDragOver={(e) => {
+          if (isAdjacentToDrag) return;
+          e.preventDefault();
+          setDragOverSlot(slot);
+        }}
+        onDragLeave={(e) => {
+          if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+            if (dragOverSlot === slot) setDragOverSlot(null);
+          }
+        }}
+        onDrop={(e) => {
+          e.preventDefault();
+          if (dragIndex === null || isAdjacentToDrag) return;
+          onMove(dragIndex, slot);
+          setDragIndex(null);
+          setDragOverSlot(null);
+        }}
+        className={`self-stretch flex items-center justify-center rounded-lg transition-all duration-200 ${
+          isDragging && !isAdjacentToDrag
+            ? dragOverSlot === slot
+              ? "w-20 sm:w-24 bg-primary-50 dark:bg-primary-900/20"
+              : "w-3 sm:w-4"
+            : "w-0"
+        }`}
+      >
+        {isDragging && !isAdjacentToDrag && (
+          <div
+            className={`rounded-full transition-all duration-200 ${
+              dragOverSlot === slot
+                ? "w-1 bg-primary-500"
+                : "w-0.5 bg-primary-200 dark:bg-primary-800"
+            }`}
+            style={{ height: dragOverSlot === slot ? "80%" : "60%" }}
+          />
+        )}
+      </div>,
+    );
+
+    // ── Item ──
+    if (slot < itemCount) {
+      elements.push(renderItem(slot, dragIndex === slot));
+    }
+  }
+
+  return (
+    <>
+      <div
+        className={className ?? "flex flex-wrap items-end gap-y-6 overflow-x-auto pb-2 min-h-28"}
+      >
+        {elements}
+      </div>
+
+      {dragIndex !== null && renderOverlay && (
+        <TouchDragOverlay touchPos={touchPos}>{renderOverlay(dragIndex)}</TouchDragOverlay>
+      )}
+    </>
+  );
+}
diff --git a/src/components/TouchDragOverlay.tsx b/src/components/TouchDragOverlay.tsx
index 0e7afeb..ebe3b61 100644
--- a/src/components/TouchDragOverlay.tsx
+++ b/src/components/TouchDragOverlay.tsx
@@ -23,7 +23,7 @@ export function TouchDragOverlay({ touchPos, children }: TouchDragOverlayProps)
         position: "fixed",
         left: touchPos.x,
         top: touchPos.y,
-        transform: "translate(-50%, -60%) rotate(-3deg)",
+        transform: "translate(-50%, -60%)",
         pointerEvents: "none",
         zIndex: 9999,
       }}
diff --git a/src/hooks/useSortableDrag.ts b/src/hooks/useSortableDrag.ts
index c432a82..c672b36 100644
--- a/src/hooks/useSortableDrag.ts
+++ b/src/hooks/useSortableDrag.ts
@@ -4,9 +4,11 @@
  * Supports both the HTML5 drag API (desktop) and touch events (mobile).
  *
  * Components must:
- *  1. Spread `getTouchHandlers(slot)` onto every draggable item.
+ *  1. Spread `getItemProps(slot)` onto every draggable item — this wires up
+ *     both the HTML5 drag API and touch handlers in one call.
  *  2. Add `data-drop-slot={slot}` to every drop-zone div so touch tracking
  *     can identify the target slot via `document.elementFromPoint`.
+ *     (If using `SortableGrid`, drop-zones are handled automatically.)
  *
  * Touch behaviour:
  *  - Drag activates after an 8 px movement threshold so short taps still
@@ -31,7 +33,7 @@ export function useSortableDrag(onMove: (fromIndex: number, toSlot: number) => v
   const onMoveRef = useRef(onMove);
   onMoveRef.current = onMove;
 
-  /** Call this from each draggable item's onTouchStart. */
+  /** Touch handlers for a single draggable item (used internally by getItemProps). */
   const getTouchHandlers = useCallback(
     (slot: number) => ({
       onTouchStart(e: React.TouchEvent) {
@@ -49,6 +51,26 @@ export function useSortableDrag(onMove: (fromIndex: number, toSlot: number) => v
     [],
   );
 
+  /**
+   * All props needed to make an element draggable (HTML5 + touch).
+   * Spread the result onto the draggable element:  `{...getItemProps(slot)}`
+   */
+  const getItemProps = useCallback(
+    (slot: number) => ({
+      draggable: true as const,
+      onDragStart(e: React.DragEvent) {
+        e.dataTransfer.effectAllowed = "move";
+        setDragIndex(slot);
+      },
+      onDragEnd() {
+        setDragIndex(null);
+        setDragOverSlot(null);
+      },
+      ...getTouchHandlers(slot),
+    }),
+    [getTouchHandlers],
+  );
+
   useEffect(() => {
     const handleTouchMove = (e: TouchEvent) => {
       if (touchStartSlot.current === null || touchStartPos.current === null) return;
@@ -126,5 +148,16 @@ export function useSortableDrag(onMove: (fromIndex: number, toSlot: number) => v
     };
   }, []); // all mutable state accessed via refs — no deps needed
 
-  return { dragIndex, dragOverSlot, touchPos, setDragIndex, setDragOverSlot, getTouchHandlers };
+  return {
+    dragIndex,
+    dragOverSlot,
+    touchPos,
+    setDragIndex,
+    setDragOverSlot,
+    getItemProps,
+    getTouchHandlers,
+  };
 }
+
+/** Convenience type for passing the full drag bag to SortableGrid. */
+export type SortableDrag = ReturnType<typeof useSortableDrag>;
diff --git a/src/tools/AddBlankPage.tsx b/src/tools/AddBlankPage.tsx
index 56c742b..37a3e12 100644
--- a/src/tools/AddBlankPage.tsx
+++ b/src/tools/AddBlankPage.tsx
@@ -8,10 +8,10 @@
 
 import { useState, useCallback } from "react";
 import { FileDropZone } from "../components/FileDropZone.tsx";
+import { SortableGrid } from "../components/SortableGrid.tsx";
 import { categoryAccent, categoryGlow } from "../config/theme.ts";
 import { downloadPdf, formatFileSize } from "../utils/file-helpers.ts";
 import { useSortableDrag } from "../hooks/useSortableDrag.ts";
-import { TouchDragOverlay } from "../components/TouchDragOverlay.tsx";
 import { addBlankPages } from "../utils/pdf-operations.ts";
 import { renderAllThumbnails } from "../utils/pdf-renderer.ts";
 import { Undo2, Plus } from "lucide-react";
@@ -44,8 +44,7 @@ export default function AddBlankPage() {
   }, []);
 
   // Drag state (desktop + mobile touch)
-  const { dragIndex, dragOverSlot, touchPos, setDragIndex, setDragOverSlot, getTouchHandlers } =
-    useSortableDrag(handleMove);
+  const drag = useSortableDrag(handleMove);
 
   const handleFile = useCallback(async (files: File[]) => {
     const pdf = files[0];
@@ -72,7 +71,7 @@ export default function AddBlankPage() {
   }, []);
 
   const hasBlankPages = items.some((it) => it.type === "blank");
-  const isDragging = dragIndex !== null;
+  const isDragging = drag.dragIndex !== null;
 
   const handleAddBlank = useCallback(() => {
     setItems((prev) => [{ type: "blank", id: nextBlankId() }, ...prev]);
@@ -80,9 +79,9 @@ export default function AddBlankPage() {
 
   const handleReset = useCallback(() => {
     setItems((prev) => prev.filter((it) => it.type === "original"));
-    setDragIndex(null);
-    setDragOverSlot(null);
-  }, [setDragIndex, setDragOverSlot]);
+    drag.setDragIndex(null);
+    drag.setDragOverSlot(null);
+  }, [drag]);
 
   const handleApply = useCallback(async () => {
     if (!file || !hasBlankPages) return;
@@ -110,158 +109,6 @@ export default function AddBlankPage() {
     }
   }, [file, hasBlankPages, items]);
 
-  const renderItems = () => {
-    const elements: React.ReactNode[] = [];
-
-    for (let slot = 0; slot <= items.length; slot++) {
-      // ── Drop zone ──
-      const isAdjacentToDrag = dragIndex !== null && (slot === dragIndex || slot === dragIndex + 1);
-
-      elements.push(
-        <div
-          key={`drop-${slot}`}
-          data-drop-slot={slot}
-          onDragOver={(e) => {
-            if (isAdjacentToDrag) return;
-            e.preventDefault();
-            setDragOverSlot(slot);
-          }}
-          onDragLeave={(e) => {
-            if (!e.currentTarget.contains(e.relatedTarget as Node)) {
-              if (dragOverSlot === slot) setDragOverSlot(null);
-            }
-          }}
-          onDrop={(e) => {
-            e.preventDefault();
-            if (dragIndex === null || isAdjacentToDrag) return;
-            setItems((prev) => {
-              const next = [...prev];
-              const [moved] = next.splice(dragIndex, 1);
-              const adjustedSlot = dragIndex < slot ? slot - 1 : slot;
-              next.splice(adjustedSlot, 0, moved);
-              return next;
-            });
-            setDragIndex(null);
-            setDragOverSlot(null);
-          }}
-          className={`self-stretch flex items-center justify-center rounded-lg transition-all duration-200 ${
-            isDragging && !isAdjacentToDrag
-              ? dragOverSlot === slot
-                ? "w-20 sm:w-24 bg-primary-50 dark:bg-primary-900/20"
-                : "w-3 sm:w-4"
-              : "w-0"
-          }`}
-        >
-          {isDragging && !isAdjacentToDrag && (
-            <div
-              className={`rounded-full transition-all duration-200 ${
-                dragOverSlot === slot
-                  ? "w-1 bg-primary-500"
-                  : "w-0.5 bg-primary-200 dark:bg-primary-800"
-              }`}
-              style={{ height: dragOverSlot === slot ? "80%" : "60%" }}
-            />
-          )}
-        </div>,
-      );
-
-      // ── Page card ──
-      if (slot < items.length) {
-        const item = items[slot];
-        const isSource = dragIndex === slot;
-
-        if (item.type === "blank") {
-          elements.push(
-            <div
-              key={item.id}
-              draggable
-              onDragStart={(e) => {
-                e.dataTransfer.effectAllowed = "move";
-                setDragIndex(slot);
-              }}
-              onDragEnd={() => {
-                setDragIndex(null);
-                setDragOverSlot(null);
-              }}
-              {...getTouchHandlers(slot)}
-              className={`shrink-0 pt-2 pr-2 flex flex-col items-center gap-1.5 cursor-grab active:cursor-grabbing select-none transition-all duration-200 ${
-                isSource ? "scale-95 opacity-30" : "scale-100 opacity-100"
-              }`}
-            >
-              <div className="relative">
-                <div
-                  className={`w-20 sm:w-24 md:w-28 aspect-[3/4] rounded-lg border-2 border-dashed flex items-center justify-center transition-colors shadow-sm ${
-                    isSource
-                      ? "border-slate-300 dark:border-dark-border bg-slate-50 dark:bg-dark-surface"
-                      : "border-primary-400 bg-primary-50 dark:bg-primary-900/20"
-                  }`}
-                >
-                  <span className="text-primary-500 text-2xl font-light">+</span>
-                </div>
-                <div
-                  className={`absolute -top-1.5 -right-1.5 text-white text-[10px] font-bold px-1.5 h-5 rounded-full flex items-center justify-center shadow-md z-10 transition-opacity duration-200 ${
-                    isSource ? "bg-slate-400 dark:bg-slate-600 opacity-50" : "bg-primary-600"
-                  }`}
-                >
-                  New
-                </div>
-              </div>
-              <span className="text-xs font-medium text-primary-500">Blank</span>
-            </div>,
-          );
-        } else {
-          elements.push(
-            <div
-              key={`page-${item.index}`}
-              draggable
-              onDragStart={(e) => {
-                e.dataTransfer.effectAllowed = "move";
-                setDragIndex(slot);
-              }}
-              onDragEnd={() => {
-                setDragIndex(null);
-                setDragOverSlot(null);
-              }}
-              {...getTouchHandlers(slot)}
-              className={`shrink-0 pt-2 pr-2 flex flex-col items-center gap-1.5 cursor-grab active:cursor-grabbing select-none transition-all duration-200 ${
-                isSource ? "scale-95 opacity-30" : "scale-100 opacity-100"
-              }`}
-            >
-              <div className="relative">
-                <div
-                  className={`w-20 sm:w-24 md:w-28 aspect-[3/4] bg-white dark:bg-dark-surface rounded-lg overflow-hidden border-2 transition-colors shadow-sm ${
-                    isSource
-                      ? "border-dashed border-slate-300 dark:border-dark-border"
-                      : "border-slate-200 dark:border-dark-border hover:border-primary-300 dark:hover:border-primary-600"
-                  }`}
-                >
-                  <img
-                    src={thumbnails[item.index]}
-                    className="w-full h-full object-contain"
-                    alt={`Page ${item.index + 1}`}
-                    draggable={false}
-                  />
-                </div>
-                <div
-                  className={`absolute -top-1.5 -right-1.5 text-white text-xs font-bold w-6 h-6 rounded-full flex items-center justify-center shadow-md z-10 transition-opacity duration-200 ${
-                    isSource ? "bg-slate-400 dark:bg-slate-600 opacity-50" : "bg-primary-600"
-                  }`}
-                >
-                  {item.index + 1}
-                </div>
-              </div>
-              <span className="text-xs font-medium text-slate-500 dark:text-dark-text-muted">
-                Page {item.index + 1}
-              </span>
-            </div>,
-          );
-        }
-      }
-    }
-
-    return elements;
-  };
-
   return (
     <div className="space-y-6">
       {!file ? (
@@ -327,32 +174,118 @@ export default function AddBlankPage() {
                   </div>
                 </div>
 
-                <div className="flex flex-wrap items-end gap-y-6 overflow-x-auto pb-2 min-h-28">
-                  {renderItems()}
-                </div>
+                <SortableGrid
+                  itemCount={items.length}
+                  drag={drag}
+                  onMove={handleMove}
+                  renderItem={(slot, isSource) => {
+                    const item = items[slot];
 
-                {dragIndex !== null && (
-                  <TouchDragOverlay touchPos={touchPos}>
-                    {items[dragIndex]?.type === "blank" ? (
-                      <div className="w-20 sm:w-24 md:w-28 aspect-[3/4] rounded-lg border-2 border-dashed border-primary-400 bg-primary-50 dark:bg-primary-900/20 flex items-center justify-center shadow-lg">
-                        <span className="text-primary-500 text-2xl font-light">+</span>
+                    if (item.type === "blank") {
+                      return (
+                        <div
+                          key={item.id}
+                          {...drag.getItemProps(slot)}
+                          className={`shrink-0 pt-2 pr-2 flex flex-col items-center gap-1.5 cursor-grab active:cursor-grabbing select-none transition-all duration-200 ${
+                            isSource ? "scale-95 opacity-30" : "scale-100 opacity-100"
+                          }`}
+                        >
+                          <div className="relative">
+                            <div
+                              className={`w-20 sm:w-24 md:w-28 aspect-[3/4] rounded-lg border-2 border-dashed flex items-center justify-center transition-colors shadow-sm ${
+                                isSource
+                                  ? "border-slate-300 dark:border-dark-border bg-slate-50 dark:bg-dark-surface"
+                                  : "border-primary-400 bg-primary-50 dark:bg-primary-900/20"
+                              }`}
+                            >
+                              <span className="text-primary-500 text-2xl font-light">+</span>
+                            </div>
+                            <div
+                              className={`absolute -top-1.5 -right-1.5 text-white text-[10px] font-bold px-1.5 h-5 rounded-full flex items-center justify-center shadow-md z-10 transition-opacity duration-200 ${
+                                isSource
+                                  ? "bg-slate-400 dark:bg-slate-600 opacity-50"
+                                  : "bg-primary-600"
+                              }`}
+                            >
+                              New
+                            </div>
+                          </div>
+                          <span className="text-xs font-medium text-primary-500">Blank</span>
+                        </div>
+                      );
+                    }
+
+                    return (
+                      <div
+                        key={`page-${item.index}`}
+                        {...drag.getItemProps(slot)}
+                        className={`shrink-0 pt-2 pr-2 flex flex-col items-center gap-1.5 cursor-grab active:cursor-grabbing select-none transition-all duration-200 ${
+                          isSource ? "scale-95 opacity-30" : "scale-100 opacity-100"
+                        }`}
+                      >
+                        <div className="relative">
+                          <div
+                            className={`w-20 sm:w-24 md:w-28 aspect-[3/4] bg-white dark:bg-dark-surface rounded-lg overflow-hidden border-2 transition-colors shadow-sm ${
+                              isSource
+                                ? "border-dashed border-slate-300 dark:border-dark-border"
+                                : "border-slate-200 dark:border-dark-border hover:border-primary-300 dark:hover:border-primary-600"
+                            }`}
+                          >
+                            <img
+                              src={thumbnails[item.index]}
+                              className="w-full h-full object-contain"
+                              alt={`Page ${item.index + 1}`}
+                              draggable={false}
+                            />
+                          </div>
+                          <div
+                            className={`absolute -top-1.5 -right-1.5 text-white text-xs font-bold w-6 h-6 rounded-full flex items-center justify-center shadow-md z-10 transition-opacity duration-200 ${
+                              isSource
+                                ? "bg-slate-400 dark:bg-slate-600 opacity-50"
+                                : "bg-primary-600"
+                            }`}
+                          >
+                            {item.index + 1}
+                          </div>
+                        </div>
+                        <span className="text-xs font-medium text-slate-500 dark:text-dark-text-muted">
+                          Page {item.index + 1}
+                        </span>
                       </div>
-                    ) : (
-                      <div className="w-20 sm:w-24 md:w-28 aspect-[3/4] bg-white dark:bg-dark-surface rounded-lg overflow-hidden border-2 border-primary-400 shadow-lg">
-                        <img
-                          src={
-                            thumbnails[
-                              (items[dragIndex] as { type: "original"; index: number }).index
-                            ]
-                          }
-                          className="w-full h-full object-contain"
-                          alt=""
-                          draggable={false}
-                        />
+                    );
+                  }}
+                  renderOverlay={(idx) => {
+                    const item = items[idx];
+                    if (item?.type === "blank") {
+                      return (
+                        <div className="relative pt-2 pr-2">
+                          <div className="w-20 sm:w-24 md:w-28 aspect-[3/4] rounded-lg border-2 border-dashed border-primary-400 bg-primary-50 dark:bg-primary-900/20 flex items-center justify-center shadow-sm">
+                            <span className="text-primary-500 text-2xl font-light">+</span>
+                          </div>
+                          <div className="absolute top-0 right-0 text-white text-[10px] font-bold px-1.5 h-5 rounded-full flex items-center justify-center shadow-md bg-primary-600">
+                            New
+                          </div>
+                        </div>
+                      );
+                    }
+                    const pageIndex = (item as OriginalItem).index;
+                    return (
+                      <div className="relative pt-2 pr-2">
+                        <div className="w-20 sm:w-24 md:w-28 aspect-[3/4] bg-white dark:bg-dark-surface rounded-lg overflow-hidden border-2 border-slate-200 dark:border-dark-border shadow-sm">
+                          <img
+                            src={thumbnails[pageIndex]}
+                            className="w-full h-full object-contain"
+                            alt=""
+                            draggable={false}
+                          />
+                        </div>
+                        <div className="absolute top-0 right-0 text-white text-xs font-bold w-6 h-6 rounded-full flex items-center justify-center shadow-md bg-primary-600">
+                          {pageIndex + 1}
+                        </div>
                       </div>
-                    )}
-                  </TouchDragOverlay>
-                )}
+                    );
+                  }}
+                />
 
                 {hasBlankPages && (
                   <p className="text-xs text-primary-600 dark:text-primary-400 font-medium">
diff --git a/src/tools/DuplicatePage.tsx b/src/tools/DuplicatePage.tsx
index 1a849ed..79066b7 100644
--- a/src/tools/DuplicatePage.tsx
+++ b/src/tools/DuplicatePage.tsx
@@ -8,10 +8,10 @@
 
 import { useCallback, useState } from "react";
 import { FileDropZone } from "../components/FileDropZone.tsx";
+import { SortableGrid } from "../components/SortableGrid.tsx";
 import { categoryAccent, categoryGlow } from "../config/theme.ts";
 import { downloadPdf, formatFileSize } from "../utils/file-helpers.ts";
 import { useSortableDrag } from "../hooks/useSortableDrag.ts";
-import { TouchDragOverlay } from "../components/TouchDragOverlay.tsx";
 import { duplicatePages } from "../utils/pdf-operations.ts";
 import { renderAllThumbnails } from "../utils/pdf-renderer.ts";
 import { Undo2 } from "lucide-react";
@@ -44,8 +44,7 @@ export default function DuplicatePage() {
   }, []);
 
   // Drag state (desktop + mobile touch)
-  const { dragIndex, dragOverSlot, touchPos, setDragIndex, setDragOverSlot, getTouchHandlers } =
-    useSortableDrag(handleMove);
+  const drag = useSortableDrag(handleMove);
 
   const handleFile = useCallback(async (files: File[]) => {
     const pdf = files[0];
@@ -70,7 +69,7 @@ export default function DuplicatePage() {
   }, []);
 
   const hasCopies = items.some((it) => it.type === "copy");
-  const isDragging = dragIndex !== null;
+  const isDragging = drag.dragIndex !== null;
 
   const handleDuplicatePage = useCallback((pageIndex: number, afterSlot: number) => {
     setItems((prev) => {
@@ -82,9 +81,9 @@ export default function DuplicatePage() {
 
   const handleReset = useCallback(() => {
     setItems((prev) => prev.filter((it) => it.type === "original"));
-    setDragIndex(null);
-    setDragOverSlot(null);
-  }, [setDragIndex, setDragOverSlot]);
+    drag.setDragIndex(null);
+    drag.setDragOverSlot(null);
+  }, [drag]);
 
   const handleApply = useCallback(async () => {
     if (!file || !hasCopies) return;
@@ -111,170 +110,6 @@ export default function DuplicatePage() {
     }
   }, [file, hasCopies, items]);
 
-  const renderItems = () => {
-    const elements: React.ReactNode[] = [];
-
-    for (let slot = 0; slot <= items.length; slot++) {
-      // ── Drop zone ──
-      const isAdjacentToDrag = dragIndex !== null && (slot === dragIndex || slot === dragIndex + 1);
-
-      elements.push(
-        <div
-          key={`drop-${slot}`}
-          data-drop-slot={slot}
-          onDragOver={(e) => {
-            if (isAdjacentToDrag) return;
-            e.preventDefault();
-            setDragOverSlot(slot);
-          }}
-          onDragLeave={(e) => {
-            if (!e.currentTarget.contains(e.relatedTarget as Node)) {
-              if (dragOverSlot === slot) setDragOverSlot(null);
-            }
-          }}
-          onDrop={(e) => {
-            e.preventDefault();
-            if (dragIndex === null || isAdjacentToDrag) return;
-            setItems((prev) => {
-              const next = [...prev];
-              const [moved] = next.splice(dragIndex, 1);
-              const adjustedSlot = dragIndex < slot ? slot - 1 : slot;
-              next.splice(adjustedSlot, 0, moved);
-              return next;
-            });
-            setDragIndex(null);
-            setDragOverSlot(null);
-          }}
-          className={`self-stretch flex items-center justify-center rounded-lg transition-all duration-200 ${
-            isDragging && !isAdjacentToDrag
-              ? dragOverSlot === slot
-                ? "w-20 sm:w-24 bg-primary-50 dark:bg-primary-900/20"
-                : "w-3 sm:w-4"
-              : "w-0"
-          }`}
-        >
-          {isDragging && !isAdjacentToDrag && (
-            <div
-              className={`rounded-full transition-all duration-200 ${
-                dragOverSlot === slot
-                  ? "w-1 bg-primary-500"
-                  : "w-0.5 bg-primary-200 dark:bg-primary-800"
-              }`}
-              style={{ height: dragOverSlot === slot ? "80%" : "60%" }}
-            />
-          )}
-        </div>,
-      );
-
-      // ── Page card ──
-      if (slot < items.length) {
-        const item = items[slot];
-        const isSource = dragIndex === slot;
-
-        if (item.type === "copy") {
-          elements.push(
-            <div
-              key={item.id}
-              draggable
-              onDragStart={(e) => {
-                e.dataTransfer.effectAllowed = "move";
-                setDragIndex(slot);
-              }}
-              onDragEnd={() => {
-                setDragIndex(null);
-                setDragOverSlot(null);
-              }}
-              {...getTouchHandlers(slot)}
-              className={`shrink-0 p-2 flex flex-col items-center gap-1.5 cursor-grab active:cursor-grabbing select-none transition-all duration-200 ${
-                isSource ? "scale-95 opacity-30" : "scale-100 opacity-100"
-              }`}
-            >
-              <div className="relative">
-                <div
-                  className={`w-20 sm:w-24 md:w-28 aspect-[3/4] bg-white dark:bg-dark-surface rounded-lg overflow-hidden border-2 transition-colors shadow-sm ${
-                    isSource
-                      ? "border-dashed border-slate-300 dark:border-dark-border"
-                      : "border-primary-400"
-                  }`}
-                >
-                  <img
-                    src={thumbnails[item.sourceIndex]}
-                    className="w-full h-full object-contain"
-                    alt={`Copy of page ${item.sourceIndex + 1}`}
-                    draggable={false}
-                  />
-                  <div className="absolute inset-0 bg-primary-500/20 rounded-lg" />
-                </div>
-                <div
-                  className={`absolute -top-1.5 -right-1.5 text-white text-[10px] font-bold px-1.5 h-5 rounded-full flex items-center justify-center shadow-md z-10 transition-opacity duration-200 ${
-                    isSource ? "bg-slate-400 dark:bg-slate-600 opacity-50" : "bg-primary-600"
-                  }`}
-                >
-                  Copy
-                </div>
-              </div>
-              <span className="text-xs font-medium text-primary-500">
-                Copy of {item.sourceIndex + 1}
-              </span>
-            </div>,
-          );
-        } else {
-          elements.push(
-            <div
-              key={`page-${item.index}`}
-              draggable={hasCopies}
-              onClick={() => {
-                if (!isDragging) handleDuplicatePage(item.index, slot);
-              }}
-              onDragStart={(e) => {
-                if (!hasCopies) return;
-                e.dataTransfer.effectAllowed = "move";
-                setDragIndex(slot);
-              }}
-              onDragEnd={() => {
-                setDragIndex(null);
-                setDragOverSlot(null);
-              }}
-              {...(hasCopies ? getTouchHandlers(slot) : {})}
-              className={`shrink-0 p-2 flex flex-col items-center gap-1.5 select-none transition-all duration-200 cursor-pointer ${
-                hasCopies ? "active:cursor-grabbing" : "hover:scale-105"
-              } ${isSource ? "scale-95 opacity-30" : "scale-100 opacity-100"}`}
-            >
-              <div className="relative">
-                <div
-                  className={`w-20 sm:w-24 md:w-28 aspect-[3/4] bg-white dark:bg-dark-surface rounded-lg overflow-hidden border-2 transition-colors shadow-sm ${
-                    isSource
-                      ? "border-dashed border-slate-300 dark:border-dark-border"
-                      : "border-slate-200 dark:border-dark-border hover:border-primary-300 dark:hover:border-primary-600"
-                  }`}
-                >
-                  <img
-                    src={thumbnails[item.index]}
-                    className="w-full h-full object-contain"
-                    alt={`Page ${item.index + 1}`}
-                    draggable={false}
-                  />
-                </div>
-                <div
-                  className={`absolute -top-1.5 -right-1.5 text-white text-xs font-bold w-6 h-6 rounded-full flex items-center justify-center shadow-md z-10 transition-opacity duration-200 ${
-                    isSource ? "bg-slate-400 dark:bg-slate-600 opacity-50" : "bg-primary-600"
-                  }`}
-                >
-                  {item.index + 1}
-                </div>
-              </div>
-              <span className="text-xs font-medium text-slate-500 dark:text-dark-text-muted">
-                Page {item.index + 1}
-              </span>
-            </div>,
-          );
-        }
-      }
-    }
-
-    return elements;
-  };
-
   return (
     <div className="space-y-6">
       {!file ? (
@@ -332,13 +167,112 @@ export default function DuplicatePage() {
                   )}
                 </div>
 
-                <div className="flex flex-wrap items-end gap-y-6 pb-2 min-h-28">
-                  {renderItems()}
-                </div>
+                <SortableGrid
+                  itemCount={items.length}
+                  drag={drag}
+                  onMove={handleMove}
+                  className="flex flex-wrap items-end gap-y-6 pb-2 min-h-28"
+                  renderItem={(slot, isSource) => {
+                    const item = items[slot];
+
+                    if (item.type === "copy") {
+                      return (
+                        <div
+                          key={item.id}
+                          {...drag.getItemProps(slot)}
+                          className={`shrink-0 p-2 flex flex-col items-center gap-1.5 cursor-grab active:cursor-grabbing select-none transition-all duration-200 ${
+                            isSource ? "scale-95 opacity-30" : "scale-100 opacity-100"
+                          }`}
+                        >
+                          <div className="relative">
+                            <div
+                              className={`w-20 sm:w-24 md:w-28 aspect-[3/4] bg-white dark:bg-dark-surface rounded-lg overflow-hidden border-2 transition-colors shadow-sm ${
+                                isSource
+                                  ? "border-dashed border-slate-300 dark:border-dark-border"
+                                  : "border-primary-400"
+                              }`}
+                            >
+                              <img
+                                src={thumbnails[item.sourceIndex]}
+                                className="w-full h-full object-contain"
+                                alt={`Copy of page ${item.sourceIndex + 1}`}
+                                draggable={false}
+                              />
+                              <div className="absolute inset-0 bg-primary-500/20 rounded-lg" />
+                            </div>
+                            <div
+                              className={`absolute -top-1.5 -right-1.5 text-white text-[10px] font-bold px-1.5 h-5 rounded-full flex items-center justify-center shadow-md z-10 transition-opacity duration-200 ${
+                                isSource
+                                  ? "bg-slate-400 dark:bg-slate-600 opacity-50"
+                                  : "bg-primary-600"
+                              }`}
+                            >
+                              Copy
+                            </div>
+                          </div>
+                          <span className="text-xs font-medium text-primary-500">
+                            Copy of {item.sourceIndex + 1}
+                          </span>
+                        </div>
+                      );
+                    }
 
-                {dragIndex !== null &&
-                  (() => {
-                    const item = items[dragIndex];
+                    // Original page card — conditionally draggable (only after copies exist).
+                    // Uses getTouchHandlers directly instead of getItemProps for selective control.
+                    return (
+                      <div
+                        key={`page-${item.index}`}
+                        draggable={hasCopies}
+                        onClick={() => {
+                          if (!isDragging) handleDuplicatePage(item.index, slot);
+                        }}
+                        onDragStart={(e) => {
+                          if (!hasCopies) return;
+                          e.dataTransfer.effectAllowed = "move";
+                          drag.setDragIndex(slot);
+                        }}
+                        onDragEnd={() => {
+                          drag.setDragIndex(null);
+                          drag.setDragOverSlot(null);
+                        }}
+                        {...(hasCopies ? drag.getTouchHandlers(slot) : {})}
+                        className={`shrink-0 p-2 flex flex-col items-center gap-1.5 select-none transition-all duration-200 cursor-pointer ${
+                          hasCopies ? "active:cursor-grabbing" : "hover:scale-105"
+                        } ${isSource ? "scale-95 opacity-30" : "scale-100 opacity-100"}`}
+                      >
+                        <div className="relative">
+                          <div
+                            className={`w-20 sm:w-24 md:w-28 aspect-[3/4] bg-white dark:bg-dark-surface rounded-lg overflow-hidden border-2 transition-colors shadow-sm ${
+                              isSource
+                                ? "border-dashed border-slate-300 dark:border-dark-border"
+                                : "border-slate-200 dark:border-dark-border hover:border-primary-300 dark:hover:border-primary-600"
+                            }`}
+                          >
+                            <img
+                              src={thumbnails[item.index]}
+                              className="w-full h-full object-contain"
+                              alt={`Page ${item.index + 1}`}
+                              draggable={false}
+                            />
+                          </div>
+                          <div
+                            className={`absolute -top-1.5 -right-1.5 text-white text-xs font-bold w-6 h-6 rounded-full flex items-center justify-center shadow-md z-10 transition-opacity duration-200 ${
+                              isSource
+                                ? "bg-slate-400 dark:bg-slate-600 opacity-50"
+                                : "bg-primary-600"
+                            }`}
+                          >
+                            {item.index + 1}
+                          </div>
+                        </div>
+                        <span className="text-xs font-medium text-slate-500 dark:text-dark-text-muted">
+                          Page {item.index + 1}
+                        </span>
+                      </div>
+                    );
+                  }}
+                  renderOverlay={(idx) => {
+                    const item = items[idx];
                     const srcIdx =
                       item?.type === "copy"
                         ? item.sourceIndex
@@ -346,19 +280,31 @@ export default function DuplicatePage() {
                           ? item.index
                           : null;
                     if (srcIdx === null) return null;
+                    const isCopy = item?.type === "copy";
                     return (
-                      <TouchDragOverlay touchPos={touchPos}>
-                        <div className="w-20 sm:w-24 md:w-28 aspect-[3/4] bg-white dark:bg-dark-surface rounded-lg overflow-hidden border-2 border-primary-400 shadow-lg">
+                      <div className="relative pt-2 pr-2">
+                        <div className="w-20 sm:w-24 md:w-28 aspect-[3/4] bg-white dark:bg-dark-surface rounded-lg overflow-hidden border-2 border-slate-200 dark:border-dark-border shadow-sm">
                           <img
                             src={thumbnails[srcIdx]}
                             className="w-full h-full object-contain"
                             alt=""
                             draggable={false}
                           />
+                          {isCopy && (
+                            <div className="absolute inset-0 bg-primary-500/20 rounded-lg" />
+                          )}
+                        </div>
+                        <div
+                          className={`absolute top-0 right-0 text-white font-bold rounded-full flex items-center justify-center shadow-md bg-primary-600 ${
+                            isCopy ? "text-[10px] px-1.5 h-5" : "text-xs w-6 h-6"
+                          }`}
+                        >
+                          {isCopy ? "Copy" : srcIdx + 1}
                         </div>
-                      </TouchDragOverlay>
+                      </div>
                     );
-                  })()}
+                  }}
+                />
 
                 {hasCopies && (
                   <p className="text-xs text-primary-600 dark:text-primary-400 font-medium">
diff --git a/src/tools/ReorderPages.tsx b/src/tools/ReorderPages.tsx
index 640216b..eb40a62 100644
--- a/src/tools/ReorderPages.tsx
+++ b/src/tools/ReorderPages.tsx
@@ -10,12 +10,12 @@
 
 import { useState, useCallback } from "react";
 import { FileDropZone } from "../components/FileDropZone.tsx";
+import { SortableGrid } from "../components/SortableGrid.tsx";
 import { categoryAccent, categoryGlow } from "../config/theme.ts";
 import { reorderPages } from "../utils/pdf-operations.ts";
 import { renderAllThumbnails } from "../utils/pdf-renderer.ts";
 import { downloadPdf } from "../utils/file-helpers.ts";
 import { useSortableDrag } from "../hooks/useSortableDrag.ts";
-import { TouchDragOverlay } from "../components/TouchDragOverlay.tsx";
 import { Undo2 } from "lucide-react";
 
 export default function ReorderPages() {
@@ -38,8 +38,7 @@ export default function ReorderPages() {
   }, []);
 
   // Drag state (desktop + mobile touch)
-  const { dragIndex, dragOverSlot, touchPos, setDragIndex, setDragOverSlot, getTouchHandlers } =
-    useSortableDrag(handleMove);
+  const drag = useSortableDrag(handleMove);
 
   const handleFile = useCallback(async (files: File[]) => {
     const pdf = files[0];
@@ -80,133 +79,12 @@ export default function ReorderPages() {
 
   const handleReset = useCallback(() => {
     setOrder(thumbnails.map((_, i) => i));
-    setDragIndex(null);
-    setDragOverSlot(null);
-  }, [thumbnails, setDragIndex, setDragOverSlot]);
+    drag.setDragIndex(null);
+    drag.setDragOverSlot(null);
+  }, [thumbnails, drag]);
 
   const isReordered = order.some((pageIdx, i) => pageIdx !== i);
-  const isDragging = dragIndex !== null;
-
-  /**
-   * Build the interleaved layout: [drop_0] [page_0] [drop_1] [page_1] ... [page_N-1] [drop_N]
-   *
-   * When dragging, the drop-zone gaps expand and show a vertical bar indicator
-   * on hover—exactly like AddBlankPage. The source page card gets a highlighted
-   * ring to show it's selected. Dropping on a gap moves the page to that slot.
-   */
-  const renderItems = () => {
-    const items: React.ReactNode[] = [];
-
-    for (let slot = 0; slot <= order.length; slot++) {
-      // ── Drop zone ──
-      // Don't show drop zones immediately adjacent to the dragged card
-      // (dropping there would be a no-op).
-      const isAdjacentToDrag = dragIndex !== null && (slot === dragIndex || slot === dragIndex + 1);
-
-      items.push(
-        <div
-          key={`drop-${slot}`}
-          data-drop-slot={slot}
-          onDragOver={(e) => {
-            if (isAdjacentToDrag) return;
-            e.preventDefault();
-            setDragOverSlot(slot);
-          }}
-          onDragLeave={(e) => {
-            if (!e.currentTarget.contains(e.relatedTarget as Node)) {
-              if (dragOverSlot === slot) setDragOverSlot(null);
-            }
-          }}
-          onDrop={(e) => {
-            e.preventDefault();
-            if (dragIndex === null || isAdjacentToDrag) return;
-            setOrder((prev) => {
-              const next = [...prev];
-              const [moved] = next.splice(dragIndex, 1);
-              // Adjust target: if we removed from before the slot the index shifts
-              const adjustedSlot = dragIndex < slot ? slot - 1 : slot;
-              next.splice(adjustedSlot, 0, moved);
-              return next;
-            });
-            setDragIndex(null);
-            setDragOverSlot(null);
-          }}
-          className={`self-stretch flex items-center justify-center rounded-lg transition-all duration-200 ${
-            isDragging && !isAdjacentToDrag
-              ? dragOverSlot === slot
-                ? "w-20 sm:w-24 bg-primary-50 dark:bg-primary-900/20"
-                : "w-3 sm:w-4"
-              : "w-0"
-          }`}
-        >
-          {isDragging && !isAdjacentToDrag && (
-            <div
-              className={`rounded-full transition-all duration-200 ${
-                dragOverSlot === slot
-                  ? "w-1 bg-primary-500"
-                  : "w-0.5 bg-primary-200 dark:bg-primary-800"
-              }`}
-              style={{ height: dragOverSlot === slot ? "80%" : "60%" }}
-            />
-          )}
-        </div>,
-      );
-
-      // ── Page card ──
-      if (slot < order.length) {
-        const originalIndex = order[slot];
-        const isSource = dragIndex === slot;
-
-        items.push(
-          <div
-            key={`page-${originalIndex}`}
-            draggable
-            onDragStart={(e) => {
-              e.dataTransfer.effectAllowed = "move";
-              setDragIndex(slot);
-            }}
-            onDragEnd={() => {
-              setDragIndex(null);
-              setDragOverSlot(null);
-            }}
-            {...getTouchHandlers(slot)}
-            className={`shrink-0 pt-2 pr-2 flex flex-col items-center gap-1.5 cursor-grab active:cursor-grabbing select-none transition-all duration-200 ${
-              isSource ? "scale-95 opacity-30" : "scale-100 opacity-100"
-            }`}
-          >
-            <div className="relative">
-              <div
-                className={`w-20 sm:w-24 md:w-28 aspect-[3/4] bg-white dark:bg-dark-surface rounded-lg overflow-hidden border-2 transition-colors shadow-sm ${
-                  isSource
-                    ? "border-dashed border-slate-300 dark:border-dark-border"
-                    : "border-slate-200 dark:border-dark-border hover:border-primary-300 dark:hover:border-primary-600"
-                }`}
-              >
-                <img
-                  src={thumbnails[originalIndex]}
-                  className="w-full h-full object-contain"
-                  alt={`Page ${originalIndex + 1}`}
-                  draggable={false}
-                />
-              </div>
-              <div
-                className={`absolute -top-1.5 -right-1.5 text-white text-xs font-bold w-6 h-6 rounded-full flex items-center justify-center shadow-md z-10 transition-opacity duration-200 ${
-                  isSource ? "bg-slate-400 dark:bg-slate-600 opacity-50" : "bg-primary-600"
-                }`}
-              >
-                {originalIndex + 1}
-              </div>
-            </div>
-            <span className="text-xs font-medium text-slate-500 dark:text-dark-text-muted">
-              Page {originalIndex + 1}
-            </span>
-          </div>,
-        );
-      }
-    }
-
-    return items;
-  };
+  const isDragging = drag.dragIndex !== null;
 
   return (
     <div className="space-y-6">
@@ -263,22 +141,67 @@ export default function ReorderPages() {
                   )}
                 </div>
 
-                <div className="flex flex-wrap items-end gap-y-6 overflow-x-auto pb-2 min-h-28">
-                  {renderItems()}
-                </div>
-
-                {dragIndex !== null && (
-                  <TouchDragOverlay touchPos={touchPos}>
-                    <div className="w-20 sm:w-24 md:w-28 aspect-[3/4] bg-white dark:bg-dark-surface rounded-lg overflow-hidden border-2 border-primary-400 shadow-lg">
-                      <img
-                        src={thumbnails[order[dragIndex]]}
-                        className="w-full h-full object-contain"
-                        alt=""
-                        draggable={false}
-                      />
+                <SortableGrid
+                  itemCount={order.length}
+                  drag={drag}
+                  onMove={handleMove}
+                  renderItem={(slot, isSource) => {
+                    const originalIndex = order[slot];
+                    return (
+                      <div
+                        key={`page-${originalIndex}`}
+                        {...drag.getItemProps(slot)}
+                        className={`shrink-0 pt-2 pr-2 flex flex-col items-center gap-1.5 cursor-grab active:cursor-grabbing select-none transition-all duration-200 ${
+                          isSource ? "scale-95 opacity-30" : "scale-100 opacity-100"
+                        }`}
+                      >
+                        <div className="relative">
+                          <div
+                            className={`w-20 sm:w-24 md:w-28 aspect-[3/4] bg-white dark:bg-dark-surface rounded-lg overflow-hidden border-2 transition-colors shadow-sm ${
+                              isSource
+                                ? "border-dashed border-slate-300 dark:border-dark-border"
+                                : "border-slate-200 dark:border-dark-border hover:border-primary-300 dark:hover:border-primary-600"
+                            }`}
+                          >
+                            <img
+                              src={thumbnails[originalIndex]}
+                              className="w-full h-full object-contain"
+                              alt={`Page ${originalIndex + 1}`}
+                              draggable={false}
+                            />
+                          </div>
+                          <div
+                            className={`absolute -top-1.5 -right-1.5 text-white text-xs font-bold w-6 h-6 rounded-full flex items-center justify-center shadow-md z-10 transition-opacity duration-200 ${
+                              isSource
+                                ? "bg-slate-400 dark:bg-slate-600 opacity-50"
+                                : "bg-primary-600"
+                            }`}
+                          >
+                            {originalIndex + 1}
+                          </div>
+                        </div>
+                        <span className="text-xs font-medium text-slate-500 dark:text-dark-text-muted">
+                          Page {originalIndex + 1}
+                        </span>
+                      </div>
+                    );
+                  }}
+                  renderOverlay={(idx) => (
+                    <div className="relative pt-2 pr-2">
+                      <div className="w-20 sm:w-24 md:w-28 aspect-[3/4] bg-white dark:bg-dark-surface rounded-lg overflow-hidden border-2 border-slate-200 dark:border-dark-border shadow-sm">
+                        <img
+                          src={thumbnails[order[idx]]}
+                          className="w-full h-full object-contain"
+                          alt=""
+                          draggable={false}
+                        />
+                      </div>
+                      <div className="absolute top-0 right-0 text-white text-xs font-bold w-6 h-6 rounded-full flex items-center justify-center shadow-md bg-primary-600">
+                        {order[idx] + 1}
+                      </div>
                     </div>
-                  </TouchDragOverlay>
-                )}
+                  )}
+                />
 
                 {isReordered && (
                   <p className="text-xs text-primary-600 dark:text-primary-400 font-medium">

From 070b8a7112edfa6c61e65c803744009deb71aa94 Mon Sep 17 00:00:00 2001
From: Sumit Sahoo <sumitsahoo1988@gmail.com>
Date: Sat, 11 Apr 2026 13:55:04 +0530
Subject: [PATCH 3/4] fix: ensure TouchDragOverlay only renders when touch
 position is available

---
 src/components/SortableGrid.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SortableGrid.tsx b/src/components/SortableGrid.tsx
index bfb9c68..0448819 100644
--- a/src/components/SortableGrid.tsx
+++ b/src/components/SortableGrid.tsx
@@ -114,7 +114,7 @@ export function SortableGrid({
         {elements}
       </div>
 
-      {dragIndex !== null && renderOverlay && (
+      {dragIndex !== null && touchPos !== null && renderOverlay && (
         <TouchDragOverlay touchPos={touchPos}>{renderOverlay(dragIndex)}</TouchDragOverlay>
       )}
     </>

From 3c9a1535aaa06d8bca429c4bb449cacddf891f09 Mon Sep 17 00:00:00 2001
From: Sumit Sahoo <sumitsahoo1988@gmail.com>
Date: Sat, 11 Apr 2026 14:01:25 +0530
Subject: [PATCH 4/4] feat: add scroll-to-top functionality on view change and
 enhance logo filter transition

---
 src/App.tsx               | 6 ++++++
 src/components/Layout.tsx | 8 +++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index f40362d..779fd17 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -695,6 +695,12 @@ export function App() {
     setShowPrivacy(true);
   }, []);
 
+  /** Scroll to top whenever the view changes. */
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- activeTool and showPrivacy are intentional trigger deps
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [activeTool, showPrivacy]);
+
   /** Metadata for the active tool (memoised to avoid redundant lookups). */
   const activeMeta = useMemo(
     () => (activeTool ? (tools.find((t) => t.id === activeTool) ?? null) : null),
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index e43e5d6..1ec0756 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -102,7 +102,13 @@ export function Layout({ children, onHome, showBack, onPrivacy, badgeAccent }: L
         <div className="max-w-6xl mx-auto px-4 sm:px-6 py-4 flex flex-col sm:flex-row items-center justify-between gap-3">
           {/* Brand + copyright */}
           <div className="flex items-center gap-2">
-            <img src="/icons/logo.svg" alt="" aria-hidden="true" className="w-5 h-5 opacity-60" />
+            <img
+              src="/icons/logo.svg"
+              alt=""
+              aria-hidden="true"
+              className="w-5 h-5 opacity-60 transition-[filter] duration-300"
+              style={badgeAccent?.logoFilter ? { filter: badgeAccent.logoFilter } : undefined}
+            />
             <span className="text-xs font-medium text-slate-500 dark:text-dark-text-muted">
               CloakPDF
             </span>