fix: change audio volume

.stylelintrc.json

@@ -8,7 +8,8 @@
 
   "rules": {
     "import-notation": "string",
-    "selector-class-pattern": null
+    "selector-class-pattern": null,
+    "no-descending-specificity": null
   },
 
   "overrides": [

package-lock.json

@@ -21,6 +21,7 @@
         "focus-trap-react": "10.2.3",
         "framer-motion": "10.16.4",
         "howler": "2.2.4",
+        "js-confetti": "0.12.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hotkeys-hook": "3.2.1",
@@ -18316,6 +18317,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/js-confetti": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/js-confetti/-/js-confetti-0.12.0.tgz",
+      "integrity": "sha512-1R0Akxn3Zn82pMqW65N1V2NwKkZJ75bvBN/VAb36Ya0YHwbaSiAJZVRr/19HBxH/O8x2x01UFAbYI18VqlDN6g=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

package.json

@@ -37,6 +37,7 @@
     "focus-trap-react": "10.2.3",
     "framer-motion": "10.16.4",
     "howler": "2.2.4",
+    "js-confetti": "0.12.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hotkeys-hook": "3.2.1",

src/components/app/app.tsx

@@ -12,6 +12,7 @@ import { Categories } from '@/components/categories';
 import { SharedModal } from '@/components/modals/shared';
 import { Toolbar } from '@/components/toolbar';
 import { SnackbarProvider } from '@/contexts/snackbar';
+import { SoundProvider } from '@/contexts/sound';
 
 import { sounds } from '@/data/sounds';
 import { FADE_OUT } from '@/constants/events';
@@ -86,17 +87,19 @@ export function App() {
   }, [favoriteSounds, categories]);
 
   return (
-    <SnackbarProvider>
-      <StoreConsumer>
-        <Container>
-          <div id="app" />
-          <Buttons />
-          <Categories categories={allCategories} />
-        </Container>
+    <SoundProvider>
+      <SnackbarProvider>
+        <StoreConsumer>
+          <Container>
+            <div id="app" />
+            <Buttons />
+            <Categories categories={allCategories} />
+          </Container>
 
-        <Toolbar />
-        <SharedModal />
-      </StoreConsumer>
-    </SnackbarProvider>
+          <Toolbar />
+          <SharedModal />
+        </StoreConsumer>
+      </SnackbarProvider>
+    </SoundProvider>
   );
 }

src/components/categories/categories.tsx

@@ -1,6 +1,6 @@
 import { AnimatePresence } from 'framer-motion';
 
-import { Category } from '@/components/category';
+import { Category } from './category';
 import { Donate } from './donate';
 
 import type { Categories } from '@/data/types';

src/components/modals/shortcuts/shortcuts.tsx

@@ -25,10 +25,6 @@ export function ShortcutsModal({ onClose, show }: ShortcutsModalProps) {
       keys: ['Shift', 'T'],
       label: 'Sleep Timer',
     },
