Constellation Planner
A lightweight goal-and-task planner where each goal becomes a “star” and tasks are connected as lines to form a constellation on a zoomable canvas. Users can create goals, add tasks with due dates and statuses, and watch the constellation brighten as items are completed, with everything saved to localStorage. Includes a focused “Night Mode” review panel that summarizes today’s tasks, upcoming deadlines, and a gentle streak counter for completed tasks.
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 Tailwind in src/index.css (base/components/utilities) and ensure it’s imported in src/main.tsx.
by system
Create src/types/constellation.ts with Goal, Task, Status, and AppState types.
by system
Create src/lib/storage.ts for loadState/saveState with versioned key and safe JSON parsing.
by system
Create src/hooks/usePersistedState.ts to sync AppState to localStorage with debounce.
by system
Create src/state/AppStateContext.tsx providing state + actions (CRUD goals/tasks) via React context.
by system
Add src/state/seed.ts exporting a small initial constellation when localStorage is empty.
by system
Create src/components/layout/AppShell.tsx with header/body structure using Tailwind.
by system
Create src/components/layout/TopBar.tsx with app title, Night Mode toggle button, and reset/demo buttons.
by system
Add src/lib/theme.ts to toggle a 'dark' class on documentElement and persist preference to localStorage.
by system
Add src/state/ViewState.ts to track selectedGoalId, selectedTaskId, and panel open/closed flags.
by system
Create src/pages/ConstellationPage.tsx composing AppShell, canvas area, and side panels.
by system
Create src/hooks/usePanZoom.ts handling wheel-zoom and pointer-drag panning for a container.
by system
Create src/components/canvas/ConstellationCanvas.tsx rendering an SVG layer inside a pan/zoom viewport.
by system
Create src/components/canvas/StarNode.tsx to render a goal as a clickable star with glow based on completion.
by system
Create src/components/canvas/TaskLine.tsx drawing an SVG line between connected tasks with status-based styling.
by system
Create src/lib/layout.ts to compute stable 2D positions for goals/tasks (simple radial/force-lite layout).
by system
Wire selection + hover behaviors in ConstellationCanvas.tsx using ViewState.
by system
Create src/components/goals/GoalCreateDialog.tsx using shadcn Dialog + form fields.
by system
Create src/components/goals/GoalEditDialog.tsx for renaming/changing color and deleting a goal.
by system
Create src/components/tasks/TaskCreateForm.tsx to add a task to a selected goal (title, due date, status).
by system
Create src/components/panels/GoalTasksPanel.tsx showing selected goal details and its tasks list.
by system
Create src/components/tasks/TaskRow.tsx with checkbox/status toggle, due date badge, and edit button.
by system
Create src/components/tasks/TaskEditDialog.tsx to edit title, due date, status, and delete.
by system
Create src/lib/dates.ts with today/upcoming/overdue checks and friendly formatting.
by system
Create src/components/panels/NightReviewPanel.tsx summarizing today’s tasks, upcoming deadlines, and overdue items.
by system
Create src/lib/streak.ts to compute a gentle completion streak from task completion timestamps.
by system
Create src/components/review/StreakCard.tsx to display streak count and last-completed day in the NightReviewPanel.
by system
Add src/lib/progress.ts to compute goal/task completion percentages used for star brightness and line intensity.
by system
Update src/App.tsx to compose providers, ConstellationPage, dialogs/panels, and connect actions to UI events.
by system