src/components/common/messaging/bars/FilePreview.tsx

+/* eslint-disable react-hooks/rules-of-hooks */
+import { XCircle, Plus, Share, X, File } from "@styled-icons/boxicons-regular";
+import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+import { useEffect, useState } from "preact/hooks";
+
+import { determineFileSize } from "../../../../lib/fileSize";
+
+import { CAN_UPLOAD_AT_ONCE, UploadState } from "../MessageBox";
+
+interface Props {
+    state: UploadState;
+    addFile: () => void;
+    removeFile: (index: number) => void;
+}
+
+const Container = styled.div`
+    gap: 4px;
+    padding: 8px;
+    display: flex;
+    user-select: none;
+    flex-direction: column;
+    background: var(--message-box);
+`;
+
+const Carousel = styled.div`
+    gap: 8px;
+    display: flex;
+    overflow-x: scroll;
+    flex-direction: row;
+`;
+
+const Entry = styled.div`
+    display: flex;
+    flex-direction: column;
+
+    &.fade {
+        opacity: 0.4;
+    }
+
+    span.fn {
+        margin: auto;
+        font-size: 0.8em;
+        overflow: hidden;
+        max-width: 180px;
+        text-align: center;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        color: var(--secondary-foreground);
+    }
+
+    span.size {
+        font-size: 0.6em;
+        color: var(--tertiary-foreground);
+        text-align: center;
+    }
+`;
+
+const Description = styled.div`
+    gap: 4px;
+    display: flex;
+    font-size: 0.9em;
+    align-items: center;
+    color: var(--secondary-foreground);
+`;
+
+const Divider = styled.div`
+    width: 4px;
+    height: 130px;
+    flex-shrink: 0;
+    border-radius: var(--border-radius);
+    background: var(--tertiary-background);
+`;
+
+const EmptyEntry = styled.div`
+    width: 100px;
+    height: 100px;
+    display: grid;
+    flex-shrink: 0;
+    cursor: pointer;
+    place-items: center;
+    border-radius: var(--border-radius);
+    background: var(--primary-background);
+    transition: 0.1s ease background-color;
+
+    &:hover {
+        background: var(--secondary-background);
+    }
+`;
+
+const PreviewBox = styled.div`
+    display: grid;
+    grid-template: "main" 100px / minmax(100px, 1fr);
+    justify-items: center;
+
+    cursor: pointer;
+    overflow: hidden;
+    border-radius: var(--border-radius);
+    background: var(--primary-background);
+
+    .icon,
+    .overlay {
+        grid-area: main;
+    }
+
+    .icon {
+        height: 100px;
+        margin-bottom: 4px;
+        object-fit: contain;
+    }
+
+    .overlay {
+        display: grid;
+        align-items: center;
+        justify-content: center;
+
+        width: 100%;
+        height: 100%;
+
+        opacity: 0;
+        visibility: hidden;
+
+        transition: 0.1s ease opacity;
+    }
+
+    &:hover {
+        .overlay {
+            visibility: visible;
+            opacity: 1;
+            background-color: rgba(0, 0, 0, 0.8);
+        }
+    }
+`;
+
+function FileEntry({
+    file,
+    remove,
+    index,
+}: {
+    file: File;
+    remove?: () => void;
+    index: number;
+}) {
+    if (!file.type.startsWith("image/"))
+        return (
+            <Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}>
+                <PreviewBox onClick={remove}>
+                    <EmptyEntry className="icon">
+                        <File size={36} />
+                    </EmptyEntry>
+                    <div class="overlay">
+                        <XCircle size={36} />
+                    </div>
+                </PreviewBox>
+                <span class="fn">{file.name}</span>
+                <span class="size">{determineFileSize(file.size)}</span>
+            </Entry>
+        );
+
+    const [url, setURL] = useState("");
+
+    useEffect(() => {
+        const url: string = URL.createObjectURL(file);
+        setURL(url);
+        return () => URL.revokeObjectURL(url);
+    }, [file]);
+
+    return (
+        <Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}>
+            <PreviewBox onClick={remove}>
+                <img class="icon" src={url} alt={file.name} loading="eager" />
+                <div class="overlay">
+                    <XCircle size={36} />
+                </div>
+            </PreviewBox>
+            <span class="fn">{file.name}</span>
+            <span class="size">{determineFileSize(file.size)}</span>
+        </Entry>
+    );
+}
+
+export default function FilePreview({ state, addFile, removeFile }: Props) {
+    if (state.type === "none") return null;
+
+    return (
+        <Container>
+            <Carousel>
+                {state.files.map((file, index) => (
+                    // @ts-expect-error brokey
+                    // eslint-disable-next-line react/jsx-no-undef
+                    <Fragment key={file.name}>
+                        {index === CAN_UPLOAD_AT_ONCE && <Divider />}
+                        <FileEntry
+                            index={index}
+                            file={file}
+                            key={file.name}
+                            remove={
+                                state.type === "attached"
+                                    ? () => removeFile(index)
+                                    : undefined
+                            }
+                        />
+                    </Fragment>
+                ))}
+                {state.type === "attached" && (
+                    <EmptyEntry onClick={addFile}>
+                        <Plus size={48} />
+                    </EmptyEntry>
+                )}
+            </Carousel>
+            {state.type === "uploading" && (
+                <Description>
+                    <Share size={24} />
+                    <Text id="app.main.channel.uploading_file" /> (
+                    {state.percent}%)
+                </Description>
+            )}
+            {state.type === "sending" && (
+                <Description>
+                    <Share size={24} />
+                    Sending...
+                </Description>
+            )}
+            {state.type === "failed" && (
+                <Description>
+                    <X size={24} />
+                    <Text id={`error.${state.error}`} />
+                </Description>
+            )}
+        </Container>
+    );
+}

