src/components/common/messaging/embed/Embed.module.scss

@@ -3,7 +3,7 @@
 
     iframe {
         border: none;
-        border-radius: 4px;
+        border-radius: var(--border-radius);
     }
 
     &.image {
@@ -27,8 +27,8 @@
 
         padding: 12px;
         width: fit-content;
-        border-radius: 4px;
         background: var(--primary-header);
+        border-radius: var(--border-radius);
 
         .siteinfo {
             display: flex;
@@ -80,8 +80,8 @@
             overflow: hidden;
             display: -webkit-box;
             white-space: pre-wrap;
-            // -webkit-line-clamp: 6;
-            // -webkit-box-orient: vertical;
+            -webkit-line-clamp: 6;
+            -webkit-box-orient: vertical;
         }
 
         .footer {
@@ -91,7 +91,7 @@
         img.image {
             cursor: pointer;
             object-fit: contain;
-            border-radius: 3px;
+            border-radius: var(--border-radius);
         }
     }
 }
@@ -105,7 +105,7 @@
         / minmax(20px, 1fr) min-content;
 
     align-items: center;
-    column-gap: 8px;
+    column-gap: 12px;
     
     width: 100%;
     padding: 8px;

src/components/common/messaging/embed/Embed.tsx

-import { Embed as EmbedRJS } from "revolt.js/dist/api/objects";
+import { Embed as EmbedI } from "revolt-api/types/January";
 
 import styles from "./Embed.module.scss";
 import classNames from "classnames";
 import { useContext } from "preact/hooks";
 
 import { useIntermediate } from "../../../../context/intermediate/Intermediate";
+import { useClient } from "../../../../context/revoltjs/RevoltClient";
 
 import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
 import EmbedMedia from "./EmbedMedia";
 
 interface Props {
-    embed: EmbedRJS;
+    embed: EmbedI;
 }
 
 const MAX_EMBED_WIDTH = 480;
