feat: add discord emoji support for reactions

src/renderer/components/channel/Message.tsx

@@ -58,6 +58,7 @@ export default function Message({ message }: MessageProps) {
             return (
               <MessageReaction
                 key={`Reaction:${reaction.emoji.name}`}
+                messageId={message.id}
                 reaction={reaction}
               />
             );

src/renderer/components/channel/MessageReaction.tsx

@@ -1,22 +1,53 @@
 import { Reaction } from '@/discord/structures/Reaction';
+import { Snowflake } from '@/discord/structures/Snowflake';
 import { grabTheRightIcon } from '@/utils/emojiUtils';
+import { useEffect, useState } from 'react';
 
 type MessageReactionProps = {
+  messageId: Snowflake;
   reaction: Reaction;
 };
 
-export default function MessageReaction({ reaction }: MessageReactionProps) {
-  const twemojiHash =
-    reaction.emoji.id === null ? grabTheRightIcon(reaction.emoji.name) : null;
+export default function MessageReaction({
+  messageId,
+  reaction,
+}: MessageReactionProps) {
+  const [url, setUrl] = useState<string | undefined>(undefined);
+  const [color, setColor] = useState<string>('rgb(22,22,22)');
+  const [borderColor, setBorderColor] = useState<string>('rgb(22,22,22)');
 
-  const url = twemojiHash
-    ? `https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/${twemojiHash}.svg`
-    : undefined;
+  useEffect(() => {
+    const newId =
+      Number(reaction.emoji.id) + Number(messageId) / (256 * 256 * 256);
+    const str = newId.toString();
+
+    const r = Number(str.slice(0, 3)) % 255;
+    const g = Number(str.slice(4, 7)) % 255;
+    const b = Number(str.slice(8, 11)) % 255;
+
+    setColor(`rgb(${r},${g},${b})`);
+    setBorderColor(`rgb(${r * 0.7},${g * 0.7},${b * 0.7})`);
+
+    if (reaction.emoji.id === null) {
+      setUrl(
+        `https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/${grabTheRightIcon(reaction.emoji.name)}.svg`,
+      );
+      return;
+    }
+
+    setUrl(
+      `https://cdn.discordapp.com/emojis/${reaction.emoji.id}.${reaction.emoji.animated ? 'gif' : 'png'}`,
+    );
+  }, [messageId, reaction]);
 
   return (
-    <div className="MessageReaction">
-      <img className="MessageReaction-emoji" src={url} alt="" />
-      <p className="MessageReaction-count">{reaction.count}</p>
+    <div
+      className={`MessageReaction ${reaction.me && 'MessageReaction--clicked'}`}
+      style={{ background: color, borderColor }}
+      role="presentation"
+    >
+      <img className="MessageReaction--emoji" src={url} alt="" />
+      <p className="MessageReaction--count">{reaction.count}</p>
     </div>
   );
 }

src/renderer/styles/channel/Message.css

@@ -33,6 +33,10 @@
   flex-direction: column;
 }
 
+.Message--content {
+  white-space: pre-line;
+}
+
 .Message--attachments-container {
   display: flex;
 }

src/renderer/styles/channel/MessageReaction.css

@@ -4,12 +4,19 @@
   min-width: 40px;
   height: 20px;
   padding: 10px 12px;
-  background: #4d7cf227;
   border-radius: 10px;
-  border: 2px solid #4d7cf263;
+  border: 2px solid #111;
   cursor: pointer;
 }
 
+.MessageReaction--clicked {
+  border: 2px solid #2bff13 !important;
+}
+
 .MessageReaction:hover {
   transform: scale(1.02);
 }
+
+.MessageReaction--count {
+  filter: drop-shadow(0px 1px 2px rgb(0, 0, 0));
+}