Constellation Journal
A mood-and-moments journal that turns daily entries into a growing night-sky: each day becomes a “star” plotted on a simple canvas, with color and size based on mood and energy. Users can add a short note, pick tags, and see entries connected into “constellations” by tag, with hover/click to preview and filter. Everything runs client-side with localStorage (entries, tags, settings), and the UI cleanly splits into Entry Form, Sky View (plot + interactions), Filters/Legend, and Timeline List components.
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 paths and add @tailwind directives in src/index.css.
by system
Implement the main layout in src/App.tsx with header and 2-column responsive grid.
by system
Generate and commit the shadcn/ui Button component for consistent actions.
by system
Generate and commit the shadcn/ui Input component for text fields.
by system
Generate and commit the shadcn/ui Textarea component for journal notes.
by system
Generate and commit the shadcn/ui Select component for mood/energy pickers.
by system
Generate and commit the shadcn/ui Badge component for tags/legend chips.
by system
Generate and commit the shadcn/ui Dialog component for entry preview/edit modal.
by system
Create src/types.ts defining Entry, Mood, Energy, Tag, and Settings types.
by system
Create src/lib/storage.ts with load/save helpers and versioned keys.
by system
Create src/hooks/useEntries.ts to manage CRUD entries synced to localStorage.
by system
Create src/hooks/useSettings.ts to manage user settings persisted in localStorage.
by system
Create src/hooks/useTags.ts to manage tag list and persistence in localStorage.
by system
Create src/lib/mood.ts to map mood to star color and label.
by system
Create src/lib/energy.ts to map energy level to star radius and label.
by system
Create src/lib/skyLayout.ts to deterministically place stars by date and canvas size.
by system
Create src/lib/constellations.ts to group entries by tag and produce line segments.
by system
Implement src/components/EntryForm.tsx with date, mood, energy, note, and tags inputs.
by system
Implement src/components/TagPicker.tsx for selecting/creating tags in the form.
by system
Wire EntryForm submit to create an entry via useEntries and reset fields.
by system
Implement src/components/SkyCanvas.tsx rendering stars on a <canvas> with resize handling.
by system
Add tag-based line drawing to SkyCanvas using constellation segments.
by system
Implement hit-testing in SkyCanvas to show hovered star tooltip state.
by system
Implement click selection in SkyCanvas to open the entry preview dialog.
by system
Implement src/components/EntryDialog.tsx to display selected entry details and tags.
by system
Implement src/components/FiltersLegend.tsx for tag filter chips and mood/energy legend.
by system
Add filter state in App and apply it to both SkyCanvas and TimelineList data.
by system
Implement src/components/TimelineList.tsx to show entries by date with quick preview.
by system
Add delete (and optional edit trigger) actions per entry in TimelineList using useEntries.
by system