Initial bot page stylings

src/context/intermediate/Intermediate.tsx

@@ -24,6 +24,7 @@ export type Screen =
     | { id: "signed_out" }
     | { id: "error"; error: string }
     | { id: "clipboard"; text: string }
+    | { id: "token_reveal"; token: string; username: string }
     | { id: "external_link_prompt"; link: string }
     | {
           id: "_prompt";

src/context/intermediate/Modals.tsx

@@ -10,6 +10,7 @@ import { OnboardingModal } from "./modals/Onboarding";
 import { PromptModal } from "./modals/Prompt";
 import { SignedOutModal } from "./modals/SignedOut";
 import {ExternalLinkModal} from "./modals/ExternalLinkPrompt";
+import { TokenRevealModal } from "./modals/TokenReveal";
 
 export interface Props {
     screen: Screen;
@@ -33,6 +34,8 @@ export default function Modals({ screen, openScreen }: Props) {
             return <SignedOutModal onClose={onClose} {...screen} />;
         case "clipboard":
             return <ClipboardModal onClose={onClose} {...screen} />;
+        case "token_reveal":
+            return <TokenRevealModal onClose={onClose} {...screen} />;
         case "onboarding":
             return <OnboardingModal onClose={onClose} {...screen} />;
         case "external_link_prompt":

src/context/intermediate/modals/TokenReveal.tsx

@@ -0,0 +1,27 @@
+import { Text } from "preact-i18n";
+
+import Modal from "../../../components/ui/Modal";
+
+interface Props {
+    onClose: () => void;
+    token: string;
+    username: string;
+}
+
+export function TokenRevealModal({ onClose, token,username }: Props) {
+    return (
+        <Modal
+            visible={true}
+            onClose={onClose}
+            title={`${username}'s Token`}
+            actions={[
+                {
+                    onClick: onClose,
+                    confirmation: true,
+                    children: <Text id="app.special.modals.actions.close" />,
+                },
+            ]}>
+            <code style={{ userSelect: "all" }}>{token}</code>
+        </Modal>
+    );
+}

src/pages/settings/panes/MyBots.tsx

@@ -1,17 +1,26 @@
+import { Key, Clipboard, Globe } 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";
+import styled from "styled-components";
 
+import styles from "./Panes.module.scss";
+import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
+import { stopPropagation } from "../../../lib/stopPropagation";
+
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { useClient } from "../../../context/revoltjs/RevoltClient";
 
-import UserShort from "../../../components/common/user/UserShort";
+import Tooltip from "../../../components/common/Tooltip";
+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";
 
 interface Data {
     _id: string;
@@ -20,6 +29,21 @@ interface Data {
     interactions_url?: string;
 }
 
+const BotBadge = styled.div`
+    display: inline-block;
+
+    height: 1.3em;
+    padding: 0px 4px;
+    font-size: 0.7em;
+    user-select: none;
+    margin-inline-start: 2px;
+    text-transform: uppercase;
+
+    color: var(--foreground);
+    background: var(--accent);
+    border-radius: calc(var(--border-radius) / 2);
+`;
+
 function BotEditor({ bot }: { bot: Data }) {
     const client = useClient();
     const [data, setData] = useState<Data>(bot);
@@ -78,10 +102,11 @@ export const MyBots = observer(() => {
     }, []);
 
     const [name, setName] = useState("");
-    const { writeClipboard } = useIntermediate();
+    const [editMode, setEditMode] = useState(false);
+    const { writeClipboard, openScreen } = useIntermediate();
 
     return (
-        <div>
+        <div className={styles.myBots}>
             <Tip warning hideSeparator>
                 This section is under construction.
             </Tip>
@@ -113,16 +138,80 @@ export const MyBots = observer(() => {
                         key={bot._id}
                         style={{
                             background: "var(--secondary-background)",
-                            margin: "8px",
+                            margin: "8px 0",
                             padding: "12px",
                         }}>
-                        <UserShort user={user} />
+                        <div className={styles.infoheader}>
-                        <p>
+                            <div className={styles.container}>
-                            token:{" "}
+                                <UserIcon
-                            <code style={{ userSelect: "all" }}>
+                                    className={styles.avatar}
-                                {bot.token}
+                                    target={user!}
-                            </code>
+                                    size={48}
-                        </p>
+                                    onClick={() =>
+                                        openScreen({
+                                            id: "profile",
+                                            user_id: user!._id,
+                                        })
+                                    }
+                                />
+                                <div className={styles.userDetail}>
+                                    <div className={styles.userName}>
+                                        {user!.username}{" "}
+                                        <BotBadge>
+                                            <Text id="app.main.channel.bot" />
+                                        </BotBadge>
+                                    </div>
+
+                                    <div className={styles.userid}>
+                                        <Tooltip
+                                            content={
+                                                <Text id="app.special.copy" />
+                                            }>
+                                            <a
+                                                onClick={() =>
+                                                    writeClipboard(
+                                                        client.user!._id,
+                                                    )
+                                                }>
+                                                {client.user!._id}
+                                            </a>
+                                        </Tooltip>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <Tooltip content={bot.public ? "Bot is public. Anyone can invite it." : "Bot is private. Only you can invite it."}>
+                                {bot.public ? <Globe size={24} /> : <LockAlt size={24} />}
+                            </Tooltip>
+                            {/* <Button onClick={() => switchPage("profile")} contrast>
+                                <Text id="app.settings.pages.profile.edit_profile" />
+                            </Button> */}
+                        </div>
+                        <CategoryButton
+                            account
+                            icon={<Key size={24} />}
+                            onClick={() => writeClipboard(bot.token)}
+                            description={
+                                <>
+                                    {"••••••••••••••••••••••••••••••••••••"}{" "}
+                                    <a
+                                        onClick={(ev) =>
+                                            stopPropagation(
+                                                ev,
+                                                openScreen({
+                                                    id: "token_reveal",
+                                                    token: bot.token,
+                                                    username: user!.username,
+                                                }),
+                                            )
+                                        }>
+                                        <Text id="app.special.modals.actions.reveal" />
+                                    </a>
+                                </>
+                            }
+                            action={<Clipboard size={18} />}>
+                            Token
+                        </CategoryButton>
                         <BotEditor
                             bot={{
                                 ...bot,

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

@@ -523,6 +523,69 @@
     }
 }
 
+.myBots {
+    .infoheader {
+        margin-bottom: 15px;
+        gap: 8px;
+        width: 100%;
+        padding: 6px 5px;
+        display: flex;
+        overflow: hidden;
+        align-items: center;
+        border-radius: var(--border-radius);
+
+        .container {
+            display: flex;
+            gap: 16px;
+            align-items: center;
+            flex-direction: row;
+            width: 100%;
+        }
+
+        .userDetail {
+            display: flex;
+            flex-grow: 1;
+            gap: 2px;
+            flex-direction: column;
+            font-size: 1.2rem;
+            font-weight: 600;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+        }
+
+        .userName {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 5px;
+        }
+
+        .avatar {
+            cursor: pointer;
+            transition: 0.2s ease filter;
+
+            &:hover {
+                filter: brightness(80%);
+            }
+        }
+
+        .userid {
+            font-size: 12px;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            color: var(--tertiary-foreground);
+
+            a {
+                color: inherit;
+                cursor: pointer;
+            }
+        }
+    }
+}
+
 section {
     margin-bottom: 20px;
 }