From 808244f0cd8402816c9045dc8725d59e6e79f41e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?KMY=EF=BC=88=E9=9B=AA=E3=81=82=E3=81=99=E3=81=8B=EF=BC=89?=
 <tt@kmycode.net>
Date: Wed, 27 Mar 2024 18:32:32 +0900
Subject: [PATCH] =?UTF-8?q?Add:=20#92=20=E3=82=A2=E3=82=AB=E3=82=A6?=
 =?UTF-8?q?=E3=83=B3=E3=83=88=E3=81=AE=E3=81=8A=E3=81=99=E3=81=99=E3=82=81?=
 =?UTF-8?q?=E3=82=BF=E3=82=B0=E3=82=92=E7=9C=9F=E3=82=93=E4=B8=AD=E3=81=AE?=
 =?UTF-8?q?=E3=82=AB=E3=83=A9=E3=83=A0=E3=81=8B=E3=82=89=E3=82=82=E7=A2=BA?=
 =?UTF-8?q?=E8=AA=8D=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
 =?UTF-8?q?=20(#678)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* ハッシュタグを隠さないよう修正
---
 .../mastodon/components/hashtag_bar.tsx       | 22 +++++++++++-----
 .../features/account/components/header.jsx    | 26 ++++++++++++++++++-
 .../account_timeline/components/header.jsx    |  4 ++-
 .../containers/header_container.jsx           |  1 +
 4 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/app/javascript/mastodon/components/hashtag_bar.tsx b/app/javascript/mastodon/components/hashtag_bar.tsx
index 91fa922198..e8f3126bde 100644
--- a/app/javascript/mastodon/components/hashtag_bar.tsx
+++ b/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
-    ? hashtags
-    : hashtags.slice(0, VISIBLE_HASHTAGS);
+  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'
diff --git a/app/javascript/mastodon/features/account/components/header.jsx b/app/javascript/mastodon/features/account/components/header.jsx
index b4c354d34a..1f96a8ec40 100644
--- a/app/javascript/mastodon/features/account/components/header.jsx
+++ b/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] === '#')) {
-        link.addEventListener('click', this.handleHashtagClick, false);
+        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>
diff --git a/app/javascript/mastodon/features/account_timeline/components/header.jsx b/app/javascript/mastodon/features/account_timeline/components/header.jsx
index ee46b876f6..8a99a3991f 100644
--- a/app/javascript/mastodon/features/account_timeline/components/header.jsx
+++ b/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}
diff --git a/app/javascript/mastodon/features/account_timeline/containers/header_container.jsx b/app/javascript/mastodon/features/account_timeline/containers/header_container.jsx
index babe3882a7..d4ea4041a9 100644
--- a/app/javascript/mastodon/features/account_timeline/containers/header_container.jsx
+++ b/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;