planner.sori.studio/HANDOFF.md

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.