Constellation Journal
A mood-and-notes journal where each entry becomes a “star” plotted on a simple interactive sky: position is chosen by the user (or auto-scattered), color represents mood, and size represents energy level. Users can add/edit/delete entries, filter the sky by mood tags and date ranges, and click any star to open a shadcn/ui dialog with the full entry. Everything is client-side with localStorage persistence, plus a “streak” widget and an optional guided prompt generator to help users write a daily entry.
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 -d
by system
Create src/index.css with Tailwind directives and minimal base styles.
by system
Add src/lib/utils.ts with cn() helper for class merging.
by system
Add src/types/journal.ts defining Entry, MoodTag, EnergyLevel, and FilterState types.
by system
Add src/lib/storage.ts implementing loadEntries/saveEntries with versioned key and safe parsing.
by system
Add src/lib/seed.ts that returns a small set of demo entries when storage is empty.
by system
Add src/hooks/useEntries.ts to manage CRUD state and persist to localStorage.
by system
Add src/hooks/useFilters.ts for mood/date range filters and derived active filter chips.
by system
Add src/lib/streak.ts to compute current and longest streaks from entry dates.
by system
Add src/lib/prompts.ts exporting a function that returns a random guided prompt string.
by system
Create src/components/AppShell.tsx with header/main layout using Tailwind.
by system
Create src/components/HeaderBar.tsx with app title and right-side action slots.
by system
Create src/components/SkyCanvas.tsx that renders stars in an interactive bounded area.
by system
Create src/components/Star.tsx to render a single star with size/color/selection states.
by system
Add src/lib/scatter.ts to generate non-overlapping-ish random positions within sky bounds.
by system
Update SkyCanvas to support choosing a position by clicking the sky during entry creation.
by system
Add src/lib/moods.ts defining mood tags and mapping to Tailwind-friendly colors.
by system
Add src/lib/energy.ts mapping energy levels to star radius/scale values.
by system
Add src/hooks/useSelectedEntry.ts to manage selected entry id and open/close behavior.
by system
Create src/components/EntryDialog.tsx using shadcn/ui Dialog to show full entry details.
by system
Install shadcn/ui components Dialog, Button, Input, Textarea, Label, Badge, Popover, Calendar, Select, Slider, Tabs.
by system
Create src/components/EntryForm.tsx for add/edit with mood, energy, date, notes, and position fields.
by system
Create src/components/NewEntryPanel.tsx that opens the EntryForm and integrates position picking/auto-scatter.
by system
Update EntryDialog to include an Edit action that opens EntryForm prefilled.
by system
Add a Delete button with confirmation inside EntryDialog to remove the selected entry.
by system
Create src/components/FiltersPanel.tsx with mood multi-select and date range picker controls.
by system
Add src/lib/filterEntries.ts to derive visible entries from filters and wire it into SkyCanvas.
by system
Create src/components/ActiveFilters.tsx to show removable filter chips.
by system
Create src/components/StreakWidget.tsx showing current/longest streak and last entry date.
by system
Create src/components/PromptWidget.tsx to display and regenerate a guided daily prompt.
by system