src/components/common/messaging/bars/JumpToBottom.tsx

+import { DownArrowAlt } from "@styled-icons/boxicons-regular";
+import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+
+import {
+    SingletonMessageRenderer,
+    useRenderState,
+} from "../../../../lib/renderer/Singleton";
+
+const Bar = styled.div`
+    z-index: 10;
+    position: relative;
+
+    > div {
+        top: -26px;
+        height: 28px;
+        width: 100%;
+        position: absolute;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        font-size: 13px;
+        padding: 0 8px;
+        user-select: none;
+        justify-content: space-between;
+        color: var(--secondary-foreground);
+        transition: color ease-in-out 0.08s;
+        background: var(--secondary-background);
+        border-radius: var(--border-radius) var(--border-radius) 0 0;
+
+        > div {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        &:hover {
+            color: var(--primary-text);
+        }
+
+        &:active {
+            transform: translateY(1px);
+        }
+
+        @media (pointer: coarse) {
+            height: 34px;
+            top: -32px;
+            padding: 0 12px;
+        }
+    }
+`;
+
+export default function JumpToBottom({ id }: { id: string }) {
+    const view = useRenderState(id);
+    if (!view || view.type !== "RENDER" || view.atBottom) return null;
+
+    return (
+        <Bar>
+            <div
+                onClick={() => SingletonMessageRenderer.jumpToBottom(id, true)}>
+                <div>
+                    <Text id="app.main.channel.misc.viewing_old" />
+                </div>
+                <div>
+                    <Text id="app.main.channel.misc.jump_present" />{" "}
+                    <DownArrowAlt size={20} />
+                </div>
+            </div>
+        </Bar>
+    );
+}

src/components/common/messaging/bars/ReplyBar.tsx

