diff --git a/app/javascript/mastodon/features/compose/components/featured_tags_dropdown.jsx b/app/javascript/mastodon/features/compose/components/featured_tags_dropdown.jsx
new file mode 100644
index 0000000000..c8bf2b677b
--- /dev/null
+++ b/app/javascript/mastodon/features/compose/components/featured_tags_dropdown.jsx
@@ -0,0 +1,266 @@
+import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+
+import { injectIntl, defineMessages } from 'react-intl';
+
+import classNames from 'classnames';
+
+import { supportsPassiveEvents } from 'detect-passive-events';
+import Overlay from 'react-overlays/Overlay';
+
+import TagIcon from '@/material-icons/400-24px/tag.svg?react';
+import { Icon } from 'mastodon/components/icon';
+import { featuredTags } from 'mastodon/initial_state';
+
+const messages = defineMessages({
+ add_tag: { id: 'status.featured_tags.add', defaultMessage: 'Add your featured tag' },
+});
+
+const listenerOptions = supportsPassiveEvents ? { passive: true, capture: true } : true;
+
+class FeaturedTagsDropdownMenu extends PureComponent {
+
+ static propTypes = {
+ style: PropTypes.object,
+ items: PropTypes.array.isRequired,
+ onClose: PropTypes.func.isRequired,
+ onChange: PropTypes.func.isRequired,
+ };
+
+ handleDocumentClick = e => {
+ if (this.node && !this.node.contains(e.target)) {
+ this.props.onClose();
+ e.stopPropagation();
+ }
+ };
+
+ handleKeyDown = e => {
+ const { items } = this.props;
+ const value = e.currentTarget.getAttribute('data-index');
+ const index = items.findIndex(item => {
+ return (item.value === value);
+ });
+ let element = null;
+
+ switch(e.key) {
+ case 'Escape':
+ this.props.onClose();
+ break;
+ case 'Enter':
+ this.handleClick(e);
+ break;
+ case 'ArrowDown':
+ element = this.node.childNodes[index + 1] || this.node.firstChild;
+ break;
+ case 'ArrowUp':
+ element = this.node.childNodes[index - 1] || this.node.lastChild;
+ break;
+ case 'Tab':
+ if (e.shiftKey) {
+ element = this.node.childNodes[index - 1] || this.node.lastChild;
+ } else {
+ element = this.node.childNodes[index + 1] || this.node.firstChild;
+ }
+ break;
+ case 'Home':
+ element = this.node.firstChild;
+ break;
+ case 'End':
+ element = this.node.lastChild;
+ break;
+ }
+
+ if (element) {
+ element.focus();
+ this.props.onChange(element.getAttribute('data-index'));
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ };
+
+ handleClick = e => {
+ const value = e.currentTarget.getAttribute('data-index');
+
+ e.preventDefault();
+
+ this.props.onClose();
+ this.props.onChange(value);
+ };
+
+ componentDidMount () {
+ document.addEventListener('click', this.handleDocumentClick, { capture: true });
+ document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
+ if (this.focusedItem) this.focusedItem.focus({ preventScroll: true });
+ }
+
+ componentWillUnmount () {
+ document.removeEventListener('click', this.handleDocumentClick, { capture: true });
+ document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
+ }
+
+ setRef = c => {
+ this.node = c;
+ };
+
+ setFocusRef = c => {
+ this.focusedItem = c;
+ };
+
+ render () {
+ const { style, items } = this.props;
+
+ return (
+
+ {items.map(item => (
+
+ ))}
+
+ );
+ }
+
+}
+
+class FeaturedTagsDropdown extends PureComponent {
+
+ static propTypes = {
+ isUserTouching: PropTypes.func,
+ onModalOpen: PropTypes.func,
+ onModalClose: PropTypes.func,
+ onChange: PropTypes.func.isRequired,
+ noDirect: PropTypes.bool,
+ container: PropTypes.func,
+ disabled: PropTypes.bool,
+ intl: PropTypes.object.isRequired,
+ };
+
+ state = {
+ open: false,
+ placement: 'bottom',
+ };
+
+ handleToggle = () => {
+ if (this.props.isUserTouching && this.props.isUserTouching()) {
+ if (this.state.open) {
+ this.props.onModalClose();
+ } else {
+ this.props.onModalOpen({
+ actions: this.options.map(option => ({ ...option, active: false })),
+ onClick: this.handleModalActionClick,
+ });
+ }
+ } else {
+ if (this.state.open && this.activeElement) {
+ this.activeElement.focus({ preventScroll: true });
+ }
+ this.setState({ open: !this.state.open });
+ }
+ };
+
+ handleModalActionClick = (e) => {
+ e.preventDefault();
+
+ const { value } = this.options[e.currentTarget.getAttribute('data-index')];
+
+ this.props.onModalClose();
+ this.props.onChange(value);
+ };
+
+ handleKeyDown = e => {
+ switch(e.key) {
+ case 'Escape':
+ this.handleClose();
+ break;
+ }
+ };
+
+ handleMouseDown = () => {
+ if (!this.state.open) {
+ this.activeElement = document.activeElement;
+ }
+ };
+
+ handleButtonKeyDown = (e) => {
+ switch(e.key) {
+ case ' ':
+ case 'Enter':
+ this.handleMouseDown();
+ break;
+ }
+ };
+
+ handleClose = () => {
+ if (this.state.open && this.activeElement) {
+ this.activeElement.focus({ preventScroll: true });
+ }
+ this.setState({ open: false });
+ };
+
+ handleChange = value => {
+ this.props.onChange(value);
+ };
+
+ componentWillMount () {
+ this.options = featuredTags.map((tag) => {
+ return { value: `#${tag}`, text: `#${tag}` };
+ });
+ }
+
+ setTargetRef = c => {
+ this.target = c;
+ };
+
+ findTarget = () => {
+ return this.target;
+ };
+
+ handleOverlayEnter = (state) => {
+ this.setState({ placement: state.placement });
+ };
+
+ render () {
+ const { container, disabled, intl } = this.props;
+ const { open, placement } = this.state;
+
+ if (!this.options || this.options.length === 0) {
+ return null;
+ }
+
+ return (
+
+
+
+
+ {({ props, placement }) => (
+
+ )}
+
+
+ );
+ }
+
+}
+
+export default injectIntl(FeaturedTagsDropdown);
diff --git a/app/javascript/mastodon/features/compose/containers/compose_form_container.js b/app/javascript/mastodon/features/compose/containers/compose_form_container.js
index c36c64a2cf..ae2759a93d 100644
--- a/app/javascript/mastodon/features/compose/containers/compose_form_container.js
+++ b/app/javascript/mastodon/features/compose/containers/compose_form_container.js
@@ -9,6 +9,7 @@ import {
changeComposeSpoilerText,
insertEmojiCompose,
insertExpirationCompose,
+ insertFeaturedTagCompose,
uploadCompose,
} from '../../../actions/compose';
import ComposeForm from '../components/compose_form';
@@ -72,6 +73,10 @@ const mapDispatchToProps = (dispatch) => ({
dispatch(insertExpirationCompose(position, data));
},
+ onPickFeaturedTag (position, data) {
+ dispatch(insertFeaturedTagCompose(position, data));
+ },
+
});
export default connect(mapStateToProps, mapDispatchToProps)(ComposeForm);
diff --git a/app/javascript/mastodon/features/compose/containers/featured_tags_dropdown_container.js b/app/javascript/mastodon/features/compose/containers/featured_tags_dropdown_container.js
new file mode 100644
index 0000000000..c43e0a4e70
--- /dev/null
+++ b/app/javascript/mastodon/features/compose/containers/featured_tags_dropdown_container.js
@@ -0,0 +1,30 @@
+import { connect } from 'react-redux';
+
+import { openModal, closeModal } from '../../../actions/modal';
+import { isUserTouching } from '../../../is_mobile';
+import FeaturedTagsDropdown from '../components/featured_tags_dropdown';
+
+const mapStateToProps = () => ({
+});
+
+const mapDispatchToProps = (dispatch, { onPickTag }) => ({
+
+ onChange (value) {
+ if (onPickTag) {
+ onPickTag(value);
+ }
+ },
+
+ isUserTouching,
+ onModalOpen: props => dispatch(openModal({
+ modalType: 'ACTIONS',
+ modalProps: props,
+ })),
+ onModalClose: () => dispatch(closeModal({
+ modalType: undefined,
+ ignoreFocus: false,
+ })),
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(FeaturedTagsDropdown);
diff --git a/app/javascript/mastodon/initial_state.js b/app/javascript/mastodon/initial_state.js
index f755c14a66..4176d854b1 100644
--- a/app/javascript/mastodon/initial_state.js
+++ b/app/javascript/mastodon/initial_state.js
@@ -41,6 +41,7 @@
* @property {boolean} enable_dtl_menu
* @property {boolean} enable_public_privacy
* @property {boolean=} expand_spoilers
+ * @property {string[]} featured_tags
* @property {HideItemsDefinition[]} hide_items
* @property {boolean} limited_federation_mode
* @property {string} locale
@@ -128,6 +129,7 @@ export const enableLocalTimeline = getMeta('enable_local_timeline');
export const enableLoginPrivacy = getMeta('enable_login_privacy');
export const enableDtlMenu = getMeta('enable_dtl_menu');
export const expandSpoilers = getMeta('expand_spoilers');
+export const featuredTags = getMeta('featured_tags') || [];
export const forceSingleColumn = !getMeta('advanced_layout');
export const limitedFederationMode = getMeta('limited_federation_mode');
export const mascot = getMeta('mascot');
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index f67065450a..70a7961e67 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -869,6 +869,7 @@
"status.emoji_reactions": "{count, plural, one {reaction} other {reactions}}",
"status.favourite": "Favorite",
"status.favourites": "{count, plural, one {favorite} other {favorites}}",
+ "status.featured_tags.add": "Add your featured tag",
"status.filter": "Filter this post",
"status.filtered": "Filtered",
"status.hide": "Hide post",
diff --git a/app/javascript/mastodon/locales/ja.json b/app/javascript/mastodon/locales/ja.json
index ef895d2504..e8fe546805 100644
--- a/app/javascript/mastodon/locales/ja.json
+++ b/app/javascript/mastodon/locales/ja.json
@@ -831,6 +831,7 @@
"status.expiration.7_days": "7 日後に削除",
"status.expiration.add": "時限投稿を設定",
"status.favourite": "お気に入り",
+ "status.featured_tags.add": "おすすめハッシュタグを追加",
"status.filter": "この投稿をフィルターする",
"status.filtered": "フィルターされました",
"status.hide": "投稿を非表示",
diff --git a/app/javascript/mastodon/reducers/compose.js b/app/javascript/mastodon/reducers/compose.js
index d59ba14f99..385639016c 100644
--- a/app/javascript/mastodon/reducers/compose.js
+++ b/app/javascript/mastodon/reducers/compose.js
@@ -36,6 +36,7 @@ import {
COMPOSE_COMPOSING_CHANGE,
COMPOSE_EMOJI_INSERT,
COMPOSE_EXPIRATION_INSERT,
+ COMPOSE_FEATURED_TAG_INSERT,
COMPOSE_REFERENCE_INSERT,
COMPOSE_UPLOAD_CHANGE_REQUEST,
COMPOSE_UPLOAD_CHANGE_SUCCESS,
@@ -265,6 +266,8 @@ const insertExpiration = (state, position, data) => {
});
};
+const insertFeaturedTag = insertExpiration;
+
const insertReference = (state, url, attributeType) => {
const oldText = state.get('text');
const attribute = attributeType || 'BT';
@@ -561,6 +564,8 @@ export default function compose(state = initialState, action) {
return insertEmoji(state, action.position, action.emoji, action.needsSpace);
case COMPOSE_EXPIRATION_INSERT:
return insertExpiration(state, action.position, action.data);
+ case COMPOSE_FEATURED_TAG_INSERT:
+ return insertFeaturedTag(state, action.position, action.data);
case COMPOSE_REFERENCE_INSERT:
return insertReference(state, action.url, action.attributeType);
case COMPOSE_UPLOAD_CHANGE_SUCCESS:
diff --git a/app/serializers/initial_state_serializer.rb b/app/serializers/initial_state_serializer.rb
index cdc76d9dff..37eabed2d0 100644
--- a/app/serializers/initial_state_serializer.rb
+++ b/app/serializers/initial_state_serializer.rb
@@ -47,6 +47,7 @@ class InitialStateSerializer < ActiveModel::Serializer
object_account_user.setting_show_quote_in_public ? nil : 'quote_in_public',
object_account_user.setting_show_relationships ? nil : 'relationships',
].compact
+ store[:featured_tags] = object.current_account.featured_tags.pluck(:name)
else
store[:auto_play_gif] = Setting.auto_play_gif
store[:display_media] = Setting.display_media