moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'emoji-quick' into 'main' 

Display recently used emojis first in chooser

See merge request soapbox-pub/soapbox!3249
This commit is contained in:
Alex Gleason 2024-11-14 01:03:05 +00:00
parent e81bfb2701 a1ce938295
commit 4e283d2edd
1 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/ui/emoji-selector.tsx
View File

@ -7,8 +7,10 @@ import { closeModal, openModal } from 'soapbox/actions/modals.ts';
import EmojiComponent from 'soapbox/components/ui/emoji.tsx'; import EmojiComponent from 'soapbox/components/ui/emoji.tsx';
import HStack from 'soapbox/components/ui/hstack.tsx'; import HStack from 'soapbox/components/ui/hstack.tsx';
import IconButton from 'soapbox/components/ui/icon-button.tsx'; import IconButton from 'soapbox/components/ui/icon-button.tsx';
import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown.tsx'; import EmojiPickerDropdown, { getFrequentlyUsedEmojis } from 'soapbox/features/emoji/components/emoji-picker-dropdown.tsx';
import emojiData from 'soapbox/features/emoji/data.ts';
import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts'; import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
import { useClickOutside } from 'soapbox/hooks/useClickOutside.ts'; import { useClickOutside } from 'soapbox/hooks/useClickOutside.ts';
import { useFeatures } from 'soapbox/hooks/useFeatures.ts'; import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts'; import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
@ -67,8 +69,9 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
offsetOptions, offsetOptions,
all = true, all = true,
}): JSX.Element => { }): JSX.Element => {
const soapboxConfig = useSoapboxConfig(); const { allowedEmoji } = useSoapboxConfig();
const { customEmojiReacts } = useFeatures(); const { customEmojiReacts } = useFeatures();
const shortcodes = useAppSelector((state) => getFrequentlyUsedEmojis(state));
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const [expanded, setExpanded] = useState(false); const [expanded, setExpanded] = useState(false);
@ -113,6 +116,16 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
onClose?.(); onClose?.();
}); });
const recentEmojis = shortcodes.reduce<string[]>((results, shortcode) => {
const emoji = emojiData.emojis[shortcode]?.skins[0]?.native;
if (emoji) {
results.push(emoji);
}
return results;
}, []);
const emojis = new Set([...recentEmojis, ...allowedEmoji]);
return ( return (
<div <div
className={clsx('z-[101] transition-opacity duration-100', { className={clsx('z-[101] transition-opacity duration-100', {
@ -138,7 +151,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
<HStack <HStack
className={clsx('z-[999] flex w-max max-w-[100vw] flex-wrap space-x-3 rounded-full bg-white px-3 py-2.5 shadow-lg focus:outline-none dark:bg-gray-900 dark:ring-2 dark:ring-primary-700')} className={clsx('z-[999] flex w-max max-w-[100vw] flex-wrap space-x-3 rounded-full bg-white px-3 py-2.5 shadow-lg focus:outline-none dark:bg-gray-900 dark:ring-2 dark:ring-primary-700')}
> >
{Array.from(soapboxConfig.allowedEmoji).map((emoji, i) => ( {[...emojis].slice(0, 6).map((emoji, i) => (
<EmojiButton <EmojiButton
key={i} key={i}
emoji={emoji} emoji={emoji}