Improve setlist song card dragging and editing

[johannesschiessl]

Summary

• Replace native drag-and-drop with pointer-based song card reordering.
• Add keyboard and mobile-friendly move controls with live announcements.
• Support inline editing of song names and artists.
• Handle reorder and edit failures by restoring the previous state.

Testing

• Not run.

[cubic-dev-ai]

All reported issues were addressed across 1 file

Architecture diagram

sequenceDiagram
    participant User
    participant UI as SongCard Component
    participant Route as Route Renderer
    participant Pointer as PointerEventHandler
    participant State as Song Atoms (state)
    participant API as RPC Mutaion

    Note over User,API: NEW: Pointer-based Drag & Reorder Flow

    User->>UI: pointerdown on song card (primary button)
    UI->>Pointer: startPointer(event, song)
    Pointer->>Pointer: Init ActivePointer with start coords, rect
    Pointer->>UI: setPointerCapture(pointerId)

    loop While pointer is captured
        User->>UI: pointermove (any distance)
        UI->>Pointer: updatePointer(event)

        alt Drag started (moved > 4px)
            Pointer->>Pointer: Check started flag
            Note over Pointer: NEW: threshold prevents accidental drag
            Pointer->>State: Read current songs (songsRef)
            Pointer->>UI: setDraggedId(song.id)
            Pointer->>UI: Disable user-select, set cursor to grabbing
            Pointer->>Pointer: previewAtPointer(id, pointerY)
            Pointer->>Pointer: Find insertion point from row refs' midpoints
            Pointer->>State: Reorder preview list (previewSongsRef)
            State-->>UI: Render updated order (optimistic)
            UI->>UI: Set drag position (floating card)
            alt Near top/bottom of viewport
                Pointer->>Window: scrollBy() auto-scroll
            end
        else Still within threshold
            Pointer->>UI: No reorder preview yet
        end

        User->>UI: pointerup / pointercancel / pointerleave
        UI->>Pointer: finishPointer(event, cancelled)

        alt Drag completed (started and not cancelled)
            Pointer->>Pointer: Compare preview order with original songs
            alt Order changed
                Pointer->>State: Build commit order
                State->>API: reorder() RPC call (async)
                API-->>State: Success or Failure
                alt Success
                    State->>UI: Update canonical songs
                    UI->>User: Announce "Song moved to position N"
                else Failure
                    State->>UI: Restore songs from songsRef
                    UI->>User: Show error toast, announce "Could not move..."
                end
            else Order unchanged
                Pointer->>UI: No mutation, reset preview
            end
        else Drag cancelled (e.g., pointerleave, escape)
            Pointer->>State: Restore songs from songsRef
            State-->>UI: Reset preview to canonical order
            Pointer->>UI: Clear dragged state, reset cursor
        end

        alt Drag not started
            Pointer->>UI: Reset dragged state, no reorder
        end
    end

    Note over User,API: NEW: Inline Edit Song Name & Artist

    User->>UI: Click "Edit" button on song card
    UI->>UI: Show inline Input fields for name/artist
    User->>UI: Modify name and/or artist
    User->>UI: Submit edit (blur or enter key)
    UI->>Pointer: saveSong(song, newName, newArtist)
    Pointer->>State: Build edit payload with all song fields
    Note over Pointer: NEW: edit payload includes notes, mixAssignments, etc.
    State->>API: edit() RPC call (async)
    API-->>State: Success or Failure
    alt Success
        State->>UI: Update canonical songs
        UI->>User: Announce "Song updated."
    else Failure
        State->>UI: Preserve old song state
        UI->>User: Show error toast, announce "Could not update..."
    end
    UI->>UI: Hide inline inputs, show updated values

Loading

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>