Port modal / popover context.

src/components/common/ChannelIcon.tsx

@@ -10,7 +10,7 @@ interface Props extends IconBaseProps<Channels.GroupChannel | Channels.TextChann
 
 const fallback = '/assets/group.png';
 export default function ChannelIcon(props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>) {
-    const { client } = useContext(AppContext);
+    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);

src/components/common/ServerIcon.tsx

@@ -20,7 +20,7 @@ const ServerText = styled.div`
 
 const fallback = '/assets/group.png';
 export default function ServerIcon(props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>) {
-    const { client } = useContext(AppContext);
+    const client = useContext(AppContext);
 
     const { target, attachment, size, animate, server_name, children, as, ...imgProps } = props;
     const iconURL = client.generateFileURL(target?.icon ?? attachment, { max_side: 256 }, animate);

src/components/common/Tooltip.tsx

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+import { Children } from "../../types/Preact";
+import { Position, Tooltip as TooltipCore, TooltipProps } from "react-tippy";
+
+type Props = Omit<TooltipProps, 'html'> & {
+    position?: Position;
+    children: Children;
+    content: Children;
+}
+
+const TooltipBase = styled.div`
+    padding: 8px;
+    font-size: 12px;
+    border-radius: 4px;
+    color: var(--foreground);
+    background: var(--secondary-background);
+`;
+
+export default function Tooltip(props: Props) {
+    return (
+        <TooltipCore
+            {...props}
+            // @ts-expect-error
+            html={<TooltipBase>{props.content}</TooltipBase>} />
+    );
+}

src/components/common/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/UserIcon.tsx

@@ -49,11 +49,11 @@ const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
 
 const fallback = '/assets/user.png';
 export default function UserIcon(props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>) {
-    const { client } = useContext(AppContext);
+    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)
-        ?? client.users.getDefaultAvatarURL(target!._id);
+        ?? (target && client.users.getDefaultAvatarURL(target._id));
 
     return (
         <IconBase {...svgProps}