feat: Add a new bot invite menu.

This code allows you to add a bot to your Revolt server or group. Simply select the option to add to a server or group, then choose the specific server or group from the dropdown menu. Click the "Add Bot" button to complete the process. This code is easy to use and can help streamline your communication and organization efforts within Revolt.

src/pages/invite/InviteBot.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-literals */
 import { useParams } from "react-router-dom";
 import { API } from "revolt.js";
 import styled from "styled-components/macro";
@@ -11,21 +12,64 @@ import Markdown from "../../components/markdown/Markdown";
 import { useClient } from "../../controllers/client/ClientController";
 
 const BotInfo = styled.div`
-    gap: 12px;
     display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 12px;
     padding: 12px;
+    width: 100%;
+    margin: 20px 0;
+    border-radius: 10px;
 
-    h1,
+    .name {
-    p {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        font-size: 1.5rem;
+        font-weight: 500;
+
+        h1 {
             margin: 0;
         }
+    }
+
+    .description {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        font-size: 1rem;
+        line-height: 1;
+        color: #ddd;
+        margin-top: 12px;
+        margin-bottom: 24px;
+    }
 `;
 
 const Option = styled.div`
-    gap: 8px;
     display: flex;
-    margin-top: 4px;
+    flex-direction: column;
-    margin-bottom: 12px;
+    justify-content: center;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    width: 100%;
+    margin: 20px 0;
+
+    label {
+        font-size: 16px;
+        margin-right: 16px;
+    }
+
+    .select-container {
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+    }
 `;
 
 export default function InviteBot() {
@@ -38,55 +82,99 @@ export default function InviteBot() {
         // eslint-disable-next-line
     }, []);
 
-    const [server, setServer] = useState("none");
+    const [server, setServer] = useState<string | undefined>(undefined);
-    const [group, setGroup] = useState("none");
+    const [group, setGroup] = useState<string | undefined>(undefined);
+    const [selectedOption, setSelectedOption] = useState("");
+
+    const handleAdd = () => {
+        if (selectedOption === "server" && server) {
+            client.bots.invite(data!._id, { server });
+        } else if (selectedOption === "group" && group) {
+            client.bots.invite(data!._id, { group });
+        }
+    };
 
     return (
-        <div style={{ padding: "6em" }}>
+        <div
+            style={{
+                padding: "6em",
+                overflowY: "auto",
+            }}>
             <Tip palette="warning">This section is under construction.</Tip>
             {typeof data === "undefined" && <Preloader type="spinner" />}
             {data && (
                 <>
-                    <BotInfo>
+                    <BotInfo
-                        <UserIcon size={64} attachment={data.avatar} />
+                        style={{
+                            padding: "16px",
+                        }}>
                         <div className="name">
+                            <UserIcon size={64} attachment={data.avatar} />
                             <h1>{data.username}</h1>
-                            {data.description && (
-                                <Markdown content={data.description} />
-                            )}
                         </div>
+                        {data.description && (
+                            <div className="description">
+                                <Markdown content={data.description} />
+                            </div>
+                        )}
                     </BotInfo>
-                    <Category>Add to server</Category>
                     <Option>
+                        <Category>
+                            Add this bot to your Revolt server, group
+                        </Category>
+                        <div className="select-container">
                             <ComboBox
+                                id="server-select"
+                                value={selectedOption}
+                                onChange={(e) =>
+                                    setSelectedOption(e.currentTarget.value)
+                                }>
+                                <option value="">Select an option</option>
+                                <option value="server">Server</option>
+                                <option value="group">Group</option>
+                            </ComboBox>
+                            {selectedOption === "server" && (
+                                <div className="select-container">
+                                    <ComboBox
+                                        id="server-select"
                                         value={server}
-                            onChange={(e) => setServer(e.currentTarget.value)}>
+                                        onChange={(e) =>
-                            <option value="none">Select a server</option>
+                                            setServer(e.currentTarget.value)
+                                        }>
+                                        <option value="none">
+                                            Select a server
+                                        </option>
                                         {[...client.servers.values()]
-                                .filter((x) => x.havePermission("ManageServer"))
+                                            .filter((x) =>
+                                                x.havePermission(
+                                                    "ManageServer",
+                                                ),
+                                            )
                                             .map((server) => (
-                                    <option value={server._id} key={server._id}>
+                                                <option
+                                                    value={server._id}
+                                                    key={server._id}>
                                                     {server.name}
                                                 </option>
                                             ))}
                                     </ComboBox>
-                        <Button
+                                </div>
-                            palette="secondary"
+                            )}
-                            onClick={() =>
+                            {selectedOption === "group" && (
-                                server !== "none" &&
+                                <div className="select-container">
-                                client.bots.invite(data._id, { server })
-                            }>
-                            Add
-                        </Button>
-                    </Option>
-                    <Category>Add to group</Category>
-                    <Option>
                                     <ComboBox
                                         value={group}
-                            onChange={(e) => setGroup(e.currentTarget.value)}>
+                                        onChange={(e) =>
-                            <option value="none">Select a group</option>
+                                            setGroup(e.currentTarget.value)
+                                        }>
+                                        <option value="none">
+                                            Select a group
+                                        </option>
                                         {[...client.channels.values()]
-                                .filter((x) => x.channel_type === "Group")
+                                            .filter(
+                                                (x) =>
+                                                    x.channel_type === "Group",
+                                            )
                                             .map((channel) => (
                                                 <option
                                                     value={channel._id}
@@ -95,14 +183,12 @@ export default function InviteBot() {
                                                 </option>
                                             ))}
                                     </ComboBox>
-                        <Button
+                                </div>
-                            palette="secondary"
+                            )}
-                            onClick={() =>
+                            <Button palette="secondary" onClick={handleAdd}>
-                                group !== "none" &&
+                                Add Bot
-                                client.bots.invite(data._id, { group })
-                            }>
-                            Add
                             </Button>
+                        </div>
                     </Option>
                 </>
             )}