add: show profile avatars in notifications

swmff · Nov 8, 2024 · 6ae3e77 · 6ae3e77
1 parent 477ffeb
commit 6ae3e77
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/crates/rainbeam/templates/components/notification.html b/crates/rainbeam/templates/components/notification.html
@@ -1,10 +1,6 @@
 <div class="card-nest w-full shadow" id="notif:{{ notif.id }}">
     <div class="card flex flex-wrap justify-between gap-2">
-        <span
-            class="notif_title"
-            do="spam_notif_check"
-            data-id="{{ notif.id }}"
-        >
+        <span class="notif_title" do="notif_title" data-id="{{ notif.id }}">
             {{ shared::ui::render_markdown(notif.title)|safe }}
         </span>
         <span class="notif_timestamp date">{{ notif.timestamp }}</span>

diff --git a/crates/rainbeam/templates/components/response_title.html b/crates/rainbeam/templates/components/response_title.html
@@ -150,7 +150,6 @@
                 <a
                     title="Quote"
                     href="/intents/post?reply={{ response.id }}&title=Quote%20post"
-                    target="_blank"
                 >
                     <svg
                         xmlns="http://www.w3.org/2000/svg"

diff --git a/crates/rainbeam/templates/notifications.html b/crates/rainbeam/templates/notifications.html
@@ -132,8 +132,9 @@
     const spam = ["sent you a message"];
 
     for (const element of Array.from(
-        document.querySelectorAll("[do=spam_notif_check]"),
+        document.querySelectorAll("[do=notif_title]"),
     )) {
+        // check for spam
         for (const spam_text of spam) {
             if (element.innerText.includes(spam_text)) {
                 fetch(
@@ -144,6 +145,21 @@
                 );
             }
         }
+
+        // add user profile picture
+        if (element.innerText.startsWith("@")) {
+            const username = element.innerText.split(" ")[0].replace("@", "");
+            const anchor = element.children[0].children[0];
+
+            anchor.innerHTML = `<img
+                title="${username}'s avatar"
+                src="/api/v1/profiles/${username}/avatar"
+                alt="@${username}"
+                class="avatar"
+                loading="lazy"
+                style="--size: 20px; margin-right: 0.25rem"
+            />${anchor.innerHTML}`;
+        }
     }
 </script>