src/assets/sounds/Audio.ts

-import message from './message.mp3';
-import outbound from './outbound.mp3';
-import call_join from './call_join.mp3';
-import call_leave from './call_leave.mp3';
+import call_join from "./call_join.mp3";
+import call_leave from "./call_leave.mp3";
+import message from "./message.mp3";
+import outbound from "./outbound.mp3";
 
 const SoundMap: { [key in Sounds]: string } = {
     message,
     outbound,
     call_join,
-    call_leave
-}
+    call_leave,
+};
 
-export type Sounds = 'message' | 'outbound' | 'call_join' | 'call_leave';
-export const SOUNDS_ARRAY: Sounds[] = [ 'message', 'outbound', 'call_join', 'call_leave' ];
+export type Sounds = "message" | "outbound" | "call_join" | "call_leave";
+export const SOUNDS_ARRAY: Sounds[] = [
+    "message",
+    "outbound",
+    "call_join",
+    "call_leave",
+];
 
 export function playSound(sound: Sounds) {
-    let file = SoundMap[sound];
-    let el = new Audio(file);
+    const file = SoundMap[sound];
+    const el = new Audio(file);
     try {
         el.play();
     } catch (err) {
-        console.error('Failed to play audio file', file, err);
+        console.error("Failed to play audio file", file, err);
     }
 }

src/components/common/AgeGate.tsx

+import { observer } from "mobx-react-lite";
+import { useHistory } from "react-router-dom";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+import { useState } from "preact/hooks";
+
+import { dispatch, getState } from "../../redux";
+
+import Button from "../ui/Button";
+import Checkbox from "../ui/Checkbox";
+
+import { Children } from "../../types/Preact";
+
+const Base = styled.div`
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    padding: 12px;
+
+    img {
+        height: 150px;
+    }
+
+    .subtext {
+        color: var(--secondary-foreground);
+        margin-bottom: 12px;
+        font-size: 14px;
+    }
+
+    .actions {
+        margin-top: 20px;
+        display: flex;
+        gap: 12px;
+    }
+`;
+
+type Props = {
+    gated: boolean;
+    children: Children;
+} & {
+    type: "channel";
+    channel: Channel;
+};
+
+export default observer((props: Props) => {
+    const history = useHistory();
+    const [consent, setConsent] = useState(
+        getState().sectionToggle["nsfw"] ?? false,
+    );
+    const [ageGate, setAgeGate] = useState(false);
+
+    if (ageGate || !props.gated) {
+        return <>{props.children}</>;
+    }
+    if (
+        !(
+            props.channel.channel_type === "Group" ||
+            props.channel.channel_type === "TextChannel"
+        )
+    )
+        return <>{props.children}</>;
+
+    return (
+        <Base>
+            <img
+                loading="eager"
+                src={"https://static.revolt.chat/emoji/mutant/26a0.svg"}
+                draggable={false}
+            />
+            <h2>{props.channel.name}</h2>
+            <span className="subtext">
+                <Text id={`app.main.channel.nsfw.${props.type}.marked`} />{" "}
+                <a href="#">
+                    <Text id={`app.main.channel.nsfw.learn_more`} />
+                </a>
+            </span>
+
+            <Checkbox
+                checked={consent}
+                onChange={(v) => {
+                    setConsent(v);
+                    if (v) {
+                        dispatch({
+                            type: "SECTION_TOGGLE_SET",
+                            id: "nsfw",
+                            state: true,
+                        });
+                    } else {
+                        dispatch({ type: "SECTION_TOGGLE_UNSET", id: "nsfw" });
+                    }
+                }}>
+                <Text id="app.main.channel.nsfw.confirm" />
+            </Checkbox>
+            <div className="actions">
+                <Button contrast onClick={() => history.goBack()}>
+                    <Text id="app.special.modals.actions.back" />
+                </Button>
+                <Button contrast onClick={() => consent && setAgeGate(true)}>
+                    <Text id={`app.main.channel.nsfw.${props.type}.confirm`} />
+                </Button>
+            </div>
+        </Base>
+    );
+});

src/components/common/ChannelIcon.tsx

-import { useContext } from "preact/hooks";
-import { Channels } from "revolt.js/dist/api/objects";
 import { Hash, VolumeFull } from "@styled-icons/boxicons-regular";
-import { ImageIconBase, IconBaseProps } from "./IconBase";
+import { observer } from "mobx-react-lite";
+import { Channel } from "revolt.js/dist/maps/Channels";
+
+import { useContext } from "preact/hooks";
+
 import { AppContext } from "../../context/revoltjs/RevoltClient";
 
