lib/pleroma/web/templates/static_fe/static_fe/profile.html.eex

@@ -20,6 +20,15 @@
             </div>
           <div class="bottom-line">
             <%= link "@#{@user.nickname}", to: (@user.uri || @user.ap_id), class: "account-name" %>
+            <%= if @user.is_admin && @user.show_role do %>
+            <span class="user-role"><%= gettext("Admin") %></span>
+            <% end %>
+            <%= if @user.is_moderator && @user.show_role do %>
+            <span class="user-role"><%= gettext("Moderator") %></span>
+            <% end %>
+            <%= if @user.actor_type == "Service" do %>
+            <span class="user-role"><%= gettext("Bot") %></span>
+            <% end %>
           </div>
         </div>
       </div>

priv/static/static-fe/static-fe.css

@@ -1,5 +1,7 @@
 /* pleroma-light and pleroma-dark themes from pleroma-fe */
 :root {
+    --alertNeutral: rgba(185, 185, 186, 0.5);
+    --alertNeutralText: rgba(255, 255, 255, 1);
     --avatarShadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.7);
 
     --profileBg: rgba(7, 12, 17, 1);
@@ -148,7 +150,7 @@ body > .container {
     display: flex;
 }
 
-.account-name {
+.status-container .account-name {
     min-width: 1.6em;
     margin-right: 0.4em;
     white-space: nowrap;
@@ -369,3 +371,15 @@ status-body {
 .profile .status-container {
     border-bottom: 1px solid var(--border);
 }
+
+.user-role {
+	color: var(--alertNeutralText);
+	background-color: var(--alertNeutral);
+	margin: 0 0.35em;
+	padding: 0 0.25em;
+	border-radius: 2px;
+}
+
+.bottom-line {
+	display: flex;
+}