src/components/markdown/Emoji.tsx

-import twemoji from 'twemoji';
-
-var EMOJI_PACK = 'mutant';
-const REVISION = 3;
-
-/*export function setEmojiPack(pack: EmojiPacks) {
-    EMOJI_PACK = pack;
-}*/
-
-// Taken from Twemoji source code.
-// scripts/build.js#344
-// grabTheRightIcon(rawText);
-const UFE0Fg = /\uFE0F/g;
-const U200D = String.fromCharCode(0x200D);
-function toCodePoint(emoji: string) {
-    return twemoji.convert.toCodePoint(emoji.indexOf(U200D) < 0 ?
-        emoji.replace(UFE0Fg, '') :
-        emoji
-    );
-}
-
-function parseEmoji(emoji: string) {
-    let codepoint = toCodePoint(emoji);
-    return `https://static.revolt.chat/emoji/${EMOJI_PACK}/${codepoint}.svg?rev=${REVISION}`;
-}
-
-export function Emoji({ emoji, size }: { emoji: string, size?: number }) {
-    return (
-        <img
-            alt={emoji}
-            className="emoji"
-            draggable={false}
-            src={parseEmoji(emoji)}
-            style={size ? { width: `${size}px`, height: `${size}px` } : undefined}
-        />
-    )
-}
-
-export function generateEmoji(emoji: string) {
-    return `<img class="emoji" draggable="false" alt="${emoji}" src="${parseEmoji(emoji)}" />`;
-}

src/components/markdown/Markdown.module.scss

-@import "@fontsource/fira-mono/400.css";
-
 .markdown {
     :global(.emoji) {
         height: 1.25em;
@@ -14,7 +12,7 @@
         margin-bottom: 0;
         margin-top: 1px;
         margin-right: 2px;
-        vertical-align: -.3em;
+        vertical-align: -0.3em;
     }
 
     p,
@@ -28,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;
@@ -63,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);
 
         > * {
@@ -74,9 +72,8 @@
 
     pre {
         padding: 1em;
-        border-radius: 4px;
         overflow-x: scroll;
-        border-radius: 3px;
+        border-radius: var(--border-radius);
         background: var(--block) !important;
     }
 
@@ -87,9 +84,9 @@
     code {
         color: white;
         font-size: 90%;
-        border-radius: 4px;
         background: var(--block);
-        font-family: "Fira Mono", monospace;
+        border-radius: var(--border-radius);
+        font-family: var(--monospace-font), monospace;
     }
 
     input[type="checkbox"] {
@@ -116,29 +113,35 @@
         cursor: pointer;
         user-select: none;
         color: transparent;
-        border-radius: 4px;
         background: #151515;
+        border-radius: var(--border-radius);
+
+        > * {
+            opacity: 0;
+            pointer-events: none;
+        }
 
         &:global(.shown) {
             cursor: auto;
             user-select: all;
             color: var(--foreground);
             background: var(--secondary-background);
+
+            > * {
+                opacity: 1;
+                pointer-events: unset;
+            }
         }
     }
 
     :global(.code) {
-        font-family: "Fira Mono", 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;
@@ -157,10 +160,6 @@
                     box-shadow: 0 1px #787676;
                 }
             }
-
-            // ! FIXME: had to change this temporarily due to overflow
-            width: fit-content;
-            padding-bottom: 8px;
         }
     }
 
@@ -177,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

 import { Suspense, lazy } from "preact/compat";
 
-const Renderer = lazy(() => import('./Renderer'));
+const Renderer = lazy(() => import("./Renderer"));
 
 export interface MarkdownProps {
     content?: string;
@@ -9,9 +9,9 @@ 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-expect-error No typings.
+import MarkdownEmoji from "markdown-it-emoji/dist/markdown-it-emoji-bare";
+// @ts-expect-error No typings.
+import MarkdownSub from "markdown-it-sub";
+// @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 { generateEmoji } from "./Emoji";
-import { useContext } from "preact/hooks";
-import { MarkdownProps } from "./Markdown";
+
 import styles from "./Markdown.module.scss";
+import { useCallback, useContext } from "preact/hooks";
+
+import { internalEmit } from "../../lib/eventEmitter";
+
 import { AppContext } from "../../context/revoltjs/RevoltClient";
 
-import Prism from "prismjs";
-import "katex/dist/katex.min.css";
-import "prismjs/themes/prism-tomorrow.css";
+import { generateEmoji } from "../common/Emoji";
 
-import MarkdownKatex from "@traptitech/markdown-it-katex";
-import MarkdownSpoilers from "@traptitech/markdown-it-spoiler";
+import { emojiDictionary } from "../../assets/emojis";
+import { MarkdownProps } from "./Markdown";
 
-// @ts-ignore
-import MarkdownEmoji from "markdown-it-emoji/dist/markdown-it-emoji-bare";
-// @ts-ignore
-import MarkdownSup from "markdown-it-sup";
-// @ts-ignore
-import MarkdownSub from "markdown-it-sub";
+// TODO: global.d.ts file for defining globals
+declare global {
+    interface Window {
+        copycode: (element: HTMLDivElement) => void;
+    }
+}
 
 // Handler for code block copy.
 if (typeof window !== "undefined") {
-    (window as any).copycode = function(element: HTMLDivElement) {
+    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 as any).innerText.trim());
+                navigator.clipboard.writeText(code.textContent?.trim() ?? "");
             }
         } catch (e) {}
     };