-interface Props extends IconBaseProps<Channels.GroupChannel | Channels.TextChannel | Channels.VoiceChannel> {
+import { ImageIconBase, IconBaseProps } from "./IconBase";
+import fallback from "./assets/group.png";
+
+interface Props extends IconBaseProps<Channel> {
     isServerChannel?: boolean;
 }
 
-import fallback from './assets/group.png';
-
-export default function ChannelIcon(props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>) {
-    const client = useContext(AppContext);
-
-    const { size, target, attachment, isServerChannel: server, animate, children, as, ...imgProps } = props;
-    const iconURL = client.generateFileURL(target?.icon ?? attachment, { max_side: 256 }, animate);
-    const isServerChannel = server || (target && (target.channel_type === 'TextChannel' || target.channel_type === 'VoiceChannel'));
-
-    if (typeof iconURL === 'undefined') {
-        if (isServerChannel) {
-            if (target?.channel_type === 'VoiceChannel') {
-                return (
-                    <VolumeFull size={size} />
-                )
-            } else {
-                return (
-                    <Hash size={size} />
-                )
+export default observer(
+    (
+        props: Props &
+            Omit<
+                JSX.HTMLAttributes<HTMLImageElement>,
+                keyof Props | "children" | "as"
+            >,
+    ) => {
+        const client = useContext(AppContext);
+
+        const {
+            size,
+            target,
+            attachment,
+            isServerChannel: server,
+            animate,
+            ...imgProps
+        } = props;
+        const iconURL = client.generateFileURL(
+            target?.icon ?? attachment,
+            { max_side: 256 },
+            animate,
+        );
+        const isServerChannel =
+            server ||
+            (target &&
+                (target.channel_type === "TextChannel" ||
+                    target.channel_type === "VoiceChannel"));
+
+        if (typeof iconURL === "undefined") {
+            if (isServerChannel) {
+                if (target?.channel_type === "VoiceChannel") {
+                    return <VolumeFull size={size} />;
+                }
+                return <Hash size={size} />;
             }
         }
-    }
-
-    return (
-        // ! fixme: replace fallback with <picture /> + <source />
-        <ImageIconBase {...imgProps}
-            width={size}
-            height={size}
-            aria-hidden="true"
-            square={isServerChannel}
-            src={iconURL ?? fallback} />
-    );
-}
+
+        return (
+            // ! TODO: replace fallback with <picture /> + <source />
+            <ImageIconBase
+                {...imgProps}
+                width={size}
+                height={size}
+                loading="lazy"
+                aria-hidden="true"
+                square={isServerChannel}
+                src={iconURL ?? fallback}
+            />
+        );
+    },
+);

src/components/common/CollapsibleSection.tsx

+import { ChevronDown } from "@styled-icons/boxicons-regular";
+
+import { State, store } from "../../redux";
+import { Action } from "../../redux/reducers";
+
+import Details from "../ui/Details";
+
+import { Children } from "../../types/Preact";
+
+interface Props {
+    id: string;
+    defaultValue: boolean;
+
+    sticky?: boolean;
+    large?: boolean;
+
+    summary: Children;
+    children: Children;
+}
+
+export default function CollapsibleSection({
+    id,
+    defaultValue,
+    summary,
+    children,
+    ...detailsProps
+}: Props) {
+    const state: State = store.getState();
+
+    function setState(state: boolean) {
+        if (state === defaultValue) {
+            store.dispatch({
+                type: "SECTION_TOGGLE_UNSET",
+                id,
+            } as Action);
+        } else {
+            store.dispatch({
+                type: "SECTION_TOGGLE_SET",
+                id,
+                state,
+            } as Action);
+        }
+    }
+
+    return (
+        <Details
+            open={state.sectionToggle[id] ?? defaultValue}
+            onToggle={(e) => setState(e.currentTarget.open)}
+            {...detailsProps}>
+            <summary>
+                <div class="padding">
+                    <ChevronDown size={20} />
+                    {summary}
+                </div>
+            </summary>
+            {children}
+        </Details>
+    );
+}

src/components/common/Emoji.tsx

-import { EmojiPacks } from '../../redux/reducers/settings';
+import { EmojiPacks } from "../../redux/reducers/settings";
 
-var EMOJI_PACK = 'mutant';
+let EMOJI_PACK = "mutant";
 const REVISION = 3;
 
 export function setEmojiPack(pack: EmojiPacks) {
@@ -13,7 +13,7 @@ function codePoints(rune: string) {
     const pairs = [];
     let low = 0;
     let i = 0;
-    
+
     while (i < rune.length) {
         const charCode = rune.charCodeAt(i++);
         if (low) {
@@ -25,7 +25,7 @@ function codePoints(rune: string) {
             pairs.push(charCode);
         }
     }
-    
+
     return pairs;
 }
 
@@ -33,30 +33,41 @@ function codePoints(rune: string) {
 // scripts/build.js#344
 // grabTheRightIcon(rawText);
 const UFE0Fg = /\uFE0F/g;
-const U200D = String.fromCharCode(0x200D);
+const U200D = String.fromCharCode(0x200d);
 function toCodePoint(rune: string) {
-    return codePoints(rune.indexOf(U200D) < 0 ? rune.replace(UFE0Fg, '') : rune)
+    return codePoints(rune.indexOf(U200D) < 0 ? rune.replace(UFE0Fg, "") : rune)
         .map((val) => val.toString(16))
-        .join("-")
+        .join("-");
 }
 
 function parseEmoji(emoji: string) {
-    let codepoint = toCodePoint(emoji);
+    const codepoint = toCodePoint(emoji);
     return `https://static.revolt.chat/emoji/${EMOJI_PACK}/${codepoint}.svg?rev=${REVISION}`;
 }
 
-export default function Emoji({ emoji, size }: { emoji: string, size?: number }) {
+export default function Emoji({
+    emoji,
+    size,
+}: {
+    emoji: string;
+    size?: number;
+}) {
     return (
         <img
             alt={emoji}
+            loading="lazy"
             className="emoji"
             draggable={false}
             src={parseEmoji(emoji)}
-            style={size ? { width: `${size}px`, height: `${size}px` } : undefined}
+            style={
+                size ? { width: `${size}px`, height: `${size}px` } : undefined
+            }
         />
-    )
+    );
 }
 
 export function generateEmoji(emoji: string) {
-    return `<img class="emoji" draggable="false" alt="${emoji}" src="${parseEmoji(emoji)}" />`;
+    return `<img loading="lazy" class="emoji" draggable="false" alt="${emoji}" src="${parseEmoji(
+        emoji,
+    )}" />`;
 }

src/components/common/IconBase.tsx

-import { Attachment } from "revolt.js/dist/api/objects";
+import { Attachment } from "revolt-api/types/Autumn";
 import styled, { css } from "styled-components";
 
 export interface IconBaseProps<T> {
@@ -6,11 +6,13 @@ export interface IconBaseProps<T> {
     attachment?: Attachment;
 
     size: number;
+    hover?: boolean;
     animate?: boolean;
 }
 
 interface IconModifiers {
-    square?: boolean
+    square?: boolean;
+    hover?: boolean;
 }
 
 export default styled.svg<IconModifiers>`
@@ -21,17 +23,37 @@ export default styled.svg<IconModifiers>`
         height: 100%;
         object-fit: cover;
 
-        ${ props => !props.square && css`
-            border-radius: 50%;
-        ` }
+        ${(props) =>
+            !props.square &&
+            css`
+                border-radius: 50%;
+            `}
     }
+
+    ${(props) =>
+        props.hover &&
+        css`
+            &:hover .icon {
+                filter: brightness(0.8);
+            }
+        `}
 `;
 
 export const ImageIconBase = styled.img<IconModifiers>`
     flex-shrink: 0;
     object-fit: cover;
 
-    ${ props => !props.square && css`
-        border-radius: 50%;
-    ` }
+    ${(props) =>
+        !props.square &&
+        css`
+            border-radius: 50%;
+        `}
+
+    ${(props) =>
+        props.hover &&
+        css`
+            &:hover img {
+                filter: brightness(0.8);
+            }
+        `}
 `;

src/components/common/LocaleSelector.tsx

-import ComboBox from "../ui/ComboBox";
+import { dispatch } from "../../redux";
 import { connectState } from "../../redux/connector";
-import { WithDispatcher } from "../../redux/reducers";
-import { LanguageEntry, Languages } from "../../context/Locale";
 
-type Props = WithDispatcher & {
+import { Language, Languages } from "../../context/Locale";
+
+import ComboBox from "../ui/ComboBox";
+
+type Props = {
     locale: string;
 };
 
@@ -11,18 +13,16 @@ export function LocaleSelector(props: Props) {
     return (
         <ComboBox
             value={props.locale}
-            onChange={e =>
-                props.dispatcher &&
-                props.dispatcher({
+            onChange={(e) =>
+                dispatch({
                     type: "SET_LOCALE",
-                    locale: e.currentTarget.value as any
+                    locale: e.currentTarget.value as Language,
                 })
-            }
-        >
-            {Object.keys(Languages).map(x => {
-                const l = (Languages as any)[x] as LanguageEntry;
+            }>
+            {Object.keys(Languages).map((x) => {
+                const l = Languages[x as keyof typeof Languages];
                 return (
-                    <option value={x}>
+                    <option value={x} key={x}>
                         {l.emoji} {l.display}
                     </option>
                 );
@@ -31,12 +31,8 @@ export function LocaleSelector(props: Props) {
     );
 }
 
-export default connectState(
-    LocaleSelector,
-    state => {
-        return {
-            locale: state.locale
-        };
-    },
-    true
-);
+export default connectState(LocaleSelector, (state) => {
+    return {
+        locale: state.locale,
+    };
+});

src/components/common/ServerHeader.tsx

-import Header from "../ui/Header";
-import styled from "styled-components";
-import { Link } from "react-router-dom";
-import IconButton from "../ui/IconButton";
 import { Cog } from "@styled-icons/boxicons-solid";
-import { Server } from "revolt.js/dist/api/objects";
+import { observer } from "mobx-react-lite";
+import { Link } from "react-router-dom";
 import { ServerPermission } from "revolt.js/dist/api/permissions";
-import { HookContext, useServerPermission } from "../../context/revoltjs/hooks";
+import { Server } from "revolt.js/dist/maps/Servers";
+import styled from "styled-components";
+
+import Header from "../ui/Header";
+import IconButton from "../ui/IconButton";
 
 interface Props {
-    server: Server,
-    ctx: HookContext
+    server: Server;
 }
 
 const ServerName = styled.div`
     flex-grow: 1;
 `;
 
-export default function ServerHeader({ server, ctx }: Props) {
-    const permissions = useServerPermission(server._id, ctx);
-    const bannerURL = ctx.client.servers.getBannerURL(server._id, { width: 480 }, true);
+export default observer(({ server }: Props) => {
+    const bannerURL = server.generateBannerURL({ width: 480 });
 
     return (
-        <Header borders
+        <Header
+            borders
             placement="secondary"
-            background={typeof bannerURL !== 'undefined'}
-            style={{ background: bannerURL ? `linear-gradient(to bottom, transparent 50%, #000e), url('${bannerURL}')` : undefined }}>
-            <ServerName>
-                { server.name }
-            </ServerName>
-            { (permissions & ServerPermission.ManageServer) > 0 && <div className="actions">
-                <Link to={`/server/${server._id}/settings`}>
-                    <IconButton>
-                        <Cog size={24} />
-                    </IconButton>
-                </Link>
-            </div> }
+            background={typeof bannerURL !== "undefined"}
+            style={{
+                background: bannerURL ? `url('${bannerURL}')` : undefined,
+            }}>
+            <ServerName>{server.name}</ServerName>
+            {(server.permission & ServerPermission.ManageServer) > 0 && (
+                <div className="actions">
+                    <Link to={`/server/${server._id}/settings`}>
+                        <IconButton>
+                            <Cog size={24} />
+                        </IconButton>
+                    </Link>
+                </div>
+            )}
         </Header>
-    )
-}
+    );
+});

src/components/common/ServerIcon.tsx

+import { observer } from "mobx-react-lite";
+import { Server } from "revolt.js/dist/maps/Servers";
 import styled from "styled-components";
+
 import { useContext } from "preact/hooks";
-import { Server } from "revolt.js/dist/api/objects";
-import { IconBaseProps, ImageIconBase } from "./IconBase";
+
 import { AppContext } from "../../context/revoltjs/RevoltClient";
 
+import { IconBaseProps, ImageIconBase } from "./IconBase";
+
 interface Props extends IconBaseProps<Server> {
     server_name?: string;
 }
 
 const ServerText = styled.div`
     display: grid;
-    padding: .2em;
+    padding: 0.2em;
     overflow: hidden;
     border-radius: 50%;
     place-items: center;
@@ -18,30 +22,47 @@ const ServerText = styled.div`
     background: var(--primary-background);
 `;
 
-const fallback = '/assets/group.png';
-export default function ServerIcon(props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>) {
-    const client = useContext(AppContext);
+// const fallback = "/assets/group.png";
+export default observer(
+    (
+        props: Props &
+            Omit<
+                JSX.HTMLAttributes<HTMLImageElement>,
+                keyof Props | "children" | "as"
+            >,
+    ) => {
+        const client = useContext(AppContext);
+
+        const { target, attachment, size, animate, server_name, ...imgProps } =
+            props;
+        const iconURL = client.generateFileURL(
+            target?.icon ?? attachment,
+            { max_side: 256 },
+            animate,
+        );
 
-    const { target, attachment, size, animate, server_name, children, as, ...imgProps } = props;
-    const iconURL = client.generateFileURL(target?.icon ?? attachment, { max_side: 256 }, animate);
+        if (typeof iconURL === "undefined") {
+            const name = target?.name ?? server_name ?? "";
 
-    if (typeof iconURL === 'undefined') {
-        const name = target?.name ?? server_name ?? '';
+            return (
+                <ServerText style={{ width: size, height: size }}>
+                    {name
+                        .split(" ")
+                        .map((x) => x[0])
+                        .filter((x) => typeof x !== "undefined")}
+                </ServerText>
+            );
+        }
 
         return (
-            <ServerText style={{ width: size, height: size }}>
-                { name.split(' ')
-                      .map(x => x[0])
-                      .filter(x => typeof x !== 'undefined') }
-            </ServerText>
-        )
-    }
-
-    return (
-        <ImageIconBase {...imgProps}
-            width={size}
-            height={size}
-            aria-hidden="true"
-            src={iconURL} />
-    );
-}
+            <ImageIconBase
+                {...imgProps}
+                width={size}
+                height={size}
+                src={iconURL}
+                loading="lazy"
+                aria-hidden="true"
+            />
+        );
+    },
+);

src/components/common/Tooltip.tsx

-import { Text } from "preact-i18n";
+import Tippy, { TippyProps } from "@tippyjs/react";
 import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+
 import { Children } from "../../types/Preact";
-import Tippy, { TippyProps } from '@tippyjs/react';
 
-type Props = Omit<TippyProps, 'children'> & {
+type Props = Omit<TippyProps, "children"> & {
     children: Children;
     content: Children;
-}
+};
 
 export default function Tooltip(props: Props) {
     const { children, content, ...tippyProps } = props;
@@ -14,8 +16,8 @@ export default function Tooltip(props: Props) {
     return (
         <Tippy content={content} {...tippyProps}>
             {/*
-            // @ts-expect-error */}
-            <div>{ children }</div>
+            // @ts-expect-error Type mis-match. */}
+            <div style={`display: flex;`}>{children}</div>
         </Tippy>
     );
 }
@@ -24,24 +26,35 @@ const PermissionTooltipBase = styled.div`
     display: flex;
     align-items: center;
     flex-direction: column;
+
     span {
         font-weight: 700;
         text-transform: uppercase;
         color: var(--secondary-foreground);
         font-size: 11px;
     }
+
     code {
-        font-family: 'Fira Mono';
+        font-family: var(--monospace-font);
     }
 `;
 
-export function PermissionTooltip(props: Omit<Props, 'content'> & { permission: string }) {
+export function PermissionTooltip(
+    props: Omit<Props, "content"> & { permission: string },
+) {
     const { permission, ...tooltipProps } = props;
 
     return (
-        <Tooltip content={<PermissionTooltipBase>
-            <span><Text id="app.permissions.required" /></span>
-            <code>{ permission }</code>
-        </PermissionTooltipBase>} {...tooltipProps} />
-    )
+        <Tooltip
+            content={
+                <PermissionTooltipBase>
+                    <span>
+                        <Text id="app.permissions.required" />
+                    </span>
+                    <code>{permission}</code>
+                </PermissionTooltipBase>
+            }
+            {...tooltipProps}
+        />
+    );
 }

src/components/common/UpdateIndicator.tsx

-import { updateSW } from "../../main";
-import IconButton from "../ui/IconButton";
-import { ThemeContext } from "../../context/Theme";
-import { Download } from "@styled-icons/boxicons-regular";
-import { internalSubscribe } from "../../lib/eventEmitter";
+/* eslint-disable react-hooks/rules-of-hooks */
+import { Download, CloudDownload } from "@styled-icons/boxicons-regular";
+
 import { useContext, useEffect, useState } from "preact/hooks";
 
-var pendingUpdate = false;
-internalSubscribe('PWA', 'update', () => pendingUpdate = true);
+import { internalSubscribe } from "../../lib/eventEmitter";
+
+import { ThemeContext } from "../../context/Theme";
 
-export default function UpdateIndicator() {
-    const [ pending, setPending ] = useState(pendingUpdate);
+import IconButton from "../ui/IconButton";
+
+import { updateSW } from "../../main";
+import Tooltip from "./Tooltip";
+
+let pendingUpdate = false;
+internalSubscribe("PWA", "update", () => (pendingUpdate = true));
+
+interface Props {
+    style: "titlebar" | "channel";
+}
+
+export default function UpdateIndicator({ style }: Props) {
+    const [pending, setPending] = useState(pendingUpdate);
 
     useEffect(() => {
-        return internalSubscribe('PWA', 'update', () => setPending(true));
+        return internalSubscribe("PWA", "update", () => setPending(true));
     });
 
-    if (!pending) return;
+    if (!pending) return null;
     const theme = useContext(ThemeContext);
 
+    if (style === "titlebar") {
+        return (
+            <div class="actions">
+                <Tooltip
+                    content="A new update is available!"
+                    placement="bottom">
+                    <div onClick={() => updateSW(true)}>
+                        <CloudDownload size={22} color={theme.success} />
+                    </div>
+                </Tooltip>
+            </div>
+        );
+    }
+
+    if (window.isNative) return null;
+
     return (
         <IconButton onClick={() => updateSW(true)}>
             <Download size={22} color={theme.success} />
         </IconButton>
-    )
+    );
 }

src/components/common/messaging/Message.tsx

-import Embed from "./embed/Embed";
-import UserIcon from "../user/UserIcon";
-import { Username } from "../user/UserShort";
-import Markdown from "../../markdown/Markdown";
-import { Children } from "../../../types/Preact";
-import Attachment from "./attachments/Attachment";
+import { observer } from "mobx-react-lite";
+import { Message as MessageObject } from "revolt.js/dist/maps/Messages";
+
 import { attachContextMenu } from "preact-context-menu";
-import { useUser } from "../../../context/revoltjs/hooks";
+import { memo } from "preact/compat";
+import { useState } from "preact/hooks";
+
 import { QueuedMessage } from "../../../redux/reducers/queue";
-import { MessageObject } from "../../../context/revoltjs/util";
-import MessageBase, { MessageContent, MessageDetail, MessageInfo } from "./MessageBase";
+
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { useClient } from "../../../context/revoltjs/RevoltClient";
+
 import Overline from "../../ui/Overline";
-import { useContext } from "preact/hooks";
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
-import { memo } from "preact/compat";
+
+import { Children } from "../../../types/Preact";
+import Markdown from "../../markdown/Markdown";
+import UserIcon from "../user/UserIcon";
+import { Username } from "../user/UserShort";
+import MessageBase, {
+    MessageContent,
+    MessageDetail,
+    MessageInfo,
+} from "./MessageBase";
+import Attachment from "./attachments/Attachment";
 import { MessageReply } from "./attachments/MessageReply";
+import Embed from "./embed/Embed";
 
 interface Props {
-    attachContext?: boolean
-    queued?: QueuedMessage
-    message: MessageObject
-    contrast?: boolean
-    content?: Children
-    head?: boolean
+    attachContext?: boolean;
+    queued?: QueuedMessage;
+    message: MessageObject;
+    highlight?: boolean;
+    contrast?: boolean;
+    content?: Children;
+    head?: boolean;
 }
 
-function Message({ attachContext, message, contrast, content: replacement, head: preferHead, queued }: Props) {
-    // TODO: Can improve re-renders here by providing a list
-    // TODO: of dependencies. We only need to update on u/avatar.
-    const user = useUser(message.author);
-    const client = useContext(AppContext);
+const Message = observer(
+    ({
+        highlight,
+        attachContext,
+        message,
+        contrast,
+        content: replacement,
+        head: preferHead,
+        queued,
+    }: Props) => {
+        const client = useClient();
+        const user = message.author;
 
-    const content = message.content as string;
-    const head = preferHead || (message.replies && message.replies.length > 0);
-    const userContext = attachContext ? attachContextMenu('Menu', { user: message.author, contextualChannel: message.channel }) : undefined as any; // ! FIXME: tell fatal to make this type generic
+        const { openScreen } = useIntermediate();
 
-    return (
-        <div id={message._id}>
-            { message.replies?.map((message_id, index) => <MessageReply index={index} id={message_id} channel={message.channel} />) }
-            <MessageBase
-                head={head && !(message.replies && message.replies.length > 0)}
-                contrast={contrast}
-                sending={typeof queued !== 'undefined'}
-                mention={message.mentions?.includes(client.user!._id)}
-                failed={typeof queued?.error !== 'undefined'}
-                onContextMenu={attachContext ? attachContextMenu('Menu', { message, contextualChannel: message.channel, queued }) : undefined}>
-                <MessageInfo>
-                    { head ?
-                        <UserIcon target={user} size={36} onContextMenu={userContext} /> :
-                        <MessageDetail message={message} position="left" /> }
-                </MessageInfo>
-                <MessageContent>
-                    { head && <span className="detail">
-                        <span className="author">
-                            <Username user={user} onContextMenu={userContext} />
-                        </span>
-                        <MessageDetail message={message} position="top" />
-                    </span> }
-                    { replacement ?? <Markdown content={content} /> }
-                    { queued?.error && <Overline type="error" error={queued.error} /> }
-                    { message.attachments?.map((attachment, index) =>
-                        <Attachment key={index} attachment={attachment} hasContent={ index > 0 || content.length > 0 } />) }
-                    { message.embeds?.map((embed, index) =>
-                        <Embed key={index} embed={embed} />) }
-                </MessageContent>
-            </MessageBase>
-        </div>
-    )
-}
+        const content = message.content as string;
+        const head =
+            preferHead || (message.reply_ids && message.reply_ids.length > 0);
+
+        // ! TODO: tell fatal to make this type generic
+        // bree: Fatal please...
+        const userContext = attachContext
+            ? (attachContextMenu("Menu", {
+                  user: message.author_id,
+                  contextualChannel: message.channel_id,
+                  // eslint-disable-next-line
+              }) as any)
+            : undefined;
+
+        const openProfile = () =>
+            openScreen({ id: "profile", user_id: message.author_id });
+
+        // ! FIXME(?): animate on hover
+        const [animate, setAnimate] = useState(false);
+
+        return (
+            <div id={message._id}>
+                {message.reply_ids?.map((message_id, index) => (
+                    <MessageReply
+                        key={message_id}
+                        index={index}
+                        id={message_id}
+                        channel={message.channel!}
+                    />
+                ))}
+                <MessageBase
+                    highlight={highlight}
+                    head={
+                        (head &&
+                            !(
+                                message.reply_ids &&
+                                message.reply_ids.length > 0
+                            )) ??
+                        false
+                    }
+                    contrast={contrast}
+                    sending={typeof queued !== "undefined"}
+                    mention={message.mention_ids?.includes(client.user!._id)}
+                    failed={typeof queued?.error !== "undefined"}
+                    onContextMenu={
+                        attachContext
+                            ? attachContextMenu("Menu", {
+                                  message,
+                                  contextualChannel: message.channel_id,
+                                  queued,
+                              })
+                            : undefined
+                    }
+                    onMouseEnter={() => setAnimate(true)}
+                    onMouseLeave={() => setAnimate(false)}>
+                    <MessageInfo>
+                        {head ? (
+                            <UserIcon
+                                target={user}
+                                size={36}
+                                onContextMenu={userContext}
+                                onClick={openProfile}
+                                animate={animate}
+                            />
+                        ) : (
+                            <MessageDetail message={message} position="left" />
+                        )}
+                    </MessageInfo>
+                    <MessageContent>
+                        {head && (
+                            <span className="detail">
+                                <Username
+                                    className="author"
+                                    user={user}
+                                    onContextMenu={userContext}
+                                    onClick={openProfile}
+                                />
+                                <MessageDetail
+                                    message={message}
+                                    position="top"
+                                />
+                            </span>
+                        )}
+                        {replacement ?? <Markdown content={content} />}
+                        {queued?.error && (
+                            <Overline type="error" error={queued.error} />
+                        )}
+                        {message.attachments?.map((attachment, index) => (
+                            <Attachment
+                                key={index}
+                                attachment={attachment}
+                                hasContent={index > 0 || content.length > 0}
+                            />
+                        ))}
+                        {message.embeds?.map((embed, index) => (
+                            <Embed key={index} embed={embed} />
+                        ))}
+                    </MessageContent>
+                </MessageBase>
+            </div>
+        );
+    },
+);
 
 export default memo(Message);

src/components/common/messaging/MessageBase.tsx

-import dayjs from "dayjs";
-import Tooltip from "../Tooltip";
+import { observer } from "mobx-react-lite";
+import { Message } from "revolt.js/dist/maps/Messages";
+import styled, { css, keyframes } from "styled-components";
 import { decodeTime } from "ulid";
+
 import { Text } from "preact-i18n";
-import styled, { css } from "styled-components";
-import { MessageObject } from "../../../context/revoltjs/util";
+
+import { useDictionary } from "../../../lib/i18n";
+
+import { dayjs } from "../../../context/Locale";
+
+import Tooltip from "../Tooltip";
 
 export interface BaseMessageProps {
-    head?: boolean,
-    failed?: boolean,
-    mention?: boolean,
-    blocked?: boolean,
-    sending?: boolean,
-    contrast?: boolean
+    head?: boolean;
+    failed?: boolean;
+    mention?: boolean;
+    blocked?: boolean;
+    sending?: boolean;
+    contrast?: boolean;
+    highlight?: boolean;
 }
 
+const highlight = keyframes`
+    0% { background: var(--mention); }
+    66% { background: var(--mention); }
+    100% { background: transparent; }
+`;
+
 export default styled.div<BaseMessageProps>`
     display: flex;
-    overflow-x: none;
-    padding: .125rem;
+    overflow: none;
+    padding: 0.125rem;
     flex-direction: row;
-    padding-right: 16px;
+    padding-inline-end: 16px;
 
-    ${ props => props.contrast && css`
-        padding: .3rem;
-        border-radius: 4px;
-        background: var(--hover);
-    ` }
+    @media (pointer: coarse) {
+        user-select: none;
+    }
 
-    ${ props => props.head && css`
-        margin-top: 12px;
-    ` }
+    ${(props) =>
+        props.contrast &&
+        css`
+            padding: 0.3rem;
+            background: var(--hover);
+            border-radius: var(--border-radius);
+        `}
 
-    ${ props => props.mention && css`
-        background: var(--mention);
-    ` }
+    ${(props) =>
+        props.head &&
+        css`
+            margin-top: 12px;
+        `}
 
-    ${ props => props.blocked && css`
-        filter: blur(4px);
-        transition: 0.2s ease filter;
+    ${(props) =>
+        props.mention &&
+        css`
+            background: var(--mention);
+        `}
 
-        &:hover {
-            filter: none;
-        }
-    ` }
+    ${(props) =>
+        props.blocked &&
+        css`
+            filter: blur(4px);
+            transition: 0.2s ease filter;
 
-    ${ props => props.sending && css`
-        opacity: 0.8;
-        color: var(--tertiary-foreground);
-    ` }
+            &:hover {
+                filter: none;
+            }
+        `}
+
+    ${(props) =>
+        props.sending &&
+        css`
+            opacity: 0.8;
+            color: var(--tertiary-foreground);
+        `}
+
+    ${(props) =>
+        props.failed &&
+        css`
+            color: var(--error);
+        `}
 
-    ${ props => props.failed && css`
-        color: var(--error);
-    ` }
+    ${(props) =>
+        props.highlight &&
+        css`
+            animation-name: ${highlight};
+            animation-timing-function: ease;
+            animation-duration: 3s;
+        `}
 
     .detail {
         gap: 8px;
         display: flex;
         align-items: center;
+        flex-shrink: 0;
     }
 
     .author {
+        overflow: hidden;
         cursor: pointer;
-        
+        font-weight: 600 !important;
+
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        text-overflow: ellipsis;
+        white-space: normal;
+
         &:hover {
             text-decoration: underline;
         }
     }
-    
+
     .copy {
-        width: 0;
-        height: 0;
-        opacity: 0;
         display: block;
         overflow: hidden;
     }
@@ -92,80 +135,125 @@ export const MessageInfo = styled.div`
     flex-direction: row;
     justify-content: center;
 
-    ::selection {
-        background-color: transparent;
-        color: var(--tertiary-foreground);
+    .copyBracket {
+        opacity: 0;
+        position: absolute;
+    }
+
+    .copyTime {
+        opacity: 0;
+        position: absolute;
     }
 
     svg {
+        user-select: none;
         cursor: pointer;
+
+        &:active {
+            transform: translateY(1px);
+        }
     }
 
     time {
         opacity: 0;
     }
 
-    time, .edited {
+    time,
+    .edited {
+        margin-top: 1px;
         cursor: default;
         display: inline;
         font-size: 10px;
         color: var(--tertiary-foreground);
     }
+
+    time,
+    .edited > div {
+        &::selection {
+            background-color: transparent;
+            color: var(--tertiary-foreground);
+        }
+    }
+
+    .header {
+        cursor: pointer;
+    }
 `;
 
 export const MessageContent = styled.div`
     min-width: 0;
     flex-grow: 1;
     display: flex;
-    overflow: hidden;
-    font-size: 0.875rem;
+    // overflow: hidden;
     flex-direction: column;
     justify-content: center;
+    font-size: var(--text-size);
 `;
 
 export const DetailBase = styled.div`
+    flex-shrink: 0;
     gap: 4px;
     font-size: 10px;
     display: inline-flex;
     color: var(--tertiary-foreground);
+
+    .edited {
+        cursor: default;
+        &::selection {
+            background-color: transparent;
+            color: var(--tertiary-foreground);
+        }
+    }
 `;
 
-export function MessageDetail({ message, position }: { message: MessageObject, position: 'left' | 'top' }) {
-    if (position === 'left') {
-        if (message.edited) {
-            return (
-                <>
-                    <span className="copy">
-                        [<time>{dayjs(decodeTime(message._id)).format("H:mm")}</time>]
-                    </span>
-                    <span className="edited">
-                        <Tooltip content={dayjs(message.edited).format("LLLL")}>
-                            <Text id="app.main.channel.edited" />
-                        </Tooltip>
-                    </span>
-                </>
-            )
-        } else {
+export const MessageDetail = observer(
+    ({ message, position }: { message: Message; position: "left" | "top" }) => {
+        const dict = useDictionary();
+
+        if (position === "left") {
+            if (message.edited) {
+                return (
+                    <>
+                        <time className="copyTime">
+                            <i className="copyBracket">[</i>
+                            {dayjs(decodeTime(message._id)).format(
+                                dict.dayjs?.timeFormat,
+                            )}
+                            <i className="copyBracket">]</i>
+                        </time>
+                        <span className="edited">
+                            <Tooltip
+                                content={dayjs(message.edited).format("LLLL")}>
+                                <Text id="app.main.channel.edited" />
+                            </Tooltip>
+                        </span>
+                    </>
+                );
+            }
             return (
                 <>
                     <time>
-                        <i className="copy">[</i>
-                        { dayjs(decodeTime(message._id)).format("H:mm") }
-                        <i className="copy">]</i>
+                        <i className="copyBracket">[</i>
+                        {dayjs(decodeTime(message._id)).format(
+                            dict.dayjs?.timeFormat,
+                        )}
+                        <i className="copyBracket">]</i>
                     </time>
                 </>
-            )
+            );
         }
-    }
 
-    return (
-        <DetailBase>
-            <time>
-                {dayjs(decodeTime(message._id)).calendar()}
-            </time>
-            { message.edited && <Tooltip content={dayjs(message.edited).format("LLLL")}>
-                <Text id="app.main.channel.edited" />
-            </Tooltip> }
-        </DetailBase>
-    )
-}
+        return (
+            <DetailBase>
+                <time>{dayjs(decodeTime(message._id)).calendar()}</time>
+                {message.edited && (
+                    <Tooltip content={dayjs(message.edited).format("LLLL")}>
+                        <span className="edited">
+                            <Text id="app.main.channel.edited" />
+                        </span>
+                    </Tooltip>
+                )}
+            </DetailBase>
+        );
+    },
+);