feat : add arrow opt out options

src/pages/database.tsx

@@ -60,11 +60,15 @@ export default function GameDatabase() {
         width: 150,
       },
       {
-        field: "white",
+        field: "whiteLabel",
         headerName: "White",
-        width: 150,
+        width: 200,
         headerAlign: "center",
         align: "center",
+        valueGetter: (params) =>
+          `${params.row.white.name ?? "Unknown"} (${
+            params.row.white.rating ?? "?"
+          })`,
       },
       {
         field: "result",
@@ -74,11 +78,15 @@ export default function GameDatabase() {
         width: 100,
       },
       {
-        field: "black",
+        field: "blackLabel",
         headerName: "Black",
-        width: 150,
+        width: 200,
         headerAlign: "center",
         align: "center",
+        valueGetter: (params) =>
+          `${params.row.black.name ?? "Unknown"} (${
+            params.row.black.rating ?? "?"
+          })`,
       },
       {
         field: "eval",
@@ -136,15 +144,14 @@ export default function GameDatabase() {
   );
 
   return (
-    <Grid container rowSpacing={3} justifyContent="center" alignItems="center">
-      <Grid
-        item
-        container
-        xs={12}
-        justifyContent="center"
-        alignItems="center"
-        spacing={4}
-      >
+    <Grid
+      container
+      justifyContent="center"
+      alignItems="center"
+      gap={4}
+      marginTop={6}
+    >
+      <Grid item container xs={12} justifyContent="center" alignItems="center">
         <Grid item container justifyContent="center" sx={{ maxWidth: "250px" }}>
           <LoadGameButton />
         </Grid>
@@ -152,7 +159,7 @@ export default function GameDatabase() {
 
       <Grid item container xs={12} justifyContent="center" alignItems="center">
         <Typography variant="subtitle2">
-          You have {0} games in your database
+          You have {games.length} games in your database
         </Typography>
       </Grid>
 

src/pages/index.tsx

@@ -1,10 +1,37 @@
+import { useChessActions } from "@/hooks/useChess";
 import Board from "@/sections/analysis/board";
 import ReviewPanelBody from "@/sections/analysis/reviewPanelBody";
 import ReviewPanelHeader from "@/sections/analysis/reviewPanelHeader";
 import ReviewPanelToolBar from "@/sections/analysis/reviewPanelToolbar";
+import {
+  boardAtom,
+  boardOrientationAtom,
+  gameAtom,
+  gameEvalAtom,
+} from "@/sections/analysis/states";
 import { Grid } from "@mui/material";
+import { Chess } from "chess.js";
+import { useSetAtom } from "jotai";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 
 export default function GameReport() {
+  const boardActions = useChessActions(boardAtom);
+  const gameActions = useChessActions(gameAtom);
+  const setEval = useSetAtom(gameEvalAtom);
+  const setBoardOrientation = useSetAtom(boardOrientationAtom);
+  const router = useRouter();
+  const { gameId } = router.query;
+
+  useEffect(() => {
+    if (!gameId) {
+      boardActions.reset();
+      setEval(undefined);
+      setBoardOrientation(true);
+      gameActions.setPgn(new Chess().pgn());
+    }
+  }, [gameId]);
+
   return (
     <Grid
       container