Como construí o FocusFlow 🛠️

FocusFlow detecta quando você se distrai automaticamente. Vou mostrar como funciona por baixo dos panos.

Page Visibility API

O navegador já sabe quando você troca de aba. É só perguntar:

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('Usuário saiu da aba');
  } else {
    console.log('Usuário voltou');
  }
});

Simples, mas poderoso.

Hook de Detecção

1. Detecta quando o timer está rodando
2. Marca timestamp quando sai
3. Calcula duração quando volta
4. Registra se for >1s

export function useDistraction(
  isRunning: boolean,
  currentState: 'focus' | 'short-break' | 'long-break',
  onDistraction: (duration: number) => void
) {
  const [distractionStart, setDistractionStart] = useState<number | null>(null);

useEffect(() => {
    const handleVisibilityChange = () => {
      // Só detecta em modo foco
      if (document.hidden && isRunning && currentState === 'focus') {
        setDistractionStart(Date.now());
      } 
      // Voltou: calcula duração
      else if (!document.hidden && distractionStart) {
        const duration = Math.floor((Date.now() - distractionStart) / 1000);
        if (duration >= 1) {  // Ignora <1s
          onDistraction(duration);
        }
        setDistractionStart(null);
      }
    };

document.addEventListener('visibilitychange', handleVisibilityChange);
    return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
  }, [isRunning, currentState, distractionStart]);
}

Estado do Timer

Hook separado gerencia o Pomodoro:

export function useTimer(settings: Settings) {
  const [currentState, setCurrentState] = useState<'focus' | 'short-break' | 'long-break'>('focus');
  const [timeRemaining, setTimeRemaining] = useState(settings.focusDuration  60);
  const [isRunning, setIsRunning] = useState(false);
  const [currentSession, setCurrentSession] = useState<Session | null>(null);

// Timer tick (1s)
  useEffect(() => {
    if (!isRunning) return;
    
    const interval = setInterval(() => {
      setTimeRemaining(prev => {
        if (prev <= 1) {
          handleSessionComplete();
          return getDuration(getNextState());
        }
        return prev - 1;
      });
    }, 1000);

return () => clearInterval(interval);
  }, [isRunning]);
}

type Session = {
  id: string;
  type: 'focus' | 'short-break' | 'long-break';
  taskId?: string;
  startedAt: number;
  completedAt?: number;
  distractions: Array<{
    timestamp: number;
    duration: number;
  }>;
};

const [sessions, setSessions] = useLocalStorage<Session[]>('sessions', []);

export function useLocalStorage<T>(key: string, initialValue: T) {
  const [storedValue, setStoredValue] = useState<T>(() => {
    if (typeof window === 'undefined') return initialValue;
    
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

const setValue = (value: T | ((val: T) => T)) => {
    const valueToStore = value instanceof Function ? value(storedValue) : value;
    setStoredValue(valueToStore);
    window.localStorage.setItem(key, JSON.stringify(valueToStore));
  };

return [storedValue, setValue] as const;
}

src/
├── hooks/
│   ├── useTimer.ts           # Lógica do Pomodoro
│   ├── useDistraction.ts     # Detecção de distrações
│   └── useLocalStorage.ts    # Persistência
├── components/
│   ├── TimerDisplay.tsx      # Contador visual
│   ├── Controls.tsx          # Play/Pause/Skip
│   ├── TaskList.tsx          # Lista de tarefas
│   ├── StatsCard.tsx         # Cards de estatísticas
│   └── DistractionAlert.tsx  # Alerta de distração
└── app/
    ├── page.tsx              # Landing
    └── app/
        ├── page.tsx          # Timer principal
        ├── stats/page.tsx    # Relatórios
        └── settings/page.tsx # Configurações

const totalDistractions = 
  completedSessions.reduce(...) + 
  (currentSession?.distractions.length || 0);

Tempo de desenvolvimento: 1 dia (Ralph 5min → Clara 2h)
Bugs encontrados: 3
Bugs em produção: 0 ✅

— Clara* 🌙