From 5b7e8b893ce555a22e69058d274d147f9eb85cd1 Mon Sep 17 00:00:00 2001
From: Nalvazhuthi <nalvazhuthi@hexrfactory.com>
Date: Mon, 25 Aug 2025 15:56:30 +0530
Subject: [PATCH] refactor: improve code readability and maintainability in
 MainScene, Messages, and ThreadChat components; adjust comments.scss for
 better layout

---
 .../components/layout/scenes/MainScene.tsx    |  6 +++-
 .../components/ui/collaboration/Messages.tsx  | 31 ++++++++++++-------
 .../ui/collaboration/ThreadChat.tsx           | 16 +++++++---
 app/src/styles/scene/comments.scss            |  4 +--
 4 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/app/src/components/layout/scenes/MainScene.tsx b/app/src/components/layout/scenes/MainScene.tsx
index f5e0c72..350c9e9 100644
--- a/app/src/components/layout/scenes/MainScene.tsx
+++ b/app/src/components/layout/scenes/MainScene.tsx
@@ -212,7 +212,11 @@ function MainScene() {
       {activeModule !== "market" && !selectedUser && <Footer />}
 
       <VersionSaved />
-      {(commentPositionState !== null || selectedComment !== null) && <ThreadChat />}
+
+      {
+        (commentPositionState !== null || selectedComment !== null) &&
+        <ThreadChat />
+      }
 
     </>
   );
diff --git a/app/src/components/ui/collaboration/Messages.tsx b/app/src/components/ui/collaboration/Messages.tsx
index b3f37e1..11e87b2 100644
--- a/app/src/components/ui/collaboration/Messages.tsx
+++ b/app/src/components/ui/collaboration/Messages.tsx
@@ -231,7 +231,10 @@ const Messages: React.FC<MessageProps> = ({ val, i, setMessages, mode, setIsEdit
               <div className="time">{isEditableThread ? getRelativeTime(val.createdAt) : val.createdAt}</div>
             </div>
             {(val as Reply).creatorId === userId && (
-              <div className="more-options">
+              <div
+                className="more-options"
+                onMouseLeave={() => setOpenOptions(false)}
+              >
                 <button
                   className="more-options-button"
                   onClick={() => {
@@ -240,35 +243,41 @@ const Messages: React.FC<MessageProps> = ({ val, i, setMessages, mode, setIsEdit
                 >
                   <KebabIcon />
                 </button>
+
                 {openOptions && (
                   <div className="options-list">
                     <button
                       className="option"
                       onClick={(e) => {
                         e.preventDefault();
-                        setMode && setMode("edit")
+                        setMode && setMode("edit");
                         setOpenOptions(false);
                         setEditedThread && setEditedThread(true);
-                        setIsEditComment(true)
+                        setIsEditComment(true);
                       }}
                     >
                       Edit
                     </button>
-                    {!(isEditableThread) && <button
-                      className="option"
-                      onClick={() => {
-                        handleDeleteAction((val as Reply).replyId);
-                      }}
-                    >
-                      Delete
-                    </button>}
+
+                    {!isEditableThread && (
+                      <button
+                        className="option"
+                        onClick={() => {
+                          handleDeleteAction((val as Reply).replyId);
+                        }}
+                      >
+                        Delete
+                      </button>
+                    )}
                   </div>
                 )}
               </div>
             )}
+
             <div className="message">
               {"comment" in val ? val.comment : val.threadTitle}
             </div>
+            
           </div>
         </div >
       )}
diff --git a/app/src/components/ui/collaboration/ThreadChat.tsx b/app/src/components/ui/collaboration/ThreadChat.tsx
index 8e4b24b..5370689 100644
--- a/app/src/components/ui/collaboration/ThreadChat.tsx
+++ b/app/src/components/ui/collaboration/ThreadChat.tsx
@@ -131,9 +131,10 @@ const ThreadChat: React.FC = () => {
     if (dragging) updatePosition(e, true);
   };
 
-  useEffect(() => {
-    updatePosition({ clientX: position.x, clientY: position.y }, true);
-  }, [selectedComment]);
+  // Commented this useEffect to prevent offset after user saved the comment
+  // useEffect(() => {
+  //   updatePosition({ clientX: position.x, clientY: position.y }, true);
+  // }, [selectedComment]);
 
 
   const handlePointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
@@ -144,6 +145,10 @@ const ThreadChat: React.FC = () => {
   };
 
   const handleCreateComments = async (e: any) => {
+    // Continue send or create message only there is only value avalibale 
+    // To prevent empty value
+
+    if (!value) return;
     e.preventDefault();
     try {
       // const createComments = await addCommentsApi(projectId, value, selectedComment?.threadId,  selectedVersion?.versionId || "")/ 
@@ -163,6 +168,7 @@ const ThreadChat: React.FC = () => {
 
       // }
 
+
       if (threadSocket && mode === "create") {
         const addComment = {
           versionId: selectedVersion?.versionId || "",
@@ -190,7 +196,7 @@ const ThreadChat: React.FC = () => {
       //     removeComment(selectedComment?.threadId)
       //     setSelectedComment([])
       // }
-      console.log('threadSocket:threadChat ', threadSocket);
+
       if (threadSocket) {
         // projectId, userId, organization, threadId
         const deleteThread = {
@@ -258,7 +264,7 @@ const ThreadChat: React.FC = () => {
       };
 
       if (threadSocket) {
-        console.log('createThread: ', createThread);
+
 
         setInputActive(false);
         threadSocket.emit("v1:thread:create", createThread);
diff --git a/app/src/styles/scene/comments.scss b/app/src/styles/scene/comments.scss
index 480594a..ed4a1be 100644
--- a/app/src/styles/scene/comments.scss
+++ b/app/src/styles/scene/comments.scss
@@ -171,8 +171,8 @@
     .messages-wrapper {
       padding: 12px;
       padding-top: 0;
-      max-height: 50vh;
-      overflow-y: auto;
+      max-height: 36vh;
+      overflow: auto;
       .edit-container {
         .input-container {
           textarea {