@@ -36,97 +48,46 @@ 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>`;
         }
-        
-        return `<pre class="code"><code>${md.utils.escapeHtml(str)}</code></pre>`;
-    }
-})
-.disable("image")
-.use(MarkdownEmoji/*, { defs: emojiDictionary }*/)
-.use(MarkdownSpoilers)
-.use(MarkdownSup)
-.use(MarkdownSub)
-.use(MarkdownKatex, {
-    throwOnError: false,
-    maxExpand: 0
-});
-
-// ? 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);
-    };
 
-// Handler for internal links, pushes events to React using magic.
-if (typeof window !== "undefined") {
-    (window as any).internalHandleURL = function(element: HTMLAnchorElement) {
-        const url = new URL(element.href, location as any);
-        const pathname = url.pathname;
-
-        if (pathname.startsWith("/@")) {
-            //InternalEventEmitter.emit("openProfile", pathname.substr(2));
-        } else {
-            //InternalEventEmitter.emit("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 as any);
-
-            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 `<pre class="code"><code>${md.utils.escapeHtml(
+            str,
+        )}</code></pre>`;
+    },
+})
+    .disable("image")
+    .use(MarkdownEmoji, { defs: emojiDictionary })
+    .use(MarkdownSpoilers)
+    .use(MarkdownSup)
+    .use(MarkdownSub)
+    .use(MarkdownKatex, {
+        throwOnError: false,
+        maxExpand: 0,
+        maxSize: 10,
+        strict: false,
+        errorColor: "var(--error)",
+    });
+
+// TODO: global.d.ts file for defining globals
+declare global {
+    interface Window {
+        internalHandleURL: (element: HTMLAnchorElement) => void;
     }
+}
 
-    return defaultRender(tokens, idx, options, env, self);
-};
-
-md.renderer.rules.emoji = function(token, idx) {
+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;
@@ -134,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) {
@@ -145,26 +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);
 
-    const useLargeEmojis = disallowBigEmoji ? false : content.replace(RE_TWEMOJI, '').trim().length === 0;
+            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)
+                __html: md.render(newContent),
             }}
             data-large-emojis={useLargeEmojis}
-            onClick={ev => {
-                if (ev.target) {
-                    let element: Element = ev.target as any;
-                    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";
+
+import ConditionalLink from "../../lib/ConditionalLink";
+
+import { connectState } from "../../redux/connector";
+import { LastOpened } from "../../redux/reducers/last_opened";
+
+import { useClient } from "../../context/revoltjs/RevoltClient";
+
+import UserIcon from "../common/user/UserIcon";
+import IconButton from "../ui/IconButton";
+
+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);
+`;
+
+const Button = styled.a<{ active: boolean }>`
+    flex: 1;
+
+    > a,
+    > div,
+    > a > div {
+        width: 100%;
+        height: 100%;
+    }
+
+    > div,
+    > a > div {
+        padding: 0 20px;
+    }
+
+    ${(props) =>
+        props.active &&
+        css`
+            background: var(--hover);
+        `}
+`;
+
+interface Props {
+    lastOpened: LastOpened;
+}
+
+export const BottomNavigation = observer(({ lastOpened }: Props) => {
+    const client = useClient();
+    const user = client.users.get(client.user!._id);
+
+    const history = useHistory();
+    const path = useLocation().pathname;
+
+    const channel_id = lastOpened["home"];
+
+    const friendsActive = path.startsWith("/friends");
+    const settingsActive = path.startsWith("/settings");
+    const homeActive = !(friendsActive || settingsActive);
+
+    return (
+        <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={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 {
+        lastOpened: state.lastOpened,
+    };
+});

src/components/navigation/LeftSidebar.tsx

 import { Route, Switch } from "react-router";
-import SidebarBase from "./SidebarBase";
 
+import SidebarBase from "./SidebarBase";
+import HomeSidebar from "./left/HomeSidebar";
 import ServerListSidebar from "./left/ServerListSidebar";
 import ServerSidebar from "./left/ServerSidebar";
-import HomeSidebar from "./left/HomeSidebar";
 
 export default function LeftSidebar() {
     return (
@@ -29,4 +29,4 @@ export default function LeftSidebar() {
             </Switch>
         </SidebarBase>
     );
-};
+}

src/components/navigation/RightSidebar.tsx

 import { Route, Switch } from "react-router";
-import SidebarBase from "./SidebarBase";
 
-// import { MemberSidebar } from "./right/MemberSidebar";
+import SidebarBase from "./SidebarBase";
+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

-import styled from "styled-components";
+import styled, { css } from "styled-components";
+
+import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
 export default styled.div`
     height: 100%;
@@ -7,3 +9,30 @@ export default styled.div`
     flex-direction: row;
     align-items: stretch;
 `;
+
+export const GenericSidebarBase = styled.div<{ padding?: boolean }>`
+    height: 100%;
+    width: 240px;
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    background: var(--secondary-background);
+    border-end-start-radius: 8px;
+
+    ${(props) =>
+        props.padding &&
+        isTouchscreenDevice &&
+        css`
+            padding-bottom: 50px;
+        `}
+`;
+
+export const GenericSidebarList = styled.div`
+    padding: 6px;
+    flex-grow: 1;
+    overflow-y: scroll;
+
+    > img {
+        width: 100%;
+    }
+`;

src/components/navigation/items/ButtonItem.tsx

-import classNames from 'classnames';
+import { X, Crown } from "@styled-icons/boxicons-regular";
+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 Tooltip from '../../common/Tooltip';
-import IconButton from '../../ui/IconButton';
-import UserIcon from '../../common/UserIcon';
+import classNames from "classnames";
+import { attachContextMenu } from "preact-context-menu";
 import { Localizer, Text } from "preact-i18n";
-import { X, Zap } from "@styled-icons/feather";
-import UserStatus from '../../common/UserStatus';
-import { Children } from "../../../types/Preact";
-import ChannelIcon from '../../common/ChannelIcon';
-import { attachContextMenu } from 'preact-context-menu';
-import { Channels, Users } from "revolt.js/dist/api/objects";
+
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
-import { useIntermediate } from '../../../context/intermediate/Intermediate';
+import { stopPropagation } from "../../../lib/stopPropagation";
 
-interface CommonProps {
-    active?: boolean
-    alert?: 'unread' | 'mention'
-    alertCount?: number
-}
+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";
+
+import { Children } from "../../../types/Preact";
+
+type CommonProps = Omit<
+    JSX.HTMLAttributes<HTMLDivElement>,
+    "children" | "as"
+> & {
+    active?: boolean;
+    alert?: "unread" | "mention";
+    alertCount?: number;
+};
 
 type UserProps = CommonProps & {
-    user: Users.User,
-    context?: Channels.Channel,
-    channel?: Channels.DirectMessageChannel
-}
+    user: User;
+    context?: Channel;
+    channel?: Channel;
+};
 
-export function UserButton({ active, alert, alertCount, user, context, channel }: UserProps) {
+export const UserButton = observer((props: UserProps) => {
+    const { active, alert, alertCount, user, context, channel, ...divProps } =
+        props;
     const { openScreen } = useIntermediate();
 
     return (
         <div
+            {...divProps}
             className={classNames(styles.item, styles.user)}
             data-active={active}
-            data-alert={typeof alert === 'string'}
-            data-online={typeof channel !== 'undefined' || (user.online && user.status?.presence !== Users.Presence.Invisible)}
-            onContextMenu={attachContextMenu('Menu', {
+            data-alert={typeof alert === "string"}
+            data-online={
+                typeof channel !== "undefined" ||
+                (user.online && user.status?.presence !== Presence.Invisible)
+            }
+            onContextMenu={attachContextMenu("Menu", {
                 user: user._id,
                 channel: channel?._id,
                 unread: alert,
-                contextualChannel: context?._id
+                contextualChannel: context?._id,
             })}>
-            <div className={styles.avatar}>
-                <UserIcon target={user} size={32} status />
-            </div>
+            <UserIcon
+                className={styles.avatar}
+                target={user}
+                size={32}
+                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 && alert ? (
+                            (channel.last_message as { short: string }).short
                         ) : (
                             <UserStatus user={user} />
-                        ) }
+                        )}
                     </div>
                 }
             </div>
             <div className={styles.button}>
-                { context?.channel_type === "Group" &&
-                    context.owner === user._id && (
+                {context?.channel_type === "Group" &&
+                    context.owner_id === user._id && (
                         <Localizer>
                             <Tooltip
-                                content={
-                                    <Text id="app.main.groups.owner" />
-                                }
-                            >
-                                <Zap size={20} />
+                                content={<Text id="app.main.groups.owner" />}>
+                                <Crown size={20} />
                             </Tooltip>
                         </Localizer>
+                    )}
+                {alert && (
+                    <div className={styles.alert} data-style={alert}>
+                        {alertCount}
+                    </div>
                 )}
-                {alert && <div className={styles.alert} data-style={alert}>{ alertCount }</div>}
-                { !isTouchscreenDevice && channel &&
+                {!isTouchscreenDevice && channel && (
                     <IconButton
                         className={styles.icon}
-                        onClick={() => openScreen({ id: 'special_prompt', type: 'close_dm', target: channel })}>
+                        onClick={(e) =>
+                            stopPropagation(e) &&
+                            openScreen({
+                                id: "special_prompt",
+                                type: "close_dm",
+                                target: channel,
+                            })
+                        }>
                         <X size={24} />
                     </IconButton>
-                }
+                )}
             </div>
         </div>
-    )
-}
+    );
+});
 
 type ChannelProps = CommonProps & {
-    channel: Channels.Channel,
-    user?: Users.User
-    compact?: boolean
-}
+    channel: Channel & { unread?: string };
+    user?: User;
+    compact?: boolean;
+};
 
-export function ChannelButton({ active, alert, alertCount, channel, user, compact }: ChannelProps) {
-    if (channel.channel_type === 'SavedMessages') throw "Invalid channel type.";
-    if (channel.channel_type === 'DirectMessage') {
-        if (typeof user === 'undefined') throw "No user provided.";
-        return <UserButton {...{ active, alert, channel, user }} />
+export const ChannelButton = observer((props: ChannelProps) => {
+    const { active, alert, alertCount, channel, user, compact, ...divProps } =
+        props;
+
+    if (channel.channel_type === "SavedMessages") throw "Invalid channel type.";
+    if (channel.channel_type === "DirectMessage") {
+        if (typeof user === "undefined") throw "No user provided.";
+        return <UserButton {...{ active, alert, channel, user }} />;
     }
 
     const { openScreen } = useIntermediate();
 
     return (
         <div
+            {...divProps}
             data-active={active}
-            data-alert={typeof alert === 'string'}
+            data-alert={typeof alert === "string"}
+            aria-label={channel.name}
             className={classNames(styles.item, { [styles.compact]: compact })}
-            onContextMenu={attachContextMenu('Menu', { channel: channel._id })}>
-            <div className={styles.avatar}>
-                <ChannelIcon target={channel} size={compact ? 24 : 32} />
-            </div>
+            onContextMenu={attachContextMenu("Menu", {
+                channel: channel._id,
+                unread: typeof channel.unread !== "undefined",
+            })}>
+            <ChannelIcon
+                className={styles.avatar}
+                target={channel}
+                size={compact ? 24 : 32}
+            />
             <div className={styles.name}>
                 <div>{channel.name}</div>
-                { channel.channel_type === 'Group' &&
+                {channel.channel_type === "Group" && (
                     <div className={styles.subText}>
-                        {(channel.last_message && alert) ? (
-                            channel.last_message.short
+                        {channel.last_message && alert ? (
+                            (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>
-                }
+                )}
             </div>
             <div className={styles.button}>
-                {alert && <div className={styles.alert} data-style={alert}>{ alertCount }</div>}
+                {alert && (
+                    <div className={styles.alert} data-style={alert}>
+                        {alertCount}
+                    </div>
+                )}
                 {!isTouchscreenDevice && channel.channel_type === "Group" && (
                     <IconButton
                         className={styles.icon}
-                        onClick={() => openScreen({ id: 'special_prompt', type: 'leave_group', target: channel })}>
+                        onClick={() =>
+                            openScreen({
+                                id: "special_prompt",
+                                type: "leave_group",
+                                target: channel,
+                            })
+                        }>
                         <X size={24} />
                     </IconButton>
                 )}
             </div>
         </div>
-    )
-}
+    );
+});
 
 type ButtonProps = CommonProps & {
-    onClick?: () => void
-    children?: Children
-    className?: string
-    compact?: boolean
-}
+    onClick?: () => void;
+    children?: Children;
+    className?: string;
+    compact?: boolean;
+};
+
+export default function ButtonItem(props: ButtonProps) {
+    const {
+        active,
+        alert,
+        alertCount,
+        onClick,
+        className,
+        children,
+        compact,
+        ...divProps
+    } = props;
 
-export default function ButtonItem({ active, alert, alertCount, onClick, className, children, compact }: ButtonProps) {
     return (
-        <div className={classNames(styles.item, { [styles.compact]: compact, [styles.normal]: !compact }, className)}
+        <div
+            {...divProps}
+            className={classNames(
+                styles.item,
+                { [styles.compact]: compact, [styles.normal]: !compact },
+                className,
+            )}
             onClick={onClick}
             data-active={active}
-            data-alert={typeof alert === 'string'}>
-            <div className={styles.content}>{ children }</div>
-                {alert && <div className={styles.alert} data-style={alert}>{ alertCount }</div>}
+            data-alert={typeof alert === "string"}>
+            <div className={styles.content}>{children}</div>
+            {alert && (
+                <div className={styles.alert} data-style={alert}>
+                    {alertCount}
+                </div>
+            )}
         </div>
-    )
+    );
 }

src/components/navigation/items/ConnectionStatus.tsx

 import { Text } from "preact-i18n";
-import Banner from "../../ui/Banner";
 import { useContext } from "preact/hooks";
-import { ClientStatus, StatusContext } from "../../../context/revoltjs/RevoltClient";
+
+import {
+    ClientStatus,
+    StatusContext,
+} from "../../../context/revoltjs/RevoltClient";
+
+import Banner from "../../ui/Banner";
 
 export default function ConnectionStatus() {
     const status = useContext(StatusContext);

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

 .item {
-    height: 48px;
+    height: 42px;
     display: flex;
     padding: 0 8px;
     user-select: none;
-    border-radius: 6px;
     margin-bottom: 2px;
+    border-radius: var(--border-radius);
 
     gap: 8px;
     align-items: center;
@@ -15,20 +15,19 @@
     transition: .1s ease-in-out background-color;
 
     color: var(--tertiary-foreground);
-    stroke: var(--tertiary-foreground);
 
     &.normal {
-        height: 38px;
+        height: 42px;
     }
 
-    &.compact {
+    &.compact { /* TOFIX: Introduce two separate compact items, one for settings, other for channels. */
         height: 32px;
     }
 
     &.user {
         opacity: 0.4;
         cursor: pointer;
-        transition: .15s ease opacity;
+        transition: .1s ease-in-out opacity;
 
         &[data-online="true"],
         &:hover {
@@ -47,7 +46,7 @@
         transition: color .1s ease-in-out;
 
         &.content {
-            gap: 8px;
+            gap: 10px;
             flex-grow: 1;
             min-width: 0;
             display: flex;
@@ -66,6 +65,7 @@
         }
 
         &.avatar {
+            display: flex;
             flex-shrink: 0;
         }
 
@@ -117,7 +117,6 @@
 
     &[data-alert="true"], &[data-active="true"], &:hover {
         color: var(--foreground);
-        stroke: var(--foreground);
 
         .subText {
             color: var(--secondary-foreground) !important;
@@ -146,158 +145,21 @@
     }
 }
 
-/* ! FIXME: check if anything is missing, then remove this block
-.olditem {
-    display: flex;
-    user-select: none;
-    align-items: center;
-    flex-direction: row;
-
-    gap: 8px;
-    height: 48px;
-    padding: 0 8px;
-    cursor: pointer;
-    font-size: 16px;
-    border-radius: 6px;
-    box-sizing: content-box;
-    transition: .1s ease background-color;
-
-    color: var(--tertiary-foreground);
-    stroke: var(--tertiary-foreground);
-
-    .avatar {
-        flex-shrink: 0;
-        height: 32px;
-        flex-shrink: 0;
-        padding: 10px 0;
-        box-sizing: content-box;
-
-        img {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-        }
-    }
-
-    div {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        transition: color .1s ease-in-out;
-
-        &.content {
-            gap: 8px;
-            flex-grow: 1;
-            min-width: 0;
-            display: flex;
-            align-items: center;
-            flex-direction: row;
-
-            svg {
-                flex-shrink: 0;
-            }
-
-            span {
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
-        }
-
-        &.name {
-            flex-grow: 1;
-            display: flex;
-            flex-direction: column;
-            font-size: .90625rem;
-            font-weight: 600;
-
-            .subText {
-                font-size: .6875rem;
-                margin-top: -1px;
-                color: var(--tertiary-foreground);
-                font-weight: 500;
-            }
-        }
+@media (pointer: coarse) {
+    .item {
+        height: 40px;
 
-        &.unread {
-            width: 6px;
-            height: 6px;
-            margin: 9px;
-            flex-shrink: 0;
-            border-radius: 50%;
-            background: var(--foreground);
-        }
+        &.compact {
+            height: var(--bottom-navigation-height);
 
-        &.button {
-            flex-shrink: 0;
+            > div {
+                gap: 20px;
 
-            .icon {
-                opacity: 0;
-                display: none;
-                transition: 0.1s ease opacity;
+                > svg {
+                    height: 24px;
+                    width: 24px;
+                }
             }
         }
     }
-
-    &[data-active="true"] {
+  }
\ No newline at end of file
-        color: var(--foreground);
-        stroke: var(--foreground);
-        background: var(--hover);
-        cursor: default;
-
-        .subText {
-            color: var(--secondary-foreground) !important;
-        }
-
-        .unread {
-            display: none;
-        }
-    }
-
-    &[data-alert="true"] {
-        color: var(--secondary-foreground);
-    }
-
-    &[data-type="user"] {
-        opacity: 0.4;
-        color: var(--foreground);
-        transition: 0.15s ease opacity;
-        cursor: pointer;
-
-        &[data-online="true"],
-        &:hover {
-            opacity: 1;
-            //background: none;
-        }
-    }
-
-    &[data-size="compact"] {
-        margin-bottom: 2px;
-        height: 32px;
-        transition: border-inline-start .1s ease-in-out;
-        border-inline-start: 4px solid transparent;
-
-        &[data-active="true"] {
-            border-inline-start: 4px solid var(--accent);
-            border-radius: 4px;
-        }
-    }
-
-    &[data-size="small"] {
-        margin-bottom: 2px;
-        height: 42px;
-    }
-
-    &:hover {
-        background: var(--hover);
-
-        div.button .unread {
-            display: none;
-        }
-
-        div.button .icon {
-            opacity: 1;
-            display: block;
-        }
-    }
-}*/

src/components/navigation/left/HomeSidebar.tsx

-import { Localizer, Text } from "preact-i18n";
-import { useContext } from "preact/hooks";
-import { Home, Users, Tool, Save } from "@styled-icons/feather";
-
+import {
+    Home,
+    UserDetail,
+    Wrench,
+    Notepad,
+} from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
 import { Link, Redirect, useLocation, useParams } from "react-router-dom";
-import { WithDispatcher } from "../../../redux/reducers";
-import { Unreads } from "../../../redux/reducers/unreads";
+import { RelationshipStatus } from "revolt-api/types/Users";
+
+import { Text } from "preact-i18n";
+import { useContext, useEffect } from "preact/hooks";
+
+import ConditionalLink from "../../../lib/ConditionalLink";
+import PaintCounter from "../../../lib/PaintCounter";
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+
+import { dispatch } from "../../../redux";
 import { connectState } from "../../../redux/connector";
+import { Unreads } from "../../../redux/reducers/unreads";
+
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
-import { useChannels, useDMs, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
-import { Users as UsersNS } from 'revolt.js/dist/api/objects';
+
+import Category from "../../ui/Category";
+import placeholderSVG from "../items/placeholder.svg";
 import { mapChannelWithUnread, useUnreads } from "./common";
-import { Channels } from "revolt.js/dist/api/objects";
-import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
-import ConnectionStatus from '../items/ConnectionStatus';
-import ButtonItem, { ChannelButton } from '../items/ButtonItem';
-import styled from "styled-components";
-import UserHeader from "../../common/UserHeader";
-import Category from '../../ui/Category';
-import PaintCounter from "../../../lib/PaintCounter";
-import { useIntermediate } from "../../../context/intermediate/Intermediate";
 
-type Props = WithDispatcher & {
+import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
+import ButtonItem, { ChannelButton } from "../items/ButtonItem";
+import ConnectionStatus from "../items/ConnectionStatus";
+
+type Props = {
     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 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 });
 
-    const channelsArr = channels
-        .filter(x => x.channel_type !== 'SavedMessages')
-        .map(x => mapChannelWithUnread(x, props.unreads));
+    useEffect(() => {
+        if (!channel) return;
 
-    const users = useUsers(
-        (channelsArr as (Channels.DirectMessageChannel | Channels.GroupChannel)[])
-            .reduce((prev: any, cur) => [ ...prev, ...cur.recipients ], [])
-    , ctx);
+        dispatch({
+            type: "LAST_OPENED_SET",
+            parent: "home",
+            child: channel,
+        });
+    }, [channel]);
 
-    channelsArr.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
+    channels.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
 
     return (
-        <HomeBase>
-            <UserHeader user={client.user!} />
+        <GenericSidebarBase padding>
             <ConnectionStatus />
-            <HomeList>
+            <GenericSidebarList>
+                <ConditionalLink active={pathname === "/"} to="/">
+                    <ButtonItem active={pathname === "/"}>
+                        <Home size={20} />
+                        <span>
+                            <Text id="app.navigation.tabs.home" />
+                        </span>
+                    </ButtonItem>
+                </ConditionalLink>
                 {!isTouchscreenDevice && (
                     <>
-                        <Link to="/">
-                            <ButtonItem active={pathname === "/"}>
-                                <Home size={20} />
-                                <span><Text id="app.navigation.tabs.home" /></span>
-                            </ButtonItem>
-                        </Link>
-                        <Link to="/friends">
+                        <ConditionalLink
+                            active={pathname === "/friends"}
+                            to="/friends">
                             <ButtonItem
                                 active={pathname === "/friends"}
                                 alert={
-                                    typeof users.find(
-                                        user =>
+                                    typeof [...client.users.values()].find(
+                                        (user) =>
                                             user?.relationship ===
-                                            UsersNS.Relationship.Incoming
-                                    ) !== "undefined" ? 'unread' : undefined
-                                }
-                            >
-                                <Users size={20} />
-                                <span><Text id="app.navigation.tabs.friends" /></span>
+                                            RelationshipStatus.Incoming,
+                                    ) !== "undefined"
+                                        ? "unread"
+                                        : undefined
+                                }>
+                                <UserDetail size={20} />
+                                <span>
+                                    <Text id="app.navigation.tabs.friends" />
+                                </span>
                             </ButtonItem>
-                        </Link>
+                        </ConditionalLink>
                     </>
                 )}
-                <Link to="/open/saved">
+                <ConditionalLink
+                    active={obj?.channel_type === "SavedMessages"}
+                    to="/open/saved">
                     <ButtonItem active={obj?.channel_type === "SavedMessages"}>
-                        <Save size={20} />
-                        <span><Text id="app.navigation.tabs.saved" /></span>
+                        <Notepad size={20} />
+                        <span>
+                            <Text id="app.navigation.tabs.saved" />
+                        </span>
                     </ButtonItem>
-                </Link>
+                </ConditionalLink>
                 {import.meta.env.DEV && (
                     <Link to="/dev">
                         <ButtonItem active={pathname === "/dev"}>
-                            <Tool size={20} />
-                            <span><Text id="app.navigation.tabs.dev" /></span>
+                            <Wrench size={20} />
+                            <span>
+                                <Text id="app.navigation.tabs.dev" />
+                            </span>
                         </ButtonItem>
                     </Link>
                 )}
-                <Localizer>
-                    <Category
-                        text={
-                            (
-                                <Text id="app.main.categories.conversations" />
-                            ) as any
-                        }
-                        action={() => openScreen({ id: "special_input", type: "create_group" })}
-                    />
-                </Localizer>
-                {channelsArr.length === 0 && <img src="/assets/images/placeholder.svg" />}
-                {channelsArr.map(x => {
+                <Category
+                    text={<Text id="app.main.categories.conversations" />}
+                    action={() =>
+                        openScreen({
+                            id: "special_input",
+                            type: "create_group",
+                        })
+                    }
+                />
+                {channels.length === 0 && (
+                    <img src={placeholderSVG} loading="eager" />
+                )}
+                {channels.map((x) => {
                     let user;
-                    if (x.channel_type === 'DirectMessage') {
-                        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.channel._id} because user was missing.`,
+                            );
+                            return null;
+                        }
                     }
