feat: port `CreateChannel` modal

src/controllers/modals/ModalController.tsx

@@ -21,6 +21,7 @@ import Changelog from "./components/Changelog";
 import ChannelInfo from "./components/ChannelInfo";
 import Clipboard from "./components/Clipboard";
 import Confirmation from "./components/Confirmation";
+import CreateChannel from "./components/CreateChannel";
 import CreateGroup from "./components/CreateGroup";
 import CreateInvite from "./components/CreateInvite";
 import CreateRole from "./components/CreateRole";
@@ -250,6 +251,7 @@ export const modalController = new ModalControllerExtended({
     delete_bot: Confirmation,
     block_user: Confirmation,
     unfriend_user: Confirmation,
+    create_channel: CreateChannel,
     create_group: CreateGroup,
     create_invite: CreateInvite,
     create_role: CreateRole,

src/controllers/modals/components/CreateChannel.tsx

@@ -0,0 +1,69 @@
+import { useHistory } from "react-router-dom";
+
+import { Text } from "preact-i18n";
+
+import { ModalForm } from "@revoltchat/ui";
+
+import { ModalProps } from "../types";
+
+/**
+ * Channel creation modal
+ */
+export default function CreateChannel({
+    cb,
+    target,
+    ...props
+}: ModalProps<"create_channel">) {
+    const history = useHistory();
+
+    return (
+        <ModalForm
+            {...props}
+            title={<Text id="app.context_menu.create_channel" />}
+            schema={{
+                name: "text",
+                type: "radio",
+            }}
+            data={{
+                name: {
+                    field: (
+                        <Text id="app.main.servers.channel_name" />
+                    ) as React.ReactChild,
+                },
+                type: {
+                    field: (
+                        <Text id="app.main.servers.channel_type" />
+                    ) as React.ReactChild,
+                    choices: [
+                        {
+                            name: (
+                                <Text id="app.main.servers.text_channel" />
+                            ) as React.ReactChild,
+                            value: "Text",
+                        },
+                        {
+                            name: (
+                                <Text id="app.main.servers.voice_channel" />
+                            ) as React.ReactChild,
+                            value: "Voice",
+                        },
+                    ],
+                },
+            }}
+            callback={async ({ name, type }) => {
+                const channel = await target.createChannel({
+                    type: type as "Text" | "Voice",
+                    name,
+                });
+
+                if (cb) {
+                    cb(channel as any);
+                } else {
+                    history.push(
+                        `/server/${target._id}/channel/${channel._id}`,
+                    );
+                }
+            }}
+        />
+    );
+}

src/controllers/modals/types.ts

@@ -170,11 +170,7 @@ export type Modal = {
     | {
           type: "create_channel";
           target: Server;
-          cb?: (
+          cb?: (channel: Channel) => void;
-              channel: Channel & {
-                  channel_type: "TextChannel" | "VoiceChannel";
-              },
-          ) => void;
       }
     | {
           type: "create_category";