feat: add active indicator for sleep timer

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

@@ -1,5 +1,6 @@
 import { IoMoonSharp } from 'react-icons/io5/index';
 
+import { useSleepTimerStore } from '@/stores/sleep-timer';
 import { Item } from '../item';
 
 interface SleepTimerProps {
@@ -7,8 +8,11 @@ interface SleepTimerProps {
 }
 
 export function SleepTimer({ open }: SleepTimerProps) {
+  const active = useSleepTimerStore(state => state.active);
+
   return (
     <Item
+      active={active}
       icon={<IoMoonSharp />}
       label="Sleep Timer"
       shortcut="Shift + T"

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

@@ -6,6 +6,7 @@ import { dispatch } from '@/lib/event';
 import { useSoundStore } from '@/stores/sound';
 import { cn } from '@/helpers/styles';
 import { FADE_OUT } from '@/constants/events';
+import { useSleepTimerStore } from '@/stores/sleep-timer';
 
 import styles from './sleep-timer.module.css';
 
@@ -15,8 +16,12 @@ interface SleepTimerModalProps {
 }
 
 export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
+  const setActive = useSleepTimerStore(state => state.set);
+
   const [running, setRunning] = useState(false);
 
+  useEffect(() => setActive(running), [running, setActive]);
+
   const [hours, setHours] = useState<string>('0');
   const [minutes, setMinutes] = useState<string>('10');
 

src/stores/sleep-timer/index.ts

@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+
+interface SleepTimerStore {
+  active: boolean;
+  set: (value: boolean) => void;
+}
+
+export const useSleepTimerStore = create<SleepTimerStore>()(set => ({
+  active: false,
+  set(value: boolean) {
+    set({ active: value });
+  },
+}));