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,29 +1,60 @@
+$actionsWidth: 32px * 2;
+
 .Message {
   display: flex;
   flex-direction: column;
   margin: 3.2rem 0;
-  position: relative;
 
   .body {
-    background: #f6f6f6;
-    font-size: 14px;
-    max-width: 60%;
-    border-radius: 16px;
-    padding: 12px 16px;
     position: relative;
     display: flex;
-    margin-right: auto;
+    flex-direction: row;
 
-    p {
-      margin: 0;
+    .text {
+      display: inline-flex;
+      max-width: 60%;
+      margin-right: auto;
+      background: #f6f6f6;
+      font-size: 14px;
+      border-radius: 16px;
+      padding: 12px 16px;
+      position: relative;
+      z-index: 1;
+
+      p {
+        margin: 0;
+      }
+
+      a {
+        color: inherit;
+        text-decoration: underline;
+
+        &:hover {
+          color: inherit;
+        }
+      }
     }
 
-    a {
-      color: inherit;
-      text-decoration: underline;
+    .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 {
-        color: inherit;
+    &:hover {
+      .actions {
+        z-index: 1;
+        opacity: 1;
+        right: -$actionsWidth;
       }
     }
   }
@@ -52,10 +83,26 @@
   &.own {
     .body {
       justify-content: flex-end;
-      margin-left: auto;
-      margin-right: unset;
-      background: #000;
-      color: #fff;
+
+      .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 {

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,7 +29,13 @@ const Message = (props: Props) => {
         </div>
       </Show>
       <div class={styles.body}>
-        <div innerHTML={md.render(props.content.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>