Constellation Planner
A playful daily planner where tasks become “stars” you drag onto a night-sky canvas to form constellations (projects). Users can create constellations, add/edit star-tasks with due dates and tags, and watch progress fill in the constellation lines as tasks are completed, with all data saved to localStorage. The app includes a simple calendar/list view, a focus mode that highlights one constellation at a time, and a small “sky generator” that changes background themes based on time of day.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i class-variance-authority clsx tailwind-merge lucide-react && npx shadcn@latest init -d.
by system
Configure tailwind.config and src/index.css with Tailwind directives and shadcn/ui base styles.
by system
Implement a simple shell layout with header and main content in src/App.tsx.
by system
Set up react-router in src/main.tsx with routes for Canvas, Calendar, and Focus pages.
by system
Create src/types/planner.ts defining Constellation, StarTask, Tag, and Theme types.
by system
Add src/lib/storage.ts with load/save helpers and versioned key names.
by system
Create src/state/usePlannerStore.ts using React state + reducers and persisting to localStorage.
by system
Add a small default dataset initializer in src/state/seed.ts used when storage is empty.
by system
Generate and export the shadcn/ui Dialog component for reuse in forms.
by system
Generate and export the shadcn/ui Button component for app actions.
by system
Generate and export the shadcn/ui Input component for text and date fields.
by system
Generate and export the shadcn/ui Select component for tag and constellation picking.
by system
Create src/components/HeaderNav.tsx with links and active route styling.
by system
Implement src/hooks/useSkyTheme.ts to compute theme by time-of-day and update CSS variables.
by system
Create src/components/SkyBackground.tsx that renders gradients/stars based on the current theme.
by system
Create src/components/ConstellationList.tsx to show, select, and create constellations.
by system
Implement src/components/CreateConstellationDialog.tsx to add a constellation with name/color.
by system
Add src/lib/taskUtils.ts for derived fields like completion %, due status, and tag formatting.
by system
Create src/pages/CanvasPage.tsx composing SkyBackground, list panel, and the sky canvas.
by system
Implement src/components/SkyCanvas.tsx rendering stars and constellation lines using SVG overlay.
by system
Add pointer-based drag logic to SkyCanvas.tsx to move stars and persist positions.
by system
Create src/components/StarNode.tsx to render a star with completed/overdue visual states.
by system
Create src/components/ConstellationLines.tsx to draw connecting paths and progress fill.
by system
Implement src/components/AddStarDialog.tsx for creating a star-task with title, due date, tags.
by system
Implement src/components/EditStarDialog.tsx for editing star-task fields and deleting the task.
by system
Create src/components/TagEditor.tsx to add/remove tags and choose tag colors.
by system
Add a complete/incomplete toggle UI to StarNode.tsx that updates state and redraws progress.
by system
Create src/pages/CalendarPage.tsx showing a simple date-grouped list of tasks with filters.
by system
Create src/pages/FocusPage.tsx to highlight one constellation with next-due tasks and quick actions.
by system
Add src/components/DataPortDialog.tsx to export/import planner JSON to/from clipboard or file.
by system