feat: display account age next to join messages (#750)

This commit is contained in:
Jan 2022-09-20 19:23:06 +02:00 committed by GitHub
parent 2687f98952
commit 4f2fc267f9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 57 additions and 8 deletions

View file

@ -14,12 +14,21 @@ import {
import { observer } from "mobx-react-lite";
import { Message, API } from "revolt.js";
import styled from "styled-components/macro";
import { decodeTime } from "ulid";
import { useTriggerEvents } from "preact-context-menu";
import { Text } from "preact-i18n";
import { Row } from "@revoltchat/ui";
import { TextReact } from "../../../lib/i18n";
import { useApplicationState } from "../../../mobx/State";
import { dayjs } from "../../../context/Locale";
import Markdown from "../../markdown/Markdown";
import Tooltip from "../Tooltip";
import UserShort from "../user/UserShort";
import MessageBase, { MessageDetail, MessageInfo } from "./MessageBase";
@ -78,6 +87,8 @@ export const SystemMessage = observer(
const data = message.asSystemMessage;
if (!data) return null;
const settings = useApplicationState().settings;
const SystemMessageIcon =
iconDictionary[data.type as API.SystemMessage["type"]] ??
InfoCircle;
@ -103,16 +114,39 @@ export const SystemMessage = observer(
case "user_joined":
case "user_left":
case "user_kicked":
case "user_banned":
case "user_banned": {
const createdAt = data.user ? decodeTime(data.user._id) : null;
children = (
<TextReact
id={`app.main.channel.system.${data.type}`}
fields={{
user: <UserShort user={data.user} />,
}}
/>
<Row centred>
<TextReact
id={`app.main.channel.system.${data.type}`}
fields={{
user: <UserShort user={data.user} />,
}}
/>
{data.type == "user_joined" &&
createdAt &&
(settings.get("appearance:show_account_age") ||
Date.now() - createdAt <
1000 * 60 * 60 * 24 * 7) && (
<Tooltip
content={
<Text
id="app.main.channel.system.registered_at"
fields={{
time: dayjs(
createdAt,
).fromNow(),
}}
/>
}>
<InfoCircle size={16} />
</Tooltip>
)}
</Row>
);
break;
}
case "channel_renamed":
children = (
<TextReact

View file

@ -26,6 +26,20 @@ export default function AppearanceOptions() {
<Text id="app.settings.pages.appearance.appearance_options.show_send_desc" />
}
/>
{/* Option to always show the account creation age next to join system messages. */}
<ObservedInputElement
type="checkbox"
value={() =>
settings.get("appearance:show_account_age") ?? false
}
onChange={(v) => settings.set("appearance:show_account_age", v)}
title={
<Text id="app.settings.pages.appearance.appearance_options.show_account_age" />
}
description={
<Text id="app.settings.pages.appearance.appearance_options.show_account_age_desc" />
}
/>
<hr />
<h3>
<Text id="app.settings.pages.appearance.theme_options.title" />

View file

@ -21,6 +21,7 @@ export interface ISettings {
"appearance:seasonal": boolean;
"appearance:transparency": boolean;
"appearance:show_send_button": boolean;
"appearance:show_account_age": boolean;
"appearance:theme:base": "dark" | "light";
"appearance:theme:overrides": Partial<Overrides>;
@ -79,7 +80,7 @@ export default class Settings
*/
@action set<T extends keyof ISettings>(key: T, value: ISettings[T]) {
// Emoji needs to be immediately applied.
if (key === 'appearance:emoji') {
if (key === "appearance:emoji") {
setGlobalEmojiPack(value as EmojiPack);
}