From 2e81b9aeba5411ff564e91037fee5c9e62e3e3b5 Mon Sep 17 00:00:00 2001
From: Nuckyz <61953774+Nuckyz@users.noreply.github.com>
Date: Thu, 22 Aug 2024 20:29:39 -0300
Subject: [PATCH] PermissionsViewer: Fix user popout

---
 .../components/UserPermissions.tsx            | 32 +++++++++----------
 src/plugins/permissionsViewer/index.tsx       |  2 +-
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/plugins/permissionsViewer/components/UserPermissions.tsx b/src/plugins/permissionsViewer/components/UserPermissions.tsx
index 49770bbe..f53f93b6 100644
--- a/src/plugins/permissionsViewer/components/UserPermissions.tsx
+++ b/src/plugins/permissionsViewer/components/UserPermissions.tsx
@@ -35,15 +35,17 @@ interface UserPermission {
 
 type UserPermissions = Array<UserPermission>;
 
-const Classes = proxyLazyWebpack(() =>
-    Object.assign({}, ...findBulk(
-        filters.byProps("roles", "rolePill", "rolePillBorder"),
-        filters.byProps("roleCircle", "dotBorderBase", "dotBorderColor"),
-        filters.byProps("roleNameOverflow", "root", "roleName", "roleRemoveButton")
-    ))
-) as Record<"roles" | "rolePill" | "rolePillBorder" | "desaturateUserColors" | "flex" | "alignCenter" | "justifyCenter" | "svg" | "background" | "dot" | "dotBorderColor" | "roleCircle" | "dotBorderBase" | "flex" | "alignCenter" | "justifyCenter" | "wrap" | "root" | "role" | "roleRemoveButton" | "roleDot" | "roleFlowerStar" | "roleRemoveIcon" | "roleRemoveIconFocused" | "roleVerifiedIcon" | "roleName" | "roleNameOverflow" | "actionButton" | "overflowButton" | "addButton" | "addButtonIcon" | "overflowRolesPopout" | "overflowRolesPopoutArrowWrapper" | "overflowRolesPopoutArrow" | "popoutBottom" | "popoutTop" | "overflowRolesPopoutHeader" | "overflowRolesPopoutHeaderIcon" | "overflowRolesPopoutHeaderText" | "roleIcon", string>;
+const { RoleRootClasses, RoleClasses, RoleBorderClasses } = proxyLazyWebpack(() => {
+    const [RoleRootClasses, RoleClasses, RoleBorderClasses] = findBulk(
+        filters.byProps("root", "showMoreButton", "collapseButton"),
+        filters.byProps("role", "roleCircle", "roleName"),
+        filters.byProps("roleCircle", "dot", "dotBorderColor")
+    ) as Record<string, string>[];
 
-function UserPermissionsComponent({ guild, guildMember, showBorder, forceOpen = false }: { guild: Guild; guildMember: GuildMember; showBorder: boolean; forceOpen?: boolean; }) {
+    return { RoleRootClasses, RoleClasses, RoleBorderClasses };
+});
+
+function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { guild: Guild; guildMember: GuildMember; forceOpen?: boolean; }) {
     const stns = settings.use(["permissionsSortOrder"]);
 
     const [rolePermissions, userPermissions] = useMemo(() => {
@@ -91,8 +93,6 @@ function UserPermissionsComponent({ guild, guildMember, showBorder, forceOpen =
         return [rolePermissions, userPermissions];
     }, [stns.permissionsSortOrder]);
 
-    const { root, role, roleRemoveButton, roleNameOverflow, roles, rolePill, rolePillBorder, roleCircle, roleName } = Classes;
-
     return (
         <ExpandableHeader
             forceOpen={forceOpen}
@@ -130,18 +130,18 @@ function UserPermissionsComponent({ guild, guildMember, showBorder, forceOpen =
                 </Tooltip>)
             ]}>
             {userPermissions.length > 0 && (
-                <div className={classes(root, roles)}>
+                <div className={classes(RoleRootClasses.root)}>
                     {userPermissions.map(({ permission, roleColor }) => (
-                        <div className={classes(role, rolePill, showBorder ? rolePillBorder : null)}>
-                            <div className={roleRemoveButton}>
+                        <div className={classes(RoleClasses.role)}>
+                            <div className={RoleClasses.roleRemoveButton}>
                                 <span
-                                    className={roleCircle}
+                                    className={classes(RoleBorderClasses.roleCircle, RoleClasses.roleCircle)}
                                     style={{ backgroundColor: roleColor }}
                                 />
                             </div>
-                            <div className={roleName}>
+                            <div className={RoleClasses.roleName}>
                                 <Text
-                                    className={roleNameOverflow}
+                                    className={RoleClasses.roleNameOverflow}
                                     variant="text-xs/medium"
                                 >
                                     {permission}
diff --git a/src/plugins/permissionsViewer/index.tsx b/src/plugins/permissionsViewer/index.tsx
index 1bb8ea19..5039d04f 100644
--- a/src/plugins/permissionsViewer/index.tsx
+++ b/src/plugins/permissionsViewer/index.tsx
@@ -184,7 +184,7 @@ export default definePlugin({
             align="center"
             renderPopout={() => (
                 <Dialog className={PopoutClasses.container} style={{ width: "500px" }}>
-                    <UserPermissions guild={guild} guildMember={guildMember} showBorder forceOpen />
+                    <UserPermissions guild={guild} guildMember={guildMember} forceOpen />
                 </Dialog>
             )}
         >