feat: add simple embed system

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/MessageEmbed.css';
 import '@/styles/channel/MessageReaction.css';
 
 import '@/styles/directmessage/DirectMessageButton.css';

src/renderer/components/channel/Message.tsx

@@ -3,6 +3,7 @@ import RendererUser from '@/discord/structures/user/RendererUser';
 import useGif from '@/hooks/useGif';
 import MessageAttachment from './MessageAttachment';
 import MessageReaction from './MessageReaction';
+import MessageEmbed from './MessageEmbed';
 
 type MessageProps = {
   message: MessageData;
@@ -48,8 +49,11 @@ export default function Message({ message }: MessageProps) {
         <div className="Message--embeds-container">
           {message.embeds.map((embed, index) => {
             return (
-              // eslint-disable-next-line react/no-array-index-key
-              <div key={`Embed:${message.id}:${index}`}>{embed.title}</div>
+              <MessageEmbed
+                // eslint-disable-next-line react/no-array-index-key
+                key={`Embed:${message.id}:${index}`}
+                embed={embed}
+              />
             );
           })}
         </div>

src/renderer/components/channel/MessageEmbed.tsx

@@ -0,0 +1,23 @@
+import { Embed } from '@/discord/structures/Embed';
+
+type MessageEmbedProps = {
+  embed: Embed;
+};
+
+export default function MessageEmbed({ embed }: MessageEmbedProps) {
+  return (
+    <div className="MessageEmbed">
+      {embed.title && <p className="MessageEmbed--title">{embed.title}</p>}
+      {embed.description && (
+        <p className="MessageEmbed--description">{embed.description}</p>
+      )}
+      {embed.thumbnail && (
+        <img
+          src={embed.thumbnail.url}
+          className="MessageEmbed--thumbnail-img"
+          alt={embed.thumbnail.url}
+        />
+      )}
+    </div>
+  );
+}

src/renderer/styles/channel/Message.css

@@ -33,6 +33,10 @@
   flex-direction: column;
 }
 
+.Message--content-span {
+  height: 16px;
+}
+
 .Message--content {
   white-space: pre-line;
 }

src/renderer/styles/channel/MessageEmbed.css

@@ -0,0 +1,30 @@
+.MessageEmbed {
+  display: flex;
+  flex-direction: column;
+  min-width: 60px;
+  max-width: 500px;
+  max-height: 1000px;
+  min-height: 20px;
+  background: var(--panel-background);
+  border-radius: 12px;
+  border-left: 3px solid green;
+  padding: 14px 14px;
+  overflow: hidden;
+  gap: 6px;
+}
+
+.MessageEmbed--title {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.MessageEmbed--description {
+  white-space: pre-line;
+  font-size: 16px;
+}
+
+.MessageEmbed--thumbnail-img {
+  width: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+}