Beat Bento Timer
A playful Pomodoro-style timer that lets users build a “bento box” of focus blocks (e.g., 25/5, 15/3, 45/10) and run them as a sequence with sound-off visual beats and subtle animations. It includes quick presets, a simple session log with tags (study, writing, chores) stored in localStorage, and a stats view showing streaks and time spent per tag. The UI is split into clear components: Bento Builder (block editor), Timer Player (current step + controls), Session Log (history + tags), and Stats Dashboard (charts/cards).
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 recharts && npx shadcn@latest init -d
by system
Configure tailwind.config and src/index.css with Tailwind layers and CSS variables for shadcn/ui.
by system
Install shadcn/ui components needed (button, card, tabs, dialog, input, label, select, badge, separator, tooltip, dropdown-menu).
by system
Implement a single-page layout shell in App.tsx with header and two-column responsive main area.
by system
Create src/types.ts defining BentoBlock, BentoPlan, SessionEntry, Tag, and TimerState types.
by system
Create src/lib/storage.ts with safe JSON read/write helpers and versioned keys.
by system
Create src/state/useBentoPlan.ts to load/save the current bento plan to localStorage.
by system
Create src/state/useSessionLog.ts to append/read session entries from localStorage.
by system
Create src/lib/stats.ts to compute streaks and time-per-tag from session entries.
by system
Create src/lib/presets.ts exporting a few preset bento plans (25/5, 15/3, 45/10, etc.).
by system
Create src/components/bento/BentoBuilder.tsx rendering the builder card, header, and empty state.
by system
Create src/components/bento/BlockList.tsx to render the sequence of blocks with durations and labels.
by system
Create src/components/bento/BlockRow.tsx with inputs for focus/rest minutes and optional label.
by system
Wire add/remove block functionality in BentoBuilder using the plan store.
by system
Add simple up/down reorder buttons per block in BlockRow to change sequence order.
by system
Create src/components/bento/PresetPicker.tsx to apply preset plans into the builder.
by system
Create src/components/tags/TagSelect.tsx for choosing a session tag (study/writing/chores/custom).
by system
Create src/state/useTimerEngine.ts implementing tick, start/pause, step advance, and reset for a plan.
by system
Create src/components/timer/TimerPlayer.tsx showing current step, remaining time, and basic controls.
by system
Create src/components/timer/ProgressRing.tsx to visualize step progress with SVG.
by system
Add subtle beat/pulse animation in TimerPlayer driven by seconds tick without audio.
by system
Create src/components/timer/StepQueue.tsx to show upcoming blocks and highlight the current one.
by system
On plan completion, write a SessionEntry with tag, total focus time, and timestamp to the session log store.
by system
Create src/components/log/SessionLog.tsx to render session history entries with tag badges.
by system
Create src/components/log/LogFilters.tsx to filter session log by tag and time range (e.g., 7/30/all).
by system
Add a confirmation dialog in SessionLog to clear all stored session entries.
by system
Create src/components/stats/StatsDashboard.tsx with cards for streak and totals plus a chart area.
by system
Create src/components/stats/TimeByTagChart.tsx using recharts to display minutes spent per tag.
by system
Create src/components/stats/StreakCard.tsx showing current streak and best streak from computed stats.
by system
Add shadcn Tabs in App.tsx to switch between Builder/Timer/Log/Stats views without routing.
by system