Merge branch 'main' into chore/separate-mod-button-functions

diff --combined src/shared/components/post/post-listing.tsx
index 9a382d66c3df523cc37af9a86710a65ad919d24c,ac90b0d8fb13bdd04731eb7409fa9884331aa5b9..f23ff900ae108b8c1f5ec2664251a174d44f1df0
--- 1/src/shared/components/post/post-listing.tsx
--- 2/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@@ -397,7 -397,7 +397,7 @@@ export class PostListing extends Compon
      const post_view = this.postView;
      return (
        <span className="small">
-         <PersonListing person={post_view.creator} />
+         <PersonListing person={post_view.creator} muted={true} />
          {this.creatorIsMod_ && (
            <span className="mx-1 badge text-bg-light">
              {I18NextService.i18n.t("mod")}
@@@ -444,8 -444,8 +444,8 @@@
        <Link
          className={`d-inline ${
            !post.featured_community && !post.featured_local
-             ? "text-body"
-             : "text-primary"
+             ? "link-dark"
+             : "link-primary"
          }`}
          to={`/post/${post.id}`}
          title={I18NextService.i18n.t("comments")}
@@@ -470,8 -470,8 +470,8 @@@
                <a
                  className={
                    !post.featured_community && !post.featured_local
-                     ? "text-body"
-                     : "text-primary"
+                     ? "link-dark"
+                     : "link-primary"
                  }
                  href={url}
                  title={url}
@@@ -554,10 -554,10 +554,10 @@@
      const url = post.url;
  
      return (
-       <p className="d-flex text-muted align-items-center gap-1 small m-0">
+       <p className="small m-0">
          {url && !(hostname(url) === getExternalHost()) && (
            <a
-             className="text-muted fst-italic"
+             className="fst-italic link-dark link-opacity-75 link-opacity-100-hover"
              href={url}
              title={url}
              rel={relTags}
@@@ -982,121 -982,6 +982,121 @@@
      );
    }
  
 +  get modBanFromCommunityButton() {
 +    return (
 +      <button
 +        className="btn btn-link btn-animate text-muted py-0"
 +        onClick={linkEvent(this, this.handleModBanFromCommunityShow)}
 +        aria-label={I18NextService.i18n.t("ban_from_community")}
 +      >
 +        {I18NextService.i18n.t("ban_from_community")}
 +      </button>
 +    );
 +  }
 +
 +  get modUnbanFromCommunityButton() {
 +    return (
 +      <button
 +        className="btn btn-link btn-animate text-muted py-0"
 +        onClick={linkEvent(this, this.handleModBanFromCommunitySubmit)}
 +        aria-label={I18NextService.i18n.t("unban")}
 +      >
 +        {this.state.banLoading ? <Spinner /> : I18NextService.i18n.t("unban")}
 +      </button>
 +    );
 +  }
 +
 +  get addModToCommunityButton() {
 +    return (
 +      <button
 +        className="btn btn-link btn-animate text-muted py-0"
 +        onClick={linkEvent(this, this.handleAddModToCommunity)}
 +        aria-label={
 +          this.creatorIsMod_
 +            ? I18NextService.i18n.t("remove_as_mod")
 +            : I18NextService.i18n.t("appoint_as_mod")
 +        }
 +      >
 +        {this.state.addModLoading ? (
 +          <Spinner />
 +        ) : this.creatorIsMod_ ? (
 +          I18NextService.i18n.t("remove_as_mod")
 +        ) : (
 +          I18NextService.i18n.t("appoint_as_mod")
 +        )}
 +      </button>
 +    );
 +  }
 +
 +  get modBanButton() {
 +    return (
 +      <button
 +        className="btn btn-link btn-animate text-muted py-0"
 +        onClick={linkEvent(this, this.handleModBanShow)}
 +        aria-label={I18NextService.i18n.t("ban_from_site")}
 +      >
 +        {I18NextService.i18n.t("ban_from_site")}
 +      </button>
 +    );
 +  }
 +
 +  get modUnbanButton() {
 +    return (
 +      <button
 +        className="btn btn-link btn-animate text-muted py-0"
 +        onClick={linkEvent(this, this.handleModBanSubmit)}
 +        aria-label={I18NextService.i18n.t("unban_from_site")}
 +      >
 +        {this.state.banLoading ? (
 +          <Spinner />
 +        ) : (
 +          I18NextService.i18n.t("unban_from_site")
 +        )}
 +      </button>
 +    );
 +  }
 +
 +  get purgePersonButton() {
 +    return (
 +      <button
 +        className="btn btn-link btn-animate text-muted py-0"
 +        onClick={linkEvent(this, this.handlePurgePersonShow)}
 +        aria-label={I18NextService.i18n.t("purge_user")}
 +      >
 +        {I18NextService.i18n.t("purge_user")}
 +      </button>
 +    );
 +  }
 +
 +  get purgePostButton() {
 +    return (
 +      <button
 +        className="btn btn-link btn-animate text-muted py-0"
 +        onClick={linkEvent(this, this.handlePurgePostShow)}
 +        aria-label={I18NextService.i18n.t("purge_post")}
 +      >
 +        {I18NextService.i18n.t("purge_post")}
 +      </button>
 +    );
 +  }
 +
 +  get toggleAdminButton() {
 +    return (
 +      <button
 +        className="btn btn-link btn-animate text-muted py-0"
 +        onClick={linkEvent(this, this.handleAddAdmin)}
 +      >
 +        {this.state.addAdminLoading ? (
 +          <Spinner />
 +        ) : this.creatorIsAdmin_ ? (
 +          I18NextService.i18n.t("remove_as_admin")
 +        ) : (
 +          I18NextService.i18n.t("appoint_as_admin")
 +        )}
 +      </button>
 +    );
 +  }
 +
    get modRemoveButton() {
      const removed = this.postView.post.removed;
      return (
@@@ -1131,14 -1016,54 +1131,14 @@@
            {this.canMod_ && (
              <>
                {!this.creatorIsMod_ &&
 -                (!post_view.creator_banned_from_community ? (
 -                  <button
 -                    className="btn btn-link btn-animate text-muted py-0"
 -                    onClick={linkEvent(
 -                      this,
 -                      this.handleModBanFromCommunityShow
 -                    )}
 -                    aria-label={I18NextService.i18n.t("ban_from_community")}
 -                  >
 -                    {I18NextService.i18n.t("ban_from_community")}
 -                  </button>
 -                ) : (
 -                  <button
 -                    className="btn btn-link btn-animate text-muted py-0"
 -                    onClick={linkEvent(
 -                      this,
 -                      this.handleModBanFromCommunitySubmit
 -                    )}
 -                    aria-label={I18NextService.i18n.t("unban")}
 -                  >
 -                    {this.state.banLoading ? (
 -                      <Spinner />
 -                    ) : (
 -                      I18NextService.i18n.t("unban")
 -                    )}
 -                  </button>
 -                ))}
 -              {!post_view.creator_banned_from_community && (
 -                <button
 -                  className="btn btn-link btn-animate text-muted py-0"
 -                  onClick={linkEvent(this, this.handleAddModToCommunity)}
 -                  aria-label={
 -                    this.creatorIsMod_
 -                      ? I18NextService.i18n.t("remove_as_mod")
 -                      : I18NextService.i18n.t("appoint_as_mod")
 -                  }
 -                >
 -                  {this.state.addModLoading ? (
 -                    <Spinner />
 -                  ) : this.creatorIsMod_ ? (
 -                    I18NextService.i18n.t("remove_as_mod")
 -                  ) : (
 -                    I18NextService.i18n.t("appoint_as_mod")
 -                  )}
 -                </button>
 -              )}
 +                (!post_view.creator_banned_from_community
 +                  ? this.modBanFromCommunityButton
 +                  : this.modUnbanFromCommunityButton)}
 +              {!post_view.creator_banned_from_community &&
 +                this.addModToCommunityButton}
              </>
            )}
 +
            {/* Community creators and admins can transfer community to another mod */}
            {(amCommunityCreator(post_view.creator.id, this.props.moderators) ||
              this.canAdmin_) &&
@@@ -1190,16 -1115,62 +1190,16 @@@
              <>
                {!this.creatorIsAdmin_ && (
                  <>
 -                  {!isBanned(post_view.creator) ? (
 -                    <button
 -                      className="btn btn-link btn-animate text-muted py-0"
 -                      onClick={linkEvent(this, this.handleModBanShow)}
 -                      aria-label={I18NextService.i18n.t("ban_from_site")}
 -                    >
 -                      {I18NextService.i18n.t("ban_from_site")}
 -                    </button>
 -                  ) : (
 -                    <button
 -                      className="btn btn-link btn-animate text-muted py-0"
 -                      onClick={linkEvent(this, this.handleModBanSubmit)}
 -                      aria-label={I18NextService.i18n.t("unban_from_site")}
 -                    >
 -                      {this.state.banLoading ? (
 -                        <Spinner />
 -                      ) : (
 -                        I18NextService.i18n.t("unban_from_site")
 -                      )}
 -                    </button>
 -                  )}
 -                  <button
 -                    className="btn btn-link btn-animate text-muted py-0"
 -                    onClick={linkEvent(this, this.handlePurgePersonShow)}
 -                    aria-label={I18NextService.i18n.t("purge_user")}
 -                  >
 -                    {I18NextService.i18n.t("purge_user")}
 -                  </button>
 -                  <button
 -                    className="btn btn-link btn-animate text-muted py-0"
 -                    onClick={linkEvent(this, this.handlePurgePostShow)}
 -                    aria-label={I18NextService.i18n.t("purge_post")}
 -                  >
 -                    {I18NextService.i18n.t("purge_post")}
 -                  </button>
 +                  {!isBanned(post_view.creator)
 +                    ? this.modBanButton
 +                    : this.modUnbanButton}
 +                  {this.purgePersonButton}
 +                  {this.purgePostButton}
                  </>
                )}
 -              {!isBanned(post_view.creator) && post_view.creator.local && (
 -                <button
 -                  className="btn btn-link btn-animate text-muted py-0"
 -                  onClick={linkEvent(this, this.handleAddAdmin)}
 -                  aria-label={
 -                    this.creatorIsAdmin_
 -                      ? I18NextService.i18n.t("remove_as_admin")
 -                      : I18NextService.i18n.t("appoint_as_admin")
 -                  }
 -                >
 -                  {this.state.addAdminLoading ? (
 -                    <Spinner />
 -                  ) : this.creatorIsAdmin_ ? (
 -                    I18NextService.i18n.t("remove_as_admin")
 -                  ) : (
 -                    I18NextService.i18n.t("appoint_as_admin")
 -                  )}
 -                </button>
 -              )}
 +              {!isBanned(post_view.creator) &&
 +                post_view.creator.local &&
 +                this.toggleAdminButton}
              </>
            )}
          </div>