From 04fa1f0b2d1a92b1c653cd55f51ee7e1434b2bd7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 7 Jun 2021 18:39:51 +0300
Subject: some docs, added richcontent to usernames in status, updated
 stillImage to allow scale of "gif" label

---
 src/components/status/status.scss | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

(limited to 'src/components/status/status.scss')

diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 58b55bc8..82088943 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -93,12 +93,8 @@ $status-margin: 0.75em;
     margin-right: 0.4em;
     text-overflow: ellipsis;
 
-    .emoji {
-      width: 14px;
-      height: 14px;
-      vertical-align: middle;
-      object-fit: contain;
-    }
+    --_still_image-label-scale: 0.25;
+    --emoji-size: 14px;
   }
 
   .status-favicon {
-- 
cgit v1.2.3-70-g09d2


From 3abd357694c29c84d213d7d2a7a954ab2a591da0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 8 Jun 2021 11:38:44 +0300
Subject: moving mentions into separate row

---
 src/components/mention_link/mention_link.js   | 20 +++++++++++--
 src/components/mention_link/mention_link.scss |  5 ++++
 src/components/mention_link/mention_link.vue  |  2 +-
 src/components/rich_content/rich_content.jsx  | 19 +++++++++---
 src/components/status/status.js               | 22 ++++++++++----
 src/components/status/status.scss             |  3 +-
 src/components/status/status.vue              | 43 ++++++++++++++++++++++-----
 src/i18n/en.json                              |  1 +
 8 files changed, 94 insertions(+), 21 deletions(-)

(limited to 'src/components/status/status.scss')

diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index d26ae337..465c7d00 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -14,8 +14,14 @@ const MentionLink = {
       type: String
     },
     origattrs: {
-      required: true,
-      type: Object
+      required: false,
+      type: Object,
+      default: {}
+    },
+    firstMention: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   methods: {
@@ -61,6 +67,16 @@ const MentionLink = {
         return rest
       }
     },
+    classnames () {
+      return [
+        {
+          '-you': this.isYou,
+          '-highlighted': this.highlight,
+          '-firstMention': this.firstMention
+        },
+        this.highlightType
+      ]
+    },
     ...mapGetters(['mergedConfig']),
     ...mapState({
       currentUser: state => state.users.currentUser
diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index 78a9816c..dec11014 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -39,10 +39,15 @@
   }
 
   .new {
+    &.-firstMention {
+      display: none;
+    }
+
     &,
     &.-highlighted {
       .short {
         line-height: 1.5;
+        font-size: inherit;
 
         &::before {
           display: inline-block;
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index d8d45a1b..05f6fd91 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -12,7 +12,7 @@
       v-if="user"
       class="new"
       :style="style"
-      :class="[{ '-you': isYou, '-highlighted': highlight }, highlightType]"
+      :class="classnames"
     >
       <button
         class="short button-default"
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index c15877c8..86a318bd 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -33,21 +33,32 @@ export default Vue.component('RichContent', {
         class="img"
       />
     }
-    const renderMention = (attrs, children) => {
+    const renderMention = (attrs, children, encounteredText) => {
       return <MentionLink
         url={attrs.href}
         content={flattenDeep(children).join('')}
+        firstMention={!encounteredText}
         origattrs={attrs}
       />
     }
 
+    let encounteredText = false
     // Processor to use with mini_html_converter
     const processItem = (item) => {
       // Handle text noes - just add emoji
       if (typeof item === 'string') {
+        const emptyText = item.trim()
+        if (!emptyText) {
+          return encounteredText ? item : item.trim()
+        }
+        let unescapedItem = unescape(item)
+        if (!encounteredText) {
+          unescapedItem = unescapedItem.trimStart()
+          encounteredText = true
+        }
         if (item.includes(':')) {
           return processTextForEmoji(
-            unescape(item),
+            unescapedItem,
             this.emoji,
             ({ shortcode, url }) => {
               return <StillImage
@@ -59,7 +70,7 @@ export default Vue.component('RichContent', {
             }
           )
         } else {
-          return unescape(item)
+          return unescapedItem
         }
       }
       // Handle tag nodes
@@ -73,7 +84,7 @@ export default Vue.component('RichContent', {
             if (!this.handleLinks) break
             const attrs = getAttrs(opener)
             if (attrs['class'] && attrs['class'].includes('mention')) {
-              return renderMention(attrs, children)
+              return renderMention(attrs, children, encounteredText)
             }
         }
         // Render tag as is
diff --git a/src/components/status/status.js b/src/components/status/status.js
index b6414ad8..54b54a90 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -13,6 +13,7 @@ import RichContent from 'src/components/rich_content/rich_content.jsx'
 import StatusPopover from '../status_popover/status_popover.vue'
 import UserListPopover from '../user_list_popover/user_list_popover.vue'
 import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
+import MentionLink from 'src/components/mention_link/mention_link.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import { muteWordHits } from '../../services/status_parser/status_parser.js'
@@ -33,7 +34,8 @@ import {
   faStar,
   faEyeSlash,
   faEye,
-  faThumbtack
+  faThumbtack,
+  faAt,
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -50,7 +52,8 @@ library.add(
   faEllipsisH,
   faEyeSlash,
   faEye,
-  faThumbtack
+  faThumbtack,
+  faAt
 )
 
 const Status = {
@@ -70,7 +73,8 @@ const Status = {
     UserListPopover,
     EmojiReactions,
     StatusContent,
-    RichContent
+    RichContent,
+    MentionLink
   },
   props: [
     'statusoid',
@@ -133,9 +137,7 @@ const Status = {
       return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
     },
     replyProfileLink () {
-      if (this.isReply) {
-        return this.generateUserProfileLink(this.status.in_reply_to_user_id, this.replyToName)
-      }
+      return this.$store.getters.findUser(this.status.in_reply_to_screen_name).statusnet_profile_url
     },
     retweet () { return !!this.statusoid.retweeted_status },
     retweeterUser () { return this.statusoid.user },
@@ -159,6 +161,14 @@ const Status = {
     muteWordHits () {
       return muteWordHits(this.status, this.muteWords)
     },
+    mentions () {
+      return this.statusoid.attentions.filter(attn => {
+        return attn.screen_name !== this.replyToName
+      })
+    },
+    hasMentions () {
+      return this.mentions.length > 0
+    },
     muted () {
       if (this.statusoid.user.id === this.currentUser.id) return false
       const { status } = this
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 82088943..8744fa16 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -155,7 +155,8 @@ $status-margin: 0.75em;
     margin-right: 0.2em;
   }
 
-  .heading-reply-row {
+  & .heading-mentions-row,
+  & .heading-reply-row {
     position: relative;
     align-content: baseline;
     font-size: 12px;
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index a4247cd4..092d3834 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -222,6 +222,35 @@
               </span>
             </div>
 
+            <div v-if="hasMentions" class="heading-mentions-row">
+              <div
+                class="mentions"
+              >
+                <span
+                  class="button-unstyled reply-to"
+                  :aria-label="$t('tool_tip.reply')"
+                  @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
+                >
+                  <FAIcon
+                    class="fa-scale-110 fa-old-padding"
+                    icon="at"
+                  />
+                  <span
+                    class="faint-link reply-to-text"
+                  >
+                    {{ $t('status.mentions') }}
+                  </span>
+                </span>
+                <MentionLink
+                  v-for="mention in mentions"
+                  class="mention-link"
+                  :key="mention.statusnet_profile_url"
+                  :content="mention.statusnet_profile_url"
+                  :url="mention.statusnet_profile_url"
+                  :first-mention="false"
+                />
+              </div>
+            </div>
             <div class="heading-reply-row">
               <div
                 v-if="isReply"
@@ -258,13 +287,13 @@
                 >
                   <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
                 </span>
-                <router-link
-                  class="reply-to-link"
-                  :title="replyToName"
-                  :to="replyProfileLink"
-                >
-                  {{ replyToName }}
-                </router-link>
+
+                <MentionLink
+                  class="mention-link"
+                  :content="replyToName"
+                  :url="replyProfileLink"
+                  :first-mention="false"
+                />
                 <span
                   v-if="replies && replies.length"
                   class="faint replies-separator"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index d64adaff..cd366132 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -697,6 +697,7 @@
     "unbookmark": "Unbookmark",
     "delete_confirm": "Do you really want to delete this status?",
     "reply_to": "Reply to",
+    "mentions": "Mentions",
     "replies_list": "Replies:",
     "mute_conversation": "Mute conversation",
     "unmute_conversation": "Unmute conversation",
-- 
cgit v1.2.3-70-g09d2


From 394fd462dc48654ba7743bb9c2ac378f98f75bd4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 10 Jun 2021 13:01:00 +0300
Subject: proper cachin of headTailLinks, show mentions in notificaitons always

---
 src/components/status/status.js                  |  3 ++-
 src/components/status/status.scss                |  8 +++++---
 src/components/status/status.vue                 | 10 ++++++----
 src/components/status_body/status_body.js        | 15 ++++++---------
 src/components/status_body/status_body.vue       |  2 +-
 src/components/status_content/status_content.js  |  4 +++-
 src/components/status_content/status_content.vue |  2 ++
 7 files changed, 25 insertions(+), 19 deletions(-)

(limited to 'src/components/status/status.scss')

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 0498f28a..e9a5ec0d 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -142,7 +142,8 @@ const Status = {
     replyProfileLink () {
       if (this.isReply) {
         const user = this.$store.getters.findUser(this.status.in_reply_to_user_id)
-        return user && user.statusnet_profile_url
+        // FIXME Why user not found sometimes???
+        return user ? user.statusnet_profile_url : 'NOT_FOUND'
       }
     },
     retweet () { return !!this.statusoid.retweeted_status },
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 8744fa16..8f7fb71a 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -217,21 +217,23 @@ $status-margin: 0.75em;
     }
   }
 
-  .reply-to {
+  & .mentions,
+  & .reply-to {
     position: relative;
   }
 
-  .reply-to-text {
+  & .reply-to-text {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  .replies-separator {
+  .mentions-separator {
     margin-left: 0.4em;
   }
 
   .replies {
+    margin-top: 0.25em;
     line-height: 18px;
     font-size: 12px;
     display: flex;
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 62ad0eac..e4c3a755 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -267,8 +267,8 @@
                   :first-mention="false"
                 />
                 <span
-                  v-if="isReply && hasMentions"
-                  class="faint replies-separator"
+                  v-if="isReply && hasMentionsLine"
+                  class="faint mentions-separator"
                 >
                   -
                 </span>
@@ -276,7 +276,7 @@
                   v-if="hasMentionsLine"
                 >
                   <span
-                    class="button-unstyled reply-to"
+                    class="button-unstyled mentions"
                     :aria-label="$t('tool_tip.reply')"
                     @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                   >
@@ -285,7 +285,7 @@
                       icon="at"
                       />
                     <span
-                      class="faint-link reply-to-text"
+                      class="faint-link mentions-text"
                       >
                       {{ $t('status.mentions') }}
                     </span>
@@ -304,6 +304,8 @@
             :no-heading="noHeading"
             :highlight="highlight"
             :focused="isFocused"
+            :hide-first-mentions="mentionsOwnLine"
+            :head-tail-links="headTailLinks"
             @mediaplay="addMediaPlaying($event)"
             @mediapause="removeMediaPlaying($event)"
           />
diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index dbabd208..c2edb601 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -29,14 +29,18 @@ const StatusContent = {
     'singleLine',
     // if this was computed at upper level it can be passed here, otherwise
     // it will be in this component
-    'headTailLinks'
+    'headTailLinks',
+    'hideFirstMentions'
   ],
   data () {
     return {
       showingTall: this.fullContent || (this.inConversation && this.focused),
       showingLongSubject: false,
       // not as computed because it sets the initial state which will be changed later
-      expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject
+      expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject,
+      headTailLinksComputed: this.headTailLinks
+        ? this.headTailLinks
+        : getHeadTailLinks(this.status.raw_html)
     }
   },
   computed: {
@@ -76,13 +80,6 @@ const StatusContent = {
     attachmentTypes () {
       return this.status.attachments.map(file => fileType.fileType(file.mimetype))
     },
-    mentionsOwnLine () {
-      return this.mergedConfig.mentionsOwnLine
-    },
-    headTailLinksComputed () {
-      if (this.headTailLinks) return this.headTailLinks
-      return getHeadTailLinks(this.status.raw_html)
-    },
     mentions () {
       return this.headTailLinksComputed.firstMentions
     },
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index ff919211..3c291cf6 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -52,7 +52,7 @@
           >
             <template v-slot:prefix>
               <MentionsLine
-                v-if="!mentionsOwnLine"
+                v-if="!hideFirstMentions"
                 :mentions="mentions"
                 class="mentions-line"
               />
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index 1b80ee09..363a9cb0 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -31,7 +31,9 @@ const StatusContent = {
     'focused',
     'noHeading',
     'fullContent',
-    'singleLine'
+    'singleLine',
+    'hideFirstMentions',
+    'headTailLinks'
   ],
   computed: {
     hideAttachments () {
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 0283ce2d..18f6e7be 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -4,6 +4,8 @@
     <StatusBody
       :status="status"
       :single-line="singleLine"
+      :hide-first-mentions="hideFirstMentions"
+      :headTailLinks="headTailLinks"
     >
       <div v-if="status.poll && status.poll.options">
         <poll :base-poll="status.poll" />
-- 
cgit v1.2.3-70-g09d2


From 0260693f5162ea8a73d2b359940781049a1b3e76 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 10 Jun 2021 13:22:36 +0300
Subject: stylistic improvements for single-line mentions

---
 src/components/mention_link/mention_link.scss |   2 +
 src/components/status/status.scss             |  22 +----
 src/components/status/status.vue              | 122 ++++++++++++--------------
 src/components/status_body/status_body.vue    |   1 -
 4 files changed, 62 insertions(+), 85 deletions(-)

(limited to 'src/components/status/status.scss')

diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index eed4d5be..a18475a1 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -32,6 +32,8 @@
 
   & .short,
   & .full {
+    white-space: nowrap;
+
     &::before {
       content: '@';
     }
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 8f7fb71a..60dd8237 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -155,32 +155,17 @@ $status-margin: 0.75em;
     margin-right: 0.2em;
   }
 
-  & .heading-mentions-row,
   & .heading-reply-row {
     position: relative;
     align-content: baseline;
     font-size: 12px;
-    line-height: 18px;
+    line-height: 160%;
     max-width: 100%;
     display: flex;
     flex-wrap: wrap;
     align-items: stretch;
   }
 
-  .reply-to-and-accountname {
-    display: flex;
-    height: 18px;
-    margin-right: 0.5em;
-    max-width: 100%;
-
-    .reply-to-link {
-      white-space: nowrap;
-      word-break: break-word;
-      text-overflow: ellipsis;
-      overflow-x: hidden;
-    }
-  }
-
   & .reply-to-popover,
   & .reply-to-no-popover {
     min-width: 0;
@@ -219,6 +204,7 @@ $status-margin: 0.75em;
 
   & .mentions,
   & .reply-to {
+    white-space: nowrap;
     position: relative;
   }
 
@@ -228,8 +214,8 @@ $status-margin: 0.75em;
     white-space: nowrap;
   }
 
-  .mentions-separator {
-    margin-left: 0.4em;
+  .mentions-line {
+    display: inline-block;
   }
 
   .replies {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index e4c3a755..9e08ce85 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -221,81 +221,71 @@
                 </button>
               </span>
             </div>
-            <div class="heading-reply-row">
-              <div
-                v-if="isReply"
-                class="reply-to-and-accountname"
+            <div
+              class="heading-reply-row"
+              v-if="isReply || hasMentionsLine"
+              >
+              <StatusPopover
+                v-if="isReply && !isPreview"
+                :status-id="status.parent_visible && status.in_reply_to_status_id"
+                class="reply-to-popover"
+                style="min-width: 0"
+                :class="{ '-strikethrough': !status.parent_visible }"
               >
-                <StatusPopover
-                  v-if="!isPreview"
-                  :status-id="status.parent_visible && status.in_reply_to_status_id"
-                  class="reply-to-popover"
-                  style="min-width: 0"
-                  :class="{ '-strikethrough': !status.parent_visible }"
+                <button
+                  class="button-unstyled reply-to"
+                  :aria-label="$t('tool_tip.reply')"
+                  @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                 >
-                  <button
-                    class="button-unstyled reply-to"
-                    :aria-label="$t('tool_tip.reply')"
-                    @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
+                  <FAIcon
+                    class="fa-scale-110 fa-old-padding"
+                    icon="reply"
+                    flip="horizontal"
+                  />
+                  <span
+                    class="faint-link reply-to-text"
                   >
-                    <FAIcon
-                      class="fa-scale-110 fa-old-padding"
-                      icon="reply"
-                      flip="horizontal"
-                    />
-                    <span
-                      class="faint-link reply-to-text"
-                    >
-                      {{ $t('status.reply_to') }}
-                    </span>
-                  </button>
-                </StatusPopover>
+                    {{ $t('status.reply_to') }}
+                  </span>
+                </button>
+              </StatusPopover>
 
-                <span
-                  v-else
-                  class="reply-to-no-popover"
-                >
-                  <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
-                </span>
+              <span
+                v-else-if="isReply"
+                class="reply-to-no-popover"
+              >
+                <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
+              </span>
 
-                <MentionLink
-                  class="mention-link"
-                  :content="replyToName"
-                  :url="replyProfileLink"
-                  :user-id="status.in_reply_to_user_id"
-                  :user-screen-name="status.in_reply_to_screen_name"
-                  :first-mention="false"
+              <MentionLink
+                :content="replyToName"
+                :url="replyProfileLink"
+                :user-id="status.in_reply_to_user_id"
+                :user-screen-name="status.in_reply_to_screen_name"
+                :first-mention="false"
+              />
+
+              <span
+                v-if="hasMentionsLine"
+                class="mentions"
+                :aria-label="$t('tool_tip.mentions')"
+                @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
+              >
+                <FAIcon
+                  class="fa-scale-110 fa-old-padding"
+                  icon="at"
                 />
                 <span
-                  v-if="isReply && hasMentionsLine"
-                  class="faint mentions-separator"
+                  class="faint-link mentions-text"
                 >
-                  -
+                  {{ $t('status.mentions') }}
                 </span>
-                <span
-                  v-if="hasMentionsLine"
-                >
-                  <span
-                    class="button-unstyled mentions"
-                    :aria-label="$t('tool_tip.reply')"
-                    @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
-                  >
-                    <FAIcon
-                      class="fa-scale-110 fa-old-padding"
-                      icon="at"
-                      />
-                    <span
-                      class="faint-link mentions-text"
-                      >
-                      {{ $t('status.mentions') }}
-                    </span>
-                  </span>
-                  <MentionsLine
-                    :mentions="mentionsLine"
-                    class="mentions-line"
-                  />
-                </span>
-              </div>
+              </span>
+              <MentionsLine
+                v-if="hasMentionsLine"
+                :mentions="mentionsLine"
+                class="mentions-line"
+              />
             </div>
           </div>
 
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index 3c291cf6..4df29934 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -54,7 +54,6 @@
               <MentionsLine
                 v-if="!hideFirstMentions"
                 :mentions="mentions"
-                class="mentions-line"
               />
             </template>
           </RichContent>
-- 
cgit v1.2.3-70-g09d2


From 0263834faa59229e0290828798a9b8f61836c72c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 10 Jun 2021 14:01:26 +0300
Subject: mentions on same line as replies

---
 src/components/status/status.scss | 11 +++--
 src/components/status/status.vue  | 99 ++++++++++++++++++++++-----------------
 2 files changed, 62 insertions(+), 48 deletions(-)

(limited to 'src/components/status/status.scss')

diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 60dd8237..e68bc62c 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -1,4 +1,3 @@
-
 @import '../../_variables.scss';
 
 $status-margin: 0.75em;
@@ -151,6 +150,11 @@ $status-margin: 0.75em;
     }
   }
 
+  .glued-label {
+    display: inline-flex;
+    white-space: nowrap;
+  }
+
   .timeago {
     margin-right: 0.2em;
   }
@@ -161,8 +165,6 @@ $status-margin: 0.75em;
     font-size: 12px;
     line-height: 160%;
     max-width: 100%;
-    display: flex;
-    flex-wrap: wrap;
     align-items: stretch;
   }
 
@@ -206,6 +208,7 @@ $status-margin: 0.75em;
   & .reply-to {
     white-space: nowrap;
     position: relative;
+    padding-right: 0.25em;
   }
 
   & .reply-to-text {
@@ -215,7 +218,7 @@ $status-margin: 0.75em;
   }
 
   .mentions-line {
-    display: inline-block;
+    display: inline;
   }
 
   .replies {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 9e08ce85..98965ae0 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -225,65 +225,76 @@
               class="heading-reply-row"
               v-if="isReply || hasMentionsLine"
               >
-              <StatusPopover
-                v-if="isReply && !isPreview"
-                :status-id="status.parent_visible && status.in_reply_to_status_id"
-                class="reply-to-popover"
-                style="min-width: 0"
-                :class="{ '-strikethrough': !status.parent_visible }"
+              <span
+                class="glued-label"
+                v-if="isReply"
               >
-                <button
-                  class="button-unstyled reply-to"
-                  :aria-label="$t('tool_tip.reply')"
-                  @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
+                <StatusPopover
+                   v-if="!isPreview"
+                  :status-id="status.parent_visible && status.in_reply_to_status_id"
+                  class="reply-to-popover"
+                  style="min-width: 0"
+                  :class="{ '-strikethrough': !status.parent_visible }"
                 >
-                  <FAIcon
-                    class="fa-scale-110 fa-old-padding"
-                    icon="reply"
-                    flip="horizontal"
-                  />
-                  <span
-                    class="faint-link reply-to-text"
+                  <button
+                    class="button-unstyled reply-to"
+                    :aria-label="$t('tool_tip.reply')"
+                    @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                   >
-                    {{ $t('status.reply_to') }}
-                  </span>
-                </button>
-              </StatusPopover>
+                    <FAIcon
+                      class="fa-scale-110 fa-old-padding"
+                      icon="reply"
+                      flip="horizontal"
+                    />
+                    <span
+                      class="faint-link reply-to-text"
+                    >
+                      {{ $t('status.reply_to') }}
+                    </span>
+                  </button>
+                </StatusPopover>
 
-              <span
-                v-else-if="isReply"
-                class="reply-to-no-popover"
-              >
-                <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
+                <span
+                  v-else
+                  class="reply-to-no-popover"
+                >
+                  <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
+                </span>
+                <MentionLink
+                  :content="replyToName"
+                  :url="replyProfileLink"
+                  :user-id="status.in_reply_to_user_id"
+                  :user-screen-name="status.in_reply_to_screen_name"
+                  :first-mention="false"
+                />
               </span>
 
-              <MentionLink
-                :content="replyToName"
-                :url="replyProfileLink"
-                :user-id="status.in_reply_to_user_id"
-                :user-screen-name="status.in_reply_to_screen_name"
-                :first-mention="false"
-              />
-
+              <!-- This little wrapper is made for sole purpose of "gluing" -->
+              <!-- "Mentions" label to the first mention -->
               <span
                 v-if="hasMentionsLine"
-                class="mentions"
-                :aria-label="$t('tool_tip.mentions')"
-                @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
+                class="glued-label"
               >
-                <FAIcon
-                  class="fa-scale-110 fa-old-padding"
-                  icon="at"
-                />
                 <span
-                  class="faint-link mentions-text"
+                  class="mentions"
+                  :aria-label="$t('tool_tip.mentions')"
+                  @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                 >
-                  {{ $t('status.mentions') }}
+                  <span
+                    class="faint-link mentions-text"
+                  >
+                    {{ $t('status.mentions') }}
+                  </span>
                 </span>
+                <MentionsLine
+                  v-if="hasMentionsLine"
+                  :mentions="mentionsLine.slice(0, 1)"
+                  class="mentions-line-first"
+                />
               </span>
               <MentionsLine
                 v-if="hasMentionsLine"
-                :mentions="mentionsLine"
+                :mentions="mentionsLine.slice(1)"
                 class="mentions-line"
               />
             </div>
-- 
cgit v1.2.3-70-g09d2


From 24f3681ac157594c94e3b933aa85bc4707758746 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 12 Jun 2021 17:11:49 +0300
Subject: fix color of reply row, fix overflow in status-popover

---
 src/components/status/status.scss | 4 ++++
 src/components/status/status.vue  | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

(limited to 'src/components/status/status.scss')

diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index e68bc62c..3805aa30 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -4,6 +4,7 @@ $status-margin: 0.75em;
 
 .Status {
   min-width: 0;
+  white-space: normal;
 
   &:hover {
     --_still-image-img-visibility: visible;
@@ -166,6 +167,7 @@ $status-margin: 0.75em;
     line-height: 160%;
     max-width: 100%;
     align-items: stretch;
+    z-index: 2;
   }
 
   & .reply-to-popover,
@@ -211,7 +213,9 @@ $status-margin: 0.75em;
     padding-right: 0.25em;
   }
 
+  & .mentions-text,
   & .reply-to-text {
+    color: var(--faint);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index be6458ae..a5f347a6 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -247,7 +247,7 @@
                       flip="horizontal"
                     />
                     <span
-                      class="faint-link reply-to-text"
+                      class="reply-to-text"
                     >
                       {{ $t('status.reply_to') }}
                     </span>
@@ -281,7 +281,7 @@
                   @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                 >
                   <span
-                    class="faint-link mentions-text"
+                    class="mentions-text"
                   >
                     {{ $t('status.mentions') }}
                   </span>
-- 
cgit v1.2.3-70-g09d2


From 2c60a9b638a00db33e6c47e8642aff2ffd0ce7a0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 12 Jun 2021 20:51:36 +0300
Subject: fix next relply-row bleeding through popover

---
 src/components/status/status.scss | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/components/status/status.scss')

diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 3805aa30..71305dd7 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -167,7 +167,6 @@ $status-margin: 0.75em;
     line-height: 160%;
     max-width: 100%;
     align-items: stretch;
-    z-index: 2;
   }
 
   & .reply-to-popover,
-- 
cgit v1.2.3-70-g09d2