fix : thread slider context info

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
+      <Stack direction="row" width="100%">
-        id={`input-${label}`}
+        <Typography id={`input-${label}`} variant="body2">
-        textAlign="left"
+          {step === 1 && marksFilter ? label : `${label}: ${value}`}
-        width="100%"
+        </Typography>
-        variant="body2"
+
-      >
+        {!!infoContent && (
-        {step === 1 && marksFilter ? label : `${label}: ${value}`}
+          <>
-      </Typography>
+            <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}

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 }}>
+          <Grid
-            <Box sx={{ display: "flex", alignItems: "center", width: "100%", flex: 1 }}>
+            container
-              <Slider
+            justifyContent="center"
-                label="Number of threads"
+            alignItems="center"
-                value={engineWorkersNb}
+            size={{ xs: 12, md: 11 }}
-                setValue={setEngineWorkersNb}
+          >
-                min={1}
+            <Slider
-                max={10}
+              label="Number of threads"
-                marksFilter={1}
+              value={engineWorkersNb}
-              />
+              setValue={setEngineWorkersNb}
-              <IconButton size="medium" onClick={handleHelpClick} sx={{ ml: 2 }} aria-label="Help about number of threads">
+              min={1}
-                <Icon icon="material-symbols:help-outline" fontSize={28} />
+              max={12}
-              </IconButton>
+              marksFilter={1}
-            </Box>
+              infoContent={
-            <Popover
+                <>
-              open={helpOpen}
+                  More threads means faster analysis, but only if your device
-              anchorEl={anchorEl}
+                  can handle them, otherwise it may have the opposite effect.
-              onClose={handleHelpClose}
+                  The estimated optimal value for your device is{" "}
-              anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+                  {getRecommendedWorkersNb()}.<br />
-              transformOrigin={{ vertical: "top", horizontal: "center" }}
+                  Due to privacy restrictions in some browsers, this estimated
-            >
+                  value might be underestimated. Don't hesitate to try different
-              <Box sx={{ p: 2, maxWidth: 350 }}>
+                  values to find the best one for your device.
-                <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>
         </Grid>
       </DialogContent>

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2017",
+    "target": "ES2021",
     "lib": ["dom"],
     "allowJs": false,
     "skipLibCheck": true,