@@ -19,11 +20,7 @@ const CONTAINER_PADDING = 24;
 const MAX_PREVIEW_SIZE = 150;
 
 export default function Embed({ embed }: Props) {
-    // ! FIXME: temp code
-    // ! add proxy function to client
-    function proxyImage(url: string) {
-        return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url);
-    }
+    const client = useClient();
 
     const { openScreen } = useIntermediate();
     const maxWidth = Math.min(
@@ -35,14 +32,14 @@ export default function Embed({ embed }: Props) {
         w: number,
         h: number,
     ): { width: number; height: number } {
-        let limitingWidth = Math.min(maxWidth, w);
+        const limitingWidth = Math.min(maxWidth, w);
 
-        let limitingHeight = Math.min(MAX_EMBED_HEIGHT, h);
+        const limitingHeight = Math.min(MAX_EMBED_HEIGHT, h);
 
         // Calculate smallest possible WxH.
-        let width = Math.min(limitingWidth, limitingHeight * (w / h));
+        const width = Math.min(limitingWidth, limitingHeight * (w / h));
 
-        let height = Math.min(limitingHeight, limitingWidth * (h / w));
+        const height = Math.min(limitingHeight, limitingWidth * (h / w));
 
         return { width, height };
     }
@@ -51,7 +48,7 @@ export default function Embed({ embed }: Props) {
         case "Website": {
             // Determine special embed size.
             let mw, mh;
-            let largeMedia =
+            const largeMedia =
                 (embed.special && embed.special.type !== "None") ||
                 embed.image?.size === "Large";
             switch (embed.special?.type) {
@@ -80,7 +77,7 @@ export default function Embed({ embed }: Props) {
                 }
             }
 
-            let { width, height } = calculateSize(mw, mh);
+            const { width, height } = calculateSize(mw, mh);
             return (
                 <div
                     className={classNames(styles.embed, styles.website)}
@@ -94,8 +91,9 @@ export default function Embed({ embed }: Props) {
                             <div className={styles.siteinfo}>
                                 {embed.icon_url && (
                                     <img
+                                        loading="lazy"
                                         className={styles.favicon}
-                                        src={proxyImage(embed.icon_url)}
+                                        src={client.proxyFile(embed.icon_url)}
                                         draggable={false}
                                         onError={(e) =>
                                             (e.currentTarget.style.display =
@@ -115,7 +113,8 @@ export default function Embed({ embed }: Props) {
                                 <a
                                     href={embed.url}
                                     target={"_blank"}
-                                    className={styles.title}>
+                                    className={styles.title}
+                                    rel="noreferrer">
                                     {embed.title}
                                 </a>
                             </span>
@@ -151,9 +150,10 @@ export default function Embed({ embed }: Props) {
                 <img
                     className={classNames(styles.embed, styles.image)}
                     style={calculateSize(embed.width, embed.height)}
-                    src={proxyImage(embed.url)}
+                    src={client.proxyFile(embed.url)}
                     type="text/html"
                     frameBorder="0"
+                    loading="lazy"
                     onClick={() => openScreen({ id: "image_viewer", embed })}
                     onMouseDown={(ev) =>
                         ev.button === 1 && window.open(embed.url, "_blank")

src/components/common/messaging/embed/EmbedMedia.tsx

-import { Embed } from "revolt.js/dist/api/objects";
+/* eslint-disable react-hooks/rules-of-hooks */
+import { Embed } from "revolt-api/types/January";
 
 import styles from "./Embed.module.scss";
 
 import { useIntermediate } from "../../../../context/intermediate/Intermediate";
+import { useClient } from "../../../../context/revoltjs/RevoltClient";
 
 interface Props {
     embed: Embed;
@@ -11,19 +13,15 @@ interface Props {
 }
 
 export default function EmbedMedia({ embed, width, height }: Props) {
-    // ! FIXME: temp code
-    // ! add proxy function to client
-    function proxyImage(url: string) {
-        return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url);
-    }
-
     if (embed.type !== "Website") return null;
     const { openScreen } = useIntermediate();
+    const client = useClient();
 
     switch (embed.special?.type) {
         case "YouTube":
             return (
                 <iframe
+                    loading="lazy"
                     src={`https://www.youtube-nocookie.com/embed/${embed.special.id}?modestbranding=1`}
                     allowFullScreen
                     style={{ height }}
@@ -38,6 +36,7 @@ export default function EmbedMedia({ embed, width, height }: Props) {
                     frameBorder="0"
                     allowFullScreen
                     scrolling="no"
+                    loading="lazy"
                     style={{ height }}
                 />
             );
@@ -45,6 +44,7 @@ export default function EmbedMedia({ embed, width, height }: Props) {
             return (
                 <iframe
                     src={`https://open.spotify.com/embed/${embed.special.content_type}/${embed.special.id}`}
+                    loading="lazy"
                     frameBorder="0"
                     allowFullScreen
                     allowTransparency
@@ -59,6 +59,7 @@ export default function EmbedMedia({ embed, width, height }: Props) {
                     )}&color=%23FF7F50&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`}
                     frameBorder="0"
                     scrolling="no"
+                    loading="lazy"
                     style={{ height }}
                 />
             );
@@ -69,17 +70,19 @@ export default function EmbedMedia({ embed, width, height }: Props) {
                         embed.special.id
                     }/size=large/bgcol=181a1b/linkcol=056cc4/tracklist=false/transparent=true/`}
                     seamless
+                    loading="lazy"
                     style={{ height }}
                 />
             );
         }
         default: {
             if (embed.image) {
-                let url = embed.image.url;
+                const url = embed.image.url;
                 return (
                     <img
                         className={styles.image}
-                        src={proxyImage(url)}
+                        src={client.proxyFile(url)}
+                        loading="lazy"
                         style={{ width, height }}
                         onClick={() =>
                             openScreen({

src/components/common/messaging/embed/EmbedMediaActions.tsx

 import { LinkExternal } from "@styled-icons/boxicons-regular";
-import { EmbedImage } from "revolt.js/dist/api/objects";
+import { EmbedImage } from "revolt-api/types/January";
 
 import styles from "./Embed.module.scss";
 
@@ -16,9 +16,13 @@ export default function EmbedMediaActions({ embed }: Props) {
         <div className={styles.actions}>
             <span className={styles.filename}>{filename}</span>
             <span className={styles.filesize}>
-                {embed.width + "x" + embed.height}
+                {`${embed.width}x${embed.height}`}
             </span>
-            <a href={embed.url} class={styles.openIcon} target="_blank">
+            <a
+                href={embed.url}
+                class={styles.openIcon}
+                target="_blank"
+                rel="noreferrer">
                 <IconButton>
                     <LinkExternal size={24} />
                 </IconButton>

src/components/common/user/UserCheckbox.tsx

-import { User } from "revolt.js";
+import { User } from "revolt.js/dist/maps/Users";
 
 import Checkbox, { CheckboxProps } from "../../ui/Checkbox";
 
 import UserIcon from "./UserIcon";
+import { Username } from "./UserShort";
 
 type UserProps = Omit<CheckboxProps, "children"> & { user: User };
 
@@ -10,7 +11,7 @@ export default function UserCheckbox({ user, ...props }: UserProps) {
     return (
         <Checkbox {...props}>
             <UserIcon target={user} size={32} />
-            {user.username}
+            <Username user={user} />
         </Checkbox>
     );
 }

src/components/common/user/UserHeader.tsx

 import { Cog } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
 import { Link } from "react-router-dom";
-import { User } from "revolt.js";
+import { User } from "revolt.js/dist/maps/Users";
 import styled from "styled-components";
 
 import { openContextMenu } from "preact-context-menu";
-import { Text } from "preact-i18n";
-import { Localizer } from "preact-i18n";
+import { Text, Localizer } from "preact-i18n";
 
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
@@ -15,7 +15,6 @@ import Header from "../../ui/Header";
 import IconButton from "../../ui/IconButton";
 
 import Tooltip from "../Tooltip";
-import UserIcon from "./UserIcon";
 import UserStatus from "./UserStatus";
 
 const HeaderBase = styled.div`
@@ -49,7 +48,7 @@ interface Props {
     user: User;
 }
 
-export default function UserHeader({ user }: Props) {
+export default observer(({ user }: Props) => {
     const { writeClipboard } = useIntermediate();
 
     return (
@@ -81,4 +80,4 @@ export default function UserHeader({ user }: Props) {
             )}
         </Header>
     );
-}
+});

src/components/common/user/UserHover.tsx

+import { User } from "revolt.js/dist/maps/Users";
+import styled from "styled-components";
+
+import { Children } from "../../../types/Preact";
+import Tooltip from "../Tooltip";
+import { Username } from "./UserShort";
+import UserStatus from "./UserStatus";
+
+interface Props {
+    user?: User;
+    children: Children;
+}
+
+const Base = styled.div`
+    display: flex;
+    flex-direction: column;
+
+    .username {
+        font-size: 13px;
+        font-weight: 600;
+    }
+
+    .status {
+        font-size: 11px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .tip {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        margin-top: 2px;
+        color: var(--secondary-foreground);
+    }
+`;
+
+export default function UserHover({ user, children }: Props) {
+    return (
+        <Tooltip
+            placement="right-end"
+            content={
+                <Base>
+                    <Username className="username" user={user} />
+                    <span className="status">
+                        <UserStatus user={user} />
+                    </span>
+                    {/*<div className="tip"><InfoCircle size={13}/>Right-click on the avatar to access the quick menu</div>*/}
+                </Base>
+            }>
+            {children}
+        </Tooltip>
+    );
+}

src/components/common/user/UserIcon.tsx

 import { MicrophoneOff } from "@styled-icons/boxicons-regular";
-import { User } from "revolt.js";
-import { Users } from "revolt.js/dist/api/objects";
+import { observer } from "mobx-react-lite";
+import { Presence } from "revolt-api/types/Users";
+import { User } from "revolt.js/dist/maps/Users";
 import styled, { css } from "styled-components";
 
 import { useContext } from "preact/hooks";
@@ -21,10 +22,10 @@ interface Props extends IconBaseProps<User> {
 export function useStatusColour(user?: User) {
     const theme = useContext(ThemeContext);
 
-    return user?.online && user?.status?.presence !== Users.Presence.Invisible
-        ? user?.status?.presence === Users.Presence.Idle
+    return user?.online && user?.status?.presence !== Presence.Invisible
+        ? user?.status?.presence === Presence.Idle
             ? theme["status-away"]
-            : user?.status?.presence === Users.Presence.Busy
+            : user?.status?.presence === Presence.Busy
             ? theme["status-busy"]
             : theme["status-online"]
         : theme["status-invisible"];
@@ -50,55 +51,68 @@ const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
         `}
 `;
 
-export default function UserIcon(
-    props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>,
-) {
-    const client = useContext(AppContext);
+export default observer(
+    (
+        props: Props &
+            Omit<
+                JSX.SVGAttributes<SVGSVGElement>,
+                keyof Props | "children" | "as"
+            >,
+    ) => {
+        const client = useContext(AppContext);
 
-    const {
-        target,
-        attachment,
-        size,
-        voice,
-        status,
-        animate,
-        mask,
-        children,
-        as,
-        ...svgProps
-    } = props;
-    const iconURL =
-        client.generateFileURL(
-            target?.avatar ?? attachment,
-            { max_side: 256 },
+        const {
+            target,
+            attachment,
+            size,
+            status,
             animate,
-        ) ?? (target ? client.users.getDefaultAvatarURL(target._id) : fallback);
+            mask,
+            hover,
+            ...svgProps
+        } = props;
+        const iconURL =
+            client.generateFileURL(
+                target?.avatar ?? attachment,
+                { max_side: 256 },
+                animate,
+            ) ?? (target ? target.defaultAvatarURL : fallback);
 
-    return (
-        <IconBase
-            {...svgProps}
-            width={size}
-            height={size}
-            aria-hidden="true"
-            viewBox="0 0 32 32">
-            <foreignObject
-                x="0"
-                y="0"
-                width="32"
-                height="32"
-                mask={mask ?? (status ? "url(#user)" : undefined)}>
-                {<img src={iconURL} draggable={false} />}
-            </foreignObject>
-            {props.status && (
-                <circle cx="27" cy="27" r="5" fill={useStatusColour(target)} />
-            )}
-            {props.voice && (
-                <foreignObject x="22" y="22" width="10" height="10">
-                    <VoiceIndicator status={props.voice}>
-                        {props.voice === "muted" && <MicrophoneOff size={6} />}
-                    </VoiceIndicator>
+        return (
+            <IconBase
+                {...svgProps}
+                width={size}
+                height={size}
+                hover={hover}
+                aria-hidden="true"
+                viewBox="0 0 32 32">
+                <foreignObject
+                    x="0"
+                    y="0"
+                    width="32"
+                    height="32"
+                    class="icon"
+                    mask={mask ?? (status ? "url(#user)" : undefined)}>
+                    {<img src={iconURL} draggable={false} loading="lazy" />}
                 </foreignObject>
-            )}
-        </IconBase>
-    );
-}
+                {props.status && (
+                    <circle
+                        cx="27"
+                        cy="27"
+                        r="5"
+                        fill={useStatusColour(target)}
+                    />
+                )}
+                {props.voice && (
+                    <foreignObject x="22" y="22" width="10" height="10">
+                        <VoiceIndicator status={props.voice}>
+                            {props.voice === "muted" && (
+                                <MicrophoneOff size={6} />
+                            )}
+                        </VoiceIndicator>
+                    </foreignObject>
+                )}
+            </IconBase>
+        );
+    },
+);

src/components/common/user/UserShort.tsx

-import { User } from "revolt.js";
+import { observer } from "mobx-react-lite";
+import { useParams } from "react-router-dom";
+import { User } from "revolt.js/dist/maps/Users";
 
 import { Text } from "preact-i18n";
 
+import { useClient } from "../../../context/revoltjs/RevoltClient";
+
 import UserIcon from "./UserIcon";
 
-export function Username({
-    user,
-    ...otherProps
-}: { user?: User } & JSX.HTMLAttributes<HTMLElement>) {
-    return (
-        <span {...otherProps}>
-            {user?.username ?? <Text id="app.main.channel.unknown_user" />}
-        </span>
-    );
-}
+export const Username = observer(
+    ({
+        user,
+        ...otherProps
+    }: { user?: User } & JSX.HTMLAttributes<HTMLElement>) => {
+        let username = user?.username;
+        let color;
+
+        if (user) {
+            const { server } = useParams<{ server?: string }>();
+            if (server) {
+                const client = useClient();
+                const member = client.members.getKey({
+                    server,
+                    user: user._id,
+                });
+
+                if (member) {
+                    if (member.nickname) {
+                        username = member.nickname;
+                    }
+
+                    if (member.roles && member.roles.length > 0) {
+                        const srv = client.servers.get(member._id.server);
+                        if (srv?.roles) {
+                            for (const role of member.roles) {
+                                const c = srv.roles[role].colour;
+                                if (c) {
+                                    color = c;
+                                    continue;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        return (
+            <span {...otherProps} style={{ color }}>
+                {username ?? <Text id="app.main.channel.unknown_user" />}
+            </span>
+        );
+    },
+);
 
 export default function UserShort({
     user,

src/components/common/user/UserStatus.tsx

-import { User } from "revolt.js";
-import { Users } from "revolt.js/dist/api/objects";
+import { observer } from "mobx-react-lite";
+import { Presence } from "revolt-api/types/Users";
+import { User } from "revolt.js/dist/maps/Users";
 
 import { Text } from "preact-i18n";
 
+import Tooltip from "../Tooltip";
+
 interface Props {
-    user: User;
+    user?: User;
+    tooltip?: boolean;
 }
 
-export default function UserStatus({ user }: Props) {
-    if (user.online) {
+export default observer(({ user, tooltip }: Props) => {
+    if (user?.online) {
         if (user.status?.text) {
-            return <>{user.status?.text}</>;
+            if (tooltip) {
+                return (
+                    <Tooltip arrow={undefined} content={user.status.text}>
+                        {user.status.text}
+                    </Tooltip>
+                );
+            }
+
+            return <>{user.status.text}</>;
         }
 
-        if (user.status?.presence === Users.Presence.Busy) {
+        if (user.status?.presence === Presence.Busy) {
             return <Text id="app.status.busy" />;
         }
 
-        if (user.status?.presence === Users.Presence.Idle) {
+        if (user.status?.presence === Presence.Idle) {
             return <Text id="app.status.idle" />;
         }
 
-        if (user.status?.presence === Users.Presence.Invisible) {
+        if (user.status?.presence === Presence.Invisible) {
             return <Text id="app.status.offline" />;
         }
 
@@ -29,4 +41,4 @@ export default function UserStatus({ user }: Props) {
     }
 
     return <Text id="app.status.offline" />;
-}
+});

src/components/markdown/Markdown.module.scss

@@ -12,7 +12,7 @@
         margin-bottom: 0;
         margin-top: 1px;
         margin-right: 2px;
-        vertical-align: -.3em;
+        vertical-align: -0.3em;
     }
 
     p,
@@ -26,9 +26,9 @@
         &[data-type="mention"] {
             padding: 0 6px;
             font-weight: 600;
-            border-radius: 12px;
             display: inline-block;
             background: var(--secondary-background);
+            border-radius: calc(var(--border-radius) * 2);
 
             &:hover {
                 text-decoration: none;
@@ -61,8 +61,8 @@
     blockquote {
         margin: 2px 0;
         padding: 2px 0;
-        border-radius: 4px;
         background: var(--hover);
+        border-radius: var(--border-radius);
         border-inline-start: 4px solid var(--tertiary-background);
 
         > * {
@@ -72,9 +72,8 @@
 
     pre {
         padding: 1em;
-        border-radius: 4px;
         overflow-x: scroll;
-        border-radius: 3px;
+        border-radius: var(--border-radius);
         background: var(--block) !important;
     }
 
@@ -85,9 +84,9 @@
     code {
         color: white;
         font-size: 90%;
-        border-radius: 4px;
         background: var(--block);
-        font-family: var(--monoscape-font), monospace;
+        border-radius: var(--border-radius);
+        font-family: var(--monospace-font), monospace;
     }
 
     input[type="checkbox"] {
@@ -113,12 +112,13 @@
         padding: 0 2px;
         cursor: pointer;
         user-select: none;
-        border-radius: 4px;
         color: transparent;
         background: #151515;
+        border-radius: var(--border-radius);
 
         > * {
             opacity: 0;
+            pointer-events: none;
         }
 
         &:global(.shown) {
@@ -129,22 +129,19 @@
 
             > * {
                 opacity: 1;
+                pointer-events: unset;
             }
         }
     }
 
     :global(.code) {
-        font-family: var(--monoscape-font), monospace;
+        font-family: var(--monospace-font), monospace;
 
         :global(.lang) {
-            // height: 8px;
-            // position: relative;
+            width: fit-content;
+            padding-bottom: 8px;
 
             div {
-                // margin-left: -5px;
-                // margin-top: -16px;
-                // position: absolute;
-
                 color: #111;
                 cursor: pointer;
                 padding: 2px 6px;
@@ -163,10 +160,6 @@
                     box-shadow: 0 1px #787676;
                 }
             }
-
-            // ! FIXME: had to change this temporarily due to overflow
-            width: fit-content;
-            padding-bottom: 8px;
         }
     }
 
@@ -183,18 +176,18 @@
     input[type="checkbox"] + label:before {
         width: 12px;
         height: 12px;
-        content: 'a';
+        content: "a";
         font-size: 10px;
         margin-right: 6px;
         line-height: 12px;
-        position: relative;
-        border-radius: 4px;
         background: white;
+        position: relative;
         display: inline-block;
+        border-radius: var(--border-radius);
     }
 
     input[type="checkbox"][checked="true"] + label:before {
-        content: '✓';
+        content: "✓";
         align-items: center;
         display: inline-flex;
         justify-content: center;

src/components/markdown/Markdown.tsx

@@ -9,7 +9,7 @@ export interface MarkdownProps {
 
 export default function Markdown(props: MarkdownProps) {
     return (
-        // @ts-expect-error
+        // @ts-expect-error Typings mis-match.
         <Suspense fallback={props.content}>
             <Renderer {...props} />
         </Suspense>

src/components/markdown/Renderer.tsx

+/* eslint-disable react-hooks/rules-of-hooks */
 import MarkdownKatex from "@traptitech/markdown-it-katex";
 import MarkdownSpoilers from "@traptitech/markdown-it-spoiler";
 import "katex/dist/katex.min.css";
 import MarkdownIt from "markdown-it";
-// @ts-ignore
+// @ts-expect-error No typings.
 import MarkdownEmoji from "markdown-it-emoji/dist/markdown-it-emoji-bare";
-// @ts-ignore
+// @ts-expect-error No typings.
 import MarkdownSub from "markdown-it-sub";
-// @ts-ignore
+// @ts-expect-error No typings.
 import MarkdownSup from "markdown-it-sup";
 import Prism from "prismjs";
 import "prismjs/themes/prism-tomorrow.css";
 import { RE_MENTIONS } from "revolt.js";
 
 import styles from "./Markdown.module.scss";
-import { useContext } from "preact/hooks";
+import { useCallback, useContext } from "preact/hooks";
 
 import { internalEmit } from "../../lib/eventEmitter";
 
@@ -35,7 +36,7 @@ declare global {
 if (typeof window !== "undefined") {
     window.copycode = function (element: HTMLDivElement) {
         try {
-            let code = element.parentElement?.parentElement?.children[1];
+            const code = element.parentElement?.parentElement?.children[1];
             if (code) {
                 navigator.clipboard.writeText(code.textContent?.trim() ?? "");
             }
@@ -47,9 +48,9 @@ export const md: MarkdownIt = MarkdownIt({
     breaks: true,
     linkify: true,
     highlight: (str, lang) => {
-        let v = Prism.languages[lang];
+        const v = Prism.languages[lang];
         if (v) {
-            let out = Prism.highlight(str, v, lang);
+            const out = Prism.highlight(str, v, lang);
             return `<pre class="code"><div class="lang"><div onclick="copycode(this)">${lang}</div></div><code class="language-${lang}">${out}</code></pre>`;
         }
 
@@ -66,16 +67,11 @@ export const md: MarkdownIt = MarkdownIt({
     .use(MarkdownKatex, {
         throwOnError: false,
         maxExpand: 0,
+        maxSize: 10,
+        strict: false,
+        errorColor: "var(--error)",
     });
 
-// ? Force links to open _blank.
-// From: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
-const defaultRender =
-    md.renderer.rules.link_open ||
-    function (tokens, idx, options, _env, self) {
-        return self.renderToken(tokens, idx, options);
-    };
-
 // TODO: global.d.ts file for defining globals
 declare global {
     interface Window {
@@ -83,70 +79,15 @@ declare global {
     }
 }
 
-// Handler for internal links, pushes events to React using magic.
-if (typeof window !== "undefined") {
-    window.internalHandleURL = function (element: HTMLAnchorElement) {
-        const url = new URL(element.href, location.href);
-        const pathname = url.pathname;
-
-        if (pathname.startsWith("/@")) {
-            internalEmit("Intermediate", "openProfile", pathname.substr(2));
-        } else {
-            internalEmit("Intermediate", "navigate", pathname);
-        }
-    };
-}
-
-md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
-    let internal;
-    const hIndex = tokens[idx].attrIndex("href");
-    if (hIndex >= 0) {
-        try {
-            // For internal links, we should use our own handler to use react-router history.
-            // @ts-ignore
-            const href = tokens[idx].attrs[hIndex][1];
-            const url = new URL(href, location.href);
-
-            if (url.hostname === location.hostname) {
-                internal = true;
-                // I'm sorry.
-                tokens[idx].attrPush([
-                    "onclick",
-                    "internalHandleURL(this); return false",
-                ]);
-
-                if (url.pathname.startsWith("/@")) {
-                    tokens[idx].attrPush(["data-type", "mention"]);
-                }
-            }
-        } catch (err) {
-            // Ignore the error, treat as normal link.
-        }
-    }
-
-    if (!internal) {
-        // Add target=_blank for external links.
-        const aIndex = tokens[idx].attrIndex("target");
-
-        if (aIndex < 0) {
-            tokens[idx].attrPush(["target", "_blank"]);
-        } else {
-            try {
-                // @ts-ignore
-                tokens[idx].attrs[aIndex][1] = "_blank";
-            } catch (_) {}
-        }
-    }
-
-    return defaultRender(tokens, idx, options, env, self);
-};
-
 md.renderer.rules.emoji = function (token, idx) {
     return generateEmoji(token[idx].content);
 };
 
 const RE_TWEMOJI = /:(\w+):/g;
 
+// ! FIXME: Move to library
+const RE_CHANNELS = /<#([A-z0-9]{26})>/g;
+
 export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
     const client = useContext(AppContext);
     if (typeof content === "undefined") return null;
@@ -154,10 +95,9 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
 
     // We replace the message with the mention at the time of render.
     // We don't care if the mention changes.
-    let newContent = content.replace(
-        RE_MENTIONS,
-        (sub: string, ...args: any[]) => {
-            const id = args[0],
+    const newContent = content
+        .replace(RE_MENTIONS, (sub: string, ...args: unknown[]) => {
+            const id = args[0] as string,
                 user = client.users.get(id);
 
             if (user) {
@@ -165,28 +105,102 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
             }
 
             return sub;
-        },
-    );
+        })
+        .replace(RE_CHANNELS, (sub: string, ...args: unknown[]) => {
+            const id = args[0] as string,
+                channel = client.channels.get(id);
+
+            if (channel?.channel_type === "TextChannel") {
+                return `[#${channel.name}](/server/${channel.server_id}/channel/${id})`;
+            }
+
+            return sub;
+        });
 
     const useLargeEmojis = disallowBigEmoji
         ? false
         : content.replace(RE_TWEMOJI, "").trim().length === 0;
 
+    const toggle = useCallback((ev: MouseEvent) => {
+        if (ev.currentTarget) {
+            const element = ev.currentTarget as HTMLDivElement;
+            if (element.classList.contains("spoiler")) {
+                element.classList.add("shown");
+            }
+        }
+    }, []);
+
+    const handleLink = useCallback((ev: MouseEvent) => {
+        if (ev.currentTarget) {
+            const element = ev.currentTarget as HTMLAnchorElement;
+            const url = new URL(element.href, location.href);
+            const pathname = url.pathname;
+
+            if (pathname.startsWith("/@")) {
+                const id = pathname.substr(2);
+                if (/[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}/.test(id)) {
+                    ev.preventDefault();
+                    internalEmit("Intermediate", "openProfile", id);
+                }
+            } else {
+                ev.preventDefault();
+                internalEmit("Intermediate", "navigate", pathname);
+            }
+        }
+    }, []);
+
     return (
         <span
+            ref={(el) => {
+                if (el) {
+                    el.querySelectorAll<HTMLDivElement>(".spoiler").forEach(
+                        (element) => {
+                            element.removeEventListener("click", toggle);
+                            element.addEventListener("click", toggle);
+                        },
+                    );
+
+                    el.querySelectorAll<HTMLAnchorElement>("a").forEach(
+                        (element) => {
+                            element.removeEventListener("click", handleLink);
+                            element.removeAttribute("data-type");
+                            element.removeAttribute("target");
+
+                            let internal;
+                            const href = element.href;
+                            if (href) {
+                                try {
+                                    const url = new URL(href, location.href);
+
+                                    if (url.hostname === location.hostname) {
+                                        internal = true;
+                                        element.addEventListener(
+                                            "click",
+                                            handleLink,
+                                        );
+
+                                        if (url.pathname.startsWith("/@")) {
+                                            element.setAttribute(
+                                                "data-type",
+                                                "mention",
+                                            );
+                                        }
+                                    }
+                                } catch (err) {}
+                            }
+
+                            if (!internal) {
+                                element.setAttribute("target", "_blank");
+                            }
+                        },
+                    );
+                }
+            }}
             className={styles.markdown}
             dangerouslySetInnerHTML={{
                 __html: md.render(newContent),
             }}
             data-large-emojis={useLargeEmojis}
-            onClick={(ev) => {
-                if (ev.target) {
-                    let element = ev.currentTarget;
-                    if (element.classList.contains("spoiler")) {
-                        element.classList.add("shown");
-                    }
-                }
-            }}
         />
     );
 }

src/components/native/Titlebar.tsx

+import { Wrench } from "@styled-icons/boxicons-solid";
+import styled from "styled-components";
+
+import UpdateIndicator from "../common/UpdateIndicator";
+
+const TitlebarBase = styled.div`
+    height: var(--titlebar-height);
+    display: flex;
+    user-select: none;
+    align-items: center;
+
+    .drag {
+        flex-grow: 1;
+        -webkit-app-region: drag;
+        margin-top: 10px;
+        height: 100%;
+    }
+
+    .quick {
+        color: var(--secondary-foreground);
+
+        > div,
+        > div > div {
+            width: var(--titlebar-height) !important;
+        }
+
+        &.disabled {
+            color: var(--error);
+        }
+
+        &.unavailable {
+            background: var(--error);
+        }
+    }
+
+    .title {
+        -webkit-app-region: drag;
+        /*height: var(--titlebar-height);*/
+        font-size: 16px;
+        font-weight: 600;
+        margin-inline-start: 10px;
+        margin-top: 10px;
+        gap: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        z-index: 90000;
+        color: var(--titlebar-logo-color);
+
+        svg {
+            margin-bottom: 10px;
+        }
+
+        svg:first-child {
+            height: calc(var(--titlebar-height) / 3);
+        }
+    }
+
+    .actions {
+        z-index: 100;
+        display: flex;
+        align-items: center;
+        margin-inline-start: 6px;
+
+        div {
+            width: calc(
+                var(--titlebar-height) + var(--titlebar-action-padding)
+            );
+            height: var(--titlebar-height);
+
+            display: grid;
+            place-items: center;
+            transition: 0.2s ease color;
+            transition: 0.2s ease background-color;
+
+            &:hover {
+                background: var(--primary-background);
+            }
+
+            &.error:hover {
+                background: var(--error);
+            }
+        }
+    }
+`;
+
+export function Titlebar() {
+    return (
+        <TitlebarBase>
+            <div class="title">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 193.733 37.438">
+                    <path
+                        d="M23.393,1.382c0,2.787-1.52,4.46-4.764,4.46H13.258V-2.977H18.63C21.873-2.977,23.393-1.254,23.393,1.382Zm-24-11.555,5.2,7.213V25.4h8.666V11.973h2.078l7.4,13.43h9.781l-8.21-14.089A10.355,10.355,0,0,0,32.212,1.027c0-6.183-4.358-11.2-13.075-11.2Zm60.035,0H37.634V25.4H59.426V18.46H46.3v-7.8H57.906V3.966H46.3V-2.969H59.426Zm20.981,26.86-8.818-26.86H62.365L74.984,25.4H85.83L98.449-10.173H89.276Zm56.659-9.173c0-10.693-8.058-18.194-18.194-18.194-10.085,0-18.3,7.5-18.3,18.194a17.9,17.9,0,0,0,18.3,18.244A17.815,17.815,0,0,0,137.066,7.514Zm-27.62,0c0-6.335,3.649-10.338,9.426-10.338,5.676,0,9.376,4,9.376,10.338,0,6.233-3.7,10.338-9.376,10.338C113.095,17.852,109.446,13.747,109.446,7.514ZM141.88-10.173V25.4H161.9v-6.95H150.545V-10.173Zm22.248,7.2h9.426V25.4h8.666V-2.975h9.426v-7.2H164.128Z"
+                        transform="translate(1.586 11.18)"
+                        fill="var(--titlebar-logo-color)"
+                        stroke="var(--titlebar-logo-color)"
+                        stroke-width="1"
+                    />
+                </svg>
+                {window.native.getConfig().build === "dev" && (
+                    <Wrench size="12.5" />
+                )}
+            </div>
+            {/*<div class="actions quick">
+                <Tooltip
+                    content="Mute"
+                    placement="bottom">
+                    <div onClick={window.native.min}>
+                        <Microphone size={15}/>
+                    </div>
+                </Tooltip>
+                <Tooltip
+                    content="Deafen"
+                    placement="bottom">
+                    <div onClick={window.native.min}>
+                        <VolumeFull size={15}/>
+                    </div>
+                </Tooltip>
+            </div>*/}
+            <div class="drag" />
+            <UpdateIndicator style="titlebar" />
+            <div class="actions">
+                <div onClick={window.native.min}>
+                    <svg
+                        aria-hidden="false"
+                        width="12"
+                        height="12"
+                        viewBox="0 0 12 12">
+                        <rect
+                            fill="currentColor"
+                            width="10"
+                            height="1"
+                            x="1"
+                            y="6"
+                        />
+                    </svg>
+                </div>
+                <div onClick={window.native.max}>
+                    <svg
+                        aria-hidden="false"
+                        width="12"
+                        height="12"
+                        viewBox="0 0 12 12">
+                        <rect
+                            width="9"
+                            height="9"
+                            x="1.5"
+                            y="1.5"
+                            fill="none"
+                            stroke="currentColor"
+                        />
+                    </svg>
+                </div>
+                <div onClick={window.native.close} class="error">
+                    <svg
+                        aria-hidden="false"
+                        width="12"
+                        height="12"
+                        viewBox="0 0 12 12">
+                        <polygon
+                            fill="currentColor"
+                            stroke-width="1"
+                            fill-rule="evenodd"
+                            points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"
+                            style="stroke:currentColor;stroke-width:0.4"
+                        />
+                    </svg>
+                </div>
+            </div>
+        </TitlebarBase>
+    );
+}

src/components/navigation/BottomNavigation.tsx

 import { Message, Group } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
 import { useHistory, useLocation } from "react-router";
 import styled, { css } from "styled-components";
 
@@ -7,16 +8,21 @@ import ConditionalLink from "../../lib/ConditionalLink";
 import { connectState } from "../../redux/connector";
 import { LastOpened } from "../../redux/reducers/last_opened";
 
-import { useSelf } from "../../context/revoltjs/hooks";
+import { useClient } from "../../context/revoltjs/RevoltClient";
 
 import UserIcon from "../common/user/UserIcon";
 import IconButton from "../ui/IconButton";
 
-const NavigationBase = styled.div`
+const Base = styled.div`
+    background: var(--secondary-background);
+`;
+
+const Navbar = styled.div`
     z-index: 100;
+    max-width: 500px;
+    margin: 0 auto;
     display: flex;
     height: var(--bottom-navigation-height);
-    background: var(--secondary-background);
 `;
 
 const Button = styled.a<{ active: boolean }>`
@@ -29,6 +35,11 @@ const Button = styled.a<{ active: boolean }>`
         height: 100%;
     }
 
+    > div,
+    > a > div {
+        padding: 0 20px;
+    }
+
     ${(props) =>
         props.active &&
         css`
@@ -40,8 +51,10 @@ interface Props {
     lastOpened: LastOpened;
 }
 
-export function BottomNavigation({ lastOpened }: Props) {
-    const user = useSelf();
+export const BottomNavigation = observer(({ lastOpened }: Props) => {
+    const client = useClient();
+    const user = client.users.get(client.user!._id);
+
     const history = useHistory();
     const path = useLocation().pathname;
 
@@ -52,42 +65,58 @@ export function BottomNavigation({ lastOpened }: Props) {
     const homeActive = !(friendsActive || settingsActive);
 
     return (
-        <NavigationBase>
-            <Button active={homeActive}>
-                <IconButton
-                    onClick={() => {
-                        if (settingsActive) {
-                            if (history.length > 0) {
-                                history.goBack();
+        <Base>
+            <Navbar>
+                <Button active={homeActive}>
+                    <IconButton
+                        onClick={() => {
+                            if (settingsActive) {
+                                if (history.length > 0) {
+                                    history.goBack();
+                                }
                             }
-                        }
-
-                        if (channel_id) {
-                            history.push(`/channel/${channel_id}`);
-                        } else {
-                            history.push("/");
-                        }
-                    }}>
-                    <Message size={24} />
-                </IconButton>
-            </Button>
-            <Button active={friendsActive}>
-                <ConditionalLink active={friendsActive} to="/friends">
-                    <IconButton>
-                        <Group size={25} />
-                    </IconButton>
-                </ConditionalLink>
-            </Button>
-            <Button active={settingsActive}>
-                <ConditionalLink active={settingsActive} to="/settings">
-                    <IconButton>
-                        <UserIcon target={user} size={26} status={true} />
+
+                            if (channel_id) {
+                                history.push(`/channel/${channel_id}`);
+                            } else {
+                                history.push("/");
+                            }
+                        }}>
+                        <Message size={24} />
                     </IconButton>
-                </ConditionalLink>
-            </Button>
-        </NavigationBase>
+                </Button>
+                <Button active={friendsActive}>
+                    <ConditionalLink active={friendsActive} to="/friends">
+                        <IconButton>
+                            <Group size={25} />
+                        </IconButton>
+                    </ConditionalLink>
+                </Button>
+                {/*<Button active={searchActive}>
+                    <ConditionalLink active={searchActive} to="/search">
+                        <IconButton>
+                            <Search size={25} />
+                        </IconButton>
+                    </ConditionalLink>
+                </Button>
+                <Button active={inboxActive}>
+                    <ConditionalLink active={inboxActive} to="/inbox">
+                        <IconButton>
+                            <Inbox size={25} />
+                        </IconButton>
+                    </ConditionalLink>
+                </Button>*/}
+                <Button active={settingsActive}>
+                    <ConditionalLink active={settingsActive} to="/settings">
+                        <IconButton>
+                            <UserIcon target={user} size={26} status={true} />
+                        </IconButton>
+                    </ConditionalLink>
+                </Button>
+            </Navbar>
+        </Base>
     );
-}
+});
 
 export default connectState(BottomNavigation, (state) => {
     return {

src/components/navigation/items/ButtonItem.tsx

 import { X, Crown } from "@styled-icons/boxicons-regular";
-import { Channels, Users } from "revolt.js/dist/api/objects";
+import { observer } from "mobx-react-lite";
+import { Presence } from "revolt-api/types/Users";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import { User } from "revolt.js/dist/maps/Users";
 
 import styles from "./Item.module.scss";
 import classNames from "classnames";
@@ -14,6 +17,7 @@ import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import ChannelIcon from "../../common/ChannelIcon";
 import Tooltip from "../../common/Tooltip";
 import UserIcon from "../../common/user/UserIcon";
+import { Username } from "../../common/user/UserShort";
 import UserStatus from "../../common/user/UserStatus";
 import IconButton from "../../ui/IconButton";
 
@@ -29,12 +33,12 @@ type CommonProps = Omit<
 };
 
 type UserProps = CommonProps & {
-    user: Users.User;
-    context?: Channels.Channel;
-    channel?: Channels.DirectMessageChannel;
+    user: User;
+    context?: Channel;
+    channel?: Channel;
 };
 
-export function UserButton(props: UserProps) {
+export const UserButton = observer((props: UserProps) => {
     const { active, alert, alertCount, user, context, channel, ...divProps } =
         props;
     const { openScreen } = useIntermediate();
@@ -47,8 +51,7 @@ export function UserButton(props: UserProps) {
             data-alert={typeof alert === "string"}
             data-online={
                 typeof channel !== "undefined" ||
-                (user.online &&
-                    user.status?.presence !== Users.Presence.Invisible)
+                (user.online && user.status?.presence !== Presence.Invisible)
             }
             onContextMenu={attachContextMenu("Menu", {
                 user: user._id,
@@ -63,11 +66,13 @@ export function UserButton(props: UserProps) {
                 status
             />
             <div className={styles.name}>
-                <div>{user.username}</div>
+                <div>
+                    <Username user={user} />
+                </div>
                 {
                     <div className={styles.subText}>
                         {channel?.last_message && alert ? (
-                            channel.last_message.short
+                            (channel.last_message as { short: string }).short
                         ) : (
                             <UserStatus user={user} />
                         )}
@@ -76,7 +81,7 @@ export function UserButton(props: UserProps) {
             </div>
             <div className={styles.button}>
                 {context?.channel_type === "Group" &&
-                    context.owner === user._id && (
+                    context.owner_id === user._id && (
                         <Localizer>
                             <Tooltip
                                 content={<Text id="app.main.groups.owner" />}>
@@ -106,15 +111,15 @@ export function UserButton(props: UserProps) {
             </div>
         </div>
     );
-}
+});
 
 type ChannelProps = CommonProps & {
-    channel: Channels.Channel & { unread?: string };
-    user?: Users.User;
+    channel: Channel & { unread?: string };
+    user?: User;
     compact?: boolean;
 };
 
-export function ChannelButton(props: ChannelProps) {
+export const ChannelButton = observer((props: ChannelProps) => {
     const { active, alert, alertCount, channel, user, compact, ...divProps } =
         props;
 
@@ -131,7 +136,7 @@ export function ChannelButton(props: ChannelProps) {
             {...divProps}
             data-active={active}
             data-alert={typeof alert === "string"}
-            aria-label={{}} /*FIXME: ADD ARIA LABEL*/
+            aria-label={channel.name}
             className={classNames(styles.item, { [styles.compact]: compact })}
             onContextMenu={attachContextMenu("Menu", {
                 channel: channel._id,
@@ -147,12 +152,12 @@ export function ChannelButton(props: ChannelProps) {
                 {channel.channel_type === "Group" && (
                     <div className={styles.subText}>
                         {channel.last_message && alert ? (
-                            channel.last_message.short
+                            (channel.last_message as { short: string }).short
                         ) : (
                             <Text
                                 id="quantities.members"
-                                plural={channel.recipients.length}
-                                fields={{ count: channel.recipients.length }}
+                                plural={channel.recipients!.length}
+                                fields={{ count: channel.recipients!.length }}
                             />
                         )}
                     </div>
@@ -180,7 +185,7 @@ export function ChannelButton(props: ChannelProps) {
             </div>
         </div>
     );
-}
+});
 
 type ButtonProps = CommonProps & {
     onClick?: () => void;

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

@@ -3,8 +3,8 @@
     display: flex;
     padding: 0 8px;
     user-select: none;
-    border-radius: 6px;
     margin-bottom: 2px;
+    border-radius: var(--border-radius);
 
     gap: 8px;
     align-items: center;

src/components/navigation/left/HomeSidebar.tsx

@@ -4,9 +4,9 @@ import {
     Wrench,
     Notepad,
 } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
 import { Link, Redirect, useLocation, useParams } from "react-router-dom";
-import { Channels } from "revolt.js/dist/api/objects";
-import { Users as UsersNS } from "revolt.js/dist/api/objects";
+import { RelationshipStatus } from "revolt-api/types/Users";
 
 import { Text } from "preact-i18n";
 import { useContext, useEffect } from "preact/hooks";
@@ -21,13 +21,7 @@ import { Unreads } from "../../../redux/reducers/unreads";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
-import {
-    useDMs,
-    useForceUpdate,
-    useUsers,
-} from "../../../context/revoltjs/hooks";
 
-import UserHeader from "../../common/user/UserHeader";
 import Category from "../../ui/Category";
 import placeholderSVG from "../items/placeholder.svg";
 import { mapChannelWithUnread, useUnreads } from "./common";
@@ -40,16 +34,21 @@ type Props = {
     unreads: Unreads;
 };
 
-function HomeSidebar(props: Props) {
+const HomeSidebar = observer((props: Props) => {
     const { pathname } = useLocation();
     const client = useContext(AppContext);
     const { channel } = useParams<{ channel: string }>();
     const { openScreen } = useIntermediate();
 
-    const ctx = useForceUpdate();
-    const channels = useDMs(ctx);
+    const channels = [...client.channels.values()]
+        .filter(
+            (x) =>
+                x.channel_type === "DirectMessage" ||
+                x.channel_type === "Group",
+        )
+        .map((x) => mapChannelWithUnread(x, props.unreads));
 
-    const obj = channels.find((x) => x?._id === channel);
+    const obj = client.channels.get(channel);
     if (channel && !obj) return <Redirect to="/" />;
     if (obj) useUnreads({ ...props, channel: obj });
 
@@ -63,47 +62,32 @@ function HomeSidebar(props: Props) {
         });
     }, [channel]);
 
-    const channelsArr = channels
-        .filter((x) => x.channel_type !== "SavedMessages")
-        .map((x) => mapChannelWithUnread(x, props.unreads));
-
-    const users = useUsers(
-        (
-            channelsArr as (
-                | Channels.DirectMessageChannel
-                | Channels.GroupChannel
-            )[]
-        ).reduce((prev: any, cur) => [...prev, ...cur.recipients], []),
-        ctx,
-    );
-
-    channelsArr.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
+    channels.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
 
     return (
         <GenericSidebarBase padding>
-            <UserHeader user={client.user!} />
             <ConnectionStatus />
             <GenericSidebarList>
+                <ConditionalLink active={pathname === "/"} to="/">
+                    <ButtonItem active={pathname === "/"}>
+                        <Home size={20} />
+                        <span>
+                            <Text id="app.navigation.tabs.home" />
+                        </span>
+                    </ButtonItem>
+                </ConditionalLink>
                 {!isTouchscreenDevice && (
                     <>
-                        <ConditionalLink active={pathname === "/"} to="/">
-                            <ButtonItem active={pathname === "/"}>
-                                <Home size={20} />
-                                <span>
-                                    <Text id="app.navigation.tabs.home" />
-                                </span>
-                            </ButtonItem>
-                        </ConditionalLink>
                         <ConditionalLink
                             active={pathname === "/friends"}
                             to="/friends">
                             <ButtonItem
                                 active={pathname === "/friends"}
                                 alert={
-                                    typeof users.find(
+                                    typeof [...client.users.values()].find(
                                         (user) =>
                                             user?.relationship ===
-                                            UsersNS.Relationship.Incoming,
+                                            RelationshipStatus.Incoming,
                                     ) !== "undefined"
                                         ? "unread"
                                         : undefined
@@ -145,18 +129,18 @@ function HomeSidebar(props: Props) {
                         })
                     }
                 />
-                {channelsArr.length === 0 && <img src={placeholderSVG} />}
-                {channelsArr.map((x) => {
+                {channels.length === 0 && (
+                    <img src={placeholderSVG} loading="eager" />
+                )}
+                {channels.map((x) => {
                     let user;
-                    if (x.channel_type === "DirectMessage") {
-                        if (!x.active) return null;
-
-                        let recipient = client.channels.getRecipient(x._id);
-                        user = users.find((x) => x?._id === recipient);
+                    if (x.channel.channel_type === "DirectMessage") {
+                        if (!x.channel.active) return null;
+                        user = x.channel.recipient;
 
                         if (!user) {
                             console.warn(
-                                `Skipped DM ${x._id} because user was missing.`,
+                                `Skipped DM ${x.channel._id} because user was missing.`,
                             );
                             return null;
                         }
@@ -164,14 +148,15 @@ function HomeSidebar(props: Props) {
 
                     return (
                         <ConditionalLink
-                            active={x._id === channel}
-                            to={`/channel/${x._id}`}>
+                            key={x.channel._id}
+                            active={x.channel._id === channel}
+                            to={`/channel/${x.channel._id}`}>
                             <ChannelButton
                                 user={user}
-                                channel={x}
+                                channel={x.channel}
                                 alert={x.unread}
                                 alertCount={x.alertCount}
-                                active={x._id === channel}
+                                active={x.channel._id === channel}
                             />
                         </ConditionalLink>
                     );
@@ -180,7 +165,7 @@ function HomeSidebar(props: Props) {
             </GenericSidebarList>
         </GenericSidebarBase>
     );
-}
+});
 
 export default connectState(
     HomeSidebar,