Port modal / popover context.

src/context/intermediate/popovers/ChannelInfo.tsx

@@ -0,0 +1,38 @@
+import { X } from "@styled-icons/feather";
+import styles from "./ChannelInfo.module.scss";
+import Modal from "../../../components/ui/Modal";
+import { getChannelName } from "../../revoltjs/util";
+import Markdown from "../../../components/markdown/Markdown";
+import { useChannel, useForceUpdate } from "../../revoltjs/hooks";
+
+interface Props {
+    channel_id: string;
+    onClose: () => void;
+}
+
+export function ChannelInfo({ channel_id, onClose }: Props) {
+    const ctx = useForceUpdate();
+    const channel = useChannel(channel_id, ctx);
+    if (!channel) return null;
+
+    if (channel.channel_type === "DirectMessage" || channel.channel_type === 'SavedMessages') {
+        onClose();
+        return null;
+    }
+
+    return (
+        <Modal visible={true} onClose={onClose}>
+            <div className={styles.info}>
+                <div className={styles.header}>
+                    <h1>{ getChannelName(ctx.client, channel, [ ], true) }</h1>
+                    <div onClick={onClose}>
+                        <X size={36} />
+                    </div>
+                </div>
+                <p>
+                    <Markdown content={channel.description} />
+                </p>
+            </div>
+        </Modal>
+    );
+}