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.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

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

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 470c01f1..b6414ad8 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -9,6 +9,7 @@ import UserAvatar from '../user_avatar/user_avatar.vue'
 import AvatarList from '../avatar_list/avatar_list.vue'
 import Timeago from '../timeago/timeago.vue'
 import StatusContent from '../status_content/status_content.vue'
+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'
@@ -68,7 +69,8 @@ const Status = {
     StatusPopover,
     UserListPopover,
     EmojiReactions,
-    StatusContent
+    StatusContent,
+    RichContent
   },
   props: [
     'statusoid',
@@ -136,8 +138,9 @@ const Status = {
       }
     },
     retweet () { return !!this.statusoid.retweeted_status },
+    retweeterUser () { return this.statusoid.user },
     retweeter () { return this.statusoid.user.name || this.statusoid.user.screen_name_ui },
-    retweeterHtml () { return this.statusoid.user.name_html },
+    retweeterHtml () { return this.statusoid.user.name },
     retweeterProfileLink () { return this.generateUserProfileLink(this.statusoid.user.id, this.statusoid.user.screen_name) },
     status () {
       if (this.retweet) {
-- 
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.js')

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 9ea370033af450c0d5e4650a7c10f0e1ffec911c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 8 Jun 2021 12:58:28 +0300
Subject: configurable mentions placement

---
 src/components/mention_link/mention_link.js        | 14 ++---
 src/components/mention_link/mention_link.scss      | 22 ++++----
 src/components/mention_link/mention_link.vue       |  9 ++--
 src/components/rich_content/rich_content.jsx       |  1 -
 src/components/settings_modal/tabs/general_tab.vue | 10 ++++
 src/components/status/status.js                    |  8 ++-
 src/components/status/status.vue                   | 60 +++++++++++-----------
 src/i18n/en.json                                   |  2 +
 src/modules/config.js                              |  2 +
 9 files changed, 75 insertions(+), 53 deletions(-)

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

diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index 465c7d00..8a93e8a3 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -13,11 +13,6 @@ const MentionLink = {
       required: true,
       type: String
     },
-    origattrs: {
-      required: false,
-      type: Object,
-      default: {}
-    },
     firstMention: {
       required: false,
       type: Boolean,
@@ -56,6 +51,12 @@ const MentionLink = {
     highlightClass () {
       if (this.highlight) return highlightClass(this.user)
     },
+    oldPlace () {
+      return this.mergedConfig.mentionsOldPlace
+    },
+    oldStyle () {
+      return this.mergedConfig.mentionsOldStyle
+    },
     style () {
       if (this.highlight) {
         const {
@@ -72,7 +73,8 @@ const MentionLink = {
         {
           '-you': this.isYou,
           '-highlighted': this.highlight,
-          '-firstMention': this.firstMention
+          '-firstMention': this.firstMention,
+          '-oldStyle': this.oldStyle
         },
         this.highlightType
       ]
diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index dec11014..261aeaef 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -3,6 +3,7 @@
   white-space: normal;
   display: inline-block;
   color: var(--link);
+  margin-right: 0.25em;
 
   & .new,
   & .original {
@@ -33,23 +34,25 @@
   & .short,
   & .full {
     &::before {
-      color: var(--faint);
       content: '@';
     }
   }
 
   .new {
-    &.-firstMention {
-      display: none;
+    &.-you {
+      & .shortName,
+      & .full {
+        font-weight: 600;
+      }
     }
 
-    &,
-    &.-highlighted {
+    &:not(.-oldStyle) {
       .short {
         line-height: 1.5;
         font-size: inherit;
 
         &::before {
+          color: var(--faint);
           display: inline-block;
           height: 50%;
           line-height: 1;
@@ -111,12 +114,9 @@
     }
   }
 
-  .new {
-    &.-you {
-      & .shortName,
-      & .full {
-        font-weight: 600;
-      }
+  &:not(.-oldPlace) {
+    .new.-firstMention {
+      display: none;
     }
   }
 
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 05f6fd91..0dae1f53 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -1,5 +1,8 @@
 <template>
-  <span class="MentionLink">
+<span
+  class="MentionLink"
+  :class="{ '-oldPlace': oldPlace }"
+>
     <!-- eslint-disable vue/no-v-html -->
     <a
       v-if="!user"
@@ -15,8 +18,8 @@
       :class="classnames"
     >
       <button
-        class="short button-default"
-        :class="{ '-sublime': !highlight }"
+        class="short"
+        :class="[{ '-sublime': !highlight }, oldStyle ? 'button-unstyled' : 'button-default']"
         @click.prevent="onClick"
       >
         <!-- eslint-disable vue/no-v-html -->
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index 86a318bd..26a64f28 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -38,7 +38,6 @@ export default Vue.component('RichContent', {
         url={attrs.href}
         content={flattenDeep(children).join('')}
         firstMention={!encounteredText}
-        origattrs={attrs}
       />
     }
 
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index bdb29edf..c8bab869 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -36,6 +36,16 @@
             {{ $t('settings.collapse_subject') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="mentionsOldPlace">
+            {{ $t('settings.mentions_old_place') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="mentionsOldStyle">
+            {{ $t('settings.mentions_old_style') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting path="streaming">
             {{ $t('settings.streaming') }}
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 54b54a90..7d2ec514 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -105,6 +105,9 @@ const Status = {
     muteWords () {
       return this.mergedConfig.muteWords
     },
+    mentionsOldPlace () {
+      return this.mergedConfig.mentionsOldPlace
+    },
     showReasonMutedThread () {
       return (
         this.status.thread_muted ||
@@ -137,7 +140,7 @@ const Status = {
       return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
     },
     replyProfileLink () {
-      return this.$store.getters.findUser(this.status.in_reply_to_screen_name).statusnet_profile_url
+      return this.$store.getters.findUser(this.status.in_reply_to_user_id).statusnet_profile_url
     },
     retweet () { return !!this.statusoid.retweeted_status },
     retweeterUser () { return this.statusoid.user },
@@ -163,7 +166,8 @@ const Status = {
     },
     mentions () {
       return this.statusoid.attentions.filter(attn => {
-        return attn.screen_name !== this.replyToName
+        return attn.screen_name !== this.replyToName &&
+          attn.screen_name !== this.statusoid.user.screen_name
       })
     },
     hasMentions () {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 092d3834..d0fb150d 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -221,36 +221,6 @@
                 </button>
               </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"
@@ -320,6 +290,36 @@
                 </StatusPopover>
               </div>
             </div>
+
+            <div v-if="hasMentions && !mentionsOldPlace" 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>
 
           <StatusContent
diff --git a/src/i18n/en.json b/src/i18n/en.json
index cd366132..da2f6ddf 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -259,6 +259,8 @@
     "security": "Security",
     "setting_changed": "Setting is different from default",
     "enter_current_password_to_confirm": "Enter your current password to confirm your identity",
+    "mentions_old_style": "Old style mentions",
+    "mentions_old_place": "Leave mentions inside post",
     "mfa": {
       "otp": "OTP",
       "setup_otp": "Setup OTP",
diff --git a/src/modules/config.js b/src/modules/config.js
index 0f596750..6e21e38b 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -54,6 +54,8 @@ export const defaultState = {
   interfaceLanguage: browserLocale,
   hideScopeNotice: false,
   useStreamingApi: false,
+  mentionsOldPlace: false,
+  mentionsOldStyle: false,
   sidebarRight: undefined, // instance default
   scopeCopy: undefined, // instance default
   subjectLineBehavior: undefined, // instance default
-- 
cgit v1.2.3-70-g09d2


From 2f383c2c0197b94b30fdc4c5e0c742c7e104be20 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 8 Jun 2021 14:34:47 +0300
Subject: moved mentions into a separate component - MentionLine, added
 collapsing of mentions when there's too many of 'em

---
 src/components/mention_link/mention_link.scss   | 10 ++---
 src/components/mention_link/mention_link.vue    |  3 +-
 src/components/mentions_line/mentions_line.js   | 51 +++++++++++++++++++++++++
 src/components/mentions_line/mentions_line.scss | 15 ++++++++
 src/components/mentions_line/mentions_line.vue  | 42 ++++++++++++++++++++
 src/components/status/status.js                 | 10 +++--
 src/components/status/status.vue                | 10 ++---
 src/components/status_body/status_body.js       | 10 ++++-
 src/components/status_body/status_body.vue      | 25 ++++++++----
 src/i18n/en.json                                |  3 +-
 10 files changed, 151 insertions(+), 28 deletions(-)
 create mode 100644 src/components/mentions_line/mentions_line.js
 create mode 100644 src/components/mentions_line/mentions_line.scss
 create mode 100644 src/components/mentions_line/mentions_line.vue

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

diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index 5b5218f7..eed4d5be 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -40,6 +40,10 @@
   .new {
     margin-right: 0.25em;
 
+    &.-firstMention {
+      display: none;
+    }
+
     &.-you {
       & .shortName,
       & .full {
@@ -115,12 +119,6 @@
     }
   }
 
-  &:not(.-oldPlace) {
-    .new.-firstMention {
-      display: none;
-    }
-  }
-
   &:hover .new .full {
     opacity: 1;
     pointer-events: initial;
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 0dae1f53..d2f4129d 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -23,7 +23,8 @@
         @click.prevent="onClick"
       >
         <!-- eslint-disable vue/no-v-html -->
-        <span class="shortName"><span class="userName" v-html="userName" /></span><span class="you" v-if="isYou">{{ $t('status.you')}}</span>
+        <span class="shortName"><span class="userName" v-html="userName" /></span>
+        <span class="you" v-if="isYou">{{ $t('status.you') }}</span>
         <!-- eslint-enable vue/no-v-html -->
       </button>
       <span
diff --git a/src/components/mentions_line/mentions_line.js b/src/components/mentions_line/mentions_line.js
new file mode 100644
index 00000000..837935ec
--- /dev/null
+++ b/src/components/mentions_line/mentions_line.js
@@ -0,0 +1,51 @@
+import MentionLink from 'src/components/mention_link/mention_link.vue'
+import { mapGetters } from 'vuex'
+
+const MentionsLine = {
+  name: 'MentionsLine',
+  props: {
+    attentions: {
+      required: true,
+      type: Object
+    }
+  },
+  data: () => ({ expanded: false }),
+  components: {
+    MentionLink
+  },
+  computed: {
+    oldStyle () {
+      return this.mergedConfig.mentionsOldStyle
+    },
+    limit () {
+      return 1
+    },
+    mentions () {
+      return this.attentions.slice(0, this.limit)
+    },
+    extraMentions () {
+      return this.attentions.slice(this.limit)
+    },
+    manyMentions () {
+      return this.extraMentions.length > 0
+    },
+    buttonClasses () {
+      return [
+        this.oldStyle
+          ? 'button-unstyled'
+          : 'button-default -sublime',
+        this.oldStyle
+          ? '-oldStyle'
+          : '-newStyle'
+      ]
+    },
+    ...mapGetters(['mergedConfig']),
+  },
+  methods: {
+    toggleShowMore () {
+      this.expanded = !this.expanded
+    }
+  }
+}
+
+export default MentionsLine
diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss
new file mode 100644
index 00000000..735502de
--- /dev/null
+++ b/src/components/mentions_line/mentions_line.scss
@@ -0,0 +1,15 @@
+.MentionsLine {
+  .showMoreLess {
+    &.-newStyle {
+      line-height: 1.5;
+      font-size: inherit;
+      display: inline-block;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    &.-oldStyle {
+      color: var(--link);
+    }
+  }
+}
diff --git a/src/components/mentions_line/mentions_line.vue b/src/components/mentions_line/mentions_line.vue
new file mode 100644
index 00000000..6d114f2d
--- /dev/null
+++ b/src/components/mentions_line/mentions_line.vue
@@ -0,0 +1,42 @@
+<template>
+<span class="MentionsLine">
+  <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"
+  /><span v-if="manyMentions" class="extraMentions">
+    <span
+      v-if="expanded"
+      class="fullExtraMentions"
+    >
+      <MentionLink
+        v-for="mention in extraMentions"
+        class="mention-link"
+        :key="mention.statusnet_profile_url"
+        :content="mention.statusnet_profile_url"
+        :url="mention.statusnet_profile_url"
+        :first-mention="false"
+      />
+    </span><button
+      v-if="!expanded"
+      class="showMoreLess"
+      :class="buttonClasses"
+      @click="toggleShowMore"
+    >
+      {{ $t('status.plus_more', { number: extraMentions.length })}}
+    </button><button
+      v-if="expanded"
+      class="showMoreLess"
+      :class="buttonClasses"
+      @click="toggleShowMore"
+    >
+      {{ $t('general.show_less')}}
+    </button>
+  </span>
+</span>
+</template>
+<script src="./mentions_line.js" ></script>
+<style lang="scss" src="./mentions_line.scss" />
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 7d2ec514..d921f625 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 MentionsLine from 'src/components/mentions_line/mentions_line.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'
@@ -74,7 +75,8 @@ const Status = {
     EmojiReactions,
     StatusContent,
     RichContent,
-    MentionLink
+    MentionLink,
+    MentionsLine
   },
   props: [
     'statusoid',
@@ -105,9 +107,6 @@ const Status = {
     muteWords () {
       return this.mergedConfig.muteWords
     },
-    mentionsOldPlace () {
-      return this.mergedConfig.mentionsOldPlace
-    },
     showReasonMutedThread () {
       return (
         this.status.thread_muted ||
@@ -164,6 +163,9 @@ const Status = {
     muteWordHits () {
       return muteWordHits(this.status, this.muteWords)
     },
+    mentionsOldPlace () {
+      return this.mergedConfig.mentionsOldPlace
+    },
     mentions () {
       return this.statusoid.attentions.filter(attn => {
         return attn.screen_name !== this.replyToName &&
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index d0fb150d..faf67328 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -310,13 +310,9 @@
                     {{ $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"
+                <MentionsLine
+                  :attentions="mentions"
+                  class="mentions-line"
                 />
               </div>
             </div>
diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index 232afccb..0c1aa88e 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -1,5 +1,6 @@
 import fileType from 'src/services/file_type/file_type.service'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
+import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
 import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js'
 import { extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
 import { mapGetters } from 'vuex'
@@ -104,10 +105,17 @@ const StatusContent = {
     attachmentTypes () {
       return this.status.attachments.map(file => fileType.fileType(file.mimetype))
     },
+    mentionsOldPlace () {
+      return this.mergedConfig.mentionsOldPlace
+    },
+    mentions () {
+      return this.status.attentions
+    },
     ...mapGetters(['mergedConfig'])
   },
   components: {
-    RichContent
+    RichContent,
+    MentionsLine
   },
   mounted () {
     this.status.attentions && this.status.attentions.forEach(attn => {
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index 6f982f2e..92e47118 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -39,15 +39,24 @@
         >
           {{ $t("general.show_more") }}
         </button>
-        <RichContent
+        <span
           v-if="!hideSubjectStatus && !(singleLine && status.summary_html)"
-          :class="{ '-single-line': singleLine }"
-          class="text media-body"
-          :html="postBodyHtml"
-          :emoji="status.emojis"
-          :handle-links="true"
-          @click.prevent="linkClicked"
-        />
+        >
+          <MentionsLine
+            v-if="mentionsOldPlace"
+            :attentions="status.attentions"
+            class="mentions-line"
+            />
+          <RichContent
+            :class="{ '-single-line': singleLine }"
+            class="text media-body"
+            :html="postBodyHtml"
+            :emoji="status.emojis"
+            :handle-links="true"
+            @click.prevent="linkClicked"
+          />
+        </span>
+
         <button
           v-if="hideSubjectStatus"
           class="button-unstyled -link cw-status-hider"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index da2f6ddf..de1f23b4 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -715,7 +715,8 @@
     "status_deleted": "This post was deleted",
     "nsfw": "NSFW",
     "expand": "Expand",
-    "you": "(You)"
+    "you": "(You)",
+    "plus_more": "+{number} more"
   },
   "user_card": {
     "approve": "Approve",
-- 
cgit v1.2.3-70-g09d2


From 7ae85c8318add44af1c8f91c9738a2d715da2f3e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 8 Jun 2021 14:51:42 +0300
Subject: change defaults

---
 src/components/mention_link/mention_link.js        |  4 +-
 src/components/mention_link/mention_link.vue       | 23 +++++--
 src/components/mentions_line/mentions_line.js      |  4 +-
 src/components/mentions_line/mentions_line.vue     | 75 +++++++++++-----------
 src/components/settings_modal/tabs/general_tab.vue |  8 +--
 src/components/status/status.js                    |  4 +-
 src/components/status/status.vue                   |  5 +-
 src/components/status_body/status_body.js          |  4 +-
 src/components/status_body/status_body.vue         |  2 +-
 src/modules/config.js                              |  4 +-
 10 files changed, 74 insertions(+), 59 deletions(-)

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

diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index 8a93e8a3..8ad84a51 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -52,10 +52,10 @@ const MentionLink = {
       if (this.highlight) return highlightClass(this.user)
     },
     oldPlace () {
-      return this.mergedConfig.mentionsOldPlace
+      return !this.mergedConfig.mentionsOwnLine
     },
     oldStyle () {
-      return this.mergedConfig.mentionsOldStyle
+      return !this.mergedConfig.mentionsNewStyle
     },
     style () {
       if (this.highlight) {
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index d2f4129d..55f49507 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -1,8 +1,8 @@
 <template>
-<span
-  class="MentionLink"
-  :class="{ '-oldPlace': oldPlace }"
->
+  <span
+    class="MentionLink"
+    :class="{ '-oldPlace': oldPlace }"
+  >
     <!-- eslint-disable vue/no-v-html -->
     <a
       v-if="!user"
@@ -23,8 +23,14 @@
         @click.prevent="onClick"
       >
         <!-- eslint-disable vue/no-v-html -->
-        <span class="shortName"><span class="userName" v-html="userName" /></span>
-        <span class="you" v-if="isYou">{{ $t('status.you') }}</span>
+        <span class="shortName"><span
+          class="userName"
+          v-html="userName"
+        /></span>
+        <span
+          v-if="isYou"
+          class="you"
+        >{{ $t('status.you') }}</span>
         <!-- eslint-enable vue/no-v-html -->
       </button>
       <span
@@ -33,7 +39,10 @@
         :class="[highlightType]"
       >
         <!-- eslint-disable vue/no-v-html -->
-        <span class="userNameFull" v-html="userNameFull" />
+        <span
+          class="userNameFull"
+          v-html="userNameFull"
+        />
         <!-- eslint-enable vue/no-v-html -->
       </span>
     </span>
diff --git a/src/components/mentions_line/mentions_line.js b/src/components/mentions_line/mentions_line.js
index 2e84d4c5..6f347058 100644
--- a/src/components/mentions_line/mentions_line.js
+++ b/src/components/mentions_line/mentions_line.js
@@ -15,7 +15,7 @@ const MentionsLine = {
   },
   computed: {
     oldStyle () {
-      return this.mergedConfig.mentionsOldStyle
+      return !this.mergedConfig.mentionsNewStyle
     },
     limit () {
       return 6
@@ -39,7 +39,7 @@ const MentionsLine = {
           : '-newStyle'
       ]
     },
-    ...mapGetters(['mergedConfig']),
+    ...mapGetters(['mergedConfig'])
   },
   methods: {
     toggleShowMore () {
diff --git a/src/components/mentions_line/mentions_line.vue b/src/components/mentions_line/mentions_line.vue
index 6d114f2d..58f3de6f 100644
--- a/src/components/mentions_line/mentions_line.vue
+++ b/src/components/mentions_line/mentions_line.vue
@@ -1,42 +1,45 @@
 <template>
-<span class="MentionsLine">
-  <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"
-  /><span v-if="manyMentions" class="extraMentions">
-    <span
-      v-if="expanded"
-      class="fullExtraMentions"
+  <span class="MentionsLine">
+    <MentionLink
+      v-for="mention in mentions"
+      :key="mention.statusnet_profile_url"
+      class="mention-link"
+      :content="mention.statusnet_profile_url"
+      :url="mention.statusnet_profile_url"
+      :first-mention="false"
+    /><span
+      v-if="manyMentions"
+      class="extraMentions"
     >
-      <MentionLink
-        v-for="mention in extraMentions"
-        class="mention-link"
-        :key="mention.statusnet_profile_url"
-        :content="mention.statusnet_profile_url"
-        :url="mention.statusnet_profile_url"
-        :first-mention="false"
-      />
-    </span><button
-      v-if="!expanded"
-      class="showMoreLess"
-      :class="buttonClasses"
-      @click="toggleShowMore"
-    >
-      {{ $t('status.plus_more', { number: extraMentions.length })}}
-    </button><button
-      v-if="expanded"
-      class="showMoreLess"
-      :class="buttonClasses"
-      @click="toggleShowMore"
-    >
-      {{ $t('general.show_less')}}
-    </button>
+      <span
+        v-if="expanded"
+        class="fullExtraMentions"
+      >
+        <MentionLink
+          v-for="mention in extraMentions"
+          :key="mention.statusnet_profile_url"
+          class="mention-link"
+          :content="mention.statusnet_profile_url"
+          :url="mention.statusnet_profile_url"
+          :first-mention="false"
+        />
+      </span><button
+        v-if="!expanded"
+        class="showMoreLess"
+        :class="buttonClasses"
+        @click="toggleShowMore"
+      >
+        {{ $t('status.plus_more', { number: extraMentions.length }) }}
+      </button><button
+        v-if="expanded"
+        class="showMoreLess"
+        :class="buttonClasses"
+        @click="toggleShowMore"
+      >
+        {{ $t('general.show_less') }}
+      </button>
+    </span>
   </span>
-</span>
 </template>
 <script src="./mentions_line.js" ></script>
 <style lang="scss" src="./mentions_line.scss" />
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index c8bab869..e62df290 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -37,13 +37,13 @@
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="mentionsOldPlace">
-            {{ $t('settings.mentions_old_place') }}
+          <BooleanSetting path="mentionsOwnLine">
+            {{ $t('settings.mentions_new_place') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="mentionsOldStyle">
-            {{ $t('settings.mentions_old_style') }}
+          <BooleanSetting path="mentionsNewStyle">
+            {{ $t('settings.mentions_new_style') }}
           </BooleanSetting>
         </li>
         <li>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index d921f625..3954df00 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -163,8 +163,8 @@ const Status = {
     muteWordHits () {
       return muteWordHits(this.status, this.muteWords)
     },
-    mentionsOldPlace () {
-      return this.mergedConfig.mentionsOldPlace
+    mentionsOwnLine () {
+      return this.mergedConfig.mentionsOwnLine
     },
     mentions () {
       return this.statusoid.attentions.filter(attn => {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index faf67328..969e2bc8 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -291,7 +291,10 @@
               </div>
             </div>
 
-            <div v-if="hasMentions && !mentionsOldPlace" class="heading-mentions-row">
+            <div
+              v-if="hasMentions && mentionsOwnLine"
+              class="heading-mentions-row"
+            >
               <div
                 class="mentions"
               >
diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index 0c1aa88e..3c092ac7 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -105,8 +105,8 @@ const StatusContent = {
     attachmentTypes () {
       return this.status.attachments.map(file => fileType.fileType(file.mimetype))
     },
-    mentionsOldPlace () {
-      return this.mergedConfig.mentionsOldPlace
+    mentionsOwnLine () {
+      return this.mergedConfig.mentionsOwnLine
     },
     mentions () {
       return this.status.attentions
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index 92e47118..fadbeaf3 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -43,7 +43,7 @@
           v-if="!hideSubjectStatus && !(singleLine && status.summary_html)"
         >
           <MentionsLine
-            v-if="mentionsOldPlace"
+            v-if="!mentionsOwnLine"
             :attentions="status.attentions"
             class="mentions-line"
             />
diff --git a/src/modules/config.js b/src/modules/config.js
index 6e21e38b..ad9c8be5 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -54,8 +54,8 @@ export const defaultState = {
   interfaceLanguage: browserLocale,
   hideScopeNotice: false,
   useStreamingApi: false,
-  mentionsOldPlace: false,
-  mentionsOldStyle: false,
+  mentionsOwnLine: false,
+  mentionsNewStyle: false,
   sidebarRight: undefined, // instance default
   scopeCopy: undefined, // instance default
   subjectLineBehavior: undefined, // instance default
-- 
cgit v1.2.3-70-g09d2


From b87a9d6675cf7cd8d37d45e62013fab27cbc46e6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 8 Jun 2021 16:14:01 +0300
Subject: Rearranged settings, moved more stuff to filtering where apllicable.
 Changed how filering works.

---
 src/components/notification/notification.scss      |   6 +
 src/components/notification/notification.vue       |   1 +
 src/components/notifications/notifications.scss    |   5 -
 .../settings_modal/tabs/filtering_tab.vue          | 195 ++++++++++++++-------
 src/components/settings_modal/tabs/general_tab.vue | 154 ++++++----------
 src/components/status/status.js                    |  44 +++--
 src/components/timeline/timeline_quick_settings.js |   3 +-
 src/i18n/en.json                                   |  14 +-
 src/modules/config.js                              |   2 +
 src/modules/instance.js                            |   3 +
 10 files changed, 242 insertions(+), 185 deletions(-)

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

diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index f5905560..e075747b 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -2,6 +2,12 @@
 
 // TODO Copypaste from Status, should unify it somehow
 .Notification {
+  border-bottom: 1px solid;
+  border-color: $fallback--border;
+  border-color: var(--border, $fallback--border);
+  word-wrap: break-word;
+  word-break: break-word;
+
   &.-muted {
     padding: 0.25em 0.6em;
     height: 1.2em;
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 0081dee4..fb324cec 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -1,6 +1,7 @@
 <template>
   <Status
     v-if="notification.type === 'mention'"
+    class="Notification"
     :compact="true"
     :statusoid="notification.status"
   />
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 2bb627a8..b513d8b5 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -37,11 +37,6 @@
 
 .notification {
   box-sizing: border-box;
-  border-bottom: 1px solid;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-  word-wrap: break-word;
-  word-break: break-word;
 
   &:hover .animated.Avatar {
     canvas {
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 6fc9ceaa..5d3c614a 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -1,73 +1,138 @@
 <template>
   <div :label="$t('settings.filtering')">
     <div class="setting-item">
-      <div class="select-multiple">
-        <span class="label">{{ $t('settings.notification_visibility') }}</span>
-        <ul class="option-list">
-          <li>
-            <BooleanSetting path="notificationVisibility.likes">
-              {{ $t('settings.notification_visibility_likes') }}
-            </BooleanSetting>
-          </li>
-          <li>
-            <BooleanSetting path="notificationVisibility.repeats">
-              {{ $t('settings.notification_visibility_repeats') }}
-            </BooleanSetting>
-          </li>
-          <li>
-            <BooleanSetting path="notificationVisibility.follows">
-              {{ $t('settings.notification_visibility_follows') }}
-            </BooleanSetting>
-          </li>
-          <li>
-            <BooleanSetting path="notificationVisibility.mentions">
-              {{ $t('settings.notification_visibility_mentions') }}
-            </BooleanSetting>
-          </li>
-          <li>
-            <BooleanSetting path="notificationVisibility.moves">
-              {{ $t('settings.notification_visibility_moves') }}
-            </BooleanSetting>
-          </li>
-          <li>
-            <BooleanSetting path="notificationVisibility.emojiReactions">
-              {{ $t('settings.notification_visibility_emoji_reactions') }}
-            </BooleanSetting>
-          </li>
-        </ul>
-      </div>
-      <ChoiceSetting
-        id="replyVisibility"
-        path="replyVisibility"
-        :options="replyVisibilityOptions"
-      >
-        {{ $t('settings.replies_in_timeline') }}
-      </ChoiceSetting>
-      <div>
-        <BooleanSetting path="hidePostStats">
-          {{ $t('settings.hide_post_stats') }}
-        </BooleanSetting>
-      </div>
-      <div>
-        <BooleanSetting path="hideUserStats">
-          {{ $t('settings.hide_user_stats') }}
-        </BooleanSetting>
-      </div>
+      <h2>{{ $t('settings.posts') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path="hideFilteredStatuses">
+            {{ $t('settings.hide_filtered_statuses') }}
+          </BooleanSetting>
+          <ul
+            class="setting-list suboptions"
+            :class="[{disabled: !streaming}]"
+          >
+            <li>
+              <BooleanSetting
+                :disabled="hideFilteredStatuses"
+                path="hideWordFilteredPosts"
+              >
+                {{ $t('settings.hide_wordfiltered_statuses') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting
+                :disabled="hideFilteredStatuses"
+                path="hideMutedThreads"
+              >
+                {{ $t('settings.hide_muted_threads') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting
+                :disabled="hideFilteredStatuses"
+                path="hideMutedPosts"
+                >
+                {{ $t('settings.hide_muted_posts') }}
+              </BooleanSetting>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <BooleanSetting path="hidePostStats">
+            {{ $t('settings.hide_post_stats') }}
+          </BooleanSetting>
+        </li>
+        <ChoiceSetting
+          id="replyVisibility"
+          path="replyVisibility"
+          :options="replyVisibilityOptions"
+        >
+          {{ $t('settings.replies_in_timeline') }}
+        </ChoiceSetting>
+        <li>
+          <h3>{{ $t('settings.wordfilter') }}</h3>
+          <textarea
+            id="muteWords"
+            v-model="muteWordsString"
+            class="resize-height"
+          />
+          <div>{{ $t('settings.filtering_explanation') }}</div>
+        </li>
+        <h3>{{ $t('settings.attachments') }}</h3>
+        <li>
+          <label for="maxThumbnails">
+            {{ $t('settings.max_thumbnails') }}
+          </label>
+          <input
+            id="maxThumbnails"
+            path.number="maxThumbnails"
+            class="number-input"
+            type="number"
+            min="0"
+            step="1"
+          >
+        </li>
+        <li>
+          <BooleanSetting path="hideAttachments">
+            {{ $t('settings.hide_attachments_in_tl') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="hideAttachmentsInConv">
+            {{ $t('settings.hide_attachments_in_convo') }}
+          </BooleanSetting>
+        </li>
+      </ul>
     </div>
     <div class="setting-item">
-      <div>
-        <p>{{ $t('settings.filtering_explanation') }}</p>
-        <textarea
-          id="muteWords"
-          v-model="muteWordsString"
-          class="resize-height"
-        />
-      </div>
-      <div>
-        <BooleanSetting path="hideFilteredStatuses">
-          {{ $t('settings.hide_filtered_statuses') }}
-        </BooleanSetting>
-      </div>
+      <h2>{{ $t('settings.user_profiles') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path="hideUserStats">
+            {{ $t('settings.hide_user_stats') }}
+          </BooleanSetting>
+        </li>
+      </ul>
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.notifications') }}</h2>
+      <ul class="setting-list">
+        <li class="select-multiple">
+          <span class="label">{{ $t('settings.notification_visibility') }}</span>
+          <ul class="option-list">
+            <li>
+              <BooleanSetting path="notificationVisibility.likes">
+                {{ $t('settings.notification_visibility_likes') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="notificationVisibility.repeats">
+                {{ $t('settings.notification_visibility_repeats') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="notificationVisibility.follows">
+                {{ $t('settings.notification_visibility_follows') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="notificationVisibility.mentions">
+                {{ $t('settings.notification_visibility_mentions') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="notificationVisibility.moves">
+                {{ $t('settings.notification_visibility_moves') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="notificationVisibility.emojiReactions">
+                {{ $t('settings.notification_visibility_emoji_reactions') }}
+              </BooleanSetting>
+            </li>
+          </ul>
+        </li>
+      </ul>
     </div>
   </div>
 </template>
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index bdb29edf..5243d336 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -21,19 +21,9 @@
             {{ $t('settings.hide_wallpaper') }}
           </BooleanSetting>
         </li>
-      </ul>
-    </div>
-    <div class="setting-item">
-      <h2>{{ $t('nav.timeline') }}</h2>
-      <ul class="setting-list">
         <li>
-          <BooleanSetting path="hideMutedPosts">
-            {{ $t('settings.hide_muted_posts') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="collapseMessageWithSubject">
-            {{ $t('settings.collapse_subject') }}
+          <BooleanSetting path="stopGifs">
+            {{ $t('settings.stop_gifs') }}
           </BooleanSetting>
         </li>
         <li>
@@ -63,98 +53,36 @@
             </small>
           </BooleanSetting>
         </li>
-        <li>
-          <BooleanSetting path="emojiReactionsOnTimeline">
-            {{ $t('settings.emoji_reactions_on_timeline') }}
-          </BooleanSetting>
-        </li>
         <li>
           <BooleanSetting path="virtualScrolling">
             {{ $t('settings.virtual_scrolling') }}
           </BooleanSetting>
         </li>
-      </ul>
-    </div>
-
-    <div class="setting-item">
-      <h2>{{ $t('settings.composing') }}</h2>
-      <ul class="setting-list">
-        <li>
-          <BooleanSetting path="scopeCopy">
-            {{ $t('settings.scope_copy') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="alwaysShowSubjectInput">
-            {{ $t('settings.subject_input_always_show') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <ChoiceSetting
-            id="subjectLineBehavior"
-            path="subjectLineBehavior"
-            :options="subjectLineOptions"
-          >
-            {{ $t('settings.subject_line_behavior') }}
-          </ChoiceSetting>
-        </li>
-        <li v-if="postFormats.length > 0">
-          <ChoiceSetting
-            id="postContentType"
-            path="postContentType"
-            :options="postContentOptions"
-          >
-            {{ $t('settings.post_status_content_type') }}
-          </ChoiceSetting>
-        </li>
-        <li>
-          <BooleanSetting path="minimalScopesMode">
-            {{ $t('settings.minimal_scopes_mode') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="sensitiveByDefault">
-            {{ $t('settings.sensitive_by_default') }}
-          </BooleanSetting>
-        </li>
         <li>
           <BooleanSetting path="autohideFloatingPostButton">
             {{ $t('settings.autohide_floating_post_button') }}
           </BooleanSetting>
         </li>
-        <li>
-          <BooleanSetting path="padEmoji">
-            {{ $t('settings.pad_emoji') }}
-          </BooleanSetting>
-        </li>
       </ul>
     </div>
-
     <div class="setting-item">
-      <h2>{{ $t('settings.attachments') }}</h2>
+      <h2>{{ $t('settings.post_look_feel') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path="hideAttachments">
-            {{ $t('settings.hide_attachments_in_tl') }}
+          <BooleanSetting path="collapseMessageWithSubject">
+            {{ $t('settings.collapse_subject') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="hideAttachmentsInConv">
-            {{ $t('settings.hide_attachments_in_convo') }}
+          <BooleanSetting path="emojiReactionsOnTimeline">
+            {{ $t('settings.emoji_reactions_on_timeline') }}
           </BooleanSetting>
         </li>
+        <h3>{{ $t('settings.attachments') }}</h3>
         <li>
-          <label for="maxThumbnails">
-            {{ $t('settings.max_thumbnails') }}
-          </label>
-          <input
-            id="maxThumbnails"
-            path.number="maxThumbnails"
-            class="number-input"
-            type="number"
-            min="0"
-            step="1"
-          >
+          <BooleanSetting path="useContainFit">
+            {{ $t('settings.use_contain_fit') }}
+          </BooleanSetting>
         </li>
         <li>
           <BooleanSetting path="hideNsfw">
@@ -179,11 +107,6 @@
             </BooleanSetting>
           </li>
         </ul>
-        <li>
-          <BooleanSetting path="stopGifs">
-            {{ $t('settings.stop_gifs') }}
-          </BooleanSetting>
-        </li>
         <li>
           <BooleanSetting path="loopVideo">
             {{ $t('settings.loop_video') }}
@@ -213,31 +136,70 @@
             {{ $t('settings.play_videos_in_modal') }}
           </BooleanSetting>
         </li>
+        <h3>{{ $t('settings.fun') }}</h3>
         <li>
-          <BooleanSetting path="useContainFit">
-            {{ $t('settings.use_contain_fit') }}
+          <BooleanSetting path="greentext">
+            {{ $t('settings.greentext') }}
           </BooleanSetting>
         </li>
       </ul>
     </div>
 
     <div class="setting-item">
-      <h2>{{ $t('settings.notifications') }}</h2>
+      <h2>{{ $t('settings.composing') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path="webPushNotifications">
-            {{ $t('settings.enable_web_push_notifications') }}
+          <BooleanSetting path="scopeCopy">
+            {{ $t('settings.scope_copy') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="alwaysShowSubjectInput">
+            {{ $t('settings.subject_input_always_show') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <ChoiceSetting
+            id="subjectLineBehavior"
+            path="subjectLineBehavior"
+            :options="subjectLineOptions"
+          >
+            {{ $t('settings.subject_line_behavior') }}
+          </ChoiceSetting>
+        </li>
+        <li v-if="postFormats.length > 0">
+          <ChoiceSetting
+            id="postContentType"
+            path="postContentType"
+            :options="postContentOptions"
+          >
+            {{ $t('settings.post_status_content_type') }}
+          </ChoiceSetting>
+        </li>
+        <li>
+          <BooleanSetting path="minimalScopesMode">
+            {{ $t('settings.minimal_scopes_mode') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="sensitiveByDefault">
+            {{ $t('settings.sensitive_by_default') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="padEmoji">
+            {{ $t('settings.pad_emoji') }}
           </BooleanSetting>
         </li>
       </ul>
     </div>
 
     <div class="setting-item">
-      <h2>{{ $t('settings.fun') }}</h2>
+      <h2>{{ $t('settings.notifications') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path="greentext">
-            {{ $t('settings.greentext') }}
+          <BooleanSetting path="webPushNotifications">
+            {{ $t('settings.enable_web_push_notifications') }}
           </BooleanSetting>
         </li>
       </ul>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 470c01f1..5c7caa28 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -157,26 +157,32 @@ const Status = {
       return muteWordHits(this.status, this.muteWords)
     },
     muted () {
+      if (this.statusoid.user.id === this.currentUser.id) return false
+      const reasonsToMute = this.userIsMuted ||
+        // Thread is muted
+        status.thread_muted ||
+        // Wordfiltered
+        this.muteWordHits.length > 0
+      return !this.unmuted && !this.shouldNotMute && reasonsToMute
+    },
+    userIsMuted () {
       if (this.statusoid.user.id === this.currentUser.id) return false
       const { status } = this
       const { reblog } = status
       const relationship = this.$store.getters.relationship(status.user.id)
       const relationshipReblog = reblog && this.$store.getters.relationship(reblog.user.id)
-      const reasonsToMute = (
-        // Post is muted according to BE
-        status.muted ||
+      return status.muted ||
         // Reprööt of a muted post according to BE
         (reblog && reblog.muted) ||
         // Muted user
         relationship.muting ||
         // Muted user of a reprööt
-        (relationshipReblog && relationshipReblog.muting) ||
-        // Thread is muted
-        status.thread_muted ||
-        // Wordfiltered
-        this.muteWordHits.length > 0
-      )
-      const excusesNotToMute = (
+        (relationshipReblog && relationshipReblog.muting)
+    },
+    shouldNotMute () {
+      const { status } = this
+      const { reblog } = status
+      return (
         (
           this.inProfile && (
             // Don't mute user's posts on user timeline (except reblogs)
@@ -189,14 +195,26 @@ const Status = {
         (this.inConversation && status.thread_muted)
         // No excuses if post has muted words
       ) && !this.muteWordHits.length > 0
-
-      return !this.unmuted && !excusesNotToMute && reasonsToMute
+    },
+    hideMutedUsers () {
+      return this.mergedConfig.hideMutedPosts
+    },
+    hideMutedThreads () {
+      return this.mergedConfig.hideMutedThreads
     },
     hideFilteredStatuses () {
       return this.mergedConfig.hideFilteredStatuses
     },
+    hideWordFilteredPosts () {
+      return this.mergedConfig.hideWordFilteredPosts
+    },
     hideStatus () {
-      return (this.muted && this.hideFilteredStatuses) || this.virtualHidden
+      return (this.virtualHidden || !this.shouldNotMute) && (
+        (this.muted && this.hideFilteredStatuses) ||
+        (this.userIsMuted && this.hideMutedUsers) ||
+        (this.status.thread_muted && this.hideMutedThreads) ||
+        (this.muteWordHits.length > 0 && this.hideWordFilteredPosts)
+      )
     },
     isFocused () {
       // retweet or root of an expanded conversation
diff --git a/src/components/timeline/timeline_quick_settings.js b/src/components/timeline/timeline_quick_settings.js
index eae65a55..7b4931ce 100644
--- a/src/components/timeline/timeline_quick_settings.js
+++ b/src/components/timeline/timeline_quick_settings.js
@@ -48,10 +48,9 @@ const TimelineQuickSettings = {
       }
     },
     hideMutedPosts: {
-      get () { return this.mergedConfig.hideMutedPosts || this.mergedConfig.hideFilteredStatuses },
+      get () { return this.mergedConfig.hideFilteredStatuses },
       set () {
         const value = !this.hideMutedPosts
-        this.$store.dispatch('setOption', { name: 'hideMutedPosts', value })
         this.$store.dispatch('setOption', { name: 'hideFilteredStatuses', value })
       }
     }
diff --git a/src/i18n/en.json b/src/i18n/en.json
index aa440ac1..89e808aa 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -259,6 +259,7 @@
     "security": "Security",
     "setting_changed": "Setting is different from default",
     "enter_current_password_to_confirm": "Enter your current password to confirm your identity",
+    "post_look_feel": "Posts Look & Feel",
     "mfa": {
       "otp": "OTP",
       "setup_otp": "Setup OTP",
@@ -331,6 +332,7 @@
     "emoji_reactions_on_timeline": "Show emoji reactions on timeline",
     "export_theme": "Save preset",
     "filtering": "Filtering",
+    "wordfilter": "Wordfilter",
     "filtering_explanation": "All statuses containing these words will be muted, one per line",
     "word_filter": "Word filter",
     "follow_export": "Follow export",
@@ -346,7 +348,7 @@
     "hide_media_previews": "Hide media previews",
     "hide_muted_posts": "Hide posts of muted users",
     "hide_all_muted_posts": "Hide muted posts",
-    "max_thumbnails": "Maximum amount of thumbnails per post",
+    "max_thumbnails": "Maximum amount of thumbnails per post (empty = no limit)",
     "hide_isp": "Hide instance-specific panel",
     "right_sidebar": "Show sidebar on the right side",
     "hide_wallpaper": "Hide instance wallpaper",
@@ -354,7 +356,9 @@
     "use_one_click_nsfw": "Open NSFW attachments with just one click",
     "hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
     "hide_user_stats": "Hide user statistics (e.g. the number of followers)",
-    "hide_filtered_statuses": "Hide filtered statuses",
+    "hide_filtered_statuses": "Hide all filtered posts",
+    "hide_wordfiltered_statuses": "Hide word-filtered statuses",
+    "hide_muted_threads": "Hide muted threads",
     "import_blocks_from_a_csv_file": "Import blocks from a csv file",
     "import_followers_from_a_csv_file": "Import follows from a csv file",
     "import_theme": "Load preset",
@@ -395,6 +399,8 @@
     "name_bio": "Name & bio",
     "new_email": "New email",
     "new_password": "New password",
+    "posts": "Posts",
+    "user_profiles": "User Profiles",
     "notification_visibility": "Types of notifications to show",
     "notification_visibility_follows": "Follows",
     "notification_visibility_likes": "Favorites",
@@ -411,7 +417,7 @@
     "hide_followers_count_description": "Don't show follower count",
     "show_admin_badge": "Show \"Admin\" badge in my profile",
     "show_moderator_badge": "Show \"Moderator\" badge in my profile",
-    "nsfw_clickthrough": "Enable clickthrough attachment and link preview image hiding for NSFW statuses",
+    "nsfw_clickthrough": "Censor NSFW content",
     "oauth_tokens": "OAuth tokens",
     "token": "Token",
     "refresh_token": "Refresh token",
@@ -455,7 +461,7 @@
     "subject_line_noop": "Do not copy",
     "post_status_content_type": "Post status content type",
     "sensitive_by_default": "Mark posts as sensitive by default",
-    "stop_gifs": "Play-on-hover GIFs",
+    "stop_gifs": "Pause animated images until you hover on them",
     "streaming": "Enable automatic streaming of new posts when scrolled to the top",
     "user_mutes": "Users",
     "useStreamingApi": "Receive posts and notifications real-time",
diff --git a/src/modules/config.js b/src/modules/config.js
index 0f596750..df66bfe6 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -23,6 +23,8 @@ export const defaultState = {
   hideInstanceWallpaper: false,
   // bad name: actually hides posts of muted USERS
   hideMutedPosts: undefined, // instance default
+  hideMutedThreads: undefined, // instance default
+  hideWordFilteredPosts: undefined, // instance default
   collapseMessageWithSubject: undefined, // instance default
   padEmoji: true,
   hideAttachments: false,
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 539b9c66..60038f08 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -21,7 +21,10 @@ const defaultState = {
   collapseMessageWithSubject: false,
   greentext: false,
   hideFilteredStatuses: false,
+  // bad name: actually hides posts of muted USERS
   hideMutedPosts: false,
+  hideMutedThreads: true,
+  hideWordFilteredPosts: false,
   hidePostStats: false,
   hideSitename: false,
   hideUserStats: false,
-- 
cgit v1.2.3-70-g09d2


From 963f1679e0b24b36c77f15bb7c8e832583f93d79 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 8 Jun 2021 17:04:57 +0300
Subject: fix console errors

---
 src/components/mention_link/mention_link.js   | 26 ++++++++++++++++++--------
 src/components/mentions_line/mentions_line.js |  2 +-
 src/components/status/status.js               |  5 ++++-
 src/components/status/status.vue              |  2 ++
 4 files changed, 25 insertions(+), 10 deletions(-)

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

diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index 8ad84a51..acd0f584 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -6,13 +6,20 @@ const MentionLink = {
   name: 'MentionLink',
   props: {
     url: {
-      required: true,
       type: String
     },
     content: {
       required: true,
       type: String
     },
+    userId: {
+      required: false,
+      type: String
+    },
+    userScreenName: {
+      required: false,
+      type: String
+    },
     firstMention: {
       required: false,
       type: Boolean,
@@ -21,29 +28,32 @@ const MentionLink = {
   },
   methods: {
     onClick () {
-      const link = generateProfileLink(this.user.id, this.user.screen_name)
+      const link = generateProfileLink(
+        this.userId || this.user.id,
+        this.userScreenName || this.user.screen_name
+      )
       this.$router.push(link)
     }
   },
   computed: {
     user () {
-      return this.$store.getters.findUserByUrl(this.url)
+      return this.url && this.$store.getters.findUserByUrl(this.url)
     },
     isYou () {
       // FIXME why user !== currentUser???
-      return this.user.screen_name === this.currentUser.screen_name
+      return this.user && this.user.screen_name === this.currentUser.screen_name
     },
     userName () {
-      return this.userNameFullUi.split('@')[0]
+      return this.user && this.userNameFullUi.split('@')[0]
     },
     userNameFull () {
-      return this.user.screen_name
+      return this.user && this.user.screen_name
     },
     userNameFullUi () {
-      return this.user.screen_name_ui
+      return this.user && this.user.screen_name_ui
     },
     highlight () {
-      return this.mergedConfig.highlight[this.user.screen_name]
+      return this.user && this.mergedConfig.highlight[this.user.screen_name]
     },
     highlightType () {
       return this.highlight && ('-' + this.highlight.type)
diff --git a/src/components/mentions_line/mentions_line.js b/src/components/mentions_line/mentions_line.js
index 6f347058..4b20d861 100644
--- a/src/components/mentions_line/mentions_line.js
+++ b/src/components/mentions_line/mentions_line.js
@@ -6,7 +6,7 @@ const MentionsLine = {
   props: {
     attentions: {
       required: true,
-      type: Object
+      type: Array
     }
   },
   data: () => ({ expanded: false }),
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 3954df00..eb0af098 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -139,7 +139,10 @@ const Status = {
       return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
     },
     replyProfileLink () {
-      return this.$store.getters.findUser(this.status.in_reply_to_user_id).statusnet_profile_url
+      if (this.isReply) {
+        const user = this.$store.getters.findUser(this.status.in_reply_to_user_id)
+        return user && user.statusnet_profile_url
+      }
     },
     retweet () { return !!this.statusoid.retweeted_status },
     retweeterUser () { return this.statusoid.user },
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 969e2bc8..d62c6817 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -262,6 +262,8 @@
                   class="mention-link"
                   :content="replyToName"
                   :url="replyProfileLink"
+                  :userId="status.in_reply_to_user_id"
+                  :userScreenName="status.in_reply_to_screen_name"
                   :first-mention="false"
                 />
                 <span
-- 
cgit v1.2.3-70-g09d2


From 8c8237418cf36e97c76dfe339ab49df4a12be7a4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 8 Jun 2021 17:05:20 +0300
Subject: fix repeats having wrong mentions

---
 src/components/status/status.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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

diff --git a/src/components/status/status.js b/src/components/status/status.js
index eb0af098..9b1c1b9c 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -170,9 +170,9 @@ const Status = {
       return this.mergedConfig.mentionsOwnLine
     },
     mentions () {
-      return this.statusoid.attentions.filter(attn => {
+      return this.status.attentions.filter(attn => {
         return attn.screen_name !== this.replyToName &&
-          attn.screen_name !== this.statusoid.user.screen_name
+          attn.screen_name !== this.status.user.screen_name
       })
     },
     hasMentions () {
-- 
cgit v1.2.3-70-g09d2


From 5c655b6675718e1617a2bf94c4ec75167f0a0e23 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 8 Jun 2021 17:19:38 +0300
Subject: lint

---
 src/components/status/status.js            | 2 +-
 src/components/status/status.vue           | 4 ++--
 src/components/status_body/status_body.vue | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

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

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 9b1c1b9c..54472525 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -36,7 +36,7 @@ import {
   faEyeSlash,
   faEye,
   faThumbtack,
-  faAt,
+  faAt
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index d62c6817..f27fbaa5 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -262,8 +262,8 @@
                   class="mention-link"
                   :content="replyToName"
                   :url="replyProfileLink"
-                  :userId="status.in_reply_to_user_id"
-                  :userScreenName="status.in_reply_to_screen_name"
+                  :user-id="status.in_reply_to_user_id"
+                  :user-screen-name="status.in_reply_to_screen_name"
                   :first-mention="false"
                 />
                 <span
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index fadbeaf3..421a3820 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -46,7 +46,7 @@
             v-if="!mentionsOwnLine"
             :attentions="status.attentions"
             class="mentions-line"
-            />
+          />
           <RichContent
             :class="{ '-single-line': singleLine }"
             class="text media-body"
-- 
cgit v1.2.3-70-g09d2


From aec867b30036fd039113e4197ca98566447efec6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 10 Jun 2021 12:08:31 +0300
Subject: Moved greentext to RichContent, improved how first mentions are
 restored, now shows mentions not uh, mention in post body

---
 src/components/mention_link/mention_link.js    |   1 +
 src/components/mentions_line/mentions_line.js  |   8 +-
 src/components/mentions_line/mentions_line.vue |  14 ++--
 src/components/rich_content/rich_content.jsx   | 112 ++++++++++++++++++++++++-
 src/components/status/status.js                |  25 +++++-
 src/components/status/status.vue               |   4 +-
 src/components/status_body/status_body.js      |  60 +++----------
 src/components/status_body/status_body.vue     |  20 +++--
 8 files changed, 166 insertions(+), 78 deletions(-)

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

diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index acd0f584..559250c5 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -6,6 +6,7 @@ const MentionLink = {
   name: 'MentionLink',
   props: {
     url: {
+      required: true,
       type: String
     },
     content: {
diff --git a/src/components/mentions_line/mentions_line.js b/src/components/mentions_line/mentions_line.js
index 4b20d861..e52045ec 100644
--- a/src/components/mentions_line/mentions_line.js
+++ b/src/components/mentions_line/mentions_line.js
@@ -4,7 +4,7 @@ import { mapGetters } from 'vuex'
 const MentionsLine = {
   name: 'MentionsLine',
   props: {
-    attentions: {
+    mentions: {
       required: true,
       type: Array
     }
@@ -20,11 +20,11 @@ const MentionsLine = {
     limit () {
       return 6
     },
-    mentions () {
-      return this.attentions.slice(0, this.limit)
+    mentionsComputed () {
+      return this.mentions.slice(0, this.limit)
     },
     extraMentions () {
-      return this.attentions.slice(this.limit)
+      return this.mentions.slice(this.limit)
     },
     manyMentions () {
       return this.extraMentions.length > 0
diff --git a/src/components/mentions_line/mentions_line.vue b/src/components/mentions_line/mentions_line.vue
index 58f3de6f..f4b3abb9 100644
--- a/src/components/mentions_line/mentions_line.vue
+++ b/src/components/mentions_line/mentions_line.vue
@@ -1,11 +1,11 @@
 <template>
   <span class="MentionsLine">
     <MentionLink
-      v-for="mention in mentions"
-      :key="mention.statusnet_profile_url"
+      v-for="mention in mentionsComputed"
+      :key="mention.index"
       class="mention-link"
-      :content="mention.statusnet_profile_url"
-      :url="mention.statusnet_profile_url"
+      :content="mention.content"
+      :url="mention.url"
       :first-mention="false"
     /><span
       v-if="manyMentions"
@@ -17,10 +17,10 @@
       >
         <MentionLink
           v-for="mention in extraMentions"
-          :key="mention.statusnet_profile_url"
+          :key="mention.index"
           class="mention-link"
-          :content="mention.statusnet_profile_url"
-          :url="mention.statusnet_profile_url"
+          :content="mention.content"
+          :url="mention.url"
           :first-mention="false"
         />
       </span><button
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index bb7ae739..db24ca0e 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import { unescape, flattenDeep } from 'lodash'
 import { convertHtml, getTagName, processTextForEmoji, getAttrs } from 'src/services/mini_html_converter/mini_html_converter.service.js'
+import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js'
 import StillImage from 'src/components/still-image/still-image.vue'
 import MentionLink from 'src/components/mention_link/mention_link.vue'
 
@@ -24,15 +25,25 @@ export default Vue.component('RichContent', {
       required: false,
       type: Boolean,
       default: false
+    },
+    // Meme arrows
+    greentext: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   render (h) {
+    // Pre-process HTML
+    const html = this.greentext ? addGreentext(this.html) : this.html
+
     const renderImage = (tag) => {
       return <StillImage
         {...{ attrs: getAttrs(tag) }}
         class="img"
       />
     }
+
     const renderMention = (attrs, children, encounteredText) => {
       return <MentionLink
         url={attrs.href}
@@ -41,10 +52,12 @@ export default Vue.component('RichContent', {
       />
     }
 
+    // We stop treating mentions as "first" ones when we encounter
+    // non-whitespace text
     let encounteredText = false
     // Processor to use with mini_html_converter
     const processItem = (item) => {
-      // Handle text noes - just add emoji
+      // Handle text nodes - just add emoji
       if (typeof item === 'string') {
         const emptyText = item.trim() === ''
         if (emptyText) {
@@ -72,6 +85,7 @@ export default Vue.component('RichContent', {
           return unescapedItem
         }
       }
+
       // Handle tag nodes
       if (Array.isArray(item)) {
         const [opener, children] = item
@@ -84,8 +98,14 @@ export default Vue.component('RichContent', {
             const attrs = getAttrs(opener)
             if (attrs['class'] && attrs['class'].includes('mention')) {
               return renderMention(attrs, children, encounteredText)
+            } else {
+              attrs.target = '_blank'
+              return <a {...{ attrs }}>
+                { children.map(processItem) }
+              </a>
             }
         }
+
         // Render tag as is
         if (children !== undefined) {
           return <Tag {...{ attrs: getAttrs(opener) }}>
@@ -97,7 +117,95 @@ export default Vue.component('RichContent', {
       }
     }
     return <span class="RichContent">
-      { convertHtml(this.html).map(processItem) }
+      { this.$slots.prefix }
+      { convertHtml(html).map(processItem) }
+      { this.$slots.suffix }
     </span>
   }
 })
+
+export const addGreentext = (html) => {
+  try {
+    if (html.includes('&gt;')) {
+      // This checks if post has '>' at the beginning, excluding mentions so that @mention >impying works
+      return processHtml(html, (string) => {
+        if (
+          string.includes('&gt;') && string
+            .replace(/<[^>]+?>/gi, '') // remove all tags
+            .replace(/@\w+/gi, '') // remove mentions (even failed ones)
+            .trim()
+            .startsWith('&gt;')
+        ) {
+          return `<span class='greentext'>${string}</span>`
+        } else {
+          return string
+        }
+      })
+    } else {
+      return html
+    }
+  } catch (e) {
+    console.error('Failed to process status html', e)
+    return html
+  }
+}
+
+export const getHeadTailLinks = (html) => {
+  // Exported object properties
+  const firstMentions = [] // Mentions that appear in the beginning of post body
+  const lastTags = [] // Tags that appear at the end of post body
+  const writtenMentions = [] // All mentions that appear in post body
+  const writtenTags = [] // All tags that appear in post body
+
+  let encounteredText = false
+  let processingFirstMentions = true
+  let index = 0 // unique index for vue "tag" property
+
+  const getLinkData = (attrs, children, index) => {
+    return {
+      index,
+      url: attrs.href,
+      hashtag: attrs['data-tag'],
+      content: flattenDeep(children).join('')
+    }
+  }
+
+  // Processor to use with mini_html_converter
+  const processItem = (item) => {
+    // Handle text nodes - stop treating mentions as "first" when text encountered
+    if (typeof item === 'string') {
+      const emptyText = item.trim() === ''
+      if (emptyText) return
+      if (!encounteredText) {
+        encounteredText = true
+        processingFirstMentions = false
+      }
+      // Encountered text? That means tags we've been collectings aren't "last"!
+      lastTags.splice(0)
+      return
+    }
+    // Handle tag nodes
+    if (Array.isArray(item)) {
+      const [opener, children] = item
+      const Tag = getTagName(opener)
+      if (Tag !== 'a') return children && children.forEach(processItem)
+      const attrs = getAttrs(opener)
+      if (attrs['class']) {
+        const linkData = getLinkData(attrs, children, index++)
+        if (attrs['class'].includes('mention')) {
+          if (processingFirstMentions) {
+            firstMentions.push(linkData)
+          }
+          writtenMentions.push(linkData)
+        } else if (attrs['class'].includes('hashtag')) {
+          lastTags.push(linkData)
+          writtenTags.push(linkData)
+        }
+        return // Stop processing, we don't care about link's contents
+      }
+      children && children.forEach(processItem)
+    }
+  }
+  convertHtml(html).forEach(processItem)
+  return { firstMentions, writtenMentions, writtenTags, lastTags }
+}
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 54472525..0498f28a 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -19,6 +19,7 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import { muteWordHits } from '../../services/status_parser/status_parser.js'
 import { unescape, uniqBy } from 'lodash'
+import { getHeadTailLinks } from 'src/components/rich_content/rich_content.jsx'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -166,17 +167,33 @@ const Status = {
     muteWordHits () {
       return muteWordHits(this.status, this.muteWords)
     },
-    mentionsOwnLine () {
-      return this.mergedConfig.mentionsOwnLine
+    headTailLinks () {
+      return getHeadTailLinks(this.status.raw_html)
     },
     mentions () {
       return this.status.attentions.filter(attn => {
         return attn.screen_name !== this.replyToName &&
           attn.screen_name !== this.status.user.screen_name
+      }).map(attn => ({
+        url: attn.statusnet_profile_url,
+        content: attn.screen_name,
+        userId: attn.id
+      }))
+    },
+    alsoMentions () {
+      const set = new Set(this.headTailLinks.writtenMentions.map(m => m.url))
+      return this.headTailLinks.writtenMentions.filter(mention => {
+        return !set.has(mention.url)
       })
     },
-    hasMentions () {
-      return this.mentions.length > 0
+    mentionsLine () {
+      return this.mentionsOwnLine ? this.mentions : this.alsoMentions
+    },
+    mentionsOwnLine () {
+      return this.mergedConfig.mentionsOwnLine
+    },
+    hasMentionsLine () {
+      return this.mentionsLine.length > 0
     },
     muted () {
       if (this.statusoid.user.id === this.currentUser.id) return false
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index f27fbaa5..05d22232 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -294,7 +294,7 @@
             </div>
 
             <div
-              v-if="hasMentions && mentionsOwnLine"
+              v-if="hasMentionsLine"
               class="heading-mentions-row"
             >
               <div
@@ -316,7 +316,7 @@
                   </span>
                 </span>
                 <MentionsLine
-                  :attentions="mentions"
+                  :mentions="mentionsLine"
                   class="mentions-line"
                 />
               </div>
diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index 3c092ac7..dbabd208 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -1,8 +1,6 @@
 import fileType from 'src/services/file_type/file_type.service'
-import RichContent from 'src/components/rich_content/rich_content.jsx'
+import RichContent, { getHeadTailLinks } from 'src/components/rich_content/rich_content.jsx'
 import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
-import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js'
-import { extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -28,7 +26,10 @@ const StatusContent = {
     'focused',
     'noHeading',
     'fullContent',
-    'singleLine'
+    'singleLine',
+    // if this was computed at upper level it can be passed here, otherwise
+    // it will be in this component
+    'headTailLinks'
   ],
   data () {
     return {
@@ -72,44 +73,18 @@ const StatusContent = {
     showingMore () {
       return (this.mightHideBecauseTall && this.showingTall) || (this.mightHideBecauseSubject && this.expandingSubject)
     },
-    postBodyHtml () {
-      const html = this.status.raw_html
-
-      if (this.mergedConfig.greentext) {
-        try {
-          if (html.includes('&gt;')) {
-            // This checks if post has '>' at the beginning, excluding mentions so that @mention >impying works
-            return processHtml(html, (string) => {
-              if (string.includes('&gt;') &&
-                  string
-                    .replace(/<[^>]+?>/gi, '') // remove all tags
-                    .replace(/@\w+/gi, '') // remove mentions (even failed ones)
-                    .trim()
-                    .startsWith('&gt;')) {
-                return `<span class='greentext'>${string}</span>`
-              } else {
-                return string
-              }
-            })
-          } else {
-            return html
-          }
-        } catch (e) {
-          console.error('Failed to process status html', e)
-          return html
-        }
-      } else {
-        return html
-      }
-    },
     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.status.attentions
+      return this.headTailLinksComputed.firstMentions
     },
     ...mapGetters(['mergedConfig'])
   },
@@ -124,21 +99,6 @@ const StatusContent = {
     })
   },
   methods: {
-    linkClicked (event) {
-      const target = event.target.closest('.status-content a')
-      if (target) {
-        if (target.rel.match(/(?:^|\s)tag(?:$|\s)/) || target.className.match(/hashtag/)) {
-          // Extract tag name from dataset or link url
-          const tag = target.dataset.tag || extractTagFromUrl(target.href)
-          if (tag) {
-            const link = this.generateTagLink(tag)
-            this.$router.push(link)
-            return
-          }
-        }
-        window.open(target.href, '_blank')
-      }
-    },
     toggleShowMore () {
       if (this.mightHideBecauseTall) {
         this.showingTall = !this.showingTall
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index fae2d594..ff919211 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -10,7 +10,6 @@
           class="media-body summary"
           :html="status.summary_raw_html"
           :emoji="status.emojis"
-          @click.prevent="linkClicked"
         />
         <button
           v-if="longSubject && showingLongSubject"
@@ -43,19 +42,22 @@
           class="text-wrapper"
           v-if="!hideSubjectStatus && !(singleLine && status.summary_html)"
         >
-          <MentionsLine
-            v-if="!mentionsOwnLine"
-            :attentions="status.attentions"
-            class="mentions-line"
-          />
           <RichContent
             :class="{ '-single-line': singleLine }"
             class="text media-body"
-            :html="postBodyHtml"
+            :html="status.raw_html"
             :emoji="status.emojis"
             :handle-links="true"
-            @click.prevent="linkClicked"
-          />
+            :greentext="mergedConfig.greentext"
+          >
+            <template v-slot:prefix>
+              <MentionsLine
+                v-if="!mentionsOwnLine"
+                :mentions="mentions"
+                class="mentions-line"
+              />
+            </template>
+          </RichContent>
         </span>
 
         <button
-- 
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.js')

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 cc00af7a3102034b05ebcd4aa1fd01c6f467184a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 10 Jun 2021 18:52:01 +0300
Subject: Hellthread(tm) Certified

---
 src/components/mention_link/mention_link.js        |   3 -
 src/components/mention_link/mention_link.vue       |   1 -
 src/components/rich_content/rich_content.jsx       | 176 ++++++++++++++++-----
 src/components/status/status.js                    |   3 +
 src/components/status/status.vue                   |   1 +
 src/components/status_body/status_body.js          |   8 +-
 src/components/status_body/status_body.vue         |  12 +-
 src/components/status_content/status_content.js    |   1 +
 src/components/status_content/status_content.vue   |   3 +-
 .../html_converter/html_line_converter.service.js  | 102 ++++++++++++
 .../html_converter/html_tree_converter.service.js  | 146 +++++++++++++++++
 .../mini_html_converter.service.js                 | 138 ----------------
 .../tiny_post_html_processor.service.js            |  94 -----------
 .../html_converter/html_line_converter.spec.js     | 130 +++++++++++++++
 .../html_converter/html_tree_converter.spec.js     | 166 +++++++++++++++++++
 .../mini_post_html_processor.spec.js               | 166 -------------------
 .../tiny_post_html_processor.spec.js               |  96 -----------
 17 files changed, 707 insertions(+), 539 deletions(-)
 create mode 100644 src/services/html_converter/html_line_converter.service.js
 create mode 100644 src/services/html_converter/html_tree_converter.service.js
 delete mode 100644 src/services/mini_html_converter/mini_html_converter.service.js
 delete mode 100644 src/services/tiny_post_html_processor/tiny_post_html_processor.service.js
 create mode 100644 test/unit/specs/services/html_converter/html_line_converter.spec.js
 create mode 100644 test/unit/specs/services/html_converter/html_tree_converter.spec.js
 delete mode 100644 test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js
 delete mode 100644 test/unit/specs/services/tiny_post_html_processor/tiny_post_html_processor.spec.js

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

diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index 711c87d6..00b9e388 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -70,9 +70,6 @@ const MentionLink = {
     highlightClass () {
       if (this.highlight) return highlightClass(this.user)
     },
-    oldPlace () {
-      return !this.mergedConfig.mentionsOwnLine
-    },
     oldStyle () {
       return !this.mergedConfig.mentionsNewStyle
     },
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 281fab25..a65dbad3 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -1,7 +1,6 @@
 <template>
   <span
     class="MentionLink"
-    :class="{ '-oldPlace': oldPlace }"
   >
     <!-- eslint-disable vue/no-v-html -->
     <a
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index db24ca0e..590fea0f 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import { unescape, flattenDeep } from 'lodash'
-import { convertHtml, getTagName, processTextForEmoji, getAttrs } from 'src/services/mini_html_converter/mini_html_converter.service.js'
-import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js'
+import { convertHtmlToTree, getTagName, processTextForEmoji, getAttrs } from 'src/services/html_converter/html_tree_converter.service.js'
+import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js'
 import StillImage from 'src/components/still-image/still-image.vue'
 import MentionLink from 'src/components/mention_link/mention_link.vue'
 
@@ -31,11 +31,24 @@ export default Vue.component('RichContent', {
       required: false,
       type: Boolean,
       default: false
+    },
+    // Whether to hide last mentions (hellthreads)
+    hideLastMentions: {
+      required: false,
+      type: Boolean,
+      default: false
+    },
+    // Whether to hide first mentions
+    hideFirstMentions: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   render (h) {
     // Pre-process HTML
-    const html = this.greentext ? addGreentext(this.html) : this.html
+    const html = preProcessPerLine(this.html, this.greentext, this.hideLastMentions)
+    console.log(this.hideFirstMentions, this.hideLastMentions)
 
     const renderImage = (tag) => {
       return <StillImage
@@ -45,18 +58,20 @@ export default Vue.component('RichContent', {
     }
 
     const renderMention = (attrs, children, encounteredText) => {
-      return <MentionLink
-        url={attrs.href}
-        content={flattenDeep(children).join('')}
-        firstMention={!encounteredText}
-      />
+      return (this.hideFirstMentions && !encounteredText)
+        ? ''
+        : <MentionLink
+          url={attrs.href}
+          content={flattenDeep(children).join('')}
+          firstMention={!encounteredText}
+        />
     }
 
     // We stop treating mentions as "first" ones when we encounter
     // non-whitespace text
     let encounteredText = false
     // Processor to use with mini_html_converter
-    const processItem = (item) => {
+    const processItem = (item, index, array, what) => {
       // Handle text nodes - just add emoji
       if (typeof item === 'string') {
         const emptyText = item.trim() === ''
@@ -69,7 +84,7 @@ export default Vue.component('RichContent', {
           encounteredText = true
         }
         if (item.includes(':')) {
-          return processTextForEmoji(
+          unescapedItem = processTextForEmoji(
             unescapedItem,
             this.emoji,
             ({ shortcode, url }) => {
@@ -81,9 +96,8 @@ export default Vue.component('RichContent', {
               />
             }
           )
-        } else {
-          return unescapedItem
         }
+        return unescapedItem
       }
 
       // Handle tag nodes
@@ -98,6 +112,8 @@ export default Vue.component('RichContent', {
             const attrs = getAttrs(opener)
             if (attrs['class'] && attrs['class'].includes('mention')) {
               return renderMention(attrs, children, encounteredText)
+            } else if (attrs['class'] && attrs['class'].includes('hashtag')) {
+              return item // We'll handle it later
             } else {
               attrs.target = '_blank'
               return <a {...{ attrs }}>
@@ -116,43 +132,129 @@ export default Vue.component('RichContent', {
         }
       }
     }
+    // Processor for back direction (for finding "last" stuff, just easier this way)
+    let encounteredTextReverse = false
+    const renderHashtag = (attrs, children, encounteredTextReverse) => {
+      attrs.target = '_blank'
+      if (!encounteredTextReverse) {
+        attrs['data-parser-last'] = true
+      }
+      return <a {...{ attrs }}>
+        { children.map(processItem) }
+      </a>
+    }
+    const processItemReverse = (item, index, array, what) => {
+      // Handle text nodes - just add emoji
+      if (typeof item === 'string') {
+        const emptyText = item.trim() === ''
+        if (emptyText) return encounteredTextReverse ? item : item.trim()
+        if (!encounteredTextReverse) encounteredTextReverse = true
+        return item
+      } else if (Array.isArray(item)) {
+        // Handle tag nodes
+        const [opener, children] = item
+        const Tag = getTagName(opener)
+        switch (Tag) {
+          case 'a': // replace mentions with MentionLink
+            if (!this.handleLinks) break
+            const attrs = getAttrs(opener)
+            // should only be this
+            if (attrs['class'] && attrs['class'].includes('hashtag')) {
+              return renderHashtag(attrs, children, encounteredTextReverse)
+            }
+        }
+      }
+      return item
+    }
     return <span class="RichContent">
       { this.$slots.prefix }
-      { convertHtml(html).map(processItem) }
+      { convertHtmlToTree(html).map(processItem).reverse().map(processItemReverse).reverse() }
       { this.$slots.suffix }
     </span>
   }
 })
 
-export const addGreentext = (html) => {
-  try {
-    if (html.includes('&gt;')) {
-      // This checks if post has '>' at the beginning, excluding mentions so that @mention >impying works
-      return processHtml(html, (string) => {
-        if (
-          string.includes('&gt;') && string
-            .replace(/<[^>]+?>/gi, '') // remove all tags
-            .replace(/@\w+/gi, '') // remove mentions (even failed ones)
-            .trim()
-            .startsWith('&gt;')
-        ) {
-          return `<span class='greentext'>${string}</span>`
+/** Pre-processing HTML
+ *
+ * Currently this does two things:
+ * - add green/cyantexting
+ * - wrap and mark last line containing only mentions as ".lastMentionsLine" for
+ *   more compact hellthreads.
+ *
+ * @param {String} html - raw HTML to process
+ * @param {Boolean} greentext - whether to enable greentexting or not
+ * @param {Boolean} removeLastMentions - whether to remove last mentions
+ */
+export const preProcessPerLine = (html, greentext, removeLastMentions) => {
+  // Only mark first (last) encounter
+  let lastMentionsMarked = false
+
+  return convertHtmlToLines(html).reverse().map((item, index, array) => {
+    if (!item.text) return item
+    const string = item.text
+
+    // Greentext stuff
+    if (greentext && (string.includes('&gt;') || string.includes('&lt;'))) {
+      const cleanedString = string.replace(/<[^>]+?>/gi, '') // remove all tags
+        .replace(/@\w+/gi, '') // remove mentions (even failed ones)
+        .trim()
+      if (cleanedString.startsWith('&gt;')) {
+        return `<span class='greentext'>${string}</span>`
+      } else if (cleanedString.startsWith('&lt;')) {
+        return `<span class='cyantext'>${string}</span>`
+      }
+    }
+
+    const tree = convertHtmlToTree(string)
+
+    // If line has loose text, i.e. text outside a mention or a tag
+    // we won't touch mentions.
+    let hasLooseText = false
+    let hasMentions = false
+    const process = (item) => {
+      if (Array.isArray(item)) {
+        const [opener, children, closer] = item
+        const tag = getTagName(opener)
+        if (tag === 'a') {
+          const attrs = getAttrs(opener)
+          if (attrs['class'] && attrs['class'].includes('mention')) {
+            hasMentions = true
+            return [opener, children, closer]
+          } else {
+            hasLooseText = true
+            return [opener, children, closer]
+          }
+        } else if (tag === 'span' || tag === 'p') {
+          return [opener, [...children].reverse().map(process).reverse(), closer]
         } else {
-          return string
+          hasLooseText = true
+          return [opener, children, closer]
+        }
+      }
+
+      if (typeof item === 'string') {
+        if (item.trim() !== '') {
+          hasLooseText = true
         }
-      })
+        return item
+      }
+    }
+
+    const result = [...tree].reverse().map(process).reverse()
+
+    if (removeLastMentions && hasMentions && !hasLooseText && !lastMentionsMarked) {
+      lastMentionsMarked = true
+      return ''
     } else {
-      return html
+      return flattenDeep(result).join('')
     }
-  } catch (e) {
-    console.error('Failed to process status html', e)
-    return html
-  }
+  }).reverse().join('')
 }
 
 export const getHeadTailLinks = (html) => {
   // Exported object properties
   const firstMentions = [] // Mentions that appear in the beginning of post body
+  const lastMentions = [] // Mentions that appear at the end of post body
   const lastTags = [] // Tags that appear at the end of post body
   const writtenMentions = [] // All mentions that appear in post body
   const writtenTags = [] // All tags that appear in post body
@@ -170,7 +272,7 @@ export const getHeadTailLinks = (html) => {
     }
   }
 
-  // Processor to use with mini_html_converter
+  // Processor to use with html_tree_converter
   const processItem = (item) => {
     // Handle text nodes - stop treating mentions as "first" when text encountered
     if (typeof item === 'string') {
@@ -182,6 +284,7 @@ export const getHeadTailLinks = (html) => {
       }
       // Encountered text? That means tags we've been collectings aren't "last"!
       lastTags.splice(0)
+      lastMentions.splice(0)
       return
     }
     // Handle tag nodes
@@ -197,6 +300,7 @@ export const getHeadTailLinks = (html) => {
             firstMentions.push(linkData)
           }
           writtenMentions.push(linkData)
+          lastMentions.push(linkData)
         } else if (attrs['class'].includes('hashtag')) {
           lastTags.push(linkData)
           writtenTags.push(linkData)
@@ -206,6 +310,6 @@ export const getHeadTailLinks = (html) => {
       children && children.forEach(processItem)
     }
   }
-  convertHtml(html).forEach(processItem)
-  return { firstMentions, writtenMentions, writtenTags, lastTags }
+  convertHtmlToTree(html).forEach(processItem)
+  return { firstMentions, writtenMentions, writtenTags, lastTags, lastMentions }
 }
diff --git a/src/components/status/status.js b/src/components/status/status.js
index e9a5ec0d..bab818fc 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -196,6 +196,9 @@ const Status = {
     hasMentionsLine () {
       return this.mentionsLine.length > 0
     },
+    hideLastMentions () {
+      return this.headTailLinks.firstMentions.length === 0
+    },
     muted () {
       if (this.statusoid.user.id === this.currentUser.id) return false
       const { status } = this
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 7cc25be9..0190d864 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -306,6 +306,7 @@
             :highlight="highlight"
             :focused="isFocused"
             :hide-first-mentions="mentionsOwnLine && isReply"
+            :hide-last-mentions="hideLastMentions"
             :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 c2edb601..2fc9abbf 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -30,7 +30,8 @@ const StatusContent = {
     // if this was computed at upper level it can be passed here, otherwise
     // it will be in this component
     'headTailLinks',
-    'hideFirstMentions'
+    'hideFirstMentions',
+    'hideLastMentions'
   ],
   data () {
     return {
@@ -80,9 +81,12 @@ const StatusContent = {
     attachmentTypes () {
       return this.status.attachments.map(file => fileType.fileType(file.mimetype))
     },
-    mentions () {
+    mentionsFirst () {
       return this.headTailLinksComputed.firstMentions
     },
+    mentionsLast () {
+      return this.headTailLinksComputed.lastMentions
+    },
     ...mapGetters(['mergedConfig'])
   },
   components: {
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index 4df29934..bd599a8c 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -49,11 +49,19 @@
             :emoji="status.emojis"
             :handle-links="true"
             :greentext="mergedConfig.greentext"
+            :hide-first-mentions="hideFirstMentions"
+            :hide-last-mentions="hideLastMentions"
           >
             <template v-slot:prefix>
               <MentionsLine
-                v-if="!hideFirstMentions"
-                :mentions="mentions"
+                v-if="!hideFirstMentions && mentionsFirst"
+                :mentions="mentionsFirst"
+              />
+            </template>
+            <template v-slot:suffix>
+              <MentionsLine
+                v-if="!hideFirstMentions && mentionsLast"
+                :mentions="mentionsLast"
               />
             </template>
           </RichContent>
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index 363a9cb0..64cc6d44 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -33,6 +33,7 @@ const StatusContent = {
     'fullContent',
     'singleLine',
     'hideFirstMentions',
+    'hideLastMentions',
     'headTailLinks'
   ],
   computed: {
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 18f6e7be..c32bbbfb 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -5,7 +5,8 @@
       :status="status"
       :single-line="singleLine"
       :hide-first-mentions="hideFirstMentions"
-      :headTailLinks="headTailLinks"
+      :hide-last-mentions="hideLastMentions"
+      :head-tail-links="headTailLinks"
     >
       <div v-if="status.poll && status.poll.options">
         <poll :base-poll="status.poll" />
diff --git a/src/services/html_converter/html_line_converter.service.js b/src/services/html_converter/html_line_converter.service.js
new file mode 100644
index 00000000..80482c9a
--- /dev/null
+++ b/src/services/html_converter/html_line_converter.service.js
@@ -0,0 +1,102 @@
+/**
+ * This is a tiny purpose-built HTML parser/processor. This basically detects
+ * any type of visual newline and converts entire HTML into a array structure.
+ *
+ * Text nodes are represented as object with single property - text - containing
+ * the visual line. Intended usage is to process the array with .map() in which
+ * map function returns a string and resulting array can be converted back to html
+ * with a .join('').
+ *
+ * Generally this isn't very useful except for when you really need to either
+ * modify visual lines (greentext i.e. simple quoting) or do something with
+ * first/last line.
+ *
+ * known issue: doesn't handle CDATA so nested CDATA might not work well
+ *
+ * @param {Object} input - input data
+ * @return {(string|{ text: string })[]} processed html in form of a list.
+ */
+export const convertHtmlToLines = (html) => {
+  const handledTags = new Set(['p', 'br', 'div'])
+  const openCloseTags = new Set(['p', 'div'])
+
+  let buffer = [] // Current output buffer
+  const level = [] // How deep we are in tags and which tags were there
+  let textBuffer = '' // Current line content
+  let tagBuffer = null // Current tag buffer, if null = we are not currently reading a tag
+
+  // Extracts tag name from tag, i.e. <span a="b"> => span
+  const getTagName = (tag) => {
+    const result = /(?:<\/(\w+)>|<(\w+)\s?[^/]*?\/?>)/gi.exec(tag)
+    return result && (result[1] || result[2])
+  }
+
+  const flush = () => { // Processes current line buffer, adds it to output buffer and clears line buffer
+    if (textBuffer.trim().length > 0) {
+      buffer.push({ text: textBuffer })
+    } else {
+      buffer.push(textBuffer)
+    }
+    textBuffer = ''
+  }
+
+  const handleBr = (tag) => { // handles single newlines/linebreaks/selfclosing
+    flush()
+    buffer.push(tag)
+  }
+
+  const handleOpen = (tag) => { // handles opening tags
+    flush()
+    buffer.push(tag)
+    level.push(tag)
+  }
+
+  const handleClose = (tag) => { // handles closing tags
+    flush()
+    buffer.push(tag)
+    if (level[level.length - 1] === tag) {
+      level.pop()
+    }
+  }
+
+  for (let i = 0; i < html.length; i++) {
+    const char = html[i]
+    if (char === '<' && tagBuffer === null) {
+      tagBuffer = char
+    } else if (char !== '>' && tagBuffer !== null) {
+      tagBuffer += char
+    } else if (char === '>' && tagBuffer !== null) {
+      tagBuffer += char
+      const tagFull = tagBuffer
+      tagBuffer = null
+      const tagName = getTagName(tagFull)
+      if (handledTags.has(tagName)) {
+        if (tagName === 'br') {
+          handleBr(tagFull)
+        } else if (openCloseTags.has(tagName)) {
+          if (tagFull[1] === '/') {
+            handleClose(tagFull)
+          } else if (tagFull[tagFull.length - 2] === '/') {
+            // self-closing
+            handleBr(tagFull)
+          } else {
+            handleOpen(tagFull)
+          }
+        }
+      } else {
+        textBuffer += tagFull
+      }
+    } else if (char === '\n') {
+      handleBr(char)
+    } else {
+      textBuffer += char
+    }
+  }
+  if (tagBuffer) {
+    textBuffer += tagBuffer
+  }
+
+  flush()
+
+  return buffer
+}
diff --git a/src/services/html_converter/html_tree_converter.service.js b/src/services/html_converter/html_tree_converter.service.js
new file mode 100644
index 00000000..badd473a
--- /dev/null
+++ b/src/services/html_converter/html_tree_converter.service.js
@@ -0,0 +1,146 @@
+/**
+ * This is a not-so-tiny purpose-built HTML parser/processor. This parses html
+ * and converts it into a tree structure representing tag openers/closers and
+ * children.
+ *
+ * Structure follows this pattern: [opener, [...children], closer] except root
+ * node which is just [...children]. Text nodes can only be within children and
+ * are represented as strings.
+ *
+ * Intended use is to convert HTML structure and then recursively iterate over it
+ * most likely using a map. Very useful for dynamically rendering html replacing
+ * tags with JSX elements in a render function.
+ *
+ * known issue: doesn't handle CDATA so CDATA might not work well
+ * known issue: doesn't handle HTML comments
+ *
+ * @param {Object} input - input data
+ * @return {string} processed html
+ */
+export const convertHtmlToTree = (html) => {
+  // Elements that are implicitly self-closing
+  // https://developer.mozilla.org/en-US/docs/Glossary/empty_element
+  const emptyElements = new Set([
+    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+    'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'
+  ])
+  // TODO For future - also parse HTML5 multi-source components?
+
+  const buffer = [] // Current output buffer
+  const levels = [['', buffer]] // How deep we are in tags and which tags were there
+  let textBuffer = '' // Current line content
+  let tagBuffer = null // Current tag buffer, if null = we are not currently reading a tag
+
+  const getCurrentBuffer = () => {
+    return levels[levels.length - 1][1]
+  }
+
+  const flushText = () => { // Processes current line buffer, adds it to output buffer and clears line buffer
+    if (textBuffer === '') return
+    getCurrentBuffer().push(textBuffer)
+    textBuffer = ''
+  }
+
+  const handleSelfClosing = (tag) => {
+    getCurrentBuffer().push([tag])
+  }
+
+  const handleOpen = (tag) => {
+    const curBuf = getCurrentBuffer()
+    const newLevel = [tag, []]
+    levels.push(newLevel)
+    curBuf.push(newLevel)
+  }
+
+  const handleClose = (tag) => {
+    const currentTag = levels[levels.length - 1]
+    if (getTagName(levels[levels.length - 1][0]) === getTagName(tag)) {
+      currentTag.push(tag)
+      levels.pop()
+    } else {
+      getCurrentBuffer().push(tag)
+    }
+  }
+
+  for (let i = 0; i < html.length; i++) {
+    const char = html[i]
+    if (char === '<' && tagBuffer === null) {
+      flushText()
+      tagBuffer = char
+    } else if (char !== '>' && tagBuffer !== null) {
+      tagBuffer += char
+    } else if (char === '>' && tagBuffer !== null) {
+      tagBuffer += char
+      const tagFull = tagBuffer
+      tagBuffer = null
+      const tagName = getTagName(tagFull)
+      if (tagFull[1] === '/') {
+        handleClose(tagFull)
+      } else if (emptyElements.has(tagName) || tagFull[tagFull.length - 2] === '/') {
+        // self-closing
+        handleSelfClosing(tagFull)
+      } else {
+        handleOpen(tagFull)
+      }
+    } else {
+      textBuffer += char
+    }
+  }
+  if (tagBuffer) {
+    textBuffer += tagBuffer
+  }
+
+  flushText()
+  return buffer
+}
+
+// Extracts tag name from tag, i.e. <span a="b"> => span
+export const getTagName = (tag) => {
+  const result = /(?:<\/(\w+)>|<(\w+)\s?.*?\/?>)/gi.exec(tag)
+  return result && (result[1] || result[2])
+}
+
+export const processTextForEmoji = (text, emojis, processor) => {
+  const buffer = []
+  let textBuffer = ''
+  for (let i = 0; i < text.length; i++) {
+    const char = text[i]
+    if (char === ':') {
+      const next = text.slice(i + 1)
+      let found = false
+      for (let emoji of emojis) {
+        if (next.slice(0, emoji.shortcode.length + 1) === (emoji.shortcode + ':')) {
+          found = emoji
+          break
+        }
+      }
+      if (found) {
+        buffer.push(textBuffer)
+        textBuffer = ''
+        buffer.push(processor(found))
+        i += found.shortcode.length + 1
+      } else {
+        textBuffer += char
+      }
+    } else {
+      textBuffer += char
+    }
+  }
+  if (textBuffer) buffer.push(textBuffer)
+  return buffer
+}
+
+export const getAttrs = tag => {
+  const innertag = tag
+    .substring(1, tag.length - 1)
+    .replace(new RegExp('^' + getTagName(tag)), '')
+    .replace(/\/?$/, '')
+    .trim()
+  const attrs = Array.from(innertag.matchAll(/([a-z0-9-]+)(?:=("[^"]+?"|'[^']+?'))?/gi))
+    .map(([trash, key, value]) => [key, value])
+    .map(([k, v]) => {
+      if (!v) return [k, true]
+      return [k, v.substring(1, v.length - 1)]
+    })
+  return Object.fromEntries(attrs)
+}
diff --git a/src/services/mini_html_converter/mini_html_converter.service.js b/src/services/mini_html_converter/mini_html_converter.service.js
deleted file mode 100644
index 900752cd..00000000
--- a/src/services/mini_html_converter/mini_html_converter.service.js
+++ /dev/null
@@ -1,138 +0,0 @@
-/**
- * This is a not-so-tiny purpose-built HTML parser/processor. It was made for use
- * with StatusBody component for purpose of replacing tags with vue components
- *
- * known issue: doesn't handle CDATA so nested CDATA might not work well
- *
- * @param {Object} input - input data
- * @param {(string) => string} lineProcessor - function that will be called on every line
- * @param {{ key[string]: (string) => string}} tagProcessor - map of processors for tags
- * @return {string} processed html
- */
-export const convertHtml = (html) => {
-  // Elements that are implicitly self-closing
-  // https://developer.mozilla.org/en-US/docs/Glossary/empty_element
-  const emptyElements = new Set([
-    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
-    'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'
-  ])
-  // TODO For future - also parse HTML5 multi-source components?
-
-  const buffer = [] // Current output buffer
-  const levels = [['', buffer]] // How deep we are in tags and which tags were there
-  let textBuffer = '' // Current line content
-  let tagBuffer = null // Current tag buffer, if null = we are not currently reading a tag
-
-  const getCurrentBuffer = () => {
-    return levels[levels.length - 1][1]
-  }
-
-  const flushText = () => { // Processes current line buffer, adds it to output buffer and clears line buffer
-    if (textBuffer === '') return
-    getCurrentBuffer().push(textBuffer)
-    textBuffer = ''
-  }
-
-  const handleSelfClosing = (tag) => {
-    getCurrentBuffer().push([tag])
-  }
-
-  const handleOpen = (tag) => {
-    const curBuf = getCurrentBuffer()
-    const newLevel = [tag, []]
-    levels.push(newLevel)
-    curBuf.push(newLevel)
-  }
-
-  const handleClose = (tag) => {
-    const currentTag = levels[levels.length - 1]
-    if (getTagName(levels[levels.length - 1][0]) === getTagName(tag)) {
-      currentTag.push(tag)
-      levels.pop()
-    } else {
-      getCurrentBuffer().push(tag)
-    }
-  }
-
-  for (let i = 0; i < html.length; i++) {
-    const char = html[i]
-    if (char === '<' && tagBuffer === null) {
-      flushText()
-      tagBuffer = char
-    } else if (char !== '>' && tagBuffer !== null) {
-      tagBuffer += char
-    } else if (char === '>' && tagBuffer !== null) {
-      tagBuffer += char
-      const tagFull = tagBuffer
-      tagBuffer = null
-      const tagName = getTagName(tagFull)
-      if (tagFull[1] === '/') {
-        handleClose(tagFull)
-      } else if (emptyElements.has(tagName) || tagFull[tagFull.length - 2] === '/') {
-        // self-closing
-        handleSelfClosing(tagFull)
-      } else {
-        handleOpen(tagFull)
-      }
-    } else {
-      textBuffer += char
-    }
-  }
-  if (tagBuffer) {
-    textBuffer += tagBuffer
-  }
-
-  flushText()
-  return buffer
-}
-
-// Extracts tag name from tag, i.e. <span a="b"> => span
-export const getTagName = (tag) => {
-  const result = /(?:<\/(\w+)>|<(\w+)\s?.*?\/?>)/gi.exec(tag)
-  return result && (result[1] || result[2])
-}
-
-export const processTextForEmoji = (text, emojis, processor) => {
-  const buffer = []
-  let textBuffer = ''
-  for (let i = 0; i < text.length; i++) {
-    const char = text[i]
-    if (char === ':') {
-      const next = text.slice(i + 1)
-      let found = false
-      for (let emoji of emojis) {
-        if (next.slice(0, emoji.shortcode.length + 1) === (emoji.shortcode + ':')) {
-          found = emoji
-          break
-        }
-      }
-      if (found) {
-        buffer.push(textBuffer)
-        textBuffer = ''
-        buffer.push(processor(found))
-        i += found.shortcode.length + 1
-      } else {
-        textBuffer += char
-      }
-    } else {
-      textBuffer += char
-    }
-  }
-  if (textBuffer) buffer.push(textBuffer)
-  return buffer
-}
-
-export const getAttrs = tag => {
-  const innertag = tag
-    .substring(1, tag.length - 1)
-    .replace(new RegExp('^' + getTagName(tag)), '')
-    .replace(/\/?$/, '')
-    .trim()
-  const attrs = Array.from(innertag.matchAll(/([a-z0-9-]+)(?:=("[^"]+?"|'[^']+?'))?/gi))
-    .map(([trash, key, value]) => [key, value])
-    .map(([k, v]) => {
-      if (!v) return [k, true]
-      return [k, v.substring(1, v.length - 1)]
-    })
-  return Object.fromEntries(attrs)
-}
diff --git a/src/services/tiny_post_html_processor/tiny_post_html_processor.service.js b/src/services/tiny_post_html_processor/tiny_post_html_processor.service.js
deleted file mode 100644
index de6f20ef..00000000
--- a/src/services/tiny_post_html_processor/tiny_post_html_processor.service.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * This is a tiny purpose-built HTML parser/processor. This basically detects any type of visual newline and
- * allows it to be processed, useful for greentexting, mostly
- *
- * known issue: doesn't handle CDATA so nested CDATA might not work well
- *
- * @param {Object} input - input data
- * @param {(string) => string} processor - function that will be called on every line
- * @return {string} processed html
- */
-export const processHtml = (html, processor) => {
-  const handledTags = new Set(['p', 'br', 'div'])
-  const openCloseTags = new Set(['p', 'div'])
-
-  let buffer = '' // Current output buffer
-  const level = [] // How deep we are in tags and which tags were there
-  let textBuffer = '' // Current line content
-  let tagBuffer = null // Current tag buffer, if null = we are not currently reading a tag
-
-  // Extracts tag name from tag, i.e. <span a="b"> => span
-  const getTagName = (tag) => {
-    const result = /(?:<\/(\w+)>|<(\w+)\s?[^/]*?\/?>)/gi.exec(tag)
-    return result && (result[1] || result[2])
-  }
-
-  const flush = () => { // Processes current line buffer, adds it to output buffer and clears line buffer
-    if (textBuffer.trim().length > 0) {
-      buffer += processor(textBuffer)
-    } else {
-      buffer += textBuffer
-    }
-    textBuffer = ''
-  }
-
-  const handleBr = (tag) => { // handles single newlines/linebreaks/selfclosing
-    flush()
-    buffer += tag
-  }
-
-  const handleOpen = (tag) => { // handles opening tags
-    flush()
-    buffer += tag
-    level.push(tag)
-  }
-
-  const handleClose = (tag) => { // handles closing tags
-    flush()
-    buffer += tag
-    if (level[level.length - 1] === tag) {
-      level.pop()
-    }
-  }
-
-  for (let i = 0; i < html.length; i++) {
-    const char = html[i]
-    if (char === '<' && tagBuffer === null) {
-      tagBuffer = char
-    } else if (char !== '>' && tagBuffer !== null) {
-      tagBuffer += char
-    } else if (char === '>' && tagBuffer !== null) {
-      tagBuffer += char
-      const tagFull = tagBuffer
-      tagBuffer = null
-      const tagName = getTagName(tagFull)
-      if (handledTags.has(tagName)) {
-        if (tagName === 'br') {
-          handleBr(tagFull)
-        } else if (openCloseTags.has(tagName)) {
-          if (tagFull[1] === '/') {
-            handleClose(tagFull)
-          } else if (tagFull[tagFull.length - 2] === '/') {
-            // self-closing
-            handleBr(tagFull)
-          } else {
-            handleOpen(tagFull)
-          }
-        }
-      } else {
-        textBuffer += tagFull
-      }
-    } else if (char === '\n') {
-      handleBr(char)
-    } else {
-      textBuffer += char
-    }
-  }
-  if (tagBuffer) {
-    textBuffer += tagBuffer
-  }
-
-  flush()
-
-  return buffer
-}
diff --git a/test/unit/specs/services/html_converter/html_line_converter.spec.js b/test/unit/specs/services/html_converter/html_line_converter.spec.js
new file mode 100644
index 00000000..82cb4170
--- /dev/null
+++ b/test/unit/specs/services/html_converter/html_line_converter.spec.js
@@ -0,0 +1,130 @@
+import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js'
+
+const mapOnlyText = (processor) => (input) => input.text ? processor(input.text) : input
+
+describe('TinyPostHTMLProcessor', () => {
+  describe('with processor that keeps original line should not make any changes to HTML when', () => {
+    const processorKeep = (line) => line
+    it('fed with regular HTML with newlines', () => {
+      const inputOutput = '1<br/>2<p class="lol">3 4</p> 5 \n 6 <p > 7 <br> 8 </p> <br>\n<br/>'
+      const result = convertHtmlToLines(inputOutput)
+      const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
+      expect(comparableResult).to.eql(inputOutput)
+    })
+
+    it('fed with possibly broken HTML with invalid tags/composition', () => {
+      const inputOutput = '<feeee dwdwddddddw> <i>ayy<b>lm</i>ao</b> </section>'
+      const result = convertHtmlToLines(inputOutput)
+      const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
+      expect(comparableResult).to.eql(inputOutput)
+    })
+
+    it('fed with very broken HTML with broken composition', () => {
+      const inputOutput = '</p> lmao what </div> whats going on <div> wha <p>'
+      const result = convertHtmlToLines(inputOutput)
+      const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
+      expect(comparableResult).to.eql(inputOutput)
+    })
+
+    it('fed with sorta valid HTML but tags aren\'t closed', () => {
+      const inputOutput = 'just leaving a <div> hanging'
+      const result = convertHtmlToLines(inputOutput)
+      const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
+      expect(comparableResult).to.eql(inputOutput)
+    })
+
+    it('fed with not really HTML at this point... tags that aren\'t finished', () => {
+      const inputOutput = 'do you expect me to finish this <div class='
+      const result = convertHtmlToLines(inputOutput)
+      const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
+      expect(comparableResult).to.eql(inputOutput)
+    })
+
+    it('fed with dubiously valid HTML (p within p and also div inside p)', () => {
+      const inputOutput = 'look ma <p> p \nwithin <p> p! </p> and a <br/><div>div!</div></p>'
+      const result = convertHtmlToLines(inputOutput)
+      const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
+      expect(comparableResult).to.eql(inputOutput)
+    })
+
+    it('fed with maybe valid HTML? self-closing divs and ps', () => {
+      const inputOutput = 'a <div class="what"/> what now <p aria-label="wtf"/> ?'
+      const result = convertHtmlToLines(inputOutput)
+      const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
+      expect(comparableResult).to.eql(inputOutput)
+    })
+
+    it('fed with valid XHTML containing a CDATA', () => {
+      const inputOutput = 'Yes, it is me, <![CDATA[DIO]]>'
+      const result = convertHtmlToLines(inputOutput)
+      const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
+      expect(comparableResult).to.eql(inputOutput)
+    })
+  })
+  describe('with processor that replaces lines with word "_" should match expected line when', () => {
+    const processorReplace = (line) => '_'
+    it('fed with regular HTML with newlines', () => {
+      const input = '1<br/>2<p class="lol">3 4</p> 5 \n 6 <p > 7 <br> 8 </p> <br>\n<br/>'
+      const output = '_<br/>_<p class="lol">_</p>_\n_<p >_<br>_</p> <br>\n<br/>'
+      const result = convertHtmlToLines(input)
+      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      expect(comparableResult).to.eql(output)
+    })
+
+    it('fed with possibly broken HTML with invalid tags/composition', () => {
+      const input = '<feeee dwdwddddddw> <i>ayy<b>lm</i>ao</b> </section>'
+      const output = '_'
+      const result = convertHtmlToLines(input)
+      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      expect(comparableResult).to.eql(output)
+    })
+
+    it('fed with very broken HTML with broken composition', () => {
+      const input = '</p> lmao what </div> whats going on <div> wha <p>'
+      const output = '</p>_</div>_<div>_<p>'
+      const result = convertHtmlToLines(input)
+      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      expect(comparableResult).to.eql(output)
+    })
+
+    it('fed with sorta valid HTML but tags aren\'t closed', () => {
+      const input = 'just leaving a <div> hanging'
+      const output = '_<div>_'
+      const result = convertHtmlToLines(input)
+      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      expect(comparableResult).to.eql(output)
+    })
+
+    it('fed with not really HTML at this point... tags that aren\'t finished', () => {
+      const input = 'do you expect me to finish this <div class='
+      const output = '_'
+      const result = convertHtmlToLines(input)
+      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      expect(comparableResult).to.eql(output)
+    })
+
+    it('fed with dubiously valid HTML (p within p and also div inside p)', () => {
+      const input = 'look ma <p> p \nwithin <p> p! </p> and a <br/><div>div!</div></p>'
+      const output = '_<p>_\n_<p>_</p>_<br/><div>_</div></p>'
+      const result = convertHtmlToLines(input)
+      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      expect(comparableResult).to.eql(output)
+    })
+
+    it('fed with maybe valid HTML? self-closing divs and ps', () => {
+      const input = 'a <div class="what"/> what now <p aria-label="wtf"/> ?'
+      const output = '_<div class="what"/>_<p aria-label="wtf"/>_'
+      const result = convertHtmlToLines(input)
+      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      expect(comparableResult).to.eql(output)
+    })
+
+    it('fed with valid XHTML containing a CDATA', () => {
+      const input = 'Yes, it is me, <![CDATA[DIO]]>'
+      const output = '_'
+      const result = convertHtmlToLines(input)
+      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      expect(comparableResult).to.eql(output)
+    })
+  })
+})
diff --git a/test/unit/specs/services/html_converter/html_tree_converter.spec.js b/test/unit/specs/services/html_converter/html_tree_converter.spec.js
new file mode 100644
index 00000000..a54745c3
--- /dev/null
+++ b/test/unit/specs/services/html_converter/html_tree_converter.spec.js
@@ -0,0 +1,166 @@
+import { convertHtmlToTree, processTextForEmoji, getAttrs } from 'src/services/html_converter/html_tree_converter.service.js'
+
+describe('MiniHtmlConverter', () => {
+  describe('convertHtmlToTree', () => {
+    it('converts html into a tree structure', () => {
+      const input = '1 <p>2</p> <b>3<img src="a">4</b>5'
+      expect(convertHtmlToTree(input)).to.eql([
+        '1 ',
+        [
+          '<p>',
+          ['2'],
+          '</p>'
+        ],
+        ' ',
+        [
+          '<b>',
+          [
+            '3',
+            ['<img src="a">'],
+            '4'
+          ],
+          '</b>'
+        ],
+        '5'
+      ])
+    })
+    it('converts html to tree while preserving tag formatting', () => {
+      const input = '1 <p >2</p><b >3<img   src="a">4</b>5'
+      expect(convertHtmlToTree(input)).to.eql([
+        '1 ',
+        [
+          '<p >',
+          ['2'],
+          '</p>'
+        ],
+        [
+          '<b >',
+          [
+            '3',
+            ['<img   src="a">'],
+            '4'
+          ],
+          '</b>'
+        ],
+        '5'
+      ])
+    })
+    it('converts semi-broken html', () => {
+      const input = '1 <br> 2 <p> 42'
+      expect(convertHtmlToTree(input)).to.eql([
+        '1 ',
+        ['<br>'],
+        ' 2 ',
+        [
+          '<p>',
+          [' 42']
+        ]
+      ])
+    })
+    it('realistic case 1', () => {
+      const input = '<p><span class="h-card"><a class="u-url mention" data-user="9wRC6T2ZZiKWJ0vUi8" href="https://cawfee.club/users/benis" rel="ugc">@<span>benis</span></a></span> <span class="h-card"><a class="u-url mention" data-user="194" href="https://shigusegubu.club/users/hj" rel="ugc">@<span>hj</span></a></span> nice</p>'
+      expect(convertHtmlToTree(input)).to.eql([
+        [
+          '<p>',
+          [
+            [
+              '<span class="h-card">',
+              [
+                [
+                  '<a class="u-url mention" data-user="9wRC6T2ZZiKWJ0vUi8" href="https://cawfee.club/users/benis" rel="ugc">',
+                  [
+                    '@',
+                    [
+                      '<span>',
+                      [
+                        'benis'
+                      ],
+                      '</span>'
+                    ]
+                  ],
+                  '</a>'
+                ]
+              ],
+              '</span>'
+            ],
+            ' ',
+            [
+              '<span class="h-card">',
+              [
+                [
+                  '<a class="u-url mention" data-user="194" href="https://shigusegubu.club/users/hj" rel="ugc">',
+                  [
+                    '@',
+                    [
+                      '<span>',
+                      [
+                        'hj'
+                      ],
+                      '</span>'
+                    ]
+                  ],
+                  '</a>'
+                ]
+              ],
+              '</span>'
+            ],
+            ' nice'
+          ],
+          '</p>'
+        ]
+      ])
+    })
+    it('realistic case 2', () => {
+      const inputOutput = 'Country improv: give me a city<br/>Audience: Memphis<br/>Improv troupe: come on, a better one<br/>Audience: el paso'
+      expect(convertHtmlToTree(inputOutput)).to.eql([
+        'Country improv: give me a city',
+        [
+          '<br/>'
+        ],
+        'Audience: Memphis',
+        [
+          '<br/>'
+        ],
+        'Improv troupe: come on, a better one',
+        [
+          '<br/>'
+        ],
+        'Audience: el paso'
+      ])
+    })
+  })
+
+  describe('processTextForEmoji', () => {
+    it('processes all emoji in text', () => {
+      const input = 'Hello from finland! :lol: We have best water! :lmao:'
+      const emojis = [
+        { shortcode: 'lol', src: 'LOL' },
+        { shortcode: 'lmao', src: 'LMAO' }
+      ]
+      const processor = ({ shortcode, src }) => ({ shortcode, src })
+      expect(processTextForEmoji(input, emojis, processor)).to.eql([
+        'Hello from finland! ',
+        { shortcode: 'lol', src: 'LOL' },
+        ' We have best water! ',
+        { shortcode: 'lmao', src: 'LMAO' }
+      ])
+    })
+    it('leaves text as is', () => {
+      const input = 'Number one: that\'s terror'
+      const emojis = []
+      const processor = ({ shortcode, src }) => ({ shortcode, src })
+      expect(processTextForEmoji(input, emojis, processor)).to.eql([
+        'Number one: that\'s terror'
+      ])
+    })
+  })
+
+  describe('getAttrs', () => {
+    it('extracts arguments from tag', () => {
+      const input = '<img src="boop" cool ebin=\'true\'>'
+      const output = { src: 'boop', cool: true, ebin: 'true' }
+
+      expect(getAttrs(input)).to.eql(output)
+    })
+  })
+})
diff --git a/test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js b/test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js
deleted file mode 100644
index 8df2fbc3..00000000
--- a/test/unit/specs/services/tiny_post_html_processor/mini_post_html_processor.spec.js
+++ /dev/null
@@ -1,166 +0,0 @@
-import { convertHtml, processTextForEmoji, getAttrs } from 'src/services/mini_html_converter/mini_html_converter.service.js'
-
-describe('MiniHtmlConverter', () => {
-  describe('convertHtml', () => {
-    it('converts html into a tree structure', () => {
-      const input = '1 <p>2</p> <b>3<img src="a">4</b>5'
-      expect(convertHtml(input)).to.eql([
-        '1 ',
-        [
-          '<p>',
-          ['2'],
-          '</p>'
-        ],
-        ' ',
-        [
-          '<b>',
-          [
-            '3',
-            ['<img src="a">'],
-            '4'
-          ],
-          '</b>'
-        ],
-        '5'
-      ])
-    })
-    it('converts html to tree while preserving tag formatting', () => {
-      const input = '1 <p >2</p><b >3<img   src="a">4</b>5'
-      expect(convertHtml(input)).to.eql([
-        '1 ',
-        [
-          '<p >',
-          ['2'],
-          '</p>'
-        ],
-        [
-          '<b >',
-          [
-            '3',
-            ['<img   src="a">'],
-            '4'
-          ],
-          '</b>'
-        ],
-        '5'
-      ])
-    })
-    it('converts semi-broken html', () => {
-      const input = '1 <br> 2 <p> 42'
-      expect(convertHtml(input)).to.eql([
-        '1 ',
-        ['<br>'],
-        ' 2 ',
-        [
-          '<p>',
-          [' 42']
-        ]
-      ])
-    })
-    it('realistic case 1', () => {
-      const input = '<p><span class="h-card"><a class="u-url mention" data-user="9wRC6T2ZZiKWJ0vUi8" href="https://cawfee.club/users/benis" rel="ugc">@<span>benis</span></a></span> <span class="h-card"><a class="u-url mention" data-user="194" href="https://shigusegubu.club/users/hj" rel="ugc">@<span>hj</span></a></span> nice</p>'
-      expect(convertHtml(input)).to.eql([
-        [
-          '<p>',
-          [
-            [
-              '<span class="h-card">',
-              [
-                [
-                  '<a class="u-url mention" data-user="9wRC6T2ZZiKWJ0vUi8" href="https://cawfee.club/users/benis" rel="ugc">',
-                  [
-                    '@',
-                    [
-                      '<span>',
-                      [
-                        'benis'
-                      ],
-                      '</span>'
-                    ]
-                  ],
-                  '</a>'
-                ]
-              ],
-              '</span>'
-            ],
-            ' ',
-            [
-              '<span class="h-card">',
-              [
-                [
-                  '<a class="u-url mention" data-user="194" href="https://shigusegubu.club/users/hj" rel="ugc">',
-                  [
-                    '@',
-                    [
-                      '<span>',
-                      [
-                        'hj'
-                      ],
-                      '</span>'
-                    ]
-                  ],
-                  '</a>'
-                ]
-              ],
-              '</span>'
-            ],
-            ' nice'
-          ],
-          '</p>'
-        ]
-      ])
-    })
-    it('realistic case 2', () => {
-      const inputOutput = 'Country improv: give me a city<br/>Audience: Memphis<br/>Improv troupe: come on, a better one<br/>Audience: el paso'
-      expect(convertHtml(inputOutput)).to.eql([
-        'Country improv: give me a city',
-        [
-          '<br/>'
-        ],
-        'Audience: Memphis',
-        [
-          '<br/>'
-        ],
-        'Improv troupe: come on, a better one',
-        [
-          '<br/>'
-        ],
-        'Audience: el paso'
-      ])
-    })
-  })
-
-  describe('processTextForEmoji', () => {
-    it('processes all emoji in text', () => {
-      const input = 'Hello from finland! :lol: We have best water! :lmao:'
-      const emojis = [
-        { shortcode: 'lol', src: 'LOL' },
-        { shortcode: 'lmao', src: 'LMAO' }
-      ]
-      const processor = ({ shortcode, src }) => ({ shortcode, src })
-      expect(processTextForEmoji(input, emojis, processor)).to.eql([
-        'Hello from finland! ',
-        { shortcode: 'lol', src: 'LOL' },
-        ' We have best water! ',
-        { shortcode: 'lmao', src: 'LMAO' }
-      ])
-    })
-    it('leaves text as is', () => {
-      const input = 'Number one: that\'s terror'
-      const emojis = []
-      const processor = ({ shortcode, src }) => ({ shortcode, src })
-      expect(processTextForEmoji(input, emojis, processor)).to.eql([
-        'Number one: that\'s terror'
-      ])
-    })
-  })
-
-  describe('getAttrs', () => {
-    it('extracts arguments from tag', () => {
-      const input = '<img src="boop" cool ebin=\'true\'>'
-      const output = { src: 'boop', cool: true, ebin: 'true' }
-
-      expect(getAttrs(input)).to.eql(output)
-    })
-  })
-})
diff --git a/test/unit/specs/services/tiny_post_html_processor/tiny_post_html_processor.spec.js b/test/unit/specs/services/tiny_post_html_processor/tiny_post_html_processor.spec.js
deleted file mode 100644
index f301429d..00000000
--- a/test/unit/specs/services/tiny_post_html_processor/tiny_post_html_processor.spec.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js'
-
-describe('TinyPostHTMLProcessor', () => {
-  describe('with processor that keeps original line should not make any changes to HTML when', () => {
-    const processorKeep = (line) => line
-    it('fed with regular HTML with newlines', () => {
-      const inputOutput = '1<br/>2<p class="lol">3 4</p> 5 \n 6 <p > 7 <br> 8 </p> <br>\n<br/>'
-      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
-    })
-
-    it('fed with possibly broken HTML with invalid tags/composition', () => {
-      const inputOutput = '<feeee dwdwddddddw> <i>ayy<b>lm</i>ao</b> </section>'
-      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
-    })
-
-    it('fed with very broken HTML with broken composition', () => {
-      const inputOutput = '</p> lmao what </div> whats going on <div> wha <p>'
-      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
-    })
-
-    it('fed with sorta valid HTML but tags aren\'t closed', () => {
-      const inputOutput = 'just leaving a <div> hanging'
-      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
-    })
-
-    it('fed with not really HTML at this point... tags that aren\'t finished', () => {
-      const inputOutput = 'do you expect me to finish this <div class='
-      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
-    })
-
-    it('fed with dubiously valid HTML (p within p and also div inside p)', () => {
-      const inputOutput = 'look ma <p> p \nwithin <p> p! </p> and a <br/><div>div!</div></p>'
-      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
-    })
-
-    it('fed with maybe valid HTML? self-closing divs and ps', () => {
-      const inputOutput = 'a <div class="what"/> what now <p aria-label="wtf"/> ?'
-      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
-    })
-
-    it('fed with valid XHTML containing a CDATA', () => {
-      const inputOutput = 'Yes, it is me, <![CDATA[DIO]]>'
-      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
-    })
-  })
-  describe('with processor that replaces lines with word "_" should match expected line when', () => {
-    const processorReplace = (line) => '_'
-    it('fed with regular HTML with newlines', () => {
-      const input = '1<br/>2<p class="lol">3 4</p> 5 \n 6 <p > 7 <br> 8 </p> <br>\n<br/>'
-      const output = '_<br/>_<p class="lol">_</p>_\n_<p >_<br>_</p> <br>\n<br/>'
-      expect(processHtml(input, processorReplace)).to.eql(output)
-    })
-
-    it('fed with possibly broken HTML with invalid tags/composition', () => {
-      const input = '<feeee dwdwddddddw> <i>ayy<b>lm</i>ao</b> </section>'
-      const output = '_'
-      expect(processHtml(input, processorReplace)).to.eql(output)
-    })
-
-    it('fed with very broken HTML with broken composition', () => {
-      const input = '</p> lmao what </div> whats going on <div> wha <p>'
-      const output = '</p>_</div>_<div>_<p>'
-      expect(processHtml(input, processorReplace)).to.eql(output)
-    })
-
-    it('fed with sorta valid HTML but tags aren\'t closed', () => {
-      const input = 'just leaving a <div> hanging'
-      const output = '_<div>_'
-      expect(processHtml(input, processorReplace)).to.eql(output)
-    })
-
-    it('fed with not really HTML at this point... tags that aren\'t finished', () => {
-      const input = 'do you expect me to finish this <div class='
-      const output = '_'
-      expect(processHtml(input, processorReplace)).to.eql(output)
-    })
-
-    it('fed with dubiously valid HTML (p within p and also div inside p)', () => {
-      const input = 'look ma <p> p \nwithin <p> p! </p> and a <br/><div>div!</div></p>'
-      const output = '_<p>_\n_<p>_</p>_<br/><div>_</div></p>'
-      expect(processHtml(input, processorReplace)).to.eql(output)
-    })
-
-    it('fed with maybe valid HTML? self-closing divs and ps', () => {
-      const input = 'a <div class="what"/> what now <p aria-label="wtf"/> ?'
-      const output = '_<div class="what"/>_<p aria-label="wtf"/>_'
-      expect(processHtml(input, processorReplace)).to.eql(output)
-    })
-
-    it('fed with valid XHTML containing a CDATA', () => {
-      const input = 'Yes, it is me, <![CDATA[DIO]]>'
-      const output = '_'
-      expect(processHtml(input, processorReplace)).to.eql(output)
-    })
-  })
-})
-- 
cgit v1.2.3-70-g09d2


From f883d2f75cd3c404115bd2c98b6d3c8d7ff10ef6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 11 Jun 2021 03:11:58 +0300
Subject: better handling of hellthreads with mentions at bottom

---
 src/components/mention_link/mention_link.js      |   6 -
 src/components/mention_link/mention_link.scss    |   4 -
 src/components/mentions_line/mentions_line.scss  |   1 +
 src/components/rich_content/rich_content.jsx     | 198 ++++++++++++-----------
 src/components/status/status.js                  |  16 +-
 src/components/status/status.vue                 |   6 +-
 src/components/status_body/status_body.js        |  24 ++-
 src/components/status_body/status_body.vue       |  13 +-
 src/components/status_content/status_content.js  |   7 +-
 src/components/status_content/status_content.vue |   5 +-
 10 files changed, 138 insertions(+), 142 deletions(-)

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

diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index 00b9e388..eec116db 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -28,11 +28,6 @@ const MentionLink = {
     userScreenName: {
       required: false,
       type: String
-    },
-    firstMention: {
-      required: false,
-      type: Boolean,
-      default: false
     }
   },
   methods: {
@@ -89,7 +84,6 @@ const MentionLink = {
         {
           '-you': this.isYou,
           '-highlighted': this.highlight,
-          '-firstMention': this.firstMention,
           '-oldStyle': this.oldStyle
         },
         this.highlightType
diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index 9df1ccfe..1be3e7c5 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -38,10 +38,6 @@
   .new {
     margin-right: 0.25em;
 
-    &.-firstMention {
-      display: none;
-    }
-
     &.-you {
       & .shortName,
       & .full {
diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss
index 735502de..59f75fbb 100644
--- a/src/components/mentions_line/mentions_line.scss
+++ b/src/components/mentions_line/mentions_line.scss
@@ -1,5 +1,6 @@
 .MentionsLine {
   .showMoreLess {
+    white-space: normal;
     &.-newStyle {
       line-height: 1.5;
       font-size: inherit;
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index 590fea0f..8972c494 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -33,22 +33,23 @@ export default Vue.component('RichContent', {
       default: false
     },
     // Whether to hide last mentions (hellthreads)
-    hideLastMentions: {
-      required: false,
-      type: Boolean,
-      default: false
-    },
-    // Whether to hide first mentions
-    hideFirstMentions: {
+    hideMentions: {
       required: false,
       type: Boolean,
       default: false
     }
   },
+  // NEVER EVER TOUCH DATA INSIDE RENDER
   render (h) {
     // Pre-process HTML
-    const html = preProcessPerLine(this.html, this.greentext, this.hideLastMentions)
-    console.log(this.hideFirstMentions, this.hideLastMentions)
+    const { newHtml: html, lastMentions } = preProcessPerLine(this.html, this.greentext, this.hideLastMentions)
+    const firstMentions = [] // Mentions that appear in the beginning of post body
+    const lastTags = [] // Tags that appear at the end of post body
+    const writtenMentions = [] // All mentions that appear in post body
+    const writtenTags = [] // All tags that appear in post body
+    // unique index for vue "tag" property
+    let mentionIndex = 0
+    let tagsIndex = 0
 
     const renderImage = (tag) => {
       return <StillImage
@@ -57,20 +58,37 @@ export default Vue.component('RichContent', {
       />
     }
 
+    const renderHashtag = (attrs, children, encounteredTextReverse) => {
+      const linkData = getLinkData(attrs, children, tagsIndex++)
+      writtenTags.push(linkData)
+      attrs.target = '_blank'
+      if (!encounteredTextReverse) {
+        lastTags.push(linkData)
+        attrs['data-parser-last'] = true
+      }
+      return <a {...{ attrs }}>
+        { children.map(processItem) }
+      </a>
+    }
+
     const renderMention = (attrs, children, encounteredText) => {
-      return (this.hideFirstMentions && !encounteredText)
-        ? ''
-        : <MentionLink
+      const linkData = getLinkData(attrs, children, mentionIndex++)
+      writtenMentions.push(linkData)
+      if (!encounteredText) {
+        firstMentions.push(linkData)
+        return ''
+      } else {
+        return <MentionLink
           url={attrs.href}
           content={flattenDeep(children).join('')}
-          firstMention={!encounteredText}
         />
+      }
     }
 
     // We stop treating mentions as "first" ones when we encounter
     // non-whitespace text
     let encounteredText = false
-    // Processor to use with mini_html_converter
+    // Processor to use with html_tree_converter
     const processItem = (item, index, array, what) => {
       // Handle text nodes - just add emoji
       if (typeof item === 'string') {
@@ -104,12 +122,22 @@ export default Vue.component('RichContent', {
       if (Array.isArray(item)) {
         const [opener, children] = item
         const Tag = getTagName(opener)
+        const attrs = getAttrs(opener)
         switch (Tag) {
+          case 'span': // replace images with StillImage
+            if (attrs['class'] && attrs['class'].includes('lastMentions')) {
+              if (firstMentions.length > 0) {
+                break
+              } else {
+                return ''
+              }
+            } else {
+              break
+            }
           case 'img': // replace images with StillImage
             return renderImage(opener)
           case 'a': // replace mentions with MentionLink
             if (!this.handleLinks) break
-            const attrs = getAttrs(opener)
             if (attrs['class'] && attrs['class'].includes('mention')) {
               return renderMention(attrs, children, encounteredText)
             } else if (attrs['class'] && attrs['class'].includes('hashtag')) {
@@ -132,17 +160,9 @@ export default Vue.component('RichContent', {
         }
       }
     }
+
     // Processor for back direction (for finding "last" stuff, just easier this way)
     let encounteredTextReverse = false
-    const renderHashtag = (attrs, children, encounteredTextReverse) => {
-      attrs.target = '_blank'
-      if (!encounteredTextReverse) {
-        attrs['data-parser-last'] = true
-      }
-      return <a {...{ attrs }}>
-        { children.map(processItem) }
-      </a>
-    }
     const processItemReverse = (item, index, array, what) => {
       // Handle text nodes - just add emoji
       if (typeof item === 'string') {
@@ -166,14 +186,37 @@ export default Vue.component('RichContent', {
       }
       return item
     }
-    return <span class="RichContent">
+
+    const event = {
+      firstMentions,
+      lastMentions,
+      lastTags,
+      writtenMentions,
+      writtenTags
+    }
+
+    const result = <span class="RichContent">
       { this.$slots.prefix }
       { convertHtmlToTree(html).map(processItem).reverse().map(processItemReverse).reverse() }
       { this.$slots.suffix }
     </span>
+
+    // DO NOT MOVE TO UPDATE. BAD IDEA.
+    this.$emit('parseReady', event)
+
+    return result
   }
 })
 
+const getLinkData = (attrs, children, index) => {
+  return {
+    index,
+    url: attrs.href,
+    hashtag: attrs['data-tag'],
+    content: flattenDeep(children).join('')
+  }
+}
+
 /** Pre-processing HTML
  *
  * Currently this does two things:
@@ -183,13 +226,13 @@ export default Vue.component('RichContent', {
  *
  * @param {String} html - raw HTML to process
  * @param {Boolean} greentext - whether to enable greentexting or not
- * @param {Boolean} removeLastMentions - whether to remove last mentions
  */
-export const preProcessPerLine = (html, greentext, removeLastMentions) => {
-  // Only mark first (last) encounter
-  let lastMentionsMarked = false
+export const preProcessPerLine = (html, greentext) => {
+  const lastMentions = []
 
-  return convertHtmlToLines(html).reverse().map((item, index, array) => {
+  const newHtml = convertHtmlToLines(html).reverse().map((item, index, array) => {
+    // Going over each line in reverse to detect last mentions,
+    // keeping non-text stuff as-is
     if (!item.text) return item
     const string = item.text
 
@@ -205,6 +248,7 @@ export const preProcessPerLine = (html, greentext, removeLastMentions) => {
       }
     }
 
+    // Converting that line part into tree
     const tree = convertHtmlToTree(string)
 
     // If line has loose text, i.e. text outside a mention or a tag
@@ -215,18 +259,23 @@ export const preProcessPerLine = (html, greentext, removeLastMentions) => {
       if (Array.isArray(item)) {
         const [opener, children, closer] = item
         const tag = getTagName(opener)
+        // If we have a link we probably have mentions
         if (tag === 'a') {
           const attrs = getAttrs(opener)
           if (attrs['class'] && attrs['class'].includes('mention')) {
+            // Got mentions
             hasMentions = true
             return [opener, children, closer]
           } else {
+            // Not a mention? Means we have loose text or whatever
             hasLooseText = true
             return [opener, children, closer]
           }
         } else if (tag === 'span' || tag === 'p') {
-          return [opener, [...children].reverse().map(process).reverse(), closer]
+          // For span and p we need to go deeper
+          return [opener, [...children].map(process), closer]
         } else {
+          // Everything else equals to a loose text
           hasLooseText = true
           return [opener, children, closer]
         }
@@ -234,82 +283,43 @@ export const preProcessPerLine = (html, greentext, removeLastMentions) => {
 
       if (typeof item === 'string') {
         if (item.trim() !== '') {
+          // only meaningful strings are loose text
           hasLooseText = true
         }
         return item
       }
     }
 
-    const result = [...tree].reverse().map(process).reverse()
+    // We now processed our tree, now we need to mark line as lastMentions
+    const result = [...tree].map(process)
 
-    if (removeLastMentions && hasMentions && !hasLooseText && !lastMentionsMarked) {
-      lastMentionsMarked = true
-      return ''
+    // Only check last (first since list is reversed) line
+    if (hasMentions && !hasLooseText && index === 0) {
+      let mentionIndex = 0
+      const process = (item) => {
+        if (Array.isArray(item)) {
+          const [opener, children] = item
+          const tag = getTagName(opener)
+          if (tag === 'a') {
+            const attrs = getAttrs(opener)
+            lastMentions.push(getLinkData(attrs, children, mentionIndex++))
+          } else if (children) {
+            children.forEach(process)
+          }
+        }
+      }
+      result.forEach(process)
+      // we DO need mentions here so that we conditionally remove them if don't
+      // have first mentions
+      return ['<span class="lastMentions">', flattenDeep(result).join(''), '</span>'].join('')
     } else {
       return flattenDeep(result).join('')
     }
   }).reverse().join('')
+
+  return { newHtml, lastMentions }
 }
 
 export const getHeadTailLinks = (html) => {
   // Exported object properties
-  const firstMentions = [] // Mentions that appear in the beginning of post body
-  const lastMentions = [] // Mentions that appear at the end of post body
-  const lastTags = [] // Tags that appear at the end of post body
-  const writtenMentions = [] // All mentions that appear in post body
-  const writtenTags = [] // All tags that appear in post body
-
-  let encounteredText = false
-  let processingFirstMentions = true
-  let index = 0 // unique index for vue "tag" property
-
-  const getLinkData = (attrs, children, index) => {
-    return {
-      index,
-      url: attrs.href,
-      hashtag: attrs['data-tag'],
-      content: flattenDeep(children).join('')
-    }
-  }
-
-  // Processor to use with html_tree_converter
-  const processItem = (item) => {
-    // Handle text nodes - stop treating mentions as "first" when text encountered
-    if (typeof item === 'string') {
-      const emptyText = item.trim() === ''
-      if (emptyText) return
-      if (!encounteredText) {
-        encounteredText = true
-        processingFirstMentions = false
-      }
-      // Encountered text? That means tags we've been collectings aren't "last"!
-      lastTags.splice(0)
-      lastMentions.splice(0)
-      return
-    }
-    // Handle tag nodes
-    if (Array.isArray(item)) {
-      const [opener, children] = item
-      const Tag = getTagName(opener)
-      if (Tag !== 'a') return children && children.forEach(processItem)
-      const attrs = getAttrs(opener)
-      if (attrs['class']) {
-        const linkData = getLinkData(attrs, children, index++)
-        if (attrs['class'].includes('mention')) {
-          if (processingFirstMentions) {
-            firstMentions.push(linkData)
-          }
-          writtenMentions.push(linkData)
-          lastMentions.push(linkData)
-        } else if (attrs['class'].includes('hashtag')) {
-          lastTags.push(linkData)
-          writtenTags.push(linkData)
-        }
-        return // Stop processing, we don't care about link's contents
-      }
-      children && children.forEach(processItem)
-    }
-  }
-  convertHtmlToTree(html).forEach(processItem)
-  return { firstMentions, writtenMentions, writtenTags, lastTags, lastMentions }
 }
diff --git a/src/components/status/status.js b/src/components/status/status.js
index bab818fc..5b178c2e 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -19,7 +19,6 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import { muteWordHits } from '../../services/status_parser/status_parser.js'
 import { unescape, uniqBy } from 'lodash'
-import { getHeadTailLinks } from 'src/components/rich_content/rich_content.jsx'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -101,7 +100,8 @@ const Status = {
       userExpanded: false,
       mediaPlaying: [],
       suspendable: true,
-      error: null
+      error: null,
+      headTailLinks: null
     }
   },
   computed: {
@@ -168,9 +168,6 @@ const Status = {
     muteWordHits () {
       return muteWordHits(this.status, this.muteWords)
     },
-    headTailLinks () {
-      return getHeadTailLinks(this.status.raw_html)
-    },
     mentions () {
       return this.status.attentions.filter(attn => {
         return attn.screen_name !== this.replyToName &&
@@ -182,6 +179,7 @@ const Status = {
       }))
     },
     alsoMentions () {
+      if (!this.headTailLinks) return []
       const set = new Set(this.headTailLinks.writtenMentions.map(m => m.url))
       return this.headTailLinks.writtenMentions.filter(mention => {
         return !set.has(mention.url)
@@ -196,9 +194,6 @@ const Status = {
     hasMentionsLine () {
       return this.mentionsLine.length > 0
     },
-    hideLastMentions () {
-      return this.headTailLinks.firstMentions.length === 0
-    },
     muted () {
       if (this.statusoid.user.id === this.currentUser.id) return false
       const { status } = this
@@ -346,6 +341,9 @@ const Status = {
     },
     removeMediaPlaying (id) {
       this.mediaPlaying = this.mediaPlaying.filter(mediaId => mediaId !== id)
+    },
+    setHeadTailLinks (headTailLinks) {
+      this.headTailLinks = headTailLinks
     }
   },
   watch: {
@@ -356,7 +354,7 @@ const Status = {
           // Post is above screen, match its top to screen top
           window.scrollBy(0, rect.top - 100)
         } else if (rect.height >= (window.innerHeight - 50)) {
-          // Post we want to see is taller than screen so match its top to screen top
+          // Post we wahttp://localhost:8080/users/hj/dmsnt to see is taller than screen so match its top to screen top
           window.scrollBy(0, rect.top - 100)
         } else if (rect.bottom > window.innerHeight - 50) {
           // Post is below screen, match its bottom to screen bottom
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 0190d864..507e4192 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -305,11 +305,11 @@
             :no-heading="noHeading"
             :highlight="highlight"
             :focused="isFocused"
-            :hide-first-mentions="mentionsOwnLine && isReply"
-            :hide-last-mentions="hideLastMentions"
-            :head-tail-links="headTailLinks"
+            :hide-mentions="mentionsOwnLine && (isReply || true)"
             @mediaplay="addMediaPlaying($event)"
             @mediapause="removeMediaPlaying($event)"
+            @parseReady="setHeadTailLinks"
+            ref="content"
           />
 
           <div
diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index 2fc9abbf..7433619b 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -3,6 +3,7 @@ import RichContent, { getHeadTailLinks } from 'src/components/rich_content/rich_
 import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
+import { set } from 'vue'
 import {
   faFile,
   faMusic,
@@ -27,11 +28,7 @@ const StatusContent = {
     'noHeading',
     'fullContent',
     'singleLine',
-    // if this was computed at upper level it can be passed here, otherwise
-    // it will be in this component
-    'headTailLinks',
-    'hideFirstMentions',
-    'hideLastMentions'
+    'hideMentions'
   ],
   data () {
     return {
@@ -39,9 +36,9 @@ const StatusContent = {
       showingLongSubject: false,
       // not as computed because it sets the initial state which will be changed later
       expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject,
-      headTailLinksComputed: this.headTailLinks
-        ? this.headTailLinks
-        : getHeadTailLinks(this.status.raw_html)
+      headTailLinks: null,
+      firstMentions: [],
+      lastMentions: []
     }
   },
   computed: {
@@ -81,12 +78,6 @@ const StatusContent = {
     attachmentTypes () {
       return this.status.attachments.map(file => fileType.fileType(file.mimetype))
     },
-    mentionsFirst () {
-      return this.headTailLinksComputed.firstMentions
-    },
-    mentionsLast () {
-      return this.headTailLinksComputed.lastMentions
-    },
     ...mapGetters(['mergedConfig'])
   },
   components: {
@@ -107,6 +98,11 @@ const StatusContent = {
         this.expandingSubject = !this.expandingSubject
       }
     },
+    setHeadTailLinks (headTailLinks) {
+      set(this, 'headTailLinks', headTailLinks)
+      set(this, 'firstMentions', headTailLinks.firstMentions)
+      set(this, 'lastMentions', headTailLinks.lastMentions)
+    },
     generateTagLink (tag) {
       return `/tag/${tag}`
     }
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index bd599a8c..68f6701f 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -48,20 +48,21 @@
             :html="status.raw_html"
             :emoji="status.emojis"
             :handle-links="true"
+            :hide-mentions="hideMentions"
             :greentext="mergedConfig.greentext"
-            :hide-first-mentions="hideFirstMentions"
-            :hide-last-mentions="hideLastMentions"
+            @parseReady="setHeadTailLinks"
+            ref="text"
           >
             <template v-slot:prefix>
               <MentionsLine
-                v-if="!hideFirstMentions && mentionsFirst"
-                :mentions="mentionsFirst"
+                v-if="!hideMentions && firstMentions && firstMentions.length > 0"
+                :mentions="firstMentions"
               />
             </template>
             <template v-slot:suffix>
               <MentionsLine
-                v-if="!hideFirstMentions && mentionsLast"
-                :mentions="mentionsLast"
+                v-if="!hideMentions && lastMentions.length > 0 && firstMentions.length === 0"
+                :mentions="lastMentions"
               />
             </template>
           </RichContent>
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index 64cc6d44..11a4974b 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -32,9 +32,7 @@ const StatusContent = {
     'noHeading',
     'fullContent',
     'singleLine',
-    'hideFirstMentions',
-    'hideLastMentions',
-    'headTailLinks'
+    'hideMentions'
   ],
   computed: {
     hideAttachments () {
@@ -94,6 +92,9 @@ const StatusContent = {
     StatusBody
   },
   methods: {
+    setHeadTailLinks (headTailLinks) {
+      this.$emit('parseReady', headTailLinks)
+    },
     setMedia () {
       const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
       return () => this.$store.dispatch('setMedia', attachments)
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index c32bbbfb..feb34d2c 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -4,9 +4,8 @@
     <StatusBody
       :status="status"
       :single-line="singleLine"
-      :hide-first-mentions="hideFirstMentions"
-      :hide-last-mentions="hideLastMentions"
-      :head-tail-links="headTailLinks"
+      :hide-mentions="hideMentions"
+      @parseReady="setHeadTailLinks"
     >
       <div v-if="status.poll && status.poll.options">
         <poll :base-poll="status.poll" />
-- 
cgit v1.2.3-70-g09d2


From 418f029789f5e1cc22fd7db4f269088633d90050 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 12 Jun 2021 20:42:17 +0300
Subject: review + fixes

---
 src/components/mention_link/mention_link.vue       |  2 --
 src/components/mentions_line/mentions_line.scss    |  1 +
 src/components/rich_content/rich_content.jsx       | 21 ++++++++++++++++
 .../settings_modal/tabs/theme_tab/theme_tab.js     |  2 +-
 src/components/status/status.js                    |  6 ++---
 src/components/status_body/status_body.scss        |  8 -------
 src/components/status_body/status_body.vue         |  4 ++--
 .../entity_normalizer/entity_normalizer.service.js |  6 -----
 test/unit/specs/components/rich_content.spec.js    | 28 ++++++++++++++++++++++
 .../entity_normalizer/entity_normalizer.spec.js    |  8 -------
 10 files changed, 55 insertions(+), 31 deletions(-)

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

diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 3449f4bd..e4d395fa 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -41,12 +41,10 @@
         class="full popover-default"
         :class="[highlightType]"
       >
-        <!-- eslint-disable vue/no-v-html -->
         <span
           class="userNameFull"
           v-text="'@' + userNameFull"
         />
-        <!-- eslint-enable vue/no-v-html -->
       </span>
     </span>
   </span>
diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss
index 59f75fbb..90d1e0a4 100644
--- a/src/components/mentions_line/mentions_line.scss
+++ b/src/components/mentions_line/mentions_line.scss
@@ -1,6 +1,7 @@
 .MentionsLine {
   .showMoreLess {
     white-space: normal;
+
     &.-newStyle {
       line-height: 1.5;
       font-size: inherit;
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index ef15aaeb..0aae7a55 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -8,6 +8,25 @@ import MentionLink from 'src/components/mention_link/mention_link.vue'
 
 import './rich_content.scss'
 
+/**
+ * RichContent, The Über-powered component for rendering Post HTML.
+ *
+ * This takes post HTML and does multiple things to it:
+ * - Converts mention links to <MentionLink>-s
+ * - Removes mentions from beginning and end (hellthread style only)
+ * - Replaces emoji shortcodes with <StillImage>'d images.
+ *
+ * Stuff like removing mentions from beginning and end is done so that they could
+ * be either replaced by collapsible <MentionsLine>  or moved to separate place.
+ * There are two problems with this component's architecture:
+ * 1. Parsing HTML and rendering are inseparable. Attempts to separate the two
+ *    proven to be a massive overcomplication due to amount of things done here.
+ * 2. We need to output both render and some extra data, which seems to be imp-
+ *    possible in vue. Current solution is to emit 'parseReady' event when parsing
+ *    is done within render() function.
+ *
+ * Apart from that one small hiccup with emit in render this _should_ be vue3-ready
+ */
 export default Vue.component('RichContent', {
   name: 'RichContent',
   props: {
@@ -241,8 +260,10 @@ export const preProcessPerLine = (html, greentext, handleLinks) => {
         .replace(/@\w+/gi, '') // remove mentions (even failed ones)
         .trim()
       if (cleanedString.startsWith('&gt;')) {
+        nonEmptyIndex += 1
         return `<span class='greentext'>${string}</span>`
       } else if (cleanedString.startsWith('&lt;')) {
+        nonEmptyIndex += 1
         return `<span class='cyantext'>${string}</span>`
       }
     }
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 63416e93..85749045 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -474,7 +474,7 @@ export default {
           this.loadThemeFromLocalStorage(false, true)
           break
         case 'file':
-          console.error('Forcing snapshout from file is not supported yet')
+          console.error('Forcing snapshot from file is not supported yet')
           break
       }
       this.dismissWarning()
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 5b178c2e..ae734493 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -35,8 +35,7 @@ import {
   faStar,
   faEyeSlash,
   faEye,
-  faThumbtack,
-  faAt
+  faThumbtack
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -53,8 +52,7 @@ library.add(
   faEllipsisH,
   faEyeSlash,
   faEye,
-  faThumbtack,
-  faAt
+  faThumbtack
 )
 
 const Status = {
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index da5d4dd3..81a687f1 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -115,12 +115,4 @@
   .cyantext {
     color: var(--postCyantext, $fallback--cBlue);
   }
-
-  /* Not sure if this is necessary */
-  video {
-    max-width: 100%;
-    max-height: 400px;
-    vertical-align: middle;
-    object-fit: contain;
-  }
 }
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index aac44e42..0eb11ad0 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -2,7 +2,7 @@
   <div class="StatusBody">
     <div class="body">
       <div
-        v-if="status.summary_html"
+        v-if="status.summary_raw_html"
         class="summary-wrapper"
         :class="{ '-tall': (longSubject && !showingLongSubject) }"
       >
@@ -39,7 +39,7 @@
           {{ $t("general.show_more") }}
         </button>
         <span
-          v-if="!hideSubjectStatus && !(singleLine && status.summary_html)"
+          v-if="!hideSubjectStatus && !(singleLine && status.summary_raw_html)"
           class="rich-content-wrapper"
         >
           <MentionsLine
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 613ed566..477b861f 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -296,7 +296,6 @@ export const parseStatus = (data) => {
     }
 
     output.summary_raw_html = escape(data.spoiler_text)
-    output.summary_html = addEmojis(escape(data.spoiler_text), data.emojis)
     output.external_url = data.url
     output.poll = data.poll
     if (output.poll) {
@@ -449,11 +448,6 @@ export const parseChatMessage = (message) => {
   output.chat_id = message.chat_id
   output.emojis = message.emojis
   output.content = message.content
-  if (message.content) {
-    output.content = addEmojis(message.content, message.emojis)
-  } else {
-    output.content = ''
-  }
   if (message.attachment) {
     output.attachments = [parseAttachment(message.attachment)]
   } else {
diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index 05c0b259..f2c3f04e 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -354,4 +354,32 @@ describe('RichContent', () => {
 
     expect(wrapper.html()).to.eql(compwrap(html))
   })
+
+  it('Greentext + last mentions', () => {
+    const html = [
+      '&gt;quote',
+      makeMention('lol'),
+      '&gt;quote',
+      '&gt;quote'
+    ].join('\n')
+    const expected = [
+      '<span class="greentext">&gt;quote</span>',
+      stubMention('lol'),
+      '<span class="greentext">&gt;quote</span>',
+      '<span class="greentext">&gt;quote</span>'
+    ].join('\n')
+
+    const wrapper = shallowMount(RichContent, {
+      localVue,
+      propsData: {
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(expected))
+  })
+
 })
diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
index c8965785..8a5a6ef9 100644
--- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
+++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
@@ -231,14 +231,6 @@ describe('API Entities normalizer', () => {
         expect(parsedRepeat).to.have.property('retweeted_status')
         expect(parsedRepeat).to.have.deep.property('retweeted_status.id', 'deadbeef')
       })
-
-      it('adds emojis to subject line', () => {
-        const post = makeMockStatusMasto({ emojis: makeMockEmojiMasto(), spoiler_text: 'CW: 300 IQ :thinking:' })
-
-        const parsedPost = parseStatus(post)
-
-        expect(parsedPost).to.have.property('summary_html').that.contains('<img')
-      })
     })
   })
 
-- 
cgit v1.2.3-70-g09d2


From e825021ef1ae7a672b275227a6a1ff44d5f522bc Mon Sep 17 00:00:00 2001
From: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Sat, 12 Jun 2021 18:55:18 +0000
Subject: Apply 1 suggestion(s) to 1 file(s)

---
 src/components/status/status.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

diff --git a/src/components/status/status.js b/src/components/status/status.js
index ae734493..3c21cb76 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -352,7 +352,7 @@ const Status = {
           // Post is above screen, match its top to screen top
           window.scrollBy(0, rect.top - 100)
         } else if (rect.height >= (window.innerHeight - 50)) {
-          // Post we wahttp://localhost:8080/users/hj/dmsnt to see is taller than screen so match its top to screen top
+          // Post we want to see is taller than screen so match its top to screen top
           window.scrollBy(0, rect.top - 100)
         } else if (rect.bottom > window.innerHeight - 50) {
           // Post is below screen, match its bottom to screen bottom
-- 
cgit v1.2.3-70-g09d2


From 2cfff1b8b9c642e9284483d6658312d9a3763417 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 12 Aug 2021 02:49:37 +0300
Subject: remove new options for style and separate line, now groups all
 chained mentions on a mentionsline regardless of placement. fixes spacing

---
 src/components/mention_link/mention_link.js        |   6 +-
 src/components/mention_link/mention_link.scss      |  41 ---
 src/components/mention_link/mention_link.vue       |   3 +-
 src/components/mentions_line/mentions_line.js      |  15 +-
 src/components/mentions_line/mentions_line.scss    |  15 +-
 src/components/mentions_line/mentions_line.vue     |   6 +-
 src/components/rich_content/rich_content.jsx       | 128 ++-----
 src/components/settings_modal/tabs/general_tab.vue |  10 -
 src/components/status/status.js                    |   5 +-
 src/components/status/status.vue                   |   1 -
 src/components/status_body/status_body.js          |   3 +-
 src/components/status_body/status_body.vue         |   1 -
 src/components/status_content/status_content.js    |   3 +-
 src/components/status_content/status_content.vue   |   1 -
 src/modules/config.js                              |   2 -
 test/unit/specs/components/rich_content.spec.js    | 399 +--------------------
 16 files changed, 55 insertions(+), 584 deletions(-)

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

diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index eec116db..a60a8040 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -65,9 +65,6 @@ const MentionLink = {
     highlightClass () {
       if (this.highlight) return highlightClass(this.user)
     },
-    oldStyle () {
-      return !this.mergedConfig.mentionsNewStyle
-    },
     style () {
       if (this.highlight) {
         const {
@@ -83,8 +80,7 @@ const MentionLink = {
       return [
         {
           '-you': this.isYou,
-          '-highlighted': this.highlight,
-          '-oldStyle': this.oldStyle
+          '-highlighted': this.highlight
         },
         this.highlightType
       ]
diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index 5f5da98f..ec2689f8 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -10,10 +10,6 @@
     border-radius: 2px;
   }
 
-  .original {
-    margin-right: 0.25em;
-  }
-
   .full {
     position: absolute;
     display: inline-block;
@@ -41,8 +37,6 @@
   }
 
   .new {
-    margin-right: 0.25em;
-
     &.-you {
       & .shortName,
       & .full {
@@ -61,41 +55,6 @@
       margin: 0;
     }
 
-    &:not(.-oldStyle) {
-      .short {
-        padding-left: 0.25em;
-        padding-right: 0;
-        padding-top: 0;
-        padding-bottom: 0;
-        line-height: 1.5;
-        font-size: inherit;
-
-        .at {
-          color: var(--faint);
-          opacity: 0.8;
-          padding-right: 0.25em;
-          vertical-align: -20%;
-        }
-      }
-
-      .you {
-        padding-right: 0.25em;
-      }
-
-      .userName {
-        display: inline-block;
-        color: var(--link);
-        line-height: inherit;
-        margin-left: 0;
-        padding-left: 0.125em;
-        padding-right: 0.25em;
-        padding-top: 0;
-        padding-bottom: 0;
-        border-top-right-radius: var(--btnRadius);
-        border-bottom-right-radius: var(--btnRadius);
-      }
-    }
-
     &.-striped {
       & .userName,
       & .full {
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 514b7475..625eb727 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -18,8 +18,7 @@
       :class="classnames"
     >
       <button
-        class="short"
-        :class="[{ '-sublime': !highlight }, oldStyle ? 'button-unstyled' : 'button-default']"
+        class="short button-unstyled"
         @click.prevent="onClick"
       >
         <!-- eslint-disable vue/no-v-html -->
diff --git a/src/components/mentions_line/mentions_line.js b/src/components/mentions_line/mentions_line.js
index e52045ec..33e25391 100644
--- a/src/components/mentions_line/mentions_line.js
+++ b/src/components/mentions_line/mentions_line.js
@@ -14,11 +14,8 @@ const MentionsLine = {
     MentionLink
   },
   computed: {
-    oldStyle () {
-      return !this.mergedConfig.mentionsNewStyle
-    },
     limit () {
-      return 6
+      return 2
     },
     mentionsComputed () {
       return this.mentions.slice(0, this.limit)
@@ -29,16 +26,6 @@ const MentionsLine = {
     manyMentions () {
       return this.extraMentions.length > 0
     },
-    buttonClasses () {
-      return [
-        this.oldStyle
-          ? 'button-unstyled'
-          : 'button-default -sublime',
-        this.oldStyle
-          ? '-oldStyle'
-          : '-newStyle'
-      ]
-    },
     ...mapGetters(['mergedConfig'])
   },
   methods: {
diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss
index 90d1e0a4..222940c8 100644
--- a/src/components/mentions_line/mentions_line.scss
+++ b/src/components/mentions_line/mentions_line.scss
@@ -1,17 +1,10 @@
 .MentionsLine {
   .showMoreLess {
     white-space: normal;
+    color: var(--link);
+  }
 
-    &.-newStyle {
-      line-height: 1.5;
-      font-size: inherit;
-      display: inline-block;
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    &.-oldStyle {
-      color: var(--link);
-    }
+  .mention-link:not(:last-child) {
+    margin-right: 0.25em;
   }
 }
diff --git a/src/components/mentions_line/mentions_line.vue b/src/components/mentions_line/mentions_line.vue
index f4b3abb9..f375e3b0 100644
--- a/src/components/mentions_line/mentions_line.vue
+++ b/src/components/mentions_line/mentions_line.vue
@@ -25,15 +25,13 @@
         />
       </span><button
         v-if="!expanded"
-        class="showMoreLess"
-        :class="buttonClasses"
+        class="button-unstyled showMoreLess"
         @click="toggleShowMore"
       >
         {{ $t('status.plus_more', { number: extraMentions.length }) }}
       </button><button
         v-if="expanded"
-        class="showMoreLess"
-        :class="buttonClasses"
+        class="button-unstyled showMoreLess"
         @click="toggleShowMore"
       >
         {{ $t('general.show_less') }}
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index cd73f2e5..4b7d4d37 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -56,25 +56,21 @@ export default Vue.component('RichContent', {
       required: false,
       type: Boolean,
       default: false
-    },
-    hideMentions: {
-      required: false,
-      type: Boolean,
-      default: false
     }
   },
   // NEVER EVER TOUCH DATA INSIDE RENDER
   render (h) {
     // Pre-process HTML
-    const { newHtml: html, lastMentions } = preProcessPerLine(this.html, this.greentext, this.handleLinks)
-    const firstMentions = [] // Mentions that appear in the beginning of post body
+    const { newHtml: html } = preProcessPerLine(this.html, this.greentext, this.handleLinks)
+    let currentMentions = null // Current chain of mentions, we group all mentions together
+    // to collapse too many mentions in a row
+
     const lastTags = [] // Tags that appear at the end of post body
     const writtenMentions = [] // All mentions that appear in post body
     const writtenTags = [] // All tags that appear in post body
     // unique index for vue "tag" property
     let mentionIndex = 0
     let tagsIndex = 0
-    let firstMentionReplaced = false
 
     const renderImage = (tag) => {
       return <StillImage
@@ -98,41 +94,32 @@ export default Vue.component('RichContent', {
     const renderMention = (attrs, children) => {
       const linkData = getLinkData(attrs, children, mentionIndex++)
       linkData.notifying = this.attentions.some(a => a.statusnet_profile_url === linkData.url)
-      if (!linkData.notifying) {
-        encounteredText = true
-      }
       writtenMentions.push(linkData)
-      if (!encounteredText) {
-        firstMentions.push(linkData)
-        if (!firstMentionReplaced && !this.hideMentions) {
-          firstMentionReplaced = true
-          return <MentionsLine mentions={ firstMentions } />
-        } else {
-          return ''
-        }
+      if (currentMentions === null) {
+        currentMentions = []
+      }
+      currentMentions.push(linkData)
+      if (currentMentions.length === 1) {
+        return <MentionsLine mentions={ currentMentions } />
       } else {
-        return <MentionLink
-          url={attrs.href}
-          content={flattenDeep(children).join('')}
-        />
+        return ''
       }
     }
 
-    // We stop treating mentions as "first" ones when we encounter
-    // non-whitespace text
-    let encounteredText = false
     // Processor to use with html_tree_converter
     const processItem = (item, index, array, what) => {
       // Handle text nodes - just add emoji
       if (typeof item === 'string') {
         const emptyText = item.trim() === ''
-        if (emptyText) {
-          return encounteredText ? item : item.trim()
+        if (item.includes('\n')) {
+          currentMentions = null
         }
-        if (!encounteredText) {
-          item = item.trimStart()
-          encounteredText = true
+        if (emptyText) {
+          // don't include spaces when processing mentions - we'll include them
+          // in MentionsLine
+          return currentMentions !== null ? item.trim() : item
         }
+        currentMentions = null
         if (item.includes(':')) {
           item = ['', processTextForEmoji(
             item,
@@ -156,28 +143,25 @@ export default Vue.component('RichContent', {
         const Tag = getTagName(opener)
         const attrs = getAttrs(opener)
         switch (Tag) {
-          case 'span': // Replace last mentions class with mentionsline
-            if (attrs['class'] && attrs['class'].includes('lastMentions')) {
-              if (firstMentions.length > 1 && lastMentions.length > 1) {
-                break
-              } else {
-                return !this.hideMentions ? <MentionsLine mentions={lastMentions} /> : ''
-              }
-            } else {
-              break
-            }
+          case 'br':
+            currentMentions = null
+            break
           case 'img': // replace images with StillImage
             return renderImage(opener)
           case 'a': // replace mentions with MentionLink
             if (!this.handleLinks) break
             if (attrs['class'] && attrs['class'].includes('mention')) {
               // Handling mentions here
-              return renderMention(attrs, children, encounteredText)
+              return renderMention(attrs, children)
             } else {
               // Everything else will be handled in reverse pass
-              encounteredText = true
+              currentMentions = null
               return item // We'll handle it later
             }
+          case 'span':
+            if (attrs['class'].includes('h-card')) {
+              return ['', children.map(processItem), '']
+            }
         }
 
         if (children !== undefined) {
@@ -246,8 +230,6 @@ export default Vue.component('RichContent', {
     </span>
 
     const event = {
-      firstMentions,
-      lastMentions,
       lastTags,
       writtenMentions,
       writtenTags
@@ -284,15 +266,12 @@ export const preProcessPerLine = (html, greentext, handleLinks) => {
   const lastMentions = []
   const greentextHandle = new Set(['p', 'div'])
 
-  let nonEmptyIndex = -1
   const lines = convertHtmlToLines(html)
-  const linesNum = lines.filter(c => c.text).length
   const newHtml = lines.reverse().map((item, index, array) => {
     // Going over each line in reverse to detect last mentions,
     // keeping non-text stuff as-is
     if (!item.text) return item
     const string = item.text
-    nonEmptyIndex += 1
 
     // Greentext stuff
     if (
@@ -316,42 +295,19 @@ export const preProcessPerLine = (html, greentext, handleLinks) => {
     // Converting that line part into tree
     const tree = convertHtmlToTree(string)
 
-    // If line has loose text, i.e. text outside a mention or a tag
-    // we won't touch mentions.
-    let hasLooseText = false
-    let mentionsNum = 0
     const process = (item) => {
       if (Array.isArray(item)) {
         const [opener, children, closer] = item
         const tag = getTagName(opener)
-        // If we have a link we probably have mentions
-        if (tag === 'a') {
-          if (!handleLinks) return [opener, children, closer]
-          const attrs = getAttrs(opener)
-          if (attrs['class'] && attrs['class'].includes('mention')) {
-            // Got mentions
-            mentionsNum++
-            return [opener, children, closer]
-          } else {
-            // Not a mention? Means we have loose text or whatever
-            hasLooseText = true
-            return [opener, children, closer]
-          }
-        } else if (tag === 'span' || tag === 'p') {
+        if (tag === 'span' || tag === 'p') {
           // For span and p we need to go deeper
           return [opener, [...children].map(process), closer]
         } else {
-          // Everything else equals to a loose text
-          hasLooseText = true
           return [opener, children, closer]
         }
       }
 
       if (typeof item === 'string') {
-        if (item.trim() !== '') {
-          // only meaningful strings are loose text
-          hasLooseText = true
-        }
         return item
       }
     }
@@ -359,33 +315,7 @@ export const preProcessPerLine = (html, greentext, handleLinks) => {
     // We now processed our tree, now we need to mark line as lastMentions
     const result = [...tree].map(process)
 
-    if (
-      handleLinks && // Do we handle links at all?
-        mentionsNum > 1 && // Does it have more than one mention?
-        !hasLooseText && // Don't do anything if it has something besides mentions
-        nonEmptyIndex === 0 && // Only check last (first since list is reversed) line
-        nonEmptyIndex !== linesNum - 1 // Don't do anything if there's only one line
-    ) {
-      let mentionIndex = 0
-      const process = (item) => {
-        if (Array.isArray(item)) {
-          const [opener, children] = item
-          const tag = getTagName(opener)
-          if (tag === 'a') {
-            const attrs = getAttrs(opener)
-            lastMentions.push(getLinkData(attrs, children, mentionIndex++))
-          } else if (children) {
-            children.forEach(process)
-          }
-        }
-      }
-      result.forEach(process)
-      // we DO need mentions here so that we conditionally remove them if don't
-      // have first mentions
-      return ['<span class="lastMentions">', flattenDeep(result).join(''), '</span>'].join('')
-    } else {
-      return flattenDeep(result).join('')
-    }
+    return flattenDeep(result).join('')
   }).reverse().join('')
 
   return { newHtml, lastMentions }
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 71780e00..d3e71b31 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -41,16 +41,6 @@
             {{ $t('settings.collapse_subject') }}
           </BooleanSetting>
         </li>
-        <li>
-          <BooleanSetting path="mentionsOwnLine">
-            {{ $t('settings.mentions_new_place') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="mentionsNewStyle">
-            {{ $t('settings.mentions_new_style') }}
-          </BooleanSetting>
-        </li>
         <li>
           <BooleanSetting path="streaming">
             {{ $t('settings.streaming') }}
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 3c21cb76..8aa73a22 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -184,10 +184,7 @@ const Status = {
       })
     },
     mentionsLine () {
-      return this.mentionsOwnLine ? this.mentions : this.alsoMentions
-    },
-    mentionsOwnLine () {
-      return this.mergedConfig.mentionsOwnLine
+      return this.alsoMentions
     },
     hasMentionsLine () {
       return this.mentionsLine.length > 0
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index a5f347a6..2684e415 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -306,7 +306,6 @@
             :no-heading="noHeading"
             :highlight="highlight"
             :focused="isFocused"
-            :hide-mentions="mentionsOwnLine && (isReply || true)"
             @mediaplay="addMediaPlaying($event)"
             @mediapause="removeMediaPlaying($event)"
             @parseReady="setHeadTailLinks"
diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index d1736ba3..8757154d 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -25,8 +25,7 @@ const StatusContent = {
     'focused',
     'noHeading',
     'fullContent',
-    'singleLine',
-    'hideMentions'
+    'singleLine'
   ],
   data () {
     return {
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index d77ccd54..9f01c470 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -45,7 +45,6 @@
           :html="status.raw_html"
           :emoji="status.emojis"
           :handle-links="true"
-          :hide-mentions="hideMentions"
           :greentext="mergedConfig.greentext"
           :attentions="status.attentions"
           @parseReady="onParseReady"
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index 51895ef6..1b80ee09 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -31,8 +31,7 @@ const StatusContent = {
     'focused',
     'noHeading',
     'fullContent',
-    'singleLine',
-    'hideMentions'
+    'singleLine'
   ],
   computed: {
     hideAttachments () {
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 2e71757d..23c90913 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -4,7 +4,6 @@
     <StatusBody
       :status="status"
       :single-line="singleLine"
-      :hide-mentions="hideMentions"
       @parseReady="$emit('parseReady', $event)"
     >
       <div v-if="status.poll && status.poll.options">
diff --git a/src/modules/config.js b/src/modules/config.js
index db9d5ffb..bdab3f4d 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -55,8 +55,6 @@ export const defaultState = {
   interfaceLanguage: browserLocale,
   hideScopeNotice: false,
   useStreamingApi: false,
-  mentionsOwnLine: false,
-  mentionsNewStyle: false,
   sidebarRight: undefined, // instance default
   scopeCopy: undefined, // instance default
   subjectLineBehavior: undefined, // instance default
diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index 9ac9bedb..dfc229c0 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -8,11 +8,13 @@ const makeMention = (who) => {
   attentions.push({ statusnet_profile_url: `https://fake.tld/@${who}` })
   return `<span class="h-card"><a class="u-url mention" href="https://fake.tld/@${who}">@<span>${who}</span></a></span>`
 }
-const stubMention = (who) => `<span class="h-card"><mentionlink-stub url="https://fake.tld/@${who}" content="@<span>${who}</span>"></mentionlink-stub></span>`
-const lastMentions = (...data) => `<span class="lastMentions">${data.join('')}</span>`
 const p = (...data) => `<p>${data.join('')}</p>`
 const compwrap = (...data) => `<span class="RichContent">${data.join('')}</span>`
-const removedMentionSpan = '<span class="h-card"></span>'
+const mentionsLine = (times) => [
+  '<mentionsline-stub mentions="',
+  new Array(times).fill('[object Object]').join(','),
+  '"></mentionsline-stub>'
+].join('')
 
 describe('RichContent', () => {
   it('renders simple post without exploding', () => {
@@ -21,7 +23,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: true,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -45,7 +46,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: true,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -56,20 +56,15 @@ describe('RichContent', () => {
     expect(wrapper.html()).to.eql(compwrap(expected))
   })
 
-  it('removes mentions from the beginning of post', () => {
+  it('replaces first mention with mentionsline', () => {
     const html = p(
       makeMention('John'),
-      ' how are you doing thoday?'
-    )
-    const expected = p(
-      removedMentionSpan,
-      'how are you doing thoday?'
+      ' how are you doing today?'
     )
     const wrapper = shallowMount(RichContent, {
       localVue,
       propsData: {
         attentions,
-        hideMentions: true,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -77,70 +72,13 @@ describe('RichContent', () => {
       }
     })
 
-    expect(wrapper.html()).to.eql(compwrap(expected))
+    expect(wrapper.html()).to.eql(compwrap(p(
+      mentionsLine(1),
+      ' how are you doing today?'
+    )))
   })
 
-  it('replaces first mention with mentionsline if hideMentions=false', () => {
-    const html = p(
-      makeMention('John'),
-      ' how are you doing thoday?'
-    )
-    const expected = p(
-      '<span class="h-card">',
-      '<mentionsline-stub mentions="',
-      '[object Object]',
-      '"></mentionsline-stub>',
-      '</span>',
-      'how are you doing thoday?'
-    )
-    const wrapper = shallowMount(RichContent, {
-      localVue,
-      propsData: {
-        attentions,
-        hideMentions: false,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html
-      }
-    })
-
-    expect(wrapper.html()).to.eql(compwrap(expected))
-  })
-
-  it('removes mentions from the end of the hellpost (<p>)', () => {
-    const html = [
-      p('How are you doing today, fine gentlemen?'),
-      p(
-        makeMention('John'),
-        makeMention('Josh'),
-        makeMention('Jeremy')
-      )
-    ].join('')
-    const expected = [
-      p(
-        'How are you doing today, fine gentlemen?'
-      ),
-      // TODO fix this extra line somehow?
-      p()
-    ].join('')
-
-    const wrapper = shallowMount(RichContent, {
-      localVue,
-      propsData: {
-        attentions,
-        hideMentions: true,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html
-      }
-    })
-
-    expect(wrapper.html()).to.eql(compwrap(expected))
-  })
-
-  it('replaces mentions at the end of the hellpost if hideMentions=false (<p>)', () => {
+  it('replaces mentions at the end of the hellpost', () => {
     const html = [
       p('How are you doing today, fine gentlemen?'),
       p(
@@ -167,189 +105,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: false,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html
-      }
-    })
-
-    expect(wrapper.html()).to.eql(compwrap(expected))
-  })
-
-  it('removes mentions from the end of the hellpost (<br>)', () => {
-    const html = [
-      'How are you doing today, fine gentlemen?',
-      [
-        makeMention('John'),
-        makeMention('Josh'),
-        makeMention('Jeremy')
-      ].join('')
-    ].join('<br>')
-    const expected = [
-      'How are you doing today, fine gentlemen?',
-      // TODO fix this extra line somehow?
-      '<br>'
-    ].join('')
-
-    const wrapper = shallowMount(RichContent, {
-      localVue,
-      propsData: {
-        attentions,
-        hideMentions: true,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html
-      }
-    })
-
-    expect(wrapper.html()).to.eql(compwrap(expected))
-  })
-
-  it('removes mentions from the end of the hellpost (\\n)', () => {
-    const html = [
-      'How are you doing today, fine gentlemen?',
-      [
-        makeMention('John'),
-        makeMention('Josh'),
-        makeMention('Jeremy')
-      ].join('')
-    ].join('\n')
-    const expected = [
-      'How are you doing today, fine gentlemen?',
-      // TODO fix this extra line somehow?
-      ''
-    ].join('\n')
-
-    const wrapper = shallowMount(RichContent, {
-      localVue,
-      propsData: {
-        attentions,
-        hideMentions: true,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html
-      }
-    })
-
-    expect(wrapper.html()).to.eql(compwrap(expected))
-  })
-
-  it('Does not remove mentions in the middle or at the end of text string', () => {
-    const html = [
-      [
-        makeMention('Jack'),
-        'let\'s meet up with ',
-        makeMention('Janet')
-      ].join(''),
-      [
-        'cc: ',
-        makeMention('John'),
-        makeMention('Josh'),
-        makeMention('Jeremy')
-      ].join('')
-    ].join('\n')
-    const expected = [
-      [
-        removedMentionSpan,
-        'let\'s meet up with ',
-        stubMention('Janet')
-      ].join(''),
-      [
-        'cc: ',
-        stubMention('John'),
-        stubMention('Josh'),
-        stubMention('Jeremy')
-      ].join('')
-    ].join('\n')
-
-    const wrapper = shallowMount(RichContent, {
-      localVue,
-      propsData: {
-        attentions,
-        hideMentions: true,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html
-      }
-    })
-
-    expect(wrapper.html()).to.eql(compwrap(expected))
-  })
-
-  it('removes mentions from the end if there\'s only one first mention', () => {
-    const html = [
-      p(
-        makeMention('Todd'),
-        'so anyway you are wrong'
-      ),
-      p(
-        makeMention('Tom'),
-        makeMention('Trace'),
-        makeMention('Theodor')
-      )
-    ].join('')
-    const expected = [
-      p(
-        removedMentionSpan,
-        'so anyway you are wrong'
-      ),
-      // TODO fix this extra line somehow?
-      p()
-    ].join('')
-
-    const wrapper = shallowMount(RichContent, {
-      localVue,
-      propsData: {
-        attentions,
-        hideMentions: true,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html
-      }
-    })
-
-    expect(wrapper.html()).to.eql(compwrap(expected))
-  })
-
-  it('does not remove mentions from the end if there\'s more than one first mention', () => {
-    const html = [
-      p(
-        makeMention('Zacharie'),
-        makeMention('Zinaide'),
-        'you guys have cool names, and so do these guys: '
-      ),
-      p(
-        makeMention('Watson'),
-        makeMention('Wallace'),
-        makeMention('Wakamoto')
-      )
-    ].join('')
-    const expected = [
-      p(
-        removedMentionSpan,
-        removedMentionSpan,
-        'you guys have cool names, and so do these guys: '
-      ),
-      p(
-        lastMentions(
-          stubMention('Watson'),
-          stubMention('Wallace'),
-          stubMention('Wakamoto')
-        )
-      )
-    ].join('')
-
-    const wrapper = shallowMount(RichContent, {
-      localVue,
-      propsData: {
-        attentions,
-        hideMentions: true,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -378,7 +133,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: true,
         handleLinks: false,
         greentext: true,
         emoji: [],
@@ -403,7 +157,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: true,
         handleLinks: false,
         greentext: true,
         emoji: [],
@@ -424,7 +177,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: true,
         handleLinks: false,
         greentext: false,
         emoji: [],
@@ -446,7 +198,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: true,
         handleLinks: false,
         greentext: false,
         emoji: [{ url: 'about:blank', shortcode: 'spurdo' }],
@@ -464,7 +215,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: true,
         handleLinks: false,
         greentext: false,
         emoji: [],
@@ -484,7 +234,7 @@ describe('RichContent', () => {
     ].join('\n')
     const expected = [
       '<span class="greentext">&gt;quote</span>',
-      stubMention('lol'),
+      mentionsLine(1)
       '<span class="greentext">&gt;quote</span>',
       '<span class="greentext">&gt;quote</span>'
     ].join('\n')
@@ -517,11 +267,7 @@ describe('RichContent', () => {
     const expected = [
       'Bruh',
       'Bruh',
-      [
-        stubMention('foo'),
-        stubMention('bar'),
-        stubMention('baz')
-      ].join(''),
+      mentionsLine(3)
       'Bruh'
     ].join('<br>')
 
@@ -529,119 +275,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: true,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html
-      }
-    })
-
-    expect(wrapper.html()).to.eql(compwrap(expected))
-  })
-
-  it('Don\'t remove last mention if it\'s the only one', () => {
-    const html = [
-      'Bruh',
-      'Bruh',
-      makeMention('foo'),
-      makeMention('bar'),
-      makeMention('baz')
-    ].join('<br>')
-    const expected = [
-      'Bruh',
-      'Bruh',
-      stubMention('foo'),
-      stubMention('bar'),
-      stubMention('baz')
-    ].join('<br>')
-
-    const wrapper = shallowMount(RichContent, {
-      localVue,
-      propsData: {
-        attentions,
-        hideMentions: true,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html
-      }
-    })
-
-    expect(wrapper.html()).to.eql(compwrap(expected))
-  })
-
-  it('Don\'t remove last mentions if there are more than one first mention - remove first instead', () => {
-    const html = [
-      [
-        makeMention('foo'),
-        makeMention('bar')
-      ].join(' '),
-      'Bruh',
-      'Bruh',
-      [
-        makeMention('foo'),
-        makeMention('bar'),
-        makeMention('baz')
-      ].join(' ')
-    ].join('\n')
-
-    const expected = [
-      [
-        removedMentionSpan,
-        removedMentionSpan,
-        'Bruh' // Due to trim we remove extra newline
-      ].join(''),
-      'Bruh',
-      lastMentions([
-        stubMention('foo'),
-        stubMention('bar'),
-        stubMention('baz')
-      ].join(' '))
-    ].join('\n')
-
-    const wrapper = shallowMount(RichContent, {
-      localVue,
-      propsData: {
-        attentions,
-        hideMentions: true,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html
-      }
-    })
-
-    expect(wrapper.html()).to.eql(compwrap(expected))
-  })
-
-  it('Remove last mentions if there\'s just one first mention - remove all', () => {
-    const html = [
-      [
-        makeMention('foo')
-      ].join(' '),
-      'Bruh',
-      'Bruh',
-      [
-        makeMention('foo'),
-        makeMention('bar'),
-        makeMention('baz')
-      ].join(' ')
-    ].join('\n')
-
-    const expected = [
-      [
-        removedMentionSpan,
-        'Bruh' // Due to trim we remove extra newline
-      ].join(''),
-      'Bruh\n' // Can't remove this one yet
-    ].join('\n')
-
-    const wrapper = shallowMount(RichContent, {
-      localVue,
-      propsData: {
-        attentions,
-        hideMentions: true,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -678,7 +311,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: true,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -726,7 +358,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: false,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -781,7 +412,6 @@ describe('RichContent', () => {
       },
       propsData: {
         attentions,
-        hideMentions: false,
         handleLinks: true,
         greentext: true,
         emoji: [],
@@ -826,7 +456,6 @@ describe('RichContent', () => {
       localVue,
       propsData: {
         attentions,
-        hideMentions: false,
         handleLinks: true,
         greentext: true,
         emoji: [],
-- 
cgit v1.2.3-70-g09d2


From 2182af405864cffcc7ddca8d373cc14f38770c9e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 12 Aug 2021 03:08:57 +0300
Subject: made the code responsible for showing unwritten mentions actually
 work

---
 src/components/status/status.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

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

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 8aa73a22..54f304a2 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -176,15 +176,18 @@ const Status = {
         userId: attn.id
       }))
     },
-    alsoMentions () {
-      if (!this.headTailLinks) return []
-      const set = new Set(this.headTailLinks.writtenMentions.map(m => m.url))
-      return this.headTailLinks.writtenMentions.filter(mention => {
-        return !set.has(mention.url)
-      })
-    },
     mentionsLine () {
-      return this.alsoMentions
+      const writtenMentions = this.headTailLinks ? this.headTailLinks.writtenMentions : []
+      const set = new Set(writtenMentions.map(_ => _.url))
+      return this.status.attentions.filter(attn => {
+        return attn.screen_name !== this.replyToName &&
+          attn.screen_name !== this.status.user.screen_name &&
+          !set.has(attn.url)
+      }).map(attn => ({
+        url: attn.statusnet_profile_url,
+        content: attn.screen_name,
+        userId: attn.id
+      }))
     },
     hasMentionsLine () {
       return this.mentionsLine.length > 0
-- 
cgit v1.2.3-70-g09d2


From 4465de5241a6ed148d00d20de9e348f4991a4400 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 14 Aug 2021 21:55:38 +0300
Subject: fixed mentions line again

---
 src/components/status/status.js | 23 ++++++++---------------
 1 file changed, 8 insertions(+), 15 deletions(-)

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

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 54f304a2..ac481534 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -166,23 +166,16 @@ const Status = {
     muteWordHits () {
       return muteWordHits(this.status, this.muteWords)
     },
-    mentions () {
-      return this.status.attentions.filter(attn => {
-        return attn.screen_name !== this.replyToName &&
-          attn.screen_name !== this.status.user.screen_name
-      }).map(attn => ({
-        url: attn.statusnet_profile_url,
-        content: attn.screen_name,
-        userId: attn.id
-      }))
-    },
     mentionsLine () {
-      const writtenMentions = this.headTailLinks ? this.headTailLinks.writtenMentions : []
-      const set = new Set(writtenMentions.map(_ => _.url))
+      if (!this.headTailLinks) return []
+      const writtenSet = new Set(this.headTailLinks.writtenMentions.map(_ => _.url))
       return this.status.attentions.filter(attn => {
-        return attn.screen_name !== this.replyToName &&
-          attn.screen_name !== this.status.user.screen_name &&
-          !set.has(attn.url)
+        // no reply user
+        return attn.id !== this.status.in_reply_to_user_id &&
+          // no self-replies
+          attn.statusnet_profile_url !== this.status.user.statusnet_profile_url &&
+          // don't include if mentions is written
+          !writtenSet.has(attn.statusnet_profile_url)
       }).map(attn => ({
         url: attn.statusnet_profile_url,
         content: attn.screen_name,
-- 
cgit v1.2.3-70-g09d2


From fe0ed7e8f0941195547b924f99f6c0be707bf964 Mon Sep 17 00:00:00 2001
From: Alexander Tumin <iamtakingiteasy@eientei.org>
Date: Mon, 28 Feb 2022 23:07:20 +0300
Subject: Mute bot posts

---
 src/components/settings_modal/tabs/filtering_tab.vue |  5 +++++
 src/components/status/status.js                      | 10 +++++++++-
 src/components/timeline/timeline_quick_settings.js   |  7 +++++++
 src/components/timeline/timeline_quick_settings.vue  |  9 +++++++++
 src/i18n/en.json                                     |  1 +
 src/modules/config.js                                |  1 +
 src/modules/instance.js                              |  1 +
 7 files changed, 33 insertions(+), 1 deletion(-)

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

diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 50ee20e0..87567bef 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -37,6 +37,11 @@
             </li>
           </ul>
         </li>
+        <li>
+          <BooleanSetting path="muteBotStatuses">
+            {{ $t('settings.mute_bot_posts') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting path="hidePostStats">
             {{ $t('settings.hide_post_stats') }}
diff --git a/src/components/status/status.js b/src/components/status/status.js
index d8f94926..ba85114a 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -166,6 +166,9 @@ const Status = {
     muteWordHits () {
       return muteWordHits(this.status, this.muteWords)
     },
+    botStatus () {
+      return this.status.user.bot
+    },
     mentionsLine () {
       if (!this.headTailLinks) return []
       const writtenSet = new Set(this.headTailLinks.writtenMentions.map(_ => _.url))
@@ -191,7 +194,9 @@ const Status = {
         // Thread is muted
         status.thread_muted ||
         // Wordfiltered
-        this.muteWordHits.length > 0
+        this.muteWordHits.length > 0 ||
+        // bot status
+        (this.muteBotStatuses && this.botStatus)
       return !this.unmuted && !this.shouldNotMute && reasonsToMute
     },
     userIsMuted () {
@@ -293,6 +298,9 @@ const Status = {
     hidePostStats () {
       return this.mergedConfig.hidePostStats
     },
+    muteBotStatuses () {
+      return this.mergedConfig.muteBotStatuses
+    },
     currentUser () {
       return this.$store.state.users.currentUser
     },
diff --git a/src/components/timeline/timeline_quick_settings.js b/src/components/timeline/timeline_quick_settings.js
index 7b4931ce..92d5ac14 100644
--- a/src/components/timeline/timeline_quick_settings.js
+++ b/src/components/timeline/timeline_quick_settings.js
@@ -53,6 +53,13 @@ const TimelineQuickSettings = {
         const value = !this.hideMutedPosts
         this.$store.dispatch('setOption', { name: 'hideFilteredStatuses', value })
       }
+    },
+    muteBotStatuses: {
+      get () { return this.mergedConfig.muteBotStatuses },
+      set () {
+        const value = !this.muteBotStatuses
+        this.$store.dispatch('setOption', { name: 'muteBotStatuses', value })
+      }
     }
   }
 }
diff --git a/src/components/timeline/timeline_quick_settings.vue b/src/components/timeline/timeline_quick_settings.vue
index 98996ebd..4d67e06b 100644
--- a/src/components/timeline/timeline_quick_settings.vue
+++ b/src/components/timeline/timeline_quick_settings.vue
@@ -39,6 +39,15 @@
             class="dropdown-divider"
           />
         </div>
+        <button
+          class="button-default dropdown-item"
+          @click="muteBotStatuses = !muteBotStatuses"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': muteBotStatuses }"
+          />{{ $t('settings.mute_bot_posts') }}
+        </button>
         <button
           class="button-default dropdown-item"
           @click="hideMedia = !hideMedia"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 8eb7fcc6..a109ab3c 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -351,6 +351,7 @@
     "hide_attachments_in_tl": "Hide attachments in timeline",
     "hide_media_previews": "Hide media previews",
     "hide_muted_posts": "Hide posts of muted users",
+    "mute_bot_posts": "Mute bot posts",
     "hide_all_muted_posts": "Hide muted posts",
     "max_thumbnails": "Maximum amount of thumbnails per post (empty = no limit)",
     "hide_isp": "Hide instance-specific panel",
diff --git a/src/modules/config.js b/src/modules/config.js
index 20979174..79f76561 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -27,6 +27,7 @@ export const defaultState = {
   hideMutedPosts: undefined, // instance default
   hideMutedThreads: undefined, // instance default
   hideWordFilteredPosts: undefined, // instance default
+  muteBotStatuses: undefined, // instance default
   collapseMessageWithSubject: undefined, // instance default
   padEmoji: true,
   hideAttachments: false,
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 1abd784f..d0bf10e3 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -35,6 +35,7 @@ const defaultState = {
   hidePostStats: false,
   hideSitename: false,
   hideUserStats: false,
+  muteBotStatuses: false,
   loginMethod: 'password',
   logo: '/static/logo.svg',
   logoMargin: '.2em',
-- 
cgit v1.2.3-70-g09d2


From 2b7f12613ec04e3ce8be62b169457ad62aa83a65 Mon Sep 17 00:00:00 2001
From: Alexander Tumin <iamtakingiteasy@eientei.org>
Date: Tue, 1 Mar 2022 00:35:00 +0300
Subject: Add bot indication to user icon on statuses

---
 src/boot/after_store.js                              |  1 +
 src/components/settings_modal/tabs/filtering_tab.vue |  5 +++++
 src/components/status/status.js                      |  6 ++++++
 src/components/status/status.vue                     |  7 ++++++-
 src/components/still-image/still-image.vue           |  1 +
 src/components/user_avatar/user_avatar.js            | 13 ++++++++++++-
 src/components/user_avatar/user_avatar.vue           | 10 +++++++++-
 src/i18n/en.json                                     |  1 +
 src/modules/config.js                                |  1 +
 src/modules/instance.js                              |  1 +
 10 files changed, 43 insertions(+), 3 deletions(-)

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

diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index cc0c7c5e..c4a0a800 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -115,6 +115,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
   copyInstanceOption('nsfwCensorImage')
   copyInstanceOption('background')
   copyInstanceOption('hidePostStats')
+  copyInstanceOption('hideBotIndication')
   copyInstanceOption('hideUserStats')
   copyInstanceOption('hideFilteredStatuses')
   copyInstanceOption('logo')
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 87567bef..a7e30ce2 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -47,6 +47,11 @@
             {{ $t('settings.hide_post_stats') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="hideBotIndication">
+            {{ $t('settings.hide_bot_indication') }}
+          </BooleanSetting>
+        </li>
         <ChoiceSetting
           id="replyVisibility"
           path="replyVisibility"
diff --git a/src/components/status/status.js b/src/components/status/status.js
index ba85114a..282e85fb 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -169,6 +169,9 @@ const Status = {
     botStatus () {
       return this.status.user.bot
     },
+    botIndicator () {
+      return this.botStatus && !this.hideBotIndication
+    },
     mentionsLine () {
       if (!this.headTailLinks) return []
       const writtenSet = new Set(this.headTailLinks.writtenMentions.map(_ => _.url))
@@ -301,6 +304,9 @@ const Status = {
     muteBotStatuses () {
       return this.mergedConfig.muteBotStatuses
     },
+    hideBotIndication () {
+      return this.mergedConfig.hideBotIndication
+    },
     currentUser () {
       return this.$store.state.users.currentUser
     },
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 3bb29db6..8f51a778 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -77,6 +77,7 @@
         <UserAvatar
           v-if="retweet"
           class="left-side repeater-avatar"
+          :bot="botIndicator"
           :better-shadow="betterShadow"
           :user="statusoid.user"
         />
@@ -124,6 +125,7 @@
             @click.stop.prevent.capture.native="toggleUserExpanded"
           >
             <UserAvatar
+              :bot="botIndicator"
               :compact="compact"
               :better-shadow="betterShadow"
               :user="status.user"
@@ -407,7 +409,10 @@
         class="gravestone"
       >
         <div class="left-side">
-          <UserAvatar :compact="compact" />
+          <UserAvatar
+            :compact="compact"
+            :bot="botIndicator"
+          />
         </div>
         <div class="right-side">
           <div class="deleted-text">
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index cca75fcb..4ea21506 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -19,6 +19,7 @@
       @load="onLoad"
       @error="onError"
     >
+    <slot/>
   </div>
 </template>
 
diff --git a/src/components/user_avatar/user_avatar.js b/src/components/user_avatar/user_avatar.js
index 94653004..33d9a258 100644
--- a/src/components/user_avatar/user_avatar.js
+++ b/src/components/user_avatar/user_avatar.js
@@ -1,10 +1,21 @@
 import StillImage from '../still-image/still-image.vue'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+
+import {
+  faRobot
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faRobot
+)
+
 const UserAvatar = {
   props: [
     'user',
     'betterShadow',
-    'compact'
+    'compact',
+    'bot'
   ],
   data () {
     return {
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index 4040e263..29e03bcb 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -7,7 +7,9 @@
     :src="imgSrc(user.profile_image_url_original)"
     :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
     :image-load-error="imageLoadError"
-  />
+  >
+    <FAIcon v-if="bot" icon="robot" class="bot-indicator" />
+  </StillImage>
   <div
     v-else
     class="Avatar -placeholder"
@@ -36,6 +38,12 @@
     height: 100%;
   }
 
+  & > .bot-indicator {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+
   &.better-shadow {
     box-shadow: var(--_avatarShadowInset);
     filter: var(--_avatarShadowFilter);
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a109ab3c..61087ec2 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -352,6 +352,7 @@
     "hide_media_previews": "Hide media previews",
     "hide_muted_posts": "Hide posts of muted users",
     "mute_bot_posts": "Mute bot posts",
+    "hide_bot_indication": "Hide bot indication in posts",
     "hide_all_muted_posts": "Hide muted posts",
     "max_thumbnails": "Maximum amount of thumbnails per post (empty = no limit)",
     "hide_isp": "Hide instance-specific panel",
diff --git a/src/modules/config.js b/src/modules/config.js
index 79f76561..1aa2878e 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -80,6 +80,7 @@ export const defaultState = {
   mentionLinkShowYous: undefined, // instance default
   mentionLinkBoldenYou: undefined, // instance default
   hidePostStats: undefined, // instance default
+  hideBotIndication: undefined, // instance default
   hideUserStats: undefined, // instance default
   virtualScrolling: undefined, // instance default
   sensitiveByDefault: undefined // instance default
diff --git a/src/modules/instance.js b/src/modules/instance.js
index d0bf10e3..41bcf329 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -33,6 +33,7 @@ const defaultState = {
   hideMutedThreads: true,
   hideWordFilteredPosts: false,
   hidePostStats: false,
+  hideBotIndication: false,
   hideSitename: false,
   hideUserStats: false,
   muteBotStatuses: false,
-- 
cgit v1.2.3-70-g09d2


From 0f2fd8a3523e9e2cd1ca6fe287eb7304895f2cba Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 7 Aug 2021 00:33:06 -0400
Subject: Implement thread folding/expanding

---
 src/components/conversation/conversation.js  | 105 +++++++++++++++++++++++++--
 src/components/conversation/conversation.vue |   7 ++
 src/components/status/status.js              |  22 +++++-
 src/components/status/status.vue             |  13 ++++
 src/components/thread_tree/thread_tree.js    |  12 ++-
 src/components/thread_tree/thread_tree.vue   |  35 ++++++++-
 6 files changed, 180 insertions(+), 14 deletions(-)

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

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index e663ba15..0abb7abd 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -38,7 +38,8 @@ const conversation = {
   data () {
     return {
       highlight: null,
-      expanded: false
+      expanded: false,
+      threadDisplayStatusObject: {} // id => 'showing' | 'hidden'
     }
   },
   props: [
@@ -56,6 +57,9 @@ const conversation = {
     }
   },
   computed: {
+    maxDepthToShowByDefault () {
+      return 4
+    },
     displayStyle () {
       return this.$store.state.config.conversationDisplay
     },
@@ -112,15 +116,14 @@ const conversation = {
         const id = cur.id
         a.forest[id] = this.getReplies(id)
           .map(s => s.id)
-          .sort((a, b) => reverseLookupTable[a] - reverseLookupTable[b])
 
-        a.topLevel = a.topLevel.filter(k => a.forest[id].contains(k))
         return a
       }, {
         forest: {},
-        topLevel: this.conversation.map(s => s.id)
       })
 
+      debug('threads = ', threads)
+
       const walk = (forest, topLevel, depth = 0, processed = {}) => topLevel.map(id => {
         if (processed[id]) {
           return []
@@ -131,18 +134,63 @@ const conversation = {
           status: this.conversation[reverseLookupTable[id]],
           id,
           depth
-        }, walk(forest, forest[child], depth + 1, processed)].reduce((a, b) => a.concat(b), [])
+        }, walk(forest, forest[id], depth + 1, processed)].reduce((a, b) => a.concat(b), [])
       }).reduce((a, b) => a.concat(b), [])
 
-      const linearized = walk(threads.forest, threads.topLevel)
+      const linearized = walk(threads.forest, this.topLevel.map(k => k.id))
 
       return linearized
     },
+    replyIds () {
+      return this.conversation.map(k => k.id)
+        .reduce((res, id) => {
+          res[id] = (this.replies[id] || []).map(k => k.id)
+          return res
+        }, {})
+    },
+    totalReplyCount () {
+      debug('replyIds=', this.replyIds)
+      const sizes = {}
+      const subTreeSizeFor = (id) => {
+        if (sizes[id]) {
+          return sizes[id]
+        }
+        sizes[id] = 1 + this.replyIds[id].map(cid => subTreeSizeFor(cid)).reduce((a, b) => a + b, 0)
+        return sizes[id]
+      }
+      this.conversation.map(k => k.id).map(subTreeSizeFor)
+      debug('totalReplyCount=', sizes)
+      return Object.keys(sizes).reduce((res, id) => {
+        res[id] = sizes[id] - 1 // exclude itself
+        return res
+      }, {})
+    },
+    totalReplyDepth () {
+      const depths = {}
+      const subTreeDepthFor = (id) => {
+        if (depths[id]) {
+          return depths[id]
+        }
+        depths[id] = 1 + this.replyIds[id].map(cid => subTreeDepthFor(cid)).reduce((a, b) => a > b ? a : b, 0)
+        return depths[id]
+      }
+      this.conversation.map(k => k.id).map(subTreeDepthFor)
+      return Object.keys(depths).reduce((res, id) => {
+        res[id] = depths[id] - 1 // exclude itself
+        return res
+      }, {})
+    },
+    depths () {
+      debug('threadTree', this.threadTree)
+      return this.threadTree.reduce((a, k) => {
+        a[k.id] = k.depth
+        return a
+      }, {})
+    },
     topLevel () {
       const topLevel = this.conversation.reduce((tl, cur) =>
         tl.filter(k => this.getReplies(cur.id).map(v => v.id).indexOf(k.id) === -1), this.conversation)
       debug("toplevel =", topLevel)
-      debug("toplevel =", topLevel)
       return topLevel
     },
     replies () {
@@ -169,6 +217,25 @@ const conversation = {
     hiddenStyle () {
       const height = (this.status && this.status.virtualHeight) || '120px'
       return this.virtualHidden ? { height } : {}
+    },
+    threadDisplayStatus () {
+      return this.conversation.reduce((a, k) => {
+        const id = k.id
+        const depth = this.depths[id]
+        const status = (() => {
+          if (this.threadDisplayStatusObject[id]) {
+            return this.threadDisplayStatusObject[id]
+          }
+          if (depth <= this.maxDepthToShowByDefault) {
+            return 'showing'
+          } else {
+            return 'hidden'
+          }
+        })()
+
+        a[id] = status
+        return a
+      }, {})
     }
   },
   components: {
@@ -235,6 +302,30 @@ const conversation = {
     getConversationId (statusId) {
       const status = this.$store.state.statuses.allStatusesObject[statusId]
       return get(status, 'retweeted_status.statusnet_conversation_id', get(status, 'statusnet_conversation_id'))
+    },
+    setThreadDisplay (id, nextStatus) {
+      this.threadDisplayStatusObject = {
+        ...this.threadDisplayStatusObject,
+        [id]: nextStatus
+      }
+    },
+    toggleThreadDisplay (id) {
+      const depth = this.depths[id]
+      debug('depth = ', depth)
+      debug(
+        'threadDisplayStatus = ', this.threadDisplayStatus,
+        'threadDisplayStatusObject = ', this.threadDisplayStatusObject)
+      const curStatus = this.threadDisplayStatus[id]
+      const nextStatus = curStatus === 'showing' ? 'hidden' : 'showing'
+      debug('toggling', id, 'to', nextStatus)
+      this.setThreadDisplay(id, nextStatus)
+    },
+    setThreadDisplayRecursively (id, nextStatus) {
+      this.setThreadDisplay(id, nextStatus)
+      this.getReplies(id).map(k => k.id).map(id => this.setThreadDisplayRecursively(id, nextStatus))
+    },
+    showThreadRecursively (id) {
+      this.setThreadDisplayRecursively(id, 'showing')
     }
   }
 }
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index cea5f88f..783cc894 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -23,6 +23,7 @@
         v-for="status in topLevel"
         :key="status.id"
         ref="statusComponent"
+        :depth="0"
 
         :status="status"
         :in-profile="inProfile"
@@ -37,6 +38,12 @@
         :get-highlight="getHighlight"
         :set-highlight="setHighlight"
         :toggle-expanded="toggleExpanded"
+
+        :toggle-thread-display="toggleThreadDisplay"
+        :thread-display-status="threadDisplayStatus"
+        :show-thread-recursively="showThreadRecursively"
+        :total-reply-count="totalReplyCount"
+        :total-reply-depth="totalReplyDepth"
       />
     </div>
     <div v-if="isLinearView">
diff --git a/src/components/status/status.js b/src/components/status/status.js
index d8f94926..9d423631 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -35,7 +35,9 @@ import {
   faStar,
   faEyeSlash,
   faEye,
-  faThumbtack
+  faThumbtack,
+  faAngleDoubleUp,
+  faAngleDoubleDown
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -52,7 +54,9 @@ library.add(
   faEllipsisH,
   faEyeSlash,
   faEye,
-  faThumbtack
+  faThumbtack,
+  faAngleDoubleUp,
+  faAngleDoubleDown
 )
 
 const Status = {
@@ -89,7 +93,10 @@ const Status = {
     'inlineExpanded',
     'showPinned',
     'inProfile',
-    'profileUserId'
+    'profileUserId',
+
+    'controlledThreadDisplayStatus',
+    'controlledToggleThreadDisplay'
   ],
   data () {
     return {
@@ -304,6 +311,12 @@ const Status = {
     },
     isSuspendable () {
       return !this.replying && this.mediaPlaying.length === 0
+    },
+    inThreadForest () {
+      return !!this.controlledThreadDisplayStatus
+    },
+    threadShowing () {
+      return this.controlledThreadDisplayStatus === 'showing'
     }
   },
   methods: {
@@ -353,6 +366,9 @@ const Status = {
     },
     setHeadTailLinks (headTailLinks) {
       this.headTailLinks = headTailLinks
+    },
+    toggleThreadDisplay () {
+      this.controlledToggleThreadDisplay()
     }
   },
   watch: {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 3bb29db6..2ebf5638 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -219,6 +219,19 @@
                     class="fa-scale-110"
                   />
                 </button>
+                <button
+                  v-if="inThreadForest && replies && replies.length"
+                  class="button-unstyled"
+                  :title="threadShowing ? $t('status.thread_hide') : $t('status.thread_show')"
+                  :aria-expanded="threadShowing ? 'true' : 'false'"
+                  @click.prevent="toggleThreadDisplay"
+                >
+                  <FAIcon
+                    fixed-width
+                    class="fa-scale-110"
+                    :icon="threadShowing ? 'angle-double-up' : 'angle-double-down'"
+                  />
+                </button>
               </span>
             </div>
             <div
diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js
index 4f95122a..88b60109 100644
--- a/src/components/thread_tree/thread_tree.js
+++ b/src/components/thread_tree/thread_tree.js
@@ -21,7 +21,14 @@ const ThreadTree = {
     getHighlight: Function,
     getReplies: Function,
     setHighlight: Function,
-    toggleExpanded: Function
+    toggleExpanded: Function,
+
+    // to control display of the whole thread forest
+    toggleThreadDisplay: Function,
+    threadDisplayStatus: Object,
+    showThreadRecursively: Function,
+    totalReplyCount: Object,
+    totalReplyDepth: Object
   },
   computed: {
     reverseLookupTable () {
@@ -35,6 +42,9 @@ const ThreadTree = {
       debug('getReplies:', this.getReplies(this.status.id))
       return this.getReplies(this.status.id).map(({ id }) => this.statusById(id))
     },
+    threadShowing () {
+      return this.threadDisplayStatus[this.status.id] === 'showing'
+    }
   },
   methods: {
     statusById (id) {
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index 8256eee6..9f591585 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -13,18 +13,23 @@
       :replies="getReplies(status.id)"
       :in-profile="inProfile"
       :profile-user-id="profileUserId"
-      class="conversation-status status-fadein panel-body"
+      class="conversation-status conversation-status-treeview status-fadein panel-body"
+
+      :controlled-thread-display-status="threadDisplayStatus[status.id]"
+      :controlled-toggle-thread-display="() => toggleThreadDisplay(status.id)"
+
       @goto="setHighlight"
       @toggleExpanded="toggleExpanded"
     />
     <div
-      v-if="currentReplies.length"
+      v-if="currentReplies.length && threadShowing"
       class="thread-tree-replies"
     >
       <thread-tree
         v-for="replyStatus in currentReplies"
         :key="replyStatus.id"
         ref="childComponent"
+        :depth="depth + 1"
         :status="replyStatus"
 
         :in-profile="inProfile"
@@ -40,16 +45,40 @@
         :set-highlight="setHighlight"
         :toggle-expanded="toggleExpanded"
 
-        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"
       />
     </div>
+    <div
+      v-if="currentReplies.length && !threadShowing"
+      class="thread-tree-replies thread-tree-replies-hidden"
+    >
+      <button
+        class="button-unstyled -link thread-tree-show-replies-button"
+        @click="showThreadRecursively(status.id)"
+      >
+        {{ $t('status.thread_show_full', { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }) }}
+      </button>
+    </div>
   </div>
 </template>
 
 <script src="./thread_tree.js"></script>
 
 <style lang="scss">
+@import '../../_variables.scss';
 .thread-tree-replies {
   margin-left: 1em;
 }
+.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);
+}
 </style>
-- 
cgit v1.2.3-70-g09d2


From ace1f5067c90be2fa0b8da22d39b0e2c88f590fb Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 7 Aug 2021 10:28:45 -0400
Subject: Make status display controlled

---
 src/components/conversation/conversation.js     | 37 +++++++++++++++-
 src/components/conversation/conversation.vue    |  3 ++
 src/components/status/status.js                 |  9 +++-
 src/components/status/status.vue                |  6 +++
 src/components/status_content/status_content.js | 59 ++++++++++++++++++++++++-
 src/components/thread_tree/thread_tree.js       | 11 ++++-
 src/components/thread_tree/thread_tree.vue      | 10 +++++
 7 files changed, 130 insertions(+), 5 deletions(-)

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

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 0abb7abd..6fc86b2c 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -2,7 +2,8 @@ import { reduce, filter, findIndex, clone, get } from 'lodash'
 import Status from '../status/status.vue'
 import ThreadTree from '../thread_tree/thread_tree.vue'
 
-const debug = console.log
+// const debug = console.log
+const debug = () => {}
 
 const sortById = (a, b) => {
   const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
@@ -39,7 +40,8 @@ const conversation = {
     return {
       highlight: null,
       expanded: false,
-      threadDisplayStatusObject: {} // id => 'showing' | 'hidden'
+      threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
+      statusContentPropertiesObject: {}
     }
   },
   props: [
@@ -236,6 +238,25 @@ const conversation = {
         a[id] = status
         return a
       }, {})
+    },
+    statusContentProperties () {
+      return this.conversation.reduce((a, k) => {
+        const id = k.id
+        const depth = this.depths[id]
+        const props = (() => {
+          if (this.statusContentPropertiesObject[id]) {
+            return this.statusContentPropertiesObject[id]
+          }
+          return {
+            showingTall: false,
+            expandingSubject: false,
+            showingLongSubject: false,
+          }
+        })()
+
+        a[id] = props
+        return a
+      }, {})
     }
   },
   components: {
@@ -326,6 +347,18 @@ const conversation = {
     },
     showThreadRecursively (id) {
       this.setThreadDisplayRecursively(id, 'showing')
+    },
+    setStatusContentProperty (id, name, value) {
+      this.statusContentPropertiesObject = {
+        ...this.statusContentPropertiesObject,
+        [id]: {
+          ...this.statusContentPropertiesObject[id],
+          [name]: value
+        }
+      }
+    },
+    toggleStatusContentProperty (id, name) {
+      this.setStatusContentProperty(id, name, !this.statusContentProperties[id][name])
     }
   }
 }
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 783cc894..08cb72d0 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -44,6 +44,9 @@
         :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"
       />
     </div>
     <div v-if="isLinearView">
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 9d423631..d5ee7d4e 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -96,7 +96,14 @@ const Status = {
     'profileUserId',
 
     'controlledThreadDisplayStatus',
-    'controlledToggleThreadDisplay'
+    'controlledToggleThreadDisplay',
+
+    'controlledShowingTall',
+    'controlledToggleShowingTall',
+    'controlledExpandingSubject',
+    'controlledToggleExpandingSubject',
+    'controlledShowingLongSubject',
+    'controlledToggleShowingLongSubject'
   ],
   data () {
     return {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 2ebf5638..8fdebe44 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -319,6 +319,12 @@
             :no-heading="noHeading"
             :highlight="highlight"
             :focused="isFocused"
+            :controlled-showing-tall="controlledShowingTall"
+            :controlled-expanding-subject="controlledExpandingSubject"
+            :controlled-showing-long-subject="controlledShowingLongSubject"
+            :controlled-toggle-showing-tall="controlledToggleShowingTall"
+            :controlled-toggle-expanding-subject="controlledToggleExpandingSubject"
+            :controlled-toggle-showing-long-subject="controlledToggleShowingLongSubject"
             @mediaplay="addMediaPlaying($event)"
             @mediapause="removeMediaPlaying($event)"
             @parseReady="setHeadTailLinks"
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index dec8914a..65ec85c4 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -23,6 +23,31 @@ library.add(
   faPollH
 )
 
+const camelCase = name => name.charAt(0).toUpperCase() + name.slice(1)
+
+const controlledOrUncontrolledGetters = list => list.reduce((res, name) => {
+  const camelized = camelCase(name)
+  const toggle = `controlledToggle${camelized}`
+  const controlledName = `controlled${camelized}`
+  const uncontrolledName = `uncontrolled${camelized}`
+  res[name] = function () {
+    return this[toggle] ? this[controlledName] : this[uncontrolledName]
+  }
+  return res
+}, {})
+
+const controlledOrUncontrolledToggle = (obj, name) => {
+  const camelized = camelCase(name)
+  const toggle = `controlledToggle${camelized}`
+  const controlledName = `controlled${camelized}`
+  const uncontrolledName = `uncontrolled${camelized}`
+  if (obj[toggle]) {
+    obj[toggle]()
+  } else {
+    obj[uncontrolledName] = !obj[uncontrolledName]
+  }
+}
+
 const StatusContent = {
   name: 'StatusContent',
   props: [
@@ -31,9 +56,22 @@ const StatusContent = {
     'focused',
     'noHeading',
     'fullContent',
-    'singleLine'
+    'singleLine',
+    'controlledShowingTall',
+    'controlledExpandingSubject',
+    'controlledToggleShowingTall',
+    'controlledToggleExpandingSubject'
   ],
+  data () {
+    return {
+      uncontrolledShowingTall: this.fullContent || (this.inConversation && this.focused),
+      uncontrolledShowingLongSubject: false,
+      // not as computed because it sets the initial state which will be changed later
+      uncontrolledExpandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject
+    }
+  },
   computed: {
+    ...controlledOrUncontrolledGetters(['showingTall', 'expandingSubject', 'showingLongSubject']),
     hideAttachments () {
       return (this.mergedConfig.hideAttachments && !this.inConversation) ||
         (this.mergedConfig.hideAttachmentsInConv && this.inConversation)
@@ -71,6 +109,25 @@ const StatusContent = {
     Gallery,
     LinkPreview,
     StatusBody
+  },
+  methods: {
+    toggleShowingTall () {
+      controlledOrUncontrolledToggle(this, 'showingTall')
+    },
+    toggleExpandingSubject () {
+      controlledOrUncontrolledToggle(this, 'expandingSubject')
+    },
+    toggleShowMore () {
+      if (this.mightHideBecauseTall) {
+        this.toggleShowingTall()
+      } else if (this.mightHideBecauseSubject) {
+        this.toggleExpandingSubject()
+      }
+    },
+    setMedia () {
+      const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
+      return () => this.$store.dispatch('setMedia', attachments)
+    }
   }
 }
 
diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js
index 88b60109..46245bdf 100644
--- a/src/components/thread_tree/thread_tree.js
+++ b/src/components/thread_tree/thread_tree.js
@@ -28,7 +28,10 @@ const ThreadTree = {
     threadDisplayStatus: Object,
     showThreadRecursively: Function,
     totalReplyCount: Object,
-    totalReplyDepth: Object
+    totalReplyDepth: Object,
+    statusContentProperties: Object,
+    setStatusContentProperty: Function,
+    toggleStatusContentProperty: Function
   },
   computed: {
     reverseLookupTable () {
@@ -44,6 +47,9 @@ const ThreadTree = {
     },
     threadShowing () {
       return this.threadDisplayStatus[this.status.id] === 'showing'
+    },
+    currentProp () {
+      return this.statusContentProperties[this.status.id]
     }
   },
   methods: {
@@ -55,6 +61,9 @@ const ThreadTree = {
     showThread () {
     },
     showAllSubthreads () {
+    },
+    toggleCurrentProp (name) {
+      this.toggleStatusContentProperty(this.status.id, name)
     }
   }
 }
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index bbdda6fb..d7077bfd 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -18,6 +18,13 @@
       :controlled-thread-display-status="threadDisplayStatus[status.id]"
       :controlled-toggle-thread-display="() => toggleThreadDisplay(status.id)"
 
+      :controlled-showing-tall="currentProp.showingTall"
+      :controlled-expanding-subject="currentProp.expandingSubject"
+      :controlled-showing-long-subject="currentProp.showingLongSubject"
+      :controlled-toggle-showing-tall="() => toggleCurrentProp('ShowingTall')"
+      :controlled-toggle-expanding-subject="() => toggleCurrentProp('expandingSubject')"
+      :controlled-toggle-showing-long-subject="() => toggleCurrentProp('showingLongSubject')"
+
       @goto="setHighlight"
       @toggleExpanded="toggleExpanded"
     />
@@ -50,6 +57,9 @@
         :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"
       />
     </div>
     <div
-- 
cgit v1.2.3-70-g09d2


From 84a3cd92a3da885fe1a76809c589b8f464eed432 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 7 Aug 2021 11:59:10 -0400
Subject: Support diving into one status in a conversation

---
 src/components/conversation/conversation.js  | 32 +++++++++++++++++++++++++++-
 src/components/conversation/conversation.vue | 30 +++++++++++++++++++++++++-
 src/components/status/status.js              | 13 ++++++-----
 src/components/status/status.vue             | 14 +++++++++++-
 src/components/thread_tree/thread_tree.js    |  3 ++-
 src/components/thread_tree/thread_tree.vue   | 15 +++++++++----
 6 files changed, 94 insertions(+), 13 deletions(-)

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

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 6fc86b2c..584f310c 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -2,6 +2,17 @@ import { reduce, filter, findIndex, clone, get } from 'lodash'
 import Status from '../status/status.vue'
 import ThreadTree from '../thread_tree/thread_tree.vue'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faAngleDoubleDown,
+  faAngleDoubleLeft
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faAngleDoubleDown,
+  faAngleDoubleLeft
+)
+
 // const debug = console.log
 const debug = () => {}
 
@@ -41,7 +52,8 @@ const conversation = {
       highlight: null,
       expanded: false,
       threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
-      statusContentPropertiesObject: {}
+      statusContentPropertiesObject: {},
+      diveRoot: null
     }
   },
   props: [
@@ -195,6 +207,18 @@ const conversation = {
       debug("toplevel =", topLevel)
       return topLevel
     },
+    showingTopLevel () {
+      if (this.diveRoot) {
+        return [this.conversation.filter(k => this.diveRoot === k.id)[0]]
+      }
+      return this.topLevel
+    },
+    diveDepth () {
+      return this.diveRoot ? this.depths[this.diveRoot] : 0
+    },
+    diveMode () {
+      return !!this.diveRoot
+    },
     replies () {
       let i = 1
       // eslint-disable-next-line camelcase
@@ -359,6 +383,12 @@ const conversation = {
     },
     toggleStatusContentProperty (id, name) {
       this.setStatusContentProperty(id, name, !this.statusContentProperties[id][name])
+    },
+    diveIntoStatus (id) {
+      this.diveRoot = id
+    },
+    undive () {
+      this.diveRoot = null
     }
   }
 }
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 08cb72d0..84e8d8b2 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -18,9 +18,22 @@
         {{ $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"
+      >
+        <FAIcon icon="angle-double-left" />
+      </i18n>
+    </div>
     <div v-if="isTreeView">
       <thread-tree
-        v-for="status in topLevel"
+        v-for="status in showingTopLevel"
         :key="status.id"
         ref="statusComponent"
         :depth="0"
@@ -47,6 +60,7 @@
         :status-content-properties="statusContentProperties"
         :set-status-content-property="setStatusContentProperty"
         :toggle-status-content-property="toggleStatusContentProperty"
+        :dive="diveIntoStatus"
       />
     </div>
     <div v-if="isLinearView">
@@ -65,6 +79,16 @@
         :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"
+
         @goto="setHighlight"
         @toggleExpanded="toggleExpanded"
       />
@@ -82,6 +106,10 @@
 @import '../../_variables.scss';
 
 .Conversation {
+  .conversation-undive-box {
+    padding: 1em;
+  }
+  .conversation-undive-box,
   .conversation-status {
     border-bottom-width: 1px;
     border-bottom-style: solid;
diff --git a/src/components/status/status.js b/src/components/status/status.js
index d5ee7d4e..f119f42e 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -36,8 +36,9 @@ import {
   faEyeSlash,
   faEye,
   faThumbtack,
-  faAngleDoubleUp,
-  faAngleDoubleDown
+  faChevronUp,
+  faChevronDown,
+  faAngleDoubleRight
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -55,8 +56,9 @@ library.add(
   faEyeSlash,
   faEye,
   faThumbtack,
-  faAngleDoubleUp,
-  faAngleDoubleDown
+  faChevronUp,
+  faChevronDown,
+  faAngleDoubleRight
 )
 
 const Status = {
@@ -103,7 +105,8 @@ const Status = {
     'controlledExpandingSubject',
     'controlledToggleExpandingSubject',
     'controlledShowingLongSubject',
-    'controlledToggleShowingLongSubject'
+    'controlledToggleShowingLongSubject',
+    'dive'
   ],
   data () {
     return {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 8fdebe44..c2df6021 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -229,7 +229,19 @@
                   <FAIcon
                     fixed-width
                     class="fa-scale-110"
-                    :icon="threadShowing ? 'angle-double-up' : 'angle-double-down'"
+                    :icon="threadShowing ? 'chevron-up' : 'chevron-down'"
+                  />
+                </button>
+                <button
+                  v-if="dive"
+                  class="button-unstyled"
+                  :title="$t('status.show_only_conversation_under_this')"
+                  @click.prevent="dive"
+                >
+                  <FAIcon
+                    fixed-width
+                    class="fa-scale-110"
+                    :icon="'angle-double-right'"
                   />
                 </button>
               </span>
diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js
index 46245bdf..3e8eedb1 100644
--- a/src/components/thread_tree/thread_tree.js
+++ b/src/components/thread_tree/thread_tree.js
@@ -31,7 +31,8 @@ const ThreadTree = {
     totalReplyDepth: Object,
     statusContentProperties: Object,
     setStatusContentProperty: Function,
-    toggleStatusContentProperty: Function
+    toggleStatusContentProperty: Function,
+    dive: Function
   },
   computed: {
     reverseLookupTable () {
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index d7077bfd..adf7bcdf 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -24,6 +24,7 @@
       :controlled-toggle-showing-tall="() => toggleCurrentProp('ShowingTall')"
       :controlled-toggle-expanding-subject="() => toggleCurrentProp('expandingSubject')"
       :controlled-toggle-showing-long-subject="() => toggleCurrentProp('showingLongSubject')"
+      :dive="dive ? () => dive(status.id) : undefined"
 
       @goto="setHighlight"
       @toggleExpanded="toggleExpanded"
@@ -60,18 +61,24 @@
         :status-content-properties="statusContentProperties"
         :set-status-content-property="setStatusContentProperty"
         :toggle-status-content-property="toggleStatusContentProperty"
+        :dive="dive"
       />
     </div>
     <div
       v-if="currentReplies.length && !threadShowing"
       class="thread-tree-replies thread-tree-replies-hidden"
     >
-      <button
+      <i18n
+        tag="button"
+        path="status.thread_show_full_with_icon"
         class="button-unstyled -link thread-tree-show-replies-button"
-        @click="showThreadRecursively(status.id)"
+        @click.prevent="showThreadRecursively(status.id)"
       >
-        {{ $tc('status.thread_show_full', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }) }}
-      </button>
+        <FAIcon place="icon" icon="angle-double-down" />
+        <span place="text">
+          {{ $tc('status.thread_show_full', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }) }}
+        </span>
+      </i18n>
     </div>
   </div>
 </template>
-- 
cgit v1.2.3-70-g09d2


From d9a9f97751b2f51f55848652e5126700aea0f3fe Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 7 Aug 2021 18:53:23 -0400
Subject: Add simple tree style navigation

---
 src/components/conversation/conversation.js       | 70 ++++++++++++++++++++---
 src/components/conversation/conversation.vue      |  3 +-
 src/components/settings_modal/tabs/general_tab.js |  2 +-
 src/components/status/status.js                   | 16 ++++--
 src/components/status/status.vue                  |  4 +-
 src/components/thread_tree/thread_tree.js         | 14 ++++-
 src/components/thread_tree/thread_tree.vue        | 22 ++++++-
 src/modules/instance.js                           |  2 +-
 8 files changed, 113 insertions(+), 20 deletions(-)

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

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index b2af1d6c..a1991888 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -80,7 +80,10 @@ const conversation = {
       return this.$store.state.config.conversationDisplay
     },
     isTreeView () {
-      return this.displayStyle === 'tree'
+      return this.displayStyle === 'tree' || this.displayStyle === 'simple_tree'
+    },
+    treeViewIsSimple () {
+      return this.displayStyle === 'simple_tree'
     },
     isLinearView () {
       return this.displayStyle === 'linear'
@@ -297,6 +300,14 @@ const conversation = {
     },
     canDive () {
       return this.isTreeView && this.isExpanded
+    },
+    focused () {
+      return (id) => {
+        return (this.isExpanded) && id === this.highlight
+      }
+    },
+    maybeHighlight () {
+      return this.isExpanded ? this.highlight : null
     }
   },
   components: {
@@ -316,6 +327,9 @@ const conversation = {
     expanded (value) {
       if (value) {
         this.fetchConversation()
+      } else {
+        // if we collapse it, we should reset the dive
+        this._diven = false
       }
     },
     virtualHidden (value) {
@@ -323,6 +337,9 @@ const conversation = {
         'setVirtualHeight',
         { statusId: this.statusId, height: `${this.$el.clientHeight}px` }
       )
+    },
+    highlight (value, old) {
+      console.log('highlight:', old, ' => ', value)
     }
   },
   methods: {
@@ -341,7 +358,8 @@ const conversation = {
           'this.threadDisplayStatus ', this.threadDisplayStatus,
           'this.statusId', this.statusId)
         if (this.threadDisplayStatus[this.statusId] === 'hidden') {
-          this.diveIntoStatus(parentOrSelf)
+          this.diveIntoStatus(parentOrSelf, /* preventScroll */ true)
+          this.tryScrollTo(this.statusId)
         }
       }
     },
@@ -365,18 +383,16 @@ const conversation = {
     getReplies (id) {
       return this.replies[id] || []
     },
-    focused (id) {
-      return (this.isExpanded) && id === this.statusId
+    getHighlight () {
+      return this.isExpanded ? this.highlight : null
     },
     setHighlight (id) {
+      console.log('setHighlight', id)
       if (!id) return
       this.highlight = id
       this.$store.dispatch('fetchFavsAndRepeats', id)
       this.$store.dispatch('fetchEmojiReactionsBy', id)
     },
-    getHighlight () {
-      return this.isExpanded ? this.highlight : null
-    },
     toggleExpanded () {
       this.expanded = !this.expanded
     },
@@ -420,14 +436,52 @@ const conversation = {
     toggleStatusContentProperty (id, name) {
       this.setStatusContentProperty(id, name, !this.statusContentProperties[id][name])
     },
-    diveIntoStatus (id) {
+    leastShowingAncestor (id) {
+      let cur = id
+      let parent = this.parentOf(cur)
+      while (cur) {
+        // if the parent is showing it means cur is visible
+        if (this.threadDisplayStatus[parent] === 'showing') {
+          return cur
+        }
+        parent = this.parentOf(parent)
+        cur = this.parentOf(cur)
+      }
+      // nothing found, fall back to toplevel
+      return topLevel[0].id
+    },
+    diveIntoStatus (id, preventScroll) {
       this.diveHistory = [...this.diveHistory, id]
+      if (!preventScroll) {
+        this.goToCurrent()
+      }
     },
     diveBack () {
+      const oldHighlight = this.highlight
       this.diveHistory = [...this.diveHistory.slice(0, this.diveHistory.length - 1)]
+      if (oldHighlight) {
+        this.tryScrollTo(this.leastShowingAncestor(oldHighlight))
+      }
     },
     undive () {
+      const oldHighlight = this.highlight
       this.diveHistory = []
+      if (oldHighlight) {
+        this.tryScrollTo(this.leastShowingAncestor(oldHighlight))
+      } else {
+        this.goToCurrent()
+      }
+    },
+    tryScrollTo (id) {
+      if (this.isPage) {
+        // set statusId
+        this.$router.push({ name: 'conversation', params: { id } })
+      }
+
+      this.setHighlight(id)
+    },
+    goToCurrent () {
+      this.tryScrollTo(this.diveRoot || this.topLevel[0].id)
     },
     statusById (id) {
       return this.statusMap[id]
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 99bc7bcc..0ffd8c37 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -61,10 +61,11 @@
 
         :focused="focused"
         :get-replies="getReplies"
-        :get-highlight="getHighlight"
+        :highlight="maybeHighlight"
         :set-highlight="setHighlight"
         :toggle-expanded="toggleExpanded"
 
+        :simple="treeViewIsSimple"
         :toggle-thread-display="toggleThreadDisplay"
         :thread-display-status="threadDisplayStatus"
         :show-thread-recursively="showThreadRecursively"
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index abe8f6f7..c43abe8a 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -20,7 +20,7 @@ const GeneralTab = {
         value: mode,
         label: this.$t(`settings.subject_line_${mode === 'masto' ? 'mastodon' : mode}`)
       })),
-      conversationDisplayOptions: ['tree', 'linear'].map(mode => ({
+      conversationDisplayOptions: ['tree', 'simple_tree', 'linear'].map(mode => ({
         key: mode,
         value: mode,
         label: this.$t(`settings.conversation_display_${mode}`)
diff --git a/src/components/status/status.js b/src/components/status/status.js
index f119f42e..15c2d029 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -97,6 +97,7 @@ const Status = {
     'inProfile',
     'profileUserId',
 
+    'simpleTree',
     'controlledThreadDisplayStatus',
     'controlledToggleThreadDisplay',
 
@@ -379,10 +380,9 @@ const Status = {
     },
     toggleThreadDisplay () {
       this.controlledToggleThreadDisplay()
-    }
-  },
-  watch: {
-    'highlight': function (id) {
+    },
+    scrollIfHighlighted (highlightId) {
+      const id = highlightId
       if (this.status.id === id) {
         let rect = this.$el.getBoundingClientRect()
         if (rect.top < 100) {
@@ -396,6 +396,14 @@ const Status = {
           window.scrollBy(0, rect.bottom - window.innerHeight + 50)
         }
       }
+    }
+  },
+  mounted () {
+    this.scrollIfHighlighted(this.highlight)
+  },
+  watch: {
+    'highlight': function (id) {
+      this.scrollIfHighlighted(id)
     },
     'status.repeat_num': function (num) {
       // refetch repeats when repeat_num is changed in any way
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 47d35de8..e4812711 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -220,7 +220,7 @@
                   />
                 </button>
                 <button
-                  v-if="inThreadForest && replies && replies.length && toggleThreadDisplay"
+                  v-if="inThreadForest && replies && replies.length && !simpleTree"
                   class="button-unstyled"
                   :title="threadShowing ? $t('status.thread_hide') : $t('status.thread_show')"
                   :aria-expanded="threadShowing ? 'true' : 'false'"
@@ -233,7 +233,7 @@
                   />
                 </button>
                 <button
-                  v-if="dive"
+                  v-if="dive && !simpleTree"
                   class="button-unstyled"
                   :title="$t('status.show_only_conversation_under_this')"
                   @click.prevent="dive"
diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js
index ec7d5884..cb1d2242 100644
--- a/src/components/thread_tree/thread_tree.js
+++ b/src/components/thread_tree/thread_tree.js
@@ -1,5 +1,16 @@
 import Status from '../status/status.vue'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faAngleDoubleDown,
+  faAngleDoubleRight
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faAngleDoubleDown,
+  faAngleDoubleRight
+)
+
 // const debug = console.log
 const debug = () => {}
 
@@ -19,11 +30,12 @@ const ThreadTree = {
     profileUserId: String,
 
     focused: Function,
-    getHighlight: Function,
+    highlight: String,
     getReplies: Function,
     setHighlight: Function,
     toggleExpanded: Function,
 
+    simple: Boolean,
     // to control display of the whole thread forest
     toggleThreadDisplay: Function,
     threadDisplayStatus: Object,
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index f0a103d1..b803f80f 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -9,12 +9,13 @@
       :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
       :focused="focused(status.id)"
       :in-conversation="isExpanded"
-      :highlight="getHighlight()"
+      :highlight="highlight"
       :replies="getReplies(status.id)"
       :in-profile="inProfile"
       :profile-user-id="profileUserId"
       class="conversation-status conversation-status-treeview status-fadein panel-body"
 
+      :simple-tree="simple"
       :controlled-thread-display-status="threadDisplayStatus[status.id]"
       :controlled-toggle-thread-display="() => toggleThreadDisplay(status.id)"
 
@@ -49,10 +50,11 @@
 
         :focused="focused"
         :get-replies="getReplies"
-        :get-highlight="getHighlight"
+        :highlight="highlight"
         :set-highlight="setHighlight"
         :toggle-expanded="toggleExpanded"
 
+        :simple="simple"
         :toggle-thread-display="toggleThreadDisplay"
         :thread-display-status="threadDisplayStatus"
         :show-thread-recursively="showThreadRecursively"
@@ -69,6 +71,22 @@
       class="thread-tree-replies thread-tree-replies-hidden"
     >
       <i18n
+        v-if="simple"
+        tag="button"
+        path="status.thread_follow_with_icon"
+        class="button-unstyled -link thread-tree-show-replies-button"
+        @click.prevent="dive(status.id)"
+      >
+        <FAIcon
+          place="icon"
+          icon="angle-double-right"
+        />
+        <span place="text">
+          {{ $tc('status.thread_follow', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id] }) }}
+        </span>
+      </i18n>
+      <i18n
+        v-else
         tag="button"
         path="status.thread_show_full_with_icon"
         class="button-unstyled -link thread-tree-show-replies-button"
diff --git a/src/modules/instance.js b/src/modules/instance.js
index a160a557..8a5bbbd1 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -53,7 +53,7 @@ const defaultState = {
   theme: 'pleroma-dark',
   virtualScrolling: true,
   sensitiveByDefault: false,
-  conversationDisplay: 'tree',
+  conversationDisplay: 'simple_tree',
 
   // Nasty stuff
   customEmoji: [],
-- 
cgit v1.2.3-70-g09d2


From 863255d52fdcbbabe45c86c7e36ebafc0f7e1c53 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sun, 5 Sep 2021 16:35:47 -0400
Subject: Make position of other replies button a pref

---
 src/components/conversation/conversation.js        |  9 +++++
 src/components/conversation/conversation.vue       |  7 ++--
 src/components/settings_modal/tabs/general_tab.js  |  5 +++
 src/components/settings_modal/tabs/general_tab.vue | 40 +++++++++++++++-------
 src/components/status/status.js                    |  1 +
 src/components/status/status.vue                   | 15 +++++++-
 src/modules/config.js                              |  2 ++
 src/modules/instance.js                            |  1 +
 8 files changed, 63 insertions(+), 17 deletions(-)

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

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 423930af..d4972fbc 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -92,6 +92,15 @@ const conversation = {
     isLinearView () {
       return this.displayStyle === 'linear'
     },
+    otherRepliesButtonPosition () {
+      return this.$store.getters.mergedConfig.conversationOtherRepliesButton
+    },
+    showOtherRepliesButtonBelowStatus () {
+      return this.otherRepliesButtonPosition === 'below'
+    },
+    showOtherRepliesButtonInsideStatus () {
+      return this.otherRepliesButtonPosition === 'inside'
+    },
     hideStatus () {
       if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
         return this.virtualHidden && this.$refs.statusComponent[0].suspendable
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index f0eb88c1..b3d97075 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -66,13 +66,14 @@
               :profile-user-id="profileUserId"
               class="conversation-status status-fadein panel-body"
 
-              :simple="treeViewIsSimple"
+              :simple-tree="treeViewIsSimple"
               :toggle-thread-display="toggleThreadDisplay"
               :thread-display-status="threadDisplayStatus"
               :show-thread-recursively="showThreadRecursively"
               :total-reply-count="totalReplyCount"
               :total-reply-depth="totalReplyDepth"
-              :dive="(!treeViewIsSimple) ? () => diveIntoStatus(status.id) : null"
+              :show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
+              :dive="() => diveIntoStatus(status.id)"
 
               :controlled-showing-tall="statusContentProperties[status.id].showingTall"
               :controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
@@ -85,7 +86,7 @@
               @toggleExpanded="toggleExpanded"
             />
             <div
-              v-if="getReplies(status.id).length > 1"
+              v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).length > 1"
               class="thread-ancestor-dive-box"
             >
               <div
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index c43abe8a..a963d204 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -25,6 +25,11 @@ const GeneralTab = {
         value: mode,
         label: this.$t(`settings.conversation_display_${mode}`)
       })),
+      conversationOtherRepliesButtonOptions: ['below', 'inside'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.conversation_other_replies_button_${mode}`)
+      })),
       mentionLinkDisplayOptions: ['short', 'full_for_remote', 'full'].map(mode => ({
         key: mode,
         value: mode,
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index f97d92c3..d5ae7810 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -161,19 +161,33 @@
             {{ $t('settings.conversation_display') }}
           </ChoiceSetting>
         </li>
-        <li v-if="conversationDisplay !== 'linear'">
-          <label for="maxDepthInThread">
-            {{ $t('settings.max_depth_in_thread') }}
-          </label>
-          <input
-            id="maxDepthInThread"
-            path.number="maxDepthInThread"
-            class="number-input"
-            type="number"
-            min="3"
-            step="1"
-          >
-        </li>
+        <ul
+          v-if="conversationDisplay !== 'linear'"
+          class="setting-list suboptions"
+        >
+          <li>
+            <label for="maxDepthInThread">
+              {{ $t('settings.max_depth_in_thread') }}
+            </label>
+            <input
+              id="maxDepthInThread"
+              path.number="maxDepthInThread"
+              class="number-input"
+              type="number"
+              min="3"
+              step="1"
+            >
+          </li>
+          <li>
+            <ChoiceSetting
+              id="conversationOtherRepliesButton"
+              path="conversationOtherRepliesButton"
+              :options="conversationOtherRepliesButtonOptions"
+            >
+              {{ $t('settings.conversation_other_replies_button') }}
+            </ChoiceSetting>
+          </li>
+        </ul>
         <li>
           <ChoiceSetting
             id="mentionLinkDisplay"
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 15c2d029..700b9764 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -100,6 +100,7 @@ const Status = {
     'simpleTree',
     'controlledThreadDisplayStatus',
     'controlledToggleThreadDisplay',
+    'showOtherRepliesAsButton',
 
     'controlledShowingTall',
     'controlledToggleShowingTall',
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index e4812711..bc0aeaf0 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -346,7 +346,20 @@
             v-if="inConversation && !isPreview && replies && replies.length"
             class="replies"
           >
-            <span class="faint">{{ $t('status.replies_list') }}</span>
+            <button
+              v-if="showOtherRepliesAsButton"
+              class="button-unstyled -link faint"
+              :title="$tc('status.ancestor_follow', replies.length - 1, { numReplies: replies.length - 1 })"
+              @click.prevent="dive"
+            >
+              {{ $t('status.replies_list') }}
+            </button>
+            <span
+              v-else
+              class="faint"
+            >
+              {{ $t('status.replies_list') }}
+            </span>
             <StatusPopover
               v-for="reply in replies"
               :key="reply.id"
diff --git a/src/modules/config.js b/src/modules/config.js
index b3c7e5ab..a111abca 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -13,6 +13,7 @@ export const multiChoiceProperties = [
   'postContentType',
   'subjectLineBehavior',
   'conversationDisplay', // tree | linear
+  'conversationOtherRepliesButton', // below | inside
   'mentionLinkDisplay' // short | full_for_remote | full
 ]
 
@@ -84,6 +85,7 @@ export const defaultState = {
   virtualScrolling: undefined, // instance default
   sensitiveByDefault: undefined, // instance default
   conversationDisplay: undefined, // instance default
+  conversationOtherRepliesButton: undefined, // instance default
   maxDepthInThread: 6
 }
 
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 853be737..cd17c23d 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -54,6 +54,7 @@ const defaultState = {
   virtualScrolling: true,
   sensitiveByDefault: false,
   conversationDisplay: 'simple_tree',
+  conversationOtherRepliesButton: 'below',
   maxDepthInThread: 6,
 
   // Nasty stuff
-- 
cgit v1.2.3-70-g09d2


From 20880cdf0bd33d6c189549441ab0ee26b59abf6d Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Thu, 16 Sep 2021 00:29:14 -0400
Subject: Make replying and mediaPlaying controlled

$refs is not a reliable way to deal with child components under
tree threading as it is not reactive, but the children may change at
any time. The only good way seems to be making these states aggregated on
the conversation component.

Ref: tree-threading
---
 src/components/conversation/conversation.js  | 21 +++++++++---
 src/components/conversation/conversation.vue |  4 +++
 src/components/status/status.js              | 50 +++++++++++++++++++++++++---
 src/components/thread_tree/thread_tree.js    |  3 ++
 src/components/thread_tree/thread_tree.vue   |  4 +++
 5 files changed, 72 insertions(+), 10 deletions(-)

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

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 7f9f24b5..9aa7b183 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -99,6 +99,10 @@ const conversation = {
       return this.otherRepliesButtonPosition === 'inside'
     },
     suspendable () {
+      if (this.isTreeView) {
+        return Object.entries(this.statusContentProperties)
+          .every(([k, prop]) => !prop.replying && prop.mediaPlaying.length === 0)
+      }
       if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
         return this.$refs.statusComponent.every(s => s.suspendable)
       } else {
@@ -303,14 +307,21 @@ const conversation = {
       return this.conversation.reduce((a, k) => {
         const id = k.id
         const props = (() => {
-          if (this.statusContentPropertiesObject[id]) {
-            return this.statusContentPropertiesObject[id]
-          }
-          return {
+          const def = {
             showingTall: false,
             expandingSubject: false,
-            showingLongSubject: false
+            showingLongSubject: false,
+            isReplying: false,
+            mediaPlaying: []
+          }
+
+          if (this.statusContentPropertiesObject[id]) {
+            return {
+              ...def,
+              ...this.statusContentPropertiesObject[id]
+            }
           }
+          return def
         })()
 
         a[id] = props
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 0cd74539..4d64cf08 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -78,9 +78,13 @@
               :controlled-showing-tall="statusContentProperties[status.id].showingTall"
               :controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
               :controlled-showing-long-subject="statusContentProperties[status.id].showingLongSubject"
+              :controlled-replying="statusContentProperties[status.id].replying"
+              :controlled-media-playing="statusContentProperties[status.id].mediaPlaying"
               :controlled-toggle-showing-tall="() => toggleStatusContentProperty(status.id, 'showingTall')"
               :controlled-toggle-expanding-subject="() => toggleStatusContentProperty(status.id, 'expandingSubject')"
               :controlled-toggle-showing-long-subject="() => toggleStatusContentProperty(status.id, 'showingLongSubject')"
+              :controlled-toggle-replying="() => toggleStatusContentProperty(status.id, 'replying')"
+              :controlled-set-media-playing="(newVal) => toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)"
 
               @goto="setHighlight"
               @toggleExpanded="toggleExpanded"
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 700b9764..73fad45f 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -61,6 +61,41 @@ library.add(
   faAngleDoubleRight
 )
 
+const camelCase = name => name.charAt(0).toUpperCase() + name.slice(1)
+
+const controlledOrUncontrolledGetters = list => list.reduce((res, name) => {
+  const camelized = camelCase(name)
+  const toggle = `controlledToggle${camelized}`
+  const controlledName = `controlled${camelized}`
+  const uncontrolledName = `uncontrolled${camelized}`
+  res[name] = function () {
+    return this[toggle] ? this[controlledName] : this[uncontrolledName]
+  }
+  return res
+}, {})
+
+const controlledOrUncontrolledToggle = (obj, name) => {
+  const camelized = camelCase(name)
+  const toggle = `controlledToggle${camelized}`
+  const uncontrolledName = `uncontrolled${camelized}`
+  if (obj[toggle]) {
+    obj[toggle]()
+  } else {
+    obj[uncontrolledName] = !obj[uncontrolledName]
+  }
+}
+
+const controlledOrUncontrolledSet = (obj, name, val) => {
+  const camelized = camelCase(name)
+  const set = `controlledSet${camelized}`
+  const uncontrolledName = `uncontrolled${camelized}`
+  if (obj[set]) {
+    obj[set](val)
+  } else {
+    obj[uncontrolledName] = val
+  }
+}
+
 const Status = {
   name: 'Status',
   components: {
@@ -108,20 +143,25 @@ const Status = {
     'controlledToggleExpandingSubject',
     'controlledShowingLongSubject',
     'controlledToggleShowingLongSubject',
+    'controlledReplying',
+    'controlledToggleReplying',
+    'controlledMediaPlaying',
+    'controlledSetMediaPlaying',
     'dive'
   ],
   data () {
     return {
-      replying: false,
+      uncontrolledReplying: false,
       unmuted: false,
       userExpanded: false,
-      mediaPlaying: [],
+      uncontrolledMediaPlaying: [],
       suspendable: true,
       error: null,
       headTailLinks: null
     }
   },
   computed: {
+    ...controlledOrUncontrolledGetters(['replying', 'mediaPlaying']),
     muteWords () {
       return this.mergedConfig.muteWords
     },
@@ -351,7 +391,7 @@ const Status = {
       this.error = undefined
     },
     toggleReplying () {
-      this.replying = !this.replying
+      controlledOrUncontrolledToggle(this, 'replying')
     },
     gotoOriginal (id) {
       if (this.inConversation) {
@@ -371,10 +411,10 @@ const Status = {
       return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
     },
     addMediaPlaying (id) {
-      this.mediaPlaying.push(id)
+      controlledOrUncontrolledSet(this, 'mediaPlaying', this.mediaPlaying.concat(id))
     },
     removeMediaPlaying (id) {
-      this.mediaPlaying = this.mediaPlaying.filter(mediaId => mediaId !== id)
+      controlledOrUncontrolledSet(this, 'mediaPlaying', this.mediaPlaying.filter(mediaId => mediaId !== id))
     },
     setHeadTailLinks (headTailLinks) {
       this.headTailLinks = headTailLinks
diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js
index 0e499b85..71e63725 100644
--- a/src/components/thread_tree/thread_tree.js
+++ b/src/components/thread_tree/thread_tree.js
@@ -80,6 +80,9 @@ const ThreadTree = {
     },
     toggleCurrentProp (name) {
       this.toggleStatusContentProperty(this.status.id, name)
+    },
+    setCurrentProp (name, newVal) {
+      this.setStatusContentProperty(this.status.id, name)
     }
   }
 }
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index dce03f27..cee223e8 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -22,9 +22,13 @@
       :controlled-showing-tall="currentProp.showingTall"
       :controlled-expanding-subject="currentProp.expandingSubject"
       :controlled-showing-long-subject="currentProp.showingLongSubject"
+      :controlled-replying="currentProp.replying"
+      :controlled-media-playing="currentProp.mediaPlaying"
       :controlled-toggle-showing-tall="() => toggleCurrentProp('showingTall')"
       :controlled-toggle-expanding-subject="() => toggleCurrentProp('expandingSubject')"
       :controlled-toggle-showing-long-subject="() => toggleCurrentProp('showingLongSubject')"
+      :controlled-toggle-replying="() => toggleCurrentProp('replying')"
+      :controlled-set-media-playing="(newVal) => setCurrentProp('mediaPlaying', newVal)"
       :dive="dive ? () => dive(status.id) : undefined"
 
       @goto="setHighlight"
-- 
cgit v1.2.3-70-g09d2


From f8c5cbcd0d5d092c1264032a1be003f828dfc499 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Thu, 16 Sep 2021 09:22:49 -0400
Subject: Fix timeline jump when scrolling

Ref: tree-threading
---
 src/components/conversation/conversation.js | 19 ++++++++++++++++++-
 src/components/status/status.js             |  3 ---
 2 files changed, 18 insertions(+), 4 deletions(-)

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

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 9aa7b183..b9ebe7eb 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -469,7 +469,24 @@ const conversation = {
       } else {
         this.inlineDivePosition = id
       }
-      this.setHighlight(id)
+      // Because the conversation can be unmounted when out of sight
+      // and mounted again when it comes into sight,
+      // the `mounted` or `created` function in `status` should not
+      // contain scrolling calls, as we do not want the page to jump
+      // when we scroll with an expanded conversation.
+      //
+      // Now the method is to rely solely on the `highlight` watcher
+      // in `status` components.
+      // In linear views, all statuses are rendered at all times, but
+      // in tree views, it is possible that a change in active status
+      // removes and adds status components (e.g. an originally child
+      // status becomes an ancestor status, and thus they will be
+      // different).
+      // Here, let the components be rendered first, in order to trigger
+      // the `highlight` watcher.
+      this.$nextTick(() => {
+        this.setHighlight(id)
+      })
     },
     goToCurrent () {
       this.tryScrollTo(this.diveRoot || this.topLevel[0].id)
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 73fad45f..7bdcb665 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -439,9 +439,6 @@ const Status = {
       }
     }
   },
-  mounted () {
-    this.scrollIfHighlighted(this.highlight)
-  },
   watch: {
     'highlight': function (id) {
       this.scrollIfHighlighted(id)
-- 
cgit v1.2.3-70-g09d2


From 450145dd6b0c91e80b957d7c39dbf6b809b056be Mon Sep 17 00:00:00 2001
From: Alexander Tumin <iamtakingiteasy@eientei.org>
Date: Wed, 9 Mar 2022 07:56:43 +0300
Subject: Do not mute bot posts in notifications

---
 src/components/status/status.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 282e85fb..2c3e079f 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -199,7 +199,7 @@ const Status = {
         // Wordfiltered
         this.muteWordHits.length > 0 ||
         // bot status
-        (this.muteBotStatuses && this.botStatus)
+        (this.muteBotStatuses && this.botStatus && !this.compact)
       return !this.unmuted && !this.shouldNotMute && reasonsToMute
     },
     userIsMuted () {
-- 
cgit v1.2.3-70-g09d2