Implement new auto-size text area.

Add bars + header + sidebar to channels.

src/components/navigation/RightSidebar.tsx

@@ -1,19 +1,18 @@
 import { Route, Switch } from "react-router";
 import SidebarBase from "./SidebarBase";
 
-// import { MemberSidebar } from "./right/MemberSidebar";
+import MemberSidebar from "./right/MemberSidebar";
 
 export default function RightSidebar() {
     return (
         <SidebarBase>
             <Switch>
-                {/* 
                 <Route path="/server/:server/channel/:channel">
                     <MemberSidebar />
                 </Route>
                 <Route path="/channel/:channel">
                     <MemberSidebar />
-                </Route> */ }
+                </Route>
             </Switch>
         </SidebarBase>
     );

src/components/navigation/SidebarBase.tsx

@@ -12,3 +12,22 @@ export default styled.div`
         padding-bottom: 50px;
     ` }
 `;
+
+export const GenericSidebarBase = styled.div`
+    height: 100%;
+    width: 240px;
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    background: var(--secondary-background);
+`;
+
+export const GenericSidebarList = styled.div`
+    padding: 6px;
+    flex-grow: 1;
+    overflow-y: scroll;
+
+    > svg {
+        width: 100%;
+    }
+`;

src/components/navigation/left/HomeSidebar.tsx

@@ -2,7 +2,6 @@ import { Localizer, Text } from "preact-i18n";
 import { useContext } from "preact/hooks";
 import { Home, Users, Tool, Save } from "@styled-icons/feather";
 
-import styled from "styled-components";
 import Category from '../../ui/Category';
 import PaintCounter from "../../../lib/PaintCounter";
 import UserHeader from "../../common/user/UserHeader";
@@ -16,6 +15,7 @@ import { Users as UsersNS } from 'revolt.js/dist/api/objects';
 import ButtonItem, { ChannelButton } from '../items/ButtonItem';
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
 import { Link, Redirect, useLocation, useParams } from "react-router-dom";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { useDMs, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
@@ -24,25 +24,6 @@ type Props = WithDispatcher & {
     unreads: Unreads;
 }
 
-const HomeBase = styled.div`
-    height: 100%;
-    width: 240px;
-    display: flex;
-    flex-shrink: 0;
-    flex-direction: column;
-    background: var(--secondary-background);
-`;
-
-const HomeList = styled.div`
-    padding: 6px;
-    flex-grow: 1;
-    overflow-y: scroll;
-
-    > svg {
-        width: 100%;
-    }
-`;
-
 function HomeSidebar(props: Props) {
     const { pathname } = useLocation();
     const client = useContext(AppContext);
@@ -68,10 +49,10 @@ function HomeSidebar(props: Props) {
     channelsArr.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
 
     return (
-        <HomeBase>
+        <GenericSidebarBase>
             <UserHeader user={client.user!} />
             <ConnectionStatus />
-            <HomeList>
+            <GenericSidebarList>
                 {!isTouchscreenDevice && (
                     <>
                         <Link to="/">
@@ -146,8 +127,8 @@ function HomeSidebar(props: Props) {
                     );
                 })}
                 <PaintCounter />
-            </HomeList>
-        </HomeBase>
+            </GenericSidebarList>
+        </GenericSidebarBase>
     );
 };
 

src/components/navigation/right/ChannelDebugInfo.tsx

@@ -0,0 +1,37 @@
+import { useRenderState } from "../../../lib/renderer/Singleton";
+
+interface Props {
+    id: string;
+}
+
+export function ChannelDebugInfo({ id }: Props) {
+    if (process.env.NODE_ENV !== "development") return null;
+    let view = useRenderState(id);
+    if (!view) return null;
+
+    return (
+        <span style={{ display: "block", padding: "12px 10px 0 10px" }}>
+            <span
+                style={{
+                    display: "block",
+                    fontSize: "12px",
+                    textTransform: "uppercase",
+                    fontWeight: "600"
+                }}
+            >
+                Channel Info
+            </span>
+            <p style={{ fontSize: "10px", userSelect: "text" }}>
+                State: <b>{ view.type }</b> <br />
+                { view.type === 'RENDER' && view.messages.length > 0 &&
+                    <>
+                        Start: <b>{view.messages[0]._id}</b> <br />
+                        End: <b>{view.messages[view.messages.length - 1]._id}</b> <br />
+                        At Top: <b>{view.atTop ? "Yes" : "No"}</b> <br />
+                        At Bottom: <b>{view.atBottom ? "Yes" : "No"}</b>
+                    </>
+                }
+            </p>
+        </span>
+    );
+}

src/components/navigation/right/MemberSidebar.tsx

@@ -0,0 +1,206 @@
+import { Text } from "preact-i18n";
+import { useContext, useEffect, useState } from "preact/hooks";
+
+import { User } from "revolt.js";
+import Category from "../../ui/Category";
+import { useParams } from "react-router";
+import { UserButton } from "../items/ButtonItem";
+import { ChannelDebugInfo } from "./ChannelDebugInfo";
+import { Channels, Servers, Users } from "revolt.js/dist/api/objects";
+import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
+import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
+import { HookContext, useChannel, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
+
+import placeholderSVG from "../items/placeholder.svg";
+import { AppContext, ClientStatus, StatusContext } from "../../../context/revoltjs/RevoltClient";
+
+interface Props {
+    ctx: HookContext
+}
+
+export default function MemberSidebar(props: { channel?: Channels.Channel }) {
+    const ctx = useForceUpdate();
+    const { channel: cid } = useParams<{ channel: string }>();
+    const channel = props.channel ?? useChannel(cid, ctx);
+
+    switch (channel?.channel_type) {
+        case 'Group': return <GroupMemberSidebar channel={channel} ctx={ctx} />;
+        case 'TextChannel': return <ServerMemberSidebar channel={channel} ctx={ctx} />;
+        default: return null;
+    }
+}
+
+export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels.GroupChannel }) {
+    const users = useUsers(undefined, ctx);
+    let members = channel.recipients
+        .map(x => users.find(y => y?._id === x))
+        .filter(x => typeof x !== "undefined") as User[];
+
+    /*const voice = useContext(VoiceContext);
+    const voiceActive = voice.roomId === channel._id;
+
+    let voiceParticipants: User[] = [];
+    if (voiceActive) {
+        const idArray = Array.from(voice.participants.keys());
+        voiceParticipants = idArray
+            .map(x => users.find(y => y?._id === x))
+            .filter(x => typeof x !== "undefined") as User[];
+
+        members = members.filter(member => idArray.indexOf(member._id) === -1);
+
+        voiceParticipants.sort((a, b) => a.username.localeCompare(b.username));
+    }*/
+
+    members.sort((a, b) => {
+        // ! FIXME: should probably rewrite all this code
+        let l = ((a.online &&
+            a.status?.presence !== Users.Presence.Invisible) ??
+            false) as any | 0;
+        let r = ((b.online &&
+            b.status?.presence !== Users.Presence.Invisible) ??
+            false) as any | 0;
+
+        let n = r - l;
+        if (n !== 0) {
+            return n;
+        }
+
+        return a.username.localeCompare(b.username);
+    });
+
+    return (
+        <GenericSidebarBase>
+            <GenericSidebarList>
+                <ChannelDebugInfo id={channel._id} />
+                {/*voiceActive && voiceParticipants.length !== 0 && (
+                    <Fragment>
+                        <Category
+                            type="members"
+                            text={
+                                <span>
+                                    <Text id="app.main.categories.participants" />{" "}
+                                    — {voiceParticipants.length}
+                                </span>
+                            }
+                        />
+                        {voiceParticipants.map(
+                            user =>
+                                user && (
+                                    <LinkProfile user_id={user._id}>
+                                        <UserButton
+                                            key={user._id}
+                                            user={user}
+                                            context={channel}
+                                        />
+                                    </LinkProfile>
+                                )
+                        )}
+                    </Fragment>
+                )*/}
+                {!(members.length === 0 /*&& voiceActive*/) && (
+                    <Category
+                        variant="uniform"
+                        text={
+                            <span>
+                                <Text id="app.main.categories.members" /> —{" "}
+                                {channel.recipients.length}
+                            </span>
+                        }
+                    />
+                )}
+                {members.length === 0 && /*!voiceActive &&*/ <img src={placeholderSVG} />}
+                {members.map(
+                    user =>
+                        user && (
+                            // <LinkProfile user_id={user._id}>
+                                <UserButton
+                                    key={user._id}
+                                    user={user}
+                                    context={channel}
+                                />
+                            // </LinkProfile>
+                        )
+                )}
+            </GenericSidebarList>
+        </GenericSidebarBase>
+    );
+}
+
+export function ServerMemberSidebar({ channel, ctx }: Props & { channel: Channels.TextChannel }) {
+    const [members, setMembers] = useState<Servers.Member[] | undefined>(undefined);
+    const users = useUsers(members?.map(x => x._id.user) ?? []).filter(x => typeof x !== 'undefined', ctx) as Users.User[];
+    const status = useContext(StatusContext);
+    const client = useContext(AppContext);
+
+    useEffect(() => {
+        if (status === ClientStatus.ONLINE && typeof members === 'undefined') {
+            client.servers.members.fetchMembers(channel.server)
+                .then(members => setMembers(members))
+        }
+    }, [ status ]);
+
+    // ! FIXME: temporary code
+    useEffect(() => {
+        function onPacket(packet: ClientboundNotification) {
+            if (!members) return;
+            if (packet.type === 'ServerMemberJoin') {
+                if (packet.id !== channel.server) return;
+                setMembers([ ...members, { _id: { server: packet.id, user: packet.user } } ]);
+            } else if (packet.type === 'ServerMemberLeave') {
+                if (packet.id !== channel.server) return;
+                setMembers(members.filter(x => !(x._id.user === packet.user && x._id.server === packet.id)));
+            }
+        }
+
+        client.addListener('packet', onPacket);
+        return () => client.removeListener('packet', onPacket);
+    }, [ members ]);
+
+    // copy paste from above
+    users.sort((a, b) => {
+        // ! FIXME: should probably rewrite all this code
+        let l = ((a.online &&
+            a.status?.presence !== Users.Presence.Invisible) ??
+            false) as any | 0;
+        let r = ((b.online &&
+            b.status?.presence !== Users.Presence.Invisible) ??
+            false) as any | 0;
+
+        let n = r - l;
+        if (n !== 0) {
+            return n;
+        }
+
+        return a.username.localeCompare(b.username);
+    });
+
+    return (
+        <GenericSidebarBase>
+            <GenericSidebarList>
+                <ChannelDebugInfo id={channel._id} />
+                <Category
+                    variant="uniform"
+                    text={
+                        <span>
+                            <Text id="app.main.categories.members" /> —{" "}
+                            {users.length}
+                        </span>
+                    }
+                />
+                {users.length === 0 && <img src={placeholderSVG} />}
+                {users.map(
+                    user =>
+                        user && (
+                            // <LinkProfile user_id={user._id}>
+                                <UserButton
+                                    key={user._id}
+                                    user={user}
+                                    context={channel}
+                                />
+                            // </LinkProfile>
+                        )
+                )}
+            </GenericSidebarList>
+        </GenericSidebarBase>
+    );
+}