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

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 = (
-                    <TextReact
+                    <Row centred>
-                        id={`app.main.channel.system.${data.type}`}
+                        <TextReact
-                        fields={{
+                            id={`app.main.channel.system.${data.type}`}
-                            user: <UserShort user={data.user} />,
+                            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

src/components/settings/appearance/AppearanceOptions.tsx

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

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