Constellation Journal
A mood-and-moments journal where each entry becomes a “star” on a night-sky canvas, with mood choosing the star color and intensity. Users can add entries, tag them, and see automatic constellations formed by connecting stars that share a tag or fall within a selected date range. Includes filters (mood, tag, timeframe), a detail drawer for editing/deleting entries, and localStorage persistence so the sky rebuilds instantly on reload.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i -D @tailwindcss/vite && npm i clsx tailwind-merge lucide-react && npx shadcn@latest init.
by system
Configure tailwind.config.ts and src/index.css with Tailwind layers and shadcn theme variables.
by system
Implement src/App.tsx with header/sidebar/main regions using Tailwind.
by system
Create src/lib/types.ts for Entry, Mood, Tag, Filters, and StarRender models.
by system
Create src/lib/moods.ts mapping mood to color/intensity defaults.
by system
Create src/lib/storage.ts for load/save entries with versioned key and safe parsing.
by system
Create src/hooks/useEntries.ts to manage entries CRUD and persist to localStorage.
by system
Create src/hooks/useFilters.ts to manage mood/tag/timeframe filters in a single object.
by system
Create src/lib/skyMath.ts to convert entry timestamps to x/y positions and star radius/opacity.
by system
Create src/lib/constellations.ts to compute line segments by shared tag and by date-range proximity.
by system
Install needed shadcn/ui primitives (button, input, textarea, select, badge, drawer/sheet, dialog, popover, slider, tabs).
by system
Create src/components/SkyCanvas.tsx that renders stars and constellation lines on an SVG layer.
by system
Add hover/focus tooltip behavior in SkyCanvas.tsx showing mood, date, and title snippet.
by system
Wire SkyCanvas.tsx to emit selected entry id on star click.
by system
Create src/components/FiltersBar.tsx with mood, tag, and timeframe controls using shadcn inputs.
by system
Create src/components/TimeframePicker.tsx supporting presets (7d/30d/all) and custom date range.
by system
Create src/components/TagSelect.tsx to pick a tag from existing tags plus free-text add.
by system
Create src/components/MoodSelect.tsx listing moods with color preview chips.
by system
Create src/components/EntryForm.tsx for creating an entry (title, body, mood, tags, date).
by system
Implement EntryForm.tsx submit to call useEntries addEntry and reset fields.
by system
Create src/components/EntriesList.tsx showing filtered entries with mood dot, date, and tags.
by system
Create src/components/EntryListItem.tsx as a memoized row component with compact styling.
by system
Create src/components/EntryDrawer.tsx using shadcn Sheet/Drawer to show entry details and actions.
by system
Add editable fields inside EntryDrawer.tsx with save/cancel behavior.
by system
Add a confirmation dialog in EntryDrawer.tsx and wire delete to useEntries.
by system
Create src/lib/filtering.ts to filter entries by mood, tag, and timeframe consistently.
by system
Create src/lib/skyModel.ts to map filtered entries to star render props and constellation segments.
by system
Create src/pages/Home.tsx composing FiltersBar, SkyCanvas, EntriesList, EntryForm, and EntryDrawer.
by system
Connect Home.tsx to useEntries/useFilters and pass derived sky model to SkyCanvas.
by system
Add empty and first-run hints in Home.tsx when there are no entries or no filter matches.
by system