conversation list

src/components/common/messaging/bars/MessageOverlayBar.tsx

@@ -88,8 +88,12 @@ const Divider = styled.div`
 
 export const MessageOverlayBar = observer(
     ({ reactionsOpen, setReactionsOpen, message, queued }: Props) => {
+        if (!message) {
+            return null;
+        }
+
         const client = message.client;
-        const isAuthor = message.author_id === client.user!._id;
+        const isAuthor = message.author_id === client.user?._id;
 
         const [copied, setCopied] = useState<"link" | "id">(null!);
         const [extraActions, setExtra] = useState(shiftKeyPressed);

src/components/navigation/items/ButtonItem.tsx

@@ -19,6 +19,7 @@ import Tooltip from "../../common/Tooltip";
 import UserIcon from "../../common/user/UserIcon";
 import { Username } from "../../common/user/UserShort";
 import UserStatus from "../../common/user/UserStatus";
+import { useClient } from "../../../controllers/client/ClientController";
 
 type CommonProps = Omit<
     JSX.HTMLAttributes<HTMLDivElement>,
@@ -37,6 +38,15 @@ type UserProps = CommonProps & {
     channel?: Channel;
 };
 
+// Helper function to convert mentions to usernames
+function convertMentionsToUsernames(content: string, client: any): string {
+    const mentionRegex = /<@([A-z0-9]{26})>/g;
+    return content.replace(mentionRegex, (match, userId) => {
+        const user = client.users.get(userId);
+        return user ? `@${user.username}` : match;
+    });
+}
+
 // TODO: Gray out blocked names.
 export const UserButton = observer((props: UserProps) => {
     const {
@@ -50,6 +60,8 @@ export const UserButton = observer((props: UserProps) => {
         ...divProps
     } = props;
 
+    const client = useClient();
+
     return (
         <div
             {...divProps}
@@ -82,7 +94,7 @@ export const UserButton = observer((props: UserProps) => {
                     <div className={styles.subText}>
                         {typeof channel?.last_message?.content === "string" &&
                             alert ? (
-                            channel.last_message.content.slice(0, 32)
+                            convertMentionsToUsernames(channel.last_message.content, client).slice(0, 32)
                         ) : (
                             <UserStatus user={user} tooltip />
                         )}
@@ -140,6 +152,8 @@ export const ChannelButton = observer((props: ChannelProps) => {
         ...divProps
     } = props;
 
+    const client = useClient();
+
     if (channel.channel_type === "SavedMessages") throw "Invalid channel type.";
     if (channel.channel_type === "DirectMessage") {
         if (typeof user === "undefined") throw "No user provided.";
@@ -172,7 +186,7 @@ export const ChannelButton = observer((props: ChannelProps) => {
                         {typeof channel.last_message?.content === "string" &&
                             alert &&
                             !muted ? (
-                            channel.last_message.content.slice(0, 32)
+                            convertMentionsToUsernames(channel.last_message.content, client).slice(0, 32)
                         ) : (
                             <Text
                                 id="quantities.members"