From c2b211e1a0dad1b6300cc548d90cfb245007eda3 Mon Sep 17 00:00:00 2001
From: Nuckyz <61953774+Nuckyz@users.noreply.github.com>
Date: Fri, 20 Sep 2024 15:42:00 -0300
Subject: [PATCH] UserVoiceShow: Show in messages

---
 src/plugins/userVoiceShow/components.tsx | 20 +++++++++++---------
 src/plugins/userVoiceShow/index.tsx      | 15 +++++++++++++--
 src/plugins/userVoiceShow/style.css      |  8 ++++++++
 3 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/src/plugins/userVoiceShow/components.tsx b/src/plugins/userVoiceShow/components.tsx
index fad860dfa..d5e1af0af 100644
--- a/src/plugins/userVoiceShow/components.tsx
+++ b/src/plugins/userVoiceShow/components.tsx
@@ -127,13 +127,13 @@ function VoiceChannelTooltip({ channel }: VoiceChannelTooltipProps) {
 
 interface VoiceChannelIndicatorProps {
     userId: string;
-    size?: number;
     isActionButton?: boolean;
+    isMessageIndicator?: boolean;
 }
 
 const clickTimers = {} as Record<string, any>;
 
-export const VoiceChannelIndicator = ErrorBoundary.wrap(({ userId, size, isActionButton }: VoiceChannelIndicatorProps) => {
+export const VoiceChannelIndicator = ErrorBoundary.wrap(({ userId, isActionButton, isMessageIndicator }: VoiceChannelIndicatorProps) => {
     const channelId = useStateFromStores([VoiceStateStore], () => VoiceStateStore.getVoiceStateForUser(userId)?.channelId as string | undefined);
 
     const channel = channelId == null ? undefined : ChannelStore.getChannel(channelId);
@@ -178,16 +178,18 @@ export const VoiceChannelIndicator = ErrorBoundary.wrap(({ userId, size, isActio
             tooltipContentClassName={cl("tooltip-content")}
         >
             {props => {
-                const iconProps = {
+                const iconProps: IconProps = {
                     ...props,
-                    onClick,
-                    size,
-                    className: isActionButton ? cl("indicator-action-button") : cl("speaker-padding")
+                    className: isActionButton ? cl("indicator-action-button") : cl("speaker-padding"),
+                    size: isActionButton ? 20 : undefined,
+                    onClick
                 };
 
-                return isLocked ?
-                    <LockedSpeakerIcon {...iconProps} />
-                    : <SpeakerIcon {...iconProps} />;
+                return <div className={isMessageIndicator ? cl("speaker-vertical-margin") : undefined}>
+                    {isLocked ?
+                        <LockedSpeakerIcon {...iconProps} />
+                        : <SpeakerIcon {...iconProps} />}
+                </div>;
             }}
         </Tooltip>
     );
diff --git a/src/plugins/userVoiceShow/index.tsx b/src/plugins/userVoiceShow/index.tsx
index 573fd0e38..d30c5b7f9 100644
--- a/src/plugins/userVoiceShow/index.tsx
+++ b/src/plugins/userVoiceShow/index.tsx
@@ -19,6 +19,7 @@
 import "./style.css";
 
 import { addDecorator, removeDecorator } from "@api/MemberListDecorators";
+import { addDecoration, removeDecoration } from "@api/MessageDecorations";
 import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
@@ -37,13 +38,19 @@ const settings = definePluginSettings({
         description: "Show a user's Voice Channel indicator in the member and DMs list",
         default: true,
         restartNeeded: true
+    },
+    showInMessages: {
+        type: OptionType.BOOLEAN,
+        description: "Show a user's Voice Channel indicator in messages",
+        default: true,
+        restartNeeded: true
     }
 });
 
 export default definePlugin({
     name: "UserVoiceShow",
     description: "Shows an indicator when a user is in a Voice Channel",
-    authors: [Devs.LordElias, Devs.Nuckyz],
+    authors: [Devs.Nuckyz, Devs.LordElias],
     settings,
 
     patches: [
@@ -80,7 +87,7 @@ export default definePlugin({
             find: "null!=this.peopleListItemRef.current",
             replacement: {
                 match: /\.actions,children:\[/,
-                replace: "$&$self.VoiceChannelIndicator({userId:this?.props?.user?.id,size:20,isActionButton:true}),"
+                replace: "$&$self.VoiceChannelIndicator({userId:this?.props?.user?.id,isActionButton:true}),"
             },
             predicate: () => settings.store.showInMemberList
         }
@@ -90,10 +97,14 @@ export default definePlugin({
         if (settings.store.showInMemberList) {
             addDecorator("UserVoiceShow", ({ user }) => user == null ? null : <VoiceChannelIndicator userId={user.id} />);
         }
+        if (settings.store.showInMessages) {
+            addDecoration("UserVoiceShow", ({ message }) => message?.author == null ? null : <VoiceChannelIndicator userId={message.author.id} isMessageIndicator />);
+        }
     },
 
     stop() {
         removeDecorator("UserVoiceShow");
+        removeDecoration("UserVoiceShow");
     },
 
     VoiceChannelIndicator
diff --git a/src/plugins/userVoiceShow/style.css b/src/plugins/userVoiceShow/style.css
index 67f4c4958..072dee941 100644
--- a/src/plugins/userVoiceShow/style.css
+++ b/src/plugins/userVoiceShow/style.css
@@ -17,6 +17,14 @@
     padding: 0 4px;
 }
 
+.vc-uvs-message-indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    top: 2.5px;
+    position: relative;
+}
+
 .vc-uvs-indicator-action-button {
     background-color: var(--background-secondary);
     border-radius: 100%;