Move creating bots to a popover

src/context/intermediate/Intermediate.tsx

@@ -16,6 +16,7 @@ import { Action } from "../../components/ui/Modal";
 
 import { Children } from "../../types/Preact";
 import Modals from "./Modals";
+import { Bot } from "revolt-api/types/Bots";
 
 export type Screen =
     | { id: "none" }
@@ -90,6 +91,7 @@ export type Screen =
     | { id: "channel_info"; channel: Channel }
     | { id: "pending_requests"; users: User[] }
     | { id: "modify_account"; field: "username" | "email" | "password" }
+    | { id: "create_bot"; onCreate: (bot: Bot) => void }
     | {
           id: "server_identity";
           server: Server;

src/context/intermediate/Popovers.tsx

@@ -8,6 +8,7 @@ import { IntermediateContext, useIntermediate } from "./Intermediate";
 import { SpecialInputModal } from "./modals/Input";
 import { SpecialPromptModal } from "./modals/Prompt";
 import { ChannelInfo } from "./popovers/ChannelInfo";
+import { CreateBotModal } from "./popovers/CreateBot";
 import { ImageViewer } from "./popovers/ImageViewer";
 import { ModifyAccountModal } from "./popovers/ModifyAccount";
 import { PendingRequests } from "./popovers/PendingRequests";
@@ -42,6 +43,9 @@ export default function Popovers() {
         case "modify_account":
             // @ts-expect-error someone figure this out :)
             return <ModifyAccountModal onClose={onClose} {...screen} />;
+        case "create_bot":
+            // @ts-expect-error someone figure this out :)
+            return <CreateBotModal onClose={onClose} {...screen} />;
         case "special_prompt":
             // @ts-expect-error someone figure this out :)
             return <SpecialPromptModal onClose={onClose} {...screen} />;

src/context/intermediate/popovers/CreateBot.tsx

@@ -0,0 +1,80 @@
+import { SubmitHandler, useForm } from "react-hook-form";
+import { Bot } from "revolt-api/types/Bots";
+
+import { useContext, useState } from "preact/hooks";
+
+import Modal from "../../../components/ui/Modal";
+import Overline from "../../../components/ui/Overline";
+
+import FormField from "../../../pages/login/FormField";
+import { AppContext } from "../../revoltjs/RevoltClient";
+import { takeError } from "../../revoltjs/util";
+
+interface Props {
+    onClose: () => void;
+    onCreate: (bot: Bot) => void;
+}
+
+interface FormInputs {
+    name: string;
+}
+
+export function CreateBotModal({ onClose, onCreate }: Props) {
+    const client = useContext(AppContext);
+    const { handleSubmit, register, errors } = useForm<FormInputs>();
+    const [error, setError] = useState<string | undefined>(undefined);
+
+    const onSubmit: SubmitHandler<FormInputs> = async ({ name }) => {
+        try {
+            const { bot } = await client.bots.create({ name });
+            onCreate(bot);
+            onClose();
+        } catch (err) {
+            setError(takeError(err));
+        }
+    };
+
+    return (
+        <Modal
+            visible={true}
+            onClose={onClose}
+            title="Create a new Bot"
+            actions={[
+                {
+                    confirmation: true,
+                    contrast: true,
+                    accent: true,
+                    onClick: handleSubmit(onSubmit),
+                    children: "Create",
+                },
+                {
+                    plain: true,
+                    onClick: onClose,
+                    children: "Cancel",
+                },
+            ]}>
+            {/* Preact / React typing incompatabilities */}
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    handleSubmit(
+                        onSubmit,
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    )(e as any);
+                }}>
+                <FormField
+                    type="username"
+                    name="name"
+                    register={register}
+                    showOverline
+                    error={errors.name?.message}
+                />
+                {error && (
+                    <Overline type="error" error={error}>
+                        Failed to create a bot!
+                    </Overline>
+                )}
+            </form>
+        </Modal>
+    );
+}

src/pages/settings/panes/MyBots.tsx

@@ -1,4 +1,4 @@
-import { Key, Clipboard, Globe } from "@styled-icons/boxicons-regular";
+import { Key, Clipboard, Globe, Plus } from "@styled-icons/boxicons-regular";
 import { LockAlt } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Bot } from "revolt-api/types/Bots";
@@ -21,7 +21,6 @@ import UserIcon from "../../../components/common/user/UserIcon";
 import Button from "../../../components/ui/Button";
 import Checkbox from "../../../components/ui/Checkbox";
 import InputBox from "../../../components/ui/InputBox";
-import Overline from "../../../components/ui/Overline";
 import Tip from "../../../components/ui/Tip";
 import CategoryButton from "../../../components/ui/fluent/CategoryButton";
 
@@ -349,34 +348,25 @@ export const MyBots = observer(() => {
         // eslint-disable-next-line
     }, []);
 
-    const [name, setName] = useState("");
+    const { openScreen } = useIntermediate();
 
     return (
         <div className={styles.myBots}>
             <Tip warning hideSeparator>
                 This section is under construction.
             </Tip>
-            <Overline>create a new bot</Overline>
-            <p>
-                <InputBox
-                    value={name}
-                    contrast
-                    onChange={(e) => setName(e.currentTarget.value)}
-                />
-            </p>
-            <p>
-                <Button
-                    contrast
-                    onClick={() =>
-                        name.length > 0 &&
-                        client.bots
-                            .create({ name })
-                            .then(({ bot }) => setBots([...(bots ?? []), bot]))
-                    }>
-                    create
-                </Button>
-            </p>
-            <Overline>my bots</Overline>
+            <CategoryButton
+                account
+                icon={<Plus size={24} />}
+                onClick={() =>
+                    openScreen({
+                        id: "create_bot",
+                        onCreate: (bot) => setBots([...(bots ?? []), bot]),
+                    })
+                }
+                action="chevron">
+                Create a Bot
+            </CategoryButton>
             {bots?.map((bot) => {
                 return (
                     <BotCard

src/pages/settings/panes/Panes.module.scss

@@ -529,6 +529,7 @@
         background: var(--secondary-background);
         margin: 8px 0;
         padding: 12px;
+        border-radius: var(--border-radius);    
 
         h5 { margin-bottom: 1em }
     }