reply-to work

src/components/chat_message/chat_message.js

@@ -2,6 +2,7 @@ import { mapState as mapPiniaState } from 'pinia'
 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 Gallery from 'src/components/gallery/gallery.vue'
 import LinkPreview from 'src/components/link-preview/link-preview.vue'
@@ -9,6 +10,7 @@ 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 UserAvatar from 'src/components/user_avatar/user_avatar.vue'
 import UserPopover from 'src/components/user_popover/user_popover.vue'
 
@@ -21,9 +23,10 @@ import {
   faCircleNotch,
   faEllipsisH,
   faTimes,
+  faReply,
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(faTimes, faEllipsisH, faCircleNotch)
+library.add(faTimes, faEllipsisH, faCircleNotch, faReply)
 
 const ChatMessage = {
   name: 'ChatMessage',
@@ -34,6 +37,8 @@ const ChatMessage = {
     'chatItem',
     'previousItem',
     'hoveredMessageChain',
+    'focused',
+    'repliedTo',
   ],
   emits: ['hover', 'replyRequested'],
   components: {
@@ -47,6 +52,8 @@ const ChatMessage = {
     LinkPreview,
     ChatMessageDate,
     UserPopover,
+    StatusPopover,
+    MentionLink,
   },
   computed: {
     // Returns HH:MM (hours and minutes) in local time.
@@ -88,6 +95,25 @@ const ChatMessage = {
         this.chatItem.data.in_reply_to_status_id
       ]
     },
+    replyToName() {
+      if (this.message.in_reply_to_screen_name) {
+        return this.message.in_reply_to_screen_name
+      } else {
+        const user = this.$store.getters.findUser(
+          this.status.in_reply_to_user_id,
+        )
+        return user && user.screen_name_ui
+      }
+    },
+    replyProfileLink() {
+      if (this.isCustomReply) {
+        const user = this.$store.getters.findUser(
+          this.message.in_reply_to_user_id,
+        )
+        // FIXME Why user not found sometimes???
+        return user ? user.statusnet_profile_url : 'NOT_FOUND'
+      }
+    },
     messageForStatusContent() {
       return {
         summary: '',
@@ -100,6 +126,14 @@ const ChatMessage = {
     hasAttachment() {
       return this.message.attachments.length > 0
     },
+    classnames() {
+      return {
+        '-outgoing': this.isCurrentUser,
+        '-incoming': !this.isCurrentUser,
+        '-pending': this.message.pending,
+        '-focused': this.focused,
+      }
+    },
     ...mapPiniaState(useInterfaceStore, {
       betterShadow: (store) => store.browserSupport.cssFilter,
     }),

src/components/chat_message/chat_message.scss

@@ -17,7 +17,7 @@
     position: absolute;
     top: -0.8em;
     right: 0.4rem;
-    z-index: 10;
+    z-index: 1;
 
     .quick-action-buttons {
       justify-items: end;
@@ -39,23 +39,16 @@
   }
 
   .reply-to-header {
-    white-space: nowrap;
-    width: 100%;
     display: flex;
-    align-items: baseline;
+    gap: 0.5rem;
-    gap: 0.5em;
+    align-items: center;
+    padding: 0.125em 0;
+    width: 100%;
+  }
 
-    .reply-label {
+  .avatar-spacer {
-      display: inline-block;
+    flex: 0 0 2.2rem;
-      line-height: 1;
+    width: 2.2rem;
-    }
-
-    .reply-body {
-      line-height: 1;
-      display: inline-block;
-      overflow-x: hidden;
-      text-overflow: ellipsis;
-    }
   }
 
   .popover {
@@ -73,8 +66,7 @@
   }
 
   .avatar-wrapper {
-    margin-right: 0.72em;
+    margin-right: 0.5em;
-    width: 32px;
   }
 
   .link-preview,
@@ -124,27 +116,70 @@
     }
   }
 
+  .message-bubble-wrapper {
+    display: flex;
+  }
+
   .chat-message-inner {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    max-width: 80%;
-    min-width: 10em;
-    width: 100%;
   }
 
-  .-outgoing {
+  .reply-indicator {
     display: flex;
-    flex-flow: row wrap;
+    place-items: center;
-    place-content: end flex-end;
+    place-content: center;
+    padding: 0.25em;
+    margin: var(--roundness) 0;
+    background: var(--border);
+    border-radius: var(--roundness);
+    border: 1px solid var(--border);
+  }
 
-    .chat-message-inner {
+  .end-spacer {
-      align-items: flex-end;
+    flex: 1 1 0;
+    min-width: calc(2.2em + 0.5em + 2em);
+  }
+
+  &.-incoming {
+    .reply-indicator {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+
+  .reply-to-popover {
+    white-space: nowrap;
+  }
+
+  .reply-label {
+    white-space: nowrap;
+  }
+
+  &.-outgoing {
+    &,
+    .message-bubble-wrapper,
+    .chat-message{
+      flex-direction: row-reverse;
     }
 
     .reply-to-header {
       justify-content: end;
     }
+
+    .reply-indicator {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+
+      .icon {
+        transform: scaleX(-1);
+      }
+    }
+
+    .chat-message-inner {
+      align-items: flex-end;
+    }
   }
 
   .chat-message-inner.with-media {

src/components/chat_message/chat_message.style.js

@@ -4,6 +4,9 @@ export default {
   variants: {
     outgoing: '.outgoing',
   },
+  states: {
+    focused: '.-focused',
+  },
   validInnerComponents: ['Text', 'Icon', 'Border', 'PollGraph'],
   defaultRules: [
     {
@@ -18,5 +21,11 @@ export default {
         background: '--bg, 5',
       },
     },
+    {
+      state: ['focused'],
+      directives: {
+        background: '--inheritedBackground, 10',
+      },
+    },
   ],
 }

src/components/chat_message/chat_message.vue

@@ -2,13 +2,64 @@
   <div
     v-if="isMessage"
     class="chat-message-wrapper"
-    :class="{ 'hovered-message-chain': hoveredMessageChain }"
+    :class="[classnames, { 'hovered-message-chain': hoveredMessageChain }]"
     @mouseover="onHover(true)"
     @mouseleave="onHover(false)"
   >
+    <i18n-t
+      v-if="isStatus && isCustomReply"
+      keypath="status.reply_to_with_arg"
+      scope="global"
+      tag="small"
+      class="reply-to-header faint"
+    >
+      <template #replyToWithIcon>
+        <div class="avatar-spacer" />
+        <StatusPopover
+          :status-id="customReplyTo?.id"
+          class="reply-to-popover"
+        >
+          <i18n-t
+            keypath="status.reply_to_with_icon"
+            scope="global"
+          >
+            <template #icon>
+              <FAIcon
+                class="fa-scale-110"
+                icon="reply"
+                flip="horizontal"
+              />
+            </template>
+            <template #replyTo>
+              <span class="reply-label">
+                {{ $t('status.reply_to') }}
+              </span>
+            </template>
+          </i18n-t>
+        </StatusPopover>
+      </template>
+      <template #user>
+        <!-- v-if is there because status might not be loaded yet -->
+        <StatusBody
+          v-if="customReplyTo && customReplyTo.text.trim().length > 0"
+          class="reply-body faint"
+          :status="customReplyTo"
+          collapse
+          single-line
+        />
+        <MentionLink
+          v-else-if="customReplyTo"
+          class="reply-body"
+          :content="replyToName"
+          :url="replyProfileLink"
+          :user-id="message.in_reply_to_user_id"
+          :user-screen-name="message.in_reply_to_screen_name"
+        />
+      </template>
+    </i18n-t>
     <div
       class="chat-message"
-      :class="[{ '-outgoing': isCurrentUser, '-incoming': !isCurrentUser, '-pending': message.pending }]"
+      :class="classnames"
     >
       <div
         v-if="!isCurrentUser"
@@ -23,118 +74,107 @@
             :user="author"
           />
         </UserPopover>
+        <div v-else class="avatar-spacer" />
       </div>
       <div class="chat-message-inner">
-        <small
+        <div class="message-bubble-wrapper">
-          v-if="isStatus && isCustomReply"
-          class="reply-to-header faint"
-        >
-          <strong class="reply-label">
-            <FAIcon
-              class="fa-scale-110 fa-old-padding"
-              icon="reply"
-              flip="horizontal"
-            />
-            {{ $t('status.reply_to') }}
-          </strong>
-          <!-- v-if is there because status might not be loaded yet -->
-          <StatusBody
-            v-if="customReplyTo"
-            class="reply-body"
-            :status="customReplyTo"
-            collapse
-            single-line
-          />
-        </small>
-        <div
-          class="status-body"
-          :style="{ 'min-width': message.attachment ? '80%' : '' }"
-        >
           <div
-            class="media status"
+            class="status-body"
-            :class="{ 'without-attachment': !hasAttachment, 'pending': chatItem.data.pending, 'error': chatItem.data.error }"
+            :style="{ 'min-width': message.attachment ? '80%' : '' }"
-            style="position: relative;"
-            @mouseenter="hovered = true"
-            @mouseleave="hovered = false"
           >
-
-            <StatusActionButtons
-              v-if="isStatus"
-              class="chat-message-toolbar"
-              :class="{ '-visible': hovered || menuOpened }"
-              :status="message"
-              :pinned="new Set(['reply', 'emoji'])"
-              fixed-pinned
-              use-default-buttons
-              hide-labels
-              @toggle-replying="$emit('replyRequested', message)"
-            />
             <div
-              class="chat-message-toolbar"
+              class="media status"
-              :class="{ '-visible': hovered || menuOpened }"
+              :class="{ 'without-attachment': !hasAttachment, 'pending': chatItem.data.pending, 'error': chatItem.data.error }"
-              v-else
+              style="position: relative;"
+              @mouseenter="hovered = true"
+              @mouseleave="hovered = false"
             >
-              <Popover
+
-                trigger="click"
+              <StatusActionButtons
-                :trigger-attrs="{ 'class': 'button-default menu-icon simple-button', title: $t('chats.more') }"
+                v-if="isStatus"
-                placement="top"
+                class="chat-message-toolbar"
-                :margin="popoverMarginStyle"
+                :class="{ '-visible': hovered || menuOpened }"
-                @show="menuOpened = true"
+                :status="message"
-                @close="menuOpened = false"
+                :pinned="new Set(['reply', 'emoji'])"
+                fixed-pinned
+                use-default-buttons
+                hide-labels
+                @toggle-replying="$emit('replyRequested', message)"
+              />
+              <div
+                class="chat-message-toolbar"
+                :class="{ '-visible': hovered || menuOpened }"
+                v-else
               >
-                <template #content>
+                <Popover
-                  <div class="dropdown-menu">
+                  trigger="click"
-                    <div class="menu-item dropdown-item -icon">
+                  :trigger-attrs="{ 'class': 'button-default menu-icon simple-button', title: $t('chats.more') }"
-                      <button
+                  placement="top"
-                        class="main-button"
+                  :margin="popoverMarginStyle"
-                        @click="deleteMessage"
+                  @show="menuOpened = true"
-                      >
+                  @close="menuOpened = false"
-                        <FAIcon icon="times" /> {{ $t("chats.delete") }}
-                      </button>
-                    </div>
-                  </div>
-                </template>
-                <template #trigger>
-                  <FAIcon icon="ellipsis-h" />
-                </template>
-              </Popover>
-            </div>
-            <StatusContent
-              class="message-content"
-              :class="{ faint: message.pending }"
-              :status="messageForStatusContent"
-              :full-content="true"
-            >
-              <template #footer>
-                <span
-                  class="created-at"
                 >
+                  <template #content>
+                    <div class="dropdown-menu">
+                      <div class="menu-item dropdown-item -icon">
+                        <button
+                          class="main-button"
+                          @click="deleteMessage"
+                        >
+                          <FAIcon icon="times" /> {{ $t("chats.delete") }}
+                        </button>
+                      </div>
+                    </div>
+                  </template>
+                  <template #trigger>
+                    <FAIcon icon="ellipsis-h" />
+                  </template>
+                </Popover>
+              </div>
+              <StatusContent
+                class="message-content"
+                :class="{ faint: message.pending }"
+                :status="messageForStatusContent"
+                :full-content="true"
+              >
+                <template #footer>
                   <span
-                    v-if="message.visibility"
+                    class="created-at"
-                    class="visibility-icon"
-                    :title="visibilityLocalized"
                   >
-                    <FAIcon
+                    <span
-                      class="fa-scale-110"
+                      v-if="message.visibility"
-                      :icon="visibilityIcon(message.visibility)"
+                      class="visibility-icon"
-                      fixed-width
+                      :title="visibilityLocalized"
-                    />
+                    >
+                      <FAIcon
+                        class="fa-scale-110"
+                        :icon="visibilityIcon(message.visibility)"
+                        fixed-width
+                      />
+                    </span>
+                    <span
+                      v-if="message.pending"
+                      class="loading-spinner"
+                    >
+                      <FAIcon
+                        class="fa-old-padding"
+                        icon="circle-notch"
+                        spin
+                      />
+                    </span>
+                    {{ createdAt }}
                   </span>
-                  <span
+                </template>
-                    v-if="message.pending"
+              </StatusContent>
-                    class="loading-spinner"
+            </div>
-                  >
-                    <FAIcon
-                      class="fa-old-padding"
-                      icon="circle-notch"
-                      spin
-                    />
-                  </span>
-                  {{ createdAt }}
-                </span>
-              </template>
-            </StatusContent>
           </div>
+          <div
+            v-if="repliedTo"
+            class="reply-indicator"
+          >
+            <FAIcon class="icon" icon="reply" />
+          </div>
+          <div class="end-spacer" />
         </div>
       </div>
     </div>

src/components/chat_message_list/chat_message_list.js

@@ -14,6 +14,8 @@ const ChatMessageList = {
       default: [],
     },
     headerDate: Boolean,
+    focusedId: String,
+    repliedId: String,
   },
   data() {
     return {

src/components/chat_message_list/chat_message_list.vue

@@ -6,6 +6,8 @@
       :chat-item="chatItem"
       :previous-item="getPreviousItem(index)"
       :hovered-message-chain="chatItem.messageChainId === hoveredMessageChainId"
+      :focused="chatItem.id === focusedId"
+      :repliedTo="chatItem.id === repliedId"
       @hover="onMessageHover"
       @delete="onMessageDelete"
       @reply-requested="onReplyRequested"

src/components/conversation/conversation.vue

@@ -202,6 +202,8 @@
       >
         <ChatMessageList
           :messages="conversation"
+          :replied-id="replyStatus?.id"
+          :focused-id="maybeFocused"
           @reply-requested="e => explicitReplyStatus = e"
         />
       </div>

src/components/rich_content/rich_content.jsx

@@ -479,7 +479,8 @@ export default {
       >
         {this.collapse
           ? pass2.map((x) => {
-              if (!Array.isArray(x)) return x.replace(/\n/g, ' ')
+              if (typeof x === 'string') return x.replace(/\n/g, ' ')
+              if (!Array.isArray(x)) return x
               return x.map((y) => (y.type === 'br' ? ' ' : y))
             })
           : pass2}