From a61f6e1590ce82e3c81203193469acb461b0ba4b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 19 Feb 2022 22:12:37 +0200
Subject: [PATCH 1/5] use rich content in interaction lists

---
 src/components/user_list_popover/user_list_popover.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index f4b93c9a9..e706bd1b2 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -22,7 +22,12 @@
             />
             <div class="user-list-names">
               <!-- eslint-disable vue/no-v-html -->
-              <span v-html="user.name_html" />
+              <RichContent
+                class="username"
+                :title="'@'+user.screen_name_ui"
+                :html="user.name_html"
+                :emoji="user.emoji"
+              />
               <!-- eslint-enable vue/no-v-html -->
               <span class="user-list-screen-name">{{ user.screen_name_ui }}</span>
             </div>
@@ -47,6 +52,7 @@
 
 .user-list-popover {
   padding: 0.5em;
+  --emoji-size: 16px;
 
   .user-list-row {
     padding: 0.25em;

From 769a9a14fe99785270596ac587ac65f48d2043ac Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 19 Feb 2022 22:22:21 +0200
Subject: [PATCH 2/5] add emoji to chat titles

---
 src/components/chat_title/chat_title.vue       | 18 ++++++------------
 .../user_list_popover/user_list_popover.vue    |  1 +
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
index b16ed39d7..a92028e84 100644
--- a/src/components/chat_title/chat_title.vue
+++ b/src/components/chat_title/chat_title.vue
@@ -1,5 +1,4 @@
 <template>
-  <!-- eslint-disable vue/no-v-html -->
   <div
     class="chat-title"
     :title="title"
@@ -14,12 +13,13 @@
         height="23px"
       />
     </router-link>
-    <span
+    <RichContent
       class="username"
-      v-html="htmlTitle"
+      :title="'@'+user.screen_name_ui"
+      :html="htmlTitle"
+      :emoji="user.emoji"
     />
   </div>
-  <!-- eslint-enable vue/no-v-html -->
 </template>
 
 <script src="./chat_title.js"></script>
@@ -34,6 +34,8 @@
   white-space: nowrap;
   align-items: center;
 
+  --emoji-size: 14px;
+
   .username {
     max-width: 100%;
     text-overflow: ellipsis;
@@ -41,14 +43,6 @@
     display: inline;
     word-wrap: break-word;
     overflow: hidden;
-    text-overflow: ellipsis;
-
-    .emoji {
-      width: 14px;
-      height: 14px;
-      vertical-align: middle;
-      object-fit: contain
-    }
   }
 
   .Avatar {
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index e706bd1b2..8706d0ff6 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -52,6 +52,7 @@
 
 .user-list-popover {
   padding: 0.5em;
+
   --emoji-size: 16px;
 
   .user-list-row {

From 0d073d607cb2d033a9556eca64c5e905864ba2ed Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 19 Feb 2022 22:34:08 +0200
Subject: [PATCH 3/5] enable link handling in user bios to fix links not having
 _blank

---
 src/components/user_card/user_card.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 5f9570037..0708f3874 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -275,6 +275,7 @@
         class="user-card-bio"
         :html="user.description_html"
         :emoji="user.emoji"
+        :handle-links="true"
       />
     </div>
   </div>

From a8d198768639435bad93a527228f62575eed37c0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 19 Feb 2022 22:40:19 +0200
Subject: [PATCH 4/5] fix unit tests

---
 test/unit/specs/components/rich_content.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index f6c478a9d..8a29bd6ee 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -350,7 +350,6 @@ describe('RichContent', () => {
         '<span>',
         '</span>',
         '</a>',
-        ' ',
         '<!---->', // v-if placeholder, mentionlink's "new" (i.e. rich) display
         '</span>',
         '<!---->', // v-if placeholder, mentionsline's extra mentions and stuff

From 86e3aefdab3fa1314d4731eabcf03f8c9e418e41 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 19 Feb 2022 23:04:51 +0200
Subject: [PATCH 5/5] new unit tests

---
 .../specs/components/rich_content.spec.js     | 78 +++++++++++++++++++
 1 file changed, 78 insertions(+)

diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index 8a29bd6ee..30c66a33b 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -374,6 +374,84 @@ describe('RichContent', () => {
     expect(wrapper.html()).to.eql(compwrap(expected))
   })
 
+  it('rich contents of nested mentions are handled properly', () => {
+    attentions.push({ statusnet_profile_url: 'lol' })
+    const html = [
+      p(
+        '<span class="poast-style">',
+        '<a href="lol" class="mention">',
+        '<span>',
+        'https://</span>',
+        '<span>',
+        'lol.tld/</span>',
+        '<span>',
+        '</span>',
+        '</a>',
+        ' ',
+        '<a href="lol" class="mention">',
+        '<span>',
+        'https://</span>',
+        '<span>',
+        'lol.tld/</span>',
+        '<span>',
+        '</span>',
+        '</a>',
+        '</span>'
+      ),
+      p(
+        'Testing'
+      )
+    ].join('')
+    const expected = [
+      p(
+        '<span class="poast-style">',
+        '<span class="MentionsLine">',
+        '<span class="MentionLink mention-link">',
+        '<a href="lol" target="_blank" class="original">',
+        '<span>',
+        'https://</span>',
+        '<span>',
+        'lol.tld/</span>',
+        '<span>',
+        '</span>',
+        '</a>',
+        '<!---->', // v-if placeholder, mentionlink's "new" (i.e. rich) display
+        '</span>',
+        '<span class="MentionLink mention-link">',
+        '<a href="lol" target="_blank" class="original">',
+        '<span>',
+        'https://</span>',
+        '<span>',
+        'lol.tld/</span>',
+        '<span>',
+        '</span>',
+        '</a>',
+        '<!---->', // v-if placeholder, mentionlink's "new" (i.e. rich) display
+        '</span>',
+        '<!---->', // v-if placeholder, mentionsline's extra mentions and stuff
+        '</span>',
+        '</span>'
+      ),
+      ' ',
+      p(
+        'Testing'
+      )
+    ].join('')
+
+    const wrapper = mount(RichContent, {
+      localVue,
+      propsData: {
+        attentions,
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html
+      }
+    })
+
+    expect(wrapper.html()).to.eql(compwrap(expected))
+  })
+
   it('rich contents of a link are handled properly', () => {
     const html = [
       '<p>',