new plugin MessageLatency: indicator for other people's latency (#2353)

src/plugins/messageLatency/README.md

@@ -0,0 +1,31 @@
+# MessageLatency
+
+Displays an indicator for messages that took ≥n seconds to send.
+
+> **NOTE**
+>
+> -   This plugin only applies to messages received after opening the channel
+> -   False positives can exist if the user's system clock has drifted.
+> -   Grouped messages only display latency of the first message
+
+## Demo
+
+### Chat View
+
+![chat-view](https://github.com/Vendicated/Vencord/assets/82430093/69430881-60b3-422f-aa3d-c62953837566)
+
+### Clock -ve Drift
+
+![pissbot-on-top](https://github.com/Vendicated/Vencord/assets/82430093/d9248b66-e761-4872-8829-e8bf4fea6ec8)
+
+### Clock +ve Drift
+
+![dumb-ai](https://github.com/Vendicated/Vencord/assets/82430093/0e9783cf-51d5-4559-ae10-42399e7d4099)
+
+### Connection Delay
+
+![who-this](https://github.com/Vendicated/Vencord/assets/82430093/fd68873d-8630-42cc-a166-e9063d2718b2)
+
+### Icons
+
+![icons](https://github.com/Vendicated/Vencord/assets/82430093/17630bd9-44ee-4967-bcdf-3315eb6eca85)

src/plugins/messageLatency/index.tsx

@@ -0,0 +1,147 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { definePluginSettings } from "@api/Settings";
+import ErrorBoundary from "@components/ErrorBoundary";
+import { Devs } from "@utils/constants";
+import { isNonNullish } from "@utils/guards";
+import definePlugin, { OptionType } from "@utils/types";
+import { findExportedComponentLazy } from "@webpack";
+import { SnowflakeUtils, Tooltip } from "@webpack/common";
+import { Message } from "discord-types/general";
+
+type FillValue = ("status-danger" | "status-warning" | "text-muted");
+type Fill = [FillValue, FillValue, FillValue];
+type DiffKey = keyof Diff;
+
+interface Diff {
+    days: number,
+    hours: number,
+    minutes: number,
+    seconds: number;
+}
+
+const HiddenVisually = findExportedComponentLazy("HiddenVisually");
+
+export default definePlugin({
+    name: "MessageLatency",
+    description: "Displays an indicator for messages that took ≥n seconds to send",
+    authors: [Devs.arHSM],
+    settings: definePluginSettings({
+        latency: {
+            type: OptionType.NUMBER,
+            description: "Threshold in seconds for latency indicator",
+            default: 2
+        }
+    }),
+    patches: [
+        {
+            find: "showCommunicationDisabledStyles",
+            replacement: {
+                match: /(message:(\i),avatar:\i,username:\(0,\i.jsxs\)\(\i.Fragment,\{children:\[)(\i&&)/,
+                replace: "$1$self.Tooltip()({ message: $2 }),$3"
+            }
+        }
+    ],
+    stringDelta(delta: number) {
+        const diff: Diff = {
+            days: Math.round(delta / (60 * 60 * 24)),
+            hours: Math.round((delta / (60 * 60)) % 24),
+            minutes: Math.round((delta / (60)) % 60),
+            seconds: Math.round(delta % 60),
+        };
+
+        const str = (k: DiffKey) => diff[k] > 0 ? `${diff[k]} ${k}` : null;
+        const keys = Object.keys(diff) as DiffKey[];
+
+        return keys.map(str).filter(isNonNullish).join(" ") || "0 seconds";
+    },
+    latencyTooltipData(message: Message) {
+        const { id, nonce } = message;
+
+        // Message wasn't received through gateway
+        if (!isNonNullish(nonce)) return null;
+
+        const delta = Math.round((SnowflakeUtils.extractTimestamp(id) - SnowflakeUtils.extractTimestamp(nonce)) / 1000);
+
+        // Thanks dziurwa (I hate you)
+        // This is when the user's clock is ahead
+        // Can't do anything if the clock is behind
+        const abs = Math.abs(delta);
+        const ahead = abs !== delta;
+
+        const stringDelta = this.stringDelta(abs);
+
+        // Also thanks dziurwa
+        // 2 minutes
+        const TROLL_LIMIT = 2 * 60;
+        const { latency } = this.settings.store;
+
+        const fill: Fill = delta >= TROLL_LIMIT || ahead ? ["text-muted", "text-muted", "text-muted"] : delta >= (latency * 2) ? ["status-danger", "text-muted", "text-muted"] : ["status-warning", "status-warning", "text-muted"];
+
+        return abs >= latency ? { delta: stringDelta, ahead: abs !== delta, fill } : null;
+    },
+    Tooltip() {
+        return ErrorBoundary.wrap(({ message }: { message: Message; }) => {
+
+            const d = this.latencyTooltipData(message);
+
+            if (!isNonNullish(d)) return null;
+
+            return <Tooltip
+                text={d.ahead ? `This user's clock is ${d.delta} ahead` : `This message was sent with a delay of ${d.delta}.`}
+                position="top"
+            >
+                {
+                    props => <>
+                        {<this.Icon delta={d.delta} fill={d.fill} props={props} />}
+                        {/* Time Out indicator uses this, I think this is for a11y */}
+                        <HiddenVisually>Delayed Message</HiddenVisually>
+                    </>
+                }
+            </Tooltip>;
+        });
+    },
+    Icon({ delta, fill, props }: {
+        delta: string;
+        fill: Fill,
+        props: {
+            onClick(): void;
+            onMouseEnter(): void;
+            onMouseLeave(): void;
+            onContextMenu(): void;
+            onFocus(): void;
+            onBlur(): void;
+            "aria-label"?: string;
+        };
+    }) {
+        return <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 16 16"
+            width="12"
+            height="12"
+            role="img"
+            fill="none"
+            style={{ marginRight: "8px", verticalAlign: -1 }}
+            aria-label={delta}
+            aria-hidden="false"
+            {...props}
+        >
+            <path
+                fill={`var(--${fill[0]})`}
+                d="M4.8001 12C4.8001 11.5576 4.51344 11.2 4.16023 11.2H2.23997C1.88676 11.2 1.6001 11.5576 1.6001 12V13.6C1.6001 14.0424 1.88676 14.4 2.23997 14.4H4.15959C4.5128 14.4 4.79946 14.0424 4.79946 13.6L4.8001 12Z"
+            />
+            <path
+                fill={`var(--${fill[1]})`}
+                d="M9.6001 7.12724C9.6001 6.72504 9.31337 6.39998 8.9601 6.39998H7.0401C6.68684 6.39998 6.40011 6.72504 6.40011 7.12724V13.6727C6.40011 14.0749 6.68684 14.4 7.0401 14.4H8.9601C9.31337 14.4 9.6001 14.0749 9.6001 13.6727V7.12724Z"
+            />
+            <path
+                fill={`var(--${fill[2]})`}
+                d="M14.4001 2.31109C14.4001 1.91784 14.1134 1.59998 13.7601 1.59998H11.8401C11.4868 1.59998 11.2001 1.91784 11.2001 2.31109V13.6888C11.2001 14.0821 11.4868 14.4 11.8401 14.4H13.7601C14.1134 14.4 14.4001 14.0821 14.4001 13.6888V2.31109Z"
+            />
+        </svg>;
+    }
+});

src/utils/constants.ts

@@ -266,6 +266,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
         name: "Dziurwa",
         id: 1001086404203389018n
     },
+    arHSM: {
+        name: "arHSM",
+        id: 841509053422632990n
+    },
     F53: {
         name: "F53",
         id: 280411966126948353n