-    {
-      keys: ['Shift', 'B'],
-      label: 'Breathing Exercise',
-    },
     {
       keys: ['Shift', 'Space'],
       label: 'Toggle Play',

src/components/modals/sleep-timer/sleep-timer.module.css

@@ -1,5 +1,5 @@
 .header {
-  margin-bottom: 16px;
+  margin-bottom: 28px;
 
   & .title {
     margin-bottom: 8px;
@@ -28,6 +28,7 @@
       & .label {
         display: block;
         margin-bottom: 4px;
+        font-size: var(--font-sm);
         font-weight: 500;
       }
 

src/components/modals/sleep-timer/sleep-timer.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, useRef, useMemo } from 'react';
 
 import { Modal } from '@/components/modal';
-import { Timer } from '@/components/timer';
+import { Timer } from './timer';
 import { dispatch } from '@/lib/event';
 import { useSoundStore } from '@/stores/sound';
 import { cn } from '@/helpers/styles';
@@ -17,6 +17,7 @@ interface SleepTimerModalProps {
 
 export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
   const setActive = useSleepTimerStore(state => state.set);
+  const noSelected = useSoundStore(state => state.noSelected());
 
   const [running, setRunning] = useState(false);
 
@@ -47,6 +48,7 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
 
   const handleStart = () => {
     if (timerId.current) clearInterval(timerId.current);
+    if (noSelected) return;
     if (!isPlaying) play();
 
     if (totalSeconds > 0) {
@@ -63,7 +65,7 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
   useEffect(() => {
     if (timeLeft === 0) {
       setRunning(false);
-      // pause();
+
       dispatch(FADE_OUT, { duration: 1000 });
 
       setTimeSpent(0);
@@ -107,7 +109,7 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
             )}
           </div>
 
-          {running ? <Timer displayHours={true} timer={timeLeft} /> : null}
+          {running ? <Timer reverse={timeSpent} timer={timeLeft} /> : null}
 
           <div className={styles.buttons}>
             {running && (

src/components/modals/sleep-timer/timer/reverse/index.ts

@@ -0,0 +1 @@
+export { Reverse } from './reverse';

src/components/modals/sleep-timer/timer/reverse/reverse.module.css

@@ -0,0 +1,30 @@
+.reverse {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  padding: 4px 8px;
+  font-size: var(--font-2xsm);
+  color: var(--color-foreground-subtle);
+  background: linear-gradient(
+    var(--color-neutral-50),
+    var(--color-neutral-100)
+  );
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 4px;
+
+  &::after {
+    position: absolute;
+    bottom: -1px;
+    left: 50%;
+    width: 75%;
+    height: 1px;
+    content: '';
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--color-neutral-300),
+      transparent
+    );
+    transform: translateX(-50%);
+  }
+}

src/components/modals/sleep-timer/timer/reverse/reverse.tsx

@@ -0,0 +1,27 @@
+import { padNumber } from '@/helpers/number';
+
+import styles from './reverse.module.css';
+
+interface ReverseProps {
+  time: number;
+}
+
+export function Reverse({ time }: ReverseProps) {
+  let hours = Math.floor(time / 3600);
+  let minutes = Math.floor((time % 3600) / 60);
+  let seconds = time % 60;
+
+  hours = isNaN(hours) ? 0 : hours;
+  minutes = isNaN(minutes) ? 0 : minutes;
+  seconds = isNaN(seconds) ? 0 : seconds;
+
+  const formattedHours = padNumber(hours);
+  const formattedMinutes = padNumber(minutes);
+  const formattedSeconds = padNumber(seconds);
+
+  return (
+    <div className={styles.reverse}>
+      - {formattedHours}:{formattedMinutes}:{formattedSeconds}
+    </div>
+  );
+}

src/components/modals/sleep-timer/timer/timer.module.css

@@ -0,0 +1,29 @@
+.timer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 48px 0;
+  font-size: var(--font-xlg);
+  font-weight: 500;
+  background-color: var(--color-neutral-50);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 12px;
+
+  &::after {
+    position: absolute;
+    bottom: -1px;
+    left: 50%;
+    width: 75%;
+    height: 1px;
+    content: '';
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--color-neutral-400),
+      transparent
+    );
+    transform: translateX(-50%);
+  }
+}

src/components/modals/sleep-timer/timer/timer.tsx

@@ -1,15 +1,15 @@
+import { Reverse } from './reverse';
+
 import { padNumber } from '@/helpers/number';
-import { cn } from '@/helpers/styles';
 
 import styles from './timer.module.css';
 
 interface TimerProps {
-  displayHours?: boolean;
-  tall?: boolean;
+  reverse: number;
   timer: number;
 }
 
-export function Timer({ displayHours = false, tall, timer }: TimerProps) {
+export function Timer({ reverse, timer }: TimerProps) {
   let hours = Math.floor(timer / 3600);
   let minutes = Math.floor((timer % 3600) / 60);
   let seconds = timer % 60;
@@ -23,16 +23,9 @@ export function Timer({ displayHours = false, tall, timer }: TimerProps) {
   const formattedSeconds = padNumber(seconds);
 
   return (
-    <div className={cn(styles.timer, tall && styles.tall)}>
-      {displayHours ? (
-        <>
-          {formattedHours}:{formattedMinutes}:{formattedSeconds}
-        </>
-      ) : (
-        <>
-          {formattedMinutes}:{formattedSeconds}
-        </>
-      )}
+    <div className={styles.timer}>
+      <Reverse time={reverse} />
+      {formattedHours}:{formattedMinutes}:{formattedSeconds}
     </div>
   );
 }

src/components/sounds/sounds.tsx

@@ -1,7 +1,7 @@
 import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 
-import { Sound } from '@/components/sound';
+import { Sound } from './sound';
 import { useLocalStorage } from '@/hooks/use-local-storage';
 import { cn } from '@/helpers/styles';
 import { fade, scale, mix } from '@/lib/motion';

src/components/store-consumer/store-consumer.tsx

@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 import { useSoundStore } from '@/stores/sound';
 import { useNoteStore } from '@/stores/note';
 import { usePresetStore } from '@/stores/preset';
+import { useTodoStore } from '@/stores/todo';
 
 interface StoreConsumerProps {
   children: React.ReactNode;
@@ -13,6 +14,7 @@ export function StoreConsumer({ children }: StoreConsumerProps) {
     useSoundStore.persist.rehydrate();
     useNoteStore.persist.rehydrate();
     usePresetStore.persist.rehydrate();
+    useTodoStore.persist.rehydrate();
   }, []);
 
   return <>{children}</>;

src/components/timer/timer.module.css

@@ -1,16 +0,0 @@
-.timer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding: 30px 0;
-  font-size: var(--font-xlg);
-  font-weight: 500;
-  background-color: var(--color-neutral-50);
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 8px;
-
-  &.tall {
-    padding: 60px 0;
-  }
-}

src/components/toolbar/menu/items/countdown.tsx

@@ -0,0 +1,18 @@
+import { MdOutlineTimer } from 'react-icons/md/index';
+
+import { Item } from '../item';
+
+interface CountdownProps {
+  open: () => void;
+}
+
+export function Countdown({ open }: CountdownProps) {
+  return (
+    <Item
+      icon={<MdOutlineTimer />}
+      label="Countdown Timer"
+      shortcut="Shift + C"
+      onClick={open}
+    />
+  );
+}

src/components/toolbar/menu/items/index.ts

@@ -6,3 +6,7 @@ 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';
+export { Pomodoro as PomodoroItem } from './pomodoro';
+export { Notepad as NotepadItem } from './notepad';
+export { Todo as TodoItem } from './todo';
+export { Countdown as CountdownItem } from './countdown';

src/components/toolbar/menu/items/notepad.tsx

@@ -0,0 +1,23 @@
+import { MdNotes } from 'react-icons/md/index';
+
+import { Item } from '../item';
+
+import { useNoteStore } from '@/stores/note';
+
+interface NotepadProps {
+  open: () => void;
+}
+
+export function Notepad({ open }: NotepadProps) {
+  const note = useNoteStore(state => state.note);
+
+  return (
+    <Item
+      active={!!note.length}
+      icon={<MdNotes />}
+      label="Notepad"
+      shortcut="Shift + N"
+      onClick={open}
+    />
+  );
+}

src/components/toolbar/menu/items/pomodoro.tsx

@@ -0,0 +1,23 @@
+import { MdOutlineAvTimer } from 'react-icons/md/index';
+
+import { Item } from '../item';
+
+import { usePomodoroStore } from '@/stores/pomodoro';
+
+interface PomodoroProps {
+  open: () => void;
+}
+
+export function Pomodoro({ open }: PomodoroProps) {
+  const running = usePomodoroStore(state => state.running);
+
+  return (
+    <Item
+      active={running}
+      icon={<MdOutlineAvTimer />}
+      label="Pomodoro"
+      shortcut="Shift + P"
+      onClick={open}
+    />
+  );
+}

src/components/toolbar/menu/items/todo.tsx

@@ -0,0 +1,18 @@
+import { MdTaskAlt } from 'react-icons/md/index';
+
+import { Item } from '../item';
+
+interface TodoProps {
+  open: () => void;
+}
+
+export function Todo({ open }: TodoProps) {
+  return (
+    <Item
+      icon={<MdTaskAlt />}
+      label="Todo Checklist"
+      shortcut="Shift + T"
+      onClick={open}
+    />
+  );
+}

src/components/toolbar/menu/menu.tsx

@@ -13,13 +13,18 @@ import {
   ShortcutsItem,
   SleepTimerItem,
   BreathingExerciseItem,
+  PomodoroItem,
+  NotepadItem,
+  TodoItem,
+  CountdownItem,
 } 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 { BreathingExerciseModal } from '@/components/modals/breathing';
+import { Pomodoro, Notepad, Todo, Countdown } from '@/components/toolbox';
 import { fade, mix, slideY } from '@/lib/motion';
 import { useSoundStore } from '@/stores/sound';
 
@@ -35,10 +40,14 @@ export function Menu() {
   const initial = useMemo(
     () => ({
       breathing: false,
+      countdown: false,
+      notepad: false,
+      pomodoro: false,
       presets: false,
       shareLink: false,
       shortcuts: false,
       sleepTimer: false,
+      todo: false,
     }),
     [],
   );
@@ -62,11 +71,15 @@ export function Menu() {
   );
 
   useHotkeys('shift+m', () => setIsOpen(prev => !prev));
-  useHotkeys('shift+p', () => open('presets'));
+  useHotkeys('shift+alt+p', () => open('presets'));
   useHotkeys('shift+h', () => open('shortcuts'));
   useHotkeys('shift+b', () => open('breathing'));
+  useHotkeys('shift+n', () => open('notepad'));
+  useHotkeys('shift+p', () => open('pomodoro'));
+  useHotkeys('shift+t', () => open('todo'));
+  useHotkeys('shift+c', () => open('countdown'));
   useHotkeys('shift+s', () => open('shareLink'), { enabled: !noSelected });
-  useHotkeys('shift+t', () => open('sleepTimer'));
+  useHotkeys('shift+alt+t', () => open('sleepTimer'));
 
   useCloseListener(closeAll);
 
@@ -103,6 +116,12 @@ export function Menu() {
                     <ShareItem open={() => open('shareLink')} />
                     <ShuffleItem />
                     <SleepTimerItem open={() => open('sleepTimer')} />
+
+                    <Divider />
+                    <CountdownItem open={() => open('countdown')} />
+                    <PomodoroItem open={() => open('pomodoro')} />
+                    <NotepadItem open={() => open('notepad')} />
+                    <TodoItem open={() => open('todo')} />
                     <BreathingExerciseItem open={() => open('breathing')} />
 
                     <Divider />
@@ -131,6 +150,14 @@ export function Menu() {
         show={modals.shortcuts}
         onClose={() => close('shortcuts')}
       />
+      <Pomodoro
+        open={() => open('pomodoro')}
+        show={modals.pomodoro}
+        onClose={() => close('pomodoro')}
+      />
+      <Notepad show={modals.notepad} onClose={() => close('notepad')} />
+      <Todo show={modals.todo} onClose={() => close('todo')} />
+      <Countdown show={modals.countdown} onClose={() => close('countdown')} />
       <PresetsModal show={modals.presets} onClose={() => close('presets')} />
       <SleepTimerModal
         show={modals.sleepTimer}

src/components/toolbar/toolbar.tsx

@@ -1,6 +1,6 @@
 import { Container } from '@/components/container';
-import { Menu } from '@/components/menu';
-import { ScrollToTop } from '@/components/scroll-to-top';
+import { Menu } from './menu';
+import { ScrollToTop } from './scroll-to-top';
 
 import styles from './toolbar.module.css';
 

src/components/toolbox/countdown/countdown.module.css

@@ -0,0 +1,128 @@
+.header {
+  margin-bottom: 16px;
+
+  & .title {
+    margin-bottom: 8px;
+    font-family: var(--font-heading);
+    font-size: var(--font-md);
+    font-weight: 600;
+  }
+
+  & .desc {
+    color: var(--color-foreground-subtle);
+  }
+}
+
+.formContainer {
+  & .inputContainer {
+    display: flex;
+    column-gap: 8px;
+    align-items: center;
+
+    & .input {
+      display: block;
+      flex-grow: 1;
+      min-width: 0;
+      height: 45px;
+      padding: 0 8px;
+      color: var(--color-foreground);
+      background-color: var(--color-neutral-50);
+      border: 1px solid var(--color-neutral-200);
+      border-radius: 8px;
+    }
+
+    & span {
+      display: block;
+    }
+  }
+}
+
+.displayTime {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 150px;
+  background-color: var(--color-neutral-50);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 8px;
+
+  &::before {
+    position: absolute;
+    bottom: -1px;
+    left: 50%;
+    width: 80%;
+    height: 1px;
+    content: '';
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--color-neutral-300),
+      transparent
+    );
+    transform: translateX(-50%);
+  }
+
+  & span {
+    font-size: var(--font-xlg);
+    font-weight: 600;
+  }
+
+  & .reverse {
+    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;
+  }
+}
+
+.buttonContainer {
+  display: flex;
+  column-gap: 8px;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: 12px;
+
+  & .button {
+    padding: 12px 16px;
+    font-family: var(--font-heading);
+    font-size: var(--font-sm);
+    font-weight: 600;
+    color: var(--color-foreground-subtle);
+    cursor: pointer;
+    background-color: var(--color-neutral-200);
+    border: none;
+    border-radius: 4px;
+    outline: none;
+    transition: 0.2s;
+
+    &:focus-visible {
+      outline: 2px solid var(--color-neutral-400);
+      outline-offset: 2px;
+    }
+
+    &:hover,
+    &:focus-visible {
+      color: var(--color-foreground);
+      background-color: var(--color-neutral-300);
+    }
+
+    &.primary {
+      color: var(--color-neutral-200);
+      background-color: var(--color-neutral-950);
+
+      &:hover,
+      &:focus-visible {
+        background-color: var(--color-neutral-800);
+      }
+    }
+  }
+}

src/components/toolbox/countdown/countdown.tsx

@@ -0,0 +1,148 @@
+import { useState, useEffect, useCallback } from 'react';
+
+import { Modal } from '@/components/modal';
+
+import { useSoundEffect } from '@/hooks/use-sound-effect';
+import { cn } from '@/helpers/styles';
+import { padNumber } from '@/helpers/number';
+
+import styles from './countdown.module.css';
+
+interface CountdownProps {
+  onClose: () => void;
+  show: boolean;
+}
+
+export function Countdown({ onClose, show }: CountdownProps) {
+  const [hours, setHours] = useState(0);
+  const [minutes, setMinutes] = useState(0);
+  const [seconds, setSeconds] = useState(0);
+  const [timeLeft, setTimeLeft] = useState(0);
+  const [initialTime, setInitialTime] = useState(0);
+  const [isActive, setIsActive] = useState(false);
+  const [isFormVisible, setIsFormVisible] = useState(true);
+
+  const alarm = useSoundEffect('/sounds/alarm.mp3');
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+
+    if (isActive && timeLeft > 0) {
+      timer = setTimeout(() => setTimeLeft(timeLeft - 1), 1000);
+    } else if (timeLeft === 0 && isActive) {
+      alarm.play();
+      setIsActive(false);
+      setIsFormVisible(true);
+    }
+
+    return () => clearTimeout(timer);
+  }, [isActive, timeLeft, alarm]);
+
+  const handleStart = useCallback(() => {
+    if (hours > 0 || minutes > 0 || seconds > 0) {
+      const totalTime =
+        (hours || 0) * 3600 + (minutes || 0) * 60 + (seconds || 0);
+
+      setTimeLeft(totalTime);
+      setInitialTime(totalTime);
+      setIsActive(true);
+      setIsFormVisible(false);
+    }
+  }, [hours, minutes, seconds]);
+
+  const handleBack = useCallback(() => {
+    setIsActive(false);
+    setIsFormVisible(true);
+    setTimeLeft(0);
+  }, []);
+
+  const toggleTimer = useCallback(() => {
+    setIsActive(prev => !prev);
+  }, []);
+
+  const formatTime = useCallback((time: number) => {
+    const hrs = Math.floor(time / 3600);
+    const mins = Math.floor((time % 3600) / 60);
+    const secs = time % 60;
+
+    return `${padNumber(hrs)}:${padNumber(mins)}:${padNumber(secs)}`;
+  }, []);
+
+  const elapsedTime = initialTime - timeLeft;
+
+  return (
+    <Modal show={show} onClose={onClose}>
+      <header className={styles.header}>
+        <h2 className={styles.title}>Countdown Timer</h2>
+        <p className={styles.desc}>Super simple countdown timer.</p>
+      </header>
+
+      {isFormVisible ? (
+        <div className={styles.formContainer}>
+          <div className={styles.inputContainer}>
+            <input
+              className={styles.input}
+              placeholder="HH"
+              type="number"
+              value={hours}
+              onChange={e => setHours(Math.max(0, parseInt(e.target.value)))}
+            />
+
+            <span>:</span>
+
+            <input
+              className={styles.input}
+              placeholder="MM"
+              type="number"
+              value={minutes}
+              onChange={e =>
+                setMinutes(Math.max(0, Math.min(59, parseInt(e.target.value))))
+              }
+            />
+
+            <span>:</span>
+
+            <input
+              className={styles.input}
+              placeholder="SS"
+              type="number"
+              value={seconds}
+              onChange={e =>
+                setSeconds(Math.max(0, Math.min(59, parseInt(e.target.value))))
+              }
+            />
+          </div>
+
+          <div className={styles.buttonContainer}>
+            <button
+              className={cn(styles.button, styles.primary)}
+              onClick={handleStart}
+            >
+              Start
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className={styles.timerContainer}>
+          <div className={styles.displayTime}>
+            <p className={styles.reverse}>- {formatTime(elapsedTime)}</p>
+            <span>{formatTime(timeLeft)}</span>
+          </div>
+
+          <div className={styles.buttonContainer}>
+            <button className={styles.button} onClick={handleBack}>
+              Back
+            </button>
+
+            <button
+              className={cn(styles.button, styles.primary)}
+              onClick={toggleTimer}
+            >
+              {isActive ? 'Pause' : 'Start'}
+            </button>
+          </div>
+        </div>
+      )}
+    </Modal>
+  );
+}

src/components/toolbox/countdown/index.ts

@@ -0,0 +1 @@
+export { Countdown } from './countdown';

src/components/toolbox/generics/button/button.module.css

@@ -0,0 +1,34 @@
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  font-size: var(--font-sm);
+  color: var(--color-foreground);
+  cursor: pointer;
+  background-color: var(--color-neutral-100);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 4px;
+  outline: none;
+  transition: 0.2s;
+
+  &:focus-visible {
+    outline: 2px solid var(--color-neutral-400);
+    outline-offset: 2px;
+  }
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--color-neutral-200);
+  }
+
+  &.smallIcon {
+    font-size: var(--font-xsm);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+}

src/components/toolbox/generics/button/button.tsx

@@ -0,0 +1,33 @@
+import { Tooltip } from '@/components/tooltip';
+
+import { cn } from '@/helpers/styles';
+
+import styles from './button.module.css';
+
+interface ButtonProps {
+  disabled?: boolean;
+  icon: React.ReactElement;
+  onClick: () => void;
+  smallIcon?: boolean;
+  tooltip: string;
+}
+
+export function Button({
+  disabled = false,
+  icon,
+  onClick,
+  smallIcon,
+  tooltip,
+}: ButtonProps) {
+  return (
+    <Tooltip content={tooltip} placement="bottom" showDelay={0}>
+      <button
+        className={cn(styles.button, smallIcon && styles.smallIcon)}
+        disabled={disabled}
+        onClick={onClick}
+      >
+        {icon}
+      </button>
+    </Tooltip>
+  );
+}

src/components/toolbox/generics/button/index.ts

@@ -0,0 +1 @@
+export { Button } from './button';

src/components/toolbox/index.ts

@@ -0,0 +1,4 @@
+export { Notepad } from './notepad';
+export { Pomodoro } from './pomodoro';
+export { Todo } from './todo';
+export { Countdown } from './countdown';

src/components/toolbox/notepad/button/button.module.css

@@ -0,0 +1,45 @@
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  font-size: var(--font-sm);
+  color: var(--color-foreground);
+  cursor: pointer;
+  background-color: var(--color-neutral-100);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 4px;
+  outline: none;
+  transition: 0.2s;
+  transition-property: border-color, color, background-color;
+
+  &:focus-visible {
+    outline: 2px solid var(--color-neutral-400);
+    outline-offset: 2px;
+  }
+
+  &.critical {
+    color: #f43f5e;
+    border-color: #f43f5e;
+
+    &:hover {
+      background-color: rgb(244 63 94 / 10%);
+    }
+  }
+
+  &.recommended {
+    font-size: var(--font-xsm);
+    color: #22c55e;
+    border-color: #22c55e;
+
+    &:hover {
+      background-color: rgb(34 197 94 / 10%);
+    }
+  }
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--color-neutral-200);
+  }
+}

