Orbit Focus Board
A playful pomodoro-style focus app where tasks are “planets” you place into customizable “orbits” (Today, Soon, Later) and complete during timed sessions. Each session advances an animated orbit timeline, lets you log quick reflections (what worked/what didn’t), and awards simple badges for streaks and milestone completions. Everything runs client-side with localStorage, featuring a clean board view, a timer panel, and a lightweight stats dashboard built with shadcn/ui and Tailwind.
Add src/lib/types.ts defining TaskPlanet, OrbitId, SessionLog, Badge, and AppState types.
by system
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
by system
Configure tailwind.config and src/index.css with Tailwind directives and a simple global background.
by system
Create src/App.tsx with a header and 3-panel responsive layout (Board, Timer, Stats).
by system
Add src/lib/useLocalStorageState.ts for typed state persistence with versioning key.
by system
Add src/lib/initialState.ts with default orbits, example tasks, and empty logs/badges.
by system
Add src/state/AppStateContext.tsx providing AppState and actions via React context.
by system
Create src/state/reducer.ts implementing actions for CRUD tasks, move tasks, log sessions, and award badges.
by system
Add src/lib/orbits.ts exporting orbit metadata (Today/Soon/Later) and colors.
by system
Add shadcn/ui components used by the app (button, card, dialog, input, textarea, tabs, badge, progress, dropdown-menu).
by system
Create src/features/board/BoardPanel.tsx rendering orbit columns using shadcn Card.
by system
Add src/features/board/OrbitColumn.tsx to render one orbit header, count, and task list.
by system
Add src/features/board/PlanetCard.tsx to display a task as a styled “planet” with status and actions.
by system
Create src/features/board/AddTaskDialog.tsx to add a new task with title, notes, and orbit selection.
by system
Create src/features/board/EditTaskDialog.tsx to update title/notes/orbit and delete task.
by system
Add src/features/board/MoveOrbitMenu.tsx to move a task between orbits via dropdown.
by system
Wire PlanetCard complete button to mark task completed and store completion timestamp.
by system
Create src/features/timer/OrbitTimeline.tsx showing session progress as an animated ring/progress track.
by system
Create src/features/timer/TimerPanel.tsx with current task selection, controls, and progress.
by system
Add src/features/timer/usePomodoroTimer.ts handling start/pause/reset and tick progression.
by system
Create src/features/timer/SessionSettings.tsx for focus/break durations and auto-start toggles (stored in state).
by system
Add src/features/timer/TaskPicker.tsx to choose an active “planet” from Today/Soon.
by system
Implement end-of-session logic to log a session entry and optionally mark the active task completed.
by system
Create src/features/timer/ReflectionDialog.tsx prompting “what worked/what didn’t” after a focus session.
by system
Add src/features/badges/awardBadges.ts computing streak and milestone badges from state.
by system
Create src/features/badges/BadgeStrip.tsx to show earned badges with icons and tooltips.
by system
Create src/features/stats/StatsPanel.tsx with tabs for Overview, Sessions, and Badges.
by system
Add src/features/stats/OverviewCards.tsx showing totals (focus minutes, sessions, tasks completed, current streak).
by system
Create src/features/stats/SessionLogList.tsx rendering recent sessions and reflections.
by system
Add loading/empty states, small accessibility fixes, and consistent spacing across panels.
by system