fix: change audio volume

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

@@ -14,36 +14,16 @@ export function ShortcutsModal({ onClose, show }: ShortcutsModalProps) {
       label: 'Shortcuts List',
     },
     {
-      keys: ['Shift', 'Alt', 'P'],
+      keys: ['Shift', 'P'],
       label: 'Presets',
     },
     {
       keys: ['Shift', 'S'],
       label: 'Share Sounds',
     },
-    {
-      keys: ['Shift', 'Alt', 'T'],
-      label: 'Sleep Timer',
-    },
-    {
-      keys: ['Shift', 'C'],
-      label: 'Countdown Timer',
-    },
-    {
-      keys: ['Shift', 'N'],
-      label: 'Simple Notepad',
-    },
-    {
-      keys: ['Shift', 'P'],
-      label: 'Pomodoro Timer',
-    },
     {
       keys: ['Shift', 'T'],
-      label: 'Todo Checklist',
-    },
-    {
-      keys: ['Shift', 'B'],
-      label: 'Breathing Exercise',
+      label: 'Sleep Timer',
     },
     {
       keys: ['Shift', 'Space'],

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/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/notepad.tsx

@@ -15,7 +15,7 @@ export function Notepad({ open }: NotepadProps) {
     <Item
       active={!!note.length}
       icon={<MdNotes />}
-      label="Simple Notepad"
+      label="Notepad"
       shortcut="Shift + N"
       onClick={open}
     />

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

@@ -15,7 +15,7 @@ export function Pomodoro({ open }: PomodoroProps) {
     <Item
       active={running}
       icon={<MdOutlineAvTimer />}
-      label="Pomodoro Timer"
+      label="Pomodoro"
       shortcut="Shift + P"
       onClick={open}
     />

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

@@ -11,7 +11,7 @@ export function Presets({ open }: PresetsProps) {
     <Item
       icon={<RiPlayListFill />}
       label="Your Presets"
-      shortcut="Shift + Alt + P"
+      shortcut="Shift + P"
       onClick={open}
     />
   );

src/components/toolbar/menu/items/sleep-timer.tsx

@@ -15,7 +15,7 @@ export function SleepTimer({ open }: SleepTimerProps) {
       active={active}
       icon={<IoMoonSharp />}
       label="Sleep Timer"
-      shortcut="Shift + Alt + T"
+      shortcut="Shift + T"
       onClick={open}
     />
   );

src/components/toolbar/menu/menu.tsx

@@ -23,8 +23,8 @@ 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 { Pomodoro, Notepad, Todo, Countdown } from '../toolbox';
+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';
 

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/pomodoro/pomodoro.tsx

@@ -4,7 +4,7 @@ import { IoMdSettings } from 'react-icons/io/index';
 
 import { Modal } from '@/components/modal';
 import { Button } from '../generics/button';
-import { Timer } from '@/components/timer';
+import { Timer } from './timer';
 import { Tabs } from './tabs';
 import { Setting } from './setting';
 

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

@@ -1,4 +1,5 @@
 .wrapper {
+  position: relative;
   display: flex;
   align-items: center;
   height: 45px;
@@ -8,6 +9,22 @@
   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;
@@ -26,10 +43,11 @@
     height: 100%;
     padding: 0 16px;
     font-size: var(--font-sm);
+    font-weight: 500;
     color: var(--color-foreground);
     cursor: pointer;
-    background-color: var(--color-neutral-100);
-    border: 1px solid var(--color-neutral-200);
+    background-color: var(--color-neutral-200);
+    border: 1px solid var(--color-neutral-300);
     border-radius: 4px;
   }
 }

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

@@ -22,6 +22,7 @@ export function Form() {
     <form onSubmit={handleSubmit}>
       <div className={styles.wrapper}>
         <input
+          placeholder="I have to ..."
           type="text"
           value={value}
           onChange={e => setValue(e.target.value)}

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

@@ -1 +1,14 @@
-/* WIP */
+.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

@@ -12,7 +12,11 @@ interface TodoProps {
 export function Todo({ onClose, show }: TodoProps) {
   return (
     <Modal show={show} onClose={onClose}>
-      <h2 className={styles.title}>Todos</h2>
+      <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/todos.module.css

@@ -1 +1,31 @@
-/* WIP */
+.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

@@ -6,12 +6,32 @@ 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}>
-      {todos.map(todo => (
-        <Todo done={todo.done} id={todo.id} key={todo.id} todo={todo.todo} />
-      ))}
+      <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/preset/index.ts

@@ -40,11 +40,32 @@ export const usePresetStore = create<PresetStore>()(
     {
       merge: (persisted, current) =>
         merge(current, persisted as Partial<PresetStore>),
+
+      migrate,
       name: 'moodist-presets',
       partialize: state => ({ presets: state.presets }),
       skipHydration: true,
       storage: createJSONStorage(() => localStorage),
-      version: 0,
+      version: 1,
     },
   ),
 );
+
+function migrate(persistedState: unknown, version: number) {
+  let persisted = persistedState as Partial<PresetStore>;
+
+  /**
+   * In version 0, presets didn't have an ID
+   */
+  if (version < 1) {
+    persisted = {
+      ...persisted,
+      presets: (persisted.presets || []).map(preset => {
+        if (preset.id) return preset;
+        return { ...preset, id: uuid() };
+      }),
+    } as PresetStore;
+  }
+
+  return persisted as PresetStore;
+}

src/stores/todo.ts

@@ -3,9 +3,12 @@ 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;
@@ -32,13 +35,18 @@ export const useTodoStore = create<TodoStore>()(
           ],
         });
       },
-
       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 => {
@@ -65,6 +73,10 @@ export const useTodoStore = create<TodoStore>()(
             };
           }),
         });
+
+        if (get().doneCount() === get().todos.length) {
+          addConfetti();
+        }
       },
     }),
     {