Add: #92 アカウントのおすすめタグを真ん中のカラムからも確認できるように (#678)

* Add: #92 アカウントのおすすめタグを真ん中のカラムからも確認できるように

* ハッシュタグを隠さないよう修正

app/javascript/mastodon/components/hashtag_bar.tsx

@@ -196,9 +196,15 @@ export function getHashtagBarForStatus(status: StatusLike) {
   };
 }
 
+export function getFeaturedHashtagBar(acct: string, tags: string[]) {
+  return <HashtagBar acct={acct} hashtags={tags} defaultExpanded />;
+}
+
 const HashtagBar: React.FC<{
   hashtags: string[];
-}> = ({ hashtags }) => {
+  acct?: string;
+  defaultExpanded?: boolean;
+}> = ({ hashtags, acct, defaultExpanded }) => {
   const [expanded, setExpanded] = useState(false);
   const handleClick = useCallback(() => {
     setExpanded(true);
@@ -208,19 +214,23 @@ const HashtagBar: React.FC<{
     return null;
   }
 
-  const revealedHashtags = expanded
+  const revealedHashtags =
+    expanded || defaultExpanded
       ? hashtags
       : hashtags.slice(0, VISIBLE_HASHTAGS);
 
   return (
     <div className='hashtag-bar'>
       {revealedHashtags.map((hashtag) => (
-        <Link key={hashtag} to={`/tags/${hashtag}`}>
+        <Link
+          key={hashtag}
+          to={acct ? `/@${acct}/tagged/${hashtag}` : `/tags/${hashtag}`}
+        >
           #<span>{hashtag}</span>
         </Link>
       ))}
 
-      {!expanded && hashtags.length > VISIBLE_HASHTAGS && (
+      {!expanded && !defaultExpanded && hashtags.length > VISIBLE_HASHTAGS && (
         <button className='link-button' onClick={handleClick}>
           <FormattedMessage
             id='hashtags.and_other'

app/javascript/mastodon/features/account/components/header.jsx

@@ -20,6 +20,7 @@ import { Badge, AutomatedBadge, GroupBadge } from 'mastodon/components/badge';
 import { Button } from 'mastodon/components/button';
 import { CopyIconButton } from 'mastodon/components/copy_icon_button';
 import { FollowersCounter, FollowingCounter, StatusesCounter } from 'mastodon/components/counters';
+import { getFeaturedHashtagBar } from 'mastodon/components/hashtag_bar';
 import { Icon }  from 'mastodon/components/icon';
 import { IconButton } from 'mastodon/components/icon_button';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
@@ -115,6 +116,7 @@ class Header extends ImmutablePureComponent {
 
   static propTypes = {
     account: ImmutablePropTypes.record,
+    featuredTags: PropTypes.array,
     identity_props: ImmutablePropTypes.list,
     onFollow: PropTypes.func.isRequired,
     onBlock: PropTypes.func.isRequired,
@@ -215,6 +217,16 @@ class Header extends ImmutablePureComponent {
     }
   };
 
+  handleFeaturedHashtagClick = e => {
+    const { history, account } = this.props;
+    const value = e.currentTarget.textContent.replace(/^#/, '');
+
+    if (history && e.button === 0 && !(e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      history.push(`/@${account.get('acct')}/tagged/${value}`);
+    }
+  };
+
   handleMentionClick = e => {
     const { history, onOpenURL } = this.props;
 
@@ -244,7 +256,11 @@ class Header extends ImmutablePureComponent {
       link = links[i];
 
       if (link.textContent[0] === '#' || (link.previousSibling && link.previousSibling.textContent && link.previousSibling.textContent[link.previousSibling.textContent.length - 1] === '#')) {
+        if (link.href && link.href.includes('/tagged/')) {
+          link.addEventListener('click', this.handleFeaturedHashtagClick, false);
+        } else {
           link.addEventListener('click', this.handleHashtagClick, false);
+        }
       } else if (link.classList.contains('mention')) {
         link.addEventListener('click', this.handleMentionClick, false);
       }
@@ -409,6 +425,8 @@ class Header extends ImmutablePureComponent {
     const username        = account.get('acct').split('@')[0];
     const domain          = isLocal ? localDomain : account.get('acct').split('@')[1];
     const isIndexable     = !account.get('noindex');
+    const featuredTagsArr = this.props.featuredTags?.map((tag) => tag.get('name')).toArray() || [];
+    const featuredTags    = getFeaturedHashtagBar(account.get('acct'), featuredTagsArr);
 
     const badges = [];
 
@@ -472,6 +490,12 @@ class Header extends ImmutablePureComponent {
 
                 {account.get('note').length > 0 && account.get('note') !== '<p></p>' && <div className='account__header__content translate' dangerouslySetInnerHTML={content} />}
 
+                {featuredTagsArr.length > 0 && (
+                  <div className='account__header__featured-tags'>
+                    {featuredTags}
+                  </div>
+                )}
+
                 <div className='account__header__fields'>
                   <dl>
                     <dt><FormattedMessage id='account.joined_short' defaultMessage='Joined' /></dt>

app/javascript/mastodon/features/account_timeline/components/header.jsx

@@ -18,6 +18,7 @@ class Header extends ImmutablePureComponent {
 
   static propTypes = {
     account: ImmutablePropTypes.record,
+    featuredTags: PropTypes.array,
     onFollow: PropTypes.func.isRequired,
     onBlock: PropTypes.func.isRequired,
     onMention: PropTypes.func.isRequired,
@@ -123,7 +124,7 @@ class Header extends ImmutablePureComponent {
   };
 
   render () {
-    const { account, hidden, hideTabs } = this.props;
+    const { account, featuredTags, hidden, hideTabs } = this.props;
 
     if (account === null) {
       return null;
@@ -136,6 +137,7 @@ class Header extends ImmutablePureComponent {
 
         <InnerHeader
           account={account}
+          featuredTags={featuredTags}
           onFollow={this.handleFollow}
           onBlock={this.handleBlock}
           onMention={this.handleMention}

app/javascript/mastodon/features/account_timeline/containers/header_container.jsx

@@ -37,6 +37,7 @@ const makeMapStateToProps = () => {
     account: getAccount(state, accountId),
     domain: state.getIn(['meta', 'domain']),
     hidden: getAccountHidden(state, accountId),
+    featuredTags: state.getIn(['user_lists', 'featured_tags', accountId, 'items']),
   });
 
   return mapStateToProps;