Constellation Journal
A mood-and-moment journal where each entry becomes a “star” on a nightly sky canvas—color and size reflect mood/energy, and tags form visible constellations you can connect with simple line links. Users can add/edit entries, filter by date/mood/tag, and view a timeline or sky view; everything is stored in localStorage with export/import as JSON. The app is split into clear components: EntryForm, StarfieldCanvas (render + interactions), Filters/Legend, EntryList/DetailsDrawer, and Settings (themes, data management).
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 content/theme and add directives to src/index.css.
by system
Add a minimal src/components/ui setup (e.g. button, input, textarea, select) via shadcn and ensure imports work.
by system
Create src/types.ts defining Entry, Mood, Tag, StarLink, and AppSettings types.
by system
Create src/lib/storage.ts to load/save entries, links, and settings with versioned keys.
by system
Create src/lib/portability.ts to export JSON and validate/import JSON into storage.
by system
Create src/lib/seed.ts to optionally populate sample entries/links when storage is empty.
by system
Create src/lib/theme.ts to apply light/dark/system theme via a data attribute/class on <html>.
by system
Create src/state/settingsStore.ts using React context to load/update settings and persist to localStorage.
by system
Create src/state/entriesStore.ts using React context for CRUD entries and persistence.
by system
Create src/state/linksStore.ts using React context to manage star-to-star line links and persistence.
by system
Create src/state/filterStore.ts to hold date range, mood, tag, and text query filters.
by system
Create src/components/AppShell.tsx with header, main split area, and responsive sidebar container.
by system
Create src/components/TopNav.tsx with app title and view toggle (Sky/Timeline).
by system
Add src/state/viewStore.ts to toggle between sky view and timeline view without react-router.
by system
Create src/components/EntryForm.tsx with fields for date, mood, energy, tags, and content using shadcn inputs.
by system
Wire EntryForm.tsx to create/update entries via entriesStore with basic validation.
by system
Create src/components/TagInput.tsx for adding/removing tags with keyboard support.
by system
Create src/components/MoodSelect.tsx providing predefined moods with color previews.
by system
Create src/components/FiltersPanel.tsx with controls for date range, mood, tag, and search query.
by system
Create src/components/Legend.tsx explaining star color/size mapping and link meaning.
by system
Create src/components/EntryList.tsx rendering filtered entries grouped by date with compact rows.
by system
Create src/components/DetailsDrawer.tsx using a shadcn Drawer/Sheet to show an entry and actions.
by system
Add edit/delete handlers in DetailsDrawer.tsx calling entriesStore and opening EntryForm for edits.
by system
Create src/views/TimelineView.tsx combining FiltersPanel, EntryList, and DetailsDrawer.
by system
Create src/components/StarfieldCanvas.tsx that draws stars for entries on an HTML canvas with resize handling.
by system
Implement deterministic star positions and star radius/color mapping from entry date/mood/energy in StarfieldCanvas.tsx.
by system
Add hover/selection hit-testing and click-to-open DetailsDrawer behavior to StarfieldCanvas.tsx.
by system
Add click-to-link mode in StarfieldCanvas.tsx that creates/removes StarLink records and renders lines.
by system
Create src/views/SettingsView.tsx for theme selection and data export/import/reset controls.
by system