Merge pull request #87 from ryanalexander/context-categories

src/context/intermediate/Intermediate.tsx

@@ -46,6 +46,7 @@ export type Screen =
           | { type: "unfriend_user"; target: User }
           | { type: "block_user"; target: User }
           | { type: "create_channel"; target: Server }
+          | { type: "create_category"; target: Server }
       ))
     | ({ id: "special_input" } & (
           | {

src/context/intermediate/modals/Prompt.tsx

@@ -1,5 +1,6 @@
 import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
+import { Category } from "revolt-api/types/Servers";
 import { Channel } from "revolt.js/dist/maps/Channels";
 import { Message as MessageI } from "revolt.js/dist/maps/Messages";
 import { Server } from "revolt.js/dist/maps/Servers";
@@ -70,6 +71,7 @@ type SpecialProps = { onClose: () => void } & (
     | { type: "unfriend_user"; target: User }
     | { type: "block_user"; target: User }
     | { type: "create_channel"; target: Server }
+    | { type: "create_category"; target: Server }
 );
 
 export const SpecialPromptModal = observer((props: SpecialProps) => {
@@ -459,6 +461,61 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                 />
             );
         }
+        case "create_category": {
+            const [name, setName] = useState("");
+            const history = useHistory();
+
+            return (
+                <PromptModal
+                    onClose={onClose}
+                    question={<Text id="app.context_menu.create_category" />}
+                    actions={[
+                        {
+                            confirmation: true,
+                            contrast: true,
+                            children: (
+                                <Text id="app.special.modals.actions.create" />
+                            ),
+                            onClick: async () => {
+                                setProcessing(true);
+                                try {
+                                    props.target.edit({
+                                        categories: [
+                                            ...props.target.categories ?? [],
+                                            { id: ulid(), title: name, channels: [] }
+                                        ]
+                                    });
+                                    onClose();
+                                    setProcessing(false);
+                                } catch (err) {
+                                    setError(takeError(err));
+                                    setProcessing(false);
+                                }
+                            },
+                        },
+                        {
+                            children: (
+                                <Text id="app.special.modals.actions.cancel" />
+                            ),
+                            onClick: onClose,
+                        },
+                    ]}
+                    content={
+                        <>
+                            <Overline block type="subtle">
+                                <Text id="app.main.servers.channel_name" />
+                            </Overline>
+                            <InputBox
+                                value={name}
+                                onChange={(e) => setName(e.currentTarget.value)}
+                            />
+                        </>
+                    }
+                    disabled={processing}
+                    error={error}
+                />
+            );
+        }
         default:
             return null;
     }

src/lib/ContextMenus.tsx

@@ -102,6 +102,7 @@ type Action =
     | { action: "set_status" }
     | { action: "clear_status" }
     | { action: "create_channel"; target: Server }
+    | { action: "create_category"; target: Server }
     | {
           action: "create_invite";
           target: Channel;
@@ -400,6 +401,7 @@ function ContextMenus(props: Props) {
                 case "delete_server":
                 case "delete_message":
                 case "create_channel":
+                case "create_category":
                 case "create_invite":
                     // Typescript flattens the case types into a single type and type structure and specifity is lost
                     openScreen({
@@ -508,11 +510,16 @@ function ContextMenus(props: Props) {
                         const server = client.servers.get(server_list)!;
                         const permissions = server.permission;
                         if (server) {
-                            if (permissions & ServerPermission.ManageChannels)
+                            if (permissions & ServerPermission.ManageChannels) {
+                                generateAction({
+                                    action: "create_category",
+                                    target: server,
+                                });
                                 generateAction({
                                     action: "create_channel",
                                     target: server,
                                 });
+                            }
                             if (permissions & ServerPermission.ManageServer)
                                 generateAction({
                                     action: "open_server_settings",