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'],
+  props: ['edited', 'noHeading', 'previousItem', 'chatItem', 'previousItem', 'hoveredMessageChain'],
-  emits: ['hover'],
+  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 {
+    .reply-to-header {
-      right: 0.4rem;
+      justify-content: end;
-    }
-  }
-
-  .-incoming {
-    .chat-message-menu {
-      left: 0.4rem;
     }
   }
 

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="chat-message-toolbar"
-              :class="{ 'visible': hovered || menuOpened }"
+              :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
+                  <FAIcon icon="ellipsis-h" />
-                    class="button-default menu-icon"
-                    :title="$t('chats.more')"
-                  >
-                    <FAIcon icon="ellipsis-h" />
-                  </button>
                 </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 }}

src/components/chat_message_list/chat_message_list.js

@@ -20,7 +20,7 @@ const ChatMessageList = {
       hoveredMessageChainId: undefined,
     }
   },
-  emits: ['messageDelete'],
+  emits: ['messageDelete', 'replyRequested'],
   computed: {
     chatItems() {
       const messages = [
@@ -107,6 +107,22 @@ const ChatMessageList = {
     onMessageDelete({ messageId, chatId }) {
       this.$emit('messageDelete', { messageId, chatId })
     },
+    onReplyRequested(message) {
+      this.$emit('replyRequested', message)
+    },
+    getPreviousItem(index) {
+      let result
+
+      this.chatItems.slice(0, index).reverse().some((item) => {
+        const isMessage = item.type === 'message'
+        if (isMessage) {
+          result = item
+        }
+        return isMessage
+      })
+
+      return result
+    }
   },
 }
 

src/components/chat_message_list/chat_message_list.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="ChatMessageList">
     <ChatMessage
-      v-for="chatItem in chatItems"
+      v-for="(chatItem, index) in chatItems"
       :key="chatItem.id"
       :chat-item="chatItem"
+      :previous-item="getPreviousItem(index)"
       :hovered-message-chain="chatItem.messageChainId === hoveredMessageChainId"
       @hover="onMessageHover"
       @delete="onMessageDelete"
+      @reply-requested="onReplyRequested"
     />
   </div>
 </template>

src/components/conversation/conversation.js

@@ -2,6 +2,7 @@ import { clone, filter, findIndex, get, reduce } from 'lodash'
 import { mapState as mapPiniaState } from 'pinia'
 import { mapState } from 'vuex'
 
+import StatusContent from 'src/components/status_content/status_content.vue'
 import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
 import ChatMessageList from 'src/components/chat_message_list/chat_message_list.vue'
 import QuickFilterSettings from 'src/components/quick_filter_settings/quick_filter_settings.vue'
@@ -20,9 +21,11 @@ import {
   faAngleDoubleDown,
   faAngleDoubleLeft,
   faChevronLeft,
+  faReply,
+  faTimes,
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(faAngleDoubleDown, faAngleDoubleLeft, faChevronLeft)
+library.add(faAngleDoubleDown, faAngleDoubleLeft, faChevronLeft, faReply, faTimes)
 
 const sortById = (a, b) => {
   const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
@@ -105,6 +108,7 @@ const conversation = {
       inlineDivePosition: null,
       loadStatusError: null,
       unsuspendibleIds: new Set(),
+      explicitReplyStatus: null,
     }
   },
   created() {
@@ -121,9 +125,11 @@ const conversation = {
       return maxDepth >= 1 ? maxDepth : 1
     },
     lastStatus() {
-      console.log('LAST STATUS', this.conversation[this.conversation.length - 1])
       return this.conversation[this.conversation.length - 1]
     },
+    replyStatus() {
+      return this.explicitReplyStatus ?? this.lastStatus
+    },
     streamingEnabled() {
       return (
         this.mergedConfig.useStreamingApi &&
@@ -415,6 +421,7 @@ const conversation = {
     QuickViewSettings,
     ChatMessageList,
     PostStatusForm,
+    StatusContent,
   },
   watch: {
     statusId(newVal, oldVal) {

src/components/conversation/conversation.scss

@@ -93,8 +93,31 @@
     }
   }
 
+  .auto-reply-to-section {
+    margin: 0 1em;
+    gap: 0.5em;
+
+    h4 {
+      margin: 0.5em 0;
+      line-height: 1.5;
+
+      button {
+        line-height: 1.5;
+      }
+    }
+
+    .reply-to-preview {
+      display: flex;
+      align-items: center;
+      gap: 0.5em;
+    }
+  }
+
   .chat-view-reply-form {
     position: sticky;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
     bottom: 0;
   }
 }

src/components/conversation/conversation.vue

@@ -202,22 +202,50 @@
       >
         <ChatMessageList
           :messages="conversation"
+          @reply-requested="e => explicitReplyStatus = e"
         />
       </div>
     </div>
     <div
-      v-if="isChatView && isExpanded"
+      v-if="isChatView && isExpanded && replyStatus"
       class="chat-view-reply-form panel-footer -flexible-height"
     >
+      <div class="auto-reply-to-section">
+        <h4
+          class="reply-to-text"
+          >
+          {{ explicitReplyStatus ? $t('status.reply_to_selected') : $t('status.reply_to_last') }}
+          <button
+            v-if="explicitReplyStatus"
+            class="button-default"
+            @click="explicitReplyStatus = null"
+          >
+            <FAIcon icon="times" />
+            {{ $t('general.cancel') }}
+          </button>
+        </h4>
+        <div class="reply-to-preview">
+          <FAIcon
+            icon="reply"
+            flip="horizontal"
+          />
+          <StatusContent
+            :status="replyStatus"
+            compact
+            collapse
+          />
+        </div>
+      </div>
       <PostStatusForm
         :submit-on-enter="!mobileLayout"
         :preserve-focus="!mobileLayout"
         :auto-focus="!mobileLayout"
-        :reply-to="lastStatus.id"
+        :reply-to="replyStatus.id"
         :disable-quotes="true"
-        :copy-message-scope="lastStatus.visibility"
+        :copy-message-scope="replyStatus.visibility"
-        :attentions="lastStatus.attentions"
+        :attentions="replyStatus.attentions"
-        :replied-user="lastStatus.user"
+        :replied-user="replyStatus.user"
+        force-mentions-line
       />
     </div>
   </div>

src/components/status/status.scss

@@ -385,4 +385,8 @@
       text-decoration: underline;
     }
   }
+
+  .status-action-buttons {
+    margin-top: var(--status-margin);
+  }
 }

src/components/status/status.vue

@@ -512,6 +512,7 @@
 
           <StatusActionButtons
             v-if="!noHeading && !isPreview"
+            class="status-action-buttons"
             :status="status"
             :replying="replying"
             @toggle-replying="toggleReplyForm"

src/components/status_action_buttons/action_button.js

@@ -69,6 +69,8 @@ export default {
     'getComponent',
     'doAction',
     'outerClose',
+    'defaultButtonStyle',
+    'hideLabel',
   ],
   components: {
     StatusBookmarkFolderMenu,
@@ -103,11 +105,12 @@ export default {
       return useMergedConfigStore().mergedConfig.hidePostStats
     },
     buttonInnerClass() {
+      const buttonStyleClass = this.defaultButtonStyle ? 'button-default' : 'button-unstyled'
       return [
         this.button.name + '-button',
         {
           'main-button': this.extra,
-          'button-unstyled': !this.extra,
+          [buttonStyleClass]: !this.extra,
           '-active': this.button.active?.(this.funcArg),
           disabled: this.button.interactive
             ? !this.button.interactive(this.funcArg)

src/components/status_action_buttons/action_button.vue

@@ -60,7 +60,7 @@
       />
     </component>
     <span
-      v-if="!hidePostStats && button.counter?.(funcArg) > 0"
+      v-if="!hidePostStats && button.counter?.(funcArg) > 0 && !hideLabel"
       class="action-counter"
     >
       {{ button.counter?.(funcArg) }}

src/components/status_action_buttons/action_button_container.js

@@ -42,7 +42,7 @@ export default {
         ),
     ),
   },
-  props: ['button', 'status'],
+  props: ['button', 'status', 'defaultButton','hideLabel'],
   emits: ['emojiPickerShown'],
   mounted() {
     if (this.button.name === 'mute') {

src/components/status_action_buttons/action_button_container.vue

@@ -10,6 +10,7 @@
         <ActionButton
           :button="button"
           :status="status"
+          :hide-label="hideLabel"
           v-bind.prop="$attrs"
         />
       </template>
@@ -131,6 +132,7 @@
       v-else
       :button="button"
       :status="status"
+      :hide-label="hideLabel"
       v-bind="$attrs"
       @emoji-picker-shown="e => $emit('emojiPickerShown', e)"
     />

src/components/status_action_buttons/status_action_buttons.js

@@ -15,7 +15,31 @@ import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
 library.add(faEllipsisH)
 
 const StatusActionButtons = {
-  props: ['status', 'replying'],
+  props: {
+    status: {
+      type: Object,
+      required: true,
+    },
+    replying: {
+      type: Boolean,
+      default: false,
+    },
+    fixedPinned: {
+      type: Boolean,
+      default: false,
+    },
+    pinned: {
+      type: Set,
+    },
+    useDefaultButtons: {
+      type: Boolean,
+      default: false,
+    },
+    hideLabels: {
+      type: Boolean,
+      default: false,
+    }
+  },
   emits: ['toggleReplying', 'onSuccess', 'onError'],
   data() {
     return {
@@ -36,14 +60,19 @@ const StatusActionButtons = {
     ConfirmModal: defineAsyncComponent(
       () => import('src/components/confirm_modal/confirm_modal.vue'),
     ),
-
     ActionButtonContainer,
   },
   computed: {
     ...mapState(useSyncConfigStore, {
-      pinnedItems: (store) =>
+      userPinnedItems: (store) => new Set(store.prefsStorage.collections.pinnedStatusActions),
-        new Set(store.prefsStorage.collections.pinnedStatusActions),
     }),
+    pinnedItems() {
+      if (this.fixedPinned) {
+        return this.pinned
+      } else {
+        return this.userPinnedItems
+      }
+    },
     buttons() {
       return BUTTONS.filter((x) => (x.if ? x.if(this.funcArg) : true))
     },

src/components/status_action_buttons/status_action_buttons.scss

@@ -8,7 +8,6 @@
     grid-auto-flow: row dense;
     grid-auto-rows: 1fr;
     grid-gap: 0.5em 0.1em;
-    margin-top: var(--status-margin);
   }
 
   .pin-action-button {
@@ -17,6 +16,12 @@
     padding: 0.5em;
     margin: 0;
   }
+
+  .quick-action.popover-wrapper {
+    button {
+      padding: 0
+    }
+  }
 }
 // popover
 .extra-action-buttons {

src/components/status_action_buttons/status_action_buttons.vue

@@ -21,6 +21,8 @@
           :close="() => { /* no-op */ }"
           :do-action="doAction"
           @emoji-picker-shown="onEmojiPickerShown"
+          :default-button-style="useDefaultButtons"
+          :hide-label="hideLabels"
         />
         <button
           v-if="showPin && currentUser"
@@ -40,6 +42,7 @@
       <Popover
         trigger="click"
         :trigger-attrs="triggerAttrs"
+        :normal-button="useDefaultButtons"
         class="quick-action"
         :tabindex="0"
         placement="bottom"
@@ -75,6 +78,8 @@
                 :get-component="getComponent"
                 :outer-close="close"
                 :do-action="doAction"
+                :default-button-style="useDefaultButtons"
+                :hide-label="hideLabels"
               />
               <button
                 v-if="showPin && currentUser"

src/i18n/en.json

@@ -1654,6 +1654,8 @@
     "delete_confirm_accept_button": "Delete",
     "delete_confirm_cancel_button": "Keep",
     "reply_to": "Reply to",
+    "reply_to_selected": "Replying to selected message",
+    "reply_to_last": "Replying to last message",
     "reply_to_with_icon": "{icon} {replyTo}",
     "reply_to_with_arg": "{replyToWithIcon} {user}",
     "mentions": "Mentions",