Virtualised sidebar test.

external/lang

@@ -1 +1 @@
-Subproject commit 30558b7989de3b6b39c360d85db4fc58e146ad5e
+Subproject commit 46a2dcdd88c42d4e6e504ca5c60a4beebc8d0280

package.json

@@ -78,6 +78,8 @@
         "@types/react-helmet": "^6.1.1",
         "@types/react-router-dom": "^5.1.7",
         "@types/react-scroll": "^1.8.2",
+        "@types/react-virtualized-auto-sizer": "^1.0.1",
+        "@types/react-window": "^1.8.5",
         "@types/styled-components": "^5.1.10",
         "@types/twemoji": "^12.1.1",
         "@typescript-eslint/eslint-plugin": "^4.27.0",
@@ -111,6 +113,8 @@
         "react-redux": "^7.2.4",
         "react-router-dom": "^5.2.0",
         "react-scroll": "^1.8.2",
+        "react-virtualized-auto-sizer": "^1.0.5",
+        "react-window": "^1.8.6",
         "redux": "^4.1.0",
         "revolt-api": "0.5.1-alpha.10-patch.0",
         "revolt.js": "5.0.0-alpha.20",

src/components/common/messaging/MessageBase.tsx

@@ -182,6 +182,13 @@ export const MessageInfo = styled.div`
     .header {
         cursor: pointer;
     }
+
+    .systemIcon {
+        height: 1.33em;
+        width: 1.33em;
+        margin-right: 0.5em;
+        color: var(--tertiary-foreground);
+    }
 `;
 
 export const MessageContent = styled.div`

src/components/common/messaging/SystemMessage.tsx

@@ -57,13 +57,6 @@ export const SystemMessage = observer(
         const SystemMessageIcon =
             iconDictionary[data.type as SystemMessageI["type"]] ?? InfoCircle;
 
-        const SystemIcon = styled(SystemMessageIcon)`
-            height: 1.33em;
-            width: 1.33em;
-            margin-right: 0.5em;
-            color: var(--tertiary-foreground);
-        `;
-
         let children;
         switch (data.type) {
             case "text":
@@ -136,7 +129,7 @@ export const SystemMessage = observer(
                 {!hideInfo && (
                     <MessageInfo>
                         <MessageDetail message={message} position="left" />
-                        <SystemIcon className="system-message-icon" />
+                        <SystemMessageIcon className="systemIcon" />
                     </MessageInfo>
                 )}
                 <SystemContent>{children}</SystemContent>

src/components/navigation/SidebarBase.tsx

@@ -10,17 +10,19 @@ export default styled.div`
     align-items: stretch;
 `;
 
-export const GenericSidebarBase = styled.div<{ padding?: boolean }>`
+export const GenericSidebarBase = styled.div<{
+    mobilePadding?: boolean;
+}>`
     height: 100%;
     width: 240px;
     display: flex;
     flex-shrink: 0;
     flex-direction: column;
-    background: var(--secondary-background);
     border-end-start-radius: 8px;
+    background: var(--secondary-background);
 
     ${(props) =>
-        props.padding &&
+        props.mobilePadding &&
         isTouchscreenDevice &&
         css`
             padding-bottom: 50px;

src/components/navigation/items/ButtonItem.tsx

@@ -30,6 +30,7 @@ type CommonProps = Omit<
     active?: boolean;
     alert?: "unread" | "mention";
     alertCount?: number;
