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