feat: add ServerInfo, port ChannelInfo

src/controllers/modals/ModalController.tsx

@@ -18,6 +18,7 @@ import { __thisIsAHack } from "../../context/intermediate/Intermediate";
 
 // import { determineLink } from "../../lib/links";
 import Changelog from "./components/Changelog";
+import ChannelInfo from "./components/ChannelInfo";
 import Clipboard from "./components/Clipboard";
 import Error from "./components/Error";
 import LinkWarning from "./components/LinkWarning";
@@ -28,6 +29,7 @@ import ModifyAccount from "./components/ModifyAccount";
 import OutOfDate from "./components/OutOfDate";
 import PendingFriendRequests from "./components/PendingFriendRequests";
 import ServerIdentity from "./components/ServerIdentity";
+import ServerInfo from "./components/ServerInfo";
 import ShowToken from "./components/ShowToken";
 import SignOutSessions from "./components/SignOutSessions";
 import SignedOut from "./components/SignedOut";
@@ -54,6 +56,8 @@ class ModalController<T extends Modal> {
             isVisible: computed,
         });
 
+        this.close = this.close.bind(this);
+
         // Inject globally
         injectController("modal", this);
     }
@@ -82,6 +86,13 @@ class ModalController<T extends Modal> {
         );
     }
 
+    /**
+     * Close the top modal
+     */
+    close() {
+        this.pop("close");
+    }
+
     /**
      * Remove the keyed modal from the stack
      */
@@ -208,6 +219,7 @@ class ModalControllerExtended extends ModalController<Modal> {
 
 export const modalController = new ModalControllerExtended({
     changelog: Changelog,
+    channel_info: ChannelInfo,
     clipboard: Clipboard,
     error: Error,
     link_warning: LinkWarning,
@@ -218,6 +230,7 @@ export const modalController = new ModalControllerExtended({
     out_of_date: OutOfDate,
     pending_friend_requests: PendingFriendRequests,
     server_identity: ServerIdentity,
+    server_info: ServerInfo,
     show_token: ShowToken,
     signed_out: SignedOut,
     sign_out_sessions: SignOutSessions,

src/controllers/modals/components/ChannelInfo.tsx

@@ -0,0 +1,29 @@
+import { X } from "@styled-icons/boxicons-regular";
+
+import { Column, H1, IconButton, Modal, Row } from "@revoltchat/ui";
+
+import Markdown from "../../../components/markdown/Markdown";
+import { modalController } from "../ModalController";
+import { ModalProps } from "../types";
+
+export default function ChannelInfo({
+    channel,
+    ...props
+}: ModalProps<"channel_info">) {
+    return (
+        <Modal
+            {...props}
+            title={
+                <Row centred>
+                    <Column grow>
+                        <H1>{`#${channel.name}`}</H1>
+                    </Column>
+                    <IconButton onClick={modalController.close}>
+                        <X size={36} />
+                    </IconButton>
+                </Row>
+            }>
+            <Markdown content={channel.description!} />
+        </Modal>
+    );
+}

src/controllers/modals/components/ServerInfo.tsx

@@ -0,0 +1,48 @@
+import { X } from "@styled-icons/boxicons-regular";
+
+import { Text } from "preact-i18n";
+
+import { Column, H1, IconButton, Modal, Row } from "@revoltchat/ui";
+
+import Markdown from "../../../components/markdown/Markdown";
+import { report } from "../../safety";
+import { modalController } from "../ModalController";
+import { ModalProps } from "../types";
+
+export default function ServerInfo({
+    server,
+    ...props
+}: ModalProps<"server_info">) {
+    return (
+        <Modal
+            {...props}
+            title={
+                <Row centred>
+                    <Column grow>
+                        <H1>{server.name}</H1>
+                    </Column>
+                    <IconButton onClick={modalController.close}>
+                        <X size={36} />
+                    </IconButton>
+                </Row>
+            }
+            actions={[
+                {
+                    onClick: () =>
+                        modalController.push({
+                            type: "server_identity",
+                            member: server.member!,
+                        }),
+                    children: "Edit Identity",
+                    palette: "primary",
+                },
+                {
+                    onClick: () => report(server),
+                    children: <Text id="app.special.modals.actions.report" />,
+                    palette: "error",
+                },
+            ]}>
+            <Markdown content={server.description!} />
+        </Modal>
+    );
+}

src/controllers/modals/types.ts

@@ -1,4 +1,4 @@
-import { API, Client, User, Member } from "revolt.js";
+import { API, Client, User, Member, Channel, Server } from "revolt.js";
 
 export type Modal = {
     key?: string;
@@ -72,6 +72,14 @@ export type Modal = {
     | {
           type: "signed_out";
       }
+    | {
+          type: "channel_info";
+          channel: Channel;
+      }
+    | {
+          type: "server_info";
+          server: Server;
+      }
 );
 
 export type ModalProps<T extends Modal["type"]> = Modal & { type: T } & {

src/controllers/safety/index.ts

@@ -0,0 +1,16 @@
+import { Server } from "revolt.js";
+
+export function report(object: Server) {
+    let type;
+    if (object instanceof Server) {
+        type = "Server";
+    }
+
+    window.open(
+        `mailto:abuse@revolt.chat?subject=${encodeURIComponent(
+            `${type} Report`,
+        )}&body=${encodeURIComponent(
+            `${type} ID: ${object._id}\nWrite more information here!`,
+        )}`,
+    );
+}