[Glitch] Add display of out-of-band hashtags in the web interface

Port df6e719898 to glitch-soc

Co-authored-by: Eugen Rochko <eugen@zeonfederated.com>
Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/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/flavours/glitch/components/status.jsx

@@ -19,6 +19,7 @@ import Card from '../features/status/components/card';
 import Bundle from '../features/ui/components/bundle';
 import { MediaGallery, Video, Audio } from '../features/ui/util/async-components';
 
+import { HashtagBar } from './hashtag_bar';
 import AttachmentList from './attachment_list';
 import StatusActionBar from './status_action_bar';
 import StatusContent from './status_content';
@@ -742,6 +743,10 @@ class Status extends ImmutablePureComponent {
       contentMediaIcons.push('tasks');
     }
 
+    media.push(
+      <HashtagBar hashtags={status.get('tags')} text={status.get('content')} />
+    );
+
     //  Here we prepare extra data-* attributes for CSS selectors.
     //  Users can use those for theming, hiding avatars etc via UserStyle
     const selectorAttribs = {

app/javascript/flavours/glitch/features/status/components/detailed_status.jsx

@@ -13,6 +13,7 @@ import AttachmentList from 'flavours/glitch/components/attachment_list';
 import { Avatar } from 'flavours/glitch/components/avatar';
 import { DisplayName } from 'flavours/glitch/components/display_name';
 import EditedTimestamp from 'flavours/glitch/components/edited_timestamp';
+import { HashtagBar } from 'flavours/glitch/components/hashtag_bar';
 import { Icon } from 'flavours/glitch/components/icon';
 import MediaGallery from 'flavours/glitch/components/media_gallery';
 import PictureInPicturePlaceholder from 'flavours/glitch/components/picture_in_picture_placeholder';
@@ -332,6 +333,8 @@ class DetailedStatus extends ImmutablePureComponent {
             disabled
           />
 
+          <HashtagBar hashtags={status.get('tags')} text={status.get('content')} />
+
           <div className='detailed-status__meta'>
             <a className='detailed-status__datetime' href={status.get('url')} 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/flavours/glitch/styles/components/misc.scss

@@ -1660,3 +1660,26 @@ noscript {
     opacity: 1;
   }
 }
+
+.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);
+    }
+  }
+}