handling broken replies

src/components/chat_message/chat_message.js

@@ -90,6 +90,10 @@ 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"
+      v-if="isStatus && (isCustomReply || isBrokenReply)"
       keypath="status.reply_to_with_arg"
       scope="global"
       tag="small"
@@ -16,8 +16,10 @@
       <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"
@@ -37,6 +39,9 @@
             </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 -->

src/i18n/en.json

@@ -1662,6 +1662,7 @@
     "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:",