Constellation Planner
A playful weekly planner where tasks become “stars” you place on a night-sky canvas; related tasks connect into constellations by drag-and-drop linking. It includes a simple day/week list view, a sky view for visual organization, and quick filters for status/tags, with all data saved in localStorage. Users can export/import their sky as JSON and toggle themes (dusk/midnight) using Tailwind + shadcn/ui controls.
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 (content/theme) and add Tailwind directives to src/index.css.
by system
Add shadcn/ui CSS variables and base styles to src/index.css.
by system
Implement src/App.tsx with a header + main split layout for list/sky views.
by system
Create src/types/planner.ts with Task, Link, Tag, and PlannerState types.
by system
Create src/lib/storage.ts with load/save functions and versioned key.
by system
Create src/state/usePlannerStore.ts as a React hook managing tasks/links and actions.
by system
Add persistence on change in src/state/usePlannerStore.ts using the storage helper.
by system
Add a small default dataset (tasks/links) when no localStorage exists.
by system
Create src/state/useTheme.ts to toggle dusk/midnight and persist to localStorage.
by system
Update src/main.tsx to apply the theme class to documentElement on changes.
by system
Create src/components/HeaderBar.tsx with title, theme toggle, and import/export buttons.
by system
Add shadcn/ui Button component via CLI and use it in HeaderBar.
by system
Add shadcn/ui DropdownMenu component and wire it for actions in HeaderBar.
by system
Add shadcn/ui Dialog component to support import/export modals.
by system
Create src/components/ExportDialog.tsx showing current planner JSON with copy/download.
by system
Create src/components/ImportDialog.tsx with textarea upload and validation before applying.
by system
Create src/lib/codec.ts to validate/parse/stringify PlannerState safely.
by system
Create src/views/WeekListView.tsx with a simple 7-day column layout.
by system
Create src/components/TaskListItem.tsx to render a task with status, tags, and due day.
by system
Create src/components/AddTaskForm.tsx to add a task (title/day/tags) into the store.
by system
Create src/components/StatusFilter.tsx and store filter state in the planner hook.
by system
Create src/components/TagFilter.tsx to toggle included tags and filter visible tasks.
by system
Create src/views/SkyView.tsx with a full-size relative container for stars/links.
by system
Create src/components/StarNode.tsx to render a task as a draggable “star” with label.
by system
Implement pointer drag logic in StarNode to update task x/y in the store.
by system
Create src/components/LinkLayer.tsx rendering SVG lines between linked stars by coordinates.
by system
Create src/state/useLinkMode.ts to handle selecting a source star and completing a link.
by system
Update StarNode to support click-to-select for linking and show selected state.
by system
Create src/components/ViewToggle.tsx to switch between WeekListView and SkyView in App.
by system