src/components/toolbox/notepad/button/button.tsx

@@ -0,0 +1,36 @@
+import { Tooltip } from '@/components/tooltip';
+
+import { cn } from '@/helpers/styles';
+
+import styles from './button.module.css';
+
+interface ButtonProps {
+  critical?: boolean;
+  icon: React.ReactElement;
+  onClick: () => void;
+  recommended?: boolean;
+  tooltip: string;
+}
+
+export function Button({
+  critical,
+  icon,
+  onClick,
+  recommended,
+  tooltip,
+}: ButtonProps) {
+  return (
+    <Tooltip content={tooltip} placement="bottom" showDelay={0}>
+      <button
+        className={cn(
+          styles.button,
+          critical && styles.critical,
+          recommended && styles.recommended,
+        )}
+        onClick={onClick}
+      >
+        {icon}
+      </button>
+    </Tooltip>
+  );
+}

src/components/toolbox/notepad/button/index.ts

@@ -0,0 +1 @@
+export { Button } from './button';

src/components/toolbox/notepad/index.ts

@@ -0,0 +1 @@
+export { Notepad } from './notepad';

src/components/toolbox/notepad/notepad.module.css

@@ -0,0 +1,44 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+
+  & .label {
+    font-size: var(--font-sm);
+    font-weight: 500;
+    color: var(--color-foreground-subtle);
+  }
+
+  & .buttons {
+    display: flex;
+    column-gap: 4px;
+    align-items: center;
+  }
+}
+
+.textarea {
+  width: 100%;
+  height: 350px;
+  padding: 12px;
+  line-height: 1.6;
+  color: var(--color-foreground-subtle);
+  resize: none;
+  background-color: var(--color-neutral-50);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 4px;
+  outline: none;
+  scroll-padding-bottom: 12px;
+
+  &:focus-visible {
+    outline: 2px solid var(--color-neutral-400);
+    outline-offset: 2px;
+  }
+}
+
+.counter {
+  margin-top: 8px;
+  font-size: var(--font-xsm);
+  color: var(--color-foreground-subtle);
+  text-align: center;
+}

