Show user flags and the bot owner.

This commit is contained in:
Paul
2021-08-12 14:40:13 +01:00
parent 8137409dae
commit c27f596d40
4 changed files with 89 additions and 33 deletions

View File

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

View File

@@ -13,9 +13,11 @@ import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
import ChannelIcon from "../../../components/common/ChannelIcon";
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";
@@ -112,7 +114,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
@@ -218,11 +222,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" />