Merge commit '1cb978bcc3d291a045f367e072ca0af1a1c4dbbc' into glitch-soc/merge-upstream

app/javascript/mastodon/components/admin/ReportReasonSelector.jsx

@@ -8,6 +8,7 @@ import classNames from 'classnames';
 import api from 'mastodon/api';
 
 const messages = defineMessages({
+  legal: { id: 'report.categories.legal', defaultMessage: 'Legal' },
   other: { id: 'report.categories.other', defaultMessage: 'Other' },
   spam: { id: 'report.categories.spam', defaultMessage: 'Spam' },
   violation: { id: 'report.categories.violation', defaultMessage: 'Content violates one or more server rules' },
@@ -150,6 +151,7 @@ class ReportReasonSelector extends PureComponent {
     return (
       <div className='report-reason-selector'>
         <Category id='other' text={intl.formatMessage(messages.other)} selected={category === 'other'} onSelect={this.handleSelect} disabled={disabled} />
+        <Category id='legal' text={intl.formatMessage(messages.legal)} selected={category === 'legal'} onSelect={this.handleSelect} disabled={disabled} />
         <Category id='spam' text={intl.formatMessage(messages.spam)} selected={category === 'spam'} onSelect={this.handleSelect} disabled={disabled} />
         <Category id='violation' text={intl.formatMessage(messages.violation)} selected={category === 'violation'} onSelect={this.handleSelect} disabled={disabled}>
           {rules.map(rule => <Rule key={rule.id} id={rule.id} text={rule.text} selected={rule_ids.includes(rule.id)} onToggle={this.handleToggle} disabled={disabled} />)}

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 [].filter.call(body.querySelectorAll('a[href]'), link => link.textContent[0] === '#' || (link.previousSibling?.textContent?.[link.previousSibling.textContent.length - 1] === '#')).map(node => node.textContent);
+  }, [text]);
+
+  const invisibleHashtags = useMemo(() => (
+    hashtags.filter(hashtag => !renderedHashtags.some(textContent => textContent.localeCompare(`#${hashtag.get('name')}`, undefined, { sensitivity: 'accent' }) === 0 || textContent.localeCompare(hashtag.get('name'), undefined, { sensitivity: 'accent' }) === 0))
+  ), [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

@@ -22,6 +22,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';
@@ -580,6 +581,8 @@ class Status extends ImmutablePureComponent {
 
             {media}
 
+            <HashtagBar hashtags={status.get('tags')} text={status.get('content')} />
+
             <StatusActionBar scrollKey={scrollKey} status={status} account={account} onFilter={matchedFilters ? this.handleFilterClick : null} {...other} />
           </div>
         </div>

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';
 
@@ -314,6 +315,8 @@ class DetailedStatus extends ImmutablePureComponent {
 
           {media}
 
+          <HashtagBar hashtags={status.get('tags')} text={status.get('content')} />
+
           <div className='detailed-status__meta'>
             <a className='detailed-status__datetime' href={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`} target='_blank' rel='noopener noreferrer'>
               <FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />

app/javascript/mastodon/locales/en.json

@@ -300,6 +300,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",
@@ -532,6 +533,7 @@
   "reply_indicator.cancel": "Cancel",
   "report.block": "Block",
   "report.block_explanation": "You will not see their posts. They will not be able to see your posts or follow you. They will be able to tell that they are blocked.",
+  "report.categories.legal": "Legal",
   "report.categories.other": "Other",
   "report.categories.spam": "Spam",
   "report.categories.violation": "Content violates one or more server rules",