Dnd-Kit Drag and Drop#

Blinko uses @dnd-kit/core for manual note reordering on the home feed. Dragging a card updates its sortOrder in the database; the two-level sort (pinned notes first via isTop, then by sortOrder ascending) is maintained both client- and server-side 1 2.

Drag-and-drop is disabled for the todo view — useDragCard receives undefined for notes in that branch 3.

Key Files#

useDragCard Hook#

useDragCard is the central abstraction. It returns localNotes, sensors, and three handlers consumed by DndContext in the home page.

Sensor configuration — Both MouseSensor and TouchSensor use an activationConstraint of { delay: 250, tolerance: 5 } under normal conditions, requiring a 250 ms hold before a drag begins 6. When the fullscreen editor is open, the constraints are set to { delay: 999999, distance: 999999 } — effectively impossible to satisfy — to suppress drag activation 7.

Drag guard in handleDragStart — Even with the sensor constraints in place, handleDragStart contains an explicit early return if blinko.fullscreenEditorNoteId !== null 8.

Drag end / reorder logic — On DragEndEvent, the hook:

1. Finds old and new indices in localNotes.
2. Prevents cross-boundary drops between pinned (isTop: true) and unpinned notes 9.
3. Splices the moved note into its new position and remaps sortOrder to each note's array index 10.
4. Calls api.notes.updateNotesOrder.mutate to persist the new order — a fire-and-forget call with no error handling shown in the hook itself.

Local state freeze during drag — A isDraggingRef ref prevents the useEffect that syncs localNotes from overwriting in-progress drag state when the parent's notes prop updates 11.

DraggableBlinkoCard Component#

DraggableBlinkoCard composes useDroppable and useDraggable on the same element. Each card registers:

• A droppable zone with id drop-{note.id} — always active 12.
• A draggable handle on the inner div — drag listeners are stripped when blinkoItem.isExpand is true 13.

A color-coded insert line (blue = allowed, red = forbidden) appears above the drop target 14, and a prohibition icon overlay renders when hovering over a cross-boundary target 15.

The DragOverlay in index.tsx renders the dragged card at 3° rotation and 105% scale while the original card shows a dashed placeholder 16.

Server-Side: updateNotesOrder#

The updateNotesOrder tRPC mutation accepts { updates: { id: number; sortOrder: number }[] } and bulk-writes sortOrder via Prisma updateMany, gated by accountId ownership.

Fullscreen Editor Interaction & Known Edge Case#

fullscreenEditorNoteId is set in BlinkoCard when a card is expanded and cleared in FullscreenEditor on close.

Known edge case: The activation-constraint approach disables drag initiation, but does not guard against stray pointer/touch events that may fire during the fullscreen modal's mount animation. During that brief window — before fullscreenEditorNoteId is set in the store — the sensors are still configured with normal constraints, so a fast interaction could theoretically start a drag. The explicit handleDragStart guard 17 is a second line of defense but also reads from the store, so a race during mounting is still possible.