Virtualised sidebar test.

2024-11-21 22:50:59 -05:00 · 2021-08-08 16:17:16 +01:00 · 2021-08-08 16:17:16 +01:00 · 8e24d1490c
commit 8e24d1490c
parent 17f68088d1
11 changed files with 241 additions and 36 deletions
--- a/external/lang
+++ b/external/lang
@ -1 +1 @@
-Subproject commit 30558b7989de3b6b39c360d85db4fc58e146ad5e
+Subproject commit 46a2dcdd88c42d4e6e504ca5c60a4beebc8d0280
--- a/package.json
+++ b/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",
--- a/src/components/common/messaging/MessageBase.tsx
+++ b/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`
--- a/src/components/common/messaging/SystemMessage.tsx
+++ b/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>
--- a/src/components/navigation/SidebarBase.tsx
+++ b/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;
--- a/src/components/navigation/items/ButtonItem.tsx
+++ b/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 } =
-        props;
+    const {
+        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" ||
--- a/src/components/navigation/items/Item.module.scss
+++ b/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 @@
            }
        }
    }
-  }
+}
--- a/src/components/navigation/left/HomeSidebar.tsx
+++ b/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="/">
--- a/src/components/navigation/right/MemberList.tsx
+++ b/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>
+    );
+}
--- a/src/components/navigation/right/MemberSidebar.tsx
+++ b/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>
-        );
+        );*/
    },
 );

--- a/yarn.lock
+++ b/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"