feat(app): drag-and-drop reorder across titlebar slots

[jeonghun-jj-lee]

Important

Problem -- Edit mode lights up the titlebar controls visually, but buttons cannot yet be dragged to new positions. The feature needs drag-and-drop reordering within slots and across the tab strip boundary.

Approach -- Add a @dnd-kit/solid DnD context that wraps the titlebar during edit mode, separate from the tab strip's existing DnD context. Each of the five controls becomes a draggable item. Within a slot, standard sortable reorder applies. When a drag crosses the tab strip boundary (past the left edge of the tab strip for right-to-left, past the right edge for left-to-right), the button jumps to the other slot. Config saves on every successful drop.

Scope -- in: DnD context wrapping both slots, within-slot sortable reorder, cross-slot boundary detection, drop indicators (thin vertical lines), save-on-drop to titlebarLayout setting. out: keyboard reorder (future accessibility enhancement).

Assumptions -- Edit mode (slice 3) is active and the edit signal is readable. Two-slot rendering (slice 2) is in place with per-button mount points. The titlebarLayout setting (slice 1) is writable.

Acceptance Criteria

• A @dnd-kit/solid DnD context wraps the titlebar controls during edit mode, separate from the tab strip's DnD context
• In edit mode, each of the five controls is draggable (cursor changes to grab/grabbing)
• Dragging a control within the right slot reorders it among right-slot controls
• Dragging a control within the left slot reorders it among left-slot controls
• Dragging a control past the tab strip's left edge moves it to the left slot
• Dragging a control past the tab strip's right edge moves it to the right slot
• Drop indicators (thin vertical lines, accent color) appear between valid drop positions during drag
• On drop, the titlebarLayout setting is updated immediately
• The DnD context does not interfere with the tab strip's existing drag-and-drop (tab reorder continues to work)
• Dropping a control in the same position (no-op drag) does not trigger a settings write
• Outside edit mode, no DnD context is active and controls are not draggable

Testing Decisions

Extend the titlebar test surface. Test within-slot reorder (drag button A past button B, verify config order changes). Test cross-slot move (drag from right past tab strip boundary, verify button appears in left config array). Test DnD isolation (tab strip drag still works during edit mode). Test save-on-drop (config writes after each drop, not batched).

Key Decisions

• Separate DnD context from tab strip: edit-mode button DnD and tab-strip DnD are independent DndContext instances. No shared collision detection.
• closestCenter collision strategy with custom boundary logic for cross-slot detection: the tab strip's midpoint is the threshold for deciding which slot the drop targets.
• Save on every drop: no undo, no cancel. The config is always the source of truth. This means Escape is "exit edit mode" not "discard changes."

Constraints & Invariants

• The DnD context is only active during edit mode -- never outside it
• left.concat(right) must still contain exactly the five canonical IDs after every drop
• The tab strip's own DnD (tab reorder) must not break when the edit-mode DnD context is active
• Drop indicators must not shift the layout or change button positions until the actual drop

Prior Art

• titlebar-tab-strip.tsx -- existing @dnd-kit/solid DnD setup for tab reorder
• @dnd-kit/solid package -- already in the dependency tree
• titlebar-tab-order.ts -- mergeVisibleTabOrder for reconciling drag reorder

Source

Part of #684
Blocked by #687
Blocked by #688