feat: update CommentThreads component and integrate it into CommentInstance

app/src/components/ui/collaboration/CommentThreads.tsx

@@ -2,14 +2,14 @@ import React, { useState } from "react";
 import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
 
 const CommentThreads: React.FC = () => {
-  const [expand, setExpand] = useState(true);
+  const [expand, setExpand] = useState(false);
   const commentsedUsers = [
     {
       userId: "1",
       userName: "user",
     },
     {
-      userId: "1",
+      userId: "2",
       userName: "Admin",
     },
   ];

app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx

@@ -2,6 +2,7 @@ import { Html, TransformControls } from '@react-three/drei';
 import { useEffect, useRef, useState } from 'react'
 import { usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
 import { detectModifierKeys } from '../../../../../utils/shortcutkeys/detectModifierKeys';
+import CommentThreads from '../../../../../components/ui/collaboration/CommentThreads';
 
 function CommentInstance({ comment }: { comment: CommentSchema }) {
     const { isPlaying } = usePlayButtonStore();
@@ -38,9 +39,10 @@ function CommentInstance({ comment }: { comment: CommentSchema }) {
                 center
                 position={comment.position}
                 rotation={comment.rotation}
+                className='comments-main-wrapper'
             >
-
-                <div
+                <CommentThreads />
+                {/* <div
                     className='outer'
                     onClick={(e) => {
                         e.stopPropagation();
@@ -53,7 +55,7 @@ function CommentInstance({ comment }: { comment: CommentSchema }) {
                     <div>
                         hii
                     </div>
-                </div>
+                </div> */}
             </Html>
             {CommentRef.current && transformMode && (
                 <TransformControls

app/src/styles/scene/comments.scss

@@ -1,10 +1,13 @@
 @use "../abstracts/variables" as *;
 @use "../abstracts/mixins" as *;
 
+.comments-main-wrapper{
+  position: relative;
+}
 .comments-threads-wrapper {
-  position: fixed;
-  top: 50%;
-  left: 50%;
+  position: absolute;
+  top: 0;
+  left: 0;
   padding: 4px;
   background: var(--background-color);
   border-radius: #{$border-radius-large} #{$border-radius-large} #{$border-radius-large}