SHC: Fix emoji rendering & allowed users/roles edge cases (#895)

Co-authored-by: V <vendicated@riseup.net>

src/plugins/consoleShortcuts.ts

@@ -18,6 +18,7 @@
 
 import { Devs } from "@utils/constants";
 import { relaunch } from "@utils/native";
+import { canonicalizeMatch, canonicalizeReplace, canonicalizeReplacement } from "@utils/patches";
 import definePlugin from "@utils/types";
 import * as Webpack from "@webpack";
 import { extract, filters, findAll, search } from "@webpack";
@@ -82,6 +83,9 @@ export default definePlugin({
             Api: Vencord.Api,
             reload: () => location.reload(),
             restart: IS_WEB ? WEB_ONLY("restart") : relaunch,
+            canonicalizeMatch,
+            canonicalizeReplace,
+            canonicalizeReplacement,
             fakeRender: (component: ComponentType, props: any) => {
                 const prevWin = fakeRenderWin?.deref();
                 const win = prevWin?.closed === false ? prevWin : window.open("about:blank", "Fake Render", "popup,width=500,height=500")!;

src/plugins/showHiddenChannels/components/HiddenChannelLockScreen.tsx

@@ -19,14 +19,13 @@
 import ErrorBoundary from "@components/ErrorBoundary";
 import { LazyComponent } from "@utils/misc";
 import { formatDuration } from "@utils/text";
-import { find, findByPropsLazy } from "@webpack";
+import { find, findByPropsLazy, findStoreLazy } from "@webpack";
 import { FluxDispatcher, GuildMemberStore, GuildStore, moment, Parser, PermissionStore, SnowflakeUtils, Text, Timestamp, Tooltip } from "@webpack/common";
 import type { Channel } from "discord-types/general";
 import type { ComponentType } from "react";
 
 import { VIEW_CHANNEL } from "..";
 
-
 enum SortOrderTypes {
     LATEST_ACTIVITY = 0,
     CREATION_DATE = 1
@@ -93,6 +92,10 @@ const TagComponent = LazyComponent(() => find(m => {
     return code.includes(".Messages.FORUM_TAG_A11Y_FILTER_BY_TAG") && !code.includes("increasedActivityPill");
 }));
 
+const EmojiStore = findStoreLazy("EmojiStore");
+const EmojiParser = findByPropsLazy("convertSurrogateToName");
+const EmojiUtils = findByPropsLazy("getURL", "buildEmojiReactionColorsPlatformed");
+
 const ChannelTypesToChannelNames = {
     [ChannelTypes.GUILD_TEXT]: "text",
     [ChannelTypes.GUILD_ANNOUNCEMENT]: "announcement",
@@ -242,9 +245,15 @@ function HiddenChannelLockScreen({ channel }: { channel: ExtendedChannel; }) {
                     <div className="shc-lock-screen-default-emoji-container">
                         <Text variant="text-md/normal">Default reaction emoji:</Text>
                         {Parser.defaultRules[defaultReactionEmoji.emojiName ? "emoji" : "customEmoji"].react({
-                            name: defaultReactionEmoji.emojiName ?? "",
+                            name: defaultReactionEmoji.emojiName
-                            emojiId: defaultReactionEmoji.emojiId
+                                ? EmojiParser.convertSurrogateToName(defaultReactionEmoji.emojiName)
-                        })}
+                                : EmojiStore.getCustomEmojiById(defaultReactionEmoji.emojiId)?.name ?? "",
+                            emojiId: defaultReactionEmoji.emojiId ?? void 0,
+                            surrogate: defaultReactionEmoji.emojiName ?? void 0,
+                            src: defaultReactionEmoji.emojiName
+                                ? EmojiUtils.getURL(defaultReactionEmoji.emojiName)
+                                : void 0
+                        }, void 0, { key: "0" })}
                     </div>
                 }
                 {channel.hasFlag(ChannelFlags.REQUIRE_TAG) &&

src/plugins/showHiddenChannels/index.tsx

@@ -25,7 +25,7 @@ import { canonicalizeMatch } from "@utils/patches";
 import definePlugin, { OptionType } from "@utils/types";
 import { findByPropsLazy } from "@webpack";
 import { ChannelStore, PermissionStore, Tooltip } from "@webpack/common";
-import { Channel } from "discord-types/general";
+import type { Channel, Role } from "discord-types/general";
 
 import HiddenChannelLockScreen, { setChannelBeginHeaderComponent } from "./components/HiddenChannelLockScreen";
 
@@ -252,12 +252,24 @@ export default definePlugin({
                     match: /permissionOverwrites\[.+?\i=(?<=context:(\i)}.+?)(?=(.+?)VIEW_CHANNEL)/,
                     replace: (m, channel, permCheck) => `${m}!Vencord.Webpack.Common.PermissionStore.can(${CONNECT}n,${channel})?${permCheck}CONNECT):`
                 },
+                {
+                    // Include the @everyone role in the allowed roles list for Hidden Channels
+                    match: /sortBy.{0,100}?return (?<=var (\i)=\i\.channel.+?)(?=\i\.id)/,
+                    replace: (m, channel) => `${m}$self.isHiddenChannel(${channel})?true:`
+                },
+                {
+                    // If the @everyone role has the required permissions, make the array only contain it
+                    match: /computePermissionsForRoles.+?.value\(\)(?<=var (\i)=\i\.channel.+?)/,
+                    replace: (m, channel) => `${m}.reduce(...$self.makeAllowedRolesReduce(${channel}.guild_id))`
+                },
                 {
                     // Patch the header to only return allowed users and roles if it's a hidden channel or locked channel (Like when it's used on the HiddenChannelLockScreen)
                     match: /MANAGE_ROLES.{0,60}?return(?=\(.+?(\(0,\i\.jsxs\)\("div",{className:\i\(\)\.members.+?guildId:(\i)\.guild_id.+?roleColor.+?]}\)))/,
                     replace: (m, component, channel) => {
                         // Export the channel for the users allowed component patch
                         component = component.replace(canonicalizeMatch(/(?<=users:\i)/), `,channel:${channel}`);
+                        // Always render the component for multiple allowed users
+                        component = component.replace(canonicalizeMatch(/1!==\i\.length/), "true");
 
                         return `${m} $self.isHiddenChannel(${channel},true)?${component}:`;
                     }
@@ -311,6 +323,11 @@ export default definePlugin({
                     // Disable useless components for the HiddenChannelLockScreen of voice channels
                     match: /(?:{|,)render(?!Header|ExternalHeader).{0,30}?:(?<=renderContent=function.+?)(?!void)/g,
                     replace: "$&!this.props.inCall&&$self.isHiddenChannel(this.props.channel,true)?null:"
+                },
+                {
+                    // Disable bad CSS class which mess up hidden voice channels styling
+                    match: /callContainer,(?<=(\i)=\i\.channel.+?\(\)\.callContainer,)/,
+                    replace: (m, channel) => `${m}$self.isHiddenChannel(${channel},true)?"":`
                 }
             ]
         },
@@ -426,6 +443,20 @@ export default definePlugin({
         return res;
     },
 
+    makeAllowedRolesReduce(guildId: string) {
+        return [
+            (prev: Array<Role>, _: Role, index: number, originalArray: Array<Role>) => {
+                if (index !== 0) return prev;
+
+                const everyoneRole = originalArray.find(role => role.id === guildId);
+
+                if (everyoneRole) return [everyoneRole];
+                return originalArray;
+            },
+            [] as Array<Role>
+        ];
+    },
+
     HiddenChannelLockScreen: (channel: any) => <HiddenChannelLockScreen channel={channel} />,
 
     LockIcon: () => (