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

-import { User } from 'revolt.js';
+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";
-import styled from 'styled-components';
-import { useContext } from 'preact/hooks';
-import { connectState } from '../../../../redux/connector';
-import { useUsers } from '../../../../context/revoltjs/hooks';
-import { TypingUser } from '../../../../redux/reducers/typing';
-import { AppContext } from '../../../../context/revoltjs/RevoltClient';
 
 interface Props {
-    typing?: TypingUser[]
+    channel: Channel;
 }
 
 const Base = styled.div`
@@ -32,7 +30,7 @@ const Base = styled.div`
 
     .avatars {
         display: flex;
-        
+
         img {
             width: 16px;
             height: 16px;
@@ -54,25 +52,36 @@ const Base = styled.div`
     }
 `;
 
-export function TypingIndicator({ typing }: Props) {
-    if (typing && typing.length > 0) {
-        const client = useContext(AppContext);
-        const users = useUsers(typing.map(x => x.id))
-            .filter(x => typeof x !== 'undefined') as User[];
+export default observer(({ channel }: Props) => {
+    const users = channel.typing.filter(
+        (x) =>
+            typeof x !== "undefined" &&
+            x._id !== x.client.user!._id &&
+            x.relationship !== RelationshipStatus.Blocked,
+    );
 
-        users.sort((a, b) => a._id.toUpperCase().localeCompare(b._id.toUpperCase()));
+    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 usersCopy = [...users];
+            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: usersCopy.pop()?.username,
-                        userlist: usersCopy.map(x => x.username).join(", ")
+                        user,
+                        userlist: userlist.join(", "),
                     }}
                 />
             );
@@ -80,7 +89,7 @@ export function TypingIndicator({ typing }: Props) {
             text = (
                 <Text
                     id="app.main.channel.typing.single"
-                    fields={{ user: users[0].username }}
+                    fields={{ user: users[0]!.username }}
                 />
             );
         }
@@ -89,9 +98,11 @@ export function TypingIndicator({ typing }: Props) {
             <Base>
                 <div>
                     <div className="avatars">
-                        {users.map(user => (
+                        {users.map((user) => (
                             <img
-                                src={client.users.getAvatarURL(user._id, { max_side: 256 }, true)}
+                                key={user!._id}
+                                loading="eager"
+                                src={user!.generateAvatarURL({ max_side: 256 })}
                             />
                         ))}
                     </div>
@@ -102,10 +113,4 @@ export function TypingIndicator({ typing }: Props) {
     }
 
     return null;
-}
-
-export default connectState<{ id: string }>(TypingIndicator, (state, props) => {
-    return {
-        typing: state.typing && state.typing[props.id]
-    };
 });

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

@@ -3,7 +3,7 @@
 
     iframe {
         border: none;
-        border-radius: 4px;
+        border-radius: var(--border-radius);
     }
 
     &.image {
@@ -27,8 +27,8 @@
 
         padding: 12px;
         width: fit-content;
-        border-radius: 4px;
         background: var(--primary-header);
+        border-radius: var(--border-radius);
 
         .siteinfo {
             display: flex;
@@ -80,8 +80,8 @@
             overflow: hidden;
             display: -webkit-box;
             white-space: pre-wrap;
-            // -webkit-line-clamp: 6;
-            // -webkit-box-orient: vertical;
+            -webkit-line-clamp: 6;
+            -webkit-box-orient: vertical;
         }
 
         .footer {
@@ -91,7 +91,43 @@
         img.image {
             cursor: pointer;
             object-fit: contain;
-            border-radius: 3px;
+            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 classNames from 'classnames';
-import EmbedMedia from './EmbedMedia';
+import { Embed as EmbedI } from "revolt-api/types/January";
+
 import styles from "./Embed.module.scss";
-import { useContext } from 'preact/hooks';
-import { Embed as EmbedRJS } from "revolt.js/dist/api/objects";
-import { useIntermediate } from '../../../../context/intermediate/Intermediate';
-import { MessageAreaWidthContext } from '../../../../pages/channels/messaging/MessageArea';
+import classNames from "classnames";
+import { useContext } from "preact/hooks";
+
+import { useIntermediate } from "../../../../context/intermediate/Intermediate";
+import { useClient } from "../../../../context/revoltjs/RevoltClient";
+
+import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
+import EmbedMedia from "./EmbedMedia";
 
 interface Props {
-    embed: EmbedRJS;
+    embed: EmbedI;
 }
 
 const MAX_EMBED_WIDTH = 480;
@@ -16,61 +20,56 @@ const CONTAINER_PADDING = 24;
 const MAX_PREVIEW_SIZE = 150;
 
 export default function Embed({ embed }: Props) {
-    // ! FIXME: temp code
-    // ! add proxy function to client
-    function proxyImage(url: string) {
-        return 'https://jan.revolt.chat/proxy?url=' + encodeURIComponent(url);
-    }
+    const client = useClient();
 
     const { openScreen } = useIntermediate();
-    const maxWidth = Math.min(useContext(MessageAreaWidthContext) - CONTAINER_PADDING, MAX_EMBED_WIDTH);
+    const maxWidth = Math.min(
+        useContext(MessageAreaWidthContext) - CONTAINER_PADDING,
+        MAX_EMBED_WIDTH,
+    );
 
-    function calculateSize(w: number, h: number): { width: number, height: number } {
-        let limitingWidth = Math.min(
-            maxWidth,
-            w
-        );
+    function calculateSize(
+        w: number,
+        h: number,
+    ): { width: number; height: number } {
+        const limitingWidth = Math.min(maxWidth, w);
 
-        let limitingHeight = Math.min(
-            MAX_EMBED_HEIGHT,
-            h
-        );
+        const limitingHeight = Math.min(MAX_EMBED_HEIGHT, h);
 
         // Calculate smallest possible WxH.
-        let width = Math.min(
-            limitingWidth,
-            limitingHeight * (w / h)
-        );
+        const width = Math.min(limitingWidth, limitingHeight * (w / h));
 
-        let height = Math.min(
-            limitingHeight,
-            limitingWidth * (h / w)
-        );
+        const height = Math.min(limitingHeight, limitingWidth * (h / w));
 
         return { width, height };
     }
 
     switch (embed.type) {
-        case 'Website': {
+        case "Website": {
             // Determine special embed size.
             let mw, mh;
-            let largeMedia = (embed.special && embed.special.type !== 'None') || embed.image?.size === 'Large';
+            const largeMedia =
+                (embed.special && embed.special.type !== "None") ||
+                embed.image?.size === "Large";
             switch (embed.special?.type) {
-                case 'YouTube':
-                case 'Bandcamp': {
+                case "YouTube":
+                case "Bandcamp": {
                     mw = embed.video?.width ?? 1280;
                     mh = embed.video?.height ?? 720;
                     break;
                 }
-                case 'Twitch': {
+                case "Twitch": {
                     mw = 1280;
                     mh = 720;
                     break;
                 }
                 default: {
-                    if (embed.image?.size === 'Preview') {
+                    if (embed.image?.size === "Preview") {
                         mw = MAX_EMBED_WIDTH;
-                        mh = Math.min(embed.image.height ?? 0, MAX_PREVIEW_SIZE);
+                        mh = Math.min(
+                            embed.image.height ?? 0,
+                            MAX_PREVIEW_SIZE,
+                        );
                     } else {
                         mw = embed.image?.width ?? MAX_EMBED_WIDTH;
                         mh = embed.image?.height ?? 0;
@@ -78,51 +77,91 @@ export default function Embed({ embed }: Props) {
                 }
             }
 
-            let { width, height } = calculateSize(mw, mh);
+            const { width, height } = calculateSize(mw, mh);
             return (
                 <div
                     className={classNames(styles.embed, styles.website)}
                     style={{
-                        borderInlineStartColor: embed.color ?? 'var(--tertiary-background)',
-                        width: width + CONTAINER_PADDING
+                        borderInlineStartColor:
+                            embed.color ?? "var(--tertiary-background)",
+                        width: width + CONTAINER_PADDING,
                     }}>
                     <div>
-                        { embed.site_name && <div className={styles.siteinfo}>
-                            { embed.icon_url && <img className={styles.favicon} src={proxyImage(embed.icon_url)} draggable={false} onError={e => e.currentTarget.style.display = 'none'} /> }
-                            <div className={styles.site}>{ embed.site_name } </div>
-                        </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}>{ embed.title }</a></span> }
-                        { embed.description && <div className={styles.description}>{ embed.description }</div> }
+                        {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} /> }
+                        {largeMedia && (
+                            <EmbedMedia embed={embed} height={height} />
+                        )}
                     </div>
-                    {
-                        !largeMedia && <div>
-                            <EmbedMedia embed={embed} width={height * ((embed.image?.width ?? 0) / (embed.image?.height ?? 0))} height={height} />
+                    {!largeMedia && (
+                        <div>
+                            <EmbedMedia
+                                embed={embed}
+                                width={
+                                    height *
+                                    ((embed.image?.width ?? 0) /
+                                        (embed.image?.height ?? 0))
+                                }
+                                height={height}
+                            />
                         </div>
-                    }
+                    )}
                 </div>
-            )
+            );
         }
-        case 'Image': {
+        case "Image": {
             return (
-                <img className={classNames(styles.embed, styles.image)}
+                <img
+                    className={classNames(styles.embed, styles.image)}
                     style={calculateSize(embed.width, embed.height)}
-                    src={proxyImage(embed.url)}
+                    src={client.proxyFile(embed.url)}
                     type="text/html"
                     frameBorder="0"
-                    onClick={() =>
-                        openScreen({ id: "image_viewer", embed })
-                    }
-                    onMouseDown={ev =>
-                        ev.button === 1 &&
-                        window.open(embed.url, "_blank")
+                    loading="lazy"
+                    onClick={() => openScreen({ id: "image_viewer", embed })}
+                    onMouseDown={(ev) =>
+                        ev.button === 1 && window.open(embed.url, "_blank")
                     }
                 />
-            )
+            );
         }
-        default: return null;
+        default:
+            return null;
     }
 }

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

-import styles from './Embed.module.scss';
-import { Embed } from "revolt.js/dist/api/objects";
-import { useIntermediate } from '../../../../context/intermediate/Intermediate';
+/* 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;
@@ -9,66 +13,87 @@ interface Props {
 }
 
 export default function EmbedMedia({ embed, width, height }: Props) {
-    // ! FIXME: temp code
-    // ! add proxy function to client
-    function proxyImage(url: string) {
-        return 'https://jan.revolt.chat/proxy?url=' + encodeURIComponent(url);
-    }
-
-    if (embed.type !== 'Website') return null;
+    if (embed.type !== "Website") return null;
     const { openScreen } = useIntermediate();
+    const client = useClient();
 
     switch (embed.special?.type) {
-        case 'YouTube': return (
-            <iframe 
-                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"
-                style={{ height, }} />
-        )
-        case 'Spotify': return (
-            <iframe
-                src={`https://open.spotify.com/embed/${embed.special.content_type}/${embed.special.id}`}
-                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"
-                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
-                style={{ height }} />;
+        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) {
-                let url = embed.image.url;
+                const url = embed.image.url;
                 return (
                     <img
                         className={styles.image}
-                        src={proxyImage(url)}
+                        src={client.proxyFile(url)}
+                        loading="lazy"
                         style={{ width, height }}
                         onClick={() =>
-                            openScreen({ id: "image_viewer", embed: embed.image })
+                            openScreen({
+                                id: "image_viewer",
+                                embed: embed.image,
+                            })
+                        }
+                        onMouseDown={(ev) =>
+                            ev.button === 1 && window.open(url, "_blank")
                         }
-                        onMouseDown={ev =>
-                            ev.button === 1 &&
-                            window.open(url, "_blank")
-                        } />
+                    />
                 );
             }
         }

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

-import styles from './Embed.module.scss';
-import IconButton from '../../../ui/IconButton';
-import { LinkExternal } from '@styled-icons/boxicons-regular';
-import { EmbedImage } from "revolt.js/dist/api/objects";
+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();
+    const filename = embed.url.split("/").pop();
 
     return (
         <div className={styles.actions}>
-            <div className={styles.info}>
-                <span className={styles.filename}>{filename}</span>
-                <span className={styles.filesize}>{embed.width + 'x' + embed.height}</span>
-            </div>
-            <a href={embed.url} target="_blank">
+            <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";
-import UserIcon from "./UserIcon";
+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} />
-            {user.username}
+            <Username user={user} />
         </Checkbox>
     );
 }

src/components/common/user/UserHeader.tsx

-import Tooltip from "../Tooltip";
-import { User } from "revolt.js";
-import UserIcon from "./UserIcon";
-import { Text } from "preact-i18n";
-import Header from "../../ui/Header";
-import UserStatus from './UserStatus';
-import styled from "styled-components";
-import { Localizer } from 'preact-i18n';
-import { Link } from "react-router-dom";
-import IconButton from "../../ui/IconButton";
 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;
@@ -41,10 +45,10 @@ const HeaderBase = styled.div`
 `;
 
 interface Props {
-    user: User
+    user: User;
 }
 
-export default function UserHeader({ user }: Props) {
+export default observer(({ user }: Props) => {
     const { writeClipboard } = useIntermediate();
 
     return (
@@ -52,24 +56,28 @@ export default function UserHeader({ user }: Props) {
             <HeaderBase>
                 <Localizer>
                     <Tooltip content={<Text id="app.special.copy_username" />}>
-                        <span className="username"
+                        <span
+                            className="username"
                             onClick={() => writeClipboard(user.username)}>
                             @{user.username}
                         </span>
                     </Tooltip>
                 </Localizer>
-                <span className="status"
+                <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> }
+            {!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 { User } from "revolt.js";
-import { useContext } from "preact/hooks";
 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 { Users } from "revolt.js/dist/api/objects";
+
+import { useContext } from "preact/hooks";
+
 import { ThemeContext } from "../../../context/Theme";
-import IconBase, { IconBaseProps } from "../IconBase";
 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;
@@ -17,17 +22,13 @@ interface Props extends IconBaseProps<User> {
 export function useStatusColour(user?: User) {
     const theme = useContext(ThemeContext);
 
-    return (
-        user?.online &&
-            user?.status?.presence !== Users.Presence.Invisible
-                ? user?.status?.presence === Users.Presence.Idle
-                    ? theme["status-away"]
-                    : user?.status?.presence ===
-                        Users.Presence.Busy
-                    ? theme["status-busy"]
-                    : theme["status-online"]
-                : theme["status-invisible"]
-    );
+    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 }>`
@@ -43,51 +44,75 @@ const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
         stroke: white;
     }
 
-    ${ props => props.status === 'muted' && css`
-        background: var(--error);
-    ` }
+    ${(props) =>
+        props.status === "muted" &&
+        css`
+            background: var(--error);
+        `}
 `;
 
-import fallback from '../assets/user.png';
+export default observer(
+    (
+        props: Props &
+            Omit<
+                JSX.SVGAttributes<SVGSVGElement>,
+                keyof Props | "children" | "as"
+            >,
+    ) => {
+        const client = useContext(AppContext);
 
-export default function UserIcon(props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>) {
-    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);
 
-    const { target, attachment, size, voice, status, animate, mask, children, as, ...svgProps } = props;
-    const iconURL = client.generateFileURL(target?.avatar ?? attachment, { max_side: 256 }, animate)
-        ?? (target ? client.users.getDefaultAvatarURL(target._id) : fallback);
-
-    return (
-        <IconBase {...svgProps}
-            width={size}
-            height={size}
-            aria-hidden="true"
-            viewBox="0 0 32 32">
-            <foreignObject x="0" y="0" width="32" height="32" mask={mask ?? (status ? "url(#user)" : undefined)}>
-                {
-                    <img src={iconURL}
-                        draggable={false} />
-                }
-            </foreignObject>
-            {props.status && (
-                <circle
-                    cx="27"
-                    cy="27"
-                    r="5"
-                    fill={useStatusColour(target)}
-                />
-            )}
-            {props.voice && (
+        return (
+            <IconBase
+                {...svgProps}
+                width={size}
+                height={size}
+                hover={hover}
+                aria-hidden="true"
+                viewBox="0 0 32 32">
                 <foreignObject
-                    x="22"
-                    y="22"
-                    width="10"
-                    height="10">
-                    <VoiceIndicator status={props.voice}>
-                        {props.voice === "muted" && <MicrophoneOff size={6} />}
-                    </VoiceIndicator>
+                    x="0"
+                    y="0"
+                    width="32"
+                    height="32"
+                    class="icon"
+                    mask={mask ?? (status ? "url(#user)" : undefined)}>
+                    {<img src={iconURL} draggable={false} loading="lazy" />}
                 </foreignObject>
-            )}
-        </IconBase>
-    );
-}
+                {props.status && (
+                    <circle
+                        cx="27"
+                        cy="27"
+                        r="5"
+                        fill={useStatusColour(target)}
+                    />
+                )}
+                {props.voice && (
+                    <foreignObject x="22" y="22" width="10" height="10">
+                        <VoiceIndicator status={props.voice}>
+                            {props.voice === "muted" && (
+                                <MicrophoneOff size={6} />
+                            )}
+                        </VoiceIndicator>
+                    </foreignObject>
+                )}
+            </IconBase>
+        );
+    },
+);

src/components/common/user/UserShort.tsx

-import { User } from "revolt.js";
-import UserIcon from "./UserIcon";
+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";
 
-export function Username({ user, ...otherProps }: { user?: User } & JSX.HTMLAttributes<HTMLElement>) {
-    return <span {...otherProps}>{ user?.username ?? <Text id="app.main.channel.unknown_user" /> }</span>;
-}
+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;
 
-export default function UserShort({ user, size }: { user?: User, size?: number }) {
-    return <>
-        <UserIcon size={size ?? 24} target={user} />
-        <Username user={user} />
-    </>;
-}
\ No newline at end of file
+        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 { User } from "revolt.js";
+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 { Users } from "revolt.js/dist/api/objects";
+
+import Tooltip from "../Tooltip";
 
 interface Props {
-    user: User;
+    user?: User;
+    tooltip?: boolean;
 }
 
-export default function UserStatus({ user }: Props) {
-    if (user.online) {
+export default observer(({ user, tooltip }: Props) => {
+    if (user?.online) {
         if (user.status?.text) {
-            return <>{user.status?.text}</>;
+            if (tooltip) {
+                return (
+                    <Tooltip arrow={undefined} content={user.status.text}>
+                        {user.status.text}
+                    </Tooltip>
+                );
+            }
+
+            return <>{user.status.text}</>;
         }
 
-        if (user.status?.presence === Users.Presence.Busy) {
+        if (user.status?.presence === Presence.Busy) {
             return <Text id="app.status.busy" />;
         }
 
-        if (user.status?.presence === Users.Presence.Idle) {
+        if (user.status?.presence === Presence.Idle) {
             return <Text id="app.status.idle" />;
         }
 
-        if (user.status?.presence === Users.Presence.Invisible) {
+        if (user.status?.presence === Presence.Invisible) {
             return <Text id="app.status.offline" />;
         }
 
@@ -28,4 +41,4 @@ export default function UserStatus({ user }: Props) {
     }
 
     return <Text id="app.status.offline" />;
-}
+});

src/components/markdown/Markdown.module.scss

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

src/components/markdown/Markdown.tsx

 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 { useContext } from "preact/hooks";
-import { MarkdownProps } from "./Markdown";
+
 import styles from "./Markdown.module.scss";
-import { generateEmoji } from "../common/Emoji";
+import { useCallback, useContext } from "preact/hooks";
+
 import { internalEmit } from "../../lib/eventEmitter";
-import { emojiDictionary } from "../../assets/emojis";
-import { AppContext } from "../../context/revoltjs/RevoltClient";
 
-import Prism from "prismjs";
-import "katex/dist/katex.min.css";
-import "prismjs/themes/prism-tomorrow.css";
+import { AppContext } from "../../context/revoltjs/RevoltClient";
 
-import MarkdownKatex from "@traptitech/markdown-it-katex";
-import MarkdownSpoilers from "@traptitech/markdown-it-spoiler";
+import { generateEmoji } from "../common/Emoji";
 
-// @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";
+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
+        copycode: (element: HTMLDivElement) => void;
     }
 }
 
-
 // Handler for code block copy.
 if (typeof window !== "undefined") {
-    window.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.textContent?.trim() ?? '');
+                navigator.clipboard.writeText(code.textContent?.trim() ?? "");
             }
         } catch (e) {}
     };
@@ -46,104 +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>`;
-    }
+
+        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);
-    };
+    .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
+        internalHandleURL: (element: HTMLAnchorElement) => void;
     }
 }
 
-// Handler for internal links, pushes events to React using magic.
-if (typeof window !== "undefined") {
-    window.internalHandleURL = function(element: HTMLAnchorElement) {
-        const url = new URL(element.href, location.href);
-        const pathname = url.pathname;
-
-        if (pathname.startsWith("/@")) {
-            internalEmit("Intermediate", "openProfile", pathname.substr(2));
-        } else {
-            internalEmit("Intermediate", "navigate", pathname);
-        }
-    };
-}
-
-md.renderer.rules.link_open = function(tokens, idx, options, env, self) {
-    let internal;
-    const hIndex = tokens[idx].attrIndex("href");
-    if (hIndex >= 0) {
-        try {
-            // For internal links, we should use our own handler to use react-router history.
-            // @ts-ignore
-            const href = tokens[idx].attrs[hIndex][1];
-            const url = new URL(href, location.href);
-
-            if (url.hostname === location.hostname) {
-                internal = true;
-                // I'm sorry.
-                tokens[idx].attrPush([
-                    "onclick",
-                    "internalHandleURL(this); return false"
-                ]);
-
-                if (url.pathname.startsWith("/@")) {
-                    tokens[idx].attrPush(["data-type", "mention"]);
-                }
-            }
-        } catch (err) {
-            // Ignore the error, treat as normal link.
-        }
-    }
-
-    if (!internal) {
-        // Add target=_blank for external links.
-        const aIndex = tokens[idx].attrIndex("target");
-
-        if (aIndex < 0) {
-            tokens[idx].attrPush(["target", "_blank"]);
-        } else {
-            try {
-                // @ts-ignore
-                tokens[idx].attrs[aIndex][1] = "_blank";
-            } catch (_) {}
-        }
-    }
-
-    return defaultRender(tokens, idx, options, env, self);
-};
-
-md.renderer.rules.emoji = function(token, idx) {
+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;
@@ -151,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) {
@@ -162,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);
+
+            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 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 = ev.currentTarget;
-                    if (element.classList.contains("spoiler")) {
-                        element.classList.add("shown");
-                    }
-                }
-            }}
         />
     );
 }

src/components/native/Titlebar.tsx

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

src/components/navigation/BottomNavigation.tsx

-import IconButton from "../ui/IconButton";
-import UserIcon from "../common/user/UserIcon";
-import styled, { css } from "styled-components";
-import { useSelf } from "../../context/revoltjs/hooks";
+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 { Message, Group } from "@styled-icons/boxicons-solid";
-import { LastOpened } from "../../redux/reducers/last_opened";
+
 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 NavigationBase = styled.div`
+const Base = styled.div`
+    background: var(--secondary-background);
+`;
+
+const Navbar = styled.div`
     z-index: 100;
-    height: 50px;
+    max-width: 500px;
+    margin: 0 auto;
     display: flex;
-    background: var(--secondary-background);
+    height: var(--bottom-navigation-height);
 `;
 
 const Button = styled.a<{ active: boolean }>`
     flex: 1;
 
-    > a, > div, > a > div {
+    > a,
+    > div,
+    > a > div {
         width: 100%;
         height: 100%;
     }
 
-    ${ props => props.active && css`
-        background: var(--hover);
-    ` }
+    > div,
+    > a > div {
+        padding: 0 20px;
+    }
+
+    ${(props) =>
+        props.active &&
+        css`
+            background: var(--hover);
+        `}
 `;
 
 interface Props {
-    lastOpened: LastOpened
+    lastOpened: LastOpened;
 }
 
-export function BottomNavigation({ lastOpened }: Props) {
-    const user = useSelf();
+export const BottomNavigation = observer(({ lastOpened }: Props) => {
+    const client = useClient();
+    const user = client.users.get(client.user!._id);
+
     const history = useHistory();
     const path = useLocation().pathname;
 
-    const channel_id = lastOpened['home'];
+    const channel_id = lastOpened["home"];
 
     const friendsActive = path.startsWith("/friends");
     const settingsActive = path.startsWith("/settings");
     const homeActive = !(friendsActive || settingsActive);
 
     return (
-        <NavigationBase>
-            <Button active={homeActive}>
-                <IconButton
-                    onClick={() => {
-                        if (settingsActive) {
-                            if (history.length > 0) {
-                                history.goBack();
+        <Base>
+            <Navbar>
+                <Button active={homeActive}>
+                    <IconButton
+                        onClick={() => {
+                            if (settingsActive) {
+                                if (history.length > 0) {
+                                    history.goBack();
+                                }
                             }
-                        }
-                        
-                        if (channel_id) {
-                            history.push(`/channel/${channel_id}`);
-                        } else {
-                            history.push('/');
-                        }
-                    }}>
-                    <Message size={24} />
-                </IconButton>
-            </Button>
-            <Button active={friendsActive}>
-                <ConditionalLink active={friendsActive} to="/friends">
-                    <IconButton>
-                        <Group size={25} />
-                    </IconButton>
-                </ConditionalLink>
-            </Button>
-            <Button active={settingsActive}>
-                <ConditionalLink active={settingsActive} to="/settings">
-                    <IconButton>
-                        <UserIcon target={user} size={26} status={true} />
+
+                            if (channel_id) {
+                                history.push(`/channel/${channel_id}`);
+                            } else {
+                                history.push("/");
+                            }
+                        }}>
+                        <Message size={24} />
                     </IconButton>
-                </ConditionalLink>
-            </Button>
-        </NavigationBase>
+                </Button>
+                <Button active={friendsActive}>
+                    <ConditionalLink active={friendsActive} to="/friends">
+                        <IconButton>
+                            <Group size={25} />
+                        </IconButton>
+                    </ConditionalLink>
+                </Button>
+                {/*<Button active={searchActive}>
+                    <ConditionalLink active={searchActive} to="/search">
+                        <IconButton>
+                            <Search size={25} />
+                        </IconButton>
+                    </ConditionalLink>
+                </Button>
+                <Button active={inboxActive}>
+                    <ConditionalLink active={inboxActive} to="/inbox">
+                        <IconButton>
+                            <Inbox size={25} />
+                        </IconButton>
+                    </ConditionalLink>
+                </Button>*/}
+                <Button active={settingsActive}>
+                    <ConditionalLink active={settingsActive} to="/settings">
+                        <IconButton>
+                            <UserIcon target={user} size={26} status={true} />
+                        </IconButton>
+                    </ConditionalLink>
+                </Button>
+            </Navbar>
+        </Base>
     );
-}
+});
 
-export default connectState(BottomNavigation, state => {
+export default connectState(BottomNavigation, (state) => {
     return {
-        lastOpened: state.lastOpened
-    }
+        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 SidebarBase from "./SidebarBase";
 import MemberSidebar from "./right/MemberSidebar";
 
 export default function RightSidebar() {
@@ -16,4 +16,4 @@ export default function RightSidebar() {
             </Switch>
         </SidebarBase>
     );
-};
+}

src/components/navigation/SidebarBase.tsx

 import styled, { css } from "styled-components";
+
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
 export default styled.div`
@@ -18,9 +19,12 @@ export const GenericSidebarBase = styled.div<{ padding?: boolean }>`
     background: var(--secondary-background);
     border-end-start-radius: 8px;
 
-    ${ props => props.padding && isTouchscreenDevice && css`
-        padding-bottom: 50px;
-    ` }
+    ${(props) =>
+        props.padding &&
+        isTouchscreenDevice &&
+        css`
+            padding-bottom: 50px;
+        `}
 `;
 
 export const GenericSidebarList = styled.div`

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 classNames from "classnames";
+import { attachContextMenu } from "preact-context-menu";
 import { Localizer, Text } from "preact-i18n";
-import { X, Crown } from "@styled-icons/boxicons-regular";
-import { Children } from "../../../types/Preact";
-import UserIcon from '../../common/user/UserIcon';
-import ChannelIcon from '../../common/ChannelIcon';
-import UserStatus from '../../common/user/UserStatus';
-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';
+import { stopPropagation } from "../../../lib/stopPropagation";
 
-type CommonProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as'> & {
-    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(props: UserProps) {
-    const { active, alert, alertCount, user, context, channel, ...divProps } = props;
+export const UserButton = observer((props: UserProps) => {
+    const { active, alert, alertCount, user, context, channel, ...divProps } =
+        props;
     const { openScreen } = useIntermediate();
 
     return (
-        <div {...divProps}
+        <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,
             })}>
-            <UserIcon className={styles.avatar} target={user} size={32} status />
+            <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" />
-                                }
-                            >
+                                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 &&
-                    <IconButton className={styles.icon}
-                        onClick={e => stopPropagation(e) && openScreen({ id: 'special_prompt', type: 'close_dm', target: channel })}>
+                {!isTouchscreenDevice && channel && (
+                    <IconButton
+                        className={styles.icon}
+                        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 & { unread?: string },
-    user?: Users.User
-    compact?: boolean
-}
+    channel: Channel & { unread?: string };
+    user?: User;
+    compact?: boolean;
+};
 
-export function ChannelButton(props: ChannelProps) {
-    const { active, alert, alertCount, channel, user, compact, ...divProps } = props;
+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 }} />
+    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}
+        <div
+            {...divProps}
             data-active={active}
-            data-alert={typeof alert === 'string'}
-            aria-label={{}} /*FIXME: ADD ARIA LABEL*/
+            data-alert={typeof alert === "string"}
+            aria-label={channel.name}
             className={classNames(styles.item, { [styles.compact]: compact })}
-            onContextMenu={attachContextMenu('Menu', { channel: channel._id, unread: typeof channel.unread !== 'undefined' })}>
-            <ChannelIcon className={styles.avatar} target={channel} size={compact ? 24 : 32} />
+            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;
+    const {
+        active,
+        alert,
+        alertCount,
+        onClick,
+        className,
+        children,
+        compact,
+        ...divProps
+    } = props;
 
     return (
-        <div {...divProps}
-            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>
-    )
+    );
 }