app/src/components/footer/shortcutHelper.tsx

@@ -30,7 +30,7 @@ import {
   DuplicateInstanceIcon,
   PlayIcon,
 } from "../icons/ShortcutIcons";
-import { CloseIcon } from "../icons/ExportCommonIcons";
+import { CloseIcon, EyeCloseIcon } from "../icons/ExportCommonIcons";
 
 interface ShortcutItem {
   keys: string[];
@@ -52,6 +52,7 @@ const ShortcutHelper: React.FC<ShortcutHelperProps> = ({
   setShowShortcuts,
 }) => {
   const shortcuts: ShortcutGroup[] = [
+    // Essential
     {
       category: "Essential",
       items: [
@@ -86,13 +87,20 @@ const ShortcutHelper: React.FC<ShortcutHelperProps> = ({
           icon: <FindIcon />,
         },
         {
-          keys: ["CTRL", "+", "?"],
+          keys: ["CTRL", "+", "SHIFT", "+", "?"],
           name: "Info",
           description: "Show Shortcut Info",
           icon: <InfoIcon />,
         },
+        {
+          keys: ["L"],
+          name: "Log",
+          description: "Show Log list",
+          icon: <InfoIcon />,
+        },
       ],
     },
+    // Tools
     {
       category: "Tools",
       items: [
@@ -158,6 +166,7 @@ const ShortcutHelper: React.FC<ShortcutHelperProps> = ({
         },
       ],
     },
+    // View & Navigation
     {
       category: "View & Navigation",
       items: [
@@ -193,6 +202,7 @@ const ShortcutHelper: React.FC<ShortcutHelperProps> = ({
         },
       ],
     },
+    // Module Switching
     {
       category: "Module Switching",
       items: [
@@ -222,6 +232,7 @@ const ShortcutHelper: React.FC<ShortcutHelperProps> = ({
         },
       ],
     },
+    // Selection
     {
       category: "Selection",
       items: [
@@ -251,6 +262,7 @@ const ShortcutHelper: React.FC<ShortcutHelperProps> = ({
         },
       ],
     },
+    // Simulation
     {
       category: "Simulation",
       items: [
@@ -260,6 +272,12 @@ const ShortcutHelper: React.FC<ShortcutHelperProps> = ({
           description: "Play Simulation",
           icon: <PlayIcon />,
         },
+        {
+          keys: ["H"],
+          name: "Hide Player",
+          description: "Hide Simulation Player",
+          icon: <EyeCloseIcon />,
+        },
       ],
     },
   ];

app/src/components/layout/controls/ControlsPlayer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import useCameraModeStore, {
   usePlayButtonStore,
 } from "../../../store/usePlayButtonStore";
@@ -8,12 +8,13 @@ import InputToggle from "../../ui/inputs/InputToggle";
 import { EyeCloseIcon, WalkIcon } from "../../icons/ExportCommonIcons";
 import { ExitIcon } from "../../icons/SimulationIcons";
 import { useCamMode } from "../../../store/builder/store";
+import { usePlayerStore } from "../../../store/useUIToggleStore";
 
 const ControlsPlayer: React.FC = () => {
   const { setIsPlaying } = usePlayButtonStore();
   const { activeModule } = useModuleStore();
   const { walkMode, toggleWalkMode } = useCameraModeStore();
-  const [hidePlayer, setHidePlayer] = useState(false);
+  const { hidePlayer, setHidePlayer } = usePlayerStore();
   const { camMode } = useCamMode();
 
   const changeCamMode = () => {

app/src/components/layout/sidebarLeft/Header.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { ToggleSidebarIcon } from "../../icons/HeaderIcons";
 import { LogoIcon } from "../../icons/Logo";
 import FileMenu from "../../ui/FileMenu";
-import useToggleStore from "../../../store/useUIToggleStore";
+import {useToggleStore} from "../../../store/useUIToggleStore";
 import useModuleStore from "../../../store/useModuleStore";
 
 const Header: React.FC = () => {

app/src/components/layout/sidebarLeft/SideBarLeft.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import ToggleHeader from "../../ui/inputs/ToggleHeader";
 import Outline from "./Outline";
 import Header from "./Header";
-import useToggleStore from "../../../store/useUIToggleStore";
+import {useToggleStore} from "../../../store/useUIToggleStore";
 import Assets from "./Assets";
 import useModuleStore from "../../../store/useModuleStore";
 import Widgets from "./visualization/widgets/Widgets";

app/src/components/layout/sidebarRight/Header.tsx

@@ -5,7 +5,7 @@ import { ActiveUser } from "../../../types/users";
 import CollaborationPopup from "../../templates/CollaborationPopup";
 import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
 import { useSelectedUserStore } from "../../../store/useCollabStore";
-import useToggleStore from "../../../store/useUIToggleStore";
+import {useToggleStore} from "../../../store/useUIToggleStore";
 import { ToggleSidebarIcon } from "../../icons/HeaderIcons";
 import useModuleStore from "../../../store/useModuleStore";
 

app/src/components/layout/sidebarRight/SideBarRight.tsx

@@ -9,7 +9,7 @@ import {
   PropertiesIcon,
   SimulationIcon,
 } from "../../icons/SimulationIcons";
-import useToggleStore from "../../../store/useUIToggleStore";
+import {useToggleStore} from "../../../store/useUIToggleStore";
 import Visualization from "./visualization/Visualization";
 import Analysis from "./analysis/Analysis";
 import Simulations from "./simulation/Simulations";

app/src/components/layout/sidebarRight/simulation/Simulations.tsx

@@ -28,7 +28,7 @@ import {
   useSaveVersion,
 } from "../../../../store/builder/store";
 import CompareLayOut from "../../../ui/compareVersion/CompareLayOut";
-import useToggleStore from "../../../../store/useUIToggleStore";
+import {useToggleStore} from "../../../../store/useUIToggleStore";
 
 interface Event {
   modelName: string;

app/src/components/ui/ModuleToggle.tsx

@@ -6,7 +6,7 @@ import {
   SimulationIcon,
   VisualizationIcon,
 } from "../icons/ExportModuleIcons";
-import useToggleStore from "../../store/useUIToggleStore";
+import {useToggleStore} from "../../store/useUIToggleStore";
 import useVersionHistoryStore from "../../store/builder/store";
 
 const ModuleToggle: React.FC = () => {

app/src/components/ui/Tools.tsx

@@ -32,7 +32,7 @@ import {
   useActiveSubTool,
   useShortcutStore,
 } from "../../store/builder/store";
-import useToggleStore from "../../store/useUIToggleStore";
+import {useToggleStore} from "../../store/useUIToggleStore";
 import {
   use3DWidget,
   useFloatingWidget,

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

@@ -23,6 +23,7 @@ import { useSubModuleStore } from "../../../store/useModuleStore";
 import ProductionCapacity from "../analysis/ThroughputSummary";
 import ThroughputSummary from "../analysis/ProductionCapacity";
 import ROISummary from "../analysis/ROISummary";
+import { usePlayerStore } from "../../../store/useUIToggleStore";
 
 const SimulationPlayer: React.FC = () => {
   const MAX_SPEED = 4; // Maximum speed
@@ -31,7 +32,7 @@ const SimulationPlayer: React.FC = () => {
   const sliderRef = useRef<HTMLDivElement>(null);
   const [expand, setExpand] = useState(true);
   const [playSimulation, setPlaySimulation] = useState(false);
-  const [hidePlayer, setHidePlayer] = useState(false);
+  const { hidePlayer, setHidePlayer } = usePlayerStore();
 
   const { speed, setSpeed } = useAnimationPlaySpeed();
   const { setIsPlaying } = usePlayButtonStore();
@@ -111,22 +112,9 @@ const SimulationPlayer: React.FC = () => {
   const hourlySimulation = 25;
   const dailyProduction = 75;
   const monthlyROI = 50;
-  const { processBar, setProcessBar } = useProcessBar();
+  const { processBar } = useProcessBar();
-  // const process = [
-  //   { name: "process 1", completed: 0 }, // 0% completed
-  //   { name: "process 2", completed: 20 }, // 20% completed
-  //   { name: "process 3", completed: 40 }, // 40% completed
-  //   { name: "process 4", completed: 60 }, // 60% completed
-  //   { name: "process 5", completed: 80 }, // 80% completed
-  //   { name: "process 6", completed: 100 }, // 100% completed
-  //   { name: "process 7", completed: 0 }, // 0% completed
-  //   { name: "process 8", completed: 50 }, // 50% completed
-  //   { name: "process 9", completed: 90 }, // 90% completed
-  //   { name: "process 10", completed: 30 }, // 30% completed
-  // ];
 
   useEffect(() => {
-    // console.log('processBar: ', processBar);
   }, [processBar])
 
   const intervals = [50, 20, 30, 40, 50, 60]; // in minutes

app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import * as THREE from "three";
+import { useThree } from "@react-three/fiber";
 import IKInstance from '../ikInstance/ikInstance';
 import RoboticArmAnimator from '../animator/roboticArmAnimator';
 import MaterialAnimator from '../animator/materialAnimator';
@@ -18,6 +19,7 @@ function RoboticArmInstance({ armBot }: { armBot: ArmBotStatus }) {
     const [currentPhase, setCurrentPhase] = useState<(string)>("init");
     const [path, setPath] = useState<[number, number, number][]>([]);
     const [ikSolver, setIkSolver] = useState<any>(null);
+    const { scene } = useThree();
     const restPosition = new THREE.Vector3(0, 1.75, -1.6);
     const targetBone = "Target";
     const groupRef = useRef<any>(null);
@@ -271,6 +273,10 @@ function RoboticArmInstance({ armBot }: { armBot: ArmBotStatus }) {
 
 
     useEffect(() => {
+        const targetMesh = scene?.getObjectByProperty("uuid", armBot.modelUuid);
+        if (targetMesh) {
+            targetMesh.visible = (!isPlaying)
+        }
         const targetBones = ikSolver?.mesh.skeleton.bones.find((b: any) => b.name === targetBone);
         if (!isReset && isPlaying) {
             //Moving armBot from initial point to rest position.

app/src/pages/Project.tsx

@@ -34,7 +34,7 @@ import Footer from "../components/footer/Footer";
 import SelectFloorPlan from "../components/temporary/SelectFloorPlan";
 import ControlsPlayer from "../components/layout/controls/ControlsPlayer";
 import CompareLayOut from "../components/ui/compareVersion/CompareLayOut";
-import useToggleStore from "../store/useUIToggleStore";
+import {useToggleStore} from "../store/useUIToggleStore";
 import RegularDropDown from "../components/ui/inputs/RegularDropDown";
 import VersionSaved from "../components/layout/sidebarRight/versionHisory/VersionSaved";
 import SimulationPlayer from "../components/ui/simulation/simulationPlayer";

app/src/store/useUIToggleStore.ts

@@ -6,7 +6,7 @@ interface ToggleState {
   setToggleUI: (value1: boolean, value2: boolean) => void;
 }
 
-const useToggleStore = create<ToggleState>((set) => ({
+export const useToggleStore = create<ToggleState>((set) => ({
   toggleUILeft: true,
   toggleUIRight: false,
   setToggleUI: (value1: boolean, value2: boolean) => {
@@ -14,4 +14,13 @@ const useToggleStore = create<ToggleState>((set) => ({
   },
 }));
 
-export default useToggleStore;
+interface PlayerState {
+  hidePlayer: boolean;
+  setHidePlayer: (hide: boolean) => void;
+}
+
+// Create the Zustand store
+export const usePlayerStore = create<PlayerState>((set) => ({
+  hidePlayer: false, // initial state
+  setHidePlayer: (hide) => set({ hidePlayer: hide }), // state updater
+}));

app/src/utils/shortcutkeys/handleShortcutKeys.ts

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import useModuleStore, { useThreeDStore } from "../../store/useModuleStore";
-import useToggleStore from "../../store/useUIToggleStore";
+import { usePlayerStore, useToggleStore } from "../../store/useUIToggleStore";
 import {
   useActiveSubTool,
   useActiveTool,
@@ -17,6 +17,7 @@ import useCameraModeStore, {
 } from "../../store/usePlayButtonStore";
 import { detectModifierKeys } from "./detectModifierKeys";
 import { useSelectedZoneStore } from "../../store/visualization/useZoneStore";
+import { useLogger } from "../../components/ui/log/LoggerContext";
 
 const KeyPressListener: React.FC = () => {
   const { activeModule, setActiveModule } = useModuleStore();
@@ -34,6 +35,8 @@ const KeyPressListener: React.FC = () => {
   const { showShortcuts, setShowShortcuts } = useShortcutStore();
   const { setWalkMode } = useCameraModeStore();
   const { setIsVersionSaved } = useSaveVersion();
+  const { isLogListVisible, setIsLogListVisible } = useLogger();
+  const { hidePlayer, setHidePlayer } = usePlayerStore();
 
   const isTextInput = (element: Element | null): boolean =>
     element instanceof HTMLInputElement ||
@@ -175,6 +178,14 @@ const KeyPressListener: React.FC = () => {
       setIsPlaying(true);
     }
 
+    if (keyCombination === "L") {
+      setIsLogListVisible(!isLogListVisible);
+    }
+
+    if (keyCombination === "H") {
+      setHidePlayer(!hidePlayer);
+    }
+
     if (keyCombination === "ESCAPE") {
       setWalkMode(false);
       setActiveTool("cursor");
@@ -183,6 +194,7 @@ const KeyPressListener: React.FC = () => {
       clearSelectedZone();
       setShowShortcuts(false);
       setIsVersionSaved(false);
+      setIsLogListVisible(false);
     }
 
     if (keyCombination === "Ctrl+Shift+?") {
@@ -191,7 +203,7 @@ const KeyPressListener: React.FC = () => {
 
     // Placeholder for future implementation
     if (
-      ["Ctrl+Z", "Ctrl+Y", "Ctrl+Shift+Z", "Ctrl+H", "Ctrl+F"].includes(
+      ["Ctrl+Z", "Ctrl+Y", "Ctrl+Shift+Z", "Ctrl+F"].includes(
         keyCombination
       )
     ) {
@@ -210,6 +222,8 @@ const KeyPressListener: React.FC = () => {
     toggleView,
     showShortcuts,
     isPlaying,
+    isLogListVisible,
+    hidePlayer
   ]);
 
   return null;