From 9869b911cf480ee88c7b1e7d2f689cc2e1c65157 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 2 Jul 2023 18:48:35 -0400
Subject: [PATCH 1/3] fix: Fix badge alignment and break out into component

---
 .../components/comment/comment-node.tsx       | 53 +++++------
 src/shared/components/common/user-badges.tsx  | 91 +++++++++++++++++++
 src/shared/components/person/profile.tsx      | 51 ++---------
 src/shared/components/post/post-listing.tsx   | 30 ++----
 src/shared/utils/app/get-role-label-pill.tsx  |  2 +-
 5 files changed, 132 insertions(+), 95 deletions(-)
 create mode 100644 src/shared/components/common/user-badges.tsx

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index 8f689aa2..c6b37fdb 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/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>
+              <PersonListing person={cv.creator} />
 
               {cv.comment.distinguished && (
-                <Icon icon="shield" inline classes="text-danger me-2" />
+                <Icon icon="shield" inline classes="text-danger ms-1" />
               )}
 
-              {this.isPostCreator &&
-                getRoleLabelPill({
-                  label: I18NextService.i18n.t("op").toUpperCase(),
-                  tooltip: I18NextService.i18n.t("creator"),
-                  classes: "text-bg-info",
-                  shrink: false,
-                })}
-
-              {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"),
-                })}
+              <UserBadges
+                classNames="ms-1"
+                isPostCreator={this.isPostCreator}
+                isMod={isMod_}
+                isAdmin={isAdmin_}
+                isBot={cv.creator.bot_account}
+              />
 
               {this.props.showCommunity && (
                 <>
diff --git a/src/shared/components/common/user-badges.tsx b/src/shared/components/common/user-badges.tsx
new file mode 100644
index 00000000..efd18f5c
--- /dev/null
+++ b/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>
+      )
+    );
+  }
+}
diff --git a/src/shared/components/person/profile.tsx b/src/shared/components/person/profile.tsx
index ad7c5fe5..cc334db5 100644
--- a/src/shared/components/person/profile.tsx
+++ b/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({
-                          label: I18NextService.i18n.t("banned"),
-                          tooltip: I18NextService.i18n.t("banned"),
-                          classes: "text-bg-danger",
-                          shrink: false,
-                        })}
-                      </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>
-                    )}
+                    <li className="list-inline-item">
+                      <UserBadges
+                        classNames="ms-1"
+                        isBanned={isBanned(pv.person)}
+                        isDeleted={pv.person.deleted}
+                        isAdmin={pv.person.admin}
+                        isBot={pv.person.bot_account}
+                      />
+                    </li>
                   </ul>
                 </div>
                 {this.banDialog(pv)}
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 462087f3..bc853b37 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/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>
-        {this.creatorIsMod_ &&
-          getRoleLabelPill({
-            label: I18NextService.i18n.t("mod"),
-            tooltip: I18NextService.i18n.t("mod"),
-            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"),
-          })}
+        <PersonListing person={post_view.creator} />
+        <UserBadges
+          classNames="ms-1"
+          isMod={this.creatorIsMod_}
+          isAdmin={this.creatorIsAdmin_}
+          isBot={post_view.creator.bot_account}
+        />
         {this.props.showCommunity && (
           <>
             {" "}
diff --git a/src/shared/utils/app/get-role-label-pill.tsx b/src/shared/utils/app/get-role-label-pill.tsx
index 0cb0a414..b46f2498 100644
--- a/src/shared/utils/app/get-role-label-pill.tsx
+++ b/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}
     >

From 61867ee73d7ba9ac6865bd6fcd1ba11f51a5f060 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 2 Jul 2023 19:00:06 -0400
Subject: [PATCH 2/3] fix: Remove unused hasBadges() function

---
 src/shared/components/comment/comment-node.tsx | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index c6b37fdb..662b67be 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -197,17 +197,6 @@ 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 {

From 6cb49967c230a9dc33de7967710d5bc83d9b96b3 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 2 Jul 2023 19:47:12 -0400
Subject: [PATCH 3/3] fix: Move getRoleLabelPill to the only component that
 uses it

---
 src/shared/components/common/user-badges.tsx | 23 +++++++++++++++++++-
 src/shared/utils/app/get-role-label-pill.tsx | 21 ------------------
 src/shared/utils/app/index.ts                |  2 --
 3 files changed, 22 insertions(+), 24 deletions(-)
 delete mode 100644 src/shared/utils/app/get-role-label-pill.tsx

diff --git a/src/shared/components/common/user-badges.tsx b/src/shared/components/common/user-badges.tsx
index efd18f5c..03a1caec 100644
--- a/src/shared/components/common/user-badges.tsx
+++ b/src/shared/components/common/user-badges.tsx
@@ -1,4 +1,3 @@
-import { getRoleLabelPill } from "@utils/app";
 import classNames from "classnames";
 import { Component } from "inferno";
 import { I18NextService } from "../../services";
@@ -13,6 +12,28 @@ interface UserBadgesProps {
   classNames?: string;
 }
 
+export function getRoleLabelPill({
+  label,
+  tooltip,
+  classes,
+  shrink = true,
+}: {
+  label: string;
+  tooltip: string;
+  classes?: string;
+  shrink?: boolean;
+}) {
+  return (
+    <span
+      className={`badge ${classes ?? "text-bg-light"}`}
+      aria-label={tooltip}
+      data-tippy-content={tooltip}
+    >
+      {shrink ? label[0].toUpperCase() : label}
+    </span>
+  );
+}
+
 export class UserBadges extends Component<UserBadgesProps> {
   render() {
     return (
diff --git a/src/shared/utils/app/get-role-label-pill.tsx b/src/shared/utils/app/get-role-label-pill.tsx
deleted file mode 100644
index b46f2498..00000000
--- a/src/shared/utils/app/get-role-label-pill.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-export default function getRoleLabelPill({
-  label,
-  tooltip,
-  classes,
-  shrink = true,
-}: {
-  label: string;
-  tooltip: string;
-  classes?: string;
-  shrink?: boolean;
-}) {
-  return (
-    <span
-      className={`badge ${classes ?? "text-bg-light"}`}
-      aria-label={tooltip}
-      data-tippy-content={tooltip}
-    >
-      {shrink ? label[0].toUpperCase() : label}
-    </span>
-  );
-}
diff --git a/src/shared/utils/app/index.ts b/src/shared/utils/app/index.ts
index b2b0baac..9993ac72 100644
--- a/src/shared/utils/app/index.ts
+++ b/src/shared/utils/app/index.ts
@@ -29,7 +29,6 @@ import getDataTypeString from "./get-data-type-string";
 import getDepthFromComment from "./get-depth-from-comment";
 import getIdFromProps from "./get-id-from-props";
 import getRecipientIdFromProps from "./get-recipient-id-from-props";
-import getRoleLabelPill from "./get-role-label-pill";
 import getUpdatedSearchId from "./get-updated-search-id";
 import initializeSite from "./initialize-site";
 import insertCommentIntoTree from "./insert-comment-into-tree";
@@ -87,7 +86,6 @@ export {
   getDepthFromComment,
   getIdFromProps,
   getRecipientIdFromProps,
-  getRoleLabelPill,
   getUpdatedSearchId,
   initializeSite,
   insertCommentIntoTree,