Waterfall timeline view

The primary view. Continuous vertical scroll where time is the Y-axis and days flow into each other.

Layout:

• Fixed pixel height per hour (e.g. 60px)
• Events are absolutely positioned divs within a relative-positioned day container
• Event height = duration * pixels-per-hour
• Event top = (start time - day start) * pixels-per-hour
• Overlapping events packed into side-by-side columns (simple greedy algorithm)
• All-day events pinned to top of each day section
• Day headers are position:sticky so current day label stays visible while scrolling

Behavior:

• Loads starting from current time (scroll position = now)
• A "now" line shows current time, updates every minute
• Infinite scroll: when near bottom, fetch next 7 days via htmx GET /cal/events
• Past days above current scroll position are available by scrolling up
• Initial load: today + 7 days forward

Color:

• Events colored by calendar (match existing khal colors: purple for personal, green for shared, pink for Kate, blue for parasail)
• Left border stripe for calendar color, muted background

Event display:

• Summary (title) always visible
• Time range shown for events > 30min tall
• Location shown if present and event tall enough
• Click/tap expands to show full details (description, attendees)