Constellation Journal
A mood-and-moment journal that turns each entry into a “star” on a personal night-sky canvas, where position, color, and size map to mood, energy, and tags. Users can add/edit entries, filter the sky by date range and tags, and click stars to open a detail drawer with notes and optional attachments (emoji, color, quick sliders). Includes an auto-generated “weekly constellation” view that connects related entries (same tag or similar mood) into simple line patterns and saves everything client-side in localStorage.
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 src/index.css with Tailwind directives and a minimal base theme.
by system
Add shadcn/ui primitives needed (Button, Input, Textarea, Dialog, Drawer/Sheet, Select, Slider, Popover, Badge, Tabs, Calendar).
by system
Create src/types/journal.ts defining JournalEntry, Mood, Tag, and filter/query types.
by system
Create src/lib/storage.ts to load/save entries and app preferences with versioning.
by system
Create src/lib/seed.ts to provide optional starter entries when storage is empty.
by system
Create src/hooks/useEntries.ts managing CRUD, persistence, and seeded initialization.
by system
Create src/hooks/useSkyFilters.ts to manage date range, selected tags, and mood/energy ranges.
by system
Implement src/App.tsx with a header, main canvas area, and right-side panel trigger.
by system
Create src/components/TopBar.tsx with app title and actions (New Entry, Weekly View, Reset).
by system
Create src/components/SkyCanvas.tsx as the responsive “night sky” wrapper with pan-safe layout.
by system
Create src/lib/starMap.ts to map mood/energy/tags into x/y position, color, and size.
by system
Create src/components/Star.tsx rendering a single entry as a clickable positioned dot with tooltip.
by system
Create src/components/StarsLayer.tsx to render all filtered entries as Star components.
by system
Create src/hooks/useSelectedEntry.ts to manage selected entry id and open/close behavior.
by system
Create src/components/EntryDrawer.tsx showing selected entry details in a shadcn Sheet/Drawer.
by system
Add src/components/EntryDrawerActions.tsx for Edit/Delete buttons and close control.
by system
Create src/components/EntryFormDialog.tsx to add or edit an entry in a shadcn Dialog.
by system
Create src/components/EntryMoodEnergyFields.tsx with sliders/selects for mood and energy.
by system
Create src/components/TagsPicker.tsx for selecting/adding tags using badges and input.
by system
Create src/components/EmojiPickerField.tsx for optional emoji “attachment” selection.
by system
Create src/components/ColorPickerField.tsx to override star color per entry.
by system
Create src/components/NotesField.tsx for entry notes with character count.
by system
Create src/components/FilterSheet.tsx to adjust date range, tags, and mood/energy filters.
by system
Create src/components/DateRangePicker.tsx using shadcn Calendar/Popover to pick start/end dates.
by system
Create src/components/TagFilter.tsx to toggle included tags and clear selections.
by system
Create src/lib/weeklyConstellation.ts to group weekly entries and generate connection edges by tag/mood similarity.
by system
Create src/components/WeeklyConstellation.tsx rendering weekly stars plus connecting SVG lines.
by system
Create src/components/DataToolsDialog.tsx to reset storage and import/export JSON locally.
by system