Add Drag & Drop Card Reordering with Position Persistence

[ajayparihar]

Users should be able to drag and drop snippet cards to reorder them in the main grid view. The new positions should be saved and persist across page reloads, and the updated order should be reflected when exporting data to JSON/CSV files.

Current Behavior

• Cards are displayed in a fixed order based on creation time
• No way to customize the arrangement of cards
• Users cannot organize their snippets by priority or preference

Expected Behavior

• Click and drag any card to move it to a different position
• Visual feedback during dragging (card lifts, shows drop zones)
• Other cards smoothly animate to make space for the dragged card
• New position is automatically saved to localStorage
• Card order persists after page refresh
• Exported JSON/CSV files maintain the custom order
• Works on both desktop (mouse) and mobile (touch) devices

User Stories

• As a user, I want to organize my most important snippets at the top so I can access them quickly
• As a user, I want to group related snippets together by dragging them near each other
• As a power user, I want my custom card arrangement to be preserved when I export and import my data
• As a mobile user, I want to be able to reorder cards using touch gestures

Acceptance Criteria

• Cards can be dragged and dropped to reorder them
• Visual feedback is provided during drag operations
• New positions are automatically saved
• Order persists across browser sessions
• Export functionality preserves custom ordering
• Import functionality respects position data
• Works on desktop and mobile devices
• Accessible via keyboard navigation
• Smooth animations enhance the user experience

Technical Considerations

• Add position/order field to data model
• Integrate drag & drop library (recommend SortableJS)
• Update state management to handle position changes
• Modify export/import functions to include position data
• Ensure backwards compatibility with existing data

Priority
Medium - This would significantly improve user experience and workflow efficiency, especially for users with many snippets who want to organize them by importance or category.