Merge branch 'chat-refactor' into shigusegubu-themes3

src/components/chat_message/chat_message.js

@@ -13,6 +13,7 @@ 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'
@@ -54,17 +55,9 @@ 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
@@ -90,6 +83,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 -->
@@ -162,7 +167,16 @@
                         spin
                       />
                     </span>
-                    {{ createdAt }}
+                    {{ ' ' }}
+                    <router-link
+                      class="timeago faint"
+                      :to="{ name: 'conversation', params: { id: message.id } }"
+                    >
+                      <Timeago
+                        :time="message.created_at"
+                        :auto-update="60"
+                      />
+                    </router-link>
                   </span>
                 </template>
               </StatusContent>

src/components/conversation/conversation.js

@@ -6,7 +6,6 @@ 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'
@@ -427,7 +426,6 @@ 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">
-        <h4 class="reply-to-text">
+        <span class="reply-to-text">
           {{ explicitReplyStatus ? $t('status.reply_to_selected') : $t('status.reply_to_last') }}
           <button
             v-if="explicitReplyStatus"
@@ -223,13 +223,7 @@
             <FAIcon icon="times" />
             {{ $t('general.cancel') }}
           </button>
-        </h4>
-        <StatusContent
-          :status="replyStatus"
-          class="reply-to-preview"
-          compact
-          collapse
-        />
+        </span>
       </div>
       <PostStatusForm
         class="reply-form"

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:",