fix: display server identity (if present) in typing indicator (#703)

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

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react-lite";
-import { Channel } from "revolt.js";
+import { Channel, Member } from "revolt.js";
 import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
@@ -60,6 +60,8 @@ const Base = styled.div`
 `;
 
 export default observer(({ channel }: Props) => {
+    const client = channel.client;
+
     const users = channel.typing.filter(
         (x) =>
             typeof x !== "undefined" &&
@@ -67,24 +69,47 @@ export default observer(({ channel }: Props) => {
             x.relationship !== "Blocked",
     );
 
-    if (users.length > 0) {
-        users.sort((a, b) =>
-            a!._id.toUpperCase().localeCompare(b!._id.toUpperCase()),
+    const members = users.map((user) => {
+        return client.members.getKey({
+            server: channel.server_id!,
+            user: user!._id,
+        });
+    });
+
+    const getName = (member: Member) => {
+        return member.nickname === null
+            ? member.user?.username
+            : member.nickname;
+    };
+
+    const getAvatar = (member: Member) => {
+        const memberAvatarURL = member.generateAvatarURL({
+            max_side: 256,
+        });
+
+        return memberAvatarURL === undefined
+            ? member.user?.generateAvatarURL({ max_side: 256 })
+            : memberAvatarURL;
+    };
+
+    if (members.length > 0) {
+        members.sort((a, b) =>
+            a!._id.user.toUpperCase().localeCompare(b!._id.user.toUpperCase()),
         );
 
         let text;
-        if (users.length >= 5) {
+        if (members.length >= 5) {
             text = <Text id="app.main.channel.typing.several" />;
-        } else if (users.length > 1) {
-            const userlist = [...users].map((x) => x!.username);
-            const user = userlist.pop();
+        } else if (members.length > 1) {
+            const memberlist = [...members].map((x) => getName(x!));
+            const member = memberlist.pop();
 
             text = (
                 <Text
                     id="app.main.channel.typing.multiple"
                     fields={{
-                        user,
-                        userlist: userlist.join(", "),
+                        user: member,
+                        userlist: memberlist.join(", "),
                     }}
                 />
             );
@@ -92,7 +117,7 @@ export default observer(({ channel }: Props) => {
             text = (
                 <Text
                     id="app.main.channel.typing.single"
-                    fields={{ user: users[0]!.username }}
+                    fields={{ user: getName(members[0]!) }}
                 />
             );
         }
@@ -101,11 +126,11 @@ export default observer(({ channel }: Props) => {
             <Base>
                 <div>
                     <div className="avatars">
-                        {users.map((user) => (
+                        {members.map((member) => (
                             <img
-                                key={user!._id}
+                                key={member!._id.user}
                                 loading="eager"
-                                src={user!.generateAvatarURL({ max_side: 256 })}
+                                src={getAvatar(member!)}
                             />
                         ))}
                     </div>