Constellation Planner
A playful weekly planner where tasks become “stars” you place on a night-sky canvas, then connect into constellations to represent projects or themes (e.g., Work, Health, Learning). Includes a simple task editor (title, due day, priority color, notes), drag-and-drop positioning, and a “focus mode” that filters the sky to one constellation and highlights the next task. Everything is saved to localStorage, with export/import as a single JSON file for easy backup and sharing.
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
by system
Configure src/index.css with Tailwind directives and set basic body/background styles.
by system
Implement a simple shell in src/App.tsx with header, main, and right sidebar regions.
by system
Generate and commit the shadcn/ui Button component for consistent actions.
by system
Generate and commit the shadcn/ui Dialog component for modals.
by system
Generate and commit the shadcn/ui Input component for forms.
by system
Generate and commit the shadcn/ui Textarea component for notes.
by system
Generate and commit the shadcn/ui Select component for day/constellation pickers.
by system
Generate and commit the shadcn/ui Popover component for small pickers.
by system
Generate and commit the shadcn/ui Tabs component for switching views/modes.
by system
Create src/types.ts defining Task, Constellation, Connection, and AppState types.
by system
Create src/hooks/useLocalStorageState.ts to load/save AppState with versioning.
by system
Create src/state/AppStateContext.tsx exposing state and actions via React context.
by system
Create src/state/defaultState.ts with a small initial sky, tasks, and one constellation.
by system
Create src/components/SkyCanvas.tsx rendering a full-area canvas container with starfield background.
by system
Create src/components/StarTask.tsx to render a task as a draggable “star” with priority color.
by system
Implement pointer-based drag and drop in StarTask.tsx that updates task x/y in state.
by system
Create src/components/ConnectionsLayer.tsx that draws SVG lines between connected tasks.
by system
Add selection state in context and allow clicking a star to select it.
by system
Create src/components/TaskEditorDialog.tsx for editing title, due day, priority, notes.
by system
Wire selecting a star and an Edit button to open TaskEditorDialog with that task.
by system
Add a “New Star” button that creates a task with default fields near center.
by system
Add a delete button in TaskEditorDialog that removes task and related connections.
by system
Create src/components/ConstellationPanel.tsx listing constellations with color and task count.
by system
Add UI in ConstellationPanel.tsx to create a constellation with name and color.
by system
Add a constellation Select in TaskEditorDialog.tsx to assign/unassign a task.
by system
Implement a connect-mode toggle that lets clicking two stars create/remove a connection.
by system
Create src/components/FocusModeBar.tsx that picks a constellation and filters visible stars/lines.
by system
In focus mode, compute and visually highlight the “next” task by due day then priority.
by system
Create src/components/ExportImport.tsx to download/upload AppState as a single JSON file.
by system