Refactor + add message box.

src/components/common/user/UserCheckbox.tsx

@@ -0,0 +1,14 @@
+import { User } from "revolt.js";
+import UserIcon from "./UserIcon";
+import Checkbox, { CheckboxProps } from "../../ui/Checkbox";
+
+type UserProps = Omit<CheckboxProps, "children"> & { user: User };
+
+export default function UserCheckbox({ user, ...props }: UserProps) {
+    return (
+        <Checkbox {...props}>
+            <UserIcon target={user} size={32} />
+            {user.username}
+        </Checkbox>
+    );
+}

src/components/common/user/UserHeader.tsx

@@ -0,0 +1,85 @@
+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 { Settings } from "@styled-icons/feather";
+import { openContextMenu } from "preact-context-menu";
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+
+const HeaderBase = styled.div`
+    gap: 0;
+    flex-grow: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    
+    * {
+        min-width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .username {
+        cursor: pointer;
+        font-size: 16px;
+        font-weight: 600;
+    }
+
+    .status {
+        cursor: pointer;
+        font-size: 12px;
+        margin-top: -2px;
+    }
+`;
+
+interface Props {
+    user: User
+}
+
+export default function UserHeader({ user }: Props) {
+    const { writeClipboard } = useIntermediate();
+
+    function openPresenceSelector() {
+        openContextMenu("Status");
+    }
+
+    return (
+        <Header placement="secondary">
+            <UserIcon
+                target={user}
+                size={32}
+                status
+                onClick={openPresenceSelector}
+            />
+            <HeaderBase>
+                <Localizer>
+                    <Tooltip content={<Text id="app.special.copy_username" />}>
+                        <span className="username"
+                            onClick={() => writeClipboard(user.username)}>
+                            @{user.username}
+                        </span>
+                    </Tooltip>
+                </Localizer>
+                <span className="status"
+                    onClick={openPresenceSelector}>
+                    <UserStatus user={user} />
+                </span>
+            </HeaderBase>
+            { !isTouchscreenDevice && <div className="actions">
+                <Link to="/settings">
+                    <IconButton>
+                        <Settings size={24} />
+                    </IconButton>
+                </Link>
+            </div> }
+        </Header>
+    )
+}

src/components/common/user/UserIcon.tsx

@@ -0,0 +1,92 @@
+import { User } from "revolt.js";
+import { useContext } from "preact/hooks";
+import { MicOff } from "@styled-icons/feather";
+import styled, { css } from "styled-components";
+import { Users } from "revolt.js/dist/api/objects";
+import { ThemeContext } from "../../../context/Theme";
+import IconBase, { IconBaseProps } from "../IconBase";
+import { AppContext } from "../../../context/revoltjs/RevoltClient";
+
+type VoiceStatus = "muted";
+interface Props extends IconBaseProps<User> {
+    status?: boolean;
+    voice?: VoiceStatus;
+}
+
+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"]
+    );
+}
+
+const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+        stroke: white;
+    }
+
+    ${ props => props.status === 'muted' && css`
+        background: var(--error);
+    ` }
+`;
+
+import fallback from '../assets/user.png';
+
+export default function UserIcon(props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>) {
+    const client = useContext(AppContext);
+
+    const { target, attachment, size, voice, status, animate, 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">
+                {
+                    <img src={iconURL}
+                        draggable={false} />
+                }
+            </foreignObject>
+            {props.status && (
+                <circle
+                    cx="27"
+                    cy="27"
+                    r="5"
+                    fill={useStatusColour(target)}
+                />
+            )}
+            {props.voice && (
+                <foreignObject
+                    x="22"
+                    y="22"
+                    width="10"
+                    height="10">
+                    <VoiceIndicator status={props.voice}>
+                        {props.voice === "muted" && <MicOff size={6} />}
+                    </VoiceIndicator>
+                </foreignObject>
+            )}
+        </IconBase>
+    );
+}

src/components/common/user/UserShort.tsx

@@ -0,0 +1,14 @@
+import { User } from "revolt.js";
+import UserIcon from "./UserIcon";
+import { Text } from "preact-i18n";
+
+export function Username({ user }: { user?: User }) {
+    return <b>{ user?.username ?? <Text id="app.main.channel.unknown_user" /> }</b>;
+}
+
+export default function UserShort({ user }: { user?: User }) {
+    return <>
+        <UserIcon size={24} target={user} />
+        <Username user={user} />
+    </>;
+}

src/components/common/user/UserStatus.tsx

@@ -0,0 +1,31 @@
+import { User } from "revolt.js";
+import { Text } from "preact-i18n";
+import { Users } from "revolt.js/dist/api/objects";
+
+interface Props {
+    user: User;
+}
+
+export default function UserStatus({ user }: Props) {
+    if (user.online) {
+        if (user.status?.text) {
+            return <>{user.status?.text}</>;
+        }
+
+        if (user.status?.presence === Users.Presence.Busy) {
+            return <Text id="app.status.busy" />;
+        }
+
+        if (user.status?.presence === Users.Presence.Idle) {
+            return <Text id="app.status.idle" />;
+        }
+
+        if (user.status?.presence === Users.Presence.Invisible) {
+            return <Text id="app.status.offline" />;
+        }
+
+        return <Text id="app.status.online" />;
+    }
+
+    return <Text id="app.status.offline" />;
+}