style: change tool labels

package-lock.json

@@ -21,7 +21,6 @@
         "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",
@@ -18317,11 +18316,6 @@
         "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,7 +37,6 @@
     "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,7 +12,6 @@ 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';
@@ -87,19 +86,17 @@ export function App() {
   }, [favoriteSounds, categories]);
 
   return (
-    <SoundProvider>
+    <SnackbarProvider>
-      <SnackbarProvider>
+      <StoreConsumer>
-        <StoreConsumer>
+        <Container>
-          <Container>
+          <div id="app" />
-            <div id="app" />
+          <Buttons />
-            <Buttons />
+          <Categories categories={allCategories} />
-            <Categories categories={allCategories} />
+        </Container>
-          </Container>
 
-          <Toolbar />
+        <Toolbar />
-          <SharedModal />
+        <SharedModal />
-        </StoreConsumer>
+      </StoreConsumer>
-      </SnackbarProvider>
+    </SnackbarProvider>
-    </SoundProvider>
   );
 }

src/components/categories/categories.tsx

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

src/components/menu/items/notepad.tsx

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

src/components/menu/items/pomodoro.tsx

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

src/components/menu/items/presets.tsx

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

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

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

src/components/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 '@/components/modals/breathing';
+import { BreathingExerciseModal } from '../modals/breathing';
-import { Pomodoro, Notepad, Todo, Countdown } from '@/components/toolbox';
+import { Pomodoro, Notepad, Todo, Countdown } from '../toolbox';
 import { fade, mix, slideY } from '@/lib/motion';
 import { useSoundStore } from '@/stores/sound';
 

src/components/modals/shortcuts/shortcuts.tsx

@@ -14,7 +14,7 @@ export function ShortcutsModal({ onClose, show }: ShortcutsModalProps) {
       label: 'Shortcuts List',
     },
     {
-      keys: ['Shift', 'P'],
+      keys: ['Shift', 'Alt', 'P'],
       label: 'Presets',
     },
     {
@@ -22,9 +22,29 @@ export function ShortcutsModal({ onClose, show }: ShortcutsModalProps) {
       label: 'Share Sounds',
     },
     {
-      keys: ['Shift', 'T'],
+      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',
+    },
     {
       keys: ['Shift', 'Space'],
       label: 'Toggle Play',

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

@@ -1,5 +1,5 @@
 .header {
-  margin-bottom: 28px;
+  margin-bottom: 16px;
 
   & .title {
     margin-bottom: 8px;
@@ -28,7 +28,6 @@
       & .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 './timer';
+import { Timer } from '@/components/timer';
 import { dispatch } from '@/lib/event';
 import { useSoundStore } from '@/stores/sound';
 import { cn } from '@/helpers/styles';
@@ -17,7 +17,6 @@ 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);
 
@@ -48,7 +47,6 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
 
   const handleStart = () => {
     if (timerId.current) clearInterval(timerId.current);
-    if (noSelected) return;
     if (!isPlaying) play();
 
     if (totalSeconds > 0) {
@@ -65,7 +63,7 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
   useEffect(() => {
     if (timeLeft === 0) {
       setRunning(false);
-
+      // pause();
       dispatch(FADE_OUT, { duration: 1000 });
 
       setTimeSpent(0);
@@ -109,7 +107,7 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
             )}
           </div>
 
-          {running ? <Timer reverse={timeSpent} timer={timeLeft} /> : null}
+          {running ? <Timer displayHours={true} timer={timeLeft} /> : null}
 
           <div className={styles.buttons}>
             {running && (

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

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

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

@@ -1,30 +0,0 @@
-.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

@@ -1,27 +0,0 @@
-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

@@ -1,29 +0,0 @@
-.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/sounds/sounds.tsx

@@ -1,7 +1,7 @@
 import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 
-import { Sound } from './sound';
+import { Sound } from '@/components/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

@@ -0,0 +1,16 @@
+.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/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 {
-  reverse: number;
+  displayHours?: boolean;
+  tall?: boolean;
   timer: number;
 }
 
-export function Timer({ reverse, timer }: TimerProps) {
+export function Timer({ displayHours = false, tall, timer }: TimerProps) {
   let hours = Math.floor(timer / 3600);
   let minutes = Math.floor((timer % 3600) / 60);
   let seconds = timer % 60;
@@ -23,9 +23,16 @@ export function Timer({ reverse, timer }: TimerProps) {
   const formattedSeconds = padNumber(seconds);
 
   return (
-    <div className={styles.timer}>
+    <div className={cn(styles.timer, tall && styles.tall)}>
-      <Reverse time={reverse} />
+      {displayHours ? (
-      {formattedHours}:{formattedMinutes}:{formattedSeconds}
+        <>
+          {formattedHours}:{formattedMinutes}:{formattedSeconds}
+        </>
+      ) : (
+        <>
+          {formattedMinutes}:{formattedSeconds}
+        </>
+      )}
     </div>
   );
 }

src/components/toolbar/toolbar.tsx

@@ -1,6 +1,6 @@
 import { Container } from '@/components/container';
-import { Menu } from './menu';
+import { Menu } from '@/components/menu';
-import { ScrollToTop } from './scroll-to-top';
+import { ScrollToTop } from '@/components/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 './timer';
+import { Timer } from '@/components/timer';
 import { Tabs } from './tabs';
 import { Setting } from './setting';
 

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

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

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

@@ -1,29 +0,0 @@
-.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

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

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

@@ -22,7 +22,6 @@ 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,14 +1 @@
-.header {
+/* WIP */
-  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,11 +12,7 @@ interface TodoProps {
 export function Todo({ onClose, show }: TodoProps) {
   return (
     <Modal show={show} onClose={onClose}>
-      <header className={styles.header}>
+      <h2 className={styles.title}>Todos</h2>
-        <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,31 +1 @@
-.todos {
+/* WIP */
-  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,32 +6,12 @@ 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>
+      {todos.map(todo => (
-        <p className={styles.label}>Your Todos</p>
+        <Todo done={todo.done} id={todo.id} key={todo.id} todo={todo.todo} />
-        <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

@@ -1,76 +0,0 @@
-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,7 +5,6 @@ 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.
@@ -35,8 +34,6 @@ 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;
 
@@ -46,13 +43,6 @@ 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,
@@ -60,14 +50,7 @@ export function useSound(
     }
 
     return sound;
-  }, [
+  }, [src, isBrowser, setIsLoading, html5, options.preload]);
-    src,
-    isBrowser,
-    setIsLoading,
-    html5,
-    options.preload,
-    connectBufferSource,
-  ]);
 
   useEffect(() => {
     if (sound) {
@@ -76,11 +59,8 @@ export function useSound(
   }, [sound, options.loop]);
 
   useEffect(() => {
-    if (sound) {
+    if (sound) sound.volume(options.volume ?? 0.5);
-      sound.volume(options.volume ?? 0.5);
+  }, [sound, options.volume]);
-      updateVolume(options.volume ?? 0.5); // Update the volume of the audio tag
-    }
-  }, [sound, options.volume, updateVolume]);
 
   const play = useCallback(
     (cb?: () => void) => {
@@ -115,10 +95,9 @@ 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, updateVolume],
+    [options.volume, sound, pause],
   );
 
   useEffect(() => {

src/lib/confetti.ts

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