feat: port CreateCategory / fix Channel

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 CreateCategory from "./components/CreateCategory";
 import CreateChannel from "./components/CreateChannel";
 import CreateGroup from "./components/CreateGroup";
 import CreateInvite from "./components/CreateInvite";
@@ -251,6 +252,7 @@ export const modalController = new ModalControllerExtended({
     delete_bot: Confirmation,
     block_user: Confirmation,
     unfriend_user: Confirmation,
+    create_category: CreateCategory,
     create_channel: CreateChannel,
     create_group: CreateGroup,
     create_invite: CreateInvite,

src/controllers/modals/components/CreateCategory.tsx

@@ -0,0 +1,44 @@
+import { ulid } from "ulid";
+
+import { Text } from "preact-i18n";
+
+import { ModalForm } from "@revoltchat/ui";
+
+import { ModalProps } from "../types";
+
+/**
+ * Category creation modal
+ */
+export default function CreateCategory({
+    target,
+    ...props
+}: ModalProps<"create_category">) {
+    return (
+        <ModalForm
+            {...props}
+            title={<Text id="app.context_menu.create_category" />}
+            schema={{
+                name: "text",
+            }}
+            data={{
+                name: {
+                    field: (
+                        <Text id="app.main.servers.channel_name" />
+                    ) as React.ReactChild,
+                },
+            }}
+            callback={async ({ name }) => {
+                await target.edit({
+                    categories: [
+                        ...(target.categories ?? []),
+                        {
+                            id: ulid(),
+                            title: name,
+                            channels: [],
+                        },
+                    ],
+                });
+            }}
+        />
+    );
+}

src/controllers/modals/components/CreateChannel.tsx

@@ -50,6 +50,9 @@ export default function CreateChannel({
                     ],
                 },
             }}
+            defaults={{
+                type: "Text",
+            }}
             callback={async ({ name, type }) => {
                 const channel = await target.createChannel({
                     type: type as "Text" | "Voice",