feat(page-editor): add visual feedback during page reordering

[betilloXann]

Description of Changes

What was changed

• [Updated] Moved the Drag & Drop target state (hoveredItemId) to DragDropGrid to improve performance (this avoids re-rendering all thumbnails while dragging).
• Passed isOverTarget as a prop to PageThumbnail to control the indicator.
• Updated the page indicator:
  • Set opacity to 0.6 when a page is hovered or when another page is dragged over it (not for the page being dragged).
  • Set zIndex to 20 so the indicator stays visible during drag.

Why the change was made

• UX Fix: Before, dragging a page was hard because users could not see the page index.
• Consistency: Now the page number is shown on hover and also during drag-over.
• Better control: Users can see where they are placing the page more clearly.
• Performance: This avoids unnecessary re-renders with large PDFs.

Future Improvements (Optional)

This PR fixes the visibility issue. In the future, we could show the exact target position (for example, “Move to position 5”) if this is useful.

UI Changes (if applicable)

Before	After

Related to #6170

---

Checklist

General

• I have read the Contribution Guidelines
• I have read the Stirling-PDF Developer Guide
• I have performed a self-review of my own code
• My changes generate no new warnings

UI Changes (if applicable)

• Screenshots or videos demonstrating the UI changes are attached (I will add a GIF in the comments below).

Testing

• I have run task check to verify linters and tests pass.
• I have tested my changes locally.

[Copilot]

Pull request overview

Improves page reordering UX in the page editor by keeping the page index indicator visible when a thumbnail is hovered or when another page is dragged over it.

Changes:

• Add useDndContext() usage to detect the current drag-over target.
• Show the page number indicator on hover or drag-over by adjusting opacity.
• Increase the indicator zIndex to keep it visible during drag interactions.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

useDndContext() inside every PageThumbnail will subscribe each thumbnail to DnD context updates (e.g., over changes during pointer move). This can cause many thumbnails to re-render on every drag movement, undermining the memoization/virtualization work in DragDropGrid and potentially hurting performance on large PDFs. Prefer passing the current drop target id (or a per-item isOver boolean from useDroppable) down via props so only the relevant items update.

[Copilot]

isOver is derived from over?.id === page.id, but in this grid each item is both draggable and droppable, so over.id can be the active dragged item itself. That can make the page number appear on the dragged thumbnail rather than the intended drop target, and it may also disagree with DragDropGrid’s cursor-based hoveredItemId (which explicitly excludes the active id and drives the actual reorder target). Consider driving this UI from the same drop-target state used for reordering (e.g., hoveredItemId) or at least ensuring the dragged item never counts as isOver.

Suggested change

	opacity: isHovered || isOver ? 0.6 : 0,
	opacity: isHovered || (isOver && !isDragging) ? 0.6 : 0,

[betilloXann]

Applied fixes from Copilot review. Moved the drag and drop state to the Grid component to avoid a possible performance problem and fixed the indicator bug on the dragged item. Ready for review.