added shortcut keys for tools and image naviagtion

Author: sumn2u

client/src/FilesListMenu/index.jsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState, useEffect } from "react";
 import { styled } from "@mui/material/styles"
 import { createTheme, ThemeProvider } from "@mui/material/styles"
 import Box from "@mui/material/Box"
@@ -67,6 +67,43 @@ export const FilesListMenu = ({
   onClick,
 }) => {
   const { t } = useTranslation()
+
+  // Track the index of the selected image
+  const [selectedIndex, setSelectedIndex] = useState(
+    allImages.findIndex((img) => img.name === selectedImage) || 0
+  );
+
+  // Handle ArrowUp and ArrowDown key presses for navigation
+  const handleKeyDown = (event) => {
+    if (event.key === "ArrowUp") {
+      setSelectedIndex((prevIndex) =>
+        prevIndex > 0 ? prevIndex - 1 : allImages.length - 1
+      );
+    } else if (event.key === "ArrowDown") {
+      setSelectedIndex((prevIndex) =>
+        prevIndex < allImages.length - 1 ? prevIndex + 1 : 0
+      );
+    }
+  };
+
+  // Add keydown event listener when the component mounts
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+
+    // Cleanup the event listener when the component unmounts
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
+  // Update selected image when selectedIndex changes
+  useEffect(() => {
+    if (allImages[selectedIndex]) {
+      onSelectJump(allImages[selectedIndex].name);
+    }
+  }, [selectedIndex]);
+
+
   const handleClickLabel = (label) => {
     onClick(getActiveImage(state))
     onSelectJump(label)

client/src/MainLayout/index.jsx

@@ -80,7 +80,27 @@ export const MainLayout = ({
     nextImage = state.images[currentImageIndex + 1]
   }
 
-  useKey("Escape", () => dispatch({ type: "CANCEL" }))
+
+  const handleKey = (key, actionType, selectedTool = null) => {
+    useKey(
+      (event) => event.ctrlKey && event.shiftKey && event.key.toLowerCase() === key,
+      () => {
+        const action = { type: actionType };
+        if (selectedTool) {
+          action.selectedTool = selectedTool;
+        }
+        dispatch(action);
+      },
+      { event: 'keydown' }
+    );
+  };
+  
+  handleKey('escape', 'CANCEL');
+  handleKey('b', 'SELECT_TOOL', 'create-box');
+  handleKey('z', 'SELECT_TOOL', 'zoom');
+  handleKey('p', 'SELECT_TOOL', 'create-polygon');
+  handleKey('c', 'SELECT_TOOL', 'create-circle');
+  
 
   const innerContainerRef = useRef()
   const hotkeyHandlers = useDispatchHotkeyHandlers({ dispatch })