+    margin?: boolean;
 };
 
 type UserProps = CommonProps & {
@@ -39,8 +40,16 @@ type UserProps = CommonProps & {
 };
 
 export const UserButton = observer((props: UserProps) => {
-    const { active, alert, alertCount, user, context, channel, ...divProps } =
+    const {
-        props;
+        active,
+        alert,
+        margin,
+        alertCount,
+        user,
+        context,
+        channel,
+        ...divProps
+    } = props;
     const { openScreen } = useIntermediate();
 
     return (
@@ -48,6 +57,7 @@ export const UserButton = observer((props: UserProps) => {
             {...divProps}
             className={classNames(styles.item, styles.user)}
             data-active={active}
+            data-margin={margin}
             data-alert={typeof alert === "string"}
             data-online={
                 typeof channel !== "undefined" ||

src/components/navigation/items/Item.module.scss

@@ -9,10 +9,10 @@
     gap: 8px;
     align-items: center;
     flex-direction: row;
-    
+
     cursor: pointer;
     font-size: 16px;
-    transition: .1s ease-in-out background-color;
+    transition: 0.1s ease-in-out background-color;
 
     color: var(--tertiary-foreground);
 
@@ -20,14 +20,15 @@
         height: 42px;
     }
 
-    &.compact { /* TOFIX: Introduce two separate compact items, one for settings, other for channels. */
+    &.compact {
+        /* TOFIX: Introduce two separate compact items, one for settings, other for channels. */
         height: 32px;
     }
 
     &.user {
         opacity: 0.4;
         cursor: pointer;
-        transition: .1s ease-in-out opacity;
+        transition: 0.1s ease-in-out opacity;
 
         &[data-online="true"],
         &:hover {
@@ -43,7 +44,7 @@
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
-        transition: color .1s ease-in-out;
+        transition: color 0.1s ease-in-out;
 
         &.content {
             gap: 10px;
@@ -73,13 +74,13 @@
             flex-grow: 1;
             display: flex;
             font-weight: 600;
-            font-size: .90625rem;
+            font-size: 0.90625rem;
             flex-direction: column;
 
             .subText {
                 margin-top: -1px;
                 font-weight: 500;
-                font-size: .6875rem;
+                font-size: 0.6875rem;
                 color: var(--tertiary-foreground);
             }
         }
@@ -90,7 +91,7 @@
             svg {
                 opacity: 0;
                 display: none;
-                transition: .1s ease-in-out opacity;
+                transition: 0.1s ease-in-out opacity;
             }
         }
     }
@@ -115,13 +116,19 @@
         }
     }
 
-    &[data-alert="true"], &[data-active="true"], &:hover {
+    &[data-alert="true"],
+    &[data-active="true"],
+    &:hover {
         color: var(--foreground);
 
         .subText {
             color: var(--secondary-foreground) !important;
         }
     }
+
+    &[data-margin="true"] {
+        margin: 0 6px;
+    }
 }
 
 .alert {
@@ -162,4 +169,4 @@
             }
         }
     }
-  }
+}

src/components/navigation/left/HomeSidebar.tsx

@@ -65,7 +65,7 @@ const HomeSidebar = observer((props: Props) => {
     channels.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
 
     return (
-        <GenericSidebarBase padding>
+        <GenericSidebarBase mobilePadding>
             <ConnectionStatus />
             <GenericSidebarList>
                 <ConditionalLink active={pathname === "/"} to="/">

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>
-        );
+        );*/
     },
 );
 

yarn.lock

@@ -872,6 +872,13 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.14.8":
+  version "7.14.8"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.8.tgz#7119a56f421018852694290b9f9148097391b446"
+  integrity sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.5", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.14.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
@@ -879,13 +886,6 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.14.8":
-  version "7.14.8"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.8.tgz#7119a56f421018852694290b9f9148097391b446"
-  integrity sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
 "@babel/template@^7.12.13", "@babel/template@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.14.5.tgz#a9bc9d8b33354ff6e55a9c60d1109200a68974f4"
@@ -1466,6 +1466,20 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-virtualized-auto-sizer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.1.tgz#b3187dae1dfc4c15880c9cfc5b45f2719ea6ebd4"
+  integrity sha512-GH8sAnBEM5GV9LTeiz56r4ZhMOUSrP43tAQNSRVxNexDjcNKLCEtnxusAItg1owFUFE6k0NslV26gqVClVvong==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-window@^1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.5.tgz#285fcc5cea703eef78d90f499e1457e9b5c02fc1"
+  integrity sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*":
   version "17.0.13"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.13.tgz#6b7c9a8f2868586ad87d941c02337c6888fb874f"
@@ -3033,6 +3047,11 @@ mdurl@^1.0.1:
     sdp-transform "^2.14.1"
     supports-color "^8.1.1"
 
+"memoize-one@>=3.1.1 <6":
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -3451,6 +3470,19 @@ react-side-effect@^2.1.0:
   resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
   integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
 
+react-virtualized-auto-sizer@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.5.tgz#9eeeb8302022de56fbd7a860b08513120ce36509"
+  integrity sha512-kivjYVWX15TX2IUrm8F1jaCEX8EXrpy3DD+u41WGqJ1ZqbljWpiwscV+VxOM1l7sSIM1jwi2LADjhhAJkJ9dxA==
+
+react-window@^1.8.6:
+  version "1.8.6"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.6.tgz#d011950ac643a994118632665aad0c6382e2a112"
+  integrity sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    memoize-one ">=3.1.1 <6"
+
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"