-                    
+
                     return (
-                        <Link to={`/channel/${x._id}`}>
+                        <ConditionalLink
+                            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}
                             />
-                        </Link>
+                        </ConditionalLink>
                     );
                 })}
                 <PaintCounter />
-            </HomeList>
-        </HomeBase>
+            </GenericSidebarList>
+        </GenericSidebarBase>
     );
-};
+});
 
 export default connectState(
     HomeSidebar,
-    state => {
+    (state) => {
         return {
-            unreads: state.unreads
+            unreads: state.unreads,
         };
     },
     true,
-    true
 );

src/components/navigation/left/ServerListSidebar.tsx

-import LineDivider from "../../ui/LineDivider";
-import { mapChannelWithUnread } from "./common";
+import { Plus } from "@styled-icons/boxicons-regular";
+import { observer } from "mobx-react-lite";
+import { useHistory, useLocation, useParams } from "react-router-dom";
+import { RelationshipStatus } from "revolt-api/types/Users";
 import styled, { css } from "styled-components";
-import ServerIcon from "../../common/ServerIcon";
-import { Children } from "../../../types/Preact";
+
+import { attachContextMenu } from "preact-context-menu";
+
+import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
-import { attachContextMenu } from 'preact-context-menu';
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+
 import { connectState } from "../../../redux/connector";
+import { LastOpened } from "../../../redux/reducers/last_opened";
 import { Unreads } from "../../../redux/reducers/unreads";
-import { Channel, Servers } from "revolt.js/dist/api/objects";
-import { Link, useLocation, useParams } from "react-router-dom";
-import { useChannels, useForceUpdate, useServers } from "../../../context/revoltjs/hooks";
 
-import logoSVG from '../../../assets/logo.svg';
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { useClient } from "../../../context/revoltjs/RevoltClient";
 
-function Icon({ children, unread, size }: { children: Children, unread?: 'mention' | 'unread', size: number }) {
+import ServerIcon from "../../common/ServerIcon";
+import Tooltip from "../../common/Tooltip";
+import UserHover from "../../common/user/UserHover";
+import UserIcon from "../../common/user/UserIcon";
+import IconButton from "../../ui/IconButton";
+import LineDivider from "../../ui/LineDivider";
+import { mapChannelWithUnread } from "./common";
+
+import { Children } from "../../../types/Preact";
+
+function Icon({
+    children,
+    unread,
+    size,
+}: {
+    children: Children;
+    unread?: "mention" | "unread";
+    size: number;
+}) {
     return (
-        <svg
-            width={size}
-            height={size}
-            aria-hidden="true"
-            viewBox="0 0 32 32"
-        >
-            <foreignObject x="0" y="0" width="32" height="32">
-                { children }
+        <svg width={size} height={size} aria-hidden="true" viewBox="0 0 32 32">
+            <use href="#serverIndicator" />
+            <foreignObject
+                x="0"
+                y="0"
+                width="32"
+                height="32"
+                mask={unread ? "url(#server)" : undefined}>
+                {children}
             </foreignObject>
-            {unread === 'unread' && (
-                <circle
-                    cx="27"
-                    cy="27"
-                    r="5"
-                    fill={"white"}
-                />
+            {unread === "unread" && (
+                <circle cx="27" cy="5" r="5" fill={"white"} />
             )}
-            {unread === 'mention' && (
-                <circle
-                    cx="27"
-                    cy="27"
-                    r="5"
-                    fill={"red"}
-                />
+            {unread === "mention" && (
+                <circle cx="27" cy="5" r="5" fill={"var(--error)"} />
             )}
         </svg>
-    )
+    );
 }
 
 const ServersBase = styled.div`
-    width: 52px;
+    width: 56px;
     height: 100%;
+    padding-left: 2px;
     display: flex;
     flex-direction: column;
+
+    ${isTouchscreenDevice &&
+    css`
+        padding-bottom: 50px;
+    `}
 `;
 
 const ServerList = styled.div`
     flex-grow: 1;
     display: flex;
     overflow-y: scroll;
-    padding-bottom: 48px;
+    padding-bottom: 20px;
+    /*width: 58px;*/
     flex-direction: column;
-    border-inline-end: 2px solid var(--sidebar-active);
 
     scrollbar-width: none;
 
@@ -68,149 +87,250 @@ const ServerList = styled.div`
     &::-webkit-scrollbar {
         width: 0px;
     }
+
+    /*${isTouchscreenDevice &&
+    css`
+        width: 58px;
+    `}*/
 `;
 
-const ServerEntry = styled.div<{ active: boolean, invert?: boolean }>`
-    height: 44px;
-    padding: 4px;
-    margin: 2px 0 2px 4px;
+const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
+    height: 58px;
+    display: flex;
+    align-items: center;
+
+    :focus {
+        outline: 3px solid blue;
+    }
+
+    > div {
+        height: 42px;
+        padding-inline-start: 6px;
 
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
+        display: grid;
+        place-items: center;
 
-    img {
-        width: 32px;
-        height: 32px;
+        border-start-start-radius: 50%;
+        border-end-start-radius: 50%;
+
+        &:active {
+            transform: translateY(1px);
+        }
+
+        ${(props) =>
+            props.active &&
+            css`
+                &:active {
+                    transform: none;
+                }
+            `}
     }
 
-    ${ props => props.active && css`
-        background: var(--sidebar-active);
-    ` }
+    > span {
+        width: 0;
+        display: relative;
+
+        ${(props) =>
+            !props.active &&
+            css`
+                display: none;
+            `}
 
-    ${ props => props.active && props.invert && css`
-        img {
-            filter: saturate(0) brightness(10);
+        svg {
+            margin-top: 5px;
+            pointer-events: none;
+            // outline: 1px solid red;
         }
-    ` }
+    }
+
+    ${(props) =>
+        (!props.active || props.home) &&
+        css`
+            cursor: pointer;
+        `}
 `;
 
+function Swoosh() {
+    return (
+        <span>
+            <svg
+                width="54"
+                height="106"
+                viewBox="0 0 54 106"
+                xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M54 53C54 67.9117 41.9117 80 27 80C12.0883 80 0 67.9117 0 53C0 38.0883 12.0883 26 27 26C41.9117 26 54 38.0883 54 53Z"
+                    fill="var(--sidebar-active)"
+                />
+                <path
+                    d="M27 80C4.5 80 54 53 54 53L54.0001 106C54.0001 106 49.5 80 27 80Z"
+                    fill="var(--sidebar-active)"
+                />
+                <path
+                    d="M27 26C4.5 26 54 53 54 53L53.9999 0C53.9999 0 49.5 26 27 26Z"
+                    fill="var(--sidebar-active)"
+                />
+            </svg>
+        </span>
+    );
+}
+
 interface Props {
     unreads: Unreads;
+    lastOpened: LastOpened;
 }
 
-export function ServerListSidebar({ unreads }: Props) {
-    const ctx = useForceUpdate();
-    const activeServers = useServers(undefined, ctx) as Servers.Server[];
-    const channels = (useChannels(undefined, ctx) as Channel[])
-        .map(x => mapChannelWithUnread(x, unreads));
-    
-    const unreadChannels = channels.filter(x => x.unread)
-        .map(x => x._id);
+export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
+    const client = useClient();
 
-    const servers = activeServers.map(server => {
+    const { server: server_id } = useParams<{ server?: string }>();
+    const server = server_id ? client.servers.get(server_id) : undefined;
+    const activeServers = [...client.servers.values()];
+    const channels = [...client.channels.values()].map((x) =>
+        mapChannelWithUnread(x, unreads),
+    );
+
+    const unreadChannels = channels
+        .filter((x) => x.unread)
+        .map((x) => x.channel?._id);
+
+    const servers = activeServers.map((server) => {
         let alertCount = 0;
-        for (let id of server.channels) {
-            let channel = channels.find(x => x._id === id);
+        for (const id of server.channel_ids) {
+            const channel = channels.find((x) => x.channel?._id === id);
             if (channel?.alertCount) {
                 alertCount += channel.alertCount;
             }
         }
 
         return {
-            ...server,
-            unread: (typeof server.channels.find(x => unreadChannels.includes(x)) !== 'undefined' ?
-                ( alertCount > 0 ? 'mention' : 'unread' ) : undefined) as 'mention' | 'unread' | undefined,
-            alertCount
-        }
+            server,
+            unread: (typeof server.channel_ids.find((x) =>
+                unreadChannels.includes(x),
+            ) !== "undefined"
+                ? alertCount > 0
+                    ? "mention"
+                    : "unread"
+                : undefined) as "mention" | "unread" | undefined,
+            alertCount,
+        };
     });
 
+    const history = useHistory();
     const path = useLocation().pathname;
-    const { server: server_id } = useParams<{ server?: string }>();
-    const server = servers.find(x => x!._id == server_id);
+    const { openScreen } = useIntermediate();
 
-    // const { openScreen } = useContext(IntermediateContext);
-
-    let homeUnread: 'mention' | 'unread' | undefined;
+    let homeUnread: "mention" | "unread" | undefined;
     let alertCount = 0;
-    for (let x of channels) {
-        if (((x.channel_type === 'DirectMessage' && x.active) || x.channel_type === 'Group') && x.unread) {
-            homeUnread = 'unread';
+    for (const x of channels) {
+        if (
+            (x.channel?.channel_type === "DirectMessage"
+                ? x.channel?.active
+                : x.channel?.channel_type === "Group") &&
+            x.unread
+        ) {
+            homeUnread = "unread";
             alertCount += x.alertCount ?? 0;
         }
     }
 
-    if (alertCount > 0) homeUnread = 'mention';
+    if (
+        [...client.users.values()].find(
+            (x) => x.relationship === RelationshipStatus.Incoming,
+        )
+    ) {
+        alertCount++;
+    }
+
+    if (alertCount > 0) homeUnread = "mention";
+    const homeActive =
+        typeof server === "undefined" && !path.startsWith("/invite");
 
     return (
         <ServersBase>
             <ServerList>
-                <Link to={`/`}>
-                    <ServerEntry invert
-                        active={typeof server === 'undefined' && !path.startsWith('/invite')}>
-                        <Icon size={36} unread={homeUnread}>
-                            <img src={logoSVG} />
-                        </Icon>
+                <ConditionalLink
+                    active={homeActive}
+                    to={lastOpened.home ? `/channel/${lastOpened.home}` : "/"}>
+                    <ServerEntry home active={homeActive}>
+                        <Swoosh />
+                        <div
+                            onContextMenu={attachContextMenu("Status")}
+                            onClick={() =>
+                                homeActive && history.push("/settings")
+                            }>
+                            <UserHover user={client.user}>
+                                <Icon size={42} unread={homeUnread}>
+                                    <UserIcon
+                                        target={client.user}
+                                        size={32}
+                                        status
+                                        hover
+                                    />
+                                </Icon>
+                            </UserHover>
+                        </div>
                     </ServerEntry>
-                </Link>
+                </ConditionalLink>
                 <LineDivider />
-                {
-                    servers.map(entry =>
-                        <Link to={`/server/${entry!._id}`}>
+                {servers.map((entry) => {
+                    const active = entry.server._id === server?._id;
+                    const id = lastOpened[entry.server._id];
+
+                    return (
+                        <ConditionalLink
+                            key={entry.server._id}
+                            active={active}
+                            to={`/server/${entry.server._id}${
+                                id ? `/channel/${id}` : ""
+                            }`}>
                             <ServerEntry
-                                active={entry!._id === server?._id}
-                                onContextMenu={attachContextMenu('Menu', { server: entry!._id })}>
-                                <Icon size={36} unread={entry.unread}>
-                                    <ServerIcon size={32} target={entry} />
-                                </Icon>
+                                active={active}
+                                onContextMenu={attachContextMenu("Menu", {
+                                    server: entry.server._id,
+                                })}>
+                                <Swoosh />
+                                <Tooltip
+                                    content={entry.server.name}
+                                    placement="right">
+                                    <Icon size={42} unread={entry.unread}>
+                                        <ServerIcon
+                                            size={32}
+                                            target={entry.server}
+                                        />
+                                    </Icon>
+                                </Tooltip>
                             </ServerEntry>
-                        </Link>
-                    )
-                }
+                        </ConditionalLink>
+                    );
+                })}
+                <IconButton
+                    onClick={() =>
+                        openScreen({
+                            id: "special_input",
+                            type: "create_server",
+                        })
+                    }>
+                    <Plus size={36} />
+                </IconButton>
+                {/*<IconButton
+                    onClick={() =>
+                        openScreen({
+                            id: "special_input",
+                            type: "create_server",
+                        })
+                    }>
+                    <Compass size={36} />
+                </IconButton>*/}
                 <PaintCounter small />
             </ServerList>
         </ServersBase>
-        // ! FIXME: add overlay back
-        /*<div className={styles.servers}>
-            <div className={styles.list}>
-                <Link to={`/`}>
-                    <div className={styles.entry}
-                        data-active={typeof server === 'undefined' && !path.startsWith('/invite')}>
-                        <Icon size={36} unread={homeUnread} alertCount={alertCount}>
-                            <div className={styles.logo} />
-                        </Icon>
-                    </div>
-                </Link>
-                <LineDivider className={styles.divider} />
-                {
-                    servers.map(entry =>
-                        <Link to={`/server/${entry!._id}`}>
-                            <div className={styles.entry}
-                                data-active={entry!._id === server?._id}
-                                onContextMenu={attachContextMenu('Menu', { server: entry!._id })}>
-                                <Icon size={36} unread={entry.unread}>
-                                    <ServerIcon id={entry!._id} size={32} />
-                                </Icon>
-                            </div>
-                        </Link>
-                    )
-                }
-            </div>
-            <div className={styles.overlay}>
-                <div className={styles.actions}>
-                    <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_server' })}>
-                        <PlusCircle size={36} />
-                    </IconButton>
-                </div>
-            </div>
-            </div> */
-    )
-}
+    );
+});
 
-export default connectState(
-    ServerListSidebar,
-    state => {
-        return {
-            unreads: state.unreads
-        };
-    }
-);
+export default connectState(ServerListSidebar, (state) => {
+    return {
+        unreads: state.unreads,
+        lastOpened: state.lastOpened,
+    };
+});

src/components/navigation/left/ServerSidebar.tsx

-import { Link } from "react-router-dom";
-import { Settings } from "@styled-icons/feather";
+import { observer } from "mobx-react-lite";
 import { Redirect, useParams } from "react-router";
-import { ChannelButton } from "../items/ButtonItem";
-import { Channels } from "revolt.js/dist/api/objects";
-import { ServerPermission } from "revolt.js/dist/api/permissions";
+import styled, { css } from "styled-components";
+
+import { attachContextMenu } from "preact-context-menu";
+import { useEffect } from "preact/hooks";
+
+import ConditionalLink from "../../../lib/ConditionalLink";
+import PaintCounter from "../../../lib/PaintCounter";
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+
+import { dispatch } from "../../../redux";
+import { connectState } from "../../../redux/connector";
 import { Unreads } from "../../../redux/reducers/unreads";
-import { WithDispatcher } from "../../../redux/reducers";
-import { useChannels, useForceUpdate, useServer, useServerPermission } from "../../../context/revoltjs/hooks";
+
+import { useClient } from "../../../context/revoltjs/RevoltClient";
+
+import CollapsibleSection from "../../common/CollapsibleSection";
+import ServerHeader from "../../common/ServerHeader";
+import Category from "../../ui/Category";
 import { mapChannelWithUnread, useUnreads } from "./common";
-import Header from '../../ui/Header';
-import ConnectionStatus from '../items/ConnectionStatus';
-import { connectState } from "../../../redux/connector";
-import PaintCounter from "../../../lib/PaintCounter";
-import styled from "styled-components";
-import { attachContextMenu } from 'preact-context-menu';
+
+import { ChannelButton } from "../items/ButtonItem";
+import ConnectionStatus from "../items/ConnectionStatus";
 
 interface Props {
     unreads: Unreads;
@@ -26,6 +34,13 @@ const ServerBase = styled.div`
     flex-shrink: 0;
     flex-direction: column;
     background: var(--secondary-background);
+    border-start-start-radius: 8px;
+    overflow: hidden;
+
+    ${isTouchscreenDevice &&
+    css`
+        padding-bottom: 50px;
+    `}
 `;
 
 const ServerList = styled.div`
@@ -38,60 +53,93 @@ const ServerList = styled.div`
     }
 `;
 
-function ServerSidebar(props: Props & WithDispatcher) {
-    const { server: server_id, channel: channel_id } = useParams<{ server?: string, channel?: string }>();
-    const ctx = useForceUpdate();
+const ServerSidebar = observer((props: Props) => {
+    const client = useClient();
+    const { server: server_id, channel: channel_id } =
+        useParams<{ server: string; channel?: string }>();
 
-    const server = useServer(server_id, ctx);
+    const server = client.servers.get(server_id);
     if (!server) return <Redirect to="/" />;
 
-    const permissions = useServerPermission(server._id, ctx);
-    const channels = (useChannels(server.channels, ctx)
-        .filter(entry => typeof entry !== 'undefined') as Readonly<Channels.TextChannel>[])
-        .map(x => mapChannelWithUnread(x, props.unreads));
-    
-    const channel = channels.find(x => x?._id === channel_id);
-    if (channel) useUnreads({ ...props, channel }, ctx);
+    const channel = channel_id ? client.channels.get(channel_id) : undefined;
+    if (channel_id && !channel) return <Redirect to={`/server/${server_id}`} />;
+    if (channel) useUnreads({ ...props, channel });
+
+    useEffect(() => {
+        if (!channel_id) return;
+
+        dispatch({
+            type: "LAST_OPENED_SET",
+            parent: server_id!,
+            child: channel_id!,
+        });
+    }, [channel_id, server_id]);
+
+    const uncategorised = new Set(server.channel_ids);
+    const elements = [];
+
+    function addChannel(id: string) {
+        const entry = client.channels.get(id);
+        if (!entry) return;
+
+        const active = channel?._id === entry._id;
+
+        return (
+            <ConditionalLink
+                key={entry._id}
+                active={active}
+                to={`/server/${server!._id}/channel/${entry._id}`}>
+                <ChannelButton
+                    channel={entry}
+                    active={active}
+                    // ! FIXME: pull it out directly
+                    alert={mapChannelWithUnread(entry, props.unreads).unread}
+                    compact
+                />
+            </ConditionalLink>
+        );
+    }
+
+    if (server.categories) {
+        for (const category of server.categories) {
+            const channels = [];
+            for (const id of category.channels) {
+                uncategorised.delete(id);
+                channels.push(addChannel(id));
+            }
+
+            elements.push(
+                <CollapsibleSection
+                    id={`category_${category.id}`}
+                    defaultValue
+                    summary={<Category text={category.title} />}>
+                    {channels}
+                </CollapsibleSection>,
+            );
+        }
+    }
+
+    for (const id of Array.from(uncategorised).reverse()) {
+        elements.unshift(addChannel(id));
+    }
 
     return (
         <ServerBase>
-            <Header placement="secondary" background style={{ background: `url('${ctx.client.servers.getBannerURL(server._id, { width: 480 }, true)}')` }}>
-                <div>
-                    { server.name }
-                </div>
-                { (permissions & ServerPermission.ManageServer) > 0 && <div className="actions">
-                    {/*<IconButton to={`/server/${server._id}/settings`}>*/}
-                        <Settings size={24} />
-                    {/*</IconButton>*/}
-                </div> }
-            </Header>
+            <ServerHeader server={server} />
             <ConnectionStatus />
-            <ServerList onContextMenu={attachContextMenu('Menu', { server_list: server._id })}>
-                {channels.map(entry => {
-                    return (
-                        <Link to={`/server/${server._id}/channel/${entry._id}`}>
-                            <ChannelButton
-                                key={entry._id}
-                                channel={entry}
-                                active={channel?._id === entry._id}
-                                alert={entry.unread}
-                                compact
-                            />
-                        </Link>
-                    );
-                })}
+            <ServerList
+                onContextMenu={attachContextMenu("Menu", {
+                    server_list: server._id,
+                })}>
+                {elements}
             </ServerList>
             <PaintCounter small />
         </ServerBase>
-    )
-};
-
-export default connectState(
-    ServerSidebar,
-    state => {
-        return {
-            unreads: state.unreads
-        };
-    },
-    true
-);
+    );
+});
+
+export default connectState(ServerSidebar, (state) => {
+    return {
+        unreads: state.unreads,
+    };
+});

src/components/navigation/left/common.ts

-import { Channel } from "revolt.js";
+import { reaction } from "mobx";
+import { Channel } from "revolt.js/dist/maps/Channels";
+
 import { useLayoutEffect } from "preact/hooks";
-import { WithDispatcher } from "../../../redux/reducers";
+
+import { dispatch } from "../../../redux";
 import { Unreads } from "../../../redux/reducers/unreads";
-import { HookContext, useForceUpdate } from "../../../context/revoltjs/hooks";
 
-type UnreadProps = WithDispatcher & {
+type UnreadProps = {
     channel: Channel;
     unreads: Unreads;
-}
-
-export function useUnreads({ channel, unreads, dispatcher }: UnreadProps, context?: HookContext) {
-    const ctx = useForceUpdate(context);
+};
 
+export function useUnreads({ channel, unreads }: UnreadProps) {
     useLayoutEffect(() => {
-        function checkUnread(target?: Channel) {
+        function checkUnread(target: Channel) {
             if (!target) return;
             if (target._id !== channel._id) return;
-            if (target?.channel_type === "SavedMessages") return;
+            if (
+                target.channel_type === "SavedMessages" ||
+                target.channel_type === "VoiceChannel"
+            )
+                return;
 
             const unread = unreads[channel._id]?.last_id;
             if (target.last_message) {
-                const message = typeof target.last_message === 'string' ? target.last_message : target.last_message._id;
+                const message =
+                    typeof target.last_message === "string"
+                        ? target.last_message
+                        : target.last_message._id;
                 if (!unread || (unread && message.localeCompare(unread) > 0)) {
-                    dispatcher({
+                    dispatch({
                         type: "UNREADS_MARK_READ",
                         channel: channel._id,
                         message,
-                        request: true
                     });
+
+                    channel.ack(message);
                 }
             }
         }
 
         checkUnread(channel);
-
-        ctx.client.channels.addListener("mutation", checkUnread);
-        return () => ctx.client.channels.removeListener("mutation", checkUnread);
+        return reaction(
+            () => channel.last_message,
+            () => checkUnread(channel),
+        );
     }, [channel, unreads]);
 }
 
 export function mapChannelWithUnread(channel: Channel, unreads: Unreads) {
     let last_message_id;
-    if (channel.channel_type === 'DirectMessage' || channel.channel_type === 'Group') {
-        last_message_id = channel.last_message?._id;
-    } else if (channel.channel_type === 'TextChannel') {
-        last_message_id = channel.last_message;
+    if (
+        channel.channel_type === "DirectMessage" ||
+        channel.channel_type === "Group"
+    ) {
+        last_message_id = (channel.last_message as { _id: string })?._id;
+    } else if (channel.channel_type === "TextChannel") {
+        last_message_id = channel.last_message as string;
     } else {
-        return { ...channel, unread: undefined, alertCount: undefined, timestamp: channel._id };
+        return {
+            channel,
+            unread: undefined,
+            alertCount: undefined,
+            timestamp: channel._id,
+        };
     }
 
-    let unread: 'mention' | 'unread' | undefined;
+    let unread: "mention" | "unread" | undefined;
     let alertCount: undefined | number;
     if (last_message_id && unreads) {
         const u = unreads[channel._id];
         if (u) {
             if (u.mentions && u.mentions.length > 0) {
                 alertCount = u.mentions.length;
-                unread = 'mention';
-            } else if (u.last_id && last_message_id.localeCompare(u.last_id) > 0) {
-                unread = 'unread';
+                unread = "mention";
+            } else if (
+                u.last_id &&
+                (last_message_id as string).localeCompare(u.last_id) > 0
+            ) {
+                unread = "unread";
             }
         } else {
-            unread = 'unread';
+            unread = "unread";
         }
     }
 
     return {
-        ...channel,
+        channel,
         timestamp: last_message_id ?? channel._id,
         unread,
-        alertCount
+        alertCount,
     };
 }

src/components/navigation/right/ChannelDebugInfo.tsx

+/* eslint-disable react-hooks/rules-of-hooks */
+import { useRenderState } from "../../../lib/renderer/Singleton";
+
+interface Props {
+    id: string;
+}
+
+export function ChannelDebugInfo({ id }: Props) {
+    if (process.env.NODE_ENV !== "development") return null;
+    const 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

+/* eslint-disable react-hooks/rules-of-hooks */
+import { observer } from "mobx-react-lite";
+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 { Text } from "preact-i18n";
+import { useContext, useEffect, useState } from "preact/hooks";
+
+import { getState } from "../../../redux";
+
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import {
+    ClientStatus,
+    StatusContext,
+    useClient,
+} from "../../../context/revoltjs/RevoltClient";
+
+import CollapsibleSection from "../../common/CollapsibleSection";
+import Button from "../../ui/Button";
+import Category from "../../ui/Category";
+import InputBox from "../../ui/InputBox";
+import Preloader from "../../ui/Preloader";
+import placeholderSVG from "../items/placeholder.svg";
+
+import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
+import { UserButton } from "../items/ButtonItem";
+import { ChannelDebugInfo } from "./ChannelDebugInfo";
+
+export default function MemberSidebar({ channel: obj }: { channel?: Channel }) {
+    const { channel: channel_id } = useParams<{ channel: string }>();
+    const client = useClient();
+    const channel = obj ?? client.channels.get(channel_id);
+
+    switch (channel?.channel_type) {
+        case "Group":
+            return <GroupMemberSidebar channel={channel} />;
+        case "TextChannel":
+            return <ServerMemberSidebar channel={channel} />;
+        default:
+            return null;
+    }
+}
+
+export const GroupMemberSidebar = observer(
+    ({ channel }: { channel: Channel }) => {
+        const { openScreen } = useIntermediate();
+
+        const members = channel.recipients?.filter(
+            (x) => typeof x !== "undefined",
+        );
+
+        /*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
+            const l =
+                +(
+                    (a!.online && a!.status?.presence !== Presence.Invisible) ??
+                    false
+                ) | 0;
+            const r =
+                +(
+                    (b!.online && b!.status?.presence !== Presence.Invisible) ??
+                    false
+                ) | 0;
+
+            const n = r - l;
+            if (n !== 0) {
+                return n;
+            }
+
+            return a!.username.localeCompare(b!.username);
+        });
+
+        return (
+            <GenericSidebarBase>
+                <GenericSidebarList>
+                    <ChannelDebugInfo id={channel._id} />
+                    <Search channel={channel} />
+
+                    {/*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>
+                )*/}
+                    <CollapsibleSection
+                        sticky
+                        id="members"
+                        defaultValue
+                        summary={
+                            <Category
+                                variant="uniform"
+                                text={
+                                    <span>
+                                        <Text id="app.main.categories.members" />{" "}
+                                        — {channel.recipients?.length ?? 0}
+                                    </span>
+                                }
+                            />
+                        }>
+                        {members?.length === 0 && (
+                            <img src={placeholderSVG} loading="eager" />
+                        )}
+                        {members?.map(
+                            (user) =>
+                                user && (
+                                    <UserButton
+                                        key={user._id}
+                                        user={user}
+                                        context={channel!}
+                                        onClick={() =>
+                                            openScreen({
+                                                id: "profile",
+                                                user_id: user._id,
+                                            })
+                                        }
+                                    />
+                                ),
+                        )}
+                    </CollapsibleSection>
+                </GenericSidebarList>
+            </GenericSidebarBase>
+        );
+    },
+);
+
+export const ServerMemberSidebar = observer(
+    ({ channel }: { channel: Channel }) => {
+        const client = useClient();
+        const { openScreen } = useIntermediate();
+        const status = useContext(StatusContext);
+
+        useEffect(() => {
+            if (status === ClientStatus.ONLINE) {
+                channel.server!.fetchMembers();
+            }
+        }, [status, channel.server]);
+
+        const users = [...client.members.keys()]
+            .map((x) => JSON.parse(x))
+            .filter((x) => x.server === channel.server_id)
+            .map((y) => client.users.get(y.user)!)
+            .filter((z) => typeof z !== "undefined");
+
+        // copy paste from above
+        users.sort((a, b) => {
+            // ! FIXME: should probably rewrite all this code
+            const l =
+                +(
+                    (a.online && a.status?.presence !== Presence.Invisible) ??
+                    false
+                ) | 0;
+            const r =
+                +(
+                    (b.online && b.status?.presence !== Presence.Invisible) ??
+                    false
+                ) | 0;
+
+            const n = r - l;
+            if (n !== 0) {
+                return n;
+            }
+
+            return a.username.localeCompare(b.username);
+        });
+
+        return (
+            <GenericSidebarBase>
+                <GenericSidebarList>
+                    <ChannelDebugInfo id={channel._id} />
+                    <Search channel={channel} />
+                    <div>{users.length === 0 && <Preloader type="ring" />}</div>
+                    {users.length > 0 && (
+                        <CollapsibleSection
+                            //sticky //will re-add later, need to fix css
+                            id="members"
+                            defaultValue
+                            summary={
+                                <span>
+                                    <Text id="app.main.categories.members" /> —{" "}
+                                    {users?.length ?? 0}
+                                </span>
+                            }>
+                            {users.map(
+                                (user) =>
+                                    user && (
+                                        <UserButton
+                                            key={user._id}
+                                            user={user}
+                                            context={channel}
+                                            onClick={() =>
+                                                openScreen({
+                                                    id: "profile",
+                                                    user_id: user._id,
+                                                })
+                                            }
+                                        />
+                                    ),
+                            )}
+                        </CollapsibleSection>
+                    )}
+                </GenericSidebarList>
+            </GenericSidebarBase>
+        );
+    },
+);
+
+function Search({ channel }: { channel: Channel }) {
+    if (!getState().experiments.enabled?.includes("search")) return null;
+
+    type Sort = "Relevance" | "Latest" | "Oldest";
+    const [sort, setSort] = useState<Sort>("Relevance");
+
+    const [query, setV] = useState("");
+    const [results, setResults] = useState<Message[]>([]);
+
+    async function search() {
+        const data = await channel.searchWithUsers({ query, sort });
+        setResults(data.messages);
+    }
+
+    return (
+        <CollapsibleSection
+            sticky
+            id="search"
+            defaultValue={false}
+            summary={
+                <>
+                    <Text id="app.main.channel.search.title" /> (BETA)
+                </>
+            }>
+            <div style={{ display: "flex" }}>
+                {["Relevance", "Latest", "Oldest"].map((key) => (
+                    <Button
+                        key={key}
+                        style={{ flex: 1, minWidth: 0 }}
+                        compact
+                        error={sort === key}
+                        onClick={() => setSort(key as Sort)}>
+                        <Text
+                            id={`app.main.channel.search.sort.${key.toLowerCase()}`}
+                        />
+                    </Button>
+                ))}
+            </div>
+            <InputBox
+                style={{ width: "100%" }}
+                onKeyDown={(e) => e.key === "Enter" && search()}
+                value={query}
+                onChange={(e) => setV(e.currentTarget.value)}
+            />
+            <div
+                style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "4px",
+                    marginTop: "8px",
+                }}>
+                {results.map((message) => {
+                    let href = "";
+                    if (channel?.channel_type === "TextChannel") {
+                        href += `/server/${channel.server_id}`;
+                    }
+
+                    href += `/channel/${message.channel_id}/${message._id}`;
+
+                    return (
+                        <Link to={href} key={message._id}>
+                            <div
+                                style={{
+                                    margin: "2px",
+                                    padding: "6px",
+                                    background: "var(--primary-background)",
+                                }}>
+                                <b>@{message.author?.username}</b>
+                                <br />
+                                {message.content}
+                            </div>
+                        </Link>
+                    );
+                })}
+            </div>
+        </CollapsibleSection>
+    );
+}

src/components/ui/Button.tsx

 import styled, { css } from "styled-components";
 
 interface Props {
+    readonly compact?: boolean;
+    readonly accent?: boolean;
     readonly contrast?: boolean;
+    readonly plain?: boolean;
     readonly error?: boolean;
+    readonly gold?: boolean;
+    readonly iconbutton?: boolean;
 }
 
+export type ButtonProps = Props &
+    Omit<JSX.HTMLAttributes<HTMLButtonElement>, "as">;
+
 export default styled.button<Props>`
     z-index: 1;
-    padding: 8px;
-    font-size: 16px;
-    text-align: center;
+    display: flex;
+    height: 38px;
+    min-width: 96px;
+    align-items: center;
+    justify-content: center;
+    padding: 2px 16px;
+    font-size: 0.875rem;
+    font-family: inherit;
+    font-weight: 500;
 
     transition: 0.2s ease opacity;
     transition: 0.2s ease background-color;
@@ -17,7 +31,7 @@ export default styled.button<Props>`
     background: var(--primary-background);
     color: var(--foreground);
 
-    border-radius: 6px;
+    border-radius: var(--border-radius);
     cursor: pointer;
     border: none;
 
@@ -26,6 +40,7 @@ export default styled.button<Props>`
     }
 
     &:disabled {
+        cursor: not-allowed;
         background: var(--primary-background);
     }
 
@@ -33,6 +48,47 @@ export default styled.button<Props>`
         background: var(--secondary-background);
     }
 
+    ${(props) =>
+        props.compact &&
+        css`
+            height: 32px !important;
+            padding: 2px 12px !important;
+            font-size: 13px;
+        `}
+
+    ${(props) =>
+        props.iconbutton &&
+        css`
+            height: 38px !important;
+            width: 38px !important;
+            min-width: unset !important;
+        `}
+
+    ${(props) =>
+        props.accent &&
+        css`
+            background: var(--accent) !important;
+        `}
+
+    ${(props) =>
+        props.plain &&
+        css`
+            background: transparent !important;
+
+            &:hover {
+                text-decoration: underline;
+            }
+
+            &:disabled {
+                cursor: not-allowed;
+                opacity: 0.5;
+            }
+
+            &:active {
+                background: var(--secondary-background);
+            }
+        `}
+
     ${(props) =>
         props.contrast &&
         css`
@@ -44,6 +100,7 @@ export default styled.button<Props>`
             }
 
             &:disabled {
+                cursor: not-allowed;
                 background: var(--secondary-header);
             }
 
@@ -56,14 +113,35 @@ export default styled.button<Props>`
         props.error &&
         css`
             color: white;
+            font-weight: 600;
             background: var(--error);
 
             &:hover {
                 filter: brightness(1.2);
+                background: var(--error);
             }
 
             &:disabled {
+                cursor: not-allowed;
                 background: var(--error);
             }
         `}
+    
+    ${(props) =>
+        props.gold &&
+        css`
+            color: black;
+            font-weight: 600;
+            background: goldenrod;
+
+            &:hover {
+                filter: brightness(1.2);
+                background: goldenrod;
+            }
+
+            &:disabled {
+                cursor: not-allowed;
+                background: goldenrod;
+            }
+        `}
 `;

src/components/ui/Category.tsx

+import { Plus } from "@styled-icons/boxicons-regular";
 import styled, { css } from "styled-components";
+
 import { Children } from "../../types/Preact";
-import { Plus } from "@styled-icons/feather";
 
-const CategoryBase = styled.div<Pick<Props, 'variant'>>`
+const CategoryBase = styled.div<Pick<Props, "variant">>`
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
 
     margin-top: 4px;
-    padding: 6px 10px;
+    padding: 6px 0;
     margin-bottom: 4px;
     white-space: nowrap;
-    
+
     display: flex;
     align-items: center;
     flex-direction: row;
     justify-content: space-between;
 
     svg {
-        stroke: var(--foreground);
         cursor: pointer;
     }
 
-    ${ props => props.variant === 'uniform' && css`
-        padding-top: 6px;
-    ` }
+    &:first-child {
+        margin-top: 0;
+        padding-top: 0;
+    }
+
+    ${(props) =>
+        props.variant === "uniform" &&
+        css`
+            padding-top: 6px;
+        `}
 `;
 
-interface Props {
+type Props = Omit<
+    JSX.HTMLAttributes<HTMLDivElement>,
+    "children" | "as" | "action"
+> & {
     text: Children;
     action?: () => void;
-    variant?: 'default' | 'uniform';
-}
+    variant?: "default" | "uniform";
+};
 
 export default function Category(props: Props) {
+    const { text, action, ...otherProps } = props;
+
     return (
-        <CategoryBase>
-            {props.text}
-            {props.action && (
-                <Plus size={16} onClick={props.action} />
-            )}
+        <CategoryBase {...otherProps}>
+            {text}
+            {action && <Plus size={16} onClick={action} />}
         </CategoryBase>
     );
-};
+}