feat : use keyboard arrows to move between moves

src/sections/analysis/reviewPanelToolbar/index.tsx

@@ -7,6 +7,7 @@ import FlipBoardButton from "./flipBoardButton";
 import NextMoveButton from "./nextMoveButton";
 import GoToLastPositionButton from "./goToLastPositionButton";
 import SaveButton from "./saveButton";
+import { useEffect } from "react";
 
 export default function ReviewPanelToolBar() {
   const board = useAtomValue(boardAtom);
@@ -15,6 +16,21 @@ export default function ReviewPanelToolBar() {
 
   const boardHistory = board.history();
 
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (boardHistory.length === 0) return;
+      if (e.key === "ArrowLeft") {
+        undoBoardMove();
+      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [undoBoardMove, boardHistory]);
+
   return (
     <Grid container item justifyContent="center" alignItems="center" xs={12}>
       <FlipBoardButton />

src/sections/analysis/reviewPanelToolbar/nextMoveButton.tsx

@@ -3,6 +3,7 @@ import { Grid, IconButton, Tooltip } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { boardAtom, gameAtom } from "../states";
 import { useChessActions } from "@/hooks/useChessActions";
+import { useEffect } from "react";
 
 export default function NextMoveButton() {
   const { makeMove: makeBoardMove } = useChessActions(boardAtom);
@@ -31,6 +32,20 @@ export default function NextMoveButton() {
     }
   };
 
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "ArrowRight") {
+        addNextGameMoveToBoard();
+      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [addNextGameMoveToBoard]);
+
   return (
     <Tooltip title="Go to next move">
       <Grid>