From b2827e690d5f6d82d346f308e5634d60c6379fca Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 20 Apr 2023 13:40:42 +0800
Subject: [PATCH] Better handling of mentions

---
 src/components/status.css    |  4 ++--
 src/utils/enhance-content.js | 28 ++++++++++++++++++----------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/status.css b/src/components/status.css
index f473ac19..32555cef 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -380,9 +380,9 @@
   filter: none;
   image-rendering: auto;
 }
-.status .content a:not(.mention):not(:has(span)) {
+/* .status .content a:not(.mention):not(:has(span)) {
   color: inherit;
-}
+} */
 
 .status.compact-thread .spoiler-badge {
   font-size: smaller;
diff --git a/src/utils/enhance-content.js b/src/utils/enhance-content.js
index 55d3bbdc..854dead5 100644
--- a/src/utils/enhance-content.js
+++ b/src/utils/enhance-content.js
@@ -10,23 +10,31 @@ function enhanceContent(content, opts = {}) {
 
   // Add target="_blank" to all links with no target="_blank"
   // E.g. `note` in `account`
-  const links = Array.from(dom.querySelectorAll('a:not([target="_blank"])'));
-  links.forEach((link) => {
+  const noTargetBlankLinks = Array.from(
+    dom.querySelectorAll('a:not([target="_blank"])'),
+  );
+  noTargetBlankLinks.forEach((link) => {
     link.setAttribute('target', '_blank');
   });
 
   // Spanify un-spanned mentions
-  const mentionLinks = Array.from(dom.querySelectorAll('a[href].mention'));
-  mentionLinks.forEach((link) => {
-    if (link.querySelector('*')) {
-      return;
-    }
-    const text = link.innerText;
+  const notMentionLinks = Array.from(
+    dom.querySelectorAll('a[href]:not(.mention)'),
+  );
+  notMentionLinks.forEach((link) => {
+    const text = link.innerText.trim();
+    const hasChildren = link.querySelector('*');
     // If text looks like @username@domain, then it's a mention
-    if (/^@[^@]+@[^@]+$/g.test(text)) {
+    if (/^@[^@]+(@[^@]+)?$/g.test(text)) {
       // Only show @username
       const username = text.split('@')[1];
-      link.innerHTML = `@<span>${username}</span>`;
+      if (!hasChildren) link.innerHTML = `@<span>${username}</span>`;
+      link.classList.add('mention');
+    }
+    // If text looks like #hashtag, then it's a hashtag
+    if (/^#[^#]+$/g.test(text)) {
+      if (!hasChildren) link.innerHTML = `#<span>${text}</span>`;
+      link.classList.add('mention', 'hashtag');
     }
   });