Mention Avatars

src/mentionAvatars/index.ts

@@ -0,0 +1,26 @@
+import { ExtensionWebpackModule, Patch } from "@moonlight-mod/types";
+
+export const patches: Patch[] = [
+  {
+    find: ',"Unexpected missing user"),',
+    replace: {
+      match: /children:"@".concat\((.+?)\)(?=}\);return \i\?(\(0,(\i)\.jsx\)))/,
+      replacement: (_, concat, createElement, ReactJSX) =>
+        `children:[
+  ${createElement}(require("mentionAvatars_avatar")?.default??${ReactJSX}.Fragment,{...arguments[0], children:moonlight.getConfigOption("mentionAvatars","keepAt")?"":"@"}),
+  (moonlight.getConfigOption("mentionAvatars","keepAt")?"@":"").concat(${concat})
+]`
+    }
+  }
+];
+
+export const webpackModules: Record<string, ExtensionWebpackModule> = {
+  avatar: {
+    dependencies: [
+      { id: "react" },
+      { id: "discord/packages/flux" },
+      { id: "discord/components/common/index" },
+      { ext: "common", id: "stores" }
+    ]
+  }
+};

src/mentionAvatars/manifest.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://moonlight-mod.github.io/manifest.schema.json",
+  "id": "mentionAvatars",
+  "version": "1.0.0",
+  "meta": {
+    "name": "Mention Avatars",
+    "tagline": "Shows avatars on user mentions",
+    "authors": ["Cynosphere"],
+    "tags": ["qol", "chat"],
+    "source": "https://github.com/Cynosphere/moonlight-extensions",
+    "donate": "https://ko-fi.com/Cynosphere"
+  },
+  "dependencies": ["common"],
+  "settings": {
+    "keepAt": {
+      "displayName": "Keep \"@\"",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "apiLevel": 2
+}

src/mentionAvatars/style.css

@@ -0,0 +1,6 @@
+.mentionAvatar {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 3px;
+  margin-bottom: 0.2rem;
+}

src/mentionAvatars/webpackModules/avatar.tsx

@@ -0,0 +1,26 @@
+import React from "@moonlight-mod/wp/react";
+import { useStateFromStores } from "@moonlight-mod/wp/discord/packages/flux";
+import { Avatar, AvatarSizes } from "@moonlight-mod/wp/discord/components/common/index";
+
+import { ChannelStore, UserStore } from "@moonlight-mod/wp/common_stores";
+
+type MessageAvatarProps = {
+  userId: string;
+  channelId: string;
+};
+
+export default function MessageAvatar({ userId, channelId }: MessageAvatarProps) {
+  const user = useStateFromStores([UserStore], () => UserStore.getUser(userId)!, [userId]);
+  const channel = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId), [channelId]);
+  const guildId = channel?.getGuildId();
+
+  return (
+    <Avatar
+      // @ts-expect-error fixed next mappings
+      className="mentionAvatar"
+      src={user.getAvatarURL(guildId, 16)}
+      // @ts-expect-error fixed next mappings
+      size={AvatarSizes.SIZE_16}
+    />
+  );
+}