improved drag and drop functionality and added more accessibility sup…

…port

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

src/components/Button.jsx

@@ -13,8 +13,8 @@ export default function Button(props) {
       w-[5.5rem] xs:w-28 sm:w-36 lg:w-40 
       text-black  py-2 xs:px-2 text-center rounded-3xl
     border border-1 border-black hover:border-neutral-950
-    transition-colors duration-200 focus:outline-none focus:border-transparent
-    disabled:focus-border-transparent 
+    transition-colors duration-200 focus-visible:outline-none focus-visible:border-transparent
+    disabled:focus-visible-border-transparent focus-visible:scale-110
     `}
     >
       {text}

src/components/ClearInput.jsx

@@ -18,7 +18,7 @@ export default function ClearInput() {
   };
   return (
     <div className="group relative flex justify-center items-center mx-3">
-      <button onClick={handleClear} className="rounded  py-1 text-sm shadow-sm focus:outline-none">
+      <button onClick={handleClear} className="rounded  py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring focus-visible:ring-neutral-700">
         <img src={ClearIcon} alt="Clear Icon" className="min-w-fit w-6" width="24" height="24" />
       </button>
 

src/components/SaveTimer.jsx

@@ -64,7 +64,7 @@ export default function SaveTimer() {
     <div className="mt-7 flex justify-center gap-4 ">
       <input
         type="text"
-        className="placeholder:text-text-gray-300 w-2/4  xs:w-5/12 sm:w-3/12  ml-2 text-white bg-black border-2 text-ellipsis border-gray-600 rounded-2xl py-2 px-1 text-center focus:bg-neutral-800  hover:bg-neutral-900 focus:outline-none focus:border-gray-500 focus:placeholder:text-transparent transition duration-300
+        className="placeholder:text-text-gray-300 w-2/4  xs:w-5/12 sm:w-3/12  ml-2 text-white bg-black border-2 text-ellipsis border-gray-600 rounded-2xl py-2 px-1 text-center focus-visible:bg-neutral-800  hover:bg-neutral-900 focus-visible:outline-none focus-visible:border-gray-500 focus-visible:placeholder:text-transparent transition duration-300
       } "
         id="workout-name"
         maxLength="25"
@@ -74,7 +74,7 @@ export default function SaveTimer() {
       />
       <button
         onClick={handleSaveTimer}
-        className="rounded-2xl px-2 text-center text-blue-400 hover:text-blue-500/90 text-md  sm:text-xl bg-neutral-800  cursor-pointer hover:bg-neutral-700/70 transition duration-300"
+        className="rounded-2xl px-2 text-center text-blue-400 hover:text-blue-500/90 text-md sm:text-xl bg-neutral-800 cursor-pointer hover:bg-neutral-700/70 transition duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
       >
         {lang.save[preferredLanguage]}
       </button>

src/components/Sidebar.jsx

@@ -1,10 +1,69 @@
+// import useStore from "../store/useStore";
+
+// import { DndContext, PointerSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+// import { SortableContext, arrayMove } from "@dnd-kit/sortable";
+// import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+// import SidebarItem from "./SidebarItem";
+
+// export default function Sidebar() {
+//   const savedWorkouts = useStore((state) => state.savedWorkouts);
+//   const setSavedWorkouts = useStore((state) => state.setSavedWorkouts);
+
+//   const pointerSensor = useSensor(PointerSensor, {
+//     activationConstraint: {
+//       distance: 8,
+//     },
+//   });
+//   const touchSensor = useSensor(TouchSensor, {
+//     activationConstraint: {
+//       delay: 250,
+//       tolerance: 5,
+//     },
+//   });
+
+//   const sensors = useSensors(pointerSensor, touchSensor);
+
+//   function handleDragEnd(e) {
+//     const { active, over } = e;
+//     if (active.id !== over.id) {
+//       const currentItems = [...savedWorkouts];
+
+//       const oldIndex = currentItems.findIndex((i) => i.id === active.id);
+//       const newIndex = currentItems.findIndex((i) => i.id === over.id);
+
+//       const newArray = arrayMove(currentItems, oldIndex, newIndex);
+//       localStorage.setItem("savedTimer", JSON.stringify(newArray));
+
+//       setSavedWorkouts(newArray);
+//     }
+//   }
+
+//   return (
+//     <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd} modifiers={[restrictToVerticalAxis]}>
+//       <aside className="flex justify-center min-[1360px]:fixed mt-5 xl:mt-4 2xl:mt-9 2xl:pl-1 max-h-[95%] xl:overflow-y-auto pr-2 ">
+//         <section className="2xl:px-2 py-1 2xl-px-4 flex flex-col gap-6 ">
+//           <SortableContext items={savedWorkouts}>
+//             {savedWorkouts.map((i) => (
+//               <SidebarItem item={i} key={i.id} />
+//             ))}
+//           </SortableContext>
+//         </section>
+//       </aside>
+//     </DndContext>
+//   );
+// }
+
 import useStore from "../store/useStore";
 
 import { DndContext, PointerSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, arrayMove } from "@dnd-kit/sortable";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import SidebarItem from "./SidebarItem";
+import { func } from "prop-types";
+import { useState } from "react";
 
 export default function Sidebar() {
+  const [isDragging, setIsDragging] = useState(false);
   const savedWorkouts = useStore((state) => state.savedWorkouts);
   const setSavedWorkouts = useStore((state) => state.setSavedWorkouts);
 
@@ -23,6 +82,7 @@ export default function Sidebar() {
   const sensors = useSensors(pointerSensor, touchSensor);
 
   function handleDragEnd(e) {
+    setIsDragging(false);
     const { active, over } = e;
     if (active.id !== over.id) {
       const currentItems = [...savedWorkouts];
@@ -36,16 +96,21 @@ export default function Sidebar() {
       setSavedWorkouts(newArray);
     }
   }
+  function handleDragStart(e) {
+    setIsDragging(true);
+  }
 
   return (
-    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-      <aside className="flex justify-center min-[1360px]:fixed mt-5 xl:mt-4 2xl:mt-9 2xl:pl-1 max-h-[95%]  xl:overflow-y-auto pr-2 ">
-        <section className="2xl:px-2 py-1 2xl-px-4 flex flex-col gap-6 ">
-          <SortableContext items={savedWorkouts}>
-            {savedWorkouts.map((i) => (
-              <SidebarItem item={i} key={i.id} />
-            ))}
-          </SortableContext>
+    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd} modifiers={[restrictToVerticalAxis]} onDragStart={handleDragStart}>
+      <aside className="flex justify-center min-[1360px]:fixed mt-5 xl:mt-4 2xl:mt-9 2xl:pl-1 ">
+        <section className="2xl:px-2 py-1 2xl-px-4 flex flex-col gap-6">
+          <div className="max-h-[95vh] xl:overflow-y-auto pr-1 2xl:pr-2">
+            <SortableContext items={savedWorkouts}>
+              {savedWorkouts.map((i) => (
+                <SidebarItem key={i.id} item={i} />
+              ))}
+            </SortableContext>
+          </div>
         </section>
       </aside>
     </DndContext>

src/components/SidebarItem.jsx

@@ -53,11 +53,12 @@ export default function SidebarItem({ item }) {
       ref={setNodeRef}
       {...attributes}
       {...listeners}
-      className="relative bg-neutral-900 px-16 sm:px-6 md:px-6  2xl:px-10 py-2  2xl:py-4 rounded-lg  border border-gray-500  text-base xl:text-sm 2xl:text-base"
+      className="relative bg-neutral-900 px-16 sm:px-6 md:px-6 2xl:px-10 py-2 mb-4 2xl:py-4 rounded-lg border border-gray-500 text-base xl:text-sm 2xl:text-base focus-visible:outline-none"
       style={{ ...style, borderColor: enableBackgroundColors && removeBorders ? "transparent" : "" }}
+      tabIndex={-1}
     >
       <div className="p-2 px-3 absolute top-0 right-0">
-        <button onClick={() => handleDelete(item.id)}>
+        <button onClick={() => handleDelete(item.id)} className="focus-visible:outline-none focus:scale-110">
           <img src={CloseIcon} alt="close" className="w-6" width="24" height="24" />
         </button>
       </div>
@@ -69,7 +70,7 @@ export default function SidebarItem({ item }) {
           {lang.rounds[preferredLanguage]} {item.Rounds}
         </span>
 
-        <div className="order-2  sm:order-none flex  gap-2 items-center">
+        <div className="order-2 sm:order-none flex  gap-2 items-center">
           <span className={`rounded-full w-3 h-3 inline-block `} style={{ backgroundColor: item.WorkColor }}></span>
           <span>
             {lang.work[preferredLanguage]} {`${item.WorkMinutes}:${item.WorkSeconds}`}
@@ -90,7 +91,10 @@ export default function SidebarItem({ item }) {
         </div>
       </div>
       <div className="flex justify-center">
-        <button onClick={() => handleLoad(item.id)} className="bg-blue-500  text-black font-medium rounded-lg px-2 py-1 hover:bg-blue-600 transition duration-200">
+        <button
+          onClick={() => handleLoad(item.id)}
+          className="bg-blue-500  text-black font-medium rounded-lg px-2 py-1 hover:bg-blue-600 transition duration-200 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>
       </div>

src/components/inputs/InputColor.jsx

@@ -11,7 +11,7 @@ export default function InputColor({ inputType }) {
 
   return (
     <input
-      className="min-w-[1.8rem]  w-7 h-8 mx-3 max-[320px]:mx-1 bg-transparent border-0 outline-none cursor-pointer focus:outline-none"
+      className="min-w-[1.8rem] w-7 h-8 mx-3 max-[320px]:mx-1 bg-transparent border-0 outline-none cursor-pointer focus-visible:outline-none focus-visible:scale-110"
       type="color"
       name="workColor"
       aria-label="Color Picker"