feat: remove the breathing exercises

src/components/menu/items/breathing-exercise.tsx

@@ -1,18 +0,0 @@
-import { IoMdFlower } from 'react-icons/io/index';
-
-import { Item } from '../item';
-
-interface BreathingExerciseProps {
-  open: () => void;
-}
-
-export function BreathingExercise({ open }: BreathingExerciseProps) {
-  return (
-    <Item
-      icon={<IoMdFlower />}
-      label="Breathing Exercise"
-      shortcut="Shift + B"
-      onClick={open}
-    />
-  );
-}

src/components/menu/items/index.ts

@@ -5,4 +5,3 @@ export { Source as SourceItem } from './source';
 export { Presets as PresetsItem } from './presets';
 export { Shortcuts as ShortcutsItem } from './shortcuts';
 export { SleepTimer as SleepTimerItem } from './sleep-timer';
-export { BreathingExercise as BreathingExerciseItem } from './breathing-exercise';

src/components/menu/menu.tsx

@@ -12,14 +12,12 @@ import {
   PresetsItem,
   ShortcutsItem,
   SleepTimerItem,
-  BreathingExerciseItem,
 } from './items';
 import { Divider } from './divider';
 import { ShareLinkModal } from '@/components/modals/share-link';
 import { PresetsModal } from '@/components/modals/presets';
 import { ShortcutsModal } from '@/components/modals/shortcuts';
 import { SleepTimerModal } from '@/components/modals/sleep-timer';
-import { BreathingExerciseModal } from '../modals/breathing';
 import { fade, mix, slideY } from '@/lib/motion';
 import { useSoundStore } from '@/stores/sound';
 
