How vsprabhu369/blink-20 works
This is a client-side work/rest interval timer with scheduling, session summaries and history, configurable audio/voice/vibration cues, themes, and PWA installation support. The main workflow is user interaction with the App, which owns timer state and coordinates the timer display, interval controls, session summary, and history. Settings panels expose configuration for scheduling, themes, and alerts. Edges are limited to relationships shown by the source index or excerpts; several App internals and unsampled panel interactions are not mapped in detail.
Main entry points: App.tsx App coordinator · themes.ts Theme definitions · formatTime.ts Time formatting · TimerRing.tsx Timer display
Components 14
Timer experience
- App coordinator
src/App.tsx - Timer display
src/components/TimerRing.tsx - Interval controls
src/components/IntervalCustomizer.tsx - Session history
src/components/HistoryPanel.tsx - Session summary
src/components/SessionSummaryModal.tsx
Configuration
- Schedule and theme
src/components/ScheduleThemePanel.tsx - Audio and voice settings
src/components/AudioVoicePanel.tsx - Install control
src/components/PWAInstallButton.tsx - Install state
src/hooks/usePWAInstall.ts
Session and alerts
- Sound and speech engine
src/audio/soundEngine.ts
Shared logic
- Theme definitions
src/themes.ts - Time formatting
src/utils/formatTime.ts - Timer data types
src/types.ts
Other components
- Timer user
Connections 24
- Timer user → App coordinator: controls
- App coordinator → Timer display: renders
src/App.tsx - App coordinator → Interval controls: renders
src/App.tsx - App coordinator → Session history: renders
src/App.tsx - App coordinator → Session summary: renders
src/App.tsx - App coordinator → Schedule and theme: renders
src/App.tsx - App coordinator → Audio and voice settings: renders
src/App.tsx - App coordinator → Install control: renders
src/App.tsx - Install control → Install state: uses install state
src/components/PWAInstallButton.tsx - Audio and voice settings → Sound and speech engine: tests cues
src/components/AudioVoicePanel.tsx - App coordinator → Time formatting: parses schedule time
src/App.tsx - Timer display → Time formatting: formats countdown
src/components/TimerRing.tsx - Interval controls → Time formatting: formats intervals
src/components/IntervalCustomizer.tsx - Session history → Time formatting: formats session times
src/components/HistoryPanel.tsx - Session summary → Time formatting: formats summary
src/components/SessionSummaryModal.tsx - App coordinator → Theme definitions: uses themes
src/App.tsx - Timer display → Theme definitions: uses theme styles
src/components/TimerRing.tsx - Interval controls → Theme definitions: uses theme styles
src/components/IntervalCustomizer.tsx - Session history → Theme definitions: uses theme styles
src/components/HistoryPanel.tsx - Session summary → Theme definitions: uses theme styles
src/components/SessionSummaryModal.tsx - Schedule and theme → Theme definitions: selects themes
src/components/ScheduleThemePanel.tsx - Audio and voice settings → Theme definitions: uses theme styles
src/components/AudioVoicePanel.tsx - App coordinator → Timer data types: uses settings types
src/App.tsx - Sound and speech engine → Timer data types: uses cue identifiers
src/audio/soundEngine.ts