# Handoff Notes

## Project Summary

- Project: 10 Minute Planner web UI
- Stack: Vue 3 + Vite + TailwindCSS + TypeScript
- Current version baseline: `v0.0.1`

## Source Design

- Figma spread view: `https://www.figma.com/design/ZgIAmg2YlVWpABD7JVLPzY/Untitled?node-id=1-36&m=dev`
- Figma focus view with side info: `https://www.figma.com/design/ZgIAmg2YlVWpABD7JVLPzY/Untitled?node-id=1-2472&m=dev`

## Current Product Direction

- Default UX direction is `1 page + extra information panel`.
- `2 page spread` view is still implemented as an alternate mode for comparison.
- The UI should feel like a paper diary, but interactions should still feel like an app.

## Current Implementation

- Main shell: `src/App.vue`
- Planner paper layout: `src/components/PlannerPage.vue`
- Right-side calendar: `src/components/MiniCalendar.vue`
- Tailwind setup is in place and should remain the styling system for this project.

## Decisions Made

- Vue was chosen over static HTML because the planner needs stateful interactions:
  date switching, mode toggling, sidebar summaries, and future data persistence.
- TailwindCSS is the required styling approach even when using Vue.
- The current data is mock data for layout and interaction verification.

## Next Recommended Steps

- Connect planner data to persistent storage or local state management.
- Make task checkbox state editable.
- Add timetable interaction for selecting or painting focused time blocks.
- Decide whether the right panel should prioritize calendar, stats, or next-day planning on mobile.
- Add print/export styling if the diary-like output needs physical printing.

## Update Rule

- When an important decision, constraint, bug, or workflow change happens, append it here.
- Keep this file concise and practical so the next helper can continue without re-discovery.