From 4dddc82c8c24c97c91687fd82ebe48fe9070d934 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Fri, 23 May 2025 15:29:18 +0530
Subject: [PATCH] feat: add delete action to Messages component and enhance
 styling for better user experience

---
 .../components/ui/collaboration/Messages.tsx  | 16 ++++-
 .../ui/collaboration/ThreadChat.tsx           |  7 +-
 app/src/styles/scene/comments.scss            | 70 +++++++++++++++++--
 3 files changed, 84 insertions(+), 9 deletions(-)

diff --git a/app/src/components/ui/collaboration/Messages.tsx b/app/src/components/ui/collaboration/Messages.tsx
index 3fffb4b..0544b1c 100644
--- a/app/src/components/ui/collaboration/Messages.tsx
+++ b/app/src/components/ui/collaboration/Messages.tsx
@@ -33,6 +33,10 @@ const Messages: React.FC<MessageProps> = ({ val, i }) => {
     setIsEditing(false);
   }
 
+  function handleDeleteAction() {
+    setOpenOptions(false);
+  }
+
   return (
     <>
       {isEditing ? (
@@ -87,7 +91,7 @@ const Messages: React.FC<MessageProps> = ({ val, i }) => {
                 <button
                   className="more-options-button"
                   onClick={() => {
-                    setOpenOptions(true);
+                    setOpenOptions(!openOptions);
                   }}
                 >
                   <KebabIcon />
@@ -97,12 +101,20 @@ const Messages: React.FC<MessageProps> = ({ val, i }) => {
                     <button
                       className="option"
                       onClick={() => {
+                        setOpenOptions(false);
                         setIsEditing(true);
                       }}
                     >
                       Edit
                     </button>
-                    <button className="option">Delete</button>
+                    <button
+                      className="option"
+                      onClick={() => {
+                        handleDeleteAction();
+                      }}
+                    >
+                      Delete
+                    </button>
                   </div>
                 )}
               </div>
diff --git a/app/src/components/ui/collaboration/ThreadChat.tsx b/app/src/components/ui/collaboration/ThreadChat.tsx
index f3d5274..4447188 100644
--- a/app/src/components/ui/collaboration/ThreadChat.tsx
+++ b/app/src/components/ui/collaboration/ThreadChat.tsx
@@ -17,14 +17,15 @@ const ThreadChat: React.FC = () => {
     {
       replyId: "user 1",
       creatorId: "1",
-      createdAt: "hello, thread check",
+      createdAt: "2 hrs ago",
       lastUpdatedAt: "2 hrs ago",
-      reply: "reply 1",
+      reply:
+        "reply testing reply content 1, reply testing reply content 1reply testing reply content 1",
     },
     {
       replyId: "user 2",
       creatorId: "2",
-      createdAt: "hello, thread check",
+      createdAt: "2 hrs ago",
       lastUpdatedAt: "2 hrs ago",
       reply: "reply 2",
     },
diff --git a/app/src/styles/scene/comments.scss b/app/src/styles/scene/comments.scss
index f7d5994..20560a2 100644
--- a/app/src/styles/scene/comments.scss
+++ b/app/src/styles/scene/comments.scss
@@ -121,12 +121,14 @@
           padding: 8px 4px;
           border-radius: #{$border-radius-medium};
           backdrop-filter: blur(10px);
+          z-index: 100;
           .options {
             text-wrap: nowrap;
             padding: 2px 4px;
             border-radius: #{$border-radius-medium};
             cursor: pointer;
             &:hover {
+              color: var(--text-button-color);
               background: var(--background-color-accent);
             }
             &.delete {
@@ -159,6 +161,12 @@
       padding-top: 0;
       .edit-container {
         .input-container {
+          textarea{
+            background: var(--background-color);
+            &:focus{
+              outline-color: var(--border-color-accent);
+            }
+          }
         }
         .actions-container {
           @include flex-space-between;
@@ -169,34 +177,88 @@
             gap: 4px;
             .cancel-button,
             .save-button {
-              padding: 4px 6px;
+              padding: 4px 10px;
               border-radius: #{$border-radius-large};
               background: var(--background-color-solid);
               outline: 1px solid var(--border-color);
             }
             .save-button {
+              color: var(--text-button-color);
+              background: var(--background-color-accent);
+              outline: none;
             }
           }
         }
       }
       .message-container {
+        position: relative;
+        @include flex-space-between;
+        align-items: flex-start;
+        gap: 12px;
+        margin-top: 8px;
+        &:first-child{
+          margin: 0;
+        }
         .profile {
+          height: 28px;
+          width: 28px;
+          min-width: 28px;
+          text-transform: uppercase;
+          line-height: 28px;
+          text-align: center;
+          border-radius: #{$border-radius-circle};
         }
         .content {
+          width: 100%;
           .user-details {
+            display: flex;
+            align-items: flex-end;
+            gap: 8px;
             .user-name {
+              text-transform: capitalize;
             }
             .time {
+              font-size: var(--font-size-tiny);
+              color: var(--input-text-color);
             }
           }
         }
         .more-options {
+          position: absolute;
+          right: 0;
+          top: 0;
           .more-options-button {
-          }
-          .options-list {
-            .option {
+            @include flex-center;
+            height: 18px;
+            width: 18px;
+            border-radius: #{$border-radius-small};
+            &:hover{
+              background: var(--background-color-solid);
             }
           }
+          .options-list {
+            position: absolute;
+            right: 0;
+            padding: 3px 6px;
+            background: var(--background-color);
+            backdrop-filter: blur(10px);
+            outline: 1px solid var(--border-color);
+            border-radius: #{$border-radius-medium};
+            z-index: 100;
+            .option {
+              width: 100%;
+              border-radius: #{$border-radius-medium};
+              padding: 2px 6px;
+              text-align: start;
+              &:hover{
+                background: var(--background-color-accent);
+                color: var(--text-button-color);
+              }
+            }
+          }
+        }
+        .message{
+          margin-top: 6px;
         }
       }
     }