Temporary member nickname / role colour solution.

src/components/common/AutoComplete.tsx

@@ -144,7 +144,7 @@ export function useAutoComplete(
                                 break;
                             case "TextChannel":
                                 const server = channel.server;
-                                users = client.servers.members
+                                users = client.members
                                     .toArray()
                                     .filter(
                                         (x) => x._id.substr(0, 26) === server,

src/components/common/user/UserShort.tsx

@@ -1,16 +1,51 @@
+import { useParams } from "react-router-dom";
 import { User } from "revolt.js";
 
 import { Text } from "preact-i18n";
 
+import {
+    useForceUpdate,
+    useMember,
+    useServer,
+} from "../../../context/revoltjs/hooks";
+
 import UserIcon from "./UserIcon";
 
 export function Username({
     user,
     ...otherProps
 }: { user?: User } & JSX.HTMLAttributes<HTMLElement>) {
+    let username = user?.username;
+    let color;
+
+    // ! this must be really bad for perf.
+    if (user) {
+        let { server } = useParams<{ server?: string }>();
+        if (server) {
+            let ctx = useForceUpdate();
+            let member = useMember(`${server}${user._id}`, ctx);
+            if (member) {
+                if (member.nickname) {
+                    username = member.nickname;
+                }
+
+                if (member.roles && member.roles.length > 0) {
+                    let s = useServer(server, ctx);
+                    for (let role of member.roles) {
+                        let c = s?.roles?.[role].colour;
+                        if (c) {
+                            color = c;
+                            continue;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
     return (
-        <span {...otherProps}>
-            {user?.username ?? <Text id="app.main.channel.unknown_user" />}
+        <span {...otherProps} style={{ color }}>
+            {username ?? <Text id="app.main.channel.unknown_user" />}
         </span>
     );
 }

src/components/navigation/items/ButtonItem.tsx

@@ -14,6 +14,7 @@ import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import ChannelIcon from "../../common/ChannelIcon";
 import Tooltip from "../../common/Tooltip";
 import UserIcon from "../../common/user/UserIcon";
+import { Username } from "../../common/user/UserShort";
 import UserStatus from "../../common/user/UserStatus";
 import IconButton from "../../ui/IconButton";
 
@@ -63,7 +64,9 @@ export function UserButton(props: UserProps) {
                 status
             />
             <div className={styles.name}>
-                <div>{user.username}</div>
+                <div>
+                    <Username user={user} />
+                </div>
                 {
                     <div className={styles.subText}>
                         {channel?.last_message && alert ? (

src/components/navigation/right/MemberSidebar.tsx

@@ -186,7 +186,7 @@ export function ServerMemberSidebar({
 
     useEffect(() => {
         if (status === ClientStatus.ONLINE && typeof members === "undefined") {
-            client.servers.members
+            client.members
                 .fetchMembers(channel.server)
                 .then((members) => setMembers(members));
         }