refactor: stats moved to sepetate component

app/src/modules/scene/helpers/StatsHelper.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+import { Stats } from "@react-three/drei";
+import { detectModifierKeys } from "../../../utils/shortcutkeys/detectModifierKeys";
+
+export default function StatsHelper() {
+    const [visible, setVisible] = useState(false);
+
+    useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent) => {
+            const keyCombination = detectModifierKeys(event);
+            if (keyCombination === "F1") {
+                event.preventDefault();
+                setVisible(prev => !prev);
+            }
+        };
+
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, []);
+
+    return visible ? <Stats className="stats" /> : null;
+}

app/src/modules/scene/scene.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from "react";
 import { Canvas } from "@react-three/fiber";
-import { KeyboardControls, Stats } from "@react-three/drei";
+import { KeyboardControls } from "@react-three/drei";
 import { useSceneContext } from "./sceneContext";
 
 import Builder from "../builder/builder";
@@ -14,6 +14,7 @@ import { getAllProjects } from "../../services/dashboard/getAllProjects";
 import { getUserData } from "../../functions/getUserData";
 import { useLoadingProgress, useSocketStore } from "../../store/builder/store";
 import { Color, SRGBColorSpace } from "three";
+import StatsHelper from "./helpers/StatsHelper";
 
 export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Comparison Layout' }) {
     const map = useMemo(() => [
@@ -76,7 +77,7 @@ export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Co
                 <Builder />
                 <Simulation />
                 <Visualization />
-                <Stats />
+                <StatsHelper />
             </Canvas>
         </KeyboardControls>
     );