Use titles vs names on channel claim previews, but show name in channel areas (#962)

* use titles

* Sidebar: show "title + name"

Co-authored-by: Thomas Zarebczan <thomas.zarebczan@gmail.com>

ui/component/claimPreview/view.jsx

@@ -415,7 +415,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                     </UriIndicator>
                   </div>
                 )}
-                <ClaimPreviewSubtitle uri={uri} type={type} />
+                <ClaimPreviewSubtitle uri={uri} type={type} showAtSign={isChannelUri} />
                 {(pending || !!reflectingProgress) && <PublishPending uri={uri} />}
                 {channelSubscribers}
               </div>

ui/component/claimPreviewSubtitle/view.jsx

@@ -17,11 +17,12 @@ type Props = {
   isLivestream: boolean,
   fetchSubCount: (string) => void,
   subCount: number,
+  showAtSign?: boolean,
 };
 
 // previews used in channel overview and homepage (and other places?)
 function ClaimPreviewSubtitle(props: Props) {
-  const { pending, uri, claim, type, beginPublish, isLivestream, fetchSubCount, subCount } = props;
+  const { pending, uri, claim, type, beginPublish, isLivestream, fetchSubCount, subCount, showAtSign } = props;
   const isChannel = claim && claim.value_type === 'channel';
   const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
 
@@ -43,7 +44,7 @@ function ClaimPreviewSubtitle(props: Props) {
     <div className="media__subtitle">
       {claim ? (
         <React.Fragment>
-          <UriIndicator uri={uri} link stripAtSign />{' '}
+          <UriIndicator uri={uri} showAtSign={showAtSign} link />{' '}
           {!pending && claim && (
             <>
               {isChannel && type !== 'inline' && (

ui/component/claimPreviewTile/view.jsx

@@ -222,7 +222,7 @@ function ClaimPreviewTile(props: Props) {
             <TruncatedText text={title || (claim && claim.name)} lines={isChannel ? 1 : 2} />
             {isChannel && (
               <div className="claim-tile__about">
-                <UriIndicator uri={uri} stripAtSign />
+                <UriIndicator uri={uri} />
               </div>
             )}
           </h2>
@@ -247,7 +247,7 @@ function ClaimPreviewTile(props: Props) {
               </UriIndicator>
 
               <div className="claim-tile__about">
-                <UriIndicator uri={uri} link stripAtSign />
+                <UriIndicator uri={uri} link />
                 <div className="claim-tile__about--counts">
                   <FileViewCountInline uri={uri} isLivestream={isLivestream} />
                   {isLivestream && <LivestreamDateTime uri={uri} />}

ui/component/claimPreviewTitle/view.jsx

@@ -1,6 +1,7 @@
 // @flow
 import React from 'react';
 import TruncatedText from 'component/common/truncated-text';
+import { stripLeadingAtSign } from 'util/string';
 
 type Props = {
   uri: string,
@@ -13,7 +14,11 @@ function ClaimPreviewTitle(props: Props) {
 
   return (
     <div className="claim-preview__title">
-      {claim ? <TruncatedText text={title || claim.name} lines={2} /> : <span>{__('Nothing here')}</span>}
+      {claim ? (
+        <TruncatedText text={title || stripLeadingAtSign(claim.name)} lines={2} />
+      ) : (
+        <span>{__('Nothing here')}</span>
+      )}
     </div>
   );
 }

ui/component/claimRepostAuthor/view.jsx

@@ -47,7 +47,7 @@ function ClaimRepostAuthor(props: Props) {
       <div className="claim-preview__repost-ribbon">
         <Icon icon={ICONS.REPOST} size={10} className="claim-preview__repost-icon" />
         <br />
-        <UriIndicator link uri={repostChannelUrl} />
+        <UriIndicator link uri={repostChannelUrl} showAtSign />
       </div>
     </div>
   );

ui/component/sideNavigation/view.jsx

@@ -5,6 +5,7 @@ import * as ICONS from 'constants/icons';
 import * as KEYCODES from 'constants/keycodes';
 import React, { useEffect } from 'react';
 import Button from 'component/button';
+import ClaimPreviewTitle from 'component/claimPreviewTitle';
 import classnames from 'classnames';
 import Icon from 'component/common/icon';
 import NotificationBubble from 'component/notificationBubble';
@@ -13,7 +14,6 @@ import I18nMessage from 'component/i18nMessage';
 import ChannelThumbnail from 'component/channelThumbnail';
 import { useIsMobile, useIsLargeScreen, isTouch } from 'effects/use-screensize';
 import { GetLinksData } from 'util/buildHomepage';
-import { stripLeadingAtSign } from 'util/string';
 import { DOMAIN, ENABLE_UI_NOTIFICATIONS, ENABLE_NO_SOURCE_CLAIMS, CHANNEL_STAKED_LEVEL_LIVESTREAM } from 'config';
 
 const FOLLOWED_ITEM_INITIAL_LIMIT = 10;
@@ -536,16 +536,19 @@ function SideNavigation(props: Props) {
 function SubscriptionListItem({ subscription }: { subscription: Subscription }) {
   const { uri, channelName } = subscription;
   return (
-    <li className="navigation-link__wrapper">
+    <li className="navigation-link__wrapper navigation__subscription">
       <Button
         navigate={uri}
         className="navigation-link navigation-link--with-thumbnail"
         activeClass="navigation-link--active"
       >
         <ChannelThumbnail xsmall uri={uri} hideStakedIndicator />
-        <span dir="auto" className="button__label">
-          {stripLeadingAtSign(channelName)}
-        </span>
+        <div className="navigation__subscription-title">
+          <ClaimPreviewTitle uri={uri} />
+          <span dir="auto" className="channel-name">
+            {channelName}
+          </span>
+        </div>
       </Button>
     </li>
   );

ui/component/uriIndicator/view.jsx

@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import Button from 'component/button';
 import { stripLeadingAtSign } from 'util/string';
 
-type ChannelInfo = { uri: string, name: string };
+type ChannelInfo = { uri: string, name: string, title: string };
 
 type Props = {
   uri: string,
@@ -15,7 +15,7 @@ type Props = {
   focusable?: boolean, // Defaults to 'true' if not provided.
   hideAnonymous?: boolean,
   inline?: boolean,
-  stripAtSign?: boolean,
+  showAtSign?: boolean,
   className?: string,
   children: ?Node, // to allow for other elements to be nested within the UriIndicator (commit: 1e82586f).
   // --- redux ---
@@ -48,6 +48,7 @@ class UriIndicator extends React.PureComponent<Props> {
         isAnonymous: false,
         channelName: channelInfo.name,
         channelLink: isLinkType ? channelInfo.uri : false,
+        channelTitle: channelInfo.title,
       };
     } else if (claim) {
       const signingChannel = claim.signing_channel && claim.signing_channel.amount;
@@ -59,6 +60,10 @@ class UriIndicator extends React.PureComponent<Props> {
         isAnonymous: !signingChannel && !isChannelClaim,
         channelName: channelClaim?.name,
         channelLink: isLinkType ? channelClaim?.canonical_url || channelClaim?.permanent_url : false,
+        channelTitle:
+          channelClaim && channelClaim.value && channelClaim.value.title
+            ? channelClaim.value.title
+            : stripLeadingAtSign(channelClaim?.name),
       };
     } else {
       return {
@@ -66,6 +71,7 @@ class UriIndicator extends React.PureComponent<Props> {
         isAnonymous: undefined,
         channelName: undefined,
         channelLink: undefined,
+        channelTitle: undefined,
       };
     }
   };
@@ -81,7 +87,7 @@ class UriIndicator extends React.PureComponent<Props> {
       focusable = true,
       external = false,
       hideAnonymous = false,
-      stripAtSign,
+      showAtSign,
       className,
     } = this.props;
 
@@ -108,11 +114,11 @@ class UriIndicator extends React.PureComponent<Props> {
     }
 
     if (data.hasChannelData) {
-      const { channelName, channelLink } = data;
+      const { channelLink, channelTitle, channelName } = data;
 
       const inner = (
         <span dir="auto" className={classnames('channel-name', { 'channel-name--inline': inline })}>
-          {stripAtSign ? stripLeadingAtSign(channelName) : channelName}
+          {showAtSign ? channelName : stripLeadingAtSign(channelTitle)}
         </span>
       );
 

ui/scss/component/_navigation.scss

@@ -459,3 +459,47 @@
     margin-bottom: -2px;
   }
 }
+
+.navigation-link__wrapper.navigation__subscription {
+  margin-bottom: 0;
+}
+
+.navigation__subscription {
+  .button__content {
+    padding-top: var(--spacing-xxs);
+    padding-bottom: var(--spacing-xxs);
+  }
+
+  .navigation-link {
+    &:hover {
+      .channel-name {
+        color: var(--color-text); // disable the hover color
+      }
+    }
+  }
+
+  .channel-thumbnail {
+    align-self: center;
+  }
+
+  .navigation__subscription-title {
+    max-width: 90%;
+  }
+
+  .claim-preview__title {
+    span {
+      font-size: var(--font-xsmall);
+      $font_descender_est_height: 5px;
+      margin-bottom: calc(#{$font_descender_est_height} * -0.7);
+      display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .channel-name {
+    opacity: 0.7;
+    font-size: var(--font-xxsmall);
+  }
+}