feat: add twemoji support

src/discord/structures/Message.ts

@@ -1,4 +1,5 @@
 import { Attachment } from './Attachment';
+import { Reaction } from './Reaction';
 import { Snowflake } from './Snowflake';
 import { IUserData } from './user/BaseUser';
 
@@ -9,4 +10,5 @@ export interface Message {
   id: Snowflake;
   author: IUserData;
   channel_id: Snowflake;
+  reactions?: Reaction[];
 }

src/discord/structures/Reaction.ts

@@ -0,0 +1,8 @@
+export interface Reaction {
+  count: number;
+  emoji: {
+    id: string | null;
+    name: string;
+  };
+  me: true;
+}

src/renderer/App.tsx

@@ -11,6 +11,7 @@ import '@/styles/channel/ChannelButton.css';
 import '@/styles/channel/ChannelList.css';
 import '@/styles/channel/Message.css';
 import '@/styles/channel/MessageAttachment.css';
+import '@/styles/channel/MessageReaction.css';
 
 import '@/styles/directmessage/DirectMessageButton.css';
 import '@/styles/directmessage/DirectMessageList.css';

src/renderer/components/channel/Message.tsx

@@ -2,6 +2,7 @@ import { Message as MessageData } from '@/discord/structures/Message';
 import RendererUser from '@/discord/structures/user/RendererUser';
 import useGif from '@/hooks/useGif';
 import MessageAttachment from './MessageAttachment';
+import MessageReaction from './MessageReaction';
 
 type MessageProps = {
   message: MessageData;
@@ -13,6 +14,8 @@ export default function Message({ message }: MessageProps) {
   const author = new RendererUser(message.author);
   const authorDecorationUrl = author.getAvatarDecorationUrl();
 
+  const reactions = message.reactions ?? [];
+
   return (
     <div className="Message">
       <div className="Message--author-container">
@@ -49,6 +52,17 @@ export default function Message({ message }: MessageProps) {
             );
           })}
         </div>
+
+        <div className="Message--reactions-container">
+          {reactions.map((reaction) => {
+            return (
+              <MessageReaction
+                key={`Reaction:${reaction.emoji.name}`}
+                reaction={reaction}
+              />
+            );
+          })}
+        </div>
       </div>
     </div>
   );

src/renderer/components/channel/MessageReaction.tsx

@@ -0,0 +1,22 @@
+import { Reaction } from '@/discord/structures/Reaction';
+import { grabTheRightIcon } from '@/utils/emojiUtils';
+
+type MessageReactionProps = {
+  reaction: Reaction;
+};
+
+export default function MessageReaction({ reaction }: MessageReactionProps) {
+  const twemojiHash =
+    reaction.emoji.id === null ? grabTheRightIcon(reaction.emoji.name) : null;
+
+  const url = twemojiHash
+    ? `https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/${twemojiHash}.svg`
+    : undefined;
+
+  return (
+    <div className="MessageReaction">
+      <img className="MessageReaction-emoji" src={url} alt="" />
+      <p className="MessageReaction-count">{reaction.count}</p>
+    </div>
+  );
+}

src/renderer/index.ejs

@@ -7,7 +7,7 @@
       content="default-src 'self';
           script-src 'self';
           font-src 'self' https://fonts.gstatic.com;
-          img-src 'self' https://cdn.discordapp.com https://*.tenor.com;
+          img-src 'self' https://cdn.discordapp.com https://*.tenor.com https://cdn.jsdelivr.net;
           style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;"
     />
     <link rel="preconnect" href="https://fonts.googleapis.com" />

src/renderer/index.tsx

@@ -1,6 +1,18 @@
 import { createRoot } from 'react-dom/client';
 import App from './App';
+import { AppConfig } from '../common/appconfig';
 
-const container = document.getElementById('root') as HTMLElement;
-const root = createRoot(container);
-root.render(<App />);
+// eslint-disable-next-line import/prefer-default-export, import/no-mutable-exports
+export let config: AppConfig | null = null;
+
+window.electron.ipcRenderer
+  .invoke('app:config')
+  .then((conf: AppConfig) => {
+    config = conf;
+
+    const container = document.getElementById('root') as HTMLElement;
+    const root = createRoot(container);
+    root.render(<App />);
+    return true;
+  })
+  .catch((err) => console.error(err));

src/renderer/styles/channel/Message.css

@@ -41,3 +41,11 @@
   max-width: 300px;
   max-height: 300px;
 }
+
+.Message--reactions-container {
+  margin-top: 6px;
+  width: 100%;
+  flex-wrap: wrap;
+  display: flex;
+  gap: 6px;
+}

src/renderer/styles/channel/MessageReaction.css

@@ -0,0 +1,15 @@
+.MessageReaction {
+  display: flex;
+  gap: 6px;
+  min-width: 40px;
+  height: 20px;
+  padding: 10px 12px;
+  background: #4d7cf227;
+  border-radius: 10px;
+  border: 2px solid #4d7cf263;
+  cursor: pointer;
+}
+
+.MessageReaction:hover {
+  transform: scale(1.02);
+}

src/renderer/utils/emojiUtils.ts

@@ -0,0 +1,33 @@
+const UFE0Fg = /\uFE0F/g;
+
+// avoid using a string literal like '\u200D' here because minifiers expand it inline
+const U200D = String.fromCharCode(0x200d);
+
+function toCodePoint(unicodeSurrogates: string, sep?: string) {
+  const r = [];
+  let c = 0;
+  let p = 0;
+  let i = 0;
+
+  while (i < unicodeSurrogates.length) {
+    // eslint-disable-next-line no-plusplus
+    c = unicodeSurrogates.charCodeAt(i++);
+    if (p) {
+      // eslint-disable-next-line no-bitwise
+      r.push((0x10000 + ((p - 0xd800) << 10) + (c - 0xdc00)).toString(16));
+      p = 0;
+    } else if (c >= 0xd800 && c <= 0xdbff) {
+      p = c;
+    } else {
+      r.push(c.toString(16));
+    }
+  }
+  return r.join(sep ?? '-');
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export function grabTheRightIcon(emoji: string) {
+  return toCodePoint(
+    emoji.indexOf(U200D) < 0 ? emoji.replace(UFE0Fg, '') : emoji,
+  );
+}