Fix search scroll.

Add bot badge.
This commit is contained in:
Paul 2021-08-12 12:16:24 +01:00
parent 65d44c72bd
commit 8137409dae
5 changed files with 90 additions and 57 deletions

2
external/lang vendored

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

View file

@ -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",

View file

@ -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" />}

View file

@ -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>
);
}

View file

@ -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:
version "5.0.0-alpha.21"
resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-5.0.0-alpha.21.tgz#24e01dbcb2887dadcb480732a1b9b8f167c557b5"
integrity sha512-UNRJRCyKoOFKULRYIWFZ3QN4th6s/sgMpQXtqaitVMtVBo6BJJvUT9wUM3WV08pN1acr3EPwnVre6sOtKM7khg==
revolt.js@5.0.1-alpha.0:
version "5.0.1-alpha.0"
resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-5.0.1-alpha.0.tgz#3c79313ffe595ba5a4881692d5f3d2f5f6237bdb"
integrity sha512-fdYQgYA/aSx7JZn7yAwqb/8hix+nI/AErt6oAkb412qAyTFxHD7LHeUWofRMJ+I0rAreQUYUwtC5FJH82S58pQ==
dependencies:
axios "^0.19.2"
eventemitter3 "^4.0.7"