PermViewer: Add ability to change sort order; Properly center (#1182)

src/plugins/permissionsViewer/components/UserPermissions.tsx

@@ -23,7 +23,7 @@ import { filters, findBulk } from "@webpack";
 import { i18n, PermissionsBits, Text, Tooltip, useMemo, UserStore, useState } from "@webpack/common";
 import type { Guild, GuildMember } from "discord-types/general";
 
-import { settings } from "..";
+import { PermissionsSortOrder, settings } from "..";
 import { cl, getPermissionString, getSortedRoles, sortUserRoles } from "../utils";
 import openRolesAndUsersPermissionsModal, { PermissionType, type RoleOrUserPermission } from "./RolesAndUsersPermissions";
 
@@ -46,6 +46,7 @@ const Classes = proxyLazy(() => {
 }) 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 }: { guild: Guild; guildMember: GuildMember; }) {
+    const stns = settings.use(["permissionsSortOrder"]);
     const [viewPermissions, setViewPermissions] = useState(settings.store.defaultPermissionsDropdownState);
 
     const [rolePermissions, userPermissions] = useMemo(() => {
@@ -91,7 +92,7 @@ function UserPermissionsComponent({ guild, guildMember }: { guild: Guild; guildM
         userPermissions.sort((a, b) => b.rolePosition - a.rolePosition);
 
         return [rolePermissions, userPermissions];
-    }, []);
+    }, [stns.permissionsSortOrder]);
 
     const { root, role, roleRemoveButton, roleNameOverflow, roles, rolePill, rolePillBorder, roleCircle, roleName } = Classes;
 
@@ -100,7 +101,28 @@ function UserPermissionsComponent({ guild, guildMember }: { guild: Guild; guildM
             <div className={cl("userperms-title-container")}>
                 <Text className={cl("userperms-title")} variant="eyebrow">Permissions</Text>
 
-                <div>
+                <div className={cl("userperms-btns-container")}>
+                    <Tooltip text={`Sorting by ${stns.permissionsSortOrder === PermissionsSortOrder.HighestRole ? "Highest Role" : "Lowest Role"}`}>
+                        {tooltipProps => (
+                            <button
+                                {...tooltipProps}
+                                className={cl("userperms-sortorder-btn")}
+                                onClick={() => {
+                                    stns.permissionsSortOrder = stns.permissionsSortOrder === PermissionsSortOrder.HighestRole ? PermissionsSortOrder.LowestRole : PermissionsSortOrder.HighestRole;
+                                }}
+                            >
+                                <svg
+                                    width="20"
+                                    height="20"
+                                    viewBox="0 96 960 960"
+                                    transform={stns.permissionsSortOrder === PermissionsSortOrder.HighestRole ? "scale(1 1)" : "scale(1 -1)"}
+                                >
+                                    <path fill="var(--text-normal)" d="M440 896V409L216 633l-56-57 320-320 320 320-56 57-224-224v487h-80Z" />
+                                </svg>
+                            </button>
+                        )}
+                    </Tooltip>
+
                     <Tooltip text="Role Details">
                         {tooltipProps => (
                             <button

src/plugins/permissionsViewer/styles.css

@@ -3,21 +3,38 @@
 .vc-permviewer-userperms-title-container {
     display: flex;
     justify-content: space-between;
-}
-
-.vc-permviewer-userperms-title {
+    align-items: center;
     margin-top: 10px;
     margin-bottom: 6px;
 }
 
+.vc-permviewer-userperms-btns-container {
+    display: flex;
+    align-items: center;
+}
+
+.vc-permviewer-userperms-sortorder-btn {
+    all: unset;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+}
+
 .vc-permviewer-userperms-permdetails-btn {
     all: unset;
     cursor: pointer;
+    display: flex;
+    align-items: center;
 }
 
 .vc-permviewer-userperms-toggleperms-btn {
     all: unset;
     cursor: pointer;
+    display: flex;
+    align-items: center;
 }
 
 /*  RolesAndUsersPermissions Component */

src/plugins/typingIndicator.tsx

@@ -89,7 +89,7 @@ function TypingIndicator({ channelId }: { channelId: string; }) {
             <Tooltip text={tooltipText!}>
                 {({ onMouseLeave, onMouseEnter }) => (
                     <div
-                        style={{ marginLeft: 6, zIndex: 0, cursor: "pointer" }}
+                        style={{ marginLeft: 6, height: 16, display: "flex", alignItems: "center", zIndex: 0, cursor: "pointer" }}
                         onMouseLeave={onMouseLeave}
                         onMouseEnter={onMouseEnter}
                     >