Use muted display names, and always show instance for non-local. #1975 #2064 (#2425)

* Use muted display names. #1975 #2064

* Removing pointless undefined equality.

src/shared/components/community/community-link.tsx

@@ -20,42 +20,38 @@ export class CommunityLink extends Component<CommunityLinkProps, any> {
   }
 
   render() {
-    const community = this.props.community;
+    const { community, useApubName } = this.props;
-    let title: string, link: string;
     const local = community.local === null ? true : community.local;
-    const domain = hostname(community.actor_id);
+
+    let link: string;
+    let serverStr: string | undefined = undefined;
+
+    const title = useApubName
+      ? community.name
+      : community.title ?? community.name;
+
     if (local) {
-      title = community.title;
       link = `/c/${community.name}`;
     } else {
-      const name_ = `${community.name}@${domain}`;
+      serverStr = `@${hostname(community.actor_id)}`;
-      title = `${community.title}@${domain}`;
+      link = !this.props.realLink
-      link = !this.props.realLink ? `/c/${name_}` : community.actor_id;
+        ? `/c/${community.name}${serverStr}`
+        : community.actor_id;
     }
+    const classes = `community-link ${this.props.muted ? "text-muted" : ""}`;
 
-    const apubName = `!${community.name}@${domain}`;
-    const displayName = this.props.useApubName ? apubName : title;
     return !this.props.realLink ? (
-      <Link
+      <Link title={title} className={classes} to={link}>
-        title={apubName}
+        {this.avatarAndName(title, serverStr)}
-        className={`community-link ${this.props.muted ? "text-muted" : ""}`}
-        to={link}
-      >
-        {this.avatarAndName(displayName)}
       </Link>
     ) : (
-      <a
+      <a title={title} className={classes} href={link} rel={relTags}>
-        title={apubName}
+        {this.avatarAndName(title, serverStr)}
-        className={`community-link ${this.props.muted ? "text-muted" : ""}`}
-        href={link}
-        rel={relTags}
-      >
-        {this.avatarAndName(displayName)}
       </a>
     );
   }
 
-  avatarAndName(displayName: string) {
+  avatarAndName(title: string, serverStr?: string) {
     const icon = this.props.community.icon;
     const nsfw = this.props.community.nsfw;
 
@@ -65,7 +61,10 @@ export class CommunityLink extends Component<CommunityLinkProps, any> {
           !this.props.community.removed &&
           showAvatars() &&
           icon && <PictrsImage src={icon} icon nsfw={nsfw} />}
-        <span className="overflow-wrap-anywhere">{displayName}</span>
+        <span className="overflow-wrap-anywhere">
+          {title}
+          {serverStr && <small className="text-muted">{serverStr}</small>}
+        </span>
       </>
     );
   }

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

@@ -24,64 +24,47 @@ export class PersonListing extends Component<PersonListingProps, any> {
   }
 
   render() {
-    const person = this.props.person;
+    const { person, useApubName } = this.props;
     const local = person.local;
-    let apubName: string, link: string;
+    let link: string;
+    let serverStr: string | undefined = undefined;
+
+    const name = useApubName ? person.name : person.display_name ?? person.name;
 
     if (local) {
-      apubName = `@${person.name}`;
       link = `/u/${person.name}`;
     } else {
-      const domain = hostname(person.actor_id);
+      serverStr = `@${hostname(person.actor_id)}`;
-      apubName = `@${person.name}@${domain}`;
       link = !this.props.realLink
-        ? `/u/${person.name}@${domain}`
+        ? `/u/${person.name}${serverStr}`
         : person.actor_id;
     }
 
-    let displayName = this.props.useApubName
+    const classes = classNames(
-      ? 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}
+    return (
-          >
+      <>
-            {this.avatarAndName(displayName)}
+        {!this.props.realLink ? (
+          <Link title={name} className={classes} to={link}>
+            {this.avatarAndName(name, serverStr)}
           </Link>
         ) : (
-          <a
+          <a title={name} className={classes} href={link} rel={relTags}>
-            title={apubName}
+            {this.avatarAndName(name, serverStr)}
-            className={`person-listing d-inline-flex align-items-baseline ${
-              this.props.muted ? "text-muted" : "text-info"
-            }`}
-            href={link}
-            rel={relTags}
-          >
-            {this.avatarAndName(displayName)}
           </a>
         )}
 
-        {isCakeDay(person.published) && <CakeDay creatorName={apubName} />}
+        {isCakeDay(person.published) && <CakeDay creatorName={name} />}
       </>
     );
   }
 
-  avatarAndName(displayName: string) {
+  avatarAndName(name: string, serverStr?: string) {
     const avatar = this.props.person.avatar;
     return (
       <>
@@ -93,7 +76,8 @@ export class PersonListing extends Component<PersonListingProps, any> {
               icon
             />
           )}
-        <span>{displayName}</span>
+        <span>{name}</span>
+        {serverStr && <small className="text-muted">{serverStr}</small>}
       </>
     );
   }