feat: add timer for breathing exercises

src/components/modals/breathing/exercise/exercise.module.css

@@ -10,6 +10,21 @@
   border: 1px solid var(--color-neutral-200);
   border-radius: 8px;
 
+  & .timer {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    padding: 4px 12px;
+    font-size: var(--font-xsm);
+    color: var(--color-foreground-subtle);
+    background: linear-gradient(
+      var(--color-neutral-100),
+      var(--color-neutral-50)
+    );
+    border: 1px solid var(--color-neutral-200);
+    border-radius: 4px;
+  }
+
   & .phase {
     font-family: var(--font-display);
     font-size: var(--font-lg);

src/components/modals/breathing/exercise/exercise.tsx

@@ -1,5 +1,8 @@
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import { motion } from 'framer-motion';
+
+import { padNumber } from '@/helpers/number';
+
 import styles from './exercise.module.css';
 
 type Exercise = 'Box Breathing' | 'Resonant Breathing' | '4-7-8 Breathing';
@@ -81,9 +84,21 @@ export function Exercise() {
     return () => clearInterval(interval);
   }, [currentPhase, durations, updatePhase]);
 
+  const [timer, setTimer] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => setTimer(prev => prev + 1), 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   return (
     <>
       <div className={styles.exercise}>
+        <div className={styles.timer}>
+          {padNumber(Math.floor(timer / 60))}:{padNumber(timer % 60)}
+        </div>
+
         <motion.div
           animate={currentPhase}
           className={styles.circle}