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

@@ -38,6 +38,7 @@ 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/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;
+    }
+  }
+}