Bolt App 2 — Timeline Studio (Micro-App)

Before you start: read and follow DESIGN_SYSTEM_BRIEF.md.

Mission

Build a UI/UX-rich Next.js micro-app called Timeline Studio that demonstrates timeline/scheduler editing patterns (drag, resize, inspector). This should be reusable inspiration for ChronoMind timelines and routines UX.

Scope / Safety

Only change files in this repository.
No network calls; mock data + localStorage only
No console.log
No hardcoded colors; define CSS variables once and use Tailwind

Stack

Next.js 16 App Router
React 19
Tailwind v4
TypeScript strict
pnpm
lucide-react icons

Routes

/ overview + recent plans
/studio main editor
/export JSON import/export

Layout

Left sidebar: list of “plans” (templates)
Main canvas: timeline grid
Right inspector: edit selected block

Timeline interactions (must-have)

Lanes (e.g. Work, Personal, Health)
Blocks can be:
- created (button + click on grid)
- selected
- dragged to move
- resized via left/right handles
Snap-to-grid increments (5 min)
Zoom levels (15m / 30m / 60m)
Keyboard:
- Esc deselect
- Delete remove selected
- Cmd+Z undo (simple history stack)

Inspector (must-have)

Title
Start/end time
Lane
Tags
Notes

Persist in localStorage:

plans list
blocks
zoom
last opened plan

UX quality bar

Clear selection states + resize handles
Good hit targets
Subtle animations
Empty state onboarding hints

Deliverables

Full Next.js app with scripts: dev, check, build
build must run next build --webpack

Verification

From the repo root:

pnpm install
pnpm run check
pnpm run build

Output expectation

PR contains only this app.

1.7 KiB Raw Blame History