Add drag-to-reorder for thumbnail rail in dev mode

[1weiho]

Summary

Adds drag-and-drop reordering functionality to the thumbnail rail in development mode, allowing users to reorder pages by dragging thumbnails. The new order is persisted back to the slide's index.tsx file.

Key Changes

• Thumbnail Rail Component (thumbnail-rail.tsx):

  • Integrated @dnd-kit for drag-and-drop functionality
  • Added optional onReorder callback prop to enable reordering
  • Extracted thumbnail rendering logic into ThumbContents component for reusability
  • Created SortableRail wrapper component to manage drag context and handle reorder events
  • Created SortableThumb component that wraps individual thumbnails with drag handles
  • Conditionally renders sortable or static thumbnails based on onReorder prop

• Files Plugin (files-plugin.ts):

  • Added findDefaultExportArray() to parse and locate array elements in the default export using Babel
  • Implemented reorderDefaultExportPagesInSource() to reorder array elements while preserving formatting, comments, and separators
  • Added /reorder PUT endpoint to handle page reordering requests and write changes back to disk
  • Validates reorder requests and returns appropriate error responses

• Slide Route (slide.tsx):

  • Added local state to track page order separately from the imported module
  • Implemented reorderPage() callback that:
    • Updates local page state optimistically
    • Maintains user's current page selection during reorder
    • Sends reorder request to backend
    • Reverts changes on failure with error toast
  • Passes reorderPage to thumbnail rail only in dev mode

• Tests (files-plugin.test.ts):

  • Added comprehensive test suite for reorderDefaultExportPagesInSource()
  • Tests cover multi-line arrays, inline arrays, identity permutations, validation, edge cases, and file preservation

Implementation Details

• The reordering preserves exact source formatting including indentation, trailing commas, and inline comments
• Drag activation requires a 5px pointer movement to avoid accidental triggers
• Keyboard support included via sortableKeyboardCoordinates
• The feature is dev-mode only (import.meta.env.DEV)
• Optimistic UI updates with automatic rollback on server errors
• Page selection follows the moved page during reorder to maintain user context

https://claude.ai/code/session_01VW9S5dJWqn6Du9PnsX27of

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
open-slide-demo	Ready	Preview, Comment	May 7, 2026 3:43pm
open-slide-web	Ready	Preview, Comment	May 7, 2026 3:43pm