src/components/toolbox/notepad/notepad.tsx

@@ -0,0 +1,90 @@
+import { useRef, useEffect } from 'react';
+import { BiTrash } from 'react-icons/bi/index';
+import { LuCopy, LuDownload } from 'react-icons/lu/index';
+import { FaCheck } from 'react-icons/fa6/index';
+import { FaUndo } from 'react-icons/fa/index';
+
+import { Modal } from '@/components/modal';
+import { Button } from './button';
+
+import { useNoteStore } from '@/stores/note';
+import { useCopy } from '@/hooks/use-copy';
+import { download } from '@/helpers/download';
+
+import styles from './notepad.module.css';
+
+interface NotepadProps {
+  onClose: () => void;
+  show: boolean;
+}
+
+export function Notepad({ onClose, show }: NotepadProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const note = useNoteStore(state => state.note);
+  const history = useNoteStore(state => state.history);
+  const write = useNoteStore(state => state.write);
+  const words = useNoteStore(state => state.words());
+  const characters = useNoteStore(state => state.characters());
+  const clear = useNoteStore(state => state.clear);
+  const restore = useNoteStore(state => state.restore);
+
+  const { copy, copying } = useCopy();
+
+  useEffect(() => {
+    if (show && textareaRef.current) {
+      setTimeout(() => {
+        textareaRef.current?.focus();
+      }, 10);
+    }
+  }, [show]);
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    e.stopPropagation();
+
+    if (e.key === 'Escape') onClose();
+  };
+
+  return (
+    <Modal show={show} wide onClose={onClose}>
+      <header className={styles.header}>
+        <h2 className={styles.label}>Your Note</h2>
+        <div className={styles.buttons}>
+          <Button
+            icon={copying ? <FaCheck /> : <LuCopy />}
+            tooltip="Copy Note"
+            onClick={() => copy(note)}
+          />
+          <Button
+            icon={<LuDownload />}
+            tooltip="Download Note"
+            onClick={() => download('Moodit Note.txt', note)}
+          />
+          <Button
+            critical={!history}
+            icon={history ? <FaUndo /> : <BiTrash />}
+            recommended={!!history}
+            tooltip={history ? 'Restore Note' : 'Clear Note'}
+            onClick={() => (history ? restore() : clear())}
+          />
+        </div>
+      </header>
+
+      <textarea
+        className={styles.textarea}
+        dir="auto"
+        placeholder="What is on your mind?"
+        ref={textareaRef}
+        spellCheck={false}
+        value={note}
+        onChange={e => write(e.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+
+      <p className={styles.counter}>
+        {characters} character{characters !== 1 && 's'} • {words} word
+        {words !== 1 && 's'}
+      </p>
+    </Modal>
+  );
+}

src/components/toolbox/pomodoro/index.ts

@@ -0,0 +1 @@
+export { Pomodoro } from './pomodoro';

src/components/toolbox/pomodoro/pomodoro.module.css

@@ -0,0 +1,36 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+
+  & .title {
+    font-size: var(--font-sm);
+    font-weight: 500;
+    color: var(--color-foreground-subtle);
+  }
+
+  & .buttons {
+    display: flex;
+    column-gap: 4px;
+    align-items: center;
+  }
+}
+
+.control {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 8px;
+
+  & .completed {
+    font-size: var(--font-xsm);
+    color: var(--color-foreground-subtle);
+  }
+
+  & .buttons {
+    display: flex;
+    column-gap: 4px;
+    align-items: center;
+  }
+}

