Merge remote-tracking branch 'parent/main' into kb_migration

app/javascript/mastodon/components/hashtag_bar.jsx

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+import { useMemo, useState, useCallback } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { Link } from 'react-router-dom';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+const domParser = new DOMParser();
+
+// About two lines on desktop
+const VISIBLE_HASHTAGS = 7;
+
+export const HashtagBar = ({ hashtags, text }) => {
+  const renderedHashtags = useMemo(() => {
+    const body = domParser.parseFromString(text, 'text/html').documentElement;
+    return [].map.call(body.querySelectorAll('[rel=tag]'), node => node.textContent.toLowerCase());
+  }, [text]);
+
+  const invisibleHashtags = useMemo(() => (
+    hashtags.filter(hashtag => !renderedHashtags.some(textContent => textContent === `#${hashtag.get('name')}` || textContent === hashtag.get('name')))
+  ), [hashtags, renderedHashtags]);
+
+  const [expanded, setExpanded] = useState(false);
+  const handleClick = useCallback(() => setExpanded(true), []);
+
+  if (invisibleHashtags.isEmpty()) {
+    return null;
+  }
+
+  const revealedHashtags = expanded ? invisibleHashtags : invisibleHashtags.take(VISIBLE_HASHTAGS);
+
+  return (
+    <div className='hashtag-bar'>
+      {revealedHashtags.map(hashtag => (
+        <Link key={hashtag.get('name')} to={`/tags/${hashtag.get('name')}`}>
+          #{hashtag.get('name')}
+        </Link>
+      ))}
+
+      {!expanded && invisibleHashtags.size > VISIBLE_HASHTAGS && <button className='link-button' onClick={handleClick}><FormattedMessage id='hashtags.and_other' defaultMessage='…and {count, plural, other {# more}}' values={{ count: invisibleHashtags.size - VISIBLE_HASHTAGS }} /></button>}
+    </div>
+  );
+};
+
+HashtagBar.propTypes = {
+  hashtags: ImmutablePropTypes.list,
+  text: PropTypes.string,
+};

app/javascript/mastodon/components/status.jsx

@@ -23,6 +23,7 @@ import { displayMedia } from '../initial_state';
 import { Avatar } from './avatar';
 import { AvatarOverlay } from './avatar_overlay';
 import { DisplayName } from './display_name';
+import { HashtagBar } from './hashtag_bar';
 import { RelativeTimestamp } from './relative_timestamp';
 import StatusActionBar from './status_action_bar';
 import StatusContent from './status_content';
@@ -612,6 +613,8 @@ class Status extends ImmutablePureComponent {
 
             {media}
 
+            <HashtagBar hashtags={status.get('tags')} text={status.get('content')} />
+
             {emojiReactionsBar}
 
             <StatusActionBar scrollKey={scrollKey} status={status} account={account} onFilter={matchedFilters ? this.handleFilterClick : null} {...other} />

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

@@ -267,9 +267,9 @@ class Header extends ImmutablePureComponent {
       if (signedIn && !account.get('relationship')) { // Wait until the relationship is loaded
         actionBtn = '';
       } else if (account.getIn(['relationship', 'requested'])) {
-        actionBtn = <Button className={classNames({ 'button--with-bell': bellBtn !== '' })} text={intl.formatMessage(messages.cancel_follow_request)} title={intl.formatMessage(messages.requested)} onClick={this.props.onFollow} />;
+        actionBtn = <Button text={intl.formatMessage(messages.cancel_follow_request)} title={intl.formatMessage(messages.requested)} onClick={this.props.onFollow} />;
       } else if (!account.getIn(['relationship', 'blocking'])) {
-        actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames({ 'button--destructive': account.getIn(['relationship', 'following']), 'button--with-bell': bellBtn !== '' })} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={signedIn ? this.props.onFollow : this.props.onInteractionModal} />;
+        actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames({ 'button--destructive': account.getIn(['relationship', 'following']) })} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={signedIn ? this.props.onFollow : this.props.onInteractionModal} />;
       } else if (account.getIn(['relationship', 'blocking'])) {
         actionBtn = <Button text={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.props.onBlock} />;
       }

app/javascript/mastodon/features/status/components/detailed_status.jsx

@@ -10,6 +10,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import { AnimatedNumber } from 'mastodon/components/animated_number';
 import EditedTimestamp from 'mastodon/components/edited_timestamp';
+import { HashtagBar } from 'mastodon/components/hashtag_bar';
 import { Icon }  from 'mastodon/components/icon';
 import PictureInPicturePlaceholder from 'mastodon/components/picture_in_picture_placeholder';
 
@@ -389,6 +390,8 @@ class DetailedStatus extends ImmutablePureComponent {
 
           {media}
 
+          <HashtagBar hashtags={status.get('tags')} text={status.get('content')} />
+          
           {emojiReactionsBar}
 
           <div className='detailed-status__meta'>

app/javascript/mastodon/locales/en.json

@@ -308,6 +308,7 @@
   "hashtag.counter_by_uses_today": "{count, plural, one {{counter} post} other {{counter} posts}} today",
   "hashtag.follow": "Follow hashtag",
   "hashtag.unfollow": "Unfollow hashtag",
+  "hashtags.and_other": "…and {count, plural, other {# more}}",
   "home.actions.go_to_explore": "See what's trending",
   "home.actions.go_to_suggestions": "Find people to follow",
   "home.column_settings.basic": "Basic",

app/javascript/styles/mastodon/components.scss

@@ -170,11 +170,6 @@
     display: block;
     width: 100%;
   }
-
-  .layout-multiple-columns &.button--with-bell {
-    font-size: 12px;
-    padding: 0 8px;
-  }
 }
 
 .column__wrapper {
@@ -9405,3 +9400,26 @@ noscript {
     }
   }
 }
+
+.hashtag-bar {
+  margin-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 14px;
+  gap: 4px;
+
+  a {
+    display: inline-flex;
+    border-radius: 4px;
+    background: rgba($highlight-text-color, 0.2);
+    color: $highlight-text-color;
+    padding: 0.4em 0.6em;
+    text-decoration: none;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background: rgba($highlight-text-color, 0.3);
+    }
+  }
+}