From f1d9aa10b542162a484a5a95620d388724aafec4 Mon Sep 17 00:00:00 2001
From: Akhilesh Thite <akhithite@gmail.com>
Date: Wed, 20 Mar 2024 02:09:18 +0530
Subject: [PATCH] feat: enhance actor profile display with preferredUsername
 support

---
 actor-profile.css | 5 +++++
 actor-profile.js  | 7 +++++++
 2 files changed, 12 insertions(+)

diff --git a/actor-profile.css b/actor-profile.css
index 340817d..1c54bb5 100644
--- 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
index 1a5db35..79017f2 100644
--- 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);