ClaimPreview & sidebar: strip '@' since channel is implied (#879)

## Ticket
865: Hide @ symbol in areas where channel names are implied

ui/component/claimPreviewSubtitle/view.jsx

@@ -43,7 +43,7 @@ function ClaimPreviewSubtitle(props: Props) {
     <div className="media__subtitle">
       {claim ? (
         <React.Fragment>
-          <UriIndicator uri={uri} link />{' '}
+          <UriIndicator uri={uri} link stripAtSign />{' '}
           {!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} />
+                <UriIndicator uri={uri} stripAtSign />
               </div>
             )}
           </h2>
@@ -247,7 +247,7 @@ function ClaimPreviewTile(props: Props) {
               </UriIndicator>
 
               <div className="claim-tile__about">
-                <UriIndicator uri={uri} link />
+                <UriIndicator uri={uri} link stripAtSign />
                 <div className="claim-tile__about--counts">
                   <FileViewCountInline uri={uri} isLivestream={isLivestream} />
                   {isLivestream && <LivestreamDateTime uri={uri} />}

ui/component/sideNavigation/view.jsx

@@ -13,6 +13,7 @@ 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;
@@ -539,7 +540,7 @@ function SubscriptionListItem({ subscription }: { subscription: Subscription })
       >
         <ChannelThumbnail xsmall uri={uri} hideStakedIndicator />
         <span dir="auto" className="button__label">
-          {channelName}
+          {stripLeadingAtSign(channelName)}
         </span>
       </Button>
     </li>

ui/component/uriIndicator/view.jsx

@@ -3,6 +3,7 @@ import type { Node } from 'react';
 import React from 'react';
 import classnames from 'classnames';
 import Button from 'component/button';
+import { stripLeadingAtSign } from 'util/string';
 
 type ChannelInfo = { uri: string, name: string };
 
@@ -14,6 +15,7 @@ type Props = {
   focusable?: boolean, // Defaults to 'true' if not provided.
   hideAnonymous?: boolean,
   inline?: boolean,
+  stripAtSign?: boolean,
   className?: string,
   children: ?Node, // to allow for other elements to be nested within the UriIndicator (commit: 1e82586f).
   // --- redux ---
@@ -79,6 +81,7 @@ class UriIndicator extends React.PureComponent<Props> {
       focusable = true,
       external = false,
       hideAnonymous = false,
+      stripAtSign,
       className,
     } = this.props;
 
@@ -109,7 +112,7 @@ class UriIndicator extends React.PureComponent<Props> {
 
       const inner = (
         <span dir="auto" className={classnames('channel-name', { 'channel-name--inline': inline })}>
-          {channelName}
+          {stripAtSign ? stripLeadingAtSign(channelName) : channelName}
         </span>
       );
 

ui/util/string.js

@@ -21,3 +21,7 @@ export function toCompactNotation(number: string | number, lang: ?string, minThr
     return Number(number).toLocaleString(locale);
   }
 }
+
+export function stripLeadingAtSign(str: ?string) {
+  return str && str.charAt(0) === '@' ? str.slice(1) : str;
+}