feat: update the menu items

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

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

src/components/menu/items/notepad.tsx

@@ -4,20 +4,15 @@ import { Item } from '../item';
 
 import { useNoteStore } from '@/stores/note';
 
-interface NotepadProps {
+export function Notepad() {
-  open: () => void;
-}
-
-export function Notepad({ open }: NotepadProps) {
   const note = useNoteStore(state => state.note);
 
   return (
     <Item
       active={!!note.length}
+      href="/tools/notepad"
       icon={<MdNotes />}
       label="Notepad"
-      shortcut="Shift + N"
-      onClick={open}
     />
   );
 }

src/components/menu/items/pomodoro.tsx

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

src/components/menu/menu.tsx

@@ -22,7 +22,6 @@ 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 { Notepad, Pomodoro, BreathingExercise } from '@/components/toolbox';
 import { fade, mix, slideY } from '@/lib/motion';
 import { useSoundStore } from '@/stores/sound';
 
@@ -37,9 +36,6 @@ export function Menu() {
 
   const initial = useMemo(
     () => ({
-      breathingExercise: false,
-      notepad: false,
-      pomodoro: false,
       presets: false,
       shareLink: false,
       shortcuts: false,
@@ -67,9 +63,6 @@ export function Menu() {
   );
 
   useHotkeys('shift+m', () => setIsOpen(prev => !prev));
-  useHotkeys('shift+n', () => open('notepad'));
-  useHotkeys('shift+p', () => open('pomodoro'));
-  useHotkeys('shift+b', () => open('breathingExercise'));
   useHotkeys('shift+alt+p', () => open('presets'));
   useHotkeys('shift+h', () => open('shortcuts'));
   useHotkeys('shift+s', () => open('shareLink'), { enabled: !noSelected });
@@ -112,11 +105,9 @@ export function Menu() {
                     <SleepTimerItem open={() => open('sleepTimer')} />
 
                     <Divider />
-                    <BreathingExerciseItem
+                    <BreathingExerciseItem />
-                      open={() => open('breathingExercise')}
+                    <PomodoroItem />
-                    />
+                    <NotepadItem />
-                    <PomodoroItem open={() => open('pomodoro')} />
-                    <NotepadItem open={() => open('notepad')} />
                     <CountdownTimerItem />
 
                     <Divider />
@@ -142,16 +133,6 @@ export function Menu() {
         onClose={() => close('shortcuts')}
       />
       <PresetsModal show={modals.presets} onClose={() => close('presets')} />
-      <Notepad show={modals.notepad} onClose={() => close('notepad')} />
-      <Pomodoro
-        open={() => open('pomodoro')}
-        show={modals.pomodoro}
-        onClose={() => close('pomodoro')}
-      />
-      <BreathingExercise
-        show={modals.breathingExercise}
-        onClose={() => close('breathingExercise')}
-      />
       <SleepTimerModal
         show={modals.sleepTimer}
         onClose={() => close('sleepTimer')}

src/components/toolbox/breathing/breathing.module.css

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

src/components/toolbox/breathing/breathing.tsx

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

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

@@ -1,47 +0,0 @@
-.exercise {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 75px 0;
-  margin-top: 12px;
-  background-color: var(--color-neutral-50);
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 8px;
-
-  & .phase {
-    font-family: var(--font-display);
-    font-size: var(--font-lg);
-    font-weight: 600;
-  }
-
-  & .circle {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    z-index: -1;
-    height: 55%;
-    aspect-ratio: 1 / 1;
-    background-image: radial-gradient(
-      var(--color-neutral-50),
-      var(--color-neutral-100)
-    );
-    border: 1px solid var(--color-neutral-200);
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-
-.selectBox {
-  width: 100%;
-  min-width: 0;
-  height: 45px;
-  padding: 0 12px;
-  margin-top: 8px;
-  font-size: var(--font-sm);
-  color: var(--color-foreground);
-  background-color: var(--color-neutral-100);
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 8px;
-}

src/components/toolbox/breathing/exercise/exercise.tsx

@@ -1,122 +0,0 @@
-import { useState, useEffect } from 'react';
-import { motion } from 'framer-motion';
-
-import styles from './exercise.module.css';
-
-type Exercise = 'Box Breathing' | 'Resonant Breathing' | '4-7-8 Breathing';
-type Phase = 'inhale' | 'exhale' | 'holdInhale' | 'holdExhale';
-
-export function Exercise() {
-  const [selectedExercise, setSelectedExercise] =
-    useState<Exercise>('4-7-8 Breathing');
-
-  const getAnimationPhases = (
-    exercise: Exercise,
-  ): Array<'inhale' | 'holdInhale' | 'exhale' | 'holdExhale'> => {
-    switch (exercise) {
-      case 'Box Breathing':
-        return ['inhale', 'holdInhale', 'exhale', 'holdExhale'];
-      case 'Resonant Breathing':
-        return ['inhale', 'exhale'];
-      case '4-7-8 Breathing':
-        return ['inhale', 'holdInhale', 'exhale'];
-      default:
-        return ['inhale', 'holdInhale', 'exhale', 'holdExhale'];
-    }
-  };
-
-  const getAnimationDurations = (exercise: Exercise) => {
-    switch (exercise) {
-      case 'Box Breathing':
-        return { exhale: 4, holdExhale: 4, holdInhale: 4, inhale: 4 };
-      case 'Resonant Breathing':
-        return { exhale: 5, inhale: 5 };
-      case '4-7-8 Breathing':
-        return { exhale: 8, holdInhale: 7, inhale: 4 };
-      default:
-        return { exhale: 4, holdExhale: 4, holdInhale: 4, inhale: 4 };
-    }
-  };
-
-  const getLabel = (phase: Phase) => {
-    switch (phase) {
-      case 'inhale':
-        return 'Inhale';
-      case 'exhale':
-        return 'Exhale';
-      default:
-        return 'Hold';
-    }
-  };
-
-  const [phase, setPhase] = useState<Phase>('inhale');
-  const [durations, setDurations] = useState(
-    getAnimationDurations(selectedExercise),
-  );
-
-  const animationVariants = {
-    exhale: {
-      transform: 'translate(-50%, -50%) scale(1)',
-      transition: { duration: durations.exhale },
-    },
-    holdExhale: {
-      transform: 'translate(-50%, -50%) scale(1)',
-      transition: { duration: durations.holdExhale || 4 },
-    },
-    holdInhale: {
-      transform: 'translate(-50%, -50%) scale(1.5)',
-      transition: { duration: durations.holdInhale || 4 },
-    },
-    inhale: {
-      transform: 'translate(-50%, -50%) scale(1.5)',
-      transition: { duration: durations.inhale },
-    },
-  };
-
-  useEffect(() => {
-    setDurations(getAnimationDurations(selectedExercise));
-  }, [selectedExercise]);
-
-  useEffect(() => {
-    const phases = getAnimationPhases(selectedExercise);
-
-    let phaseIndex = 0;
-
-    setPhase(phases[phaseIndex]);
-
-    const interval = setInterval(
-      () => {
-        phaseIndex = (phaseIndex + 1) % phases.length;
-
-        setPhase(phases[phaseIndex]);
-      },
-      (durations[phases[phaseIndex]] || 4) * 1000,
-    );
-
-    return () => clearInterval(interval);
-  }, [selectedExercise, durations]);
-
-  return (
-    <>
-      <div className={styles.exercise}>
-        <motion.div
-          animate={phase}
-          className={styles.circle}
-          key={selectedExercise}
-          variants={animationVariants}
-        />
-        <p className={styles.phase}>{getLabel(phase)}</p>
-      </div>
-
-      <select
-        className={styles.selectBox}
-        value={selectedExercise}
-        onChange={e => setSelectedExercise(e.target.value as Exercise)}
-      >
-        <option value="Box Breathing">Box Breathing</option>
-        <option value="Resonant Breathing">Resonant Breathing</option>
-        <option value="4-7-8 Breathing">4-7-8 Breathing</option>
-      </select>
-    </>
-  );
-}

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

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

src/components/toolbox/breathing/index.ts

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

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

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

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

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

src/components/toolbox/index.ts

@@ -1,3 +0,0 @@
-export { Notepad } from './notepad';
-export { Pomodoro } from './pomodoro';
-export { BreathingExercise } from './breathing';

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

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

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

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

src/components/toolbox/notepad/index.ts

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

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

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

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

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

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

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

@@ -1,179 +0,0 @@
-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 '@/components/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

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

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

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

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

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

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

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

@@ -1,25 +0,0 @@
-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>
-  );
-}