Constellation Diary
A mood-and-moment journal where each entry becomes a "star" on a nightly sky map, positioned by time and tagged emotions, with color and size reflecting intensity. Users can add/edit entries, filter by tags, and watch their sky form evolving constellations (auto-grouped clusters) with a simple name generator and a details panel for each star. Everything runs client-side with localStorage, featuring a split layout (sky canvas, entry form, and constellation list) using Tailwind + shadcn/ui for dialogs, tabs, and filters.
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.config.js and src/index.css with Tailwind directives and content paths.
by system
Create src/lib/utils.ts with cn() helper for shadcn/ui components.
by system
Create src/types.ts defining JournalEntry, EmotionTag, ConstellationCluster, and FilterState types.
by system
Create src/lib/storage.ts implementing loadEntries(), saveEntries(), and migrateStorage().
by system
Create src/lib/id.ts for stable ID creation and timestamp helpers.
by system
Create src/lib/colors.ts mapping emotion tags to colors and intensity to size/alpha.
by system
Create src/lib/position.ts mapping entry time-of-day/date to normalized sky x/y coordinates.
by system
Create src/lib/clustering.ts to group entries into clusters based on proximity and shared tags.
by system
Create src/lib/names.ts generating simple readable constellation names from tags/time patterns.
by system
Implement src/App.tsx with split panes for Sky, Entry Form, and Constellations using Tailwind.
by system
Create src/hooks/useDiaryState.ts to manage entries, selection, filters, and persistence.
by system
Create src/lib/seed.ts that optionally seeds localStorage with sample entries on first run.
by system
Create src/components/SkyCanvas.tsx rendering a starfield and plotting stars on a responsive canvas.
by system
Add click/hover hit testing in SkyCanvas.tsx to select a star by nearest point radius.
by system
Create src/components/StarDetailsPanel.tsx showing selected entry details and actions.
by system
Create src/components/EntryForm.tsx for add/edit with text, datetime, tags, and intensity fields.
by system
Create src/components/TagPicker.tsx for selecting/adding emotion tags with colored chips.
by system
Create src/components/IntensitySlider.tsx using shadcn/ui Slider to set 1–10 intensity.
by system
Wire EntryForm.tsx to create/update entries via useDiaryState and reset on success.
by system
Create src/components/DeleteEntryDialog.tsx using shadcn/ui Dialog to confirm deletion.
by system
Implement selecting an entry to populate EntryForm.tsx for editing and allow cancel.
by system
Create src/components/FiltersBar.tsx with tag multi-select and intensity/time-range controls.
by system
Implement src/lib/filtering.ts to apply FilterState to entries and return visible entries.
by system
Create src/components/ConstellationList.tsx listing clusters with name, count, and top tags.
by system
Create src/components/ConstellationDialog.tsx showing cluster summary and member entries.
by system
Update SkyCanvas.tsx to draw simple connecting lines between stars within the same cluster.
by system
Add shadcn/ui Tabs to switch between Entry Form, Star Details, and Filters in the side pane.
by system
Add lightweight empty-state components/messages for no entries, no matches, and no selection.
by system
Tighten keyboard focus, aria labels, and responsive styling across components with Tailwind.
by system