move SABs margin into status

src/components/chat_message/chat_message.js

@@ -1,3 +1,4 @@
+import { find } from 'lodash'
 import { mapState as mapPiniaState } from 'pinia'
 import { mapState } from 'vuex'
 
@@ -7,6 +8,8 @@ import Gallery from 'src/components/gallery/gallery.vue'
 import LinkPreview from 'src/components/link-preview/link-preview.vue'
 import Popover from 'src/components/popover/popover.vue'
 import StatusContent from 'src/components/status_content/status_content.vue'
+import StatusBody from 'src/components/status_body/status_body.vue'
+import StatusActionButtons from 'src/components/status_action_buttons/status_action_buttons.vue'
 import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
 import UserPopover from 'src/components/user_popover/user_popover.vue'
 
@@ -25,18 +28,19 @@ library.add(faTimes, faEllipsisH, faCircleNotch)
 
 const ChatMessage = {
   name: 'ChatMessage',
-  props: ['edited', 'noHeading', 'chatItem', 'hoveredMessageChain'],
-  emits: ['hover'],
+  props: ['edited', 'noHeading', 'previousItem', 'chatItem', 'previousItem', 'hoveredMessageChain'],
+  emits: ['hover', 'replyRequested'],
   components: {
     Popover,
     Attachment,
     StatusContent,
+    StatusBody,
+    StatusActionButtons,
     UserAvatar,
     Gallery,
     LinkPreview,
     ChatMessageDate,
-    UserPopover,
-  },
+    UserPopover,},
   computed: {
     // Returns HH:MM (hours and minutes) in local time.
     createdAt() {
@@ -65,6 +69,16 @@ const ChatMessage = {
     isMessage() {
       return this.chatItem.type === 'message'
     },
+    isCustomReply() {
+      if (!this.previousItem) return false
+      console.log('==')
+      console.log('PREV', toValue(this.previousItem.data.raw_html))
+      console.log('CURR', toValue(this.chatItem.data.raw_html))
+      return this.previousItem.data.id !== this.chatItem.data.in_reply_to_status_id
+    },
+    customReplyTo() {
+      return find(this.$store.state.statuses.allStatuses, { id: this.chatItem.data.in_reply_to_status_id })
+    },
     messageForStatusContent() {
       return {
         summary: '',

src/components/chat_message/chat_message.scss

@@ -11,22 +11,53 @@
     }
   }
 
-  .chat-message-menu {
+  .chat-message-toolbar {
     transition: opacity 0.1s;
     opacity: 0;
     position: absolute;
     top: -0.8em;
+    right: 0.4rem;
+    z-index: 10;
 
-    button {
+    .quick-action-buttons {
+      justify-items: end;
+      grid-template-columns: auto auto auto;
+    }
+
+    .simple-button {
       padding-top: 0.2em;
       padding-bottom: 0.2em;
     }
+
+    &.-visible {
+      opacity: 1;
+    }
   }
 
   .menu-icon {
     cursor: pointer;
   }
 
+  .reply-to-header {
+    white-space: nowrap;
+    width: 100%;
+    display: flex;
+    align-items: baseline;
+    gap: 0.5em;
+
+    .reply-label {
+      display: inline-block;
+      line-height: 1;
+    }
+
+    .reply-body {
+      line-height: 1;
+      display: inline-block;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
   .popover {
     width: 12em;
   }
@@ -66,7 +97,6 @@
     font-size: 0.8em;
     margin: -1em 0 -0.5em;
     font-style: italic;
-    opacity: 0.8;
   }
 
   .without-attachment {
@@ -112,14 +142,8 @@
       align-items: flex-end;
     }
 
-    .chat-message-menu {
-      right: 0.4rem;
-    }
-  }
-
-  .-incoming {
-    .chat-message-menu {
-      left: 0.4rem;
+    .reply-to-header {
+      justify-content: end;
     }
   }
 

src/components/chat_message/chat_message.vue

@@ -25,6 +25,25 @@
         </UserPopover>
       </div>
       <div class="chat-message-inner">
+        <small
+          v-if="isStatus && isCustomReply"
+          class="reply-to-header faint"
+        >
+          <strong class="reply-label">
+            <FAIcon
+              class="fa-scale-110 fa-old-padding"
+              icon="reply"
+              flip="horizontal"
+            />
+            {{ $t('status.reply_to') }}
+          </strong>
+          <StatusBody
+            class="reply-body"
+            :status="customReplyTo"
+            collapse
+            single-line
+          />
+        </small>
         <div
           class="status-body"
           :style="{ 'min-width': message.attachment ? '80%' : '' }"
@@ -36,15 +55,27 @@
             @mouseenter="hovered = true"
             @mouseleave="hovered = false"
           >
+
+            <StatusActionButtons
+              v-if="isStatus"
+              class="chat-message-toolbar"
+              :class="{ '-visible': hovered || menuOpened }"
+              :status="message"
+              :pinned="new Set(['reply', 'emoji'])"
+              fixed-pinned
+              use-default-buttons
+              hide-labels
+              @toggle-replying="$emit('replyRequested', message)"
+            />
             <div
-              class="chat-message-menu"
-              :class="{ 'visible': hovered || menuOpened }"
+              class="chat-message-toolbar"
+              :class="{ '-visible': hovered || menuOpened }"
+              v-else
             >
               <Popover
                 trigger="click"
+                :trigger-attrs="{ 'class': 'button-default menu-icon simple-button', title: $t('chats.more') }"
                 placement="top"
-                bound-to-selector=".chat-view-inner"
-                :bound-to="{ x: 'container' }"
                 :margin="popoverMarginStyle"
                 @show="menuOpened = true"
                 @close="menuOpened = false"
@@ -62,12 +93,7 @@
                   </div>
                 </template>
                 <template #trigger>
-                  <button
-                    class="button-default menu-icon"
-                    :title="$t('chats.more')"
-                  >
-                    <FAIcon icon="ellipsis-h" />
-                  </button>
+                  <FAIcon icon="ellipsis-h" />
                 </template>
               </Popover>
             </div>
@@ -87,9 +113,9 @@
                     :title="visibilityLocalized"
                   >
                     <FAIcon
-                      fixed-width
                       class="fa-scale-110"
                       :icon="visibilityIcon(message.visibility)"
+                      fixed-width
                     />
                   </span>
                   <span
@@ -98,8 +124,8 @@
                   >
                     <FAIcon
                       class="fa-old-padding"
-                      spin
                       icon="circle-notch"
+                      spin
                     />
                   </span>
                   {{ createdAt }}