mirror of
https://github.com/remvze/moodist.git
synced 2025-12-17 17:04:15 +00:00
feat: remove all extra tools
This commit is contained in:
MAZE
parent
13d26b3337
commit
973e0df6fb
54 changed files with 0 additions and 1793 deletions
|
|
@ -1,18 +0,0 @@
|
||||||
import { IoMdFlower } from 'react-icons/io/index';
|
|
||||||
|
|
||||||
import { Item } from '../item';
|
|
||||||
|
|
||||||
interface BreathingExerciseProps {
|
|
||||||
open: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function BreathingExercise({ open }: BreathingExerciseProps) {
|
|
||||||
return (
|
|
||||||
<Item
|
|
||||||
icon={<IoMdFlower />}
|
|
||||||
label="Breathing Exercise"
|
|
||||||
shortcut="Shift + B"
|
|
||||||
onClick={open}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
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}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -5,8 +5,3 @@ export { Source as SourceItem } from './source';
|
||||||
export { Presets as PresetsItem } from './presets';
|
export { Presets as PresetsItem } from './presets';
|
||||||
export { Shortcuts as ShortcutsItem } from './shortcuts';
|
export { Shortcuts as ShortcutsItem } from './shortcuts';
|
||||||
export { SleepTimer as SleepTimerItem } from './sleep-timer';
|
export { SleepTimer as SleepTimerItem } from './sleep-timer';
|
||||||
export { Notepad as NotepadItem } from './notepad';
|
|
||||||
export { Pomodoro as PomodoroItem } from './pomodoro';
|
|
||||||
export { Countdown as CountdownItem } from './countdown';
|
|
||||||
export { BreathingExercise as BreathingExerciseItem } from './breathing-exercise';
|
|
||||||
export { Todo as TodoItem } from './todo';
|
|
||||||
|
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
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}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
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}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
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}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -12,19 +12,12 @@ import {
|
||||||
PresetsItem,
|
PresetsItem,
|
||||||
ShortcutsItem,
|
ShortcutsItem,
|
||||||
SleepTimerItem,
|
SleepTimerItem,
|
||||||
NotepadItem,
|
|
||||||
PomodoroItem,
|
|
||||||
CountdownItem,
|
|
||||||
BreathingExerciseItem,
|
|
||||||
TodoItem,
|
|
||||||
} from './items';
|
} from './items';
|
||||||
import { Divider } from './divider';
|
import { Divider } from './divider';
|
||||||
import { ShareLinkModal } from '@/components/modals/share-link';
|
import { ShareLinkModal } from '@/components/modals/share-link';
|
||||||
import { PresetsModal } from '@/components/modals/presets';
|
import { PresetsModal } from '@/components/modals/presets';
|
||||||
import { ShortcutsModal } from '@/components/modals/shortcuts';
|
import { ShortcutsModal } from '@/components/modals/shortcuts';
|
||||||
import { SleepTimerModal } from '@/components/modals/sleep-timer';
|
import { SleepTimerModal } from '@/components/modals/sleep-timer';
|
||||||
import { BreathingExerciseModal } from '../modals/breathing';
|
|
||||||
import { Notepad, Countdown, Pomodoro, Todo } from '../toolbox';
|
|
||||||
import { fade, mix, slideY } from '@/lib/motion';
|
import { fade, mix, slideY } from '@/lib/motion';
|
||||||
import { useSoundStore } from '@/stores/sound';
|
import { useSoundStore } from '@/stores/sound';
|
||||||
|
|
||||||
|
|
@ -117,13 +110,6 @@ export function Menu() {
|
||||||
<ShuffleItem />
|
<ShuffleItem />
|
||||||
<SleepTimerItem open={() => open('sleepTimer')} />
|
<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 />
|
<Divider />
|
||||||
<ShortcutsItem open={() => open('shortcuts')} />
|
<ShortcutsItem open={() => open('shortcuts')} />
|
||||||
|
|
||||||
|
|
@ -146,18 +132,6 @@ export function Menu() {
|
||||||
show={modals.shortcuts}
|
show={modals.shortcuts}
|
||||||
onClose={() => close('shortcuts')}
|
onClose={() => close('shortcuts')}
|
||||||
/>
|
/>
|
||||||
<BreathingExerciseModal
|
|
||||||
show={modals.breathing}
|
|
||||||
onClose={() => close('breathing')}
|
|
||||||
/>
|
|
||||||
<Notepad show={modals.notepad} onClose={() => close('notepad')} />
|
|
||||||
<Todo show={modals.todo} onClose={() => close('todo')} />
|
|
||||||
<Countdown show={modals.countdown} onClose={() => close('countdown')} />
|
|
||||||
<Pomodoro
|
|
||||||
open={() => open('pomodoro')}
|
|
||||||
show={modals.pomodoro}
|
|
||||||
onClose={() => close('pomodoro')}
|
|
||||||
/>
|
|
||||||
<PresetsModal show={modals.presets} onClose={() => close('presets')} />
|
<PresetsModal show={modals.presets} onClose={() => close('presets')} />
|
||||||
<SleepTimerModal
|
<SleepTimerModal
|
||||||
show={modals.sleepTimer}
|
show={modals.sleepTimer}
|
||||||
|
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
/* WIP */
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
import { Modal } from '@/components/modal';
|
|
||||||
import { Exercise } from './exercise';
|
|
||||||
|
|
||||||
import styles from './breathing.module.css';
|
|
||||||
|
|
||||||
interface TimerProps {
|
|
||||||
onClose: () => void;
|
|
||||||
show: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function BreathingExerciseModal({ onClose, show }: TimerProps) {
|
|
||||||
return (
|
|
||||||
<Modal show={show} onClose={onClose}>
|
|
||||||
<h2 className={styles.title}>Breathing Exercise</h2>
|
|
||||||
<Exercise />
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,91 +0,0 @@
|
||||||
.exercise {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 75px 0;
|
|
||||||
margin-top: 12px;
|
|
||||||
background-color: var(--color-neutral-50);
|
|
||||||
border: 1px solid var(--color-neutral-200);
|
|
||||||
border-radius: 8px;
|
|
||||||
|
|
||||||
& .timer {
|
|
||||||
position: absolute;
|
|
||||||
top: 4px;
|
|
||||||
left: 4px;
|
|
||||||
padding: 4px 12px;
|
|
||||||
font-size: var(--font-xsm);
|
|
||||||
color: var(--color-foreground-subtle);
|
|
||||||
background: linear-gradient(
|
|
||||||
var(--color-neutral-100),
|
|
||||||
var(--color-neutral-50)
|
|
||||||
);
|
|
||||||
border: 1px solid var(--color-neutral-200);
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .phase {
|
|
||||||
font-family: var(--font-display);
|
|
||||||
font-size: var(--font-lg);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .circle {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
z-index: -1;
|
|
||||||
height: 55%;
|
|
||||||
aspect-ratio: 1 / 1;
|
|
||||||
background-image: radial-gradient(
|
|
||||||
var(--color-neutral-50),
|
|
||||||
var(--color-neutral-100)
|
|
||||||
);
|
|
||||||
border: 1px solid var(--color-neutral-200);
|
|
||||||
border-radius: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectWrapper {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 45px;
|
|
||||||
padding: 0 12px;
|
|
||||||
margin-top: 8px;
|
|
||||||
background-color: var(--color-neutral-50);
|
|
||||||
border: 1px solid var(--color-neutral-200);
|
|
||||||
border-radius: 8px;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
top: -1px;
|
|
||||||
left: 50%;
|
|
||||||
width: 80%;
|
|
||||||
height: 1px;
|
|
||||||
content: '';
|
|
||||||
background: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
transparent,
|
|
||||||
var(--color-neutral-300),
|
|
||||||
transparent
|
|
||||||
);
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
& .selectBox {
|
|
||||||
width: 100%;
|
|
||||||
min-width: 0;
|
|
||||||
height: 100%;
|
|
||||||
font-size: var(--font-sm);
|
|
||||||
color: var(--color-foreground);
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
|
|
||||||
& option {
|
|
||||||
color: var(--color-neutral-50);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,126 +0,0 @@
|
||||||
import { useState, useEffect, useMemo, useCallback } from 'react';
|
|
||||||
import { motion } from 'framer-motion';
|
|
||||||
|
|
||||||
import { padNumber } from '@/helpers/number';
|
|
||||||
|
|
||||||
import styles from './exercise.module.css';
|
|
||||||
|
|
||||||
type Exercise = 'Box Breathing' | 'Resonant Breathing' | '4-7-8 Breathing';
|
|
||||||
type Phase = 'inhale' | 'exhale' | 'holdInhale' | 'holdExhale';
|
|
||||||
|
|
||||||
const EXERCISE_PHASES: Record<Exercise, Phase[]> = {
|
|
||||||
'4-7-8 Breathing': ['inhale', 'holdInhale', 'exhale'],
|
|
||||||
'Box Breathing': ['inhale', 'holdInhale', 'exhale', 'holdExhale'],
|
|
||||||
'Resonant Breathing': ['inhale', 'exhale'],
|
|
||||||
};
|
|
||||||
|
|
||||||
const EXERCISE_DURATIONS: Record<Exercise, Partial<Record<Phase, number>>> = {
|
|
||||||
'4-7-8 Breathing': { exhale: 8, holdInhale: 7, inhale: 4 },
|
|
||||||
'Box Breathing': { exhale: 4, holdExhale: 4, holdInhale: 4, inhale: 4 },
|
|
||||||
'Resonant Breathing': { exhale: 5, inhale: 5 }, // No holdExhale
|
|
||||||
};
|
|
||||||
|
|
||||||
const PHASE_LABELS: Record<Phase, string> = {
|
|
||||||
exhale: 'Exhale',
|
|
||||||
holdExhale: 'Hold',
|
|
||||||
holdInhale: 'Hold',
|
|
||||||
inhale: 'Inhale',
|
|
||||||
};
|
|
||||||
|
|
||||||
export function Exercise() {
|
|
||||||
const [selectedExercise, setSelectedExercise] =
|
|
||||||
useState<Exercise>('4-7-8 Breathing');
|
|
||||||
const [phaseIndex, setPhaseIndex] = useState(0);
|
|
||||||
|
|
||||||
const phases = useMemo(
|
|
||||||
() => EXERCISE_PHASES[selectedExercise],
|
|
||||||
[selectedExercise],
|
|
||||||
);
|
|
||||||
const durations = useMemo(
|
|
||||||
() => EXERCISE_DURATIONS[selectedExercise],
|
|
||||||
[selectedExercise],
|
|
||||||
);
|
|
||||||
|
|
||||||
const currentPhase = phases[phaseIndex];
|
|
||||||
|
|
||||||
const animationVariants = useMemo(
|
|
||||||
() => ({
|
|
||||||
exhale: {
|
|
||||||
transform: 'translate(-50%, -50%) scale(1)',
|
|
||||||
transition: { duration: durations.exhale },
|
|
||||||
},
|
|
||||||
holdExhale: {
|
|
||||||
transform: 'translate(-50%, -50%) scale(1)',
|
|
||||||
transition: { duration: durations.holdExhale },
|
|
||||||
},
|
|
||||||
holdInhale: {
|
|
||||||
transform: 'translate(-50%, -50%) scale(1.5)',
|
|
||||||
transition: { duration: durations.holdInhale },
|
|
||||||
},
|
|
||||||
inhale: {
|
|
||||||
transform: 'translate(-50%, -50%) scale(1.5)',
|
|
||||||
transition: { duration: durations.inhale },
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
[durations],
|
|
||||||
);
|
|
||||||
|
|
||||||
const resetExercise = useCallback(() => {
|
|
||||||
setPhaseIndex(0);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const updatePhase = useCallback(() => {
|
|
||||||
setPhaseIndex(prevIndex => (prevIndex + 1) % phases.length);
|
|
||||||
}, [phases.length]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
resetExercise();
|
|
||||||
}, [selectedExercise, resetExercise]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const intervalDuration = (durations[currentPhase] || 4) * 1000;
|
|
||||||
const interval = setInterval(updatePhase, intervalDuration);
|
|
||||||
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}, [currentPhase, durations, updatePhase]);
|
|
||||||
|
|
||||||
const [timer, setTimer] = useState(0);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const interval = setInterval(() => setTimer(prev => prev + 1), 1000);
|
|
||||||
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className={styles.exercise}>
|
|
||||||
<div className={styles.timer}>
|
|
||||||
{padNumber(Math.floor(timer / 60))}:{padNumber(timer % 60)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
animate={currentPhase}
|
|
||||||
className={styles.circle}
|
|
||||||
key={selectedExercise}
|
|
||||||
variants={animationVariants}
|
|
||||||
/>
|
|
||||||
<p className={styles.phase}>{PHASE_LABELS[currentPhase]}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.selectWrapper}>
|
|
||||||
<select
|
|
||||||
className={styles.selectBox}
|
|
||||||
value={selectedExercise}
|
|
||||||
onChange={e => setSelectedExercise(e.target.value as Exercise)}
|
|
||||||
>
|
|
||||||
{Object.keys(EXERCISE_PHASES).map(exercise => (
|
|
||||||
<option key={exercise} value={exercise}>
|
|
||||||
{exercise}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { Exercise } from './exercise';
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { BreathingExerciseModal } from './breathing';
|
|
||||||
|
|
@ -25,10 +25,6 @@ export function ShortcutsModal({ onClose, show }: ShortcutsModalProps) {
|
||||||
keys: ['Shift', 'T'],
|
keys: ['Shift', 'T'],
|
||||||
label: 'Sleep Timer',
|
label: 'Sleep Timer',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
keys: ['Shift', 'B'],
|
|
||||||
label: 'Breathing Exercise',
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
keys: ['Shift', 'Space'],
|
keys: ['Shift', 'Space'],
|
||||||
label: 'Toggle Play',
|
label: 'Toggle Play',
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
import { useSoundStore } from '@/stores/sound';
|
import { useSoundStore } from '@/stores/sound';
|
||||||
import { useNoteStore } from '@/stores/note';
|
|
||||||
import { usePresetStore } from '@/stores/preset';
|
import { usePresetStore } from '@/stores/preset';
|
||||||
|
|
||||||
interface StoreConsumerProps {
|
interface StoreConsumerProps {
|
||||||
|
|
@ -11,7 +10,6 @@ interface StoreConsumerProps {
|
||||||
export function StoreConsumer({ children }: StoreConsumerProps) {
|
export function StoreConsumer({ children }: StoreConsumerProps) {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
useSoundStore.persist.rehydrate();
|
useSoundStore.persist.rehydrate();
|
||||||
useNoteStore.persist.rehydrate();
|
|
||||||
usePresetStore.persist.rehydrate();
|
usePresetStore.persist.rehydrate();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,128 +0,0 @@
|
||||||
.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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,148 +0,0 @@
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { Countdown } from './countdown';
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { Button } from './button';
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
export { Notepad } from './notepad';
|
|
||||||
export { Pomodoro } from './pomodoro';
|
|
||||||
export { Todo } from './todo';
|
|
||||||
export { Countdown } from './countdown';
|
|
||||||
|
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { Button } from './button';
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { Notepad } from './notepad';
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { Pomodoro } from './pomodoro';
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { Setting } from './setting';
|
|
||||||
|
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { Tabs } from './tabs';
|
|
||||||
|
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
.wrapper {
|
|
||||||
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;
|
|
||||||
|
|
||||||
& 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);
|
|
||||||
color: var(--color-foreground);
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: var(--color-neutral-100);
|
|
||||||
border: 1px solid var(--color-neutral-200);
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
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
|
|
||||||
type="text"
|
|
||||||
value={value}
|
|
||||||
onChange={e => setValue(e.target.value)}
|
|
||||||
/>
|
|
||||||
<button type="submit">Add</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { Form } from './form';
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { Todo } from './todo';
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
/* WIP */
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
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}>
|
|
||||||
<h2 className={styles.title}>Todos</h2>
|
|
||||||
<Form />
|
|
||||||
<Todos />
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { Todos } from './todos';
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { Todo } from './todo';
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
/* WIP */
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
import { Todo } from './todo';
|
|
||||||
|
|
||||||
import { useTodoStore } from '@/stores/todo';
|
|
||||||
|
|
||||||
import styles from './todos.module.css';
|
|
||||||
|
|
||||||
export function Todos() {
|
|
||||||
const todos = useTodoStore(state => state.todos);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={styles.todos}>
|
|
||||||
{todos.map(todo => (
|
|
||||||
<Todo done={todo.done} id={todo.id} key={todo.id} todo={todo.todo} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
import { create } from 'zustand';
|
|
||||||
import { createJSONStorage, persist } from 'zustand/middleware';
|
|
||||||
import merge from 'deepmerge';
|
|
||||||
|
|
||||||
import { type NoteState, createState } from './note.state';
|
|
||||||
import { type NoteActions, createActions } from './note.actions';
|
|
||||||
|
|
||||||
export const useNoteStore = create<NoteState & NoteActions>()(
|
|
||||||
persist(
|
|
||||||
(...a) => ({
|
|
||||||
...createState(...a),
|
|
||||||
...createActions(...a),
|
|
||||||
}),
|
|
||||||
{
|
|
||||||
merge: (persisted, current) =>
|
|
||||||
merge(
|
|
||||||
current,
|
|
||||||
// @ts-ignore
|
|
||||||
persisted,
|
|
||||||
),
|
|
||||||
name: 'moodist-note',
|
|
||||||
partialize: state => ({ note: state.note }),
|
|
||||||
skipHydration: true,
|
|
||||||
storage: createJSONStorage(() => localStorage),
|
|
||||||
version: 0,
|
|
||||||
},
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
import type { StateCreator } from 'zustand';
|
|
||||||
|
|
||||||
import type { NoteState } from './note.state';
|
|
||||||
|
|
||||||
export interface NoteActions {
|
|
||||||
clear: () => void;
|
|
||||||
restore: () => void;
|
|
||||||
write: (note: string) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const createActions: StateCreator<
|
|
||||||
NoteActions & NoteState,
|
|
||||||
[],
|
|
||||||
[],
|
|
||||||
NoteActions
|
|
||||||
> = (set, get) => {
|
|
||||||
return {
|
|
||||||
clear() {
|
|
||||||
if (!get().note) return;
|
|
||||||
|
|
||||||
set({ history: get().note, note: '' });
|
|
||||||
},
|
|
||||||
|
|
||||||
restore() {
|
|
||||||
if (!get().history) return;
|
|
||||||
|
|
||||||
set({ history: null, note: get().history! });
|
|
||||||
},
|
|
||||||
|
|
||||||
write(note) {
|
|
||||||
set({ history: null, note });
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
import type { StateCreator } from 'zustand';
|
|
||||||
|
|
||||||
import type { NoteActions } from './note.actions';
|
|
||||||
import { count } from '@/helpers/counter';
|
|
||||||
|
|
||||||
export interface NoteState {
|
|
||||||
characters: () => number;
|
|
||||||
history: string | null;
|
|
||||||
note: string;
|
|
||||||
words: () => number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const createState: StateCreator<
|
|
||||||
NoteState & NoteActions,
|
|
||||||
[],
|
|
||||||
[],
|
|
||||||
NoteState
|
|
||||||
> = (set, get) => ({
|
|
||||||
characters() {
|
|
||||||
return count(get().note).characters;
|
|
||||||
},
|
|
||||||
history: null,
|
|
||||||
note: '',
|
|
||||||
words() {
|
|
||||||
return count(get().note).words;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
import { create } from 'zustand';
|
|
||||||
|
|
||||||
interface PomodoroStore {
|
|
||||||
running: boolean;
|
|
||||||
setRunning: (value: boolean) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const usePomodoroStore = create<PomodoroStore>()(set => ({
|
|
||||||
running: false,
|
|
||||||
setRunning(value: boolean) {
|
|
||||||
set({ running: value });
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
@ -1,81 +0,0 @@
|
||||||
import { create } from 'zustand';
|
|
||||||
import { createJSONStorage, persist } from 'zustand/middleware';
|
|
||||||
import merge from 'deepmerge';
|
|
||||||
import { v4 as uuid } from 'uuid';
|
|
||||||
|
|
||||||
interface TodoStore {
|
|
||||||
addTodo: (todo: string) => void;
|
|
||||||
deleteTodo: (id: string) => void;
|
|
||||||
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),
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
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,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{
|
|
||||||
merge: (persisted, current) =>
|
|
||||||
merge(current, persisted as Partial<TodoStore>),
|
|
||||||
|
|
||||||
name: 'moodist-todos',
|
|
||||||
partialize: state => ({ todos: state.todos }),
|
|
||||||
skipHydration: true,
|
|
||||||
storage: createJSONStorage(() => localStorage),
|
|
||||||
version: 0,
|
|
||||||
},
|
|
||||||
),
|
|
||||||
);
|
|
||||||
Loading…
Add table
Reference in a new issue