Orbit Mood Map
A playful mood journal that visualizes each day as a “planet” you place into one of several emotional orbits (e.g., Calm, Focused, Anxious, Energized), with quick tags and a one-line note. The main screen is an interactive solar-system-style map where you can drag planets between orbits, click a planet to edit details, and filter by tag or date range. Everything runs locally (localStorage), with a simple stats view showing streaks, most-used tags, and a monthly mini-calendar synced to the orbit visualization.
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 && npx shadcn@latest add button dialog dropdown-menu input label textarea select separator badge card tabs calendar popover slider tooltip
by system
Configure tailwind.config.ts and src/index.css with shadcn/ui presets and Tailwind directives.
by system
Build src/App.tsx with header, main content area, and nav between Map and Stats views.
by system
Create src/lib/types.ts defining MoodEntry, OrbitType, Tag, and app state types.
by system
Create src/lib/orbits.ts exporting orbit list, labels, and colors.
by system
Create src/lib/storage.ts with load/save helpers and schema versioning.
by system
Create src/hooks/useEntries.ts to manage CRUD with localStorage syncing.
by system
Create src/hooks/useFilters.ts to manage selected tags and date range.
by system
Create src/lib/dates.ts with helpers for today, ranges, and month boundaries.
by system
Create src/lib/tags.ts for normalizing, sorting, and counting tags.
by system
Create src/pages/MapPage.tsx with toolbar area and orbit map container.
by system
Create src/pages/StatsPage.tsx with sections for streaks, tags, and calendar.
by system
Create src/components/orbits/OrbitRing.tsx to render one labeled orbit band.
by system
Create src/components/orbits/OrbitMap.tsx composing all orbit rings and entry planets.
by system
Create src/components/planets/Planet.tsx to render a draggable/clickable planet dot with tooltip.
by system
Create src/lib/positioning.ts to compute stable planet positions within each orbit.
by system
Implement pointer-based drag handling in OrbitMap to move planets between orbits.
by system
Add hit-testing in OrbitMap to determine which orbit ring a dragged planet is over.
by system
Create src/components/entries/EntryDialog.tsx (shadcn Dialog) for editing orbit, tags, and note.
by system
Wire planet click to open EntryDialog and persist edits via useEntries.
by system
Create src/components/entries/NewEntryButton.tsx to open EntryDialog prefilled for today.
by system
Create src/components/tags/TagsInput.tsx for adding/removing quick tags with suggestions.
by system
Create src/components/filters/FilterBar.tsx with tag multi-select and date-range picker.
by system
Filter visible planets in MapPage based on useFilters selections.
by system
Add a clear/reset control to FilterBar that resets tag and date filters.
by system
Create src/lib/stats.ts computing current/longest streak and totals from entries.
by system
Create src/components/stats/TopTags.tsx showing most-used tags with counts.
by system
Create src/components/stats/StreaksCard.tsx showing current and longest streak.
by system
Create src/components/stats/MonthlyCalendar.tsx using shadcn Calendar to highlight days by orbit.
by system
Wire MonthlyCalendar selection to MapPage filters so picking dates focuses the orbit visualization.
by system