@@ -34,7 +32,6 @@ export function Menu() {
 
   const initial = useMemo(
     () => ({
-      breathing: false,
       presets: false,
       shareLink: false,
       shortcuts: false,
@@ -64,7 +61,6 @@ export function Menu() {
   useHotkeys('shift+m', () => setIsOpen(prev => !prev));
   useHotkeys('shift+p', () => open('presets'));
   useHotkeys('shift+h', () => open('shortcuts'));
-  useHotkeys('shift+b', () => open('breathing'));
   useHotkeys('shift+s', () => open('shareLink'), { enabled: !noSelected });
   useHotkeys('shift+t', () => open('sleepTimer'));
 
@@ -103,7 +99,6 @@ export function Menu() {
                     <ShareItem open={() => open('shareLink')} />
                     <ShuffleItem />
                     <SleepTimerItem open={() => open('sleepTimer')} />
-                    <BreathingExerciseItem open={() => open('breathing')} />
 
                     <Divider />
                     <ShortcutsItem open={() => open('shortcuts')} />
@@ -123,10 +118,6 @@ export function Menu() {
         show={modals.shareLink}
         onClose={() => close('shareLink')}
       />
-      <BreathingExerciseModal
-        show={modals.breathing}
-        onClose={() => close('breathing')}
-      />
       <ShortcutsModal
         show={modals.shortcuts}
         onClose={() => close('shortcuts')}

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

@@ -1 +0,0 @@
-/* WIP */

src/components/modals/breathing/breathing.tsx

@@ -1,18 +0,0 @@
-import { Modal } from '@/components/modal';
-import { Exercise } from './exercise';
-
-import styles from './breathing.module.css';
-
-interface TimerProps {
-  onClose: () => void;
-  show: boolean;
-}
-
-export function BreathingExerciseModal({ onClose, show }: TimerProps) {
-  return (
-    <Modal show={show} onClose={onClose}>
-      <h2 className={styles.title}>Breathing Exercise</h2>
-      <Exercise />
-    </Modal>
-  );
-}

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

@@ -1,91 +0,0 @@
-.exercise {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 75px 0;
-  margin-top: 12px;
-  background-color: var(--color-neutral-50);
-  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);
-    font-weight: 600;
-  }
-
-  & .circle {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    z-index: -1;
-    height: 55%;
-    aspect-ratio: 1 / 1;
-    background-image: radial-gradient(
-      var(--color-neutral-50),
-      var(--color-neutral-100)
-    );
-    border: 1px solid var(--color-neutral-200);
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-
-.selectWrapper {
-  position: relative;
-  width: 100%;
-  height: 45px;
-  padding: 0 12px;
-  margin-top: 8px;
-  background-color: var(--color-neutral-50);
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 8px;
-
-  &::before {
-    position: absolute;
-    top: -1px;
-    left: 50%;
-    width: 80%;
-    height: 1px;
-    content: '';
-    background: linear-gradient(
-      90deg,
-      transparent,
-      var(--color-neutral-300),
-      transparent
-    );
-    transform: translateX(-50%);
-  }
-
-  & .selectBox {
-    width: 100%;
-    min-width: 0;
-    height: 100%;
-    font-size: var(--font-sm);
-    color: var(--color-foreground);
-    background-color: transparent;
-    border: none;
-    outline: none;
-
-    & option {
-      color: var(--color-neutral-50);
-    }
-  }
-}

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

@@ -1,126 +0,0 @@
-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';
-type Phase = 'inhale' | 'exhale' | 'holdInhale' | 'holdExhale';
-
-const EXERCISE_PHASES: Record<Exercise, Phase[]> = {
-  '4-7-8 Breathing': ['inhale', 'holdInhale', 'exhale'],
-  'Box Breathing': ['inhale', 'holdInhale', 'exhale', 'holdExhale'],
-  'Resonant Breathing': ['inhale', 'exhale'],
-};
-
-const EXERCISE_DURATIONS: Record<Exercise, Partial<Record<Phase, number>>> = {
-  '4-7-8 Breathing': { exhale: 8, holdInhale: 7, inhale: 4 },
-  'Box Breathing': { exhale: 4, holdExhale: 4, holdInhale: 4, inhale: 4 },
-  'Resonant Breathing': { exhale: 5, inhale: 5 }, // No holdExhale
-};
-
-const PHASE_LABELS: Record<Phase, string> = {
-  exhale: 'Exhale',
-  holdExhale: 'Hold',
-  holdInhale: 'Hold',
-  inhale: 'Inhale',
-};
-
-export function Exercise() {
-  const [selectedExercise, setSelectedExercise] =
-    useState<Exercise>('4-7-8 Breathing');
-  const [phaseIndex, setPhaseIndex] = useState(0);
-
-  const phases = useMemo(
-    () => EXERCISE_PHASES[selectedExercise],
-    [selectedExercise],
-  );
-  const durations = useMemo(
-    () => EXERCISE_DURATIONS[selectedExercise],
-    [selectedExercise],
-  );
-
-  const currentPhase = phases[phaseIndex];
-
-  const animationVariants = useMemo(
-    () => ({
-      exhale: {
-        transform: 'translate(-50%, -50%) scale(1)',
-        transition: { duration: durations.exhale },
-      },
-      holdExhale: {
-        transform: 'translate(-50%, -50%) scale(1)',
-        transition: { duration: durations.holdExhale },
-      },
-      holdInhale: {
-        transform: 'translate(-50%, -50%) scale(1.5)',
-        transition: { duration: durations.holdInhale },
-      },
-      inhale: {
-        transform: 'translate(-50%, -50%) scale(1.5)',
-        transition: { duration: durations.inhale },
-      },
-    }),
-    [durations],
-  );
-
-  const resetExercise = useCallback(() => {
-    setPhaseIndex(0);
-  }, []);
-
-  const updatePhase = useCallback(() => {
-    setPhaseIndex(prevIndex => (prevIndex + 1) % phases.length);
-  }, [phases.length]);
-
-  useEffect(() => {
-    resetExercise();
-  }, [selectedExercise, resetExercise]);
-
-  useEffect(() => {
-    const intervalDuration = (durations[currentPhase] || 4) * 1000;
-    const interval = setInterval(updatePhase, intervalDuration);
-
-    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}
-          key={selectedExercise}
-          variants={animationVariants}
-        />
-        <p className={styles.phase}>{PHASE_LABELS[currentPhase]}</p>
-      </div>
-
-      <div className={styles.selectWrapper}>
-        <select
-          className={styles.selectBox}
-          value={selectedExercise}
-          onChange={e => setSelectedExercise(e.target.value as Exercise)}
-        >
-          {Object.keys(EXERCISE_PHASES).map(exercise => (
-            <option key={exercise} value={exercise}>
-              {exercise}
-            </option>
-          ))}
-        </select>
-      </div>
-    </>
-  );
-}

src/components/modals/breathing/exercise/index.ts

@@ -1 +0,0 @@
-export { Exercise } from './exercise';

src/components/modals/breathing/index.ts

@@ -1 +0,0 @@
-export { BreathingExerciseModal } from './breathing';