Emoji: Picker native rendering (#36454)

app/javascript/mastodon/features/emoji/emoji_picker.tsx

@@ -2,9 +2,12 @@ import type { EmojiProps, PickerProps } from 'emoji-mart';
 import EmojiRaw from 'emoji-mart/dist-es/components/emoji/nimble-emoji';
 import PickerRaw from 'emoji-mart/dist-es/components/picker/nimble-picker';
 
+import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
 import { assetHost } from 'mastodon/utils/config';
 
+import { EMOJI_MODE_NATIVE } from './constants';
 import EmojiData from './emoji_data.json';
+import { useEmojiAppState } from './hooks';
 
 const backgroundImageFnDefault = () => `${assetHost}/emoji/sheet_15_1.png`;
 
@@ -16,6 +19,7 @@ const Emoji = ({
   backgroundImageFn = backgroundImageFnDefault,
   ...props
 }: EmojiProps) => {
+  const { mode } = useEmojiAppState();
   return (
     <EmojiRaw
       data={EmojiData}
@@ -23,6 +27,7 @@ const Emoji = ({
       sheetSize={sheetSize}
       sheetColumns={sheetColumns}
       sheetRows={sheetRows}
+      native={mode === EMOJI_MODE_NATIVE && isModernEmojiEnabled()}
       backgroundImageFn={backgroundImageFn}
       {...props}
     />
@@ -37,6 +42,7 @@ const Picker = ({
   backgroundImageFn = backgroundImageFnDefault,
   ...props
 }: PickerProps) => {
+  const { mode } = useEmojiAppState();
   return (
     <PickerRaw
       data={EmojiData}
@@ -45,6 +51,7 @@ const Picker = ({
       sheetColumns={sheetColumns}
       sheetRows={sheetRows}
       backgroundImageFn={backgroundImageFn}
+      native={mode === EMOJI_MODE_NATIVE && isModernEmojiEnabled()}
       {...props}
     />
   );

app/javascript/mastodon/features/emoji/hooks.ts

@@ -1,6 +1,6 @@
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 
-import { useAppSelector } from '@/mastodon/store';
+import { createAppSelector, useAppSelector } from '@/mastodon/store';
 import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
 
 import { toSupportedLocale } from './locale';
@@ -58,13 +58,16 @@ export function useEmojify({
   return emojifiedText;
 }
 
+const modeSelector = createAppSelector(
+  [(state) => state.meta.get('emoji_style') as string],
+  (emoji_style) => determineEmojiMode(emoji_style),
+);
+
 export function useEmojiAppState(): EmojiAppState {
   const locale = useAppSelector((state) =>
     toSupportedLocale(state.meta.get('locale') as string),
   );
-  const mode = useAppSelector((state) =>
+  const mode = useAppSelector(modeSelector);
-    determineEmojiMode(state.meta.get('emoji_style') as string),
-  );
 
   return {
     currentLocale: locale,