Program/schedule builder (drag-and-drop)

[mattstratton]

Context

PRD §2.2 — The schedule builder is the most interactive component of the editing UI and a key differentiator from the Hugo workflow. Organizers need to build and modify their event program visually.

Requirements

• Visual schedule editor with drag-and-drop (VueDraggable/SortableJS)
• Day-based view: tab per event day
• Entry types with distinct visual styling:
  • Talk (linked to Talk entity) — primary color
  • Ignite talk — accent color
  • Workshop — distinct style
  • Open Space — different background
  • Break/Custom — muted/grey
• Time slot management: set start/end times per entry
• Click-to-edit or drag-to-resize time slots
• Add entries: select from existing talks or create custom entries (lunch, registration, etc.)
• Live updates: changes publish immediately to the public schedule page
• Mobile-optimized editing: simplified list view for day-of changes (critical for open space topic entry)

Current State

• ProgramEntry model exists with date, start_time, end_time, entry_type, talk FK, custom_title, background_color
• No schedule builder UI exists
• No public schedule rendering (EventPage with schedule type shows markdown content)
• ProgramEntry admin is registered but no entries in DB (Hugo seed doesn't import program data yet)

Implementation Notes

• VueDraggable for drag-and-drop reorder
• Timeline/grid layout: time axis vertical, entries as cards
• Mobile view: flat list with inline time editing
• Real-time: Inertia form submit + automatic page refresh, or consider WebSocket for true real-time
• Consider a "quick add" mode for open space topics during live events

Acceptance Criteria

• Visual schedule builder with drag-and-drop
• Day tabs for multi-day events
• All entry types supported with visual distinction
• Time slots editable (start/end times)
• Talks linkable from existing talk records
• Custom entries (breaks, lunch) creatable inline
• Changes reflect immediately on public schedule page
• Mobile-friendly editing for day-of changes
• Open space quick-add mode for live events

References

• PRD §2.2 — Program/Schedule Builder
• `apps/events/models.py:ProgramEntry`
• PRD §4 — "I can update our event page from my phone during the conference"