From 34e8d545121ec518aae2554c5f761da276bc986e Mon Sep 17 00:00:00 2001
From: Infi <wingit@geist.ga>
Date: Sat, 7 Aug 2021 00:34:01 +0200
Subject: [PATCH] Add system message icons. Closes #10

---
 .../common/messaging/MessageBase.tsx          |  4 +++
 .../common/messaging/SystemMessage.tsx        | 35 +++++++++++++++++++
 2 files changed, 39 insertions(+)

diff --git a/src/components/common/messaging/MessageBase.tsx b/src/components/common/messaging/MessageBase.tsx
index 492819d9..4aa7050d 100644
--- a/src/components/common/messaging/MessageBase.tsx
+++ b/src/components/common/messaging/MessageBase.tsx
@@ -124,6 +124,10 @@ export default styled.div<BaseMessageProps>`
         time {
             opacity: 1;
         }
+
+        .system-message-icon {
+            display: none;
+        }
     }
 `;
 
diff --git a/src/components/common/messaging/SystemMessage.tsx b/src/components/common/messaging/SystemMessage.tsx
index 24e18efb..6912fc84 100644
--- a/src/components/common/messaging/SystemMessage.tsx
+++ b/src/components/common/messaging/SystemMessage.tsx
@@ -1,3 +1,15 @@
+import {
+    InfoCircle,
+    UserPlus,
+    UserMinus,
+    ArrowToRight,
+    ArrowToLeft,
+    UserX,
+    ShieldX,
+    EditAlt,
+    Edit,
+    MessageSquareEdit,
+} from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Message } from "revolt.js/dist/maps/Messages";
 import { User } from "revolt.js/dist/maps/Users";
@@ -40,6 +52,19 @@ interface Props {
     hideInfo?: boolean;
 }
 
+const iconDictionary = {
+    user_added: UserPlus,
+    user_remove: UserMinus,
+    user_joined: ArrowToRight,
+    user_left: ArrowToLeft,
+    user_kicked: UserX,
+    user_banned: ShieldX,
+    channel_renamed: EditAlt,
+    channel_description_changed: Edit,
+    channel_icon_changed: MessageSquareEdit,
+    text: InfoCircle,
+};
+
 export const SystemMessage = observer(
     ({ attachContext, message, highlight, hideInfo }: Props) => {
         const client = useClient();
@@ -89,6 +114,15 @@ export const SystemMessage = observer(
             data = { type: "text", content };
         }
 
+        const SystemMessageIcon = iconDictionary[data.type] ?? InfoCircle;
+
+        const SystemIcon = styled(SystemMessageIcon)`
+            height: 1.33em;
+            width: 1.33em;
+            margin-right: 0.5em;
+            color: var(--tertiary-foreground);
+        `;
+
         let children;
         switch (data.type) {
             case "text":
@@ -161,6 +195,7 @@ export const SystemMessage = observer(
                 {!hideInfo && (
                     <MessageInfo>
                         <MessageDetail message={message} position="left" />
+                        <SystemIcon className="system-message-icon" />
                     </MessageInfo>
                 )}
                 <SystemContent>{children}</SystemContent>