From 9f9c844db4fb44dd407ff9814abcfced71e4d6b0 Mon Sep 17 00:00:00 2001
From: Cynthia Foxwell <gamers@riseup.net>
Date: Sun, 19 Jan 2025 18:08:50 -0700
Subject: [PATCH] Mention Avatars

---
 src/mentionAvatars/index.ts                  | 26 ++++++++++++++++++++
 src/mentionAvatars/manifest.json             | 22 +++++++++++++++++
 src/mentionAvatars/style.css                 |  6 +++++
 src/mentionAvatars/webpackModules/avatar.tsx | 26 ++++++++++++++++++++
 4 files changed, 80 insertions(+)
 create mode 100644 src/mentionAvatars/index.ts
 create mode 100644 src/mentionAvatars/manifest.json
 create mode 100644 src/mentionAvatars/style.css
 create mode 100644 src/mentionAvatars/webpackModules/avatar.tsx

diff --git a/src/mentionAvatars/index.ts b/src/mentionAvatars/index.ts
new file mode 100644
index 0000000..985e4a6
--- /dev/null
+++ b/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" }
+    ]
+  }
+};
diff --git a/src/mentionAvatars/manifest.json b/src/mentionAvatars/manifest.json
new file mode 100644
index 0000000..dcdfc96
--- /dev/null
+++ b/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
+}
diff --git a/src/mentionAvatars/style.css b/src/mentionAvatars/style.css
new file mode 100644
index 0000000..f7f08cc
--- /dev/null
+++ b/src/mentionAvatars/style.css
@@ -0,0 +1,6 @@
+.mentionAvatar {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 3px;
+  margin-bottom: 0.2rem;
+}
diff --git a/src/mentionAvatars/webpackModules/avatar.tsx b/src/mentionAvatars/webpackModules/avatar.tsx
new file mode 100644
index 0000000..a381b3a
--- /dev/null
+++ b/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}
+    />
+  );
+}