Constellation Journal
A mood-and-moment journal where each entry becomes a “star” placed on a nightly sky canvas; related entries can be connected into constellations by dragging lines between stars. The app includes quick-entry prompts, searchable/taggable entries, and a timeline filter that redraws the sky by week/month, with all data stored in localStorage. Users can export/import their sky as JSON and generate a shareable snapshot image of the current constellation view.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i @tailwindcss/vite && npm i lucide-react && npx shadcn@latest init && npx shadcn@latest add button card dialog dropdown-menu input textarea badge tabs slider popover calendar toast
by system
Configure tailwind.config + src/index.css with @tailwind directives and set @tailwindcss/vite in vite config.
by system
Create src/types/journal.ts with Entry, Star, Connection, Constellation, and AppState types.
by system
Implement src/lib/storage.ts to load/save AppState with schema versioning and safe fallbacks.
by system
Create src/state/AppStateProvider.tsx exposing state plus CRUD actions for entries/stars/connections.
by system
Add src/lib/seed.ts returning a small initial AppState used when storage is empty.
by system
Build src/components/AppShell.tsx with header + left sidebar + main canvas region.
by system
Create src/components/HeaderBar.tsx with app title and actions (export/import/snapshot).
by system
Create src/components/Sidebar.tsx with tabs for Entry, Search, Timeline, and Constellations.
by system
Implement src/components/SkyCanvas/SkyCanvas.tsx container handling sizing and pointer events.
by system
Create src/components/SkyCanvas/StarNode.tsx to draw a star at x/y with mood color and hover state.
by system
Create src/components/SkyCanvas/ConnectionsLayer.tsx rendering SVG lines between stars.
by system
Add src/components/SkyCanvas/useConnectDrag.ts handling pointer drag from star to star to create a connection.
by system
Create src/components/SkyCanvas/StarPopover.tsx showing entry summary and quick actions on click.
by system
Implement src/components/Entry/EntryDialog.tsx to create/edit an entry with mood, text, tags, date.
by system
Create src/components/Entry/QuickPrompts.tsx with predefined prompt buttons that prefill EntryDialog.
by system
Implement src/lib/starPlacement.ts to deterministically place new stars (avoid overlaps) based on date/id.
by system
Create src/components/Entry/EntriesList.tsx listing entries with edit/delete and jump-to-star.
by system
Create src/components/Entry/TagInput.tsx for adding/removing tags with keyboard support.
by system
Implement src/components/Search/SearchPanel.tsx with text query and tag filter chips.
by system
Add src/state/selectors.ts to derive visible stars/connections from search + timeline filters.
by system
Create src/components/Timeline/TimelineFilter.tsx with week/month toggle and date range controls.
by system
Implement src/lib/dateRange.ts to compute week/month ranges and inclusion checks for entries.
by system
Create src/lib/constellations.ts to compute connected components and name constellations from connections.
by system
Implement src/components/Constellations/ConstellationsPanel.tsx listing constellations and highlighting on select.
by system
Create src/lib/exportImport.ts with exportStateToJson() and download helper.
by system
Implement src/components/ImportDialog.tsx to paste/upload JSON and merge/replace state safely.
by system
Create src/lib/snapshot.ts to render the current sky view to a downloadable PNG via canvas.
by system
Add src/components/ToasterHost.tsx and wire success/error toasts for save/import/export/snapshot.
by system
Implement src/lib/shortcuts.ts and wire global handlers for new entry, search focus, and export.
by system