Add reaction deck

This commit is contained in:
KMY 2023-05-26 15:15:48 +09:00
parent db5c358f4f
commit f1625fe101
24 changed files with 404 additions and 13 deletions

View file

@ -11,6 +11,7 @@ const messages = defineMessages({
edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
pins: { id: 'navigation_bar.pins', defaultMessage: 'Pinned posts' },
preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
reaction_deck: { id: 'navigation_bar.reaction_deck', defaultMessage: 'Reaction deck' },
follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favourites' },
emoji_reactions: { id: 'navigation_bar.emoji_reactions', defaultMessage: 'Stamps' },
@ -44,6 +45,7 @@ class ActionBar extends PureComponent {
menu.push({ text: intl.formatMessage(messages.edit_profile), href: '/settings/profile' });
menu.push({ text: intl.formatMessage(messages.preferences), href: '/settings/preferences' });
menu.push({ text: intl.formatMessage(messages.reaction_deck), to: '/reaction_deck' });
menu.push({ text: intl.formatMessage(messages.pins), to: '/pinned' });
menu.push(null);
menu.push({ text: intl.formatMessage(messages.follow_requests), to: '/follow_requests' });

View file

@ -1,11 +1,16 @@
import { Map as ImmutableMap } from 'immutable';
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { hideRecentEmojis } from 'mastodon/initial_state';
import { useEmoji } from '../../../actions/emojis';
import { changeSetting } from '../../../actions/settings';
import { shortCodes } from '../../emoji/emoji_mart_data_light';
import EmojiPickerDropdown from '../components/emoji_picker_dropdown';
const perLine = 8;
const lines = 2;
@ -28,21 +33,43 @@ const DEFAULTS = [
'ok_hand',
];
const getFrequentlyUsedEmojis = createSelector([
state => state.getIn(['settings', 'frequentlyUsedEmojis'], ImmutableMap()),
], emojiCounters => {
let emojis = emojiCounters
.keySeq()
.sort((a, b) => emojiCounters.get(a) - emojiCounters.get(b))
.reverse()
.slice(0, perLine * lines)
.toArray();
const RECENT_SIZE = DEFAULTS.length;
const DECK_SIZE = 16;
if (emojis.length < DEFAULTS.length) {
let uniqueDefaults = DEFAULTS.filter(emoji => !emojis.includes(emoji));
emojis = emojis.concat(uniqueDefaults.slice(0, DEFAULTS.length - emojis.length));
const getFrequentlyUsedEmojis = createSelector([
state => { return {
emojiCounters: state.getIn(['settings', 'frequentlyUsedEmojis'], ImmutableMap()),
reactionDeck: state.get('reaction_deck', ImmutableList()),
}; },
], data => {
const { emojiCounters, reactionDeck } = data;
let deckEmojis = reactionDeck
.toArray()
.map((e) => e.get('emoji'))
.filter((e) => e)
.map((e) => shortCodes[e] || e);
deckEmojis = [...new Set(deckEmojis)];
let emojis;
if (!hideRecentEmojis) {
emojis = emojiCounters
.keySeq()
.filter((ee) => deckEmojis.indexOf(ee) < 0)
.sort((a, b) => emojiCounters.get(a) - emojiCounters.get(b))
.reverse()
.slice(0, perLine * lines)
.toArray();
if (emojis.length < RECENT_SIZE) {
let uniqueDefaults = DEFAULTS.filter(emoji => !emojis.includes(emoji));
emojis = emojis.concat(uniqueDefaults.slice(0, RECENT_SIZE - emojis.length));
}
} else {
emojis = [];
}
emojis = deckEmojis.slice(0, DECK_SIZE).concat(emojis);
return emojis;
});