src/components/toolbox/pomodoro/pomodoro.tsx

@@ -0,0 +1,179 @@
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { FaUndo, FaPlay, FaPause } from 'react-icons/fa/index';
+import { IoMdSettings } from 'react-icons/io/index';
+
+import { Modal } from '@/components/modal';
+import { Button } from '../generics/button';
+import { Timer } from './timer';
+import { Tabs } from './tabs';
+import { Setting } from './setting';
+
+import { useLocalStorage } from '@/hooks/use-local-storage';
+import { useSoundEffect } from '@/hooks/use-sound-effect';
+import { usePomodoroStore } from '@/stores/pomodoro';
+import { useCloseListener } from '@/hooks/use-close-listener';
+
+import styles from './pomodoro.module.css';
+
+interface PomodoroProps {
+  onClose: () => void;
+  open: () => void;
+  show: boolean;
+}
+
+export function Pomodoro({ onClose, open, show }: PomodoroProps) {
+  const [showSetting, setShowSetting] = useState(false);
+
+  const [selectedTab, setSelectedTab] = useState('pomodoro');
+
+  const running = usePomodoroStore(state => state.running);
+  const setRunning = usePomodoroStore(state => state.setRunning);
+
+  const [timer, setTimer] = useState(0);
+  const interval = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const alarm = useSoundEffect('/sounds/alarm.mp3');
+
+  const defaultTimes = useMemo(
+    () => ({
+      long: 15 * 60,
+      pomodoro: 25 * 60,
+      short: 5 * 60,
+    }),
+    [],
+  );
+
+  const [times, setTimes] = useLocalStorage<Record<string, number>>(
+    'moodist-pomodoro-setting',
+    defaultTimes,
+  );
+
+  const [completions, setCompletions] = useState<Record<string, number>>({
+    long: 0,
+    pomodoro: 0,
+    short: 0,
+  });
+
+  const tabs = useMemo(
+    () => [
+      { id: 'pomodoro', label: 'Pomodoro' },
+      { id: 'short', label: 'Break' },
+      { id: 'long', label: 'Long Break' },
+    ],
+    [],
+  );
+
+  useCloseListener(() => setShowSetting(false));
+
+  useEffect(() => {
+    if (running) {
+      if (interval.current) clearInterval(interval.current);
+
+      interval.current = setInterval(() => {
+        setTimer(prev => prev - 1);
+      }, 1000);
+    } else {
+      if (interval.current) clearInterval(interval.current);
+    }
+  }, [running]);
+
+  useEffect(() => {
+    if (timer <= 0 && running) {
+      if (interval.current) clearInterval(interval.current);
+
+      alarm.play();
+
+      setRunning(false);
+      setCompletions(prev => ({
+        ...prev,
+        [selectedTab]: prev[selectedTab] + 1,
+      }));
+    }
+  }, [timer, selectedTab, running, setRunning, alarm]);
+
+  useEffect(() => {
+    const time = times[selectedTab] || 10;
+
+    if (interval.current) clearInterval(interval.current);
+
+    setRunning(false);
+    setTimer(time);
+  }, [selectedTab, times, setRunning]);
+
+  const toggleRunning = () => {
+    if (running) setRunning(false);
+    else if (timer <= 0) {
+      const time = times[selectedTab] || 10;
+
+      setTimer(time);
+      setRunning(true);
+    } else setRunning(true);
+  };
+
+  const restart = () => {
+    if (interval.current) clearInterval(interval.current);
+
+    const time = times[selectedTab] || 10;
+
+    setRunning(false);
+    setTimer(time);
+  };
+
+  return (
+    <>
+      <Modal show={show} onClose={onClose}>
+        <header className={styles.header}>
+          <h2 className={styles.title}>Pomodoro Timer</h2>
+
+          <div className={styles.button}>
+            <Button
+              icon={<IoMdSettings />}
+              tooltip="Change Times"
+              onClick={() => {
+                onClose();
+                setShowSetting(true);
+              }}
+            />
+          </div>
+        </header>
+
+        <Tabs selectedTab={selectedTab} tabs={tabs} onSelect={setSelectedTab} />
+        <Timer timer={timer} />
+
+        <div className={styles.control}>
+          <p className={styles.completed}>
+            {completions[selectedTab] || 0} completed
+          </p>
+          <div className={styles.buttons}>
+            <Button
+              icon={<FaUndo />}
+              smallIcon
+              tooltip="Restart"
+              onClick={restart}
+            />
+            <Button
+              icon={running ? <FaPause /> : <FaPlay />}
+              smallIcon
+              tooltip={running ? 'Pause' : 'Start'}
+              onClick={toggleRunning}
+            />
+          </div>
+        </div>
+      </Modal>
+
+      <Setting
+        show={showSetting}
+        times={times}
+        onChange={times => {
+          setShowSetting(false);
+          setTimes(times);
+          open();
+        }}
+        onClose={() => {
+          setShowSetting(false);
+          open();
+        }}
+      />
+    </>
+  );
+}

src/components/toolbox/pomodoro/setting/index.ts

@@ -0,0 +1 @@
+export { Setting } from './setting';

src/components/toolbox/pomodoro/setting/setting.module.css

