Fix search scroll.

Add bot badge.

external/lang

@@ -1 +1 @@
-Subproject commit f20556de7648d4c600ef163b909d2f0141d25ded
+Subproject commit 7be90cf44ba08d235ae52d7dc6073d8f9347232b

package.json

@@ -116,7 +116,7 @@
         "react-virtuoso": "^1.10.4",
         "redux": "^4.1.0",
         "revolt-api": "^0.5.2-alpha.0",
-        "revolt.js": "5.0.0-alpha.21",
+        "revolt.js": "5.0.1-alpha.0",
         "rimraf": "^3.0.2",
         "sass": "^1.35.1",
         "shade-blend-color": "^1.0.0",

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>
+            <GenericSidebarList>
-                <Overline type="error" onClick={close} block>
+                <SearchBase>
-                    « back to members
+                    <Overline type="error" onClick={close} block>
-                </Overline>
+                        « back to members
-                <Overline type="subtle" block>
+                    </Overline>
-                    <Text id="app.main.channel.search.title" />
+                    <Overline type="subtle" block>
-                </Overline>
+                        <Text id="app.main.channel.search.title" />
-                <InputBox
+                    </Overline>
-                    value={query}
+                    <InputBox
-                    onKeyDown={(e) => e.key === "Enter" && search()}
+                        value={query}
-                    onChange={(e) => setQuery(e.currentTarget.value)}
+                        onKeyDown={(e) => e.key === "Enter" && search()}
-                />
+                        onChange={(e) => setQuery(e.currentTarget.value)}
-                <div class="sort">
+                    />
-                    {["Latest", "Oldest", "Relevance"].map((key) => (
+                    <div class="sort">
-                        <Button
+                        {["Latest", "Oldest", "Relevance"].map((key) => (
-                            key={key}
+                            <Button
-                            compact
+                                key={key}
-                            error={sort === key}
+                                compact
-                            onClick={() => setSort(key as Sort)}>
+                                error={sort === key}
-                            <Text
+                                onClick={() => setSort(key as Sort)}>
-                                id={`app.main.channel.search.sort.${key.toLowerCase()}`}
+                                <Text
-                            />
+                                    id={`app.main.channel.search.sort.${key.toLowerCase()}`}
-                        </Button>
+                                />
-                    ))}
+                            </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>
-                            );
-                        })}
                     </div>
-                )}
+                    {state.type === "loading" && <Preloader type="ring" />}
-            </SearchBase>
+                    {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>
     );
 }

yarn.lock

@@ -3605,10 +3605,10 @@ revolt-api@^0.5.2-alpha.0:
   resolved "https://registry.yarnpkg.com/revolt-api/-/revolt-api-0.5.2-alpha.0.tgz#a41f44ee38622636c9b5b5843f9e2798a79f00d3"
   integrity sha512-VI/o4nQTPXrDCVdFpZFfZfj7Q4nunj62gftdmYJtuSmXx+6eN2Nve7QQZjNt6UIH6Dc/IDgiFDcBdafBF9YXug==
 
-revolt.js@5.0.0-alpha.21:
+revolt.js@5.0.1-alpha.0:
-  version "5.0.0-alpha.21"
+  version "5.0.1-alpha.0"
-  resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-5.0.0-alpha.21.tgz#24e01dbcb2887dadcb480732a1b9b8f167c557b5"
+  resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-5.0.1-alpha.0.tgz#3c79313ffe595ba5a4881692d5f3d2f5f6237bdb"
-  integrity sha512-UNRJRCyKoOFKULRYIWFZ3QN4th6s/sgMpQXtqaitVMtVBo6BJJvUT9wUM3WV08pN1acr3EPwnVre6sOtKM7khg==
+  integrity sha512-fdYQgYA/aSx7JZn7yAwqb/8hix+nI/AErt6oAkb412qAyTFxHD7LHeUWofRMJ+I0rAreQUYUwtC5FJH82S58pQ==
   dependencies:
     axios "^0.19.2"
     eventemitter3 "^4.0.7"