+import { At, Reply as ReplyIcon } from "@styled-icons/boxicons-regular";
+import { File, XCircle } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
+import { SYSTEM_USER_ID } from "revolt.js";
+import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+import { StateUpdater, useEffect } from "preact/hooks";
+
+import { internalSubscribe } from "../../../../lib/eventEmitter";
+import { useRenderState } from "../../../../lib/renderer/Singleton";
+
+import { Reply } from "../../../../redux/reducers/queue";
+
+import IconButton from "../../../ui/IconButton";
+
+import Markdown from "../../../markdown/Markdown";
+import UserShort from "../../user/UserShort";
+import { SystemMessage } from "../SystemMessage";
+import { ReplyBase } from "../attachments/MessageReply";
+
+interface Props {
+    channel: string;
+    replies: Reply[];
+    setReplies: StateUpdater<Reply[]>;
+}
+
+const Base = styled.div`
+    display: flex;
+    height: 30px;
+    padding: 0 12px;
+    user-select: none;
+    align-items: center;
+    background: var(--message-box);
+
+    > div {
+        flex-grow: 1;
+        margin-bottom: 0;
+
+        &::before {
+            display: none;
+        }
+    }
+
+    .toggle {
+        gap: 4px;
+        display: flex;
+        font-size: 12px;
+        align-items: center;
+        font-weight: 600;
+    }
+
+    .username {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-weight: 600;
+    }
+
+    .message {
+        display: flex;
+    }
+
+    .actions {
+        gap: 12px;
+        display: flex;
+    }
+
+    /*@media (pointer: coarse) { //FIXME: Make action buttons bigger on pointer coarse
+        .actions > svg {
+            height: 25px;
+        }
+    }*/
+`;
+
+// ! FIXME: Move to global config
+const MAX_REPLIES = 5;
+export default observer(({ channel, replies, setReplies }: Props) => {
+    useEffect(() => {
+        return internalSubscribe(
+            "ReplyBar",
+            "add",
+            (id) =>
+                replies.length < MAX_REPLIES &&
+                !replies.find((x) => x.id === id) &&
+                setReplies([...replies, { id: id as string, mention: false }]),
+        );
+    }, [replies, setReplies]);
+
+    const view = useRenderState(channel);
+    if (view?.type !== "RENDER") return null;
+
+    const ids = replies.map((x) => x.id);
+    const messages = view.messages.filter((x) => ids.includes(x._id));
+
+    return (
+        <div>
+            {replies.map((reply, index) => {
+                const message = messages.find((x) => reply.id === x._id);
+                // ! FIXME: better solution would be to
+                // ! have a hook for resolving messages from
+                // ! render state along with relevant users
+                // -> which then fetches any unknown messages
+                if (!message)
+                    return (
+                        <span>
+                            <Text id="app.main.channel.misc.failed_load" />
+                        </span>
+                    );
+
+                return (
+                    <Base key={reply.id}>
+                        <ReplyBase preview>
+                            <ReplyIcon size={22} />
+                            <div class="username">
+                                <UserShort user={message.author} size={16} />
+                            </div>
+                            <div class="message">
+                                {message.attachments && (
+                                    <>
+                                        <File size={16} />
+                                        <em>
+                                            {message.attachments.length > 1 ? (
+                                                <Text id="app.main.channel.misc.sent_multiple_files" />
+                                            ) : (
+                                                <Text id="app.main.channel.misc.sent_file" />
+                                            )}
+                                        </em>
+                                    </>
+                                )}
+                                {message.author_id === SYSTEM_USER_ID ? (
+                                    <SystemMessage message={message} />
+                                ) : (
+                                    <Markdown
+                                        disallowBigEmoji
+                                        content={(
+                                            message.content as string
+                                        ).replace(/\n/g, " ")}
+                                    />
+                                )}
+                            </div>
+                        </ReplyBase>
+                        <span class="actions">
+                            <IconButton
+                                onClick={() =>
+                                    setReplies(
+                                        replies.map((_, i) =>
+                                            i === index
+                                                ? { ..._, mention: !_.mention }
+                                                : _,
+                                        ),
+                                    )
+                                }>
+                                <span class="toggle">
+                                    <At size={16} />{" "}
+                                    {reply.mention ? "ON" : "OFF"}
+                                </span>
+                            </IconButton>
+                            <IconButton
+                                onClick={() =>
+                                    setReplies(
+                                        replies.filter((_, i) => i !== index),
+                                    )
+                                }>
+                                <XCircle size={16} />
+                            </IconButton>
+                        </span>
+                    </Base>
+                );
+            })}
+        </div>
+    );
+});

src/components/common/messaging/bars/TypingIndicator.tsx

+import { observer } from "mobx-react-lite";
+import { RelationshipStatus } from "revolt-api/types/Users";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+
+interface Props {
+    channel: Channel;
+}
+
+const Base = styled.div`
+    position: relative;
+
+    > div {
+        height: 24px;
+        margin-top: -24px;
+        position: absolute;
+
+        gap: 8px;
+        display: flex;
+        padding: 0 10px;
+        user-select: none;
+        align-items: center;
+        flex-direction: row;
+        width: calc(100% - 3px);
+        color: var(--secondary-foreground);
+        background: var(--secondary-background);
+    }
+
+    .avatars {
+        display: flex;
+
+        img {
+            width: 16px;
+            height: 16px;
+            object-fit: cover;
+            border-radius: 50%;
+
+            &:not(:first-child) {
+                margin-left: -4px;
+            }
+        }
+    }
+
+    .usernames {
+        min-width: 0;
+        font-size: 13px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+`;
+
+export default observer(({ channel }: Props) => {
+    const users = channel.typing.filter(
+        (x) =>
+            typeof x !== "undefined" &&
+            x._id !== x.client.user!._id &&
+            x.relationship !== RelationshipStatus.Blocked,
+    );
+
+    if (users.length > 0) {
+        users.sort((a, b) =>
+            a!._id.toUpperCase().localeCompare(b!._id.toUpperCase()),
+        );
+
+        let text;
+        if (users.length >= 5) {
+            text = <Text id="app.main.channel.typing.several" />;
+        } else if (users.length > 1) {
+            const userlist = [...users].map((x) => x!.username);
+            const user = userlist.pop();
+
+            /*for (let i = 0; i < userlist.length - 1; i++) {
+                userlist.splice(i * 2 + 1, 0, ", ");
+            }*/
+
+            text = (
+                <Text
+                    id="app.main.channel.typing.multiple"
+                    fields={{
+                        user,
+                        userlist: userlist.join(", "),
+                    }}
+                />
+            );
+        } else {
+            text = (
+                <Text
+                    id="app.main.channel.typing.single"
+                    fields={{ user: users[0]!.username }}
+                />
+            );
+        }
+
+        return (
+            <Base>
+                <div>
+                    <div className="avatars">
+                        {users.map((user) => (
+                            <img
+                                key={user!._id}
+                                loading="eager"
+                                src={user!.generateAvatarURL({ max_side: 256 })}
+                            />
+                        ))}
+                    </div>
+                    <div className="usernames">{text}</div>
+                </div>
+            </Base>
+        );
+    }
+
+    return null;
+});

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

