From 8a58e2aca814a9f4882b62286d4f9d6d8c019a85 Mon Sep 17 00:00:00 2001
From: GuillaumeSD <gsd.lfny@gmail.com>
Date: Mon, 19 May 2025 01:20:08 +0200
Subject: [PATCH] fix : thread slider context info

---
 src/components/slider.tsx                     | 63 ++++++++++++++---
 .../engineSettings/engineSettingsDialog.tsx   | 67 +++++++------------
 tsconfig.json                                 |  2 +-
 3 files changed, 81 insertions(+), 51 deletions(-)

diff --git a/src/components/slider.tsx b/src/components/slider.tsx
index d26d9db..24614d3 100644
--- a/src/components/slider.tsx
+++ b/src/components/slider.tsx
@@ -1,9 +1,15 @@
+import { Icon } from "@iconify/react";
 import {
   Grid2 as Grid,
+  IconButton,
   Slider as MuiSlider,
+  Popover,
+  Stack,
   styled,
   Typography,
+  TypographyProps,
 } from "@mui/material";
+import { useState } from "react";
 
 export interface Props {
   value: number;
@@ -14,6 +20,7 @@ export interface Props {
   size?: number;
   marksFilter?: number;
   step?: number;
+  infoContent?: TypographyProps["children"];
 }
 
 export default function Slider({
@@ -25,7 +32,18 @@ export default function Slider({
   size,
   marksFilter,
   step = 1,
+  infoContent,
 }: Props) {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const handleOpenPopover = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClosePopover = () => {
+    setAnchorEl(null);
+  };
+
   return (
     <Grid
       container
@@ -33,14 +51,43 @@ export default function Slider({
       alignItems="center"
       size={size ?? 11}
     >
-      <Typography
-        id={`input-${label}`}
-        textAlign="left"
-        width="100%"
-        variant="body2"
-      >
-        {step === 1 && marksFilter ? label : `${label}: ${value}`}
-      </Typography>
+      <Stack direction="row" width="100%">
+        <Typography id={`input-${label}`} variant="body2">
+          {step === 1 && marksFilter ? label : `${label}: ${value}`}
+        </Typography>
+
+        {!!infoContent && (
+          <>
+            <IconButton
+              size="medium"
+              aria-owns={anchorEl ? "mouse-over-popover" : undefined}
+              aria-haspopup="true"
+              onClick={handleOpenPopover}
+              onMouseEnter={handleOpenPopover}
+              onMouseLeave={handleClosePopover}
+              sx={{ ml: 1, padding: 0 }}
+              aria-label="Help about number of threads"
+            >
+              <Icon icon="mdi:info-outline" width="1.1rem" />
+            </IconButton>
+
+            <Popover
+              id="mouse-over-popover"
+              open={!!anchorEl}
+              anchorEl={anchorEl}
+              onClose={handleClosePopover}
+              anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+              transformOrigin={{ vertical: "top", horizontal: "center" }}
+              sx={{ pointerEvents: "none" }}
+              disableRestoreFocus
+            >
+              <Typography variant="body2" sx={{ padding: 2, maxWidth: 500 }}>
+                {infoContent}
+              </Typography>
+            </Popover>
+          </>
+        )}
+      </Stack>
 
       <CustomSlider
         min={min}
diff --git a/src/sections/engineSettings/engineSettingsDialog.tsx b/src/sections/engineSettings/engineSettingsDialog.tsx
index 6bc7c67..ad1d0f0 100644
--- a/src/sections/engineSettings/engineSettingsDialog.tsx
+++ b/src/sections/engineSettings/engineSettingsDialog.tsx
@@ -16,7 +16,6 @@ import {
   Box,
   useTheme,
 } from "@mui/material";
-import React from "react";
 import {
   engineNameAtom,
   engineDepthAtom,
@@ -38,9 +37,6 @@ import {
   STRONGEST_ENGINE,
 } from "@/constants";
 import { getRecommendedWorkersNb } from "@/lib/engine/worker";
-import IconButton from "@mui/material/IconButton";
-import Popover from "@mui/material/Popover";
-import { Icon } from "@iconify/react";
 
 interface Props {
   open: boolean;
@@ -67,15 +63,6 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
   const theme = useTheme();
   const isDarkMode = theme.palette.mode === "dark";
 
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const handleHelpClick = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleHelpClose = () => {
-    setAnchorEl(null);
-  };
-  const helpOpen = Boolean(anchorEl);
-
   useEffect(() => {
     if (!isEngineSupported(engineName)) {
       if (Stockfish16_1.isSupported()) {
@@ -217,35 +204,31 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
             </FormControl>
           </Grid>
 
-          <Grid container justifyContent="center" alignItems="center" size={{ xs: 12, sm: 7 }}>
-            <Box sx={{ display: "flex", alignItems: "center", width: "100%", flex: 1 }}>
-              <Slider
-                label="Number of threads"
-                value={engineWorkersNb}
-                setValue={setEngineWorkersNb}
-                min={1}
-                max={10}
-                marksFilter={1}
-              />
-              <IconButton size="medium" onClick={handleHelpClick} sx={{ ml: 2 }} aria-label="Help about number of threads">
-                <Icon icon="material-symbols:help-outline" fontSize={28} />
-              </IconButton>
-            </Box>
-            <Popover
-              open={helpOpen}
-              anchorEl={anchorEl}
-              onClose={handleHelpClose}
-              anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
-              transformOrigin={{ vertical: "top", horizontal: "center" }}
-            >
-              <Box sx={{ p: 2, maxWidth: 350 }}>
-                <Typography variant="body2">
-                  More threads means faster analysis, but only if your device can handle them—otherwise, it may have the opposite effect. The estimated optimal value for your device is {getRecommendedWorkersNb()}.<br />
-                  Due to privacy restrictions in some browsers, detection may be inaccurate and result in underestimated recommendations.<br />
-                  If the recommended value is unusually low, we suggest using a number close to your CPU’s thread count minus 1 or 2.
-                </Typography>
-              </Box>
-            </Popover>
+          <Grid
+            container
+            justifyContent="center"
+            alignItems="center"
+            size={{ xs: 12, md: 11 }}
+          >
+            <Slider
+              label="Number of threads"
+              value={engineWorkersNb}
+              setValue={setEngineWorkersNb}
+              min={1}
+              max={12}
+              marksFilter={1}
+              infoContent={
+                <>
+                  More threads means faster analysis, but only if your device
+                  can handle them, otherwise it may have the opposite effect.
+                  The estimated optimal value for your device is{" "}
+                  {getRecommendedWorkersNb()}.<br />
+                  Due to privacy restrictions in some browsers, this estimated
+                  value might be underestimated. Don't hesitate to try different
+                  values to find the best one for your device.
+                </>
+              }
+            />
           </Grid>
         </Grid>
       </DialogContent>
diff --git a/tsconfig.json b/tsconfig.json
index 11341e5..bae9a40 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2017",
+    "target": "ES2021",
     "lib": ["dom"],
     "allowJs": false,
     "skipLibCheck": true,