Constellation Planner
A playful weekly planner where tasks become “stars” you place on a night-sky canvas; related tasks connect into constellations (projects) with auto-drawn lines and labels. Includes a side panel for creating/editing tasks (title, due day, priority color, tags), drag-and-drop positioning, and quick filters (by day, tag, constellation) with progress shown as stars “brightening” when completed. Everything runs client-side with localStorage saving layouts, plus an export/import JSON feature to share your sky with others.
Run: npm create vite@latest . -- --template react-ts && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i class-variance-authority clsx tailwind-merge lucide-react && npx shadcn@latest init && npx shadcn@latest add button input textarea label badge card dialog sheet tabs select separator scroll-area switch dropdown-menu tooltip
by system
Configure Tailwind content paths and add globals.css with Tailwind directives and shadcn theme variables.
by system
Create src/types.ts defining Task, Constellation, Tag, DayOfWeek, and AppState types.
by system
Create src/lib/storage.ts to load/save AppState with versioning and safe fallback defaults.
by system
Create src/lib/serialize.ts to export AppState to JSON string and import/validate JSON.
by system
Create src/lib/defaultState.ts providing an initial demo sky and empty-state defaults.
by system
Create src/state/usePlannerState.ts implementing a reducer for CRUD, dragging, completion, filters, and persistence.
by system
Create src/state/PlannerContext.tsx to expose state and dispatch via React context.
by system
Update src/App.tsx to render a two-pane layout with SkyCanvas and SidePanel wrapped in PlannerProvider.
by system
Create src/components/SkyCanvas.tsx as the full-size canvas surface with background and coordinate system.
by system
Create src/components/SkyBackground.tsx rendering a subtle starfield/gradient backdrop for the canvas.
by system
Create src/components/TaskStar.tsx to render a draggable star with color, label tooltip, and brightness by completion.
by system
Add pointer-based drag logic to TaskStar to update task position in state on drag end.
by system
Create src/lib/coords.ts to convert client pixels to normalized canvas coordinates and clamp within bounds.
by system
Create src/components/ConstellationLines.tsx to draw SVG lines between related task stars based on constellation membership.
by system
Create src/components/ConstellationLabels.tsx to render constellation names near their centroid with subtle styling.
by system
Create src/components/SidePanel.tsx with tabs/sections for Task, Filters, and Share (export/import).
by system
Create src/components/TaskList.tsx showing tasks with quick actions (select, complete toggle, delete).
by system
Create src/components/TaskForm.tsx for creating/editing a task (title, due day, priority color, tags, constellation).
by system
Create src/components/DaySelect.tsx as a reusable DayOfWeek select used by the task form and filters.
by system
Create src/components/PriorityColorPicker.tsx to choose a color mapped to star hue.
by system
Create src/components/TagsInput.tsx to add/remove tags as badges with minimal keyboard support.
by system
Create src/components/ConstellationSelect.tsx to assign a task to an existing constellation or create a new one.
by system
Create src/components/FiltersPanel.tsx to filter by day, tag, and constellation and to clear filters.
by system
Create src/state/selectors.ts to compute visible tasks/constellations from state + active filters.
by system
Create src/lib/progress.ts to map completion state to star brightness/glow intensity.
by system
Wire TaskList and TaskStar interactions to toggle completed state and immediately update visuals.
by system
Create src/components/SharePanel.tsx with export-to-textarea, copy button, and import-from-textarea actions.
by system
Add user-friendly error reporting in SharePanel for invalid JSON or schema mismatch.
by system
Create src/lib/shortcuts.ts and wire in App to support keys like N (new task), Delete (remove selected), and Esc (clear selection).
by system