Signal Garden
A playful focus-and-mood tracker where each day you plant a “signal” (a quick check-in + one intention) that grows into a tiny generative flower icon based on your inputs. The app includes a 25/5 pomodoro with optional ambient noise, a daily grid calendar showing your garden history, and a simple tagging system (e.g., Work, Health, Social) with filters and streaks. Everything is client-side with localStorage, and the UI is split into clear components: Pomodoro panel, Check-in form, Garden calendar, Flower renderer, and Stats/Filters.
Run: npm create vite@latest . -- --template react-ts && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i class-variance-authority clsx tailwind-merge lucide-react && npx shadcn@latest init && npx shadcn@latest add button card input textarea label select badge tabs switch separator tooltip popover slider
by system
Configure src/index.css with Tailwind directives and basic CSS variables for shadcn/ui theme.
by system
Implement src/App.tsx with a responsive two-column layout for panels and main content using shadcn/ui Card.
by system
Create src/components/Header.tsx with app title, today’s date, and a compact nav/tabs placeholder.
by system
Create src/types.ts defining SignalEntry, Tag, PomodoroSettings, and derived stats types.
by system
Create src/lib/storage.ts with load/save helpers, versioning key, and safe JSON parsing.
by system
Create src/hooks/useSignals.ts to CRUD daily SignalEntry records synced to localStorage.
by system
Create src/hooks/useTags.ts to manage Tag list, defaults, and persistence in localStorage.
by system
Create src/lib/dates.ts for YYYY-MM-DD formatting, month grid generation, and streak calculations.
by system
Create src/lib/flower/seed.ts to deterministically map a SignalEntry into a numeric seed and trait inputs.
by system
Create src/components/FlowerIcon.tsx that renders a small generative SVG flower from seed/traits.
by system
Create src/components/FlowerLegendTooltip.tsx showing how mood/energy/intention affect the icon.
by system
Create src/components/CheckInForm.tsx with mood/energy sliders, intention text, and tag multi-select.
by system
Wire CheckInForm submit to useSignals to upsert today’s entry and reset relevant UI state.
by system
Create src/components/TodaySignalCard.tsx showing today’s saved check-in plus FlowerIcon and edit state.
by system
Create src/components/GardenCalendar.tsx rendering a month grid with one cell per day.
by system
Create src/components/DayCell.tsx to show date number, tiny FlowerIcon if exists, and selection styles.
by system
Create src/components/DayDetailsPopover.tsx to display a day’s entry details, tags, and intention.
by system
Add month prev/next controls to GardenCalendar using date helpers without changing selected day data.
by system
Create src/components/StatsPanel.tsx with sections for streaks, totals, and tag breakdown.
by system
Implement streak calculations (current/best) in src/lib/dates.ts and display in StatsPanel.
by system
Create src/components/TagFilters.tsx with selectable Tag chips and an “All” reset option.
by system
Apply TagFilters selection to GardenCalendar so only matching days show highlighted/visible flowers.
by system
Create src/components/TagManagerDialog.tsx to add/rename/delete tags using useTags.
by system
Create src/hooks/usePomodoro.ts implementing 25/5 cycles, start/pause/reset, and phase switching.
by system
Create src/components/PomodoroPanel.tsx showing timer, phase, and controls using shadcn/ui Button.
by system
Create src/components/PomodoroSettings.tsx for adjusting durations and toggles persisted in localStorage.
by system
Create src/components/AmbientNoise.tsx using HTMLAudioElement to play bundled loop(s) with volume slider.
by system
Update src/App.tsx to compose Header, CheckInForm/TodaySignalCard, PomodoroPanel, GardenCalendar, and Stats/Filters with shared state.
by system