add mentions

data/static/css/style.css

@@ -1409,3 +1409,24 @@ footer {
   font-weight: bold;
   font-size: larger;
 }
+
+a.mention, a.mention:visited {
+  display: inline-block;
+  color: white;
+  background-color: rgb(135.1928346457, 145.0974015748, 123.0025984252);
+  padding: 5px;
+  border-radius: 4px;
+  text-decoration: none;
+}
+a.mention.display, a.mention:visited.display {
+  text-decoration: underline;
+  text-decoration-style: dashed;
+}
+a.mention.me, a.mention:visited.me {
+  background-color: rgb(123.0025984252, 145.0974015748, 143.9545669291);
+  border: 1px dashed;
+}
+a.mention:hover, a.mention:visited:hover {
+  background-color: rgb(229.84, 231.92, 227.28);
+  color: black;
+}

data/static/css/theme-otomotone.css

@@ -1410,6 +1410,27 @@ footer {
   font-size: larger;
 }
 
+a.mention, a.mention:visited {
+  display: inline-block;
+  color: #e6e6e6;
+  background-color: rgb(96.95, 81.55, 96.95);
+  padding: 5px;
+  border-radius: 8px;
+  text-decoration: none;
+}
+a.mention.display, a.mention:visited.display {
+  text-decoration: underline;
+  text-decoration-style: dashed;
+}
+a.mention.me, a.mention:visited.me {
+  background-color: rgb(96.95, 89.25, 81.55);
+  border: 1px dashed;
+}
+a.mention:hover, a.mention:visited:hover {
+  background-color: #ae6bae;
+  color: #e6e6e6;
+}
+
 #topnav {
   margin-bottom: 10px;
   border: 10px solid rgb(40, 40, 40);

data/static/css/theme-peachy.css

@@ -1410,6 +1410,27 @@ footer {
   font-size: larger;
 }
 
+a.mention, a.mention:visited {
+  display: inline-block;
+  color: white;
+  background-color: rgb(155.8907865169, 93.2211235955, 76.5092134831);
+  padding: 3px;
+  border-radius: 16px;
+  text-decoration: none;
+}
+a.mention.display, a.mention:visited.display {
+  text-decoration: underline;
+  text-decoration-style: dashed;
+}
+a.mention.me, a.mention:visited.me {
+  background-color: rgb(99.4880898876, 155.8907865169, 76.5092134831);
+  border: 1px dashed;
+}
+a.mention:hover, a.mention:visited:hover {
+  background-color: rgb(231.56, 212.36, 207.24);
+  color: black;
+}
+
 #topnav {
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;

data/static/js/bitties/pyrom-bitty.js

@@ -1,5 +1,6 @@
 const bookmarkMenuHrefTemplate = '/hyperapi/bookmarks-dropdown';
 const previewEndpoint = '/api/babycode-preview';
+const userEndpoint = '/api/current-user';
 
 const delay = ms => {return new Promise(resolve => setTimeout(resolve, ms))}
 
@@ -260,4 +261,19 @@ export default class {
       el.textContent = date.toLocaleString();
     }
   }
+
+  #currentUsername = undefined;
+  async highlightMentions(ev, el) {
+    if (this.#currentUsername === undefined) {
+      const userInfo = await this.api.getJSON(userEndpoint);
+      if (!userInfo.value) {
+        return;
+      }
+      this.#currentUsername = userInfo.value.user.username;
+    }
+
+    if (el.getString('username') === this.#currentUsername) {
+      el.classList.add('me');
+    }
+  }
 }

data/static/js/thread.js

@@ -82,7 +82,6 @@
       quoteButton.textContent = "Quote fragment"
       quoteButton.className = "reduced"
       quotePopover.appendChild(quoteButton);
-
       document.body.appendChild(quotePopover);
       return quoteButton;
     }
@@ -98,7 +97,7 @@
           if (ta.value.trim() !== "") {
             ta.value += "\n"
           }
-          ta.value += `[url=${postPermalink}]${authorUsername} said:[/url]\n[quote]< :scissors: > ${document.getSelection().toString()} < :scissors: >[/quote]\n`;
+          ta.value += `@${authorUsername} [url=${postPermalink}]said:[/url]\n[quote]< :scissors: > ${document.getSelection().toString()} < :scissors: >[/quote]\n`;
           ta.scrollIntoView()
           ta.focus();