Merge remote-tracking branch 'origin/v2-ui' into v2

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";
@@ -36,9 +36,7 @@ const SideBarLeft: React.FC = () => {
   return (
     <div
       className={`sidebar-left-wrapper ${
-        (toggleUILeft && !isVersionSaved) || activeModule !== "simulation"
+        toggleUILeft && !isVersionSaved ? "open" : "closed"
-          ? "open"
-          : "closed"
       }`}
     >
       <Header />

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/collaboration/useCollabStore";
-import useToggleStore from "../../../store/useUIToggleStore";
+import { useToggleStore } from "../../../store/useUIToggleStore";
 import { ToggleSidebarIcon } from "../../icons/HeaderIcons";
 import useModuleStore from "../../../store/useModuleStore";
 
@@ -62,8 +62,7 @@ const Header: React.FC = () => {
         <div className="options-container">
           <button
             id="toggle-rightSidebar-ui-button"
-            className={`toggle-sidebar-ui-button ${
+            className={`toggle-sidebar-ui-button ${!toggleUIRight ? "active" : ""
-              !toggleUIRight ? "active" : ""
               }`}
             onClick={() => {
               if (activeModule !== "market") {

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";
@@ -63,9 +63,7 @@ const SideBarRight: React.FC = () => {
   return (
     <div
       className={`sidebar-right-wrapper ${
-        (toggleUIRight && !isVersionSaved) || activeModule !== "simulation"
+        toggleUIRight && !isVersionSaved ? "open" : "closed"
-          ? "open"
-          : "closed"
       }`}
     >
       <Header />

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/collaboration/CommentThreads.tsx

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
+
+const CommentThreads: React.FC = () => {
+  const [expand, setExpand] = useState(true);
+  const commentsedUsers = [
+    {
+      userId: "1",
+      userName: "user",
+    },
+    {
+      userId: "1",
+      userName: "Admin",
+    },
+  ];
+
+  function getDetails(type?: "clicked") {
+    if (type === "clicked") {
+      setExpand(true);
+    } else {
+      setExpand((prev) => !prev);
+    }
+  }
+
+  return (
+    <div className="comments-threads-wrapper">
+      <button
+        onPointerEnter={() => getDetails()}
+        onPointerLeave={() => getDetails()}
+        onClick={() => getDetails("clicked")}
+        className={`comments-threads-container ${expand ? "open" : "closed"}`}
+      >
+        <div className="users-commented">
+          {commentsedUsers.map((val, i) => (
+            <div
+              className="users"
+              key={val.userId}
+              style={{ background: getAvatarColor(i, val.userName) }}
+            >
+              {val.userName[0]}
+            </div>
+          ))}
+        </div>
+        <div
+          className={`last-comment-details ${expand ? "expand" : ""}`}
+        >
+          <div className="header">
+            <div className="user-name">user</div>
+            <div className="time">4 mins, ago</div>
+          </div>
+          <div className="message">hello</div>
+          <div className="replies">0 replies</div>
+        </div>
+      </button>
+    </div>
+  );
+};
+
+export default CommentThreads;

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/pages/Project.tsx

@@ -34,10 +34,11 @@ 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";
+import CommentThreads from "../components/ui/collaboration/CommentThreads";
 
 const Project: React.FC = () => {
   let navigate = useNavigate();
@@ -180,6 +181,7 @@ const Project: React.FC = () => {
         </>
       )}
       <VersionSaved />
+      <CommentThreads />
     </div>
   );
 };

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/styles/main.scss

@@ -1,48 +1,48 @@
 // abstracts
-@use 'abstracts/variables';
+@use "abstracts/variables";
-@use 'abstracts/mixins';
+@use "abstracts/mixins";
-@use 'abstracts/functions';
+@use "abstracts/functions";
 
 // base
-@use 'base/reset';
+@use "base/reset";
-@use 'base/typography';
+@use "base/typography";
-@use 'base/global';
+@use "base/global";
-@use 'base/base';
+@use "base/base";
 
 // components
-@use 'components/button';
+@use "components/button";
-@use 'components/form';
+@use "components/form";
-@use 'components/input';
+@use "components/input";
-@use 'components/lists';
+@use "components/lists";
-@use 'components/moduleToggle';
+@use "components/moduleToggle";
-@use 'components/templates';
+@use "components/templates";
-@use 'components/tools';
+@use "components/tools";
-@use 'components/visualization/floating/energyConsumed';
+@use "components/visualization/floating/energyConsumed";
-@use 'components/visualization/ui/styledWidgets';
+@use "components/visualization/ui/styledWidgets";
-@use 'components/visualization/floating/common';
+@use "components/visualization/floating/common";
-@use 'components/marketPlace/marketPlace';
+@use "components/marketPlace/marketPlace";
-@use 'components/menu/menu';
+@use "components/menu/menu";
-@use 'components/confirmationPopUp';
+@use "components/confirmationPopUp";
-@use 'components/simulation/simulation';
+@use "components/simulation/simulation";
-@use 'components/simulation/analysis';
+@use "components/simulation/analysis";
-@use 'components/logs/logs';
+@use "components/logs/logs";
-@use 'components/footer/footer.scss';
+@use "components/footer/footer.scss";
 
 // layout
-@use 'layout/loading';
+@use "layout/loading";
-@use 'layout/sidebar';
+@use "layout/sidebar";
-@use 'layout/popup';
+@use "layout/popup";
-@use 'layout/toast';
+@use "layout/toast";
-@use 'layout/skeleton';
+@use "layout/skeleton";
-@use 'layout/compareLayoutPopUp';
+@use "layout/compareLayoutPopUp";
-@use 'layout/compareLayout';
+@use "layout/compareLayout";
-
 
 // pages
-@use 'pages/dashboard';
+@use "pages/dashboard";
-@use 'pages/home';
+@use "pages/home";
-@use 'pages/realTimeViz';
+@use "pages/realTimeViz";
-@use 'pages/userAuth';
+@use "pages/userAuth";
 
 //
-@use './scene/scene'
+@use "./scene/scene";
+@use "./scene/comments";

app/src/styles/scene/comments.scss

@@ -0,0 +1,72 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.comments-threads-wrapper {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  padding: 4px;
+  background: var(--background-color);
+  border-radius: #{$border-radius-large} #{$border-radius-large} #{$border-radius-large}
+    0;
+  backdrop-filter: blur(12px);
+  z-index: 1000;
+  transform: translateY(-100%);
+  outline: 1px solid var(--border-color);
+  transition: all 0.2s ease-out;
+  .comments-threads-container {
+    display: flex;
+    align-items: start;
+    flex-direction: column;
+    .users-commented {
+      @include flex-center;
+      .users {
+        height: 24px;
+        line-height: 24px;
+        width: 24px;
+        text-transform: uppercase;
+        border-radius: 50%;
+      }
+    }
+    .last-comment-details {
+      display: flex;
+      align-items: start;
+      flex-direction: column;
+      padding-top: 0;
+      height: 0;
+      width: 0;
+      overflow: hidden;
+      transition: all 0.2s;
+      .header {
+        @include flex-center;
+        gap: 10px;
+        .user-name {
+          text-transform: capitalize;
+        }
+        .time {
+          font-size: var(--font-size-small);
+          color: var(--input-text-color);
+        }
+      }
+      .message {
+        margin-top: 10px;
+      }
+      .replies {
+        margin-top: 10px;
+        font-size: var(--font-size-small);
+        color: var(--input-text-color);
+      }
+    }
+    .expand {
+      min-width: 200px;
+      max-width: 260px;
+      padding: 12px;
+      height: 100%;
+    }
+  }
+  .open {
+    .users-commented {
+      padding: 12px;
+    }
+  }
+}

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;