fix: cross-platform emoji compatibility

Signed-off-by: Adam Setch <adam.setch@outlook.com>

package.json

@@ -102,6 +102,7 @@
   "dependencies": {
     "@electron/remote": "2.1.2",
     "@primer/octicons-react": "19.11.0",
+    "@twemoji/api": "15.1.0",
     "axios": "1.7.3",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",

src/components/AllRead.tsx

@@ -1,5 +1,6 @@
 import { type FC, useMemo } from 'react';
 import { Constants } from '../utils/constants';
+import { Emoji } from './icons/Emoji';
 
 export const AllRead: FC = () => {
   const emoji = useMemo(
@@ -12,9 +13,11 @@ export const AllRead: FC = () => {
 
   return (
     <div className="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white">
-      <h1 className="mt-2 mb-5 text-5xl">{emoji}</h1>
+      <div className="mt-2 mb-5 text-5xl">
+        <Emoji emoji={emoji} />
+      </div>
 
-      <h2 className="mb-2 text-xl font-semibold">No new notifications.</h2>
+      <div className="mb-2 text-xl font-semibold">No new notifications.</div>
     </div>
   );
 };

src/components/Oops.tsx

@@ -1,5 +1,6 @@
 import { type FC, useMemo } from 'react';
 import type { GitifyError } from '../types';
+import { Emoji } from './icons/Emoji';
 
 interface IOops {
   error: GitifyError;
@@ -13,9 +14,11 @@ export const Oops: FC<IOops> = ({ error }: IOops) => {
 
   return (
     <div className="flex flex-1 flex-col items-center justify-center p-4">
-      <h1 className="mt-2 mb-5 text-5xl">{emoji}</h1>
+      <div className="mt-2 mb-5 text-5xl">
+        <Emoji emoji={emoji} />
+      </div>
 
-      <h2 className="mb-2 text-xl font-semibold">{error.title}</h2>
+      <div className="mb-2 text-xl font-semibold">{error.title}</div>
       {error.descriptions.map((description, i) => {
         return (
           // biome-ignore lint/suspicious/noArrayIndexKey: using index for key to keep the error constants clean

src/components/icons/Emoji.test.tsx

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+import { Emoji, type IEmoji } from './Emoji';
+
+describe('components/icons/Emoji.tsx', () => {
+  it('should render', () => {
+    const props: IEmoji = {
+      emoji: '🍺',
+    };
+    const tree = render(<Emoji {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/icons/Emoji.tsx

@@ -0,0 +1,17 @@
+import twemoji from '@twemoji/api';
+import type { FC } from 'react';
+
+export interface IEmoji {
+  emoji: string;
+}
+
+export const Emoji: FC<IEmoji> = (props: IEmoji) => {
+  // Generate the HTML for the emoji using twemoji
+  const emojiHtml = twemoji.parse(props.emoji, {
+    folder: 'svg',
+    ext: '.svg',
+  });
+
+  // biome-ignore lint/security/noDangerouslySetInnerHtml: used for cross-platform emoji compatibility
+  return <span dangerouslySetInnerHTML={{ __html: emojiHtml }} />;
+};