added keyboard shortcuts

src/components/MainMenu.tsx

@@ -8,6 +8,7 @@ import vibrate from "../utils/Vibrate";
 import sound1 from "../assets/sounds/sound1.mp3";
 import sound2 from "../assets/sounds/sound2.mp3";
 import { inputSettings as lang } from "../utils/lang";
+import { useEventListener } from "usehooks-ts";
 
 export default function MainMenu() {
   const [totalRounds, currentRound, currentRoundIncrease] = useStore((state) => [state.roundsSelected, state.currentRound, state.currentRoundIncrease]);
@@ -120,6 +121,8 @@ export default function MainMenu() {
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [time]);
 
+  // functtion that detects arrow keys and spacebar to start and stop the timer and skip or go back to the previous interval
+
   return (
     <>
       <div className="mt-6 flex flex-col justify-center gap-2 min-[350px]:mx-auto 2xl:mt-8 2xl:gap-3">

src/components/MenuButtons.tsx

@@ -1,6 +1,8 @@
+import { useEventListener } from "usehooks-ts";
 import useStore from "../store/useStore";
 import Timer from "../utils/Timer";
 import Button from "./Button";
+import { Key } from "react";
 
 export default function MenuButtons() {
   const [setWorkTime, setRestTime, setPrepTime] = useStore((state) => [state.setWorkTime, state.setRestTime, state.setPrepTime]);
@@ -66,6 +68,22 @@ export default function MenuButtons() {
     },
   };
 
+  function onKeyDown(e: KeyboardEvent) {
+    const isInputFocused = ["INPUT", "TEXTAREA"].includes(document.activeElement?.nodeName ?? "") || document.activeElement?.hasAttribute("contenteditable");
+
+    if (e.key === " " && !isInputFocused) {
+      if (!timer) {
+        handleStart();
+      } else if (isPaused) {
+        handleStart();
+      } else {
+        handlePause();
+      }
+    }
+  }
+
+  useEventListener("keydown", onKeyDown);
+
   return (
     <div className="mt-2 flex items-center justify-center gap-1 xs:gap-2 sm:mt-4 sm:gap-4 2xl:mt-10">
       <Button

src/components/Progress.tsx

@@ -1,3 +1,4 @@
+import { useEventListener } from "usehooks-ts";
 import useStore from "../store/useStore";
 import Timer from "../utils/Timer";
 
@@ -131,6 +132,18 @@ export default function Progress() {
       }
     }
   }
+  function onKeyDown(e: KeyboardEvent) {
+    const isInputFocused = ["INPUT", "TEXTAREA"].includes(document.activeElement?.nodeName ?? "") || document.activeElement?.hasAttribute("contenteditable");
+
+    if (!isInputFocused) {
+      if (e.key === "ArrowLeft") {
+        handlePrev();
+      } else if (e.key === "ArrowRight") {
+        handleNext();
+      }
+    }
+  }
+  useEventListener("keydown", onKeyDown);
 
   return (
     <div className="mt-1 flex items-center justify-center gap-4 text-5xl sm:px-4 2xl:mt-10">

src/components/SaveTimer.tsx

@@ -1,6 +1,5 @@
 import useStore from "../store/useStore";
 import { useState, useEffect } from "react";
-import { v4 as uuidv4 } from "uuid";
 
 export default function SaveTimer() {
   const [timerName, setTimerName] = useState("");
@@ -29,7 +28,7 @@ export default function SaveTimer() {
 
     let data = {
       Title: timerName || `Timer ${timerStorage.length + 1}`,
-      id: uuidv4(),
+      id: Math.random().toString(36).substring(2, 15) + Date.now().toString(36),
       Rounds: Rounds,
       WorkMinutes: workMin,
       WorkSeconds: workSec,
@@ -42,6 +41,7 @@ export default function SaveTimer() {
       PrepColor: prepColor,
     };
 
+    console.log(data.id);
     localStorage.setItem("savedTimer", JSON.stringify([...timerStorage, data]));
     setSavedWorkouts([...timerStorage, data]);
     setTimerName("");
@@ -61,11 +61,10 @@ export default function SaveTimer() {
   };
 
   return (
-    <div className="mt-4 flex justify-center gap-4 md:mt-7 ">
+    <div className="mt-4 flex justify-center gap-4 md:mt-7">
       <input
         type="text"
-        className="placeholder:text-text-gray-300 } ml-2 w-2/4 text-ellipsis rounded-2xl border-2 border-gray-600 bg-black px-1 py-2 text-center text-white transition duration-300  hover:bg-neutral-900 focus-visible:border-gray-500 focus-visible:bg-neutral-800 focus-visible:outline-none focus-visible:placeholder:text-transparent xs:w-5/12
-      sm:w-3/12 "
+        className="placeholder:text-text-gray-300 } ml-2 w-2/4 text-ellipsis rounded-2xl border-2 border-gray-600 bg-black px-1 py-2 text-center text-white transition duration-300 hover:bg-neutral-900 focus-visible:border-gray-500 focus-visible:bg-neutral-800 focus-visible:outline-none focus-visible:placeholder:text-transparent xs:w-5/12 sm:w-3/12"
         id="workout-name"
         maxLength={25}
         placeholder={lang.placeholder[preferredLanguage]}

src/components/SidebarItem.tsx

@@ -52,7 +52,7 @@ export default function SidebarItem({ item }: { item: savedWorkoutType }) {
       ref={setNodeRef}
       {...attributes}
       {...listeners}
-      className={`relative mb-4 rounded-lg border border-gray-500 bg-neutral-900 px-16 py-2 text-base focus-visible:outline-none sm:px-6 md:px-6 xl:text-sm 2xl:px-10 2xl:py-4 2xl:text-base ${
+      className={`relative mb-4 rounded-lg border border-gray-500 bg-neutral-900 px-12 py-2 focus-visible:outline-none sm:px-6 md:px-4 md:py-3 2xl:px-6 ${
         isDragging ? "cursor-grab" : "cursor-pointer"
       }`}
       style={{
@@ -69,13 +69,13 @@ export default function SidebarItem({ item }: { item: savedWorkoutType }) {
       <div className="flex justify-center text-2xl">
         <span>{item.Title}</span>
       </div>
-      <div className="text-md grid grid-cols-1 justify-center gap-2   px-0 py-2 text-left sm:grid-cols-2 sm:gap-3 sm:gap-y-2 sm:py-4 sm:text-lg lg:gap-x-6 min-[1360px]:text-sm min-[1620px]:text-base">
-        <span className="order-1 text-center sm:order-none sm:pl-5 sm:text-left  ">
+      <div className="grid grid-cols-1 justify-center gap-2 px-0 py-2 text-left sm:grid-cols-2 sm:gap-5 sm:gap-y-1 sm:py-4">
+        <span className="order-1 text-center sm:order-none sm:pl-5 sm:text-left">
           {lang.rounds[preferredLanguage]} {item.Rounds}
         </span>
 
-        <div className="order-2 flex items-center  gap-2 sm:order-none">
-          <span className={`inline-block h-3 w-3 rounded-full `} style={{ backgroundColor: item.WorkColor }}></span>
+        <div className="order-2 flex items-center gap-2 sm:order-none">
+          <span className={`inline-block h-3 w-3 rounded-full`} style={{ backgroundColor: item.WorkColor }}></span>
           <span>
             {lang.work[preferredLanguage]} {`${item.WorkMinutes}:${item.WorkSeconds}`}
           </span>
@@ -97,7 +97,7 @@ export default function SidebarItem({ item }: { item: savedWorkoutType }) {
       <div className="flex justify-center">
         <button
           onClick={() => handleLoad(item.id)}
-          className="rounded-lg  bg-blue-500 px-2 py-1 font-medium text-black transition duration-200 hover:bg-blue-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900 "
+          className="rounded-lg bg-blue-500 px-2 py-1 font-medium text-black transition duration-200 hover:bg-blue-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
         >
           Load
         </button>

src/components/TimerApp.tsx

@@ -31,7 +31,7 @@ export default function TimerApp() {
 
   return (
     <section
-      className="relative mx-auto mt-3 flex w-full max-w-sm flex-col rounded-xl border border-gray-500 bg-neutral-950 px-0 py-2 text-center max-md:pb-4 xs:max-w-lg xs:px-2 sm:mt-5 sm:max-w-xl sm:px-4 lg:max-w-[41rem] 2xl:mt-10 2xl:max-w-3xl 2xl:py-12"
+      className="relative mx-auto mt-3 flex w-full max-w-sm flex-col rounded-xl border border-gray-500 bg-neutral-950 px-0 py-2 text-center max-md:pb-4 xs:max-w-lg xs:px-2 sm:mt-5 sm:max-w-xl sm:px-4 md:pb-8 lg:max-w-[41rem] 2xl:mt-10 2xl:max-w-3xl 2xl:py-12"
       style={{
         borderColor: enableBackgroundColors && removeBorders ? "transparent" : mainTimerBorder,
         borderWidth: mainTimerBorder === "#787777" ? "1px" : "3px",

src/components/inputs/InputNumber.tsx

@@ -79,22 +79,16 @@ export default function InputNumber(props: InputNumberProps) {
   }
 
   return (
-    <div className={`${nogap ? "" : "xs:gap-3 lg:gap-4"} flex items-center justify-center max-[360px]:gap-1 `}>
+    <div className={`${nogap ? "" : "xs:gap-3 lg:gap-4"} flex items-center justify-center max-[360px]:gap-1`}>
       <label
         htmlFor={label + Math.random()}
-        className={`${nogap ? "px-2 max-[360px]:pr-1 " : "w-24 max-[360px]:w-16 "}
-          text-center text-sm text-gray-200 xs:text-base  sm:text-lg lg:text-xl`}
+        className={`${nogap ? "px-2 max-[360px]:pr-1" : "w-24 max-[360px]:w-16"} text-center text-sm text-gray-200 xs:text-base sm:text-lg lg:text-xl`}
       >
         {label}
       </label>
       <div className="flex items-center">
         <input
-          className={`h-12 w-11 min-w-[2.5rem] rounded-l-lg border border-r border-neutral-600 bg-neutral-800
-          px-2 text-center text-xl focus:border-gray-500 focus:bg-[#313030] focus:font-medium
-          focus:outline-none max-[360px]:text-base xs:w-14 
-          ${isLoadingSavedTimer ? "bg-[#2b2a2a]" : "bg-[#242424]"} 
-          ${isFocused ? "font-medium" : "font-normal"}
-          ${className}`}
+          className={`h-12 w-11 min-w-[2.5rem] rounded-l-lg border border-r border-neutral-600 bg-neutral-800 px-2 text-center text-xl focus:border-gray-500 focus:bg-[#313030] focus:font-medium focus:outline-none max-[360px]:text-base xs:w-14 ${isLoadingSavedTimer ? "bg-[#313131]" : "bg-[#242424]"} ${isFocused ? "font-medium" : "font-normal"} ${className}`}
           type="number"
           id={label + Math.random()}
           name={label}
@@ -115,7 +109,7 @@ export default function InputNumber(props: InputNumberProps) {
             +
           </button>
           <button
-            className="flex h-1/2 w-5 items-center justify-center rounded-br-md hover:bg-neutral-700 "
+            className="flex h-1/2 w-5 items-center justify-center rounded-br-md hover:bg-neutral-700"
             onMouseLeave={timeoutClear}
             onMouseUp={timeoutClear}
             onMouseDown={decrementHold}