Virtualised sidebar test.

src/components/navigation/right/MemberList.tsx

@@ -0,0 +1,92 @@
+import AutoSizer from "react-virtualized-auto-sizer";
+import { FixedSizeList as List } from "react-window";
+import { User } from "revolt.js/dist/maps/Users";
+
+import { forwardRef } from "preact/compat";
+
+import { UserButton } from "../items/ButtonItem";
+
+export type MemberListEntry = string | User;
+interface ItemData {
+    entries: MemberListEntry[];
+}
+
+const PADDING_SIZE = 6;
+
+const Row = ({
+    data,
+    style,
+    index,
+}: {
+    data: ItemData;
+    index: number;
+    style: JSX.CSSProperties;
+}) => {
+    const item = data.entries[index];
+
+    return (
+        <div
+            style={{
+                ...style,
+                top: `${parseFloat(style.top as string) + PADDING_SIZE}px`,
+            }}>
+            {typeof item === "string" ? (
+                `cat ${item}`
+            ) : (
+                <UserButton
+                    key={item._id}
+                    user={item}
+                    margin
+                    /* context={channel}
+                    onClick={() =>
+                        openScreen({
+                            id: "profile",
+                            user_id: user._id,
+                        })
+                    } */
+                />
+            )}
+        </div>
+    );
+};
+
+// @ts-expect-error Copied directly from example code.
+const innerElementType = forwardRef(({ style, ...rest }, ref) => (
+    <div
+        // @ts-expect-error Copied directly from example code.
+        ref={ref}
+        style={{
+            ...style,
+            height: `${parseFloat(style.height) + PADDING_SIZE * 2}px`,
+        }}
+        {...rest}
+    />
+));
+
+export default function MemberList({
+    entries,
+}: {
+    entries: MemberListEntry[];
+}) {
+    return (
+        <AutoSizer>
+            {({ width, height }) => (
+                <List
+                    className="virtualList"
+                    width={width}
+                    height={height}
+                    itemData={{
+                        entries,
+                    }}
+                    itemCount={entries.length}
+                    innerElementType={innerElementType}
+                    itemSize={42}>
+                    {
+                        // eslint-disable-next-line
+                        Row as any
+                    }
+                </List>
+            )}
+        </AutoSizer>
+    );
+}

src/components/navigation/right/MemberSidebar.tsx

@@ -4,9 +4,10 @@ import { Link, useParams } from "react-router-dom";
 import { Presence } from "revolt-api/types/Users";
 import { Channel } from "revolt.js/dist/maps/Channels";
 import { Message } from "revolt.js/dist/maps/Messages";
+import { User } from "revolt.js/dist/maps/Users";
 
 import { Text } from "preact-i18n";
-import { useContext, useEffect, useState } from "preact/hooks";
+import { useContext, useEffect, useMemo, useState } from "preact/hooks";
 
 import { getState } from "../../../redux";
 
@@ -27,6 +28,7 @@ import placeholderSVG from "../items/placeholder.svg";
 import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
 import { UserButton } from "../items/ButtonItem";
 import { ChannelDebugInfo } from "./ChannelDebugInfo";
+import MemberList, { MemberListEntry } from "./MemberList";
 
 export default function MemberSidebar({ channel: obj }: { channel?: Channel }) {
     const { channel: channel_id } = useParams<{ channel: string }>();
@@ -90,7 +92,6 @@ export const GroupMemberSidebar = observer(
         return (
             <GenericSidebarBase>
                 <GenericSidebarList>
-                    <ChannelDebugInfo channel={channel} />
                     <Search channel={channel} />
 
                     {/*voiceActive && voiceParticipants.length !== 0 && (
@@ -161,6 +162,64 @@ export const GroupMemberSidebar = observer(
 
 export const ServerMemberSidebar = observer(
     ({ channel }: { channel: Channel }) => {
+        const client = useClient();
+        const status = useContext(StatusContext);
+
+        useEffect(() => {
+            if (status === ClientStatus.ONLINE) {
+                channel.server!.fetchMembers();
+            }
+        }, [status, channel.server]);
+
+        const keys = [...client.members.keys()];
+        const entries = useMemo(() => {
+            const categories: { [key: string]: [User, string][] } = {
+                online: [],
+                offline: [],
+            };
+
+            keys.forEach((key) => {
+                const { server, user } = JSON.parse(key);
+                if (server !== channel.server_id) return;
+
+                const u = client.users.get(user);
+                if (!u) return;
+
+                const member = client.members.get(key);
+                const sort = member?.nickname ?? u.username;
+                const entry = [u, sort] as [User, string];
+
+                if (!u.online || u.status?.presence === Presence.Invisible) {
+                    categories.offline.push(entry);
+                } else {
+                    categories.online.push(entry);
+                }
+            });
+
+            Object.keys(categories).forEach((key) =>
+                categories[key].sort((a, b) => a[1].localeCompare(b[1])),
+            );
+
+            const entries = [];
+
+            entries.push(
+                "online",
+                ...categories.online.map((x) => x[0]),
+                "offline",
+                ...categories.offline.map((x) => x[0]),
+            );
+
+            return entries;
+            // eslint-disable-next-line
+        }, [keys]);
+
+        return (
+            <GenericSidebarBase>
+                <MemberList entries={entries} />
+            </GenericSidebarBase>
+        );
+
+        /*
         const client = useClient();
         const { openScreen } = useIntermediate();
         const status = useContext(StatusContext);
@@ -202,7 +261,6 @@ export const ServerMemberSidebar = observer(
         return (
             <GenericSidebarBase>
                 <GenericSidebarList>
-                    <ChannelDebugInfo channel={channel} />
                     <Search channel={channel} />
                     <div>{users.length === 0 && <Preloader type="ring" />}</div>
                     {users.length > 0 && (
@@ -236,7 +294,7 @@ export const ServerMemberSidebar = observer(
                     )}
                 </GenericSidebarList>
             </GenericSidebarBase>
-        );
+        );*/
     },
 );