fix: Fix badge alignment and break out into component

src/shared/components/comment/comment-node.tsx

@@ -1,7 +1,6 @@
 import {
   colorList,
   getCommentParentId,
-  getRoleLabelPill,
   myAuth,
   myAuthRequired,
   showScores,
@@ -63,6 +62,7 @@ import { I18NextService, UserService } from "../../services";
 import { setupTippy } from "../../tippy";
 import { Icon, PurgeWarning, Spinner } from "../common/icon";
 import { MomentTime } from "../common/moment-time";
+import { UserBadges } from "../common/user-badges";
 import { VoteButtonsCompact } from "../common/vote-buttons";
 import { CommunityLink } from "../community/community-link";
 import { PersonListing } from "../person/person-listing";
@@ -197,6 +197,17 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     return this.commentView.comment.id;
   }
 
+  get hasBadges(): boolean {
+    const cv = this.commentView;
+
+    return (
+      this.isPostCreator ||
+      isMod(cv.creator.id, this.props.moderators) ||
+      isAdmin(cv.creator.id, this.props.admins) ||
+      cv.creator.bot_account
+    );
+  }
+
   componentWillReceiveProps(
     nextProps: Readonly<{ children?: InfernoNode } & CommentNodeProps>
   ): void {
@@ -310,41 +321,19 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 />
               </button>
 
-              <span className="me-2">
               <PersonListing person={cv.creator} />
-              </span>
 
               {cv.comment.distinguished && (
-                <Icon icon="shield" inline classes="text-danger me-2" />
+                <Icon icon="shield" inline classes="text-danger ms-1" />
               )}
 
-              {this.isPostCreator &&
+              <UserBadges
-                getRoleLabelPill({
+                classNames="ms-1"
-                  label: I18NextService.i18n.t("op").toUpperCase(),
+                isPostCreator={this.isPostCreator}
-                  tooltip: I18NextService.i18n.t("creator"),
+                isMod={isMod_}
-                  classes: "text-bg-info",
+                isAdmin={isAdmin_}
-                  shrink: false,
+                isBot={cv.creator.bot_account}
-                })}
+              />
-
-              {isMod_ &&
-                getRoleLabelPill({
-                  label: I18NextService.i18n.t("mod"),
-                  tooltip: I18NextService.i18n.t("mod"),
-                  classes: "text-bg-primary",
-                })}
-
-              {isAdmin_ &&
-                getRoleLabelPill({
-                  label: I18NextService.i18n.t("admin"),
-                  tooltip: I18NextService.i18n.t("admin"),
-                  classes: "text-bg-danger",
-                })}
-
-              {cv.creator.bot_account &&
-                getRoleLabelPill({
-                  label: I18NextService.i18n.t("bot_account").toLowerCase(),
-                  tooltip: I18NextService.i18n.t("bot_account"),
-                })}
 
               {this.props.showCommunity && (
                 <>

src/shared/components/common/user-badges.tsx

@@ -0,0 +1,91 @@
+import { getRoleLabelPill } from "@utils/app";
+import classNames from "classnames";
+import { Component } from "inferno";
+import { I18NextService } from "../../services";
+
+interface UserBadgesProps {
+  isBanned?: boolean;
+  isDeleted?: boolean;
+  isPostCreator?: boolean;
+  isMod?: boolean;
+  isAdmin?: boolean;
+  isBot?: boolean;
+  classNames?: string;
+}
+
+export class UserBadges extends Component<UserBadgesProps> {
+  render() {
+    return (
+      (this.props.isBanned ||
+        this.props.isPostCreator ||
+        this.props.isMod ||
+        this.props.isAdmin ||
+        this.props.isBot) && (
+        <span
+          className={classNames(
+            "row d-inline-flex gx-1",
+            this.props.classNames
+          )}
+        >
+          {this.props.isBanned && (
+            <span className="col">
+              {getRoleLabelPill({
+                label: I18NextService.i18n.t("banned"),
+                tooltip: I18NextService.i18n.t("banned"),
+                classes: "text-bg-danger",
+                shrink: false,
+              })}
+            </span>
+          )}
+          {this.props.isDeleted && (
+            <span className="col">
+              {getRoleLabelPill({
+                label: I18NextService.i18n.t("deleted"),
+                tooltip: I18NextService.i18n.t("deleted"),
+                classes: "text-bg-danger",
+                shrink: false,
+              })}
+            </span>
+          )}
+
+          {this.props.isPostCreator && (
+            <span className="col">
+              {getRoleLabelPill({
+                label: I18NextService.i18n.t("op").toUpperCase(),
+                tooltip: I18NextService.i18n.t("creator"),
+                classes: "text-bg-info",
+                shrink: false,
+              })}
+            </span>
+          )}
+          {this.props.isMod && (
+            <span className="col">
+              {getRoleLabelPill({
+                label: I18NextService.i18n.t("mod"),
+                tooltip: I18NextService.i18n.t("mod"),
+                classes: "text-bg-primary",
+              })}
+            </span>
+          )}
+          {this.props.isAdmin && (
+            <span className="col">
+              {getRoleLabelPill({
+                label: I18NextService.i18n.t("admin"),
+                tooltip: I18NextService.i18n.t("admin"),
+                classes: "text-bg-danger",
+              })}
+            </span>
+          )}
+          {this.props.isBot && (
+            <span className="col">
+              {getRoleLabelPill({
+                label: I18NextService.i18n.t("bot_account").toLowerCase(),
+                tooltip: I18NextService.i18n.t("bot_account"),
+              })}
+            </span>
+          )}
+        </span>
+      )
+    );
+  }
+}

src/shared/components/person/profile.tsx

@@ -5,7 +5,6 @@ import {
   enableDownvotes,
   enableNsfw,
   getCommentParentId,
-  getRoleLabelPill,
   myAuth,
   myAuthRequired,
   setIsoData,
@@ -85,6 +84,7 @@ import { HtmlTags } from "../common/html-tags";
 import { Icon, Spinner } from "../common/icon";
 import { MomentTime } from "../common/moment-time";
 import { SortSelect } from "../common/sort-select";
+import { UserBadges } from "../common/user-badges";
 import { CommunityLink } from "../community/community-link";
 import { PersonDetails } from "./person-details";
 import { PersonListing } from "./person-listing";
@@ -484,46 +484,15 @@ export class Profile extends Component<
                         hideAvatar
                       />
                     </li>
-                    {isBanned(pv.person) && (
                     <li className="list-inline-item">
-                        {getRoleLabelPill({
+                      <UserBadges
-                          label: I18NextService.i18n.t("banned"),
+                        classNames="ms-1"
-                          tooltip: I18NextService.i18n.t("banned"),
+                        isBanned={isBanned(pv.person)}
-                          classes: "text-bg-danger",
+                        isDeleted={pv.person.deleted}
-                          shrink: false,
+                        isAdmin={pv.person.admin}
-                        })}
+                        isBot={pv.person.bot_account}
+                      />
                     </li>
-                    )}
-                    {pv.person.deleted && (
-                      <li className="list-inline-item">
-                        {getRoleLabelPill({
-                          label: I18NextService.i18n.t("deleted"),
-                          tooltip: I18NextService.i18n.t("deleted"),
-                          classes: "text-bg-danger",
-                          shrink: false,
-                        })}
-                      </li>
-                    )}
-                    {pv.person.admin && (
-                      <li className="list-inline-item">
-                        {getRoleLabelPill({
-                          label: I18NextService.i18n.t("admin"),
-                          tooltip: I18NextService.i18n.t("admin"),
-                          shrink: false,
-                        })}
-                      </li>
-                    )}
-                    {pv.person.bot_account && (
-                      <li className="list-inline-item">
-                        {getRoleLabelPill({
-                          label: I18NextService.i18n
-                            .t("bot_account")
-                            .toLowerCase(),
-                          tooltip: I18NextService.i18n.t("bot_account"),
-                          shrink: false,
-                        })}
-                      </li>
-                    )}
                   </ul>
                 </div>
                 {this.banDialog(pv)}

src/shared/components/post/post-listing.tsx

@@ -1,4 +1,4 @@
-import { getRoleLabelPill, myAuthRequired } from "@utils/app";
+import { myAuthRequired } from "@utils/app";
 import { canShare, share } from "@utils/browser";
 import { getExternalHost, getHttpBase } from "@utils/env";
 import {
@@ -55,6 +55,7 @@ import { setupTippy } from "../../tippy";
 import { Icon, PurgeWarning, Spinner } from "../common/icon";
 import { MomentTime } from "../common/moment-time";
 import { PictrsImage } from "../common/pictrs-image";
+import { UserBadges } from "../common/user-badges";
 import { VoteButtons, VoteButtonsCompact } from "../common/vote-buttons";
 import { CommunityLink } from "../community/community-link";
 import { PersonListing } from "../person/person-listing";
@@ -406,26 +407,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
     return (
       <div className="small mb-1 mb-md-0">
-        <span className="me-1">
         <PersonListing person={post_view.creator} />
-        </span>
+        <UserBadges
-        {this.creatorIsMod_ &&
+          classNames="ms-1"
-          getRoleLabelPill({
+          isMod={this.creatorIsMod_}
-            label: I18NextService.i18n.t("mod"),
+          isAdmin={this.creatorIsAdmin_}
-            tooltip: I18NextService.i18n.t("mod"),
+          isBot={post_view.creator.bot_account}
-            classes: "text-bg-primary",
+        />
-          })}
-        {this.creatorIsAdmin_ &&
-          getRoleLabelPill({
-            label: I18NextService.i18n.t("admin"),
-            tooltip: I18NextService.i18n.t("admin"),
-            classes: "text-bg-danger",
-          })}
-        {post_view.creator.bot_account &&
-          getRoleLabelPill({
-            label: I18NextService.i18n.t("bot_account").toLowerCase(),
-            tooltip: I18NextService.i18n.t("bot_account"),
-          })}
         {this.props.showCommunity && (
           <>
             {" "}

src/shared/utils/app/get-role-label-pill.tsx

@@ -11,7 +11,7 @@ export default function getRoleLabelPill({
 }) {
   return (
     <span
-      className={`badge me-1 ${classes ?? "text-bg-light"}`}
+      className={`badge ${classes ?? "text-bg-light"}`}
       aria-label={tooltip}
       data-tippy-content={tooltip}
     >