90 lines
1.7 KiB
Markdown
90 lines
1.7 KiB
Markdown
# 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.
|