Fix reaction custom emoji rendering

Author: TheEssem

app/javascript/flavours/glitch/components/avatar_overlay.tsx

@@ -1,4 +1,5 @@
 import { Emoji } from 'flavours/glitch/components/emoji';
+import { CustomEmojiProvider } from 'flavours/glitch/components/emoji/context';
 import { isUnicodeEmoji } from 'flavours/glitch/features/emoji/utils';
 import { useHovering } from 'flavours/glitch/hooks/useHovering';
 import { autoPlayGif } from 'flavours/glitch/initial_state';
@@ -71,7 +72,9 @@ export const AvatarOverlay: React.FC<Props> = ({
 
     overlayElement = (
       <div className='account__emoji' data-emoji-name={emoji.name}>
-        <Emoji code={code} customEmoji={custom} />
+        <CustomEmojiProvider emojis={custom}>
+          <Emoji code={code} />
+        </CustomEmojiProvider>
       </div>
     );
   }

app/javascript/flavours/glitch/components/status_reactions.tsx

@@ -12,7 +12,10 @@ import {
 } from '@/flavours/glitch/actions/interactions';
 import { AnimatedNumber } from '@/flavours/glitch/components/animated_number';
 import { Emoji } from '@/flavours/glitch/components/emoji';
-import { AnimateEmojiProvider } from '@/flavours/glitch/components/emoji/context';
+import {
+  AnimateEmojiProvider,
+  CustomEmojiProvider,
+} from '@/flavours/glitch/components/emoji/context';
 import { isUnicodeEmoji } from '@/flavours/glitch/features/emoji/utils';
 import { useIdentity } from '@/flavours/glitch/identity_context';
 import {
@@ -114,9 +117,11 @@ const Reaction: FC<{
       style={style}
     >
       <AnimateEmojiProvider>
-        <span className='reactions-bar__item__emoji'>
-          <Emoji code={code} customEmoji={custom} />
-        </span>
+        <CustomEmojiProvider emojis={custom}>
+          <span className='reactions-bar__item__emoji'>
+            <Emoji code={code} />
+          </span>
+        </CustomEmojiProvider>
       </AnimateEmojiProvider>
       <span className='reactions-bar__item__count'>
         <AnimatedNumber value={reaction.get('count') as number} />

app/javascript/flavours/glitch/features/notifications_v2/components/notification_reaction.tsx

@@ -6,7 +6,10 @@ import { Link } from 'react-router-dom';
 
 import MoodIcon from '@/material-icons/400-24px/mood.svg?react';
 import { Emoji } from 'flavours/glitch/components/emoji';
-import { AnimateEmojiProvider } from 'flavours/glitch/components/emoji/context';
+import {
+  AnimateEmojiProvider,
+  CustomEmojiProvider,
+} from 'flavours/glitch/components/emoji/context';
 import type { ExtraCustomEmojiMap } from 'flavours/glitch/features/emoji/types';
 import { isUnicodeEmoji } from 'flavours/glitch/features/emoji/utils';
 import type { NotificationGroupReaction } from 'flavours/glitch/models/notification_group';
@@ -53,7 +56,10 @@ export const NotificationReaction: React.FC<{
                 e: (chunks) =>
                   notification.reaction ? (
                     <>
-                      {chunks} <Emoji code={code} customEmoji={custom} />
+                      {chunks}{' '}
+                      <CustomEmojiProvider emojis={custom}>
+                        <Emoji code={code} />
+                      </CustomEmojiProvider>
                     </>
                   ) : (
                     ''