refacto : classification panel

src/sections/analysis/reviewPanelBody/classificationPanel/index.tsx

@@ -0,0 +1,31 @@
+import { Divider, Grid } from "@mui/material";
+import MovesPanel from "./movesPanel";
+import MovesClassificationsRecap from "./movesClassificationsRecap";
+import { useAtomValue } from "jotai";
+import { gameAtom } from "../../states";
+
+export default function ClassificationPanel() {
+  const game = useAtomValue(gameAtom);
+
+  if (!game.history().length) return null;
+
+  return (
+    <>
+      <Divider sx={{ marginX: "5%" }} />
+
+      <Grid
+        container
+        item
+        justifyContent="center"
+        alignItems="start"
+        height="100%"
+        minHeight={{ lg: "50px", xs: undefined }}
+        sx={{ overflow: "hidden" }}
+      >
+        <MovesPanel />
+
+        <MovesClassificationsRecap />
+      </Grid>
+    </>
+  );
+}

src/sections/analysis/reviewPanelBody/classificationPanel/movesClassificationsRecap/classificationRow.tsx

@@ -1,7 +1,7 @@
 import { Color, MoveClassification } from "@/types/enums";
 import { Grid, Typography } from "@mui/material";
 import { useAtomValue } from "jotai";
-import { boardAtom, gameAtom, gameEvalAtom } from "../../states";
+import { boardAtom, gameAtom, gameEvalAtom } from "../../../states";
 import { useMemo } from "react";
 import { moveClassificationColors } from "@/components/board/squareRenderer";
 import Image from "next/image";

src/sections/analysis/reviewPanelBody/classificationPanel/movesClassificationsRecap/index.tsx

@@ -1,6 +1,6 @@
 import { usePlayersNames } from "@/hooks/usePlayerNames";
 import { Grid, Typography } from "@mui/material";
-import { gameAtom, gameEvalAtom } from "../../states";
+import { gameAtom, gameEvalAtom } from "../../../states";
 import { MoveClassification } from "@/types/enums";
 import ClassificationRow from "./classificationRow";
 import { useAtomValue } from "jotai";

src/sections/analysis/reviewPanelBody/classificationPanel/movesPanel/index.tsx

@@ -2,7 +2,7 @@ import { Grid } from "@mui/material";
 import MovesLine from "./movesLine";
 import { useMemo } from "react";
 import { useAtomValue } from "jotai";
-import { gameAtom, gameEvalAtom } from "../../states";
+import { gameAtom, gameEvalAtom } from "../../../states";
 import { MoveClassification } from "@/types/enums";
 
 export default function MovesPanel() {
@@ -37,8 +37,6 @@ export default function MovesPanel() {
     return moves;
   }, [game, gameEval]);
 
-  if (!gameMoves) return null;
-
   return (
     <Grid
       container

src/sections/analysis/reviewPanelBody/classificationPanel/movesPanel/moveItem.tsx

@@ -3,7 +3,7 @@ import { Grid, Typography } from "@mui/material";
 import { moveClassificationColors } from "@/components/board/squareRenderer";
 import Image from "next/image";
 import { useAtomValue } from "jotai";
-import { boardAtom, currentPositionAtom, gameAtom } from "../../states";
+import { boardAtom, currentPositionAtom, gameAtom } from "../../../states";
 import { useChessActions } from "@/hooks/useChessActions";
 import { useEffect } from "react";
 import { isInViewport } from "@/lib/helpers";