Constellation Journal
A mood-and-habit journal that turns your daily check-ins into a growing star map: each day becomes a “star” colored by mood, sized by energy, and tagged with a short note. Browse by month in a calendar view or explore the constellation canvas where lines connect consecutive days and filters highlight patterns (e.g., all “anxious” days or days you completed a habit). Everything runs client-side with localStorage, using a clean component split between Check-in Form, Calendar, Constellation Canvas, Filters/Legend, and Insights (simple streaks and mood distribution).
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
Configure Tailwind in src/index.css and tailwind.config.ts (content paths + base/components/utilities).
by system
Create src/App.tsx with a responsive layout (header + main + sidebar area) using Tailwind.
by system
Add src/types/journal.ts defining Mood, Habit, CheckInEntry, and derived view models.
by system
Add src/lib/storage.ts with CRUD helpers to load/save entries and habits from localStorage.
by system
Add src/lib/dates.ts for yyyy-mm-dd keys, month ranges, and consecutive-day helpers.
by system
Add src/lib/colors.ts mapping moods to Tailwind colors and canvas-safe hex values.
by system
Add src/lib/seed.ts to optionally populate localStorage with a small sample dataset.
by system
Create src/state/JournalProvider.tsx exposing entries/habits state, actions, and persistence.
by system
Add src/state/hooks.ts with typed hooks/selectors for month entries, streaks, and filters.
by system
Create src/components/ViewTabs.tsx to switch between Calendar and Constellation views.
by system
Create src/components/CheckInForm.tsx with shadcn/ui controls for mood, energy, note, and habits.
by system
Add simple client-side validation in CheckInForm.tsx (required mood, energy range, note length).
by system
Wire CheckInForm.tsx to JournalProvider to upsert today’s entry and persist it.
by system
Create src/components/HabitToggles.tsx rendering checkboxes for configured habits.
by system
Create src/components/HabitEditorDialog.tsx to add/remove/rename habits via JournalProvider.
by system
Create src/components/calendar/MonthHeader.tsx with month navigation and “jump to today”.
by system
Create src/components/calendar/CalendarGrid.tsx rendering the month days grid with placeholders.
by system
Create src/components/calendar/DayCell.tsx showing star color/size preview and a note tooltip.
by system
Create src/views/CalendarView.tsx composing MonthHeader + CalendarGrid using provider data.
by system
Create src/components/constellation/ConstellationCanvas.tsx with a responsive <canvas> and draw loop.
by system
Implement rendering in ConstellationCanvas.tsx for entries as circles and lines for consecutive days.
by system
Add hover hit-testing in ConstellationCanvas.tsx to show a tooltip with date/mood/energy/note.
by system
Add mouse/touch pan and wheel/pinch zoom behavior to ConstellationCanvas.tsx.
by system
Add src/state/filters.ts defining filter state (moods, habit, date range) and reducers.
by system
Create src/components/FiltersPanel.tsx with mood multi-select and habit filter controls.
by system
Create src/components/Legend.tsx explaining mood colors and energy-to-size mapping.
by system
Add src/lib/insights.ts computing streaks, mood distribution, and habit completion counts.
by system
Create src/components/InsightsPanel.tsx displaying streaks and mood distribution using provider data.
by system
Update src/App.tsx to compose CheckInForm, ViewTabs, Filters/Legend, Calendar/Canvas view, and Insights.
by system