@@ -0,0 +1,76 @@
+.title {
+  margin-bottom: 16px;
+  font-family: var(--font-heading);
+  font-size: var(--font-md);
+  font-weight: 600;
+}
+
+& .form {
+  display: flex;
+  flex-direction: column;
+
+  & .field {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    margin-bottom: 16px;
+
+    & .label {
+      font-size: var(--font-sm);
+      color: var(--color-foreground);
+
+      & span {
+        color: var(--color-foreground-subtle);
+      }
+    }
+
+    & .input {
+      display: block;
+      height: 40px;
+      padding: 0 8px;
+      color: var(--color-foreground);
+      background-color: var(--color-neutral-50);
+      border: 1px solid var(--color-neutral-200);
+      border-radius: 4px;
+      outline: none;
+
+      &:focus-visible {
+        outline: 2px solid var(--color-neutral-400);
+        outline-offset: 2px;
+      }
+    }
+  }
+
+  & .buttons {
+    display: flex;
+    column-gap: 8px;
+    align-items: center;
+    justify-content: flex-end;
+
+    & button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 40px;
+      padding: 0 16px;
+      font-size: var(--font-sm);
+      font-weight: 500;
+      color: var(--color-foreground);
+      cursor: pointer;
+      background-color: var(--color-neutral-200);
+      border: none;
+      border-radius: 4px;
+      outline: none;
+
+      &:focus-visible {
+        outline: 2px solid var(--color-neutral-400);
+        outline-offset: 2px;
+      }
+
+      &.primary {
+        color: var(--color-neutral-100);
+        background-color: var(--color-neutral-950);
+      }
+    }
+  }
+}

src/components/toolbox/pomodoro/setting/setting.tsx

@@ -0,0 +1,110 @@
+import { useEffect, useState } from 'react';
+
+import { Modal } from '@/components/modal';
+
+import styles from './setting.module.css';
+
+interface SettingProps {
+  onChange: (newTimes: Record<string, number>) => void;
+  onClose: () => void;
+  show: boolean;
+  times: Record<string, number>;
+}
+
+export function Setting({ onChange, onClose, show, times }: SettingProps) {
+  const [values, setValues] = useState<Record<string, number | string>>(times);
+
+  useEffect(() => {
+    if (show) setValues(times);
+  }, [times, show]);
+
+  const handleChange = (id: string) => (value: number | string) => {
+    setValues(prev => ({
+      ...prev,
+      [id]: typeof value === 'number' ? value * 60 : '',
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const newValues: Record<string, number> = {};
+
+    Object.keys(values).forEach(name => {
+      newValues[name] =
+        typeof values[name] === 'number' ? values[name] : times[name];
+    });
+
+    onChange(newValues);
+  };
+
+  const handleCancel = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.preventDefault();
+
+    onClose();
+  };
+
+  return (
+    <Modal lockBody={false} show={show} onClose={onClose}>
+      <h2 className={styles.title}>Change Times</h2>
+
+      <form className={styles.form} onSubmit={handleSubmit}>
+        <Field
+          id="pomodoro"
+          label="Pomodoro"
+          value={values.pomodoro}
+          onChange={handleChange('pomodoro')}
+        />
+        <Field
+          id="short"
+          label="Short Break"
+          value={values.short}
+          onChange={handleChange('short')}
+        />
+        <Field
+          id="long"
+          label="Long Break"
+          value={values.long}
+          onChange={handleChange('long')}
+        />
+
+        <div className={styles.buttons}>
+          <button type="button" onClick={handleCancel}>
+            Cancel
+          </button>
+          <button className={styles.primary} type="submit">
+            Save
+          </button>
+        </div>
+      </form>
+    </Modal>
+  );
+}
+
+interface FieldProps {
+  id: string;
+  label: string;
+  onChange: (value: number | string) => void;
+  value: number | string;
+}
+
+function Field({ id, label, onChange, value }: FieldProps) {
+  return (
+    <div className={styles.field}>
+      <label className={styles.label} htmlFor={id}>
+        {label} <span>(minutes)</span>
+      </label>
+      <input
+        className={styles.input}
+        max={120}
+        min={1}
+        required
+        type="number"
+        value={typeof value === 'number' ? value / 60 : ''}
+        onChange={e => {
+          onChange(e.target.value === '' ? '' : Number(e.target.value));
+        }}
+      />
+    </div>
+  );
+}

src/components/toolbox/pomodoro/tabs/index.ts

@@ -0,0 +1 @@
+export { Tabs } from './tabs';

src/components/toolbox/pomodoro/tabs/tabs.module.css

@@ -0,0 +1,43 @@
+.tabs {
+  display: flex;
+  column-gap: 4px;
+  align-items: center;
+  padding: 4px;
+  margin: 8px 0;
+  background-color: var(--color-neutral-50);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 8px;
+
+  & .tab {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    height: 45px;
+    font-size: var(--font-sm);
+    color: var(--color-foreground-subtle);
+    cursor: pointer;
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    outline: none;
+    transition: 0.2s;
+
+    &:focus-visible {
+      outline: 2px solid var(--color-neutral-400);
+      outline-offset: 2px;
+    }
+
+    &.selected {
+      color: var(--color-foreground);
+      background-color: var(--color-neutral-200);
+      border-color: var(--color-neutral-300);
+    }
+
+    &:not(.selected):hover,
+    &:not(.selected):focus-visible {
+      color: var(--color-foreground);
+      background-color: var(--color-neutral-100);
+    }
+  }
+}

src/components/toolbox/pomodoro/tabs/tabs.tsx

@@ -0,0 +1,25 @@
+import { cn } from '@/helpers/styles';
+
+import styles from './tabs.module.css';
+
+interface TabsProps {
+  onSelect: (id: string) => void;
+  selectedTab: string;
+  tabs: Array<{ id: string; label: string }>;
+}
+
+export function Tabs({ onSelect, selectedTab, tabs }: TabsProps) {
+  return (
+    <div className={styles.tabs}>
+      {tabs.map(tab => (
+        <button
+          className={cn(styles.tab, selectedTab === tab.id && styles.selected)}
+          key={tab.id}
+          onClick={() => onSelect(tab.id)}
+        >
+          {tab.label}
+        </button>
+      ))}
+    </div>
+  );
+}

src/components/toolbox/pomodoro/timer/index.ts

@@ -0,0 +1 @@
+export { Timer } from './timer';

src/components/toolbox/pomodoro/timer/timer.module.css

@@ -0,0 +1,29 @@
+.timer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 48px 0;
+  font-size: var(--font-xlg);
+  font-weight: 500;
+  background-color: var(--color-neutral-50);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 12px;
+
+  &::after {
+    position: absolute;
+    bottom: -1px;
+    left: 50%;
+    width: 75%;
+    height: 1px;
+    content: '';
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--color-neutral-400),
+      transparent
+    );
+    transform: translateX(-50%);
+  }
+}

src/components/toolbox/pomodoro/timer/timer.tsx

@@ -0,0 +1,27 @@
+import { padNumber } from '@/helpers/number';
+
+import styles from './timer.module.css';
+
+interface TimerProps {
+  timer: number;
+}
+
+export function Timer({ timer }: TimerProps) {
+  let hours = Math.floor(timer / 3600);
+  let minutes = Math.floor((timer % 3600) / 60);
+  let seconds = timer % 60;
+
+  hours = isNaN(hours) ? 0 : hours;
+  minutes = isNaN(minutes) ? 0 : minutes;
+  seconds = isNaN(seconds) ? 0 : seconds;
+
+  const formattedHours = padNumber(hours);
+  const formattedMinutes = padNumber(minutes);
+  const formattedSeconds = padNumber(seconds);
+
+  return (
+    <div className={styles.timer}>
+      {formattedHours}:{formattedMinutes}:{formattedSeconds}
+    </div>
+  );
+}

