Make alternate way of displaying user names

lemmy-translations

@@ -1 +1 @@
-Subproject commit 22637606f4a4455458e64cefe9f5ec33dccb6c52
+Subproject commit 346c8bba9c20a22aba5127fc379bb74b5168d2a5

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

@@ -1,8 +1,7 @@
 import { showAvatars } from "@utils/app";
 import { getStaticDir } from "@utils/env";
 import { hostname, isCakeDay } from "@utils/helpers";
-import classNames from "classnames";
-import { Component } from "inferno";
+import { Component, InfernoNode } from "inferno";
 import { Link } from "inferno-router";
 import { Person } from "lemmy-js-client";
 import { relTags } from "../../config";
@@ -11,11 +10,7 @@ import { CakeDay } from "./cake-day";
 
 interface PersonListingProps {
   person: Person;
-  realLink?: boolean;
-  useApubName?: boolean;
-  muted?: boolean;
-  hideAvatar?: boolean;
-  showApubName?: boolean;
+  profile?: boolean;
 }
 
 export class PersonListing extends Component<PersonListingProps, any> {
@@ -24,76 +19,62 @@ export class PersonListing extends Component<PersonListingProps, any> {
   }
 
   render() {
-    const person = this.props.person;
-    const local = person.local;
-    let apubName: string, link: string;
+    const {
+      person: {
+        local,
+        name,
+        actor_id,
+        display_name,
+        published,
+        avatar,
+        banned,
+      },
+      profile,
+    } = this.props;
+    const domain = hostname(actor_id);
+    const apubName = `@${name}@${domain}`;
+    const link = profile ? actor_id : `/u/${name}${!local && `@${domain}`}`;
 
-    if (local) {
-      apubName = `@${person.name}`;
-      link = `/u/${person.name}`;
-    } else {
-      const domain = hostname(person.actor_id);
-      apubName = `@${person.name}@${domain}`;
-      link = !this.props.realLink
-        ? `/u/${person.name}@${domain}`
-        : person.actor_id;
-    }
+    function linkify(node: InfernoNode, isApubName?: boolean) {
+      const className = `text-${display_name || profile ? "muted" : "info"}`;
 
-    let displayName = this.props.useApubName
-      ? apubName
-      : person.display_name ?? apubName;
-
-    if (this.props.showApubName && !local && person.display_name) {
-      displayName = `${displayName} (${apubName})`;
-    }
-
-    return (
-      <>
-        {!this.props.realLink ? (
-          <Link
-            title={apubName}
-            className={classNames(
-              "person-listing d-inline-flex align-items-baseline",
-              {
-                "text-muted": this.props.muted,
-                "text-info": !this.props.muted,
-              },
-            )}
-            to={link}
-          >
-            {this.avatarAndName(displayName)}
-          </Link>
-        ) : (
-          <a
-            title={apubName}
-            className={`person-listing d-inline-flex align-items-baseline ${
-              this.props.muted ? "text-muted" : "text-info"
-            }`}
-            href={link}
-            rel={relTags}
-          >
-            {this.avatarAndName(displayName)}
+      if (local && profile) {
+        return isApubName ? <div className={className}>{node}</div> : node;
+      } else if (profile) {
+        return (
+          <a title={apubName} href={link} rel={relTags} className={className}>
+            {node}
           </a>
-        )}
+        );
+      } else {
+        return (
+          <Link title={apubName} to={link} className={className}>
+            {node}
+          </Link>
+        );
+      }
+    }
 
-        {isCakeDay(person.published) && <CakeDay creatorName={apubName} />}
-      </>
-    );
-  }
-
-  avatarAndName(displayName: string) {
-    const avatar = this.props.person.avatar;
     return (
       <>
-        {!this.props.hideAvatar &&
-          !this.props.person.banned &&
-          showAvatars() && (
-            <PictrsImage
-              src={avatar ?? `${getStaticDir()}/assets/icons/icon-96x96.png`}
-              icon
-            />
-          )}
-        <span>{displayName}</span>
+        <div className="person-listing d-inline-flex align-items-center">
+          {!(profile || banned) &&
+            showAvatars() &&
+            linkify(
+              <PictrsImage
+                src={avatar ?? `${getStaticDir()}/assets/icons/icon-96x96.png`}
+                icon
+              />,
+            )}
+          <div>
+            {display_name && !profile && (
+              <div className="text-info">{display_name}</div>
+            )}
+            {linkify(apubName, true)}
+          </div>
+        </div>
+
+        {isCakeDay(published) && <CakeDay creatorName={apubName} />}
       </>
     );
   }

src/shared/components/person/profile.tsx

@@ -486,13 +486,7 @@ export class Profile extends Component<
                   )}
                   <ul className="list-inline mb-2">
                     <li className="list-inline-item">
-                      <PersonListing
-                        person={pv.person}
-                        realLink
-                        useApubName
-                        muted
-                        hideAvatar
-                      />
+                      <PersonListing person={pv.person} profile />
                     </li>
                     <li className="list-inline-item">
                       <UserBadges

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

@@ -417,18 +417,17 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post_view = this.postView;
 
     return (
-      <div className="small mb-1 mb-md-0">
+      <div className="small mb-1 mb-md-0 d-flex align-items-center flex-wrap">
         <PersonListing person={post_view.creator} />
         <UserBadges
-          classNames="ms-1"
+          classNames="mx-1"
           isMod={this.creatorIsMod_}
           isAdmin={this.creatorIsAdmin_}
           isBot={post_view.creator.bot_account}
         />
         {this.props.showCommunity && (
           <>
-            {" "}
-            {I18NextService.i18n.t("to")}{" "}
+            <span className="mx-1">{I18NextService.i18n.t("to")}</span>
             <CommunityLink community={post_view.community} />
           </>
         )}
@@ -440,8 +439,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               )?.name
             }
           </span>
-        )}{" "}
-        •{" "}
+        )}
+        <span className="mx-1">•</span>
         <MomentTime
           published={post_view.post.published}
           updated={post_view.post.updated}

src/shared/components/search.tsx

@@ -214,7 +214,7 @@ const communityListing = ({
 
 const personListing = ({ person, counts: { comment_count } }: PersonView) =>
   getListing(
-    <PersonListing person={person} showApubName />,
+    <PersonListing person={person} />,
     comment_count,
     "number_of_comments",
   );