feat: navigate image view with keyboard keys (#4116)

* Navigate images with keyboard left and right keys

* Fix linting

* Adding missing "

* Added change to incorrect branch

Author: RoccoSmit

web/src/components/PreviewImageDialog.tsx

@@ -94,6 +94,14 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, initialIndex }:
     }
   };
 
+  const handleImageContainerKeyDown = (event: KeyboardEvent) => {
+    if (event.key == "ArrowLeft") {
+      showPrevImg();
+    } else if (event.key == "ArrowRight") {
+      showNextImg();
+    }
+  };
+
   const handleImgContainerScroll = (event: React.WheelEvent) => {
     const offsetX = event.nativeEvent.offsetX;
     const offsetY = event.nativeEvent.offsetY;
@@ -137,6 +145,13 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, initialIndex }:
     setViewportScalable();
   }, []);
 
+  useEffect(() => {
+    document.addEventListener("keydown", handleImageContainerKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleImageContainerKeyDown);
+    };
+  }, [currentIndex]);
+
   return (
     <>
       <div className="btns-container">