Constellation Planner
A playful daily planner where tasks become stars and completed tasks connect into custom constellations on a night-sky canvas. Users add tasks with tags and due times, drag stars to arrange their sky, and draw “constellation lines” between related tasks to form named patterns (saved to localStorage). Includes a simple focus mode that highlights one constellation at a time, showing progress, streaks, and a compact timeline panel for today’s tasks.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i @tailwindcss/vite && npm i -D shadcn@latest && npx shadcn@latest init.
by system
Configure Tailwind (content paths + @tailwind directives) and enable @tailwindcss/vite in vite.config.ts.
by system
Add shadcn/ui components used by the app (button, input, textarea, dialog, sheet, tabs, badge, card, separator, tooltip).
by system
Create src/types.ts with Task, Tag, Constellation, Line, and persisted state interfaces.
by system
Create src/lib/storage.ts for load/save with versioning and basic validation.
by system
Create src/lib/utils.ts for ID generation, date formatting, and today-range helpers.
by system
Create src/state/usePlannerStore.ts implementing a React hook store (tasks, stars positions, constellations, focus mode) with persistence.
by system
Add src/state/seed.ts to generate a small initial dataset when no saved state exists.
by system
Create src/App.tsx with a two-panel layout (sky canvas + right sidebar) and top header.
by system
Create src/components/HeaderBar.tsx with app title, add-task button, and focus-mode toggle.
by system
Create src/components/SkyCanvas.tsx rendering the night-sky background and hosting stars/lines layers.
by system
Create src/components/Star.tsx to render a task as a draggable star with status/tags styling.
by system
Implement pointer-based drag handling in Star.tsx updating stored x/y positions.
by system
Create src/components/ConstellationLines.tsx to draw SVG/canvas lines between connected stars.
by system
Add a “connect mode” interaction in SkyCanvas.tsx to click two stars and create a line.
by system
Add ability to select a line and delete it (e.g., via context menu or delete key) with minimal UI.
by system
Add store actions to create/rename/delete constellations and assign/remove lines.
by system
Create src/components/ConstellationDialog.tsx for naming/renaming a constellation.
by system
Create src/components/AddTaskDialog.tsx with fields for title, tags, and due time.
by system
Implement lightweight client validation in AddTaskDialog.tsx (required title, valid time format).
by system
Create src/components/TaskSidebar.tsx listing today’s tasks with status, due time, and tags.
by system
Add completion checkbox/button in TaskSidebar.tsx that updates task status and completion time.
by system
Update Star.tsx to visually distinguish completed tasks and animate on completion.
by system
Add focus-mode fields to the store (focusedConstellationId, enabled) and actions to set/clear.
by system
Create src/components/FocusOverlay.tsx to dim non-focused stars/lines and highlight the active constellation.
by system
Create src/components/ConstellationPicker.tsx to choose which constellation to focus on.
by system
Create src/components/ProgressPanel.tsx showing constellation completion %, today completed count, and streak computed from history.
by system
Create src/components/TimelinePanel.tsx showing a compact chronological view of today’s tasks by due time.
by system
Add src/components/Hotkeys.tsx wiring shortcuts (N add task, F focus toggle, Esc exit modes, Del remove selected line).
by system
Add basic empty/loading states, tooltips, and small UI polish across existing components without altering logic.
by system