feat: port input modals to new system

src/controllers/modals/ModalController.tsx

@@ -16,9 +16,14 @@ import { getApplicationState } from "../../mobx/State";
 import { history } from "../../context/history";
 import { __thisIsAHack } from "../../context/intermediate/Intermediate";
 
+import AddFriend from "./components/AddFriend";
 import Changelog from "./components/Changelog";
 import ChannelInfo from "./components/ChannelInfo";
 import Clipboard from "./components/Clipboard";
+import CreateGroup from "./components/CreateGroup";
+import CreateRole from "./components/CreateRole";
+import CreateServer from "./components/CreateServer";
+import CustomStatus from "./components/CustomStatus";
 import Error from "./components/Error";
 import ImageViewer from "./components/ImageViewer";
 import LinkWarning from "./components/LinkWarning";
@@ -222,10 +227,15 @@ class ModalControllerExtended extends ModalController<Modal> {
 }
 
 export const modalController = new ModalControllerExtended({
+    add_friend: AddFriend,
     changelog: Changelog,
     channel_info: ChannelInfo,
     clipboard: Clipboard,
+    create_group: CreateGroup,
+    create_role: CreateRole,
+    create_server: CreateServer,
     create_bot: CreateBotModal,
+    custom_status: CustomStatus,
     error: Error,
     image_viewer: ImageViewer,
     link_warning: LinkWarning,

src/controllers/modals/components/AddFriend.tsx

@@ -0,0 +1,31 @@
+import { ModalForm } from "@revoltchat/ui";
+
+import { noop } from "../../../lib/js";
+
+import { useClient } from "../../client/ClientController";
+import { ModalProps } from "../types";
+
+/**
+ * Add friend modal
+ */
+export default function AddFriend({ ...props }: ModalProps<"add_friend">) {
+    const client = useClient();
+
+    return (
+        <ModalForm
+            {...props}
+            title="Add Friend"
+            schema={{
+                username: "text",
+            }}
+            data={{
+                username: {
+                    field: "Username",
+                },
+            }}
+            callback={({ username }) =>
+                client.api.post(`/users/friend`, { username }).then(noop)
+            }
+        />
+    );
+}

src/controllers/modals/components/CreateGroup.tsx

@@ -0,0 +1,45 @@
+import { useHistory } from "react-router-dom";
+
+import { Text } from "preact-i18n";
+
+import { ModalForm } from "@revoltchat/ui";
+
+import { mapError } from "../../../context/revoltjs/util";
+
+import { useClient } from "../../client/ClientController";
+import { ModalProps } from "../types";
+
+/**
+ * Group creation modal
+ */
+export default function CreateGroup({ ...props }: ModalProps<"create_group">) {
+    const history = useHistory();
+    const client = useClient();
+
+    return (
+        <ModalForm
+            {...props}
+            title={<Text id="app.main.groups.create" />}
+            schema={{
+                name: "text",
+            }}
+            data={{
+                name: {
+                    field: (
+                        <Text id="app.main.groups.name" />
+                    ) as React.ReactChild,
+                },
+            }}
+            callback={async ({ name }) => {
+                const group = await client.channels
+                    .createGroup({
+                        name,
+                        users: [],
+                    })
+                    .catch(mapError);
+
+                history.push(`/channel/${group._id}`);
+            }}
+        />
+    );
+}

src/controllers/modals/components/CreateRole.tsx

@@ -0,0 +1,35 @@
+import { Text } from "preact-i18n";
+
+import { ModalForm } from "@revoltchat/ui";
+
+import { ModalProps } from "../types";
+
+/**
+ * Role creation modal
+ */
+export default function CreateRole({
+    server,
+    callback,
+    ...props
+}: ModalProps<"create_role">) {
+    return (
+        <ModalForm
+            {...props}
+            title={<Text id="app.settings.permissions.create_role" />}
+            schema={{
+                name: "text",
+            }}
+            data={{
+                name: {
+                    field: (
+                        <Text id="app.settings.permissions.role_name" />
+                    ) as React.ReactChild,
+                },
+            }}
+            callback={async ({ name }) => {
+                const role = await server.createRole(name);
+                callback(role.id);
+            }}
+        />
+    );
+}

src/controllers/modals/components/CreateServer.tsx

@@ -0,0 +1,57 @@
+import { useHistory } from "react-router-dom";
+
+import { Text } from "preact-i18n";
+
+import { ModalForm } from "@revoltchat/ui";
+
+import { mapError } from "../../../context/revoltjs/util";
+
+import { useClient } from "../../client/ClientController";
+import { ModalProps } from "../types";
+
+/**
+ * Server creation modal
+ */
+export default function CreateServer({
+    ...props
+}: ModalProps<"create_server">) {
+    const history = useHistory();
+    const client = useClient();
+
+    return (
+        <ModalForm
+            {...props}
+            title={<Text id="app.main.servers.create" />}
+            description={
+                <div>
+                    By creating this server, you agree to the{" "}
+                    <a
+                        href="https://revolt.chat/aup"
+                        target="_blank"
+                        rel="noreferrer">
+                        Acceptable Use Policy.
+                    </a>
+                </div>
+            }
+            schema={{
+                name: "text",
+            }}
+            data={{
+                name: {
+                    field: (
+                        <Text id="app.main.servers.name" />
+                    ) as React.ReactChild,
+                },
+            }}
+            callback={async ({ name }) => {
+                const server = await client.servers
+                    .createServer({
+                        name,
+                    })
+                    .catch(mapError);
+
+                history.push(`/server/${server._id}`);
+            }}
+        />
+    );
+}

src/controllers/modals/components/CustomStatus.tsx

@@ -0,0 +1,43 @@
+import { Text } from "preact-i18n";
+
+import { ModalForm } from "@revoltchat/ui";
+
+import { useClient } from "../../client/ClientController";
+import { ModalProps } from "../types";
+
+/**
+ * Custom status modal
+ */
+export default function CustomStatus({
+    ...props
+}: ModalProps<"custom_status">) {
+    const client = useClient();
+
+    return (
+        <ModalForm
+            {...props}
+            title={<Text id="app.context_menu.set_custom_status" />}
+            schema={{
+                text: "text",
+            }}
+            defaults={{
+                text: client.user?.status?.text as string,
+            }}
+            data={{
+                text: {
+                    field: (
+                        <Text id="app.context_menu.custom_status" />
+                    ) as React.ReactChild,
+                },
+            }}
+            callback={({ text }) =>
+                client.users.edit({
+                    status: {
+                        ...client.user?.status,
+                        text: text.trim().length > 0 ? text : undefined,
+                    },
+                })
+            }
+        />
+    );
+}

src/controllers/modals/types.ts

@@ -3,6 +3,14 @@ import { API, Client, User, Member, Channel, Server } from "revolt.js";
 export type Modal = {
     key?: string;
 } & (
+    | {
+          type:
+              | "signed_out"
+              | "create_group"
+              | "create_server"
+              | "custom_status"
+              | "add_friend";
+      }
     | ({
           type: "mfa_flow";
       } & (
@@ -69,9 +77,6 @@ export type Modal = {
           type: "server_identity";
           member: Member;
       }
-    | {
-          type: "signed_out";
-      }
     | {
           type: "channel_info";
           channel: Channel;
@@ -107,6 +112,11 @@ export type Modal = {
               loginAfterSuccess?: true,
           ) => Promise<void>;
       }
+    | {
+          type: "create_role";
+          server: Server;
+          callback: (id: string) => void;
+      }
 );
 
 export type ModalProps<T extends Modal["type"]> = Modal & { type: T } & {