src/components/toolbox/todo/form/form.module.css

@@ -0,0 +1,53 @@
+.wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 45px;
+  padding: 4px;
+  margin-top: 12px;
+  background-color: var(--color-neutral-50);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 8px;
+
+  &::before {
+    position: absolute;
+    bottom: -1px;
+    left: 50%;
+    width: 80%;
+    height: 1px;
+    content: '';
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--color-neutral-300),
+      transparent
+    );
+    transform: translateX(-50%);
+  }
+
+  & input {
+    flex-grow: 1;
+    min-width: 0;
+    height: 100%;
+    padding: 0 8px;
+    color: var(--color-foreground);
+    background-color: transparent;
+    border: none;
+    outline: none;
+  }
+
+  & button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 0 16px;
+    font-size: var(--font-sm);
+    font-weight: 500;
+    color: var(--color-foreground);
+    cursor: pointer;
+    background-color: var(--color-neutral-200);
+    border: 1px solid var(--color-neutral-300);
+    border-radius: 4px;
+  }
+}

src/components/toolbox/todo/form/form.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+
+import { useTodoStore } from '@/stores/todo';
+
+import styles from './form.module.css';
+
+export function Form() {
+  const [value, setValue] = useState('');
+
+  const addTodo = useTodoStore(state => state.addTodo);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (!value.trim().length) return;
+
+    addTodo(value);
+    setValue('');
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className={styles.wrapper}>
+        <input
+          placeholder="I have to ..."
+          type="text"
+          value={value}
+          onChange={e => setValue(e.target.value)}
+        />
+        <button type="submit">Add</button>
+      </div>
+    </form>
+  );
+}

src/components/toolbox/todo/form/index.ts

@@ -0,0 +1 @@
+export { Form } from './form';

src/components/toolbox/todo/index.ts

@@ -0,0 +1 @@
+export { Todo } from './todo';

src/components/toolbox/todo/todo.module.css

@@ -0,0 +1,14 @@
+.header {
+  margin-bottom: 16px;
+
+  & .title {
+    margin-bottom: 8px;
+    font-family: var(--font-heading);
+    font-size: var(--font-md);
+    font-weight: 600;
+  }
+
+  & .desc {
+    color: var(--color-foreground-subtle);
+  }
+}

src/components/toolbox/todo/todo.tsx

@@ -0,0 +1,24 @@
+import { Modal } from '@/components/modal';
+import { Form } from './form';
+import { Todos } from './todos';
+
+import styles from './todo.module.css';
+
+interface TodoProps {
+  onClose: () => void;
+  show: boolean;
+}
+
+export function Todo({ onClose, show }: TodoProps) {
+  return (
+    <Modal show={show} onClose={onClose}>
+      <header className={styles.header}>
+        <h2 className={styles.title}>Todo Checklist</h2>
+        <p className={styles.desc}>Super simple todo list.</p>
+      </header>
+
+      <Form />
+      <Todos />
+    </Modal>
+  );
+}

src/components/toolbox/todo/todos/index.ts

@@ -0,0 +1 @@
+export { Todos } from './todos';

src/components/toolbox/todo/todos/todo/index.ts

@@ -0,0 +1 @@
+export { Todo } from './todo';

src/components/toolbox/todo/todos/todo/todo.module.css

@@ -0,0 +1,45 @@
+.wrapper {
+  display: flex;
+  column-gap: 4px;
+  align-items: center;
+  height: 45px;
+  padding: 4px;
+  margin-top: 12px;
+  background-color: var(--color-neutral-50);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 8px;
+
+  & .checkbox {
+    display: block;
+    margin: 0 8px 0 4px;
+  }
+
+  & .textbox {
+    flex-grow: 1;
+    min-width: 0;
+    height: 100%;
+    font-size: var(--font-sm);
+    color: var(--color-foreground);
+    background-color: transparent;
+    border: none;
+    outline: none;
+
+    &.done {
+      color: var(--color-foreground-subtle);
+      text-decoration: line-through;
+    }
+  }
+
+  & button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    aspect-ratio: 1 / 1;
+    color: #f43f5e;
+    cursor: pointer;
+    background-color: rgb(244 63 94 / 15%);
+    border: none;
+    border-radius: 4px;
+  }
+}

src/components/toolbox/todo/todos/todo/todo.tsx

@@ -0,0 +1,41 @@
+import { FaRegTrashAlt } from 'react-icons/fa/index';
+
+import { useTodoStore } from '@/stores/todo';
+import { cn } from '@/helpers/styles';
+
+import styles from './todo.module.css';
+
+interface TodoProps {
+  done: boolean;
+  id: string;
+  todo: string;
+}
+
+export function Todo({ done, id, todo }: TodoProps) {
+  const deleteTodo = useTodoStore(state => state.deleteTodo);
+  const toggleTodo = useTodoStore(state => state.toggleTodo);
+  const editTodo = useTodoStore(state => state.editTodo);
+
+  const handleCheck = () => toggleTodo(id);
+  const handleDelete = () => deleteTodo(id);
+
+  return (
+    <div className={styles.wrapper}>
+      <input
+        checked={done}
+        className={styles.checkbox}
+        type="checkbox"
+        onChange={handleCheck}
+      />
+      <input
+        className={cn(styles.textbox, done && styles.done)}
+        type="text"
+        value={todo}
+        onChange={e => editTodo(id, e.target.value)}
+      />
+      <button onClick={handleDelete}>
+        <FaRegTrashAlt />
+      </button>
+    </div>
+  );
+}

src/components/toolbox/todo/todos/todos.module.css

@@ -0,0 +1,31 @@
+.todos {
+  margin-top: 28px;
+
+  & header {
+    display: flex;
+    column-gap: 8px;
+    align-items: center;
+
+    & .label {
+      font-size: var(--font-sm);
+      font-weight: 500;
+    }
+
+    & .divider {
+      flex-grow: 1;
+      height: 1px;
+      background-color: var(--color-neutral-200);
+    }
+
+    & .counter {
+      font-size: var(--font-sm);
+      color: var(--color-foreground-subtle);
+    }
+  }
+
+  & .empty {
+    margin-top: 16px;
+    font-size: var(--font-sm);
+    color: var(--color-foreground-subtle);
+  }
+}

src/components/toolbox/todo/todos/todos.tsx

@@ -0,0 +1,37 @@
+import { Todo } from './todo';
+
+import { useTodoStore } from '@/stores/todo';
+
+import styles from './todos.module.css';
+
+export function Todos() {
+  const todos = useTodoStore(state => state.todos);
+  const doneCount = useTodoStore(state => state.doneCount());
+
+  return (
+    <div className={styles.todos}>
+      <header>
+        <p className={styles.label}>Your Todos</p>
+        <div className={styles.divider} />
+        <p className={styles.counter}>
+          {doneCount} / {todos.length}
+        </p>
+      </header>
+
+      {todos.length > 0 ? (
+        <>
+          {todos.map(todo => (
+            <Todo
+              done={todo.done}
+              id={todo.id}
+              key={todo.id}
+              todo={todo.todo}
+            />
+          ))}
+        </>
+      ) : (
+        <p className={styles.empty}>You don&apos;t have any todos.</p>
+      )}
+    </div>
+  );
+}

src/contexts/sound.tsx

