Bring back mentions

chat/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "main": "./src/index.tsx",
   "license": "MIT",
   "dependencies": {

chat/src/App.css

@@ -9,6 +9,7 @@ html {
 }
 
 body {
+  min-height: 100vh;
   min-height: calc(var(--vh, 1vh) * 100);
   overflow: hidden;
   /* mobile viewport bug fix */

chat/src/features/chat/ChatMessage.tsx

@@ -44,11 +44,21 @@ export function ChatMessage({
     time,
     quotes,
   } = message;
-  const { admin, censored } = useRootContext();
+  const {
+    id: userId,
+    username: userUsername,
+    admin,
+    censored,
+    themeColor,
+  } = useRootContext();
   const { messageLookup, deleteMessage, quoteMessage } = useChat();
+  const [confirmedDelete, setConfirmedDelete] = useState(false);
   const quotedMessage = messageLookup[quotes];
   const content = censored ? text_censored : text_html;
-  const [confirmedDelete, setConfirmedDelete] = useState(false);
+  const isMention =
+    text_html.includes(`/id/${userId}`) &&
+    userUsername &&
+    username !== userUsername;
   const timestamp = useMemo(
     () => formatTimeAgo(time),
     [time, timestampUpdates]
@@ -75,8 +85,17 @@ export function ChatMessage({
     <div
       className={cx("ChatMessage", {
         ChatMessage__showingUser: showUser,
+        ChatMessage__isMention: isMention,
       })}
       id={id}
+      style={
+        isMention
+          ? {
+              background: `#${themeColor}25`,
+              borderLeft: `1px solid #${themeColor}`,
+            }
+          : {}
+      }
     >
       {!actionsOpen && (
         <div className="ChatMessage-actions-button">