feat: Add create channel/category opts to respective context menus

packages/client/components/app/menus/CategoryContextMenu.tsx

@@ -42,6 +42,17 @@ export function CategoryContextMenu(props: {
       .forEach((channel) => channel.ack());
   }
 
+  /**
+   * Create a new channel
+   */
+  function createChannel() {
+    openModal({
+      type: "create_channel",
+      server: props.server,
+      categoryId: props.category.id,
+    });
+  }
+
   /**
    * Create a new category
    */
@@ -95,19 +106,18 @@ export function CategoryContextMenu(props: {
       </Show>
 
       <Show when={props.server.havePermission("ManageChannel")}>
+        <ContextMenuButton icon={MdLibraryAdd} onClick={createChannel}>
+          <Trans>Create channel</Trans>
+        </ContextMenuButton>
         <ContextMenuButton icon={MdLibraryAdd} onClick={createCategory}>
           <Trans>Create category</Trans>
         </ContextMenuButton>
-      </Show>
-      <Show when={props.server.havePermission("ManageChannel")}>
         <ContextMenuButton
           icon={<Symbol size={16}>edit</Symbol>}
           onClick={editCategoryName}
         >
           <Trans>Rename category</Trans>
         </ContextMenuButton>
-      </Show>
-      <Show when={props.server.havePermission("ManageChannel")}>
         <ContextMenuButton icon={MdDelete} onClick={deleteCategory} destructive>
           <Trans>Delete category</Trans>
         </ContextMenuButton>

packages/client/components/app/menus/ChannelContextMenu.tsx

@@ -47,13 +47,31 @@ export function ChannelContextMenu(props: { channel: Channel }) {
     });
   }
 
+  function getCategory(channel: Channel) {
+    const cats = channel.server!.orderedChannels;
+    let cat, ch;
+    for (cat of cats)
+      for (ch of cat.channels) if (ch.id === channel.id) return cat.id;
+  }
+
   /**
    * Create a new channel
    */
   function createChannel() {
     openModal({
       type: "create_channel",
       server: props.channel.server!,
+      categoryId: getCategory(props.channel),
+    });
+  }
+
+  /**
+   * Create a new category
+   */
+  function createCategory() {
+    openModal({
+      type: "create_category",
+      server: props.channel.server!,
     });
   }
 
@@ -134,6 +152,9 @@ export function ChannelContextMenu(props: { channel: Channel }) {
         <ContextMenuButton icon={MdLibraryAdd} onClick={createChannel}>
           <Trans>Create channel</Trans>
         </ContextMenuButton>
+        <ContextMenuButton icon={MdLibraryAdd} onClick={createCategory}>
+          <Trans>Create category</Trans>
+        </ContextMenuButton>
       </Show>
       <Show when={props.channel.havePermission("ManageChannel")}>
         <ContextMenuButton icon={MdSettings} onClick={editChannel}>

packages/client/components/modal/modals/CreateChannel.tsx

@@ -30,10 +30,25 @@ export function CreateChannelModal(
         name: group.controls.name.value,
       });
 
+      //Reorder categories
+      const newChId = channel.id,
+        catId = props.categoryId;
+      if (catId && catId !== "default") {
+        let ch, chIds;
+        props.server.edit({
+          categories: props.server.orderedChannels.map((cat) => {
+            chIds = [];
+            for (ch of cat.channels) if (ch.id !== newChId) chIds.push(ch.id);
+            if (cat.id === catId) chIds.push(newChId);
+            return { ...cat, channels: chIds };
+          }),
+        });
+      }
+
       if (props.cb) {
         props.cb(channel);
       } else {
-        navigate(`/server/${props.server.id}/channel/${channel.id}`);
+        navigate(`/server/${props.server.id}/channel/${newChId}`);
       }
 
       props.onClose();

packages/client/components/modal/types.ts

@@ -70,6 +70,7 @@ export type Modals =
   | {
       type: "create_channel";
       server: Server;
+      categoryId?: string;
       cb?: (channel: Channel) => void;
     }
   | {