Merge branch 'master' of https://github.com/revoltchat/revite into pr-5

src/components/common/user/UserShort.tsx

@@ -1,6 +1,7 @@
 import { observer } from "mobx-react-lite";
 import { useParams } from "react-router-dom";
 import { User } from "revolt.js/dist/maps/Users";
+import styled from "styled-components";
 
 import { Text } from "preact-i18n";
 
@@ -9,6 +10,21 @@ import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import UserIcon from "./UserIcon";
 
+const BotBadge = styled.div`
+    display: inline-block;
+
+    height: 1.4em;
+    padding: 0 4px;
+    font-size: 0.6em;
+    user-select: none;
+    margin-inline-start: 2px;
+    text-transform: uppercase;
+
+    color: var(--foreground);
+    background: var(--accent);
+    border-radius: calc(var(--border-radius) / 2);
+`;
+
 export const Username = observer(
     ({
         user,
@@ -51,6 +67,21 @@ export const Username = observer(
             }
         }
 
+        if (user?.bot) {
+            return (
+                <>
+                    <span {...otherProps} style={{ color }}>
+                        {username ?? (
+                            <Text id="app.main.channel.unknown_user" />
+                        )}
+                    </span>
+                    <BotBadge>
+                        <Text id="app.main.channel.bot" />
+                    </BotBadge>
+                </>
+            );
+        }
+
         return (
             <span {...otherProps} style={{ color }}>
                 {username ?? <Text id="app.main.channel.unknown_user" />}

src/components/navigation/right/Search.tsx

@@ -13,7 +13,7 @@ import InputBox from "../../ui/InputBox";
 import Overline from "../../ui/Overline";
 import Preloader from "../../ui/Preloader";
 
-import { GenericSidebarBase } from "../SidebarBase";
+import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
 
 type SearchState =
     | {
@@ -100,57 +100,59 @@ export function SearchSidebar({ close }: Props) {
 
     return (
         <GenericSidebarBase>
-            <SearchBase>
-                <Overline type="error" onClick={close} block>
-                    « back to members
-                </Overline>
-                <Overline type="subtle" block>
-                    <Text id="app.main.channel.search.title" />
-                </Overline>
-                <InputBox
-                    value={query}
-                    onKeyDown={(e) => e.key === "Enter" && search()}
-                    onChange={(e) => setQuery(e.currentTarget.value)}
-                />
-                <div class="sort">
-                    {["Latest", "Oldest", "Relevance"].map((key) => (
-                        <Button
-                            key={key}
-                            compact
-                            error={sort === key}
-                            onClick={() => setSort(key as Sort)}>
-                            <Text
-                                id={`app.main.channel.search.sort.${key.toLowerCase()}`}
-                            />
-                        </Button>
-                    ))}
-                </div>
-                {state.type === "loading" && <Preloader type="ring" />}
-                {state.type === "results" && (
-                    <div class="list">
-                        {state.results.map((message) => {
-                            let href = "";
-                            if (channel?.channel_type === "TextChannel") {
-                                href += `/server/${channel.server_id}`;
-                            }
-
-                            href += `/channel/${message.channel_id}/${message._id}`;
-
-                            return (
-                                <Link to={href} key={message._id}>
-                                    <div class="message">
-                                        <Message
-                                            message={message}
-                                            head
-                                            hideReply
-                                        />
-                                    </div>
-                                </Link>
-                            );
-                        })}
+            <GenericSidebarList>
+                <SearchBase>
+                    <Overline type="error" onClick={close} block>
+                        « back to members
+                    </Overline>
+                    <Overline type="subtle" block>
+                        <Text id="app.main.channel.search.title" />
+                    </Overline>
+                    <InputBox
+                        value={query}
+                        onKeyDown={(e) => e.key === "Enter" && search()}
+                        onChange={(e) => setQuery(e.currentTarget.value)}
+                    />
+                    <div class="sort">
+                        {["Latest", "Oldest", "Relevance"].map((key) => (
+                            <Button
+                                key={key}
+                                compact
+                                error={sort === key}
+                                onClick={() => setSort(key as Sort)}>
+                                <Text
+                                    id={`app.main.channel.search.sort.${key.toLowerCase()}`}
+                                />
+                            </Button>
+                        ))}
                     </div>
-                )}
-            </SearchBase>
+                    {state.type === "loading" && <Preloader type="ring" />}
+                    {state.type === "results" && (
+                        <div class="list">
+                            {state.results.map((message) => {
+                                let href = "";
+                                if (channel?.channel_type === "TextChannel") {
+                                    href += `/server/${channel.server_id}`;
+                                }
+
+                                href += `/channel/${message.channel_id}/${message._id}`;
+
+                                return (
+                                    <Link to={href} key={message._id}>
+                                        <div class="message">
+                                            <Message
+                                                message={message}
+                                                head
+                                                hideReply
+                                            />
+                                        </div>
+                                    </Link>
+                                );
+                            })}
+                        </div>
+                    )}
+                </SearchBase>
+            </GenericSidebarList>
         </GenericSidebarBase>
     );
 }

src/context/intermediate/popovers/ServerIdentityModal.tsx

@@ -7,6 +7,7 @@ import Button from "../../../components/ui/Button";
 import InputBox from "../../../components/ui/InputBox";
 import Modal from "../../../components/ui/Modal";
 import Overline from "../../../components/ui/Overline";
+import Tip from "../../../components/ui/Tip";
 
 import { FileUploader } from "../../revoltjs/FileUploads";
 import { useClient } from "../../revoltjs/RevoltClient";
@@ -30,6 +31,9 @@ export const ServerIdentityModal = observer(({ server, onClose }: Props) => {
 
     return (
         <Modal visible={true} onClose={onClose}>
+            <Tip warning hideSeparator>
+                This section is under construction.
+            </Tip>
             <Overline type="subtle">Nickname</Overline>
             <p>
                 <InputBox

src/context/intermediate/popovers/UserProfile.module.scss

@@ -136,34 +136,34 @@
     a {
         min-width: 0;
     }
+}
 
-    .entry {
-        gap: 8px;
+.entry {
+    gap: 8px;
+    min-width: 0;
+    padding: 12px;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    transition: background-color 0.1s;
+    color: var(--secondary-foreground);
+    border-radius: var(--border-radius);
+    background-color: var(--secondary-background);
+
+    &:hover {
+        background-color: var(--primary-background);
+    }
+
+    img {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+    }
+
+    span {
         min-width: 0;
-        padding: 12px;
-        display: flex;
-        cursor: pointer;
-        align-items: center;
-        transition: background-color 0.1s;
-        color: var(--secondary-foreground);
-        border-radius: var(--border-radius);
-        background-color: var(--secondary-background);
-
-        &:hover {
-            background-color: var(--primary-background);
-        }
-
-        img {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-        }
-
-        span {
-            min-width: 0;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-        }
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
     }
 }

src/context/intermediate/popovers/UserProfile.tsx

@@ -14,9 +14,11 @@ import ChannelIcon from "../../../components/common/ChannelIcon";
 import ServerIcon from "../../../components/common/ServerIcon";
 import Tooltip from "../../../components/common/Tooltip";
 import UserIcon from "../../../components/common/user/UserIcon";
+import { Username } from "../../../components/common/user/UserShort";
 import UserStatus from "../../../components/common/user/UserStatus";
 import IconButton from "../../../components/ui/IconButton";
 import Modal from "../../../components/ui/Modal";
+import Overline from "../../../components/ui/Overline";
 import Preloader from "../../../components/ui/Preloader";
 
 import Markdown from "../../../components/markdown/Markdown";
@@ -118,7 +120,9 @@ export const UserProfile = observer(
         const backgroundURL =
             profile &&
             client.generateFileURL(profile.background, { width: 1000 }, true);
+
         const badges = user.badges ?? 0;
+        const flags = user.flags ?? 0;
 
         return (
             <Modal
@@ -229,11 +233,63 @@ export const UserProfile = observer(
                 <div className={styles.content}>
                     {tab === "profile" && (
                         <div>
-                            {!(profile?.content || badges > 0) && (
+                            {!(
+                                profile?.content ||
+                                badges > 0 ||
+                                flags > 0 ||
+                                user.bot
+                            ) && (
                                 <div className={styles.empty}>
                                     <Text id="app.special.popovers.user_profile.empty" />
                                 </div>
                             )}
+                            {flags & 1 ? (
+                                /** ! FIXME: i18n this area */
+                                <Overline type="error" block>
+                                    User is suspended
+                                </Overline>
+                            ) : undefined}
+                            {flags & 2 ? (
+                                <Overline type="error" block>
+                                    User deleted their account
+                                </Overline>
+                            ) : undefined}
+                            {flags & 4 ? (
+                                <Overline type="error" block>
+                                    User is banned
+                                </Overline>
+                            ) : undefined}
+                            {user.bot ? (
+                                <>
+                                    <div className={styles.category}>
+                                        bot owner
+                                    </div>
+                                    <div
+                                        onClick={() =>
+                                            user.bot &&
+                                            openScreen({
+                                                id: "profile",
+                                                user_id: user.bot.owner,
+                                            })
+                                        }
+                                        className={styles.entry}
+                                        key={user.bot.owner}>
+                                        <UserIcon
+                                            size={32}
+                                            target={client.users.get(
+                                                user.bot.owner,
+                                            )}
+                                        />
+                                        <span>
+                                            <Username
+                                                user={client.users.get(
+                                                    user.bot.owner,
+                                                )}
+                                            />
+                                        </span>
+                                    </div>
+                                </>
+                            ) : undefined}
                             {badges > 0 && (
                                 <div className={styles.category}>
                                     <Text id="app.special.popovers.user_profile.sub.badges" />

src/pages/RevoltApp.tsx

@@ -20,6 +20,7 @@ import Developer from "./developer/Developer";
 import Friends from "./friends/Friends";
 import Home from "./home/Home";
 import Invite from "./invite/Invite";
+import InviteBot from "./invite/InviteBot";
 import ChannelSettings from "./settings/ChannelSettings";
 import ServerSettings from "./settings/ServerSettings";
 import Settings from "./settings/Settings";
@@ -119,6 +120,7 @@ export default function App() {
                         <Route path="/dev" component={Developer} />
                         <Route path="/friends" component={Friends} />
                         <Route path="/open/:id" component={Open} />
+                        <Route path="/bot/:id" component={InviteBot} />
                         <Route path="/invite/:code" component={Invite} />
                         <Route path="/" component={Home} />
                     </Switch>

src/pages/invite/InviteBot.tsx

@@ -0,0 +1,80 @@
+import { useParams } from "react-router-dom";
+import { Route } from "revolt.js/dist/api/routes";
+
+import { useEffect, useState } from "preact/hooks";
+
+import { useClient } from "../../context/revoltjs/RevoltClient";
+
+import UserIcon from "../../components/common/user/UserIcon";
+import Button from "../../components/ui/Button";
+import ComboBox from "../../components/ui/ComboBox";
+import Overline from "../../components/ui/Overline";
+import Preloader from "../../components/ui/Preloader";
+
+export default function InviteBot() {
+    const { id } = useParams<{ id: string }>();
+    const client = useClient();
+    const [data, setData] =
+        useState<Route<"GET", "/bots/id/invite">["response"]>();
+
+    useEffect(() => {
+        client.bots.fetchPublic(id).then(setData);
+        // eslint-disable-next-line
+    }, []);
+
+    const [server, setServer] = useState("none");
+    const [group, setGroup] = useState("none");
+
+    return (
+        <div style={{ padding: "6em" }}>
+            {typeof data === "undefined" && <Preloader type="spinner" />}
+            {data && (
+                <>
+                    <UserIcon size={64} attachment={data.avatar} />
+                    <h1>{data.username}</h1>
+                    {data.description && <p>{data.description}</p>}
+                    <Overline type="subtle">Add to server</Overline>
+                    <ComboBox
+                        value={server}
+                        onChange={(e) => setServer(e.currentTarget.value)}>
+                        <option value="none">un selected</option>
+                        {[...client.servers.values()].map((server) => (
+                            <option value={server._id} key={server._id}>
+                                {server.name}
+                            </option>
+                        ))}
+                    </ComboBox>
+                    <Button
+                        contrast
+                        onClick={() =>
+                            group !== "none" &&
+                            client.bots.invite(data._id, { server })
+                        }>
+                        add
+                    </Button>
+                    <Overline type="subtle">Add to group</Overline>
+                    <ComboBox
+                        value={group}
+                        onChange={(e) => setGroup(e.currentTarget.value)}>
+                        <option value="none">un selected</option>
+                        {[...client.channels.values()]
+                            .filter((x) => x.channel_type === "Group")
+                            .map((channel) => (
+                                <option value={channel._id} key={channel._id}>
+                                    {channel.name}
+                                </option>
+                            ))}
+                    </ComboBox>
+                    <Button
+                        contrast
+                        onClick={() =>
+                            group !== "none" &&
+                            client.bots.invite(data._id, { group })
+                        }>
+                        add
+                    </Button>
+                </>
+            )}
+        </div>
+    );
+}

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,160 @@
+import { observer } from "mobx-react-lite";
+import { Bot } from "revolt-api/types/Bots";
+
+import { useEffect, useState } from "preact/hooks";
+
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+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("");
+    const { writeClipboard } = useIntermediate();
+
+    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>
+                        <Button
+                            onClick={() =>
+                                writeClipboard(
+                                    `${window.origin}/bot/${bot._id}`,
+                                )
+                            }>
+                            copy invite link
+                        </Button>
+                    </div>
+                );
+            })}
+        </div>
+    );
+});