Merge branch 'chat-refactor' into shigusegubu-themes3

src/components/chat_message/chat_message.js

@@ -1,20 +1,21 @@
 import { mapState as mapPiniaState } from 'pinia'
+import { defineAsyncComponent } from 'vue'
 import { mapState } from 'vuex'
 
 import Attachment from 'src/components/attachment/attachment.vue'
-import MentionLink from 'src/components/mention_link/mention_link.vue'
 import ChatMessageDate from 'src/components/chat_message_date/chat_message_date.vue'
+import EmojiReactions from 'src/components/emoji_reactions/emoji_reactions.vue'
 import Gallery from 'src/components/gallery/gallery.vue'
 import LinkPreview from 'src/components/link-preview/link-preview.vue'
+import MentionLink from 'src/components/mention_link/mention_link.vue'
 import Popover from 'src/components/popover/popover.vue'
 import StatusActionButtons from 'src/components/status_action_buttons/status_action_buttons.vue'
 import StatusBody from 'src/components/status_body/status_body.vue'
 import StatusContent from 'src/components/status_content/status_content.vue'
 import StatusPopover from 'src/components/status_popover/status_popover.vue'
+import Timeago from 'src/components/timeago/timeago.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 EmojiReactions from 'src/components/emoji_reactions/emoji_reactions.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface'
@@ -24,10 +25,10 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faCircleNotch,
   faEllipsisH,
-  faTimes,
   faReply,
   faRetweet,
   faStar,
+  faTimes,
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(faTimes, faEllipsisH, faCircleNotch, faReply, faStar, faRetweet)
@@ -59,6 +60,7 @@ const ChatMessage = {
     UserPopover,
     StatusPopover,
     MentionLink,
+    Quote: defineAsyncComponent(() => import('src/components/quote/quote.vue')),
     Timeago,
   },
   computed: {
@@ -75,25 +77,24 @@ const ChatMessage = {
       return this.author.id === this.currentUser.id
     },
     message() {
-      return this.isMessage ? this.chatItem.data : null
+      if (!this.isMessage) return null
+      return this.chatItem.data.retweeted_status ?? this.chatItem.data
     },
     isMessage() {
       return this.chatItem.type === 'message'
     },
     isCustomReply() {
       if (!this.previousItem) return false
-      if (!this.chatItem.data.in_reply_to_status_id) return false
-      return (
-        this.previousItem.data.id !== this.chatItem.data.in_reply_to_status_id
-      )
+      if (!this.message.in_reply_to_status_id) return false
+      return this.previousItem.data.id !== this.message.in_reply_to_status_id
     },
     isBrokenReply() {
       if (!this.previousItem) return false
-      return !this.chatItem.data.in_reply_to_status_id
+      return !this.message.in_reply_to_status_id
     },
     customReplyTo() {
       return this.$store.state.statuses.allStatusesObject[
-        this.chatItem.data.in_reply_to_status_id
+        this.message.in_reply_to_status_id
       ]
     },
     replyToName() {
@@ -115,13 +116,22 @@ const ChatMessage = {
         return user ? user.statusnet_profile_url : 'NOT_FOUND'
       }
     },
+    quoteId() {
+      return this.message.quote_id
+    },
+    quoteUrl() {
+      return this.message.quote_url
+    },
+    quoteVisible() {
+      return this.message.quote_visible
+    },
     messageForStatusContent() {
       return {
+        ...this.message,
         summary: '',
         emojis: this.message.emojis,
         raw_html: this.message.content || this.message.raw_html || '',
         text: this.message.content || '',
-        attachments: this.message.attachments,
       }
     },
     hasAttachment() {
@@ -190,8 +200,8 @@ const ChatMessage = {
       const confirmed = window.confirm(this.$t('chats.delete_confirm'))
       if (confirmed) {
         await this.$emit('delete', {
-          messageId: this.chatItem.data.id,
-          chatId: this.chatItem.data.chat_id,
+          messageId: this.message.id,
+          chatId: this.message.chat_id,
         })
       }
       this.hovered = false

src/components/chat_message/chat_message.scss

@@ -15,6 +15,10 @@
     min-width: 30em;
   }
 
+  .quoted-post {
+    margin-bottom: 1.5em;
+  }
+
   .chat-message-toolbar {
     transition: opacity 0.1s;
     opacity: 0;

src/components/chat_message/chat_message.vue

@@ -146,6 +146,13 @@
               >
                 <template #footer>
                   <EmojiReactions :status="message" />
+                  <Quote
+                    class="quoted-post"
+                    :status-id="quoteId"
+                    :status-url="quoteUrl"
+                    :status-visible="quoteVisible"
+                    initially-expanded
+                  />
                   <span
                     class="created-at"
                   >

src/components/conversation/conversation.js

@@ -6,8 +6,8 @@ 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 ThreadTree from 'src/components/thread_tree/thread_tree.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
+import ThreadTree from 'src/components/thread_tree/thread_tree.vue'
 
 import { useInterfaceStore } from 'src/stores/interface'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
@@ -635,6 +635,12 @@ const conversation = {
         this.unsuspendibleIds.delete(id)
       }
     },
+    onPosted(data) {
+      this.explicitReplyStatus = null
+      if (this.isPage) {
+        this.$router.push({ name: 'conversation', params: { id: data.id } })
+      }
+    },
   },
 }
 

src/components/conversation/conversation.vue

@@ -244,6 +244,7 @@
         disable-quotes
         mentions-line
         mentions-line-read-only
+        @posted="onPosted"
       />
     </div>
   </div>

src/components/status_body/status_body.js

@@ -1,8 +1,9 @@
 import { mapState } from 'pinia'
 
-import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faFile,
@@ -53,7 +54,7 @@ const StatusBody = {
       // to indicate what post reply belongs to
       type: Boolean,
       default: false,
-    }
+    },
   },
   data() {
     return {
@@ -150,7 +151,6 @@ const StatusBody = {
     },
     ...mapState(useMergedConfigStore, ['mergedConfig']),
   },
-  components: {},
   mounted() {
     this.status.attentions &&
       this.status.attentions.forEach((attn) => {