feat : add arrow opt out options

src/sections/analysis/reviewPanelToolbar/flipBoardButton.tsx

@@ -1,14 +1,16 @@
 import { useSetAtom } from "jotai";
 import { boardOrientationAtom } from "../states";
-import { IconButton } from "@mui/material";
+import { IconButton, Tooltip } from "@mui/material";
 import { Icon } from "@iconify/react";
 
 export default function FlipBoardButton() {
   const setBoardOrientation = useSetAtom(boardOrientationAtom);
 
   return (
-    <IconButton onClick={() => setBoardOrientation((prev) => !prev)}>
-      <Icon icon="eva:flip-fill" />
-    </IconButton>
+    <Tooltip title="Flip board">
+      <IconButton onClick={() => setBoardOrientation((prev) => !prev)}>
+        <Icon icon="eva:flip-fill" />
+      </IconButton>
+    </Tooltip>
   );
 }

src/sections/analysis/reviewPanelToolbar/goToLastPositionButton.tsx

@@ -1,5 +1,5 @@
 import { Icon } from "@iconify/react";
-import { IconButton } from "@mui/material";
+import { Grid, IconButton, Tooltip } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { boardAtom, gameAtom } from "../states";
 import { useChessActions } from "@/hooks/useChess";
@@ -15,14 +15,18 @@ export default function GoToLastPositionButton() {
   const isButtonDisabled = boardHistory >= gameHistory;
 
   return (
-    <IconButton
-      onClick={() => {
-        if (isButtonDisabled) return;
-        boardActions.setPgn(game.pgn());
-      }}
-      disabled={isButtonDisabled}
-    >
-      <Icon icon="ri:skip-forward-line" />
-    </IconButton>
+    <Tooltip title="Go to final position">
+      <Grid>
+        <IconButton
+          onClick={() => {
+            if (isButtonDisabled) return;
+            boardActions.setPgn(game.pgn());
+          }}
+          disabled={isButtonDisabled}
+        >
+          <Icon icon="ri:skip-forward-line" />
+        </IconButton>
+      </Grid>
+    </Tooltip>
   );
 }

src/sections/analysis/reviewPanelToolbar/index.tsx

@@ -1,7 +1,18 @@
-import { Divider, Grid, IconButton } from "@mui/material";
+import {
+  Checkbox,
+  Divider,
+  FormControlLabel,
+  Grid,
+  IconButton,
+  Tooltip,
+} from "@mui/material";
 import { Icon } from "@iconify/react";
-import { useAtomValue } from "jotai";
-import { boardAtom } from "../states";
+import { useAtom, useAtomValue } from "jotai";
+import {
+  boardAtom,
+  showBestMoveArrowAtom,
+  showPlayerMoveArrowAtom,
+} from "../states";
 import { useChessActions } from "@/hooks/useChess";
 import FlipBoardButton from "./flipBoardButton";
 import NextMoveButton from "./nextMoveButton";
