style : engine settings dialog

src/sections/analysis/arrowOptions.tsx

@@ -1,46 +0,0 @@
-import { Checkbox, FormControlLabel, Grid } from "@mui/material";
-import { useAtom, useAtomValue } from "jotai";
-import {
-  gameEvalAtom,
-  showBestMoveArrowAtom,
-  showPlayerMoveArrowAtom,
-} from "./states";
-
-export default function ArrowOptions() {
-  const gameEval = useAtomValue(gameEvalAtom);
-  const [showBestMove, setShowBestMove] = useAtom(showBestMoveArrowAtom);
-  const [showPlayerMove, setShowPlayerMove] = useAtom(showPlayerMoveArrowAtom);
-
-  return (
-    <Grid
-      container
-      item
-      justifyContent="space-evenly"
-      alignItems="center"
-      xs={12}
-      gap={3}
-    >
-      <FormControlLabel
-        control={
-          <Checkbox
-            checked={showBestMove}
-            onChange={(_, checked) => setShowBestMove(checked)}
-            disabled={!gameEval}
-          />
-        }
-        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/reviewPanelBody/index.tsx

@@ -72,7 +72,7 @@ export default function ReviewPanelBody() {
       )}
 
       <Grid item container xs={12} justifyContent="center" alignItems="center">
-        <List>
+        <List sx={{ maxWidth: "95%" }}>
           {engineLines.map((line) => (
             <LineEvaluation key={line.multiPv} line={line} />
           ))}

src/sections/analysis/reviewPanelBody/lineEvaluation.tsx

@@ -36,7 +36,7 @@ export default function LineEvaluation({ line }: Props) {
         )}
       </Typography>
 
-      <Typography>
+      <Typography noWrap>
         {showSkeleton ? (
           <Skeleton width={"20em"} variant="rounded" animation="wave" />
         ) : (

src/sections/analysis/reviewPanelHeader/analyzeButton.tsx

@@ -1,22 +1,20 @@
 import { Icon } from "@iconify/react";
-import { Grid } from "@mui/material";
 import { useState } from "react";
 import {
   engineDepthAtom,
   engineMultiPvAtom,
   gameAtom,
   gameEvalAtom,
-} from "./states";
+} from "../states";
 import { useAtomValue, useSetAtom } from "jotai";
 import { getFens } from "@/lib/chess";
 import { useGameDatabase } from "@/hooks/useGameDatabase";
 import { LoadingButton } from "@mui/lab";
-import Slider from "@/components/slider";
 import { useEngine } from "@/hooks/useEngine";
 import { EngineName } from "@/types/enums";
 import { logAnalyticsEvent } from "@/lib/firebase";
 
-export default function AnalyzePanel() {
+export default function AnalyzeButton() {
   const engine = useEngine(EngineName.Stockfish16);
   const [evaluationInProgress, setEvaluationInProgress] = useState(false);
   const engineDepth = useAtomValue(engineDepthAtom);
@@ -58,52 +56,25 @@ export default function AnalyzePanel() {
   };
 
   return (
-    <Grid
-      item
-      container
-      xs={12}
-      justifyContent="center"
-      alignItems="center"
-      rowGap={3}
+    <LoadingButton
+      variant="contained"
+      size="large"
+      startIcon={
+        !evaluationInProgress && (
+          <Icon icon="streamline:magnifying-glass-solid" />
+        )
+      }
+      onClick={handleAnalyze}
+      disabled={!readyToAnalyse}
+      loading={evaluationInProgress}
+      loadingPosition={evaluationInProgress ? "end" : undefined}
+      endIcon={
+        evaluationInProgress && (
+          <Icon icon="streamline:magnifying-glass-solid" />
+        )
+      }
     >
-      <Slider
-        label="Maximum depth"
-        atom={engineDepthAtom}
-        min={10}
-        max={30}
-        marksFilter={2}
-      />
-
-      <Slider
-        label="Number of lines"
-        atom={engineMultiPvAtom}
-        min={1}
-        max={6}
-        xs={6}
-      />
-
-      <Grid item container xs={12} justifyContent="center" alignItems="center">
-        <LoadingButton
-          variant="contained"
-          size="large"
-          startIcon={
-            !evaluationInProgress && (
-              <Icon icon="streamline:magnifying-glass-solid" />
-            )
-          }
-          onClick={handleAnalyze}
-          disabled={!readyToAnalyse}
-          loading={evaluationInProgress}
-          loadingPosition={evaluationInProgress ? "end" : undefined}
-          endIcon={
-            evaluationInProgress && (
-              <Icon icon="streamline:magnifying-glass-solid" />
-            )
-          }
-        >
-          {evaluationInProgress ? "Analyzing..." : "Analyze"}
-        </LoadingButton>
-      </Grid>
-    </Grid>
+      {evaluationInProgress ? "Analyzing..." : "Analyze"}
+    </LoadingButton>
   );
 }

src/sections/analysis/reviewPanelHeader/index.tsx

@@ -2,6 +2,8 @@ import { Icon } from "@iconify/react";
 import { Grid, Typography } from "@mui/material";
 import GamePanel from "./gamePanel";
 import LoadGame from "./loadGame";
+import AnalyzeButton from "./analyzeButton";
+import EngineSettingsButton from "@/sections/engineSettings/engineSettingsButton";
 
 export default function ReviewPanelHeader() {
   return (
@@ -37,6 +39,8 @@ export default function ReviewPanelHeader() {
       >
         <GamePanel />
         <LoadGame />
+        <AnalyzeButton />
+        <EngineSettingsButton />
       </Grid>
     </Grid>
   );