70 lines
3.2 KiB
Markdown
70 lines
3.2 KiB
Markdown
---
|
|
id: TASK-4
|
|
title: >-
|
|
Add zoom views, view switcher, demo data, and map transit lines to
|
|
demo.rcal.online
|
|
status: Done
|
|
assignee:
|
|
- '@claude'
|
|
created_date: '2026-02-25 23:28'
|
|
labels:
|
|
- demo
|
|
- calendar
|
|
- map
|
|
- zoom
|
|
- views
|
|
dependencies: []
|
|
priority: high
|
|
---
|
|
|
|
## Description
|
|
|
|
<!-- SECTION:DESCRIPTION:BEGIN -->
|
|
Implement fluid calendar zoom with dedicated views for each temporal granularity, add a view switcher toolbar, populate the demo app with realistic sample data, and render transit lines between event locations on the map.
|
|
<!-- SECTION:DESCRIPTION:END -->
|
|
|
|
## Acceptance Criteria
|
|
<!-- AC:BEGIN -->
|
|
- [ ] #1 Zoom in/out cycles through Day → Week → Month → Season → Year → Decade with distinct views for each
|
|
- [ ] #2 DayView renders 24h time grid with positioned events and now-indicator
|
|
- [ ] #3 WeekView renders 7-column time grid with events per day
|
|
- [ ] #4 ViewSwitcher icon bar in header allows direct jump to any view
|
|
- [ ] #5 All views fit same container form factor (h-full flex-col) with opt-in fullscreen via FullscreenToggle
|
|
- [ ] #6 YearView defaults to compact grid (not auto-fullscreen portal)
|
|
- [ ] #7 Demo page seeded with ~40 realistic events across 5 months with real GPS coordinates
|
|
- [ ] #8 Events span Berlin, Amsterdam, Munich, Paris, Prague, Lisbon, Barcelona, Brussels
|
|
- [ ] #9 4 demo calendar sources: Work (blue), Travel (orange), Personal (green), Conferences (purple)
|
|
- [ ] #10 Map draws dashed transit polylines between chronologically ordered events at different locations
|
|
- [ ] #11 Travel-source transit lines render in orange, others in gray
|
|
- [ ] #12 EventListItem type extended with latitude/longitude/coordinates fields
|
|
- [ ] #13 CSS fade transition between view switches
|
|
- [ ] #14 Code pushed to both dev and main branches
|
|
<!-- AC:END -->
|
|
|
|
## Final Summary
|
|
|
|
<!-- SECTION:FINAL_SUMMARY:BEGIN -->
|
|
## Calendar Zoom Views, Demo Data & Map Transit
|
|
|
|
### New Components
|
|
- **DayView** — 24h time grid with event positioning, all-day section, red now-indicator
|
|
- **WeekView** — 7-day column layout with hourly grid, click-to-zoom-to-day
|
|
- **ViewSwitcher** — Icon toolbar (Day/Week/Month/Season/Year/Decade) in CalendarHeader
|
|
- **FullscreenToggle** — Reusable portal wrapper for opt-in fullscreen on any view
|
|
- **DemoDataSeeder** — Pre-populates React Query cache with demo events
|
|
- **TransitLines** — Draws dashed polylines between event locations on SpatioTemporalMap
|
|
|
|
### Modified Components
|
|
- **TemporalTab/SpatialTab** — Route each granularity to its dedicated view (was falling through to MonthView)
|
|
- **MonthView/SeasonView** — Normalized to h-full flex-col container pattern
|
|
- **YearView** — Default changed from fullscreen portal to inline compact; glance mode now inline too
|
|
- **SpatioTemporalMap** — Added TransitLines component, simplified EventMarkers type casts
|
|
- **EventListItem** — Extended with latitude/longitude/coordinates/location_breadcrumb fields
|
|
|
|
### Demo Data
|
|
~40 events across 5 months covering work meetings, train/flight travel, conferences, and personal activities across 8 European cities with real GPS coordinates.
|
|
|
|
### Commit
|
|
- `cd7f4ad` feat: add Day/Week views, view switcher, demo data with map transit lines
|
|
<!-- SECTION:FINAL_SUMMARY:END -->
|