feat: enhance actor profile display with preferredUsername support

hyphacoop · Mar 19, 2024 · f1d9aa1 · f1d9aa1
1 parent 0212347
commit f1d9aa1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/actor-profile.css b/actor-profile.css
@@ -30,6 +30,11 @@
 .profile-name {
   color: var(--rdp-text-color);
   font-weight: bold;
+}
+
+.profile-username {
+  color: var(--rdp-text-color);
+  margin-top: 1px;
   margin-bottom: 10px;
 }
 

diff --git a/actor-profile.js b/actor-profile.js
@@ -57,6 +57,13 @@ class ActorProfile extends HTMLElement {
       actorContainer.appendChild(pName); // Append to the actor container
     }
 
+    if (actorInfo.preferredUsername) {
+      const pUserName = document.createElement("div");
+      pUserName.classList.add("profile-username");
+      pUserName.textContent = `@${actorInfo.preferredUsername}`;
+      actorContainer.appendChild(pUserName); // Append to the actor container
+    }
+
     // Instead of creating a button, create a FollowButton component
     const followButton = document.createElement("follow-button");
     followButton.setAttribute("url", this.url);