+.embed {
+    margin: .2em 0;
+
+    iframe {
+        border: none;
+        border-radius: var(--border-radius);
+    }
+
+    &.image {
+        cursor: pointer;
+    }
+
+    &.website {
+        gap: 6px;
+        display: flex;
+        flex-direction: row;
+
+        > div:nth-child(1) {
+            gap: 6px;
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+        }
+
+        border-inline-start-width: 4px;
+        border-inline-start-style: solid;
+
+        padding: 12px;
+        width: fit-content;
+        background: var(--primary-header);
+        border-radius: var(--border-radius);
+
+        .siteinfo {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            user-select: none;
+
+            .favicon {
+                width: 14px;
+                height: 14px;
+                flex-shrink: 0;
+            }
+
+            .site {
+                font-size: 11px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                color: var(--secondary-foreground);
+            }
+        }
+
+        .author {
+            font-size: 1em;
+            color: var(--primary-text);
+            display: inline-block;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+
+        .title {
+            display: inline-block;
+            font-size: 1.1em;
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+
+        .description {
+            margin: 0;
+            font-size: 12px;
+            overflow: hidden;
+            display: -webkit-box;
+            white-space: pre-wrap;
+            -webkit-line-clamp: 6;
+            -webkit-box-orient: vertical;
+        }
+
+        .footer {
+            font-size: 12px;
+        }
+        
+        img.image {
+            cursor: pointer;
+            object-fit: contain;
+            border-radius: var(--border-radius);
+        }
+    }
+}
+
+// TODO: unified actions css (see attachment.module.scss for other actions css)
+.actions {
+    display: grid;
+    grid-template: 
+        "name open" auto
+        "size open" auto
+        / minmax(20px, 1fr) min-content;
+
+    align-items: center;
+    column-gap: 12px;
+    
+    width: 100%;
+    padding: 8px;
+    overflow: none;
+
+    color: var(--foreground);
+    background: var(--secondary-background);
+
+    span {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+    
+    .filesize {
+        grid-area: size;
+
+        font-size: 10px;
+        color: var(--secondary-foreground);
+    }
+
+    .openIcon {
+        grid-area: open;
+    }
+}

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

+import { Embed as EmbedI } from "revolt-api/types/January";
+
+import styles from "./Embed.module.scss";
+import classNames from "classnames";
+import { useContext } from "preact/hooks";
+
+import { useIntermediate } from "../../../../context/intermediate/Intermediate";
+import { useClient } from "../../../../context/revoltjs/RevoltClient";
+
+import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
+import EmbedMedia from "./EmbedMedia";
+
+interface Props {
+    embed: EmbedI;
+}
+
+const MAX_EMBED_WIDTH = 480;
+const MAX_EMBED_HEIGHT = 640;
+const CONTAINER_PADDING = 24;
+const MAX_PREVIEW_SIZE = 150;
+
+export default function Embed({ embed }: Props) {
+    const client = useClient();
+
+    const { openScreen } = useIntermediate();
+    const maxWidth = Math.min(
+        useContext(MessageAreaWidthContext) - CONTAINER_PADDING,
+        MAX_EMBED_WIDTH,
+    );
+
+    function calculateSize(
+        w: number,
+        h: number,
+    ): { width: number; height: number } {
+        const limitingWidth = Math.min(maxWidth, w);
+
+        const limitingHeight = Math.min(MAX_EMBED_HEIGHT, h);
+
+        // Calculate smallest possible WxH.
+        const width = Math.min(limitingWidth, limitingHeight * (w / h));
+
+        const height = Math.min(limitingHeight, limitingWidth * (h / w));
+
+        return { width, height };
+    }
+
+    switch (embed.type) {
+        case "Website": {
+            // Determine special embed size.
+            let mw, mh;
+            const largeMedia =
+                (embed.special && embed.special.type !== "None") ||
+                embed.image?.size === "Large";
+            switch (embed.special?.type) {
+                case "YouTube":
+                case "Bandcamp": {
+                    mw = embed.video?.width ?? 1280;
+                    mh = embed.video?.height ?? 720;
+                    break;
+                }
+                case "Twitch": {
+                    mw = 1280;
+                    mh = 720;
+                    break;
+                }
+                default: {
+                    if (embed.image?.size === "Preview") {
+                        mw = MAX_EMBED_WIDTH;
+                        mh = Math.min(
+                            embed.image.height ?? 0,
+                            MAX_PREVIEW_SIZE,
+                        );
+                    } else {
+                        mw = embed.image?.width ?? MAX_EMBED_WIDTH;
+                        mh = embed.image?.height ?? 0;
+                    }
+                }
+            }
+
+            const { width, height } = calculateSize(mw, mh);
+            return (
+                <div
+                    className={classNames(styles.embed, styles.website)}
+                    style={{
+                        borderInlineStartColor:
+                            embed.color ?? "var(--tertiary-background)",
+                        width: width + CONTAINER_PADDING,
+                    }}>
+                    <div>
+                        {embed.site_name && (
+                            <div className={styles.siteinfo}>
+                                {embed.icon_url && (
+                                    <img
+                                        loading="lazy"
+                                        className={styles.favicon}
+                                        src={client.proxyFile(embed.icon_url)}
+                                        draggable={false}
+                                        onError={(e) =>
+                                            (e.currentTarget.style.display =
+                                                "none")
+                                        }
+                                    />
+                                )}
+                                <div className={styles.site}>
+                                    {embed.site_name}{" "}
+                                </div>
+                            </div>
+                        )}
+
+                        {/*<span><a href={embed.url} target={"_blank"} className={styles.author}>Author</a></span>*/}
+                        {embed.title && (
+                            <span>
+                                <a
+                                    href={embed.url}
+                                    target={"_blank"}
+                                    className={styles.title}
+                                    rel="noreferrer">
+                                    {embed.title}
+                                </a>
+                            </span>
+                        )}
+                        {embed.description && (
+                            <div className={styles.description}>
+                                {embed.description}
+                            </div>
+                        )}
+
+                        {largeMedia && (
+                            <EmbedMedia embed={embed} height={height} />
+                        )}
+                    </div>
+                    {!largeMedia && (
+                        <div>
+                            <EmbedMedia
+                                embed={embed}
+                                width={
+                                    height *
+                                    ((embed.image?.width ?? 0) /
+                                        (embed.image?.height ?? 0))
+                                }
+                                height={height}
+                            />
+                        </div>
+                    )}
+                </div>
+            );
+        }
+        case "Image": {
+            return (
+                <img
+                    className={classNames(styles.embed, styles.image)}
+                    style={calculateSize(embed.width, embed.height)}
+                    src={client.proxyFile(embed.url)}
+                    type="text/html"
+                    frameBorder="0"
+                    loading="lazy"
+                    onClick={() => openScreen({ id: "image_viewer", embed })}
+                    onMouseDown={(ev) =>
+                        ev.button === 1 && window.open(embed.url, "_blank")
+                    }
+                />
+            );
+        }
+        default:
+            return null;
+    }
+}

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

+/* eslint-disable react-hooks/rules-of-hooks */
+import { Embed } from "revolt-api/types/January";
+
+import styles from "./Embed.module.scss";
+
+import { useIntermediate } from "../../../../context/intermediate/Intermediate";
+import { useClient } from "../../../../context/revoltjs/RevoltClient";
+
+interface Props {
+    embed: Embed;
+    width?: number;
+    height: number;
+}
+
+export default function EmbedMedia({ embed, width, height }: Props) {
+    if (embed.type !== "Website") return null;
+    const { openScreen } = useIntermediate();
+    const client = useClient();
+
+    switch (embed.special?.type) {
+        case "YouTube":
+            return (
+                <iframe
+                    loading="lazy"
+                    src={`https://www.youtube-nocookie.com/embed/${embed.special.id}?modestbranding=1`}
+                    allowFullScreen
+                    style={{ height }}
+                />
+            );
+        case "Twitch":
+            return (
+                <iframe
+                    src={`https://player.twitch.tv/?${embed.special.content_type.toLowerCase()}=${
+                        embed.special.id
+                    }&parent=${window.location.hostname}&autoplay=false`}
+                    frameBorder="0"
+                    allowFullScreen
+                    scrolling="no"
+                    loading="lazy"
+                    style={{ height }}
+                />
+            );
+        case "Spotify":
+            return (
+                <iframe
+                    src={`https://open.spotify.com/embed/${embed.special.content_type}/${embed.special.id}`}
+                    loading="lazy"
+                    frameBorder="0"
+                    allowFullScreen
+                    allowTransparency
+                    style={{ height }}
+                />
+            );
+        case "Soundcloud":
+            return (
+                <iframe
+                    src={`https://w.soundcloud.com/player/?url=${encodeURIComponent(
+                        embed.url!,
+                    )}&color=%23FF7F50&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`}
+                    frameBorder="0"
+                    scrolling="no"
+                    loading="lazy"
+                    style={{ height }}
+                />
+            );
+        case "Bandcamp": {
+            return (
+                <iframe
+                    src={`https://bandcamp.com/EmbeddedPlayer/${embed.special.content_type.toLowerCase()}=${
+                        embed.special.id
+                    }/size=large/bgcol=181a1b/linkcol=056cc4/tracklist=false/transparent=true/`}
+                    seamless
+                    loading="lazy"
+                    style={{ height }}
+                />
+            );
+        }
+        default: {
+            if (embed.image) {
+                const url = embed.image.url;
+                return (
+                    <img
+                        className={styles.image}
+                        src={client.proxyFile(url)}
+                        loading="lazy"
+                        style={{ width, height }}
+                        onClick={() =>
+                            openScreen({
+                                id: "image_viewer",
+                                embed: embed.image,
+                            })
+                        }
+                        onMouseDown={(ev) =>
+                            ev.button === 1 && window.open(url, "_blank")
+                        }
+                    />
+                );
+            }
+        }
+    }
+
+    return null;
+}

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

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

src/components/common/user/UserCheckbox.tsx

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

src/components/common/user/UserHeader.tsx

+import { Cog } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
+import { Link } from "react-router-dom";
+import { User } from "revolt.js/dist/maps/Users";
+import styled from "styled-components";
+
+import { openContextMenu } from "preact-context-menu";
+import { Text, Localizer } from "preact-i18n";
+
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+
+import Header from "../../ui/Header";
+import IconButton from "../../ui/IconButton";
+
+import Tooltip from "../Tooltip";
+import UserStatus from "./UserStatus";
+
+const HeaderBase = styled.div`
+    gap: 0;
+    flex-grow: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+
+    * {
+        min-width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .username {
+        cursor: pointer;
+        font-size: 16px;
+        font-weight: 600;
+    }
+
+    .status {
+        cursor: pointer;
+        font-size: 12px;
+        margin-top: -2px;
+    }
+`;
+
+interface Props {
+    user: User;
+}
+
+export default observer(({ user }: Props) => {
+    const { writeClipboard } = useIntermediate();
+
+    return (
+        <Header borders placement="secondary">
+            <HeaderBase>
+                <Localizer>
+                    <Tooltip content={<Text id="app.special.copy_username" />}>
+                        <span
+                            className="username"
+                            onClick={() => writeClipboard(user.username)}>
+                            @{user.username}
+                        </span>
+                    </Tooltip>
+                </Localizer>
+                <span
+                    className="status"
+                    onClick={() => openContextMenu("Status")}>
+                    <UserStatus user={user} />
+                </span>
+            </HeaderBase>
+            {!isTouchscreenDevice && (
+                <div className="actions">
+                    <Link to="/settings">
+                        <IconButton>
+                            <Cog size={24} />
+                        </IconButton>
+                    </Link>
+                </div>
+            )}
+        </Header>
+    );
+});

src/components/common/user/UserHover.tsx

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

src/components/common/user/UserIcon.tsx

+import { MicrophoneOff } from "@styled-icons/boxicons-regular";
+import { observer } from "mobx-react-lite";
+import { Presence } from "revolt-api/types/Users";
+import { User } from "revolt.js/dist/maps/Users";
+import styled, { css } from "styled-components";
+
+import { useContext } from "preact/hooks";
+
+import { ThemeContext } from "../../../context/Theme";
+import { AppContext } from "../../../context/revoltjs/RevoltClient";
+
+import IconBase, { IconBaseProps } from "../IconBase";
+import fallback from "../assets/user.png";
+
+type VoiceStatus = "muted";
+interface Props extends IconBaseProps<User> {
+    mask?: string;
+    status?: boolean;
+    voice?: VoiceStatus;
+}
+
+export function useStatusColour(user?: User) {
+    const theme = useContext(ThemeContext);
+
+    return user?.online && user?.status?.presence !== Presence.Invisible
+        ? user?.status?.presence === Presence.Idle
+            ? theme["status-away"]
+            : user?.status?.presence === Presence.Busy
+            ? theme["status-busy"]
+            : theme["status-online"]
+        : theme["status-invisible"];
+}
+
+const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+        stroke: white;
+    }
+
+    ${(props) =>
+        props.status === "muted" &&
+        css`
+            background: var(--error);
+        `}
+`;
+
+export default observer(
+    (
+        props: Props &
+            Omit<
+                JSX.SVGAttributes<SVGSVGElement>,
+                keyof Props | "children" | "as"
+            >,
+    ) => {
+        const client = useContext(AppContext);
+
+        const {
+            target,
+            attachment,
+            size,
+            status,
+            animate,
+            mask,
+            hover,
+            ...svgProps
+        } = props;
+        const iconURL =
+            client.generateFileURL(
+                target?.avatar ?? attachment,
+                { max_side: 256 },
+                animate,
+            ) ?? (target ? target.defaultAvatarURL : fallback);
+
+        return (
+            <IconBase
+                {...svgProps}
+                width={size}
+                height={size}
+                hover={hover}
+                aria-hidden="true"
+                viewBox="0 0 32 32">
+                <foreignObject
+                    x="0"
+                    y="0"
+                    width="32"
+                    height="32"
+                    class="icon"
+                    mask={mask ?? (status ? "url(#user)" : undefined)}>
+                    {<img src={iconURL} draggable={false} loading="lazy" />}
+                </foreignObject>
+                {props.status && (
+                    <circle
+                        cx="27"
+                        cy="27"
+                        r="5"
+                        fill={useStatusColour(target)}
+                    />
+                )}
+                {props.voice && (
+                    <foreignObject x="22" y="22" width="10" height="10">
+                        <VoiceIndicator status={props.voice}>
+                            {props.voice === "muted" && (
+                                <MicrophoneOff size={6} />
+                            )}
+                        </VoiceIndicator>
+                    </foreignObject>
+                )}
+            </IconBase>
+        );
+    },
+);

src/components/common/user/UserShort.tsx

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

src/components/common/user/UserStatus.tsx

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

src/components/markdown/Markdown.module.scss

+.markdown {
+    :global(.emoji) {
+        height: 1.25em;
+        width: 1.25em;
+        margin: 0 0.05em 0 0.1em;
+        vertical-align: -0.2em;
+    }
+
+    &[data-large-emojis="true"] :global(.emoji) {
+        width: 3rem;
+        height: 3rem;
+        margin-bottom: 0;
+        margin-top: 1px;
+        margin-right: 2px;
+        vertical-align: -0.3em;
+    }
+
+    p,
+    pre {
+        margin: 0;
+    }
+
+    a {
+        text-decoration: none;
+
+        &[data-type="mention"] {
+            padding: 0 6px;
+            font-weight: 600;
+            display: inline-block;
+            background: var(--secondary-background);
+            border-radius: calc(var(--border-radius) * 2);
+
+            &:hover {
+                text-decoration: none;
+            }
+        }
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    ul,
+    ol,
+    blockquote {
+        margin: 0;
+    }
+
+    ul,
+    ol {
+        list-style-position: inside;
+        padding-left: 10px;
+    }
+
+    blockquote {
+        margin: 2px 0;
+        padding: 2px 0;
+        background: var(--hover);
+        border-radius: var(--border-radius);
+        border-inline-start: 4px solid var(--tertiary-background);
+
+        > * {
+            margin: 0 8px;
+        }
+    }
+
+    pre {
+        padding: 1em;
+        overflow-x: scroll;
+        border-radius: var(--border-radius);
+        background: var(--block) !important;
+    }
+
+    p > code {
+        padding: 1px 4px;
+    }
+
+    code {
+        color: white;
+        font-size: 90%;
+        background: var(--block);
+        border-radius: var(--border-radius);
+        font-family: var(--monospace-font), monospace;
+    }
+
+    input[type="checkbox"] {
+        margin-right: 4px;
+        pointer-events: none;
+    }
+
+    table {
+        border-collapse: collapse;
+
+        th,
+        td {
+            padding: 6px;
+            border: 1px solid var(--tertiary-foreground);
+        }
+    }
+
+    :global(.katex-block) {
+        overflow-x: auto;
+    }
+
+    :global(.spoiler) {
+        padding: 0 2px;
+        cursor: pointer;
+        user-select: none;
+        color: transparent;
+        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: var(--monospace-font), monospace;
+
+        :global(.lang) {
+            width: fit-content;
+            padding-bottom: 8px;
+
+            div {
+                color: #111;
+                cursor: pointer;
+                padding: 2px 6px;
+                font-weight: 600;
+                user-select: none;
+                display: inline-block;
+                background: var(--accent);
+
+                font-size: 10px;
+                border-radius: 2px;
+                text-transform: uppercase;
+                box-shadow: 0 2px #787676;
+
+                &:active {
+                    transform: translateY(1px);
+                    box-shadow: 0 1px #787676;
+                }
+            }
+        }
+    }
+
+    input[type="checkbox"] {
+        width: 0;
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    label {
+        pointer-events: none;
+    }
+
+    input[type="checkbox"] + label:before {
+        width: 12px;
+        height: 12px;
+        content: "a";
+        font-size: 10px;
+        margin-right: 6px;
+        line-height: 12px;
+        background: white;
+        position: relative;
+        display: inline-block;
+        border-radius: var(--border-radius);
+    }
+
+    input[type="checkbox"][checked="true"] + label:before {
+        content: "✓";
+        align-items: center;
+        display: inline-flex;
+        justify-content: center;
+        background: var(--accent);
+    }
+
+    input[type="checkbox"] + label {
+        line-height: 12px;
+        position: relative;
+    }
+}

src/components/markdown/Markdown.tsx

+import { Suspense, lazy } from "preact/compat";
+
+const Renderer = lazy(() => import("./Renderer"));
+
+export interface MarkdownProps {
+    content?: string;
+    disallowBigEmoji?: boolean;
+}
+
+export default function Markdown(props: MarkdownProps) {
+    return (
+        // @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 styles from "./Markdown.module.scss";
+import { useCallback, useContext } from "preact/hooks";
+
+import { internalEmit } from "../../lib/eventEmitter";
+
+import { AppContext } from "../../context/revoltjs/RevoltClient";
+
+import { generateEmoji } from "../common/Emoji";
+
+import { emojiDictionary } from "../../assets/emojis";
+import { MarkdownProps } from "./Markdown";
+
+// 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.copycode = function (element: HTMLDivElement) {
+        try {
+            const code = element.parentElement?.parentElement?.children[1];
+            if (code) {
+                navigator.clipboard.writeText(code.textContent?.trim() ?? "");
+            }
+        } catch (e) {}
+    };
+}
+
+export const md: MarkdownIt = MarkdownIt({
+    breaks: true,
+    linkify: true,
+    highlight: (str, lang) => {
+        const v = Prism.languages[lang];
+        if (v) {
+            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,
+        maxSize: 10,
+        strict: false,
+        errorColor: "var(--error)",
+    });
+
+// TODO: global.d.ts file for defining globals
+declare global {
+    interface Window {
+        internalHandleURL: (element: HTMLAnchorElement) => void;
+    }
+}
+
+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;
+    if (content.length === 0) return null;
+
+    // We replace the message with the mention at the time of render.
+    // We don't care if the mention changes.
+    const newContent = content
+        .replace(RE_MENTIONS, (sub: string, ...args: unknown[]) => {
+            const id = args[0] as string,
+                user = client.users.get(id);
+
+            if (user) {
+                return `[@${user.username}](/@${id})`;
+            }
+
+            return sub;
+        })
+        .replace(RE_CHANNELS, (sub: string, ...args: unknown[]) => {
+            const id = args[0] as string,
+                channel = client.channels.get(id);
+
+            if (channel?.channel_type === "TextChannel") {
+                return `[#${channel.name}](/server/${channel.server_id}/channel/${id})`;
+            }
+
+            return sub;
+        });
+
+    const useLargeEmojis = disallowBigEmoji
+        ? false
+        : content.replace(RE_TWEMOJI, "").trim().length === 0;
+
+    const toggle = useCallback((ev: MouseEvent) => {
+        if (ev.currentTarget) {
+            const element = ev.currentTarget as HTMLDivElement;
+            if (element.classList.contains("spoiler")) {
+                element.classList.add("shown");
+            }
+        }
+    }, []);
+
+    const handleLink = useCallback((ev: MouseEvent) => {
+        if (ev.currentTarget) {
+            const element = ev.currentTarget as HTMLAnchorElement;
+            const url = new URL(element.href, location.href);
+            const pathname = url.pathname;
+
+            if (pathname.startsWith("/@")) {
+                const id = pathname.substr(2);
+                if (/[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}/.test(id)) {
+                    ev.preventDefault();
+                    internalEmit("Intermediate", "openProfile", id);
+                }
+            } else {
+                ev.preventDefault();
+                internalEmit("Intermediate", "navigate", pathname);
+            }
+        }
+    }, []);
+
+    return (
+        <span
+            ref={(el) => {
+                if (el) {
+                    el.querySelectorAll<HTMLDivElement>(".spoiler").forEach(
+                        (element) => {
+                            element.removeEventListener("click", toggle);
+                            element.addEventListener("click", toggle);
+                        },
+                    );
+
+                    el.querySelectorAll<HTMLAnchorElement>("a").forEach(
+                        (element) => {
+                            element.removeEventListener("click", handleLink);
+                            element.removeAttribute("data-type");
+                            element.removeAttribute("target");
+
+                            let internal;
+                            const href = element.href;
+                            if (href) {
+                                try {
+                                    const url = new URL(href, location.href);
+
+                                    if (url.hostname === location.hostname) {
+                                        internal = true;
+                                        element.addEventListener(
+                                            "click",
+                                            handleLink,
+                                        );
+
+                                        if (url.pathname.startsWith("/@")) {
+                                            element.setAttribute(
+                                                "data-type",
+                                                "mention",
+                                            );
+                                        }
+                                    }
+                                } catch (err) {}
+                            }
+
+                            if (!internal) {
+                                element.setAttribute("target", "_blank");
+                            }
+                        },
+                    );
+                }
+            }}
+            className={styles.markdown}
+            dangerouslySetInnerHTML={{
+                __html: md.render(newContent),
+            }}
+            data-large-emojis={useLargeEmojis}
+        />
+    );
+}

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 HomeSidebar from "./left/HomeSidebar";
+import ServerListSidebar from "./left/ServerListSidebar";
+import ServerSidebar from "./left/ServerSidebar";
+
+export default function LeftSidebar() {
+    return (
+        <SidebarBase>
+            <Switch>
+                <Route path="/settings" />
+                <Route path="/server/:server/channel/:channel">
+                    <ServerListSidebar />
+                    <ServerSidebar />
+                </Route>
+                <Route path="/server/:server">
+                    <ServerListSidebar />
+                    <ServerSidebar />
+                </Route>
+                <Route path="/channel/:channel">
+                    <ServerListSidebar />
+                    <HomeSidebar />
+                </Route>
+                <Route path="/">
+                    <ServerListSidebar />
+                    <HomeSidebar />
+                </Route>
+            </Switch>
+        </SidebarBase>
+    );
+}