From 45358502f863c08d2ee64451f897de9156359ded Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Fri, 1 Aug 2025 13:28:42 +0530
Subject: [PATCH] refactor: stats moved to sepetate component

---
 app/src/modules/scene/helpers/StatsHelper.tsx | 22 +++++++++++++++++++
 app/src/modules/scene/scene.tsx               |  5 +++--
 2 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 app/src/modules/scene/helpers/StatsHelper.tsx

diff --git a/app/src/modules/scene/helpers/StatsHelper.tsx b/app/src/modules/scene/helpers/StatsHelper.tsx
new file mode 100644
index 0000000..486488b
--- /dev/null
+++ b/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;
+}
diff --git a/app/src/modules/scene/scene.tsx b/app/src/modules/scene/scene.tsx
index 0f08a2d..0e7a277 100644
--- a/app/src/modules/scene/scene.tsx
+++ b/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>
     );