src/components/common/IconBase.tsx

+import { Attachment } from "revolt-api/types/Autumn";
+import styled, { css } from "styled-components";
+
+export interface IconBaseProps<T> {
+    target?: T;
+    attachment?: Attachment;
+
+    size: number;
+    hover?: boolean;
+    animate?: boolean;
+}
+
+interface IconModifiers {
+    square?: boolean;
+    hover?: boolean;
+}
+
+export default styled.svg<IconModifiers>`
+    flex-shrink: 0;
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+
+        ${(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.hover &&
+        css`
+            &:hover img {
+                filter: brightness(0.8);
+            }
+        `}
+`;

src/components/common/LocaleSelector.tsx

+import { dispatch } from "../../redux";
+import { connectState } from "../../redux/connector";
+
+import { Language, Languages } from "../../context/Locale";
+
+import ComboBox from "../ui/ComboBox";
+
+type Props = {
+    locale: string;
+};
+
+export function LocaleSelector(props: Props) {
+    return (
+        <ComboBox
+            value={props.locale}
+            onChange={(e) =>
+                dispatch({
+                    type: "SET_LOCALE",
+                    locale: e.currentTarget.value as Language,
+                })
+            }>
+            {Object.keys(Languages).map((x) => {
+                const l = Languages[x as keyof typeof Languages];
+                return (
+                    <option value={x} key={x}>
+                        {l.emoji} {l.display}
+                    </option>
+                );
+            })}
+        </ComboBox>
+    );
+}
+
+export default connectState(LocaleSelector, (state) => {
+    return {
+        locale: state.locale,
+    };
+});

src/components/common/ServerHeader.tsx

