UserVoiceShow: Fix lack of bottom padding for popout on current user and broken modal patch (#873)

2 files changed, 27 insertions, 13 deletions

diff --git a/src/plugins/userVoiceShow/components/VoiceChannelSection.css b/src/plugins/userVoiceShow/components/VoiceChannelSection.css
index c0bc49d..0cf8701 100644
--- a/src/plugins/userVoiceShow/components/VoiceChannelSection.css
+++ b/src/plugins/userVoiceShow/components/VoiceChannelSection.css
@@ -13,6 +13,14 @@
     margin-bottom: 6px;
 }
 
-.vc-uvs-modal-margin > [class^="section"] {
+.vc-uvs-modal-margin {
     margin: 0 12px;
 }
+
+.vc-uvs-modal-margin div {
+    margin-bottom: 0 !important;
+}
+
+.vc-uvs-popout-margin > [class^="section"] {
+    margin-top: -12px;
+}
diff --git a/src/plugins/userVoiceShow/index.tsx b/src/plugins/userVoiceShow/index.tsx
index 3a1f6fe..3379672 100644
--- a/src/plugins/userVoiceShow/index.tsx
+++ b/src/plugins/userVoiceShow/index.tsx
@@ -20,13 +20,14 @@ import { definePluginSettings } from "@api/settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
-import { findStoreLazy } from "@webpack";
-import { ChannelStore, GuildStore } from "@webpack/common";
+import { findByPropsLazy, findStoreLazy } from "@webpack";
+import { ChannelStore, GuildStore, UserStore } from "@webpack/common";
 import { User } from "discord-types/general";
 
 import { VoiceChannelSection } from "./components/VoiceChannelSection";
 
 const VoiceStateStore = findStoreLazy("VoiceStateStore");
+const UserPopoutSectionCssClasses = findByPropsLazy("section", "lastSection");
 
 const settings = definePluginSettings({
     showInUserProfileModal: {
@@ -57,13 +58,11 @@ const VoiceChannelField = ErrorBoundary.wrap(({ user }: UserProps) => {
     const result = `${guild.name} | ${channel.name}`;
 
     return (
-        <div style={{ marginBottom: 14 }}>
-            <VoiceChannelSection
-                channel={channel}
-                label={result}
-                showHeader={settings.store.showVoiceChannelSectionHeader}
-            />
-        </div>
+        <VoiceChannelSection
+            channel={channel}
+            label={result}
+            showHeader={settings.store.showVoiceChannelSectionHeader}
+        />
     );
 });
 
@@ -84,7 +83,14 @@ export default definePlugin({
         );
     },
 
-    patchPopout: ({ user }: UserProps) => <VoiceChannelField user={user} />,
+    patchPopout: ({ user }: UserProps) => {
+        const isSelfUser = user.id === UserStore.getCurrentUser().id;
+        return (
+            <div className={isSelfUser ? `vc-uvs-popout-margin ${UserPopoutSectionCssClasses.lastSection}` : ""}>
+                <VoiceChannelField user={user} />
+            </div>
+        );
+    },
 
     patches: [
         {
@@ -98,9 +104,9 @@ export default definePlugin({
         {
             find: ".USER_PROFILE_MODAL",
             replacement: {
-                match: /,{user:\w{1,2}}\)(?!;case)/,
+                match: /\(\)\.body.+?displayProfile:\i}\),/,
                 // paste my fancy custom button below the username
-                replace: "$&,$self.patchModal(arguments[0])",
+                replace: "$&$self.patchModal(arguments[0]),",
             }
         }
     ],