diff --git a/app/javascript/flavours/glitch/components/hashtag_bar.jsx b/app/javascript/flavours/glitch/components/hashtag_bar.jsx
new file mode 100644
index 0000000000..6a39005e16
--- /dev/null
+++ b/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 (
+
+ {revealedHashtags.map(hashtag => (
+
+ #{hashtag.get('name')}
+
+ ))}
+
+ {!expanded && invisibleHashtags.size > VISIBLE_HASHTAGS && }
+
+ );
+};
+
+HashtagBar.propTypes = {
+ hashtags: ImmutablePropTypes.list,
+ text: PropTypes.string,
+};
\ No newline at end of file
diff --git a/app/javascript/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx
index d3d432ae05..851fc09136 100644
--- a/app/javascript/flavours/glitch/components/status.jsx
+++ b/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(
+
+ );
+
// Here we prepare extra data-* attributes for CSS selectors.
// Users can use those for theming, hiding avatars etc via UserStyle
const selectorAttribs = {
diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx b/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx
index 1770436ae7..d09eb9267b 100644
--- a/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx
+++ b/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
/>
+
+