Constellation Planner
A playful daily planner where tasks become “stars” you place on a night-sky canvas and connect into constellations representing goals or projects. Users can create tasks with due dates and tags, drag them around the sky, draw connections to form constellations, and mark stars complete to make them glow or fade. Everything is client-side with localStorage persistence, plus simple views for Today/This Week and a constellation gallery to filter and review progress.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-popover @radix-ui/react-tabs @radix-ui/react-tooltip class-variance-authority clsx tailwind-merge lucide-react && npx shadcn@latest init
by system
Configure src/index.css with Tailwind directives and set a simple global dark-sky theme.
by system
Create src/types.ts defining StarTask, ConstellationEdge, Constellation, Tag, and ViewMode types.
by system
Create src/lib/storage.ts with load/save utilities and versioned schema key.
by system
Create src/state/usePlannerStore.ts implementing CRUD for tasks/edges/constellations with localStorage persistence.
by system
Add src/state/seed.ts exporting a small initial dataset used when storage is empty.
by system
Update src/App.tsx to render header + main content area with a background gradient.
by system
Create src/state/useHashRoute.ts to manage hash-based navigation between views without dependencies.
by system
Create src/components/TopNav.tsx with shadcn Tabs/Buttons for Sky, Today, Week, Gallery.
by system
Create src/pages/SkyPage.tsx composing the canvas, toolbar, and selected-star panel.
by system
Create src/pages/TodayPage.tsx listing due-today and overdue tasks with quick complete toggles.
by system
Create src/pages/WeekPage.tsx showing tasks grouped by day for the next 7 days.
by system
Create src/pages/GalleryPage.tsx listing constellations with filters and progress summaries.
by system
Create src/components/SkyCanvas.tsx rendering an SVG or canvas-based sky surface with stars and edges.
by system
Create src/components/StarNode.tsx to display a task as a draggable star with glow/fade based on completion.
by system
Create src/components/EdgeLine.tsx to render connections between stars with subtle stroke styling.
by system
Implement pointer-drag logic in StarNode.tsx to update star x/y in the store.
by system
Add pan/zoom interactions to SkyCanvas.tsx using pointer events and CSS transforms.
by system
Implement click-to-select behavior in SkyCanvas.tsx and store selectedStarId state.
by system
Create src/components/StarDetailsPanel.tsx showing title, notes, due date, tags, and complete toggle for selected star.
by system
Create src/components/CreateStarDialog.tsx (shadcn Dialog) to add a new task with due date and tags.
by system
Create src/components/EditStarDialog.tsx to edit title/notes/due/tags for the selected task.
by system
Create src/components/TagPicker.tsx for selecting/creating tags with color chips.
by system
Add Tailwind/CSS styles to visually distinguish completed vs active stars and dim overdue ones.
by system
Create src/components/SkyToolbar.tsx with toggles for Connect mode, Create, Delete, and Reset view.
by system
Implement connect-mode click-first-star then click-second-star in SkyCanvas.tsx to create an edge.
by system
Add ability to select an edge and delete it via SkyToolbar.tsx.
by system
Create src/components/ConstellationLabel.tsx to show constellation name near its centroid on the canvas.
by system
Add src/lib/graph.ts to compute constellations from edges (connected components) and progress percent.
by system
Implement filtering by tag/status and progress display in GalleryPage.tsx using graph.ts helpers.
by system