added logs list-v2

app/src/components/icons/ExportCommonIcons.tsx

@@ -655,8 +655,8 @@ export const MonthlyROI = () => {
   );
 };
 
-export const ExpandIcon = () => {
-  return (
+export const ExpandIcon = ({ isActive }: { isActive: boolean }) => {
+  return isActive ? (
     <svg
       width="20"
       height="20"
@@ -677,6 +677,36 @@ export const ExpandIcon = () => {
         fill="var(--text-color)"
       />
     </svg>
+  ) : (
+    <svg
+      width="21"
+      height="20"
+      viewBox="0 0 21 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5 5.6875H15.5"
+        stroke="var(--text-color)"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 8.60156H15.5"
+        stroke="var(--text-color)"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 10.6484L10.25 14.7318L15.5 10.6484"
+        stroke="var(--text-color)"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
   );
 };
 

app/src/components/ui/simulation/simulationPlayer.tsx

@@ -19,6 +19,10 @@ import {
 import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
 
 const SimulationPlayer: React.FC = () => {
+  const MAX_SPEED = 8; // Maximum speed
+
+  const [expand, setExpand] = useState(true);
+
   const { speed, setSpeed } = useAnimationPlaySpeed();
   const [playSimulation, setPlaySimulation] = useState(false);
   const { setIsPlaying } = usePlayButtonStore();
@@ -30,8 +34,7 @@ const SimulationPlayer: React.FC = () => {
 
   // Button functions
   const handleReset = () => {
-    setReset(true);
-    // setReset(!isReset);
+    setReset(!isReset);
     setSpeed(1);
   };
   const handlePlayStop = () => {
@@ -50,7 +53,7 @@ const SimulationPlayer: React.FC = () => {
   };
 
   const calculateHandlePosition = () => {
-    return ((speed - 0.5) / (8 - 0.5)) * 100;
+    return ((speed - 0.5) / (MAX_SPEED - 0.5)) * 100;
   };
 
   const handleMouseDown = () => {
@@ -100,7 +103,6 @@ const SimulationPlayer: React.FC = () => {
     { name: "process 9", completed: 90 }, // 90% completed
     { name: "process 10", completed: 30 }, // 30% completed
   ];
-  const [expand, setExpand] = useState(false);
   // Move getRandomColor out of render
   const getRandomColor = () => {
     const letters = "0123456789ABCDEF";
@@ -117,7 +119,7 @@ const SimulationPlayer: React.FC = () => {
 
   const processPlayerRef = useRef<HTMLDivElement>(null);
   const processWrapperRef = useRef<HTMLDivElement>(null);
-  const [playerPosition, setPlayerPosition] = useState(0);
+  const [playerPosition, setPlayerPosition] = useState(20); // initial position
 
   const handleProcessMouseDown = (e: React.MouseEvent) => {
     if (!processWrapperRef.current) return;
@@ -196,7 +198,7 @@ const SimulationPlayer: React.FC = () => {
             </div>
           </div>
           <div className="controls-wrapper">
-            <div
+            <button
               className="simulation-button-container"
               onClick={() => {
                 handleReset();
@@ -204,8 +206,8 @@ const SimulationPlayer: React.FC = () => {
             >
               <ResetIcon />
               Reset
-            </div>
-            <div
+            </button>
+            <button
               className="simulation-button-container"
               onClick={() => {
                 handlePlayStop();
@@ -213,8 +215,8 @@ const SimulationPlayer: React.FC = () => {
             >
               <PlayStopIcon />
               {playSimulation ? "Play" : "Stop"}
-            </div>
-            <div
+            </button>
+            <button
               className="simulation-button-container"
               onClick={() => {
                 handleExit();
@@ -222,13 +224,13 @@ const SimulationPlayer: React.FC = () => {
             >
               <ExitIcon />
               Exit
-            </div>
-            <div
-              className="simulation-button-container"
+            </button>
+            <button
+              className="expand-icon-container"
               onClick={() => setExpand(!expand)}
             >
-              <ExpandIcon />
-            </div>
+              <ExpandIcon isActive={!expand} />
+            </button>
           </div>
         </div>
         <div className="progresser-wrapper">
@@ -298,24 +300,24 @@ const SimulationPlayer: React.FC = () => {
               <div className="marker marker-80"></div>
               <div className="marker marker-90"></div>
               <div className="custom-slider">
-                <div
+                <button
                   className={`slider-handle ${isDragging ? "dragging" : ""}`}
                   style={{ left: `${calculateHandlePosition()}%` }}
                   onMouseDown={handleMouseDown}
                 >
                   {speed.toFixed(1)}x
-                </div>
+                </button>
                 <input
                   type="range"
                   min="0.5"
-                  max="8"
+                  max={MAX_SPEED}
                   step="0.1"
                   value={speed}
                   onChange={handleSpeedChange}
                   className="slider-input"
                 />
               </div>
-              <div className="speed-label max-value">8x</div>
+              <div className="speed-label max-value">4x</div>
             </div>
           </div>
         </div>
@@ -328,25 +330,31 @@ const SimulationPlayer: React.FC = () => {
           ></div>
           <div
             className="process-wrapper"
-            ref={processWrapperRef}
-            onMouseDown={handleProcessMouseDown}
+            style={{ padding: expand ? "0px" : "5px 35px" }}
           >
-            {process.map((item, index) => (
-              <div
-                key={index}
-                className="process"
-                style={{
-                  width: `${item.completed}%`,
-                  backgroundColor: getAvatarColor(index),
-                }}
-              ></div>
-            ))}
+            <div
+              className="process-container"
+              ref={processWrapperRef}
+              onMouseDown={handleProcessMouseDown}
+            >
+              {process.map((item, index) => (
+                <div
+                  key={index}
+                  className="process"
+                  style={{
+                    width: `${item.completed}%`,
+                    backgroundColor: getAvatarColor(index),
+                  }}
+                >
+                  <div
+                    className="process-player"
+                    ref={processPlayerRef}
+                    style={{ left: playerPosition, position: "absolute" }}
+                  ></div>
+                </div>
+              ))}
+            </div>
           </div>
-          <div
-            className="process-player"
-            ref={processPlayerRef}
-            style={{ left: playerPosition, position: "absolute" }}
-          ></div>
         </div>
       </div>
     </div>