src/components/chat_message/chat_message.js

@@ -13,7 +13,6 @@ import StatusContent from 'src/components/status_content/status_content.vue'
 import StatusPopover from 'src/components/status_popover/status_popover.vue'
 import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
 import UserPopover from 'src/components/user_popover/user_popover.vue'
-import Timeago from 'src/components/timeago/timeago.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface'
@@ -55,9 +54,17 @@ const ChatMessage = {
     UserPopover,
     StatusPopover,
     MentionLink,
-    Timeago,
   },
   computed: {
+    // Returns HH:MM (hours and minutes) in local time.
+    createdAt() {
+      const time = this.chatItem.data.created_at
+      return time.toLocaleTimeString('en', {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false,
+      })
+    },
     isStatus() {
       // ChatMessage only has account_id while Status has full user data
       return !!this.message.user
@@ -83,10 +90,6 @@ const ChatMessage = {
         this.previousItem.data.id !== this.chatItem.data.in_reply_to_status_id
       )
     },
-    isBrokenReply() {
-      if (!this.previousItem) return false
-      return !this.chatItem.data.in_reply_to_status_id
-    },
     customReplyTo() {
       return this.$store.state.statuses.allStatusesObject[
         this.chatItem.data.in_reply_to_status_id

src/components/chat_message/chat_message.vue

@@ -7,7 +7,7 @@
     @mouseleave="onHover(false)"
   >
     <i18n-t
-      v-if="isStatus && (isCustomReply || isBrokenReply)"
+      v-if="isStatus && isCustomReply"
       keypath="status.reply_to_with_arg"
       scope="global"
       tag="small"
@@ -16,10 +16,8 @@
       <template #replyToWithIcon>
         <div class="avatar-spacer" />
         <StatusPopover
-          v-if="!isBrokenReply"
           :status-id="customReplyTo?.id"
           class="reply-to-popover"
-          :class="{ '-strikethrough': !message.parent_visible }"
         >
           <i18n-t
             keypath="status.reply_to_with_icon"
@@ -39,9 +37,6 @@
             </template>
           </i18n-t>
         </StatusPopover>
-        <span v-else class="reply-label">
-          {{ $t('status.broken_reply') }}
-        </span>
       </template>
       <template #user>
         <!-- v-if is there because status might not be loaded yet -->
@@ -167,16 +162,7 @@
                         spin
                       />
                     </span>
-                    {{ ' ' }}
-                    <router-link
-                      class="timeago faint"
-                      :to="{ name: 'conversation', params: { id: message.id } }"
-                    >
-                      <Timeago
-                        :time="message.created_at"
-                        :auto-update="60"
-                      />
-                    </router-link>
+                    {{ createdAt }}
                   </span>
                 </template>
               </StatusContent>

src/components/conversation/conversation.js

@@ -6,6 +6,7 @@ import ChatMessageList from 'src/components/chat_message_list/chat_message_list.
 import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
 import QuickFilterSettings from 'src/components/quick_filter_settings/quick_filter_settings.vue'
 import QuickViewSettings from 'src/components/quick_view_settings/quick_view_settings.vue'
+import StatusContent from 'src/components/status_content/status_content.vue'
 import ThreadTree from 'src/components/thread_tree/thread_tree.vue'
 
 import { useInterfaceStore } from 'src/stores/interface'
@@ -426,6 +427,7 @@ const conversation = {
     QuickViewSettings,
     ChatMessageList,
     PostStatusForm,
+    StatusContent,
   },
   watch: {
     statusId(newVal, oldVal) {

src/components/conversation/conversation.vue

@@ -213,7 +213,7 @@
       class="chat-view-reply-form panel-footer -flexible-height"
     >
       <div class="auto-reply-to-section">
-        <span class="reply-to-text">
+        <h4 class="reply-to-text">
           {{ explicitReplyStatus ? $t('status.reply_to_selected') : $t('status.reply_to_last') }}
           <button
             v-if="explicitReplyStatus"
@@ -223,7 +223,13 @@
             <FAIcon icon="times" />
             {{ $t('general.cancel') }}
           </button>
-        </span>
+        </h4>
+        <StatusContent
+          :status="replyStatus"
+          class="reply-to-preview"
+          compact
+          collapse
+        />
       </div>
       <PostStatusForm
         class="reply-form"

src/i18n/en.json

@@ -1662,7 +1662,6 @@
     "reply_to_selected": "Replying to selected message",
     "reply_to_last": "Replying to last message",
     "reply_to_with_icon": "{icon} {replyTo}",
-    "broken_reply": "Message belongs to the thread but is not a reply",
     "reply_to_with_arg": "{replyToWithIcon} {user}",
     "mentions": "Mentions",
     "replies_list": "Replies:",