@@ -0,0 +1,76 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { Howler } from 'howler';
+
+// Define the context's interface
+interface SoundContextType {
+  connectBufferSource: (bufferSource: AudioBufferSourceNode) => void;
+  updateVolume: (volume: number) => void; // Add a function to update the volume
+}
+
+// Create the SoundContext with an empty initial value
+const SoundContext = createContext<SoundContextType | undefined>(undefined);
+
+// Custom hook to use the SoundContext
+export const useSoundContext = (): SoundContextType => {
+  const context = useContext(SoundContext);
+  if (!context) {
+    throw new Error('useSoundContext must be used within a SoundProvider');
+  }
+  return context;
+};
+
+// Props for the SoundProvider component
+interface SoundProviderProps {
+  children: React.ReactNode;
+}
+
+export const SoundProvider: React.FC<SoundProviderProps> = ({ children }) => {
+  const [dest, setDest] = useState<MediaStreamAudioDestinationNode | null>(
+    null,
+  );
+  const [audioTag, setAudioTag] = useState<HTMLAudioElement | null>(null);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      // Get the Howler.js AudioContext after the component is mounted
+      const audioCtx = Howler.ctx;
+
+      if (audioCtx) {
+        const mediaDest = audioCtx.createMediaStreamDestination();
+        setDest(mediaDest);
+
+        // Create an audio element to trick iOS
+        const audioElement = document.createElement('audio');
+        audioElement.srcObject = mediaDest.stream;
+        audioElement.style.display = 'none'; // Hide the audio element
+        document.body.appendChild(audioElement);
+        setAudioTag(audioElement);
+
+        return () => {
+          // Clean up the audio element on unmount
+          document.body.removeChild(audioElement);
+        };
+      }
+    }
+  }, []);
+
+  // Function to connect a buffer source to the MediaStreamDestination
+  const connectBufferSource = (bufferSource: AudioBufferSourceNode) => {
+    if (dest) {
+      bufferSource.connect(dest);
+    }
+  };
+
+  // Function to update the volume of the audio tag
+  const updateVolume = (volume: number) => {
+    if (audioTag) {
+      audioTag.volume = volume;
+    }
+  };
+
+  return (
+    <SoundContext.Provider value={{ connectBufferSource, updateVolume }}>
+      {children}
+    </SoundContext.Provider>
+  );
+};

src/hooks/use-sound.ts

@@ -5,6 +5,7 @@ import { useLoadingStore } from '@/stores/loading';
 import { subscribe } from '@/lib/event';
 import { useSSR } from './use-ssr';
 import { FADE_OUT } from '@/constants/events';
+import { useSoundContext } from '@/contexts/sound';
 
 /**
  * A custom React hook to manage sound playback using Howler.js with additional features.
@@ -34,6 +35,8 @@ export function useSound(
   const setIsLoading = useLoadingStore(state => state.set);
 
   const { isBrowser } = useSSR();
+  const { connectBufferSource, updateVolume } = useSoundContext(); // Access SoundContext
+
   const sound = useMemo<Howl | null>(() => {
     let sound: Howl | null = null;
 
@@ -43,6 +46,13 @@ export function useSound(
         onload: () => {
           setIsLoading(src, false);
           setHasLoaded(true);
+
+          // Connect the buffer source to the MediaStreamDestination
+          // @ts-ignore
+          const source = sound!._sounds[0]._node.bufferSource;
+          if (source) {
+            connectBufferSource(source);
+          }
         },
         preload: options.preload ?? false,
         src: src,
@@ -50,7 +60,14 @@ export function useSound(
     }
 
     return sound;
-  }, [src, isBrowser, setIsLoading, html5, options.preload]);
+  }, [
+    src,
+    isBrowser,
+    setIsLoading,
+    html5,
+    options.preload,
+    connectBufferSource,
+  ]);
 
   useEffect(() => {
     if (sound) {
@@ -59,8 +76,11 @@ export function useSound(
   }, [sound, options.loop]);
 
   useEffect(() => {
-    if (sound) sound.volume(options.volume ?? 0.5);
-  }, [sound, options.volume]);
+    if (sound) {
+      sound.volume(options.volume ?? 0.5);
+      updateVolume(options.volume ?? 0.5); // Update the volume of the audio tag
+    }
+  }, [sound, options.volume, updateVolume]);
 
   const play = useCallback(
     (cb?: () => void) => {
@@ -95,9 +115,10 @@ export function useSound(
       setTimeout(() => {
         pause();
         sound?.volume(options.volume || 0.5);
+        updateVolume(options.volume || 0.5); // Ensure the volume is reset after fade-out
       }, duration);
     },
-    [options.volume, sound, pause],
+    [options.volume, sound, pause, updateVolume],
   );
 
   useEffect(() => {

src/lib/confetti.ts

@@ -0,0 +1,18 @@
+import JSConfetti from 'js-confetti';
+
+export const addConfetti = () => {
+  const jsConfetti = new JSConfetti();
+
+  jsConfetti.addConfetti({
+    confettiColors: [
+      '#6366f1',
+      '#8b5cf6',
+      '#a855f7',
+      '#ec4899',
+      '#f43f5e',
+      '#fb923c',
+      '#eab308',
+      '#22c55e',
+    ],
+  });
+};

src/stores/todo.ts

@@ -0,0 +1,93 @@
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+import merge from 'deepmerge';
+import { v4 as uuid } from 'uuid';
+
+import { addConfetti } from '@/lib/confetti';
+
+interface TodoStore {
+  addTodo: (todo: string) => void;
+  deleteTodo: (id: string) => void;
+  doneCount: () => number;
+  editTodo: (id: string, newTodo: string) => void;
+  todos: Array<{
+    createdAt: number;
+    done: boolean;
+    id: string;
+    todo: string;
+  }>;
+  toggleTodo: (id: string) => void;
+}
+
+export const useTodoStore = create<TodoStore>()(
+  persist(
+    (set, get) => ({
+      addTodo(todo) {
+        set({
+          todos: [
+            {
+              createdAt: Date.now(),
+              done: false,
+              id: uuid(),
+              todo,
+            },
+            ...get().todos,
+          ],
+        });
+      },
+      deleteTodo(id) {
+        set({
+          todos: get().todos.filter(todo => todo.id !== id),
+        });
+      },
+
+      doneCount() {
+        const { todos } = get();
+
+        return todos.filter(todo => todo.done).length;
+      },
+
+      editTodo(id, newTodo) {
+        set({
+          todos: get().todos.map(todo => {
+            if (todo.id !== id) return todo;
+
+            return {
+              ...todo,
+              todo: newTodo,
+            };
+          }),
+        });
+      },
+
+      todos: [],
+
+      toggleTodo(id) {
+        set({
+          todos: get().todos.map(todo => {
+            if (todo.id !== id) return todo;
+
+            return {
+              ...todo,
+              done: !todo.done,
+            };
+          }),
+        });
+
+        if (get().doneCount() === get().todos.length) {
+          addConfetti();
+        }
+      },
+    }),
+    {
+      merge: (persisted, current) =>
+        merge(current, persisted as Partial<TodoStore>),
+
+      name: 'moodist-todos',
+      partialize: state => ({ todos: state.todos }),
+      skipHydration: true,
+      storage: createJSONStorage(() => localStorage),
+      version: 0,
+    },
+  ),
+);