reply actions

public/icons/chat-reply.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.1746 7.75L7.84131 13.25L15.1746 18.75L15.1746 7.75Z" fill="#9FA1A7"/>
+<path d="M23.4255 24.2497C26.6333 15.0828 19.7596 10.5 15.1764 10.9573C15.1766 12.79 15.1764 15.5414 15.1764 15.5414C16.0922 15.5414 22.508 15.9997 23.4255 24.2497Z" fill="#9FA1A7"/>
+</svg>

public/icons/menu.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 20C17.1046 20 18 20.8954 18 22C18 23.1046 17.1046 24 16 24C14.8954 24 14 23.1046 14 22C14 20.8954 14.8954 20 16 20Z" fill="#9FA1A7"/>
+<path d="M16 14C17.1046 14 18 14.8954 18 16C18 17.1046 17.1046 18 16 18C14.8954 18 14 17.1046 14 16C14 14.8954 14.8954 14 16 14Z" fill="#9FA1A7"/>
+<path d="M16 8C17.1046 8 18 8.89543 18 10C18 11.1046 17.1046 12 16 12C14.8954 12 14 11.1046 14 10C14 8.89543 14.8954 8 16 8Z" fill="#9FA1A7"/>
+</svg>

src/components/Inbox/Message.module.scss

@@ -1,18 +1,25 @@
+$actionsWidth: 32px * 2;
+
 .Message {
   display: flex;
   flex-direction: column;
   margin: 3.2rem 0;
-  position: relative;
 
   .body {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+
+    .text {
+      display: inline-flex;
+      max-width: 60%;
+      margin-right: auto;
       background: #f6f6f6;
       font-size: 14px;
-    max-width: 60%;
       border-radius: 16px;
       padding: 12px 16px;
       position: relative;
-    display: flex;
+      z-index: 1;
-    margin-right: auto;
 
       p {
         margin: 0;
@@ -28,6 +35,30 @@
       }
     }
 
+    .actions {
+      position: absolute;
+      display: flex;
+      flex-direction: row;
+      width: $actionsWidth;
+      height: 32px;
+      cursor: pointer;
+      top: 50%;
+      transform: translateY(-50%);
+      opacity: 0;
+      right: -$actionsWidth/2;
+      z-index: -1;
+      transition: 0.3s ease-in-out;
+    }
+
+    &:hover {
+      .actions {
+        z-index: 1;
+        opacity: 1;
+        right: -$actionsWidth;
+      }
+    }
+  }
+
   .time {
     margin-top: 8px;
     font-size: 10px;
@@ -52,12 +83,28 @@
   &.own {
     .body {
       justify-content: flex-end;
+
+      .text {
         margin-left: auto;
         margin-right: unset;
         background: #000;
         color: #fff;
       }
 
+      .actions {
+        right: unset;
+        left: -$actionsWidth/2;
+        flex-direction: row-reverse;
+        .reply {
+          transform: scaleX(-1);
+        }
+      }
+
+      &:hover .actions {
+        left: -$actionsWidth;
+      }
+    }
+
     .time {
       text-align: right;
     }

src/components/Inbox/Message.tsx

@@ -22,9 +22,6 @@ const Message = (props: Props) => {
   const user = props.members?.find((m) => m.id === Number(props.content.author))
   return (
     <div class={clsx(styles.Message, isOwn && styles.own)}>
-      {/*<div class={styles.actions}>*/}
-      {/*  /!*<Icon name={}></Icon>*!/*/}
-      {/*</div>*/}
       <Show when={!isOwn}>
         <div class={styles.author}>
           <DialogAvatar size="small" name={user.name} url={user.userpic} />
@@ -32,8 +29,14 @@ const Message = (props: Props) => {
         </div>
       </Show>
       <div class={styles.body}>
+        <div class={styles.text}>
+          <div class={styles.actions}>
+            <Icon name="chat-reply" class={styles.reply} />
+            <Icon name="menu" />
+          </div>
           <div innerHTML={md.render(props.content.body)} />
         </div>
+      </div>
       <div class={styles.time}>{formattedTime(props.content.createdAt)}</div>
     </div>
   )