diff --git a/src/components/common/messaging/SystemMessage.tsx b/src/components/common/messaging/SystemMessage.tsx index 43e04d57..68d9f0f6 100644 --- a/src/components/common/messaging/SystemMessage.tsx +++ b/src/components/common/messaging/SystemMessage.tsx @@ -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 = ( - , - }} - /> + + , + }} + /> + {data.type == "user_joined" && + createdAt && + (settings.get("appearance:show_account_age") || + Date.now() - createdAt < + 1000 * 60 * 60 * 24 * 7) && ( + + }> + + + )} + ); break; + } case "channel_renamed": children = ( } /> + {/* Option to always show the account creation age next to join system messages. */} + + settings.get("appearance:show_account_age") ?? false + } + onChange={(v) => settings.set("appearance:show_account_age", v)} + title={ + + } + description={ + + } + />

diff --git a/src/mobx/stores/Settings.ts b/src/mobx/stores/Settings.ts index 344d65a7..bfb28cf4 100644 --- a/src/mobx/stores/Settings.ts +++ b/src/mobx/stores/Settings.ts @@ -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; @@ -79,7 +80,7 @@ export default class Settings */ @action set(key: T, value: ISettings[T]) { // Emoji needs to be immediately applied. - if (key === 'appearance:emoji') { + if (key === "appearance:emoji") { setGlobalEmojiPack(value as EmojiPack); }