Constellation Journal
A mood-and-moment journal where each entry becomes a “star” on a nightly sky canvas: pick a mood color, add a short note, and optionally tag it (work, friends, health). The app renders your entries as a draggable constellation map with filters by date range, mood, and tags, plus a timeline list view for quick edits and search. Everything runs client-side with localStorage persistence, and the UI is split into clear components (EntryForm, SkyCanvas, StarDetailDrawer, FiltersBar, TimelineList, Settings/Export).
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 in src/index.css and ensure main.tsx imports it.
by system
Create src/types.ts with JournalEntry, Mood, Tag, and filter types.
by system
Create src/lib/storage.ts for load/save entries and app settings.
by system
Create src/lib/seed.ts to generate a few initial entries when storage is empty.
by system
Create src/hooks/useJournalState.ts to manage entries, filters, selection, and persistence.
by system
Create src/lib/dates.ts for parsing, formatting, and date-range checks.
by system
Create src/lib/filters.ts to apply mood/tag/date/search filters to entries.
by system
Create src/components/AppShell.tsx with header, main split layout, and responsive behavior.
by system
Create src/components/HeaderBar.tsx with app title and primary actions (new, export, settings).
by system
Create src/components/EntryForm.tsx for mood color, note, tags, and save/cancel buttons.
by system
Wire EntryForm to create/update entries via props callbacks without touching global state directly.
by system
Create src/components/FiltersBar.tsx with date range, mood multi-select, tag toggles, and search input.
by system
Connect FiltersBar to filter state via props and emit changes with debounced search.
by system
Create src/components/SkyCanvas.tsx rendering a full-size star field container with pan/zoom placeholders.
by system
Add StarNode rendering inside SkyCanvas based on entry mood color and size mapping.
by system
Implement drag interactions to update per-entry x/y positions (persisted) in SkyCanvas.
by system
Draw simple SVG lines connecting stars by createdAt order within SkyCanvas.
by system
Create src/components/StarTooltip.tsx to show date, mood, and truncated note on hover.
by system
Add click-to-select behavior in SkyCanvas and emit selected entry id.
by system
Create src/components/StarDetailDrawer.tsx as a shadcn/ui Drawer showing full entry details.
by system
Add edit, delete, and close actions to StarDetailDrawer using callbacks.
by system
Create src/components/TimelineList.tsx listing filtered entries with mood dot, date, and note preview.
by system
Add select-on-click and inline quick actions (edit/delete) to TimelineList via callbacks.
by system
Implement selected-entry editing so EntryForm can switch between create and edit modes cleanly.
by system
Add optional text highlight of search matches in TimelineList previews.
by system
Create src/components/SettingsDialog.tsx to configure theme and canvas options (e.g., show lines).
by system
Create src/components/ExportDialog.tsx with JSON export download and JSON import file picker.
by system
Implement serialize/validate/merge or replace behavior for imported entries with safe error handling.
by system
Update src/App.tsx to compose AppShell, EntryForm, FiltersBar, SkyCanvas, TimelineList, drawers/dialogs using useJournalState.
by system