fix: fix button disabled and reset to 0

src/components/generic/button/button.module.css

@@ -26,4 +26,9 @@
   &.smallIcon {
     font-size: var(--font-xsm);
   }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
 }

src/components/generic/button/button.tsx

@@ -5,17 +5,25 @@ 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({ icon, onClick, smallIcon, tooltip }: ButtonProps) {
+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}

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

@@ -61,6 +61,8 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
   const handleReset = () => {
     if (timerId.current) clearInterval(timerId.current);
     setTimeLeft(0);
+    setHours('0');
+    setMinutes('0');
     setRunning(false);
   };
 
@@ -114,6 +116,7 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
           />
           {!running && (
             <Button
+              disabled={calculateTotalSeconds() <= 0}
               icon={<FaPlay />}
               smallIcon
               tooltip={'Start'}