+import { Cog } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
+import { Link } from "react-router-dom";
+import { ServerPermission } from "revolt.js/dist/api/permissions";
+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;
+}
+
+const ServerName = styled.div`
+    flex-grow: 1;
+`;
+
+export default observer(({ server }: Props) => {
+    const bannerURL = server.generateBannerURL({ width: 480 });
+
+    return (
+        <Header
+            borders
+            placement="secondary"
+            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 { 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: 0.2em;
+    overflow: hidden;
+    border-radius: 50%;
+    place-items: center;
+    color: var(--foreground);
+    background: var(--primary-background);
+`;
+
+// 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,
+        );
+
+        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 (
+            <ImageIconBase
+                {...imgProps}
+                width={size}
+                height={size}
+                src={iconURL}
+                loading="lazy"
+                aria-hidden="true"
+            />
+        );
+    },
+);

src/components/common/Tooltip.tsx

+import Tippy, { TippyProps } from "@tippyjs/react";
+import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+
+import { Children } from "../../types/Preact";
+
+type Props = Omit<TippyProps, "children"> & {
+    children: Children;
+    content: Children;
+};
+
+export default function Tooltip(props: Props) {
+    const { children, content, ...tippyProps } = props;
+
+    return (
+        <Tippy content={content} {...tippyProps}>
+            {/*
+            // @ts-expect-error Type mis-match. */}
+            <div style={`display: flex;`}>{children}</div>
+        </Tippy>
+    );
+}
+
+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: var(--monospace-font);
+    }
+`;
+
+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}
+        />
+    );
+}

src/components/common/UpdateIndicator.tsx

+/* eslint-disable react-hooks/rules-of-hooks */
+import { Download, CloudDownload } from "@styled-icons/boxicons-regular";
+
+import { useContext, useEffect, useState } from "preact/hooks";
+
+import { internalSubscribe } from "../../lib/eventEmitter";
+
+import { ThemeContext } from "../../context/Theme";
+
+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));
+    });
+
+    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 { observer } from "mobx-react-lite";
+import { Message as MessageObject } from "revolt.js/dist/maps/Messages";
+
+import { attachContextMenu } from "preact-context-menu";
+import { memo } from "preact/compat";
+import { useState } from "preact/hooks";
+
+import { QueuedMessage } from "../../../redux/reducers/queue";
+
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { useClient } from "../../../context/revoltjs/RevoltClient";
+
+import Overline from "../../ui/Overline";
+
+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;
+    highlight?: boolean;
+    contrast?: boolean;
+    content?: Children;
+    head?: boolean;
+}
+
+const Message = observer(
+    ({
+        highlight,
+        attachContext,
+        message,
+        contrast,
+        content: replacement,
+        head: preferHead,
+        queued,
+    }: Props) => {
+        const client = useClient();
+        const user = message.author;
+
+        const { openScreen } = useIntermediate();
+
+        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 { 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 { 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;
+    highlight?: boolean;
+}
+
+const highlight = keyframes`
+    0% { background: var(--mention); }
+    66% { background: var(--mention); }
+    100% { background: transparent; }
+`;
+
+export default styled.div<BaseMessageProps>`
+    display: flex;
+    overflow: none;
+    padding: 0.125rem;
+    flex-direction: row;
+    padding-inline-end: 16px;
+
+    @media (pointer: coarse) {
+        user-select: none;
+    }
+
+    ${(props) =>
+        props.contrast &&
+        css`
+            padding: 0.3rem;
+            background: var(--hover);
+            border-radius: var(--border-radius);
+        `}
+
+    ${(props) =>
+        props.head &&
+        css`
+            margin-top: 12px;
+        `}
+
+    ${(props) =>
+        props.mention &&
+        css`
+            background: var(--mention);
+        `}
+
+    ${(props) =>
+        props.blocked &&
+        css`
+            filter: blur(4px);
+            transition: 0.2s ease filter;
+
+            &:hover {
+                filter: none;
+            }
+        `}
+
+    ${(props) =>
+        props.sending &&
+        css`
+            opacity: 0.8;
+            color: var(--tertiary-foreground);
+        `}
+
+    ${(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 {
+        display: block;
+        overflow: hidden;
+    }
+
+    &:hover {
+        background: var(--hover);
+
+        time {
+            opacity: 1;
+        }
+    }
+`;
+
+export const MessageInfo = styled.div`
+    width: 62px;
+    display: flex;
+    flex-shrink: 0;
+    padding-top: 2px;
+    flex-direction: row;
+    justify-content: center;
+
+    .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 {
+        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;
+    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 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="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")}>
+                        <span className="edited">
+                            <Text id="app.main.channel.edited" />
+                        </span>
+                    </Tooltip>
+                )}
+            </DetailBase>
+        );
+    },
+);

src/components/common/messaging/SystemMessage.tsx

+import { observer } from "mobx-react-lite";
+import { Message } from "revolt.js/dist/maps/Messages";
+import { User } from "revolt.js/dist/maps/Users";
+import styled from "styled-components";
+
+import { attachContextMenu } from "preact-context-menu";
+
+import { TextReact } from "../../../lib/i18n";
+
+import { useClient } from "../../../context/revoltjs/RevoltClient";
+
+import UserShort from "../user/UserShort";
+import MessageBase, { MessageDetail, MessageInfo } from "./MessageBase";
+
+const SystemContent = styled.div`
+    gap: 4px;
+    display: flex;
+    padding: 2px 0;
+    flex-wrap: wrap;
+    align-items: center;
+    flex-direction: row;
+`;
+
+type SystemMessageParsed =
+    | { type: "text"; content: string }
+    | { type: "user_added"; user: User; by: User }
+    | { type: "user_remove"; user: User; by: User }
+    | { type: "user_joined"; user: User }
+    | { type: "user_left"; user: User }
+    | { type: "user_kicked"; user: User }
+    | { type: "user_banned"; user: User }
+    | { type: "channel_renamed"; name: string; by: User }
+    | { type: "channel_description_changed"; by: User }
+    | { type: "channel_icon_changed"; by: User };
+
+interface Props {
+    attachContext?: boolean;
+    message: Message;
+    highlight?: boolean;
+    hideInfo?: boolean;
+}
+
+export const SystemMessage = observer(
+    ({ attachContext, message, highlight, hideInfo }: Props) => {
+        const client = useClient();
+
+        let data: SystemMessageParsed;
+        const content = message.content;
+        if (typeof content === "object") {
+            switch (content.type) {
+                case "text":
+                    data = content;
+                    break;
+                case "user_added":
+                case "user_remove":
+                    data = {
+                        type: content.type,
+                        user: client.users.get(content.id)!,
+                        by: client.users.get(content.by)!,
+                    };
+                    break;
+                case "user_joined":
+                case "user_left":
+                case "user_kicked":
+                case "user_banned":
+                    data = {
+                        type: content.type,
+                        user: client.users.get(content.id)!,
+                    };
+                    break;
+                case "channel_renamed":
+                    data = {
+                        type: "channel_renamed",
+                        name: content.name,
+                        by: client.users.get(content.by)!,
+                    };
+                    break;
+                case "channel_description_changed":
+                case "channel_icon_changed":
+                    data = {
+                        type: content.type,
+                        by: client.users.get(content.by)!,
+                    };
+                    break;
+                default:
+                    data = { type: "text", content: JSON.stringify(content) };
+            }
+        } else {
+            data = { type: "text", content };
+        }
+
+        let children;
+        switch (data.type) {
+            case "text":
+                children = <span>{data.content}</span>;
+                break;
+            case "user_added":
+            case "user_remove":
+                children = (
+                    <TextReact
+                        id={`app.main.channel.system.${
+                            data.type === "user_added"
+                                ? "added_by"
+                                : "removed_by"
+                        }`}
+                        fields={{
+                            user: <UserShort user={data.user} />,
+                            other_user: <UserShort user={data.by} />,
+                        }}
+                    />
+                );
+                break;
+            case "user_joined":
+            case "user_left":
+            case "user_kicked":
+            case "user_banned":
+                children = (
+                    <TextReact
+                        id={`app.main.channel.system.${data.type}`}
+                        fields={{
+                            user: <UserShort user={data.user} />,
+                        }}
+                    />
+                );
+                break;
+            case "channel_renamed":
+                children = (
+                    <TextReact
+                        id={`app.main.channel.system.channel_renamed`}
+                        fields={{
+                            user: <UserShort user={data.by} />,
+                            name: <b>{data.name}</b>,
+                        }}
+                    />
+                );
+                break;
+            case "channel_description_changed":
+            case "channel_icon_changed":
+                children = (
+                    <TextReact
+                        id={`app.main.channel.system.${data.type}`}
+                        fields={{
+                            user: <UserShort user={data.by} />,
+                        }}
+                    />
+                );
+                break;
+        }
+
+        return (
+            <MessageBase
+                highlight={highlight}
+                onContextMenu={
+                    attachContext
+                        ? attachContextMenu("Menu", {
+                              message,
+                              contextualChannel: message.channel,
+                          })
+                        : undefined
+                }>
+                {!hideInfo && (
+                    <MessageInfo>
+                        <MessageDetail message={message} position="left" />
+                    </MessageInfo>
+                )}
+                <SystemContent>{children}</SystemContent>
+            </MessageBase>
+        );
+    },
+);

src/components/common/messaging/attachments/Attachment.module.scss

+.attachment {
+    display: grid;
+    grid-auto-flow: row dense;
+    grid-auto-columns: min(100%, var(--attachment-max-width));
+
+    margin: 0.125rem 0 0.125rem;
+    width: max-content;
+    max-width: 100%;
+
+    &[data-spoiler="true"] {
+        filter: blur(30px);
+        pointer-events: none;
+    }
+
+    &.audio {
+        gap: 4px;
+        padding: 6px;
+        display: flex;
+        max-width: 100%;
+        flex-direction: column;
+        width: var(--attachment-default-width);
+        background: var(--secondary-background);
+
+        > audio {
+            width: 100%;
+        }
+    }
+
+    &.file {
+        > div {
+            padding: 12px;
+            max-width: 100%;
+            user-select: none;
+            width: fit-content;
+            border-radius: var(--border-radius);
+            width: var(--attachment-default-width);
+        }
+    }
+
+    &.text {
+        width: 100%;
+        overflow: hidden;
+        grid-auto-columns: unset;
+        max-width: var(--attachment-max-text-width);
+
+        .textContent {
+            height: 140px;
+            padding: 12px;
+            overflow-x: auto;
+            overflow-y: auto;
+            border-radius: 0 !important;
+            background: var(--secondary-header);
+
+            pre {
+                margin: 0;
+            }
+
+            pre code {
+                font-family: var(--monospace-font), sans-serif;
+            }
+
+            &[data-loading="true"] {
+                display: flex;
+
+                > * {
+                    flex-grow: 1;
+                }
+            }
+        }
+    }
+}
+
+.margin {
+    margin-top: 4px;
+}
+
+.container {
+    max-width: 100%;
+    overflow: hidden;
+    width: fit-content;
+
+    > :first-child {
+        width: min(var(--attachment-max-width), 100%, var(--width));
+    }
+}
+
+.container,
+.attachment,
+.image {
+    border-radius: var(--border-radius);
+}

src/components/common/messaging/attachments/Attachment.tsx

+import { Attachment as AttachmentI } from "revolt-api/types/Autumn";
+
+import styles from "./Attachment.module.scss";
+import classNames from "classnames";
+import { useContext, useState } from "preact/hooks";
+
+import { useIntermediate } from "../../../../context/intermediate/Intermediate";
+import { AppContext } from "../../../../context/revoltjs/RevoltClient";
+
+import AttachmentActions from "./AttachmentActions";
+import { SizedGrid } from "./Grid";
+import Spoiler from "./Spoiler";
+import TextFile from "./TextFile";
+
+interface Props {
+    attachment: AttachmentI;
+    hasContent: boolean;
+}
+
+const MAX_ATTACHMENT_WIDTH = 480;
+
+export default function Attachment({ attachment, hasContent }: Props) {
+    const client = useContext(AppContext);
+    const { openScreen } = useIntermediate();
+    const { filename, metadata } = attachment;
+    const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_"));
+
+    const url = client.generateFileURL(
+        attachment,
+        { width: MAX_ATTACHMENT_WIDTH * 1.5 },
+        true,
+    );
+
+    switch (metadata.type) {
+        case "Image": {
+            return (
+                <SizedGrid
+                    width={metadata.width}
+                    height={metadata.height}
+                    className={classNames({
+                        [styles.margin]: hasContent,
+                        spoiler,
+                    })}>
+                    <img
+                        src={url}
+                        alt={filename}
+                        className={styles.image}
+                        loading="lazy"
+                        onClick={() =>
+                            openScreen({ id: "image_viewer", attachment })
+                        }
+                        onMouseDown={(ev) =>
+                            ev.button === 1 && window.open(url, "_blank")
+                        }
+                    />
+                    {spoiler && <Spoiler set={setSpoiler} />}
+                </SizedGrid>
+            );
+        }
+
+        case "Video": {
+            return (
+                <div
+                    className={classNames(styles.container, {
+                        [styles.margin]: hasContent,
+                    })}
+                    style={{ "--width": `${metadata.width}px` }}>
+                    <AttachmentActions attachment={attachment} />
+                    <SizedGrid
+                        width={metadata.width}
+                        height={metadata.height}
+                        className={classNames({ spoiler })}>
+                        <video
+                            src={url}
+                            alt={filename}
+                            controls
+                            loading="lazy"
+                            width={metadata.width}
+                            height={metadata.height}
+                            onMouseDown={(ev) =>
+                                ev.button === 1 && window.open(url, "_blank")
+                            }
+                        />
+                        {spoiler && <Spoiler set={setSpoiler} />}
+                    </SizedGrid>
+                </div>
+            );
+        }
+
+        case "Audio": {
+            return (
+                <div
+                    className={classNames(styles.attachment, styles.audio)}
+                    data-has-content={hasContent}>
+                    <AttachmentActions attachment={attachment} />
+                    <audio src={url} controls />
+                </div>
+            );
+        }
+
+        case "Text": {
+            return (
+                <div
+                    className={classNames(styles.attachment, styles.text)}
+                    data-has-content={hasContent}>
+                    <TextFile attachment={attachment} />
+                    <AttachmentActions attachment={attachment} />
+                </div>
+            );
+        }
+
+        default: {
+            return (
+                <div
+                    className={classNames(styles.attachment, styles.file)}
+                    data-has-content={hasContent}>
+                    <AttachmentActions attachment={attachment} />
+                </div>
+            );
+        }
+    }
+}

src/components/common/messaging/attachments/AttachmentActions.module.scss

+.actions.imageAction {
+    grid-template: 
+        "name icon external download" auto
+        "size icon external download" auto
+        / minmax(20px, 1fr) min-content min-content;
+}
+
+.actions {
+    display: grid;
+    grid-template: 
+        "icon name external download" auto
+        "icon size external download" auto
+        / min-content 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);
+    }
+
+    .downloadIcon {
+        grid-area: download;
+    }
+
+    .externalType {
+        grid-area: external;
+    }
+
+    .iconType {
+        grid-area: icon;
+    }
+}

src/components/common/messaging/attachments/Spoiler.tsx

+import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+
+const Base = styled.div`
+    display: grid;
+    place-items: center;
+
+    z-index: 1;
+    grid-area: 1 / 1;
+
+    cursor: pointer;
+    user-select: none;
+    text-transform: uppercase;
+
+    span {
+        padding: 8px;
+        color: var(--foreground);
+        background: var(--primary-background);
+        border-radius: calc(var(--border-radius) * 4);
+    }
+`;
+
+interface Props {
+    set: (v: boolean) => void;
+}
+
+export default function Spoiler({ set }: Props) {
+    return (
+        <Base onClick={() => set(false)}>
+            <span>
+                <Text id="app.main.channel.misc.spoiler_attachment" />
+            </span>
+        </Base>
+    );
+}