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


From 06042569f1d2f2c7217917459df007adbb113e53 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 3 Feb 2022 22:10:45 +0200
Subject: fix alignment issues

---
 src/components/mention_link/mention_link.scss |  2 +-
 src/components/popover/popover.vue            |  2 +-
 src/components/status/status.scss             | 10 ++++++++--
 src/components/status/status.vue              |  2 +-
 4 files changed, 11 insertions(+), 5 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 03306dcc..23d18f59 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -3,7 +3,7 @@
 .MentionLink {
   position: relative;
   white-space: normal;
-  display: inline-block;
+  display: inline-flex;
   color: var(--link);
 
   & .new,
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 2e78a09e..8588b351 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -33,7 +33,7 @@
 @import '../../_variables.scss';
 
 .popover-trigger-button {
-  display: block;
+  display: inline-block;
 }
 
 .popover {
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 71305dd7..24c840ac 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -165,16 +165,23 @@ $status-margin: 0.75em;
     align-content: baseline;
     font-size: 12px;
     line-height: 160%;
+    margin-top: 0.2em;
+    line-height: 130%;
+
     max-width: 100%;
     align-items: stretch;
   }
 
   & .reply-to-popover,
-  & .reply-to-no-popover {
+  & .reply-to-no-popover,
+  & .mentions {
     min-width: 0;
     margin-right: 0.4em;
     flex-shrink: 0;
   }
+  .reply-glued-label {
+    margin-right: 0.5em;
+  }
 
   .reply-to-popover {
     .reply-to:hover::before {
@@ -209,7 +216,6 @@ $status-margin: 0.75em;
   & .reply-to {
     white-space: nowrap;
     position: relative;
-    padding-right: 0.25em;
   }
 
   & .mentions-text,
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 2684e415..3bb29db6 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -227,7 +227,7 @@
             >
               <span
                 v-if="isReply"
-                class="glued-label"
+                class="glued-label reply-glued-label"
               >
                 <StatusPopover
                   v-if="!isPreview"
-- 
cgit v1.2.3-70-g09d2


From 9a6363431d8f17cc1ee027eb498181d157fefdb7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 3 Feb 2022 22:41:38 +0200
Subject: lint

---
 src/components/status/status.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

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

diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 24c840ac..0f527def 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -164,10 +164,8 @@ $status-margin: 0.75em;
     position: relative;
     align-content: baseline;
     font-size: 12px;
-    line-height: 160%;
     margin-top: 0.2em;
     line-height: 130%;
-
     max-width: 100%;
     align-items: stretch;
   }
@@ -179,6 +177,7 @@ $status-margin: 0.75em;
     margin-right: 0.4em;
     flex-shrink: 0;
   }
+
   .reply-glued-label {
     margin-right: 0.5em;
   }
-- 
cgit v1.2.3-70-g09d2


From d361a4d7dc18bd7c722ed76a894ebee8e5a50ed5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 4 Feb 2022 14:20:56 +0200
Subject: fix overflows

---
 src/components/mention_link/mention_link.scss   | 12 ++++++++----
 src/components/mentions_line/mentions_line.scss |  7 ++-----
 src/components/status/status.scss               |  2 ++
 src/components/status_body/status_body.scss     |  2 +-
 4 files changed, 13 insertions(+), 10 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 23d18f59..c7db7fb9 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -3,12 +3,12 @@
 .MentionLink {
   position: relative;
   white-space: normal;
-  display: inline-flex;
+  display: inline;
   color: var(--link);
 
   & .new,
   & .original {
-    display: inline-block;
+    display: inline;
     border-radius: 2px;
   }
 
@@ -38,8 +38,8 @@
     user-select: all;
   }
 
-  .short.-with-tooltip,
-  .you {
+  & .short.-with-tooltip,
+  & .you {
     user-select: none;
   }
 
@@ -48,6 +48,10 @@
     white-space: nowrap;
   }
 
+  .shortName {
+    white-space: normal;
+  }
+
   .new {
     &.-you {
       & .shortName,
diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss
index b9d5c14a..1a485860 100644
--- a/src/components/mentions_line/mentions_line.scss
+++ b/src/components/mentions_line/mentions_line.scss
@@ -1,11 +1,8 @@
 .MentionsLine {
+  word-break: break-all;
+
   .showMoreLess {
     white-space: normal;
     color: var(--link);
   }
-
-  .fullExtraMentions,
-  .mention-link:not(:last-child) {
-    margin-right: 0.25em;
-  }
 }
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 0f527def..2028ade9 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -5,6 +5,8 @@ $status-margin: 0.75em;
 .Status {
   min-width: 0;
   white-space: normal;
+  word-wrap: break-word;
+  word-break: break-word;
 
   &:hover {
     --_still-image-img-visibility: visible;
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index c7732bfe..51623a26 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -9,7 +9,7 @@
   & .text,
   & .summary {
     font-family: var(--postFont, sans-serif);
-    white-space: pre-wrap;
+    white-space: normal;
     overflow-wrap: break-word;
     word-wrap: break-word;
     word-break: break-word;
-- 
cgit v1.2.3-70-g09d2


From 61bb69c88f6d70431a72bfb649d0f796b976a83b Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sun, 8 Aug 2021 12:40:17 -0400
Subject: Optimize thread display

---
 src/_variables.scss                          |   2 +
 src/components/conversation/conversation.vue | 215 ++++++++++++++++-----------
 src/components/status/status.scss            |   9 --
 src/components/thread_tree/thread_tree.vue   |  16 +-
 4 files changed, 139 insertions(+), 103 deletions(-)

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

diff --git a/src/_variables.scss b/src/_variables.scss
index 9004d551..099d3606 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -30,3 +30,5 @@ $fallback--attachmentRadius: 10px;
 $fallback--chatMessageRadius: 10px;
 
 $fallback--buttonShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
+
+$status-margin: 0.75em;
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 0ffd8c37..cd108f69 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -18,94 +18,102 @@
         {{ $t('timeline.collapse') }}
       </button>
     </div>
-    <div
-      v-if="diveMode"
-      class="conversation-undive-box"
-    >
-      <i18n
-        path="status.show_all_conversation"
-        tag="button"
-        class="button-unstyled -link"
-        @click.prevent="undive"
+    <div class="conversation-body panel-body">
+      <div
+        v-if="diveMode"
+        class="conversation-undive-box"
       >
-        <FAIcon icon="angle-double-left" />
-      </i18n>
-    </div>
-    <div
-      v-if="diveMode"
-      class="conversation-undive-box"
-    >
-      <i18n
-        path="status.return_to_last_showing"
-        tag="button"
-        class="button-unstyled -link"
-        @click.prevent="diveBack"
+        <i18n
+          path="status.show_all_conversation"
+          tag="button"
+          class="button-unstyled -link"
+          @click.prevent="undive"
+        >
+          <FAIcon icon="angle-double-left" />
+        </i18n>
+      </div>
+      <div
+        v-if="diveMode"
+        class="conversation-undive-box"
       >
-        <FAIcon icon="chevron-left" />
-      </i18n>
-    </div>
-    <div v-if="isTreeView">
-      <thread-tree
-        v-for="status in showingTopLevel"
-        :key="status.id"
-        ref="statusComponent"
-        :depth="0"
+        <i18n
+          path="status.return_to_last_showing"
+          tag="button"
+          class="button-unstyled -link"
+          @click.prevent="diveBack"
+        >
+          <FAIcon icon="chevron-left" />
+        </i18n>
+      </div>
+      <div
+        v-if="isTreeView"
+        class="thread-body"
+      >
+        <thread-tree
+          v-for="status in showingTopLevel"
+          :key="status.id"
+          ref="statusComponent"
+          :depth="0"
 
-        :status="status"
-        :in-profile="inProfile"
-        :conversation="conversation"
-        :collapsable="collapsable"
-        :is-expanded="isExpanded"
-        :pinned-status-ids-object="pinnedStatusIdsObject"
-        :profile-user-id="profileUserId"
+          :status="status"
+          :in-profile="inProfile"
+          :conversation="conversation"
+          :collapsable="collapsable"
+          :is-expanded="isExpanded"
+          :pinned-status-ids-object="pinnedStatusIdsObject"
+          :profile-user-id="profileUserId"
 
-        :focused="focused"
-        :get-replies="getReplies"
-        :highlight="maybeHighlight"
-        :set-highlight="setHighlight"
-        :toggle-expanded="toggleExpanded"
+          :focused="focused"
+          :get-replies="getReplies"
+          :highlight="maybeHighlight"
+          :set-highlight="setHighlight"
+          :toggle-expanded="toggleExpanded"
 
-        :simple="treeViewIsSimple"
-        :toggle-thread-display="toggleThreadDisplay"
-        :thread-display-status="threadDisplayStatus"
-        :show-thread-recursively="showThreadRecursively"
-        :total-reply-count="totalReplyCount"
-        :total-reply-depth="totalReplyDepth"
-        :status-content-properties="statusContentProperties"
-        :set-status-content-property="setStatusContentProperty"
-        :toggle-status-content-property="toggleStatusContentProperty"
-        :dive="canDive ? diveIntoStatus : undefined"
-      />
-    </div>
-    <div v-if="isLinearView">
-      <status
-        v-for="status in conversation"
-        :key="status.id"
-        ref="statusComponent"
-        :inline-expanded="collapsable && isExpanded"
-        :statusoid="status"
-        :expandable="!isExpanded"
-        :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
-        :focused="focused(status.id)"
-        :in-conversation="isExpanded"
-        :highlight="getHighlight()"
-        :replies="getReplies(status.id)"
-        :in-profile="inProfile"
-        :profile-user-id="profileUserId"
-        class="conversation-status status-fadein panel-body"
+          :simple="treeViewIsSimple"
+          :toggle-thread-display="toggleThreadDisplay"
+          :thread-display-status="threadDisplayStatus"
+          :show-thread-recursively="showThreadRecursively"
+          :total-reply-count="totalReplyCount"
+          :total-reply-depth="totalReplyDepth"
+          :status-content-properties="statusContentProperties"
+          :set-status-content-property="setStatusContentProperty"
+          :toggle-status-content-property="toggleStatusContentProperty"
+          :dive="canDive ? diveIntoStatus : undefined"
+        />
+      </div>
+      <div
+        v-if="isLinearView"
+        class="thread-body"
+      >
+        <status
+          v-for="status in conversation"
+          :key="status.id"
+          ref="statusComponent"
+          :inline-expanded="collapsable && isExpanded"
+          :statusoid="status"
+          :expandable="!isExpanded"
+          :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
+          :focused="focused(status.id)"
+          :in-conversation="isExpanded"
+          :highlight="getHighlight()"
+          :replies="getReplies(status.id)"
+          :in-profile="inProfile"
+          :profile-user-id="profileUserId"
+          class="conversation-status status-fadein panel-body"
 
-        :toggle-thread-display="toggleThreadDisplay"
-        :thread-display-status="threadDisplayStatus"
-        :show-thread-recursively="showThreadRecursively"
-        :total-reply-count="totalReplyCount"
-        :total-reply-depth="totalReplyDepth"
-        :status-content-properties="statusContentProperties"
-        :set-status-content-property="setStatusContentProperty"
-        :toggle-status-content-property="toggleStatusContentProperty"
+          :toggle-thread-display="toggleThreadDisplay"
+          :thread-display-status="threadDisplayStatus"
+          :show-thread-recursively="showThreadRecursively"
+          :total-reply-count="totalReplyCount"
+          :total-reply-depth="totalReplyDepth"
+          :status-content-properties="statusContentProperties"
+          :set-status-content-property="setStatusContentProperty"
+          :toggle-status-content-property="toggleStatusContentProperty"
 
-        @goto="setHighlight"
-        @toggleExpanded="toggleExpanded"
-      />
+          @goto="setHighlight"
+          @toggleExpanded="toggleExpanded"
+        />
+      </div>
     </div>
   </div>
   <div
@@ -121,21 +129,54 @@
 
 .Conversation {
   .conversation-undive-box {
-    padding: 1em;
+    padding: $status-margin;
   }
+
+  /* HACK: we want the border width to scale with the status *below it* */
   .conversation-undive-box,
   .conversation-status {
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: var(--border, $fallback--border);
+    border-top-width: 1px;
+    border-top-style: solid;
+    border-top-color: var(--border, $fallback--border);
     border-radius: 0;
   }
 
+  &.-expanded .conversation-body .thread-tree:nth-child(1) > .conversation-status {
+    border-top-left-radius: $fallback--panelRadius;
+    border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
+  }
+
+  /* first element in conversation body */
+  &.-expanded .conversation-body {
+    .conversation-undive-box:nth-child(1),
+    & > .conversation-status:nth-child(1),
+    & > .thread-body:nth-child(1) > .thread-tree:nth-child(1) > .conversation-status:nth-child(1), {
+      border-top: none;
+    }
+  }
+
+  /* first unexpanded statuses in timeline */
+  &:first-child:not(.-expanded) {
+    .conversation-body {
+      .conversation-status {
+        border-top: none;
+      }
+    }
+  }
+
+  /* expanded conversation in timeline */
+  &.status-fadein.-expanded .thread-body {
+    border-left-width: 4px;
+    border-left-style: solid;
+    border-left-color: $fallback--cRed;
+    border-left-color: var(--cRed, $fallback--cRed);
+    border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
+    border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+    border-bottom: 1px solid var(--border, $fallback--border);
+  }
   &.-expanded {
     .conversation-status:last-child {
       border-bottom: none;
-      border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
-      border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
     }
   }
 }
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 2028ade9..80bc392d 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -1,7 +1,5 @@
 @import '../../_variables.scss';
 
-$status-margin: 0.75em;
-
 .Status {
   min-width: 0;
   white-space: normal;
@@ -28,13 +26,6 @@ $status-margin: 0.75em;
     --icon: var(--selectedPostIcon, $fallback--icon);
   }
 
-  &.-conversation {
-    border-left-width: 4px;
-    border-left-style: solid;
-    border-left-color: $fallback--cRed;
-    border-left-color: var(--cRed, $fallback--cRed);
-  }
-
   .gravestone {
     padding: $status-margin;
     color: $fallback--faint;
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index fa1e5f86..aafad66e 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -109,14 +109,16 @@
 <style lang="scss">
 @import '../../_variables.scss';
 .thread-tree-replies {
-  margin-left: 1em;
+  margin-left: $status-margin;
+  border-left: 1px solid var(--border, $fallback--border);
+  border-top-left-radius: $fallback--panelRadius;
+  border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
+  border-bottom-left-radius: $fallback--panelRadius;
+  border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
 }
+
 .thread-tree-replies-hidden {
-  padding: 1em;
-  border-bottom: 1px solid var(--border, #222);
-}
-.conversation-status.conversation-status-treeview:last-child,
-.Conversation.-expanded .conversation-status.conversation-status-treeview:last-child {
-  border-bottom: 1px solid var(--border, #222);
+  padding: $status-margin;
+  border-top: 1px solid var(--border, $fallback--border);
 }
 </style>
-- 
cgit v1.2.3-70-g09d2


From a511250b63b337f4f541a77e57cf6fb7ecbd5d1a Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 7 Mar 2022 19:28:38 -0500
Subject: Make $status-margin fallback only

---
 src/components/conversation/conversation.vue     |  8 ++++----
 src/components/status/status.scss                | 18 +++++++++---------
 src/components/status_content/status_content.vue |  4 ----
 src/components/thread_tree/thread_tree.vue       |  4 ++--
 4 files changed, 15 insertions(+), 19 deletions(-)

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

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 20dea4f9..7628ceaa 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -194,7 +194,7 @@
 
 .Conversation {
   .conversation-dive-to-top-level-box {
-    padding: $status-margin;
+    padding: var(--status-margin, $status-margin);
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: var(--border, $fallback--border);
@@ -206,7 +206,7 @@
   }
 
   .thread-ancestors {
-    margin-left: $status-margin;
+    margin-left: var(--status-margin, $status-margin);
     border-left: 2px solid var(--border, $fallback--border);
   }
 
@@ -216,7 +216,7 @@
     color: var(--text);
   }
   .thread-ancestor-dive-box {
-    padding-left: $status-margin;
+    padding-left: var(--status-margin, $status-margin);
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: var(--border, $fallback--border);
@@ -229,7 +229,7 @@
     }
   }
   .thread-ancestor-dive-box-inner {
-    padding: $status-margin;
+    padding: var(--status-margin, $status-margin);
   }
 
   .conversation-status {
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 80bc392d..3f647b25 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -27,7 +27,7 @@
   }
 
   .gravestone {
-    padding: $status-margin;
+    padding: var(--status-margin, $status-margin);
     color: $fallback--faint;
     color: var(--faint, $fallback--faint);
     display: flex;
@@ -40,7 +40,7 @@
 
   .status-container {
     display: flex;
-    padding: $status-margin;
+    padding: var(--status-margin, $status-margin);
 
     &.-repeat {
       padding-top: 0;
@@ -48,7 +48,7 @@
   }
 
   .pin {
-    padding: $status-margin $status-margin 0;
+    padding: var(--status-margin, $status-margin) var(--status-margin, $status-margin) 0;
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -64,7 +64,7 @@
   }
 
   .left-side {
-    margin-right: $status-margin;
+    margin-right: var(--status-margin, $status-margin);
   }
 
   .right-side {
@@ -73,7 +73,7 @@
   }
 
   .usercard {
-    margin-bottom: $status-margin;
+    margin-bottom: var(--status-margin, $status-margin);
   }
 
   .status-username {
@@ -239,7 +239,7 @@
   }
 
   .repeat-info {
-    padding: 0.4em $status-margin;
+    padding: 0.4em var(--status-margin, $status-margin);
 
     .repeat-icon {
       color: $fallback--cGreen;
@@ -285,7 +285,7 @@
     position: relative;
     width: 100%;
     display: flex;
-    margin-top: $status-margin;
+    margin-top: var(--status-margin, $status-margin);
 
     > * {
       max-width: 4em;
@@ -353,7 +353,7 @@
   }
 
   .favs-repeated-users {
-    margin-top: $status-margin;
+    margin-top: var(--status-margin, $status-margin);
   }
 
   .stats {
@@ -380,7 +380,7 @@
   }
 
   .stat-count {
-    margin-right: $status-margin;
+    margin-right: var(--status-margin, $status-margin);
     user-select: none;
 
     .stat-title {
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 0a09cda4..9e7d7956 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -58,10 +58,6 @@
 
 <script src="./status_content.js" ></script>
 <style lang="scss">
-@import '../../_variables.scss';
-
-$status-margin: 0.75em;
-
 .StatusContent {
   flex: 1;
   min-width: 0;
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index a29a5bef..e64455e0 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -113,12 +113,12 @@
 <style lang="scss">
 @import '../../_variables.scss';
 .thread-tree-replies {
-  margin-left: $status-margin;
+  margin-left: var(--status-margin, $status-margin);
   border-left: 2px solid var(--border, $fallback--border);
 }
 
 .thread-tree-replies-hidden {
-  padding: $status-margin;
+  padding: var(--status-margin, $status-margin);
   /* Make the button stretch along the whole row */
   display: flex;
   align-items: stretch;
-- 
cgit v1.2.3-70-g09d2