Constellation Planner
A playful goal-and-task planner where each goal is a “star” and related tasks form clickable “constellations” on a simple canvas-based sky map. Users can create goals, add tasks, drag stars to rearrange their sky, and mark tasks complete to make stars glow brighter; everything persists in localStorage. Includes a small “stargazer” mode that filters the sky by timeframe (Today/This Week/Anytime) and a compact sidebar for editing, search, and exporting/importing the sky as JSON.
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 && npm i @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-scroll-area @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slot @radix-ui/react-tabs @radix-ui/react-toast && npx shadcn@latest init
by system
Configure src/index.css with Tailwind directives and set a minimal app background theme.
by system
Add src/lib/utils.ts with cn() helper for Tailwind class merging.
by system
Create src/types/planner.ts defining GoalStar, TaskNode, Timeframe, and SkyState shapes.
by system
Create src/lib/storage.ts to load/save SkyState with versioning and safe fallbacks.
by system
Create src/lib/seed.ts exporting a small initial SkyState used when storage is empty.
by system
Create src/hooks/useSkyState.ts managing SkyState CRUD and persisting via storage helpers.
by system
Create src/lib/timeframe.ts to filter tasks/goals by Today/This Week/Anytime rules.
by system
Create src/lib/skyJson.ts to serialize/deserialize SkyState with validation and errors.
by system
Update src/App.tsx to render a two-column layout with sidebar and main canvas area.
by system
Create src/components/HeaderBar.tsx with title and compact controls region.
by system
Create src/components/StargazerToggle.tsx for selecting timeframe filter (Today/This Week/Anytime).
by system
Create src/components/SkyCanvas.tsx rendering a full-size canvas and handling resize.
by system
Create src/lib/canvasDraw.ts for drawing stars, glow, links, labels, and background.
by system
Create src/lib/constellations.ts to map goal-task relations into drawable link segments.
by system
Create src/lib/hitTest.ts to find hovered/selected star/task node by pointer position.
by system
Create src/lib/drag.ts to manage pointer drag state and update node positions.
by system
Update src/components/SkyCanvas.tsx to support select, hover tooltip, and drag-to-reposition.
by system
Create src/hooks/useSelection.ts to track selected goal/task IDs and clear on background click.
by system
Create src/components/Sidebar.tsx with scrollable sections for search, editor, and import/export.
by system
Create src/components/SearchBox.tsx to filter visible goals/tasks by text query.
by system
Create src/lib/search.ts to compute matching goal/task IDs from SkyState and query.
by system
Create src/components/GoalList.tsx showing goals with counts and click-to-select behavior.
by system
Create src/components/AddGoalDialog.tsx using shadcn Dialog to create a new goal star.
by system
Create src/components/AddTaskDialog.tsx to add a task node linked to the selected goal.
by system
Create src/components/EditorPanel.tsx to edit title, notes, timeframe, and delete actions for selection.
by system
Update src/components/EditorPanel.tsx to toggle task completion and adjust goal glow intensity.
by system
Create src/components/ImportExportPanel.tsx with textarea and buttons to export/import JSON.
by system
Create src/components/Toaster.tsx and wire basic success/error toasts for import/export actions.
by system
Update src/App.tsx to connect hooks, filters, sidebar actions, and canvas rendering into a working SPA.
by system