Temporary bot menu.

src/pages/settings/Settings.tsx

@@ -4,6 +4,7 @@ import {
     Globe,
     LogOut,
     Desktop,
+    Bot,
 } from "@styled-icons/boxicons-regular";
 import {
     Bell,
@@ -39,6 +40,7 @@ import { Appearance } from "./panes/Appearance";
 import { ExperimentsPage } from "./panes/Experiments";
 import { Feedback } from "./panes/Feedback";
 import { Languages } from "./panes/Languages";
+import { MyBots } from "./panes/MyBots";
 import { Native } from "./panes/Native";
 import { Notifications } from "./panes/Notifications";
 import { Profile } from "./panes/Profile";
@@ -109,11 +111,17 @@ export default function Settings() {
                     title: <Text id="app.settings.pages.native.title" />,
                 },
                 {
-                    divider: true,
                     id: "experiments",
                     icon: <Flask size={20} />,
                     title: <Text id="app.settings.pages.experiments.title" />,
                 },
+                {
+                    divider: true,
+                    category: "revolt",
+                    id: "bots",
+                    icon: <Bot size={20} />,
+                    title: <Text id="app.settings.pages.bots.title" />,
+                },
                 {
                     id: "feedback",
                     icon: <Megaphone size={20} />,
@@ -148,6 +156,9 @@ export default function Settings() {
                     <Route path="/settings/experiments">
                         <ExperimentsPage />
                     </Route>
+                    <Route path="/settings/bots">
+                        <MyBots />
+                    </Route>
                     <Route path="/settings/feedback">
                         <Feedback />
                     </Route>

src/pages/settings/panes/MyBots.tsx

@@ -0,0 +1,150 @@
+import { observer } from "mobx-react-lite";
+import { Bot } from "revolt-api/types/Bots";
+
+import { useEffect, useState } from "preact/hooks";
+
+import { useClient } from "../../../context/revoltjs/RevoltClient";
+
+import UserShort from "../../../components/common/user/UserShort";
+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";
+
+interface Data {
+    _id: string;
+    username: string;
+    public: boolean;
+    interactions_url?: string;
+}
+
+function BotEditor({ bot }: { bot: Data }) {
+    const client = useClient();
+    const [data, setData] = useState<Data>(bot);
+
+    function save() {
+        const changes: Record<string, string | boolean | undefined> = {};
+        if (data.username !== bot.username) changes.name = data.username;
+        if (data.public !== bot.public) changes.public = data.public;
+        if (data.interactions_url !== bot.interactions_url)
+            changes.interactions_url = data.interactions_url;
+
+        client.bots.edit(bot._id, changes);
+    }
+
+    return (
+        <div>
+            <p>
+                <InputBox
+                    value={data.username}
+                    onChange={(e) =>
+                        setData({ ...data, username: e.currentTarget.value })
+                    }
+                />
+            </p>
+            <p>
+                <Checkbox
+                    checked={data.public}
+                    onChange={(v) => setData({ ...data, public: v })}>
+                    is public
+                </Checkbox>
+            </p>
+            <p>interactions url: (reserved for the future)</p>
+            <p>
+                <InputBox
+                    value={data.interactions_url}
+                    onChange={(e) =>
+                        setData({
+                            ...data,
+                            interactions_url: e.currentTarget.value,
+                        })
+                    }
+                />
+            </p>
+            <Button onClick={save}>save</Button>
+        </div>
+    );
+}
+
+export const MyBots = observer(() => {
+    const client = useClient();
+    const [bots, setBots] = useState<Bot[] | undefined>(undefined);
+
+    useEffect(() => {
+        client.bots.fetchOwned().then(({ bots }) => setBots(bots));
+        // eslint-disable-next-line
+    }, []);
+
+    const [name, setName] = useState("");
+
+    return (
+        <div>
+            <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>
+            {bots?.map((bot) => {
+                const user = client.users.get(bot._id);
+                return (
+                    <div
+                        key={bot._id}
+                        style={{
+                            background: "var(--secondary-background)",
+                            margin: "8px",
+                            padding: "12px",
+                        }}>
+                        <UserShort user={user} />
+                        <p>
+                            token:{" "}
+                            <code style={{ userSelect: "all" }}>
+                                {bot.token}
+                            </code>
+                        </p>
+                        <BotEditor
+                            bot={{
+                                ...bot,
+                                username: user!.username,
+                            }}
+                        />
+                        <Button
+                            error
+                            onClick={() =>
+                                client.bots
+                                    .delete(bot._id)
+                                    .then(() =>
+                                        setBots(
+                                            bots.filter(
+                                                (x) => x._id !== bot._id,
+                                            ),
+                                        ),
+                                    )
+                            }>
+                            delete
+                        </Button>
+                    </div>
+                );
+            })}
+        </div>
+    );
+});