Display all server roles separately.

src/components/navigation/right/MemberList.tsx

@@ -50,7 +50,9 @@ export default function MemberList({
                 const type = entries[index].type;
                 return (
                     <ListCategory first={index === 0}>
-                        {type === "online" ? (
+                        {type === "role" ? (
+                            <>{entries[index].name}</>
+                        ) : type === "online" ? (
                             <Text id="app.status.online" />
                         ) : (
                             <Text id="app.status.offline" />

src/components/navigation/right/MemberSidebar.tsx

@@ -39,12 +39,24 @@ function useEntries(channel: Channel, keys: string[], isServer?: boolean) {
             offline: [],
         };
 
+        const categoryInfo: { [key: string]: string } = {};
+
         keys.forEach((key) => {
-            let u;
+            let u, s;
             if (isServer) {
                 const { server, user } = JSON.parse(key);
                 if (server !== channel.server_id) return;
                 u = client.users.get(user);
+                s = client.servers.get(server);
+
+                if (s?.roles) {
+                    for (const id of Object.keys(s.roles)) {
+                        if (categories[id]) continue;
+                        // Check if hoisted.
+                        categories[id] = [];
+                        categoryInfo[id] = s.roles[id].name;
+                    }
+                }
             } else {
                 u = client.users.get(key);
             }
@@ -55,16 +67,28 @@ function useEntries(channel: Channel, keys: string[], isServer?: boolean) {
             const sort = member?.nickname ?? u.username;
             const entry = [u, sort] as [User, string];
 
-            if (isServer) {
-                // Sort users into hoisted roles here.
-            } else {
-                // Sort users into "participants" list here.
-                // For voice calls.
-            }
-
             if (!u.online || u.status?.presence === Presence.Invisible) {
                 categories.offline.push(entry);
             } else {
+                if (isServer) {
+                    // Sort users into hoisted roles here.
+                    if (member?.roles && s?.roles) {
+                        let success = false;
+                        for (const id of member.roles) {
+                            if (categories[id]) {
+                                categories[id].push(entry);
+                                success = true;
+                            }
+                            break;
+                        }
+
+                        if (success) return;
+                    }
+                } else {
+                    // Sort users into "participants" list here.
+                    // For voice calls.
+                }
+
                 categories.online.push(entry);
             }
         });
@@ -75,6 +99,16 @@ function useEntries(channel: Channel, keys: string[], isServer?: boolean) {
 
         const entries: MemberListGroup[] = [];
 
+        Object.keys(categoryInfo).forEach((key) => {
+            if (categories[key].length > 0) {
+                entries.push({
+                    type: "role",
+                    name: categoryInfo[key],
+                    users: categories[key].map((x) => x[0]),
+                });
+            }
+        });
+
         if (categories.online.length > 0) {
             entries.push({
                 type: "online",

src/context/revoltjs/FileUploads.tsx

@@ -79,6 +79,7 @@ export function grabFiles(
         const files = (e.currentTarget as HTMLInputElement)?.files;
         if (!files) return;
         for (const file of files) {
+            alert(file.size);
             if (file.size > maxFileSize) {
                 return tooLarge();
             }