Constellation Planner
A playful day planner where tasks become “stars” you place on a night-sky canvas, then connect into constellations representing goals or themes (e.g., Health, Study, Home). Users can add/edit stars with due dates, tags, and priority glow, drag to reposition, and mark completion to dim or sparkle; constellations show progress as lines brighten. Everything runs client-side with localStorage, featuring a list view + sky view toggle, simple filters, and an optional “night mode” ambient animation.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i lucide-react class-variance-authority tailwind-merge clsx && npx shadcn@latest init
by system
Configure tailwind.config and src/index.css with Tailwind directives and a minimal app theme.
by system
Create src/lib/utils.ts with cn() helper for className composition.
by system
Create src/types.ts defining StarTask, Constellation, Tag, and filter/view model types.
by system
Create src/lib/storage.ts to load/save planner state to localStorage with versioning.
by system
Create src/state/usePlannerStore.ts implementing a React hook for CRUD, selection, and persistence.
by system
Add a small default dataset returned when no localStorage data exists.
by system
Implement src/App.tsx with header, main content area, and responsive container.
by system
Create src/components/TopBar.tsx with app title, view toggle, and theme toggle placeholders.
by system
Create src/components/ViewToggle.tsx to switch between List view and Sky view in store state.
by system
Create src/components/ThemeToggle.tsx to switch night mode class on document root and persist it.
by system
Create src/components/NightAmbient.tsx rendering optional subtle animated gradient/noise background.
by system
Create src/pages/ListPage.tsx that displays task list and an add-task button.
by system
Create src/pages/SkyPage.tsx that renders the sky canvas, stars, and constellation lines.
by system
Create src/components/sky/SkyCanvas.tsx providing a positioned container and pan-safe bounds.
by system
Create src/components/sky/StarNode.tsx to render a star with glow based on priority and completion state.
by system
Add pointer event dragging to StarNode.tsx to update star x/y in the store.
by system
Create src/components/sky/ConstellationLines.tsx to draw SVG lines between linked stars with progress brightness.
by system
Add click-to-select logic in SkyPage.tsx and highlight selected star node.
by system
Add a small completion toggle action (e.g., double-click or checkbox) for stars in both views.
by system
Create src/components/list/TaskRow.tsx showing title, due date, tags, priority, and completion toggle.
by system
Create src/components/list/TaskList.tsx to render filtered tasks using TaskRow.
by system
Create src/components/dialogs/StarCreateDialog.tsx using shadcn Dialog + form inputs to add a star.
by system
Create src/components/dialogs/StarEditDialog.tsx to edit/delete an existing star.
by system
Create src/components/forms/StarFields.tsx containing reusable inputs for title, due date, tags, priority, and constellation.
by system
Create src/components/ConstellationPicker.tsx to select/create a constellation (goal/theme) for a star.
by system
Create src/components/FiltersBar.tsx with search, tag filter, constellation filter, and status filter controls.
by system
Implement filter selectors in usePlannerStore.ts and apply them in TaskList and SkyPage.
by system
Create src/lib/progress.ts to compute constellation completion percent and per-line brightness.
by system
Create src/components/ImportExport.tsx to download/upload planner state JSON locally (no network).
by system