Time Loop Pomodoro
A playful Pomodoro timer where each focus session becomes a “loop” you can name, tag, and replay, building a personal library of routines (e.g., Study Loop, Cleanup Loop). The app includes a minimalist timer, quick-start presets, and a loop timeline that visualizes streaks and total focus minutes per tag, all saved to localStorage. Split work easily across agents: timer + notifications, loop/preset editor, analytics timeline/charts, and settings/theme components.
Run: npm create vite@latest . -- --template react-ts && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i lucide-react class-variance-authority tailwind-merge clsx && npx shadcn@latest init
by system
Configure tailwind.config.ts and src/index.css with Tailwind directives and shadcn CSS variables.
by system
Implement src/App.tsx with header/nav shell and an outlet area for pages.
by system
Create src/router.tsx using a minimal hash-based router component to switch between pages.
by system
Add src/lib/types.ts for Loop, Preset, Session, TagStats, and Settings type definitions.
by system
Create src/lib/storage.ts with typed get/set helpers and versioned migration stub.
by system
Implement src/hooks/useLoopsStore.ts for CRUD on loops persisted to localStorage.
by system
Implement src/hooks/useSessionsStore.ts for recording completed focus sessions persisted to localStorage.
by system
Implement src/hooks/useSettingsStore.ts for theme, sound, notifications, and defaults persisted to localStorage.
by system
Create src/lib/defaultPresets.ts exporting a small set of quick-start Pomodoro presets.
by system
Implement src/hooks/useTimerEngine.ts providing start/pause/resume/reset, remaining time, and phase handling.
by system
Create src/pages/TimerPage.tsx with a minimalist timer display and primary controls wired to the timer hook.
by system
Create src/components/PresetsBar.tsx to quick-start a preset and optionally assign a loop.
by system
Create src/components/LoopSelect.tsx for choosing an existing loop or creating a new one inline.
by system
Create src/components/LoopCreateDialog.tsx with name and tags inputs and save via loops store.
by system
Create src/pages/LoopsPage.tsx listing loops with edit/delete actions and a create button.
by system
Create src/components/LoopForm.tsx for editing loop name, tags, and default durations.
by system
Create src/components/TagInput.tsx supporting add/remove tags with keyboard interactions.
by system
Wire TimerPage completion to create a Session entry with loopId, tag snapshot, minutes, and timestamp.
by system
Create src/components/NotificationsCard.tsx to request browser notification permission and show status.
by system
Add src/lib/notify.ts to trigger a Web Notification (or in-app fallback) when a phase completes.
by system
Create src/lib/sounds.ts using Web Audio to play simple start/end beeps based on settings.
by system
Create src/pages/TimelinePage.tsx with date range controls and a main visualization area.
by system
Add src/lib/analytics.ts to compute totals, streaks, and per-tag focus minutes from sessions.
by system
Create src/components/TagTotalsChart.tsx rendering a simple SVG bar chart of minutes per tag.
by system
Create src/components/LoopTimeline.tsx showing sessions over days with streak highlighting per loop.
by system
Create src/components/StatsCards.tsx to display total minutes, best streak, and top tag using analytics output.
by system
Create src/pages/SettingsPage.tsx with theme toggle, default durations, sound, and notifications controls.
by system
Implement src/lib/theme.ts to apply light/dark/system to document root and connect it to settings store.
by system