PermissionsViewer: add to simplified profiles

src/plugins/permissionsViewer/components/UserPermissions.tsx

@@ -43,7 +43,7 @@ const Classes = proxyLazyWebpack(() =>
     ))
 ) 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>;
 
-function UserPermissionsComponent({ guild, guildMember, showBorder }: { guild: Guild; guildMember: GuildMember; showBorder: boolean; }) {
+function UserPermissionsComponent({ guild, guildMember, showBorder, forceOpen = false }: { guild: Guild; guildMember: GuildMember; showBorder: boolean; forceOpen?: boolean; }) {
     const stns = settings.use(["permissionsSortOrder"]);
 
     const [rolePermissions, userPermissions] = useMemo(() => {
@@ -95,6 +95,7 @@ function UserPermissionsComponent({ guild, guildMember, showBorder }: { guild: G
 
     return (
         <ExpandableHeader
+            forceOpen={forceOpen}
             headerText="Permissions"
             moreTooltipText="Role Details"
             onMoreClick={() =>

src/plugins/permissionsViewer/index.tsx

@@ -20,15 +20,22 @@ import "./styles.css";
 
 import { findGroupChildrenByChildId, NavContextMenuPatchCallback } from "@api/ContextMenu";
 import { definePluginSettings } from "@api/Settings";
+import ErrorBoundary from "@components/ErrorBoundary";
+import { SafetyIcon } from "@components/Icons";
 import { Devs } from "@utils/constants";
+import { classes } from "@utils/misc";
 import definePlugin, { OptionType } from "@utils/types";
-import { ChannelStore, GuildMemberStore, GuildStore, Menu, PermissionsBits, UserStore } from "@webpack/common";
+import { findByPropsLazy } from "@webpack";
+import { Button, ChannelStore, Dialog, GuildMemberStore, GuildStore, Menu, PermissionsBits, Popout, TooltipContainer, UserStore } from "@webpack/common";
 import type { Guild, GuildMember } from "discord-types/general";
 
 import openRolesAndUsersPermissionsModal, { PermissionType, RoleOrUserPermission } from "./components/RolesAndUsersPermissions";
 import UserPermissions from "./components/UserPermissions";
 import { getSortedRoles, sortPermissionOverwrites } from "./utils";
 
+const PopoutClasses = findByPropsLazy("container", "scroller", "list");
+const RoleButtonClasses = findByPropsLazy("button", "buttonInner", "icon", "text");
+
 export const enum PermissionsSortOrder {
     HighestRole,
     LowestRole
@@ -168,10 +175,45 @@ export default definePlugin({
                 match: /showBorder:(.{0,60})}\),(?<=guild:(\i),guildMember:(\i),.+?)/,
                 replace: (m, showBoder, guild, guildMember) => `${m}$self.UserPermissions(${guild},${guildMember},${showBoder}),`
             }
+        },
+        {
+            find: ".VIEW_ALL_ROLES,",
+            replacement: {
+                match: /children:"\+"\.concat\(\i\.length-\i\.length\).{0,20}\}\),/,
+                replace: "$&$self.ViewPermissionsButton(arguments[0]),"
+            }
         }
     ],
 
-    UserPermissions: (guild: Guild, guildMember: GuildMember | undefined, showBoder: boolean) => !!guildMember && <UserPermissions guild={guild} guildMember={guildMember} showBorder={showBoder} />,
+    UserPermissions: (guild: Guild, guildMember: GuildMember | undefined, showBorder: boolean) =>
+        !!guildMember && <UserPermissions guild={guild} guildMember={guildMember} showBorder={showBorder} />,
+
+    ViewPermissionsButton: ErrorBoundary.wrap(({ guild, guildMember }: { guild: Guild; guildMember: GuildMember; }) => (
+        <Popout
+            position="bottom"
+            align="center"
+            renderPopout={() => (
+                <Dialog className={PopoutClasses.container} style={{ width: "500px" }}>
+                    <UserPermissions guild={guild} guildMember={guildMember} showBorder forceOpen />
+                </Dialog>
+            )}
+        >
+            {popoutProps => (
+                <TooltipContainer text="View Permissions">
+                    <Button
+                        {...popoutProps}
+                        color={Button.Colors.CUSTOM}
+                        look={Button.Looks.FILLED}
+                        size={Button.Sizes.NONE}
+                        innerClassName={classes(RoleButtonClasses.buttonInner, RoleButtonClasses.icon)}
+                        className={classes(RoleButtonClasses.button, RoleButtonClasses.icon, "vc-permviewer-role-button")}
+                    >
+                        <SafetyIcon height="16" width="16" />
+                    </Button>
+                </TooltipContainer>
+            )}
+        </Popout>
+    ), { noop: true }),
 
     contextMenus: {
         "user-context": makeContextMenuPatch("roles", MenuItemParentType.User),

src/plugins/permissionsViewer/styles.css

@@ -149,3 +149,21 @@
 .vc-permviewer-perms-perms-item .vc-info-icon:hover {
     color: var(--interactive-active);
 }
+
+/* copy pasted from discord cause impossible to webpack find */
+.vc-permviewer-role-button {
+    border-radius: var(--radius-xs);
+    background: var(--bg-mod-faint);
+    color: var(--interactive-normal);
+    border: 1px solid var(--border-faint);
+    /* stylelint-disable-next-line value-no-vendor-prefix */
+    width: -moz-fit-content;
+    width: fit-content;
+    height: 24px;
+    padding: 4px
+}
+
+.custom-profile-theme .vc-permviewer-role-button {
+    background: rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-6));
+    border-color: var(--profile-body-border-color)
+}