move SABs margin into status

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"
-        :attentions="lastStatus.attentions"
-        :replied-user="lastStatus.user"
+        :copy-message-scope="replyStatus.visibility"
+        :attentions="replyStatus.attentions"
+        :replied-user="replyStatus.user"
+        force-mentions-line
       />
     </div>
   </div>