@@ -9,6 +20,8 @@ import GoToLastPositionButton from "./goToLastPositionButton";
 import SaveButton from "./saveButton";
 
 export default function ReviewPanelToolBar() {
+  const [showBestMove, setShowBestMove] = useAtom(showBestMoveArrowAtom);
+  const [showPlayerMove, setShowPlayerMove] = useAtom(showPlayerMoveArrowAtom);
   const board = useAtomValue(boardAtom);
   const boardActions = useChessActions(boardAtom);
 
@@ -21,19 +34,27 @@ export default function ReviewPanelToolBar() {
       <Grid container item justifyContent="center" alignItems="center" xs={12}>
         <FlipBoardButton />
 
-        <IconButton
-          onClick={() => boardActions.reset()}
-          disabled={boardHistory.length === 0}
-        >
-          <Icon icon="ri:skip-back-line" />
-        </IconButton>
+        <Tooltip title="Reset board">
+          <Grid>
+            <IconButton
+              onClick={() => boardActions.reset()}
+              disabled={boardHistory.length === 0}
+            >
+              <Icon icon="ri:skip-back-line" />
+            </IconButton>
+          </Grid>
+        </Tooltip>
 
-        <IconButton
-          onClick={() => boardActions.undo()}
-          disabled={boardHistory.length === 0}
-        >
-          <Icon icon="ri:arrow-left-s-line" height={30} />
-        </IconButton>
+        <Tooltip title="Go to previous move">
+          <Grid>
+            <IconButton
+              onClick={() => boardActions.undo()}
+              disabled={boardHistory.length === 0}
+            >
+              <Icon icon="ri:arrow-left-s-line" height={30} />
+            </IconButton>
+          </Grid>
+        </Tooltip>
 
         <NextMoveButton />
 
@@ -41,6 +62,37 @@ export default function ReviewPanelToolBar() {
 
         <SaveButton />
       </Grid>
+
+      <Grid
+        container
+        item
+        justifyContent="space-evenly"
+        alignItems="center"
+        xs={12}
+        marginY={3}
+        gap={3}
+      >
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={showBestMove}
+              onChange={(_, checked) => setShowBestMove(checked)}
+            />
+          }
+          label="Show best move green arrow"
+          sx={{ marginX: 0 }}
+        />
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={showPlayerMove}
+              onChange={(_, checked) => setShowPlayerMove(checked)}
+            />
+          }
+          label="Show player move yellow arrow"
+          sx={{ marginX: 0 }}
+        />
+      </Grid>
     </>
   );
 }

src/sections/analysis/reviewPanelToolbar/nextMoveButton.tsx

@@ -1,5 +1,5 @@
 import { Icon } from "@iconify/react";
-import { IconButton } from "@mui/material";
+import { Grid, IconButton, Tooltip } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { boardAtom, gameAtom } from "../states";
 import { useChessActions } from "@/hooks/useChess";
@@ -32,11 +32,15 @@ export default function NextMoveButton() {
   };
 
   return (
-    <IconButton
-      onClick={() => addNextGameMoveToBoard()}
-      disabled={!isButtonEnabled}
-    >
-      <Icon icon="ri:arrow-right-s-line" height={30} />
-    </IconButton>
+    <Tooltip title="Go to next move">
+      <Grid>
+        <IconButton
+          onClick={() => addNextGameMoveToBoard()}
+          disabled={!isButtonEnabled}
+        >
+          <Icon icon="ri:arrow-right-s-line" height={30} />
+        </IconButton>
+      </Grid>
+    </Tooltip>
   );
 }

src/sections/analysis/reviewPanelToolbar/saveButton.tsx

@@ -1,6 +1,6 @@
 import { useGameDatabase } from "@/hooks/useGameDatabase";
 import { Icon } from "@iconify/react";
-import { IconButton } from "@mui/material";
+import { Grid, IconButton, Tooltip } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { useRouter } from "next/router";
 import { boardAtom, gameAtom, gameEvalAtom } from "../states";
@@ -39,13 +39,21 @@ export default function SaveButton() {
   return (
     <>
       {gameFromUrl ? (
-        <IconButton disabled={true}>
-          <Icon icon="ri:folder-check-line" />
-        </IconButton>
+        <Tooltip title="Game saved in database">
+          <Grid>
+            <IconButton disabled={true}>
+              <Icon icon="ri:folder-check-line" />
+            </IconButton>
+          </Grid>
+        </Tooltip>
       ) : (
-        <IconButton onClick={handleSave} disabled={!enableSave}>
-          <Icon icon="ri:save-3-line" />
-        </IconButton>
+        <Tooltip title="Save game">
+          <Grid>
+            <IconButton onClick={handleSave} disabled={!enableSave}>
+              <Icon icon="ri:save-3-line" />
+            </IconButton>
+          </Grid>
+        </Tooltip>
       )}
     </>
   );