mirror of
https://github.com/Vendicated/Vencord.git
synced 2024-09-20 06:30:35 +00:00
Merge branch 'dev' into immediate-finds
This commit is contained in:
Nuckyz
commit
e810944963
18 changed files with 343 additions and 219 deletions
|
|
@ -334,5 +334,6 @@ export const commonRendererPlugins = [
|
|||
banImportPlugin(builtinModuleRegex, "Cannot import node inbuilt modules in browser code. You need to use a native.ts file"),
|
||||
banImportPlugin(/^react$/, "Cannot import from react. React and hooks should be imported from @webpack/common"),
|
||||
banImportPlugin(/^electron(\/.*)?$/, "Cannot import electron in browser code. You need to use a native.ts file"),
|
||||
banImportPlugin(/^ts-pattern$/, "Cannot import from ts-pattern. match and P should be imported from @webpack/common"),
|
||||
...commonOpts.plugins
|
||||
];
|
||||
|
|
|
|||
|
|
@ -77,8 +77,16 @@ function Validators({ themeLinks }: { themeLinks: string[]; }) {
|
|||
<Forms.FormTitle className={Margins.top20} tag="h5">Validator</Forms.FormTitle>
|
||||
<Forms.FormText>This section will tell you whether your themes can successfully be loaded</Forms.FormText>
|
||||
<div>
|
||||
{themeLinks.map(link => (
|
||||
<Card style={{
|
||||
{themeLinks.map(rawLink => {
|
||||
const { label, link } = (() => {
|
||||
const match = /^@(light|dark) (.*)/.exec(rawLink);
|
||||
if (!match) return { label: rawLink, link: rawLink };
|
||||
|
||||
const [, mode, link] = match;
|
||||
return { label: `[${mode} mode only] ${link}`, link };
|
||||
})();
|
||||
|
||||
return <Card style={{
|
||||
padding: ".5em",
|
||||
marginBottom: ".5em",
|
||||
marginTop: ".5em"
|
||||
|
|
@ -86,11 +94,11 @@ function Validators({ themeLinks }: { themeLinks: string[]; }) {
|
|||
<Forms.FormTitle tag="h5" style={{
|
||||
overflowWrap: "break-word"
|
||||
}}>
|
||||
{link}
|
||||
{label}
|
||||
</Forms.FormTitle>
|
||||
<Validator link={link} />
|
||||
</Card>
|
||||
))}
|
||||
</Card>;
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
@ -296,6 +304,7 @@ function ThemesTab() {
|
|||
<Card className="vc-settings-card vc-text-selectable">
|
||||
<Forms.FormTitle tag="h5">Paste links to css files here</Forms.FormTitle>
|
||||
<Forms.FormText>One link per line</Forms.FormText>
|
||||
<Forms.FormText>You can prefix lines with @light or @dark to toggle them based on your Discord theme</Forms.FormText>
|
||||
<Forms.FormText>Make sure to use direct links to files (raw or github.io)!</Forms.FormText>
|
||||
</Card>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import { Margins } from "@utils/margins";
|
|||
import { classes } from "@utils/misc";
|
||||
import definePlugin, { OptionType, StartAt } from "@utils/types";
|
||||
import { findByCode, findComponentByCode, findStore } from "@webpack";
|
||||
import { Button, Forms, useStateFromStores } from "@webpack/common";
|
||||
import { Button, Forms, ThemeStore, useStateFromStores } from "@webpack/common";
|
||||
|
||||
const ColorPicker = findComponentByCode(".Messages.USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR", ".BACKGROUND_PRIMARY)");
|
||||
|
||||
|
|
@ -36,7 +36,6 @@ function setTheme(theme: string) {
|
|||
saveClientTheme({ theme });
|
||||
}
|
||||
|
||||
const ThemeStore = findStore("ThemeStore");
|
||||
const ClientThemesBackgroundStore = findStore("ClientThemesBackgroundStore");
|
||||
|
||||
function ThemeSettings() {
|
||||
|
|
|
|||
13
src/plugins/ignoreActivities/README.md
Normal file
13
src/plugins/ignoreActivities/README.md
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
# IgnoreActivities
|
||||
|
||||
Ignore activities from showing up on your status ONLY. You can configure which ones are specifically ignored from the Registered Games and Activities tabs, or use the general settings.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
The activity stays showing as a detected game even if ignored, differently from the stock Toggle Detection button from Discord:
|
||||
|
||||
|
||||
|
|
@ -237,7 +237,7 @@ function isActivityTypeIgnored(type: number, id?: string) {
|
|||
export default definePlugin({
|
||||
name: "IgnoreActivities",
|
||||
authors: [Devs.Nuckyz, Devs.Kylie],
|
||||
description: "Ignore activities from showing up on your status ONLY. You can configure which ones are specifically ignored from the Registered Games and Activities tabs, or use the general settings below.",
|
||||
description: "Ignore activities from showing up on your status ONLY. You can configure which ones are specifically ignored from the Registered Games and Activities tabs, or use the general settings below",
|
||||
dependencies: ["UserSettingsAPI"],
|
||||
|
||||
settings,
|
||||
|
|
@ -266,6 +266,7 @@ export default definePlugin({
|
|||
replace: (m, props, nowPlaying) => `${m}$self.renderToggleGameActivityButton(${props},${nowPlaying}),`
|
||||
}
|
||||
},
|
||||
// Discord has 3 different components for activities. Currently, the last is the one being used
|
||||
{
|
||||
find: ".activityTitleText,variant",
|
||||
replacement: {
|
||||
|
|
@ -279,6 +280,13 @@ export default definePlugin({
|
|||
match: /\.activityCardDetails.+?children:(\i\.application)\.name.*?}\),/,
|
||||
replace: (m, props) => `${m}$self.renderToggleActivityButton(${props}),`
|
||||
}
|
||||
},
|
||||
{
|
||||
find: ".promotedLabelWrapperNonBanner,children",
|
||||
replacement: {
|
||||
match: /\.appDetailsHeaderContainer.+?children:\i.*?}\),(?<=application:(\i).+?)/,
|
||||
replace: (m, props) => `${m}$self.renderToggleActivityButton(${props}),`
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import ErrorBoundary from "@components/ErrorBoundary";
|
|||
import { Devs } from "@utils/constants";
|
||||
import { isNonNullish } from "@utils/guards";
|
||||
import definePlugin from "@utils/types";
|
||||
import { findByProps } from "@webpack";
|
||||
import { findByProps, findComponentByCode } from "@webpack";
|
||||
import { Avatar, ChannelStore, Clickable, IconUtils, RelationshipStore, ScrollerThin, useMemo, UserStore } from "@webpack/common";
|
||||
import { Channel, User } from "discord-types/general";
|
||||
|
||||
|
|
@ -28,6 +28,7 @@ const SelectedChannelActionCreators = findByProps("selectPrivateChannel");
|
|||
const UserUtils = findByProps("getGlobalName");
|
||||
|
||||
const ProfileListClasses = findByProps("emptyIconFriends", "emptyIconGuilds");
|
||||
const ExpandableList = findComponentByCode(".mutualFriendItem]");
|
||||
const GuildLabelClasses = findByProps("guildNick", "guildAvatarWithoutIcon");
|
||||
|
||||
function getGroupDMName(channel: Channel) {
|
||||
|
|
@ -50,6 +51,29 @@ function getMutualGDMCountText(user: User) {
|
|||
return `${count === 0 ? "No" : count} Mutual Group${count !== 1 ? "s" : ""}`;
|
||||
}
|
||||
|
||||
function renderClickableGDMs(mutualDms: Channel[], onClose: () => void) {
|
||||
return mutualDms.map(c => (
|
||||
<Clickable
|
||||
className={ProfileListClasses.listRow}
|
||||
onClick={() => {
|
||||
onClose();
|
||||
SelectedChannelActionCreators.selectPrivateChannel(c.id);
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
src={IconUtils.getChannelIconURL({ id: c.id, icon: c.icon, size: 32 })}
|
||||
size="SIZE_40"
|
||||
className={ProfileListClasses.listAvatar}
|
||||
>
|
||||
</Avatar>
|
||||
<div className={ProfileListClasses.listRowContent}>
|
||||
<div className={ProfileListClasses.listName}>{getGroupDMName(c)}</div>
|
||||
<div className={GuildLabelClasses.guildNick}>{c.recipients.length + 1} Members</div>
|
||||
</div>
|
||||
</Clickable>
|
||||
));
|
||||
}
|
||||
|
||||
const IS_PATCHED = Symbol("MutualGroupDMs.Patched");
|
||||
|
||||
export default definePlugin({
|
||||
|
|
@ -70,6 +94,13 @@ export default definePlugin({
|
|||
replace: "$1==='MUTUAL_GDMS'?$self.renderMutualGDMs(arguments[0]):$&"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
find: 'section:"MUTUAL_FRIENDS"',
|
||||
replacement: {
|
||||
match: /\.openUserProfileModal.+?\)}\)}\)(?<=(\(0,\i\.jsxs?\)\(\i\.\i,{className:(\i)\.divider}\)).+?)/,
|
||||
replace: "$&,$self.renderDMPageList({user: arguments[0].user, Divider: $1, listStyle: $2.list})"
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
|
|
@ -84,28 +115,9 @@ export default definePlugin({
|
|||
},
|
||||
|
||||
renderMutualGDMs: ErrorBoundary.wrap(({ user, onClose }: { user: User, onClose: () => void; }) => {
|
||||
const mutualDms = useMemo(() => getMutualGroupDms(user.id), [user.id]);
|
||||
const mutualGDms = useMemo(() => getMutualGroupDms(user.id), [user.id]);
|
||||
|
||||
const entries = mutualDms.map(c => (
|
||||
<Clickable
|
||||
className={ProfileListClasses.listRow}
|
||||
onClick={() => {
|
||||
onClose();
|
||||
SelectedChannelActionCreators.selectPrivateChannel(c.id);
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
src={IconUtils.getChannelIconURL({ id: c.id, icon: c.icon, size: 32 })}
|
||||
size="SIZE_40"
|
||||
className={ProfileListClasses.listAvatar}
|
||||
>
|
||||
</Avatar>
|
||||
<div className={ProfileListClasses.listRowContent}>
|
||||
<div className={ProfileListClasses.listName}>{getGroupDMName(c)}</div>
|
||||
<div className={GuildLabelClasses.guildNick}>{c.recipients.length + 1} Members</div>
|
||||
</div>
|
||||
</Clickable>
|
||||
));
|
||||
const entries = renderClickableGDMs(mutualGDms, onClose);
|
||||
|
||||
return (
|
||||
<ScrollerThin
|
||||
|
|
@ -124,5 +136,24 @@ export default definePlugin({
|
|||
}
|
||||
</ScrollerThin>
|
||||
);
|
||||
}),
|
||||
|
||||
renderDMPageList: ErrorBoundary.wrap(({ user, Divider, listStyle }: { user: User, Divider: JSX.Element, listStyle: string; }) => {
|
||||
const mutualGDms = getMutualGroupDms(user.id);
|
||||
if (mutualGDms.length === 0) return null;
|
||||
|
||||
const header = getMutualGDMCountText(user);
|
||||
|
||||
return (
|
||||
<>
|
||||
{Divider}
|
||||
<ExpandableList
|
||||
className={listStyle}
|
||||
header={header}
|
||||
isLoadingHeader={false}
|
||||
children={renderClickableGDMs(mutualGDms, () => { })}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
})
|
||||
});
|
||||
|
|
|
|||
|
|
@ -21,8 +21,10 @@ import { Flex } from "@components/Flex";
|
|||
import { InfoIcon, OwnerCrownIcon } from "@components/Icons";
|
||||
import { getUniqueUsername } from "@utils/discord";
|
||||
import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
|
||||
import { Clipboard, ContextMenuApi, FluxDispatcher, GuildMemberStore, GuildStore, i18n, Menu, PermissionsBits, Text, Tooltip, useEffect, UserStore, useState, useStateFromStores } from "@webpack/common";
|
||||
import type { Guild } from "discord-types/general";
|
||||
import { findByCodeLazy } from "@webpack";
|
||||
import { Clipboard, ContextMenuApi, FluxDispatcher, GuildMemberStore, GuildStore, i18n, Menu, PermissionsBits, ScrollerThin, Text, Tooltip, useEffect, UserStore, useState, useStateFromStores } from "@webpack/common";
|
||||
import { UnicodeEmoji } from "@webpack/types";
|
||||
import type { Guild, Role, User } from "discord-types/general";
|
||||
|
||||
import { settings } from "..";
|
||||
import { cl, getPermissionDescription, getPermissionString } from "../utils";
|
||||
|
|
@ -42,15 +44,15 @@ export interface RoleOrUserPermission {
|
|||
overwriteDeny?: bigint;
|
||||
}
|
||||
|
||||
function openRolesAndUsersPermissionsModal(permissions: Array<RoleOrUserPermission>, guild: Guild, header: string) {
|
||||
return openModal(modalProps => (
|
||||
<RolesAndUsersPermissions
|
||||
modalProps={modalProps}
|
||||
permissions={permissions}
|
||||
guild={guild}
|
||||
header={header}
|
||||
/>
|
||||
));
|
||||
type GetRoleIconData = (role: Role, size: number) => { customIconSrc?: string; unicodeEmoji?: UnicodeEmoji; };
|
||||
const getRoleIconData: GetRoleIconData = findByCodeLazy("convertSurrogateToName", "customIconSrc", "unicodeEmoji");
|
||||
|
||||
function getRoleIconSrc(role: Role) {
|
||||
const icon = getRoleIconData(role, 20);
|
||||
if (!icon) return;
|
||||
|
||||
const { customIconSrc, unicodeEmoji } = icon;
|
||||
return customIconSrc ?? unicodeEmoji?.url;
|
||||
}
|
||||
|
||||
function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, header }: { permissions: Array<RoleOrUserPermission>; guild: Guild; modalProps: ModalProps; header: string; }) {
|
||||
|
|
@ -86,31 +88,34 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea
|
|||
size={ModalSize.LARGE}
|
||||
>
|
||||
<ModalHeader>
|
||||
<Text className={cl("perms-title")} variant="heading-lg/semibold">{header} permissions:</Text>
|
||||
<Text className={cl("modal-title")} variant="heading-lg/semibold">{header} permissions:</Text>
|
||||
<ModalCloseButton onClick={modalProps.onClose} />
|
||||
</ModalHeader>
|
||||
|
||||
<ModalContent>
|
||||
<ModalContent className={cl("modal-content")}>
|
||||
{!selectedItem && (
|
||||
<div className={cl("perms-no-perms")}>
|
||||
<div className={cl("modal-no-perms")}>
|
||||
<Text variant="heading-lg/normal">No permissions to display!</Text>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedItem && (
|
||||
<div className={cl("perms-container")}>
|
||||
<div className={cl("perms-list")}>
|
||||
<div className={cl("modal-container")}>
|
||||
<ScrollerThin className={cl("modal-list")} orientation="auto">
|
||||
{permissions.map((permission, index) => {
|
||||
const user = UserStore.getUser(permission.id ?? "");
|
||||
const role = roles[permission.id ?? ""];
|
||||
const user: User | undefined = UserStore.getUser(permission.id ?? "");
|
||||
const role: Role | undefined = roles[permission.id ?? ""];
|
||||
const roleIconSrc = role != null ? getRoleIconSrc(role) : undefined;
|
||||
|
||||
return (
|
||||
<button
|
||||
className={cl("perms-list-item-btn")}
|
||||
<div
|
||||
className={cl("modal-list-item-btn")}
|
||||
onClick={() => selectItem(index)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
<div
|
||||
className={cl("perms-list-item", { "perms-list-item-active": selectedItemIndex === index })}
|
||||
className={cl("modal-list-item", { "modal-list-item-active": selectedItemIndex === index })}
|
||||
onContextMenu={e => {
|
||||
if (permission.type === PermissionType.Role)
|
||||
ContextMenuApi.openContextMenu(e, () => (
|
||||
|
|
@ -124,7 +129,6 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea
|
|||
ContextMenuApi.openContextMenu(e, () => (
|
||||
<UserContextMenu
|
||||
userId={permission.id!}
|
||||
onClose={modalProps.onClose}
|
||||
/>
|
||||
));
|
||||
}
|
||||
|
|
@ -132,13 +136,19 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea
|
|||
>
|
||||
{(permission.type === PermissionType.Role || permission.type === PermissionType.Owner) && (
|
||||
<span
|
||||
className={cl("perms-role-circle")}
|
||||
className={cl("modal-role-circle")}
|
||||
style={{ backgroundColor: role?.colorString ?? "var(--primary-300)" }}
|
||||
/>
|
||||
)}
|
||||
{permission.type === PermissionType.User && user !== undefined && (
|
||||
{permission.type === PermissionType.Role && roleIconSrc != null && (
|
||||
<img
|
||||
className={cl("perms-user-img")}
|
||||
className={cl("modal-role-image")}
|
||||
src={roleIconSrc}
|
||||
/>
|
||||
)}
|
||||
{permission.type === PermissionType.User && user != null && (
|
||||
<img
|
||||
className={cl("modal-user-img")}
|
||||
src={user.getAvatarURL(void 0, void 0, false)}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -147,28 +157,25 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea
|
|||
permission.type === PermissionType.Role
|
||||
? role?.name ?? "Unknown Role"
|
||||
: permission.type === PermissionType.User
|
||||
? (user && getUniqueUsername(user)) ?? "Unknown User"
|
||||
? (user != null && getUniqueUsername(user)) ?? "Unknown User"
|
||||
: (
|
||||
<Flex style={{ gap: "0.2em", justifyItems: "center" }}>
|
||||
@owner
|
||||
<OwnerCrownIcon
|
||||
height={18}
|
||||
width={18}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<OwnerCrownIcon height={18} width={18} aria-hidden="true" />
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
</Text>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className={cl("perms-perms")}>
|
||||
</ScrollerThin>
|
||||
<div className={cl("modal-divider")} />
|
||||
<ScrollerThin className={cl("modal-perms")} orientation="auto">
|
||||
{Object.entries(PermissionsBits).map(([permissionName, bit]) => (
|
||||
<div className={cl("perms-perms-item")}>
|
||||
<div className={cl("perms-perms-item-icon")}>
|
||||
<div className={cl("modal-perms-item")}>
|
||||
<div className={cl("modal-perms-item-icon")}>
|
||||
{(() => {
|
||||
const { permissions, overwriteAllow, overwriteDeny } = selectedItem;
|
||||
|
||||
|
|
@ -192,11 +199,11 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea
|
|||
</Tooltip>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollerThin>
|
||||
</div>
|
||||
)}
|
||||
</ModalContent>
|
||||
</ModalRoot >
|
||||
</ModalRoot>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -208,7 +215,7 @@ function RoleContextMenu({ guild, roleId, onClose }: { guild: Guild; roleId: str
|
|||
aria-label="Role Options"
|
||||
>
|
||||
<Menu.MenuItem
|
||||
id="vc-copy-role-id"
|
||||
id={cl("copy-role-id")}
|
||||
label={i18n.Messages.COPY_ID_ROLE}
|
||||
action={() => {
|
||||
Clipboard.copy(roleId);
|
||||
|
|
@ -217,14 +224,13 @@ function RoleContextMenu({ guild, roleId, onClose }: { guild: Guild; roleId: str
|
|||
|
||||
{(settings.store as any).unsafeViewAsRole && (
|
||||
<Menu.MenuItem
|
||||
id="vc-pw-view-as-role"
|
||||
id={cl("view-as-role")}
|
||||
label={i18n.Messages.VIEW_AS_ROLE}
|
||||
action={() => {
|
||||
const role = GuildStore.getRole(guild.id, roleId);
|
||||
if (!role) return;
|
||||
|
||||
onClose();
|
||||
|
||||
FluxDispatcher.dispatch({
|
||||
type: "IMPERSONATE_UPDATE",
|
||||
guildId: guild.id,
|
||||
|
|
@ -235,15 +241,14 @@ function RoleContextMenu({ guild, roleId, onClose }: { guild: Guild; roleId: str
|
|||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Menu.Menu>
|
||||
);
|
||||
}
|
||||
|
||||
function UserContextMenu({ userId, onClose }: { userId: string; onClose: () => void; }) {
|
||||
function UserContextMenu({ userId }: { userId: string; }) {
|
||||
return (
|
||||
<Menu.Menu
|
||||
navId={cl("user-context-menu")}
|
||||
|
|
@ -251,7 +256,7 @@ function UserContextMenu({ userId, onClose }: { userId: string; onClose: () => v
|
|||
aria-label="User Options"
|
||||
>
|
||||
<Menu.MenuItem
|
||||
id="vc-copy-user-id"
|
||||
id={cl("copy-user-id")}
|
||||
label={i18n.Messages.COPY_ID_USER}
|
||||
action={() => {
|
||||
Clipboard.copy(userId);
|
||||
|
|
@ -263,4 +268,13 @@ function UserContextMenu({ userId, onClose }: { userId: string; onClose: () => v
|
|||
|
||||
const RolesAndUsersPermissions = ErrorBoundary.wrap(RolesAndUsersPermissionsComponent);
|
||||
|
||||
export default openRolesAndUsersPermissionsModal;
|
||||
export default function openRolesAndUsersPermissionsModal(permissions: Array<RoleOrUserPermission>, guild: Guild, header: string) {
|
||||
return openModal(modalProps => (
|
||||
<RolesAndUsersPermissions
|
||||
modalProps={modalProps}
|
||||
permissions={permissions}
|
||||
guild={guild}
|
||||
header={header}
|
||||
/>
|
||||
));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ import openRolesAndUsersPermissionsModal, { PermissionType, type RoleOrUserPermi
|
|||
|
||||
interface UserPermission {
|
||||
permission: string;
|
||||
roleName: string;
|
||||
roleColor: string;
|
||||
rolePosition: number;
|
||||
}
|
||||
|
|
@ -39,8 +40,48 @@ const RoleRootClasses = findByProps("root", "expandButton", "collapseButton");
|
|||
const RoleClasses = findByProps("role", "roleCircle", "roleName");
|
||||
const RoleBorderClasses = findByProps("roleCircle", "dot", "dotBorderColor");
|
||||
|
||||
interface FakeRoleProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
text: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
function FakeRole({ text, color, ...props }: FakeRoleProps) {
|
||||
return (
|
||||
<div {...props} className={classes(RoleClasses.role)}>
|
||||
<div className={RoleClasses.roleRemoveButton}>
|
||||
<span
|
||||
className={classes(RoleBorderClasses.roleCircle, RoleClasses.roleCircle)}
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
</div>
|
||||
<div className={RoleClasses.roleName}>
|
||||
<Text
|
||||
className={RoleClasses.roleNameOverflow}
|
||||
variant="text-xs/medium"
|
||||
>
|
||||
{text}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface GrantedByTooltipProps {
|
||||
roleName: string;
|
||||
roleColor: string;
|
||||
}
|
||||
|
||||
function GrantedByTooltip({ roleName, roleColor }: GrantedByTooltipProps) {
|
||||
return (
|
||||
<>
|
||||
<Text variant="text-sm/medium">Granted By</Text>
|
||||
<FakeRole text={roleName} color={roleColor} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { guild: Guild; guildMember: GuildMember; forceOpen?: boolean; }) {
|
||||
const stns = settings.use(["permissionsSortOrder"]);
|
||||
const { permissionsSortOrder } = settings.use(["permissionsSortOrder"]);
|
||||
|
||||
const [rolePermissions, userPermissions] = useMemo(() => {
|
||||
const userPermissions: UserPermissions = [];
|
||||
|
|
@ -61,6 +102,7 @@ function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { g
|
|||
const OWNER = i18n.Messages.GUILD_OWNER || "Server Owner";
|
||||
userPermissions.push({
|
||||
permission: OWNER,
|
||||
roleName: "Owner",
|
||||
roleColor: "var(--primary-300)",
|
||||
rolePosition: Infinity
|
||||
});
|
||||
|
|
@ -69,10 +111,11 @@ function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { g
|
|||
sortUserRoles(userRoles);
|
||||
|
||||
for (const [permission, bit] of Object.entries(PermissionsBits)) {
|
||||
for (const { permissions, colorString, position } of userRoles) {
|
||||
for (const { permissions, colorString, position, name } of userRoles) {
|
||||
if ((permissions & bit) === bit) {
|
||||
userPermissions.push({
|
||||
permission: getPermissionString(permission),
|
||||
roleName: name,
|
||||
roleColor: colorString || "var(--primary-300)",
|
||||
rolePosition: position
|
||||
});
|
||||
|
|
@ -85,7 +128,7 @@ function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { g
|
|||
userPermissions.sort((a, b) => b.rolePosition - a.rolePosition);
|
||||
|
||||
return [rolePermissions, userPermissions];
|
||||
}, [stns.permissionsSortOrder]);
|
||||
}, [permissionsSortOrder]);
|
||||
|
||||
return (
|
||||
<ExpandableHeader
|
||||
|
|
@ -102,46 +145,41 @@ function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { g
|
|||
onDropDownClick={state => settings.store.defaultPermissionsDropdownState = !state}
|
||||
defaultState={settings.store.defaultPermissionsDropdownState}
|
||||
buttons={[
|
||||
(<Tooltip text={`Sorting by ${stns.permissionsSortOrder === PermissionsSortOrder.HighestRole ? "Highest Role" : "Lowest Role"}`}>
|
||||
<Tooltip text={`Sorting by ${permissionsSortOrder === PermissionsSortOrder.HighestRole ? "Highest Role" : "Lowest Role"}`}>
|
||||
{tooltipProps => (
|
||||
<button
|
||||
<div
|
||||
{...tooltipProps}
|
||||
className={cl("userperms-sortorder-btn")}
|
||||
className={cl("user-sortorder-btn")}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
stns.permissionsSortOrder = stns.permissionsSortOrder === PermissionsSortOrder.HighestRole ? PermissionsSortOrder.LowestRole : PermissionsSortOrder.HighestRole;
|
||||
settings.store.permissionsSortOrder = 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)"}
|
||||
transform={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>
|
||||
</div>
|
||||
)}
|
||||
</Tooltip>)
|
||||
</Tooltip>
|
||||
]}>
|
||||
{userPermissions.length > 0 && (
|
||||
<div className={classes(RoleRootClasses.root)}>
|
||||
{userPermissions.map(({ permission, roleColor }) => (
|
||||
<div className={classes(RoleClasses.role)}>
|
||||
<div className={RoleClasses.roleRemoveButton}>
|
||||
<span
|
||||
className={classes(RoleBorderClasses.roleCircle, RoleClasses.roleCircle)}
|
||||
style={{ backgroundColor: roleColor }}
|
||||
/>
|
||||
</div>
|
||||
<div className={RoleClasses.roleName}>
|
||||
<Text
|
||||
className={RoleClasses.roleNameOverflow}
|
||||
variant="text-xs/medium"
|
||||
{userPermissions.map(({ permission, roleColor, roleName }) => (
|
||||
<Tooltip
|
||||
text={<GrantedByTooltip roleName={roleName} roleColor={roleColor} />}
|
||||
tooltipClassName={cl("granted-by-container")}
|
||||
tooltipContentClassName={cl("granted-by-content")}
|
||||
>
|
||||
{permission}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
{tooltipProps => (
|
||||
<FakeRole {...tooltipProps} text={permission} color={roleColor} />
|
||||
)}
|
||||
</Tooltip>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ import { Devs } from "@utils/constants";
|
|||
import { classes } from "@utils/misc";
|
||||
import definePlugin, { OptionType } from "@utils/types";
|
||||
import { findByProps } from "@webpack";
|
||||
import { Button, ChannelStore, Dialog, GuildMemberStore, GuildStore, Menu, PermissionsBits, Popout, TooltipContainer, UserStore } from "@webpack/common";
|
||||
import { Button, ChannelStore, Dialog, GuildMemberStore, GuildStore, match, Menu, PermissionsBits, Popout, TooltipContainer, UserStore } from "@webpack/common";
|
||||
import type { Guild, GuildMember } from "discord-types/general";
|
||||
|
||||
import openRolesAndUsersPermissionsModal, { PermissionType, RoleOrUserPermission } from "./components/RolesAndUsersPermissions";
|
||||
|
|
@ -54,12 +54,12 @@ export const settings = definePluginSettings({
|
|||
options: [
|
||||
{ label: "Highest Role", value: PermissionsSortOrder.HighestRole, default: true },
|
||||
{ label: "Lowest Role", value: PermissionsSortOrder.LowestRole }
|
||||
],
|
||||
]
|
||||
},
|
||||
defaultPermissionsDropdownState: {
|
||||
description: "Whether the permissions dropdown on user popouts should be open by default",
|
||||
type: OptionType.BOOLEAN,
|
||||
default: false,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -73,14 +73,12 @@ function MenuItem(guildId: string, id?: string, type?: MenuItemParentType) {
|
|||
action={() => {
|
||||
const guild = GuildStore.getGuild(guildId);
|
||||
|
||||
let permissions: RoleOrUserPermission[];
|
||||
let header: string;
|
||||
|
||||
switch (type) {
|
||||
case MenuItemParentType.User: {
|
||||
const { permissions, header } = match(type)
|
||||
.returnType<{ permissions: RoleOrUserPermission[], header: string; }>()
|
||||
.with(MenuItemParentType.User, () => {
|
||||
const member = GuildMemberStore.getMember(guildId, id!);
|
||||
|
||||
permissions = getSortedRoles(guild, member)
|
||||
const permissions: RoleOrUserPermission[] = getSortedRoles(guild, member)
|
||||
.map(role => ({
|
||||
type: PermissionType.Role,
|
||||
...role
|
||||
|
|
@ -93,37 +91,37 @@ function MenuItem(guildId: string, id?: string, type?: MenuItemParentType) {
|
|||
});
|
||||
}
|
||||
|
||||
header = member.nick ?? UserStore.getUser(member.userId).username;
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case MenuItemParentType.Channel: {
|
||||
return {
|
||||
permissions,
|
||||
header: member.nick ?? UserStore.getUser(member.userId).username
|
||||
};
|
||||
})
|
||||
.with(MenuItemParentType.Channel, () => {
|
||||
const channel = ChannelStore.getChannel(id!);
|
||||
|
||||
permissions = sortPermissionOverwrites(Object.values(channel.permissionOverwrites).map(({ id, allow, deny, type }) => ({
|
||||
const permissions = sortPermissionOverwrites(Object.values(channel.permissionOverwrites).map(({ id, allow, deny, type }) => ({
|
||||
type: type as PermissionType,
|
||||
id,
|
||||
overwriteAllow: allow,
|
||||
overwriteDeny: deny
|
||||
})), guildId);
|
||||
|
||||
header = channel.name;
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
default: {
|
||||
permissions = Object.values(GuildStore.getRoles(guild.id)).map(role => ({
|
||||
return {
|
||||
permissions,
|
||||
header: channel.name
|
||||
};
|
||||
})
|
||||
.otherwise(() => {
|
||||
const permissions = Object.values(GuildStore.getRoles(guild.id)).map(role => ({
|
||||
type: PermissionType.Role,
|
||||
...role
|
||||
}));
|
||||
|
||||
header = guild.name;
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
return {
|
||||
permissions,
|
||||
header: guild.name
|
||||
};
|
||||
});
|
||||
|
||||
openRolesAndUsersPermissionsModal(permissions, guild, header);
|
||||
}}
|
||||
|
|
@ -133,32 +131,34 @@ function MenuItem(guildId: string, id?: string, type?: MenuItemParentType) {
|
|||
|
||||
function makeContextMenuPatch(childId: string | string[], type?: MenuItemParentType): NavContextMenuPatchCallback {
|
||||
return (children, props) => {
|
||||
if (!props) return;
|
||||
if ((type === MenuItemParentType.User && !props.user) || (type === MenuItemParentType.Guild && !props.guild) || (type === MenuItemParentType.Channel && (!props.channel || !props.guild)))
|
||||
if (
|
||||
!props ||
|
||||
(type === MenuItemParentType.User && !props.user) ||
|
||||
(type === MenuItemParentType.Guild && !props.guild) ||
|
||||
(type === MenuItemParentType.Channel && (!props.channel || !props.guild))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const group = findGroupChildrenByChildId(childId, children);
|
||||
|
||||
const item = (() => {
|
||||
switch (type) {
|
||||
case MenuItemParentType.User:
|
||||
return MenuItem(props.guildId, props.user.id, type);
|
||||
case MenuItemParentType.Channel:
|
||||
return MenuItem(props.guild.id, props.channel.id, type);
|
||||
case MenuItemParentType.Guild:
|
||||
return MenuItem(props.guild.id);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
})();
|
||||
const item = match(type)
|
||||
.with(MenuItemParentType.User, () => MenuItem(props.guildId, props.user.id, type))
|
||||
.with(MenuItemParentType.Channel, () => MenuItem(props.guild.id, props.channel.id, type))
|
||||
.with(MenuItemParentType.Guild, () => MenuItem(props.guild.id))
|
||||
.otherwise(() => null);
|
||||
|
||||
|
||||
if (item == null) return;
|
||||
|
||||
if (group)
|
||||
group.push(item);
|
||||
else if (childId === "roles" && props.guildId)
|
||||
if (group) {
|
||||
return group.push(item);
|
||||
}
|
||||
|
||||
// "roles" may not be present due to the member not having any roles. In that case, add it above "Copy ID"
|
||||
if (childId === "roles" && props.guildId) {
|
||||
children.splice(-1, 0, <Menu.MenuGroup>{item}</Menu.MenuGroup>);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,6 @@
|
|||
/* User Permissions Component */
|
||||
|
||||
.vc-permviewer-userperms-title-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
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;
|
||||
.vc-permviewer-user-sortorder-btn {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -23,27 +9,17 @@
|
|||
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 */
|
||||
|
||||
.vc-permviewer-perms-title {
|
||||
.vc-permviewer-modal-content {
|
||||
padding: 16px 4px 16px 16px;
|
||||
}
|
||||
|
||||
.vc-permviewer-modal-title {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.vc-permviewer-perms-no-perms {
|
||||
.vc-permviewer-modal-no-perms {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
@ -52,101 +28,103 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.vc-permviewer-perms-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
grid-template-areas: "list permissions";
|
||||
padding: 16px 0;
|
||||
.vc-permviewer-modal-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.vc-permviewer-perms-list {
|
||||
grid-area: list;
|
||||
.vc-permviewer-modal-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
border-right: 2px solid var(--background-modifier-active);
|
||||
padding-right: 8px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.vc-permviewer-perms-list-item-btn {
|
||||
all: unset;
|
||||
.vc-permviewer-modal-list-item-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vc-permviewer-perms-list-item {
|
||||
.vc-permviewer-modal-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 5px;
|
||||
cursor: pointer;
|
||||
width: 230px;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.vc-permviewer-perms-list-item:hover {
|
||||
.vc-permviewer-modal-list-item:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
}
|
||||
|
||||
.vc-permviewer-perms-list-item-active {
|
||||
.vc-permviewer-modal-list-item-active {
|
||||
background-color: var(--background-modifier-selected);
|
||||
}
|
||||
|
||||
.vc-permviewer-perms-list-item > div {
|
||||
.vc-permviewer-modal-list-item > div {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vc-permviewer-perms-role-circle {
|
||||
.vc-permviewer-modal-role-circle {
|
||||
border-radius: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-left: 3px;
|
||||
margin-right: 11px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.vc-permviewer-perms-user-img {
|
||||
.vc-permviewer-modal-role-image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.vc-permviewer-modal-user-img {
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.vc-permviewer-perms-perms {
|
||||
grid-area: permissions;
|
||||
.vc-permviewer-modal-divider {
|
||||
width: 2px;
|
||||
background-color: var(--background-modifier-active);
|
||||
}
|
||||
|
||||
.vc-permviewer-modal-perms {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 5px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.vc-permviewer-perms-perms-item {
|
||||
position: relative;
|
||||
.vc-permviewer-modal-perms-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
gap: 5px;
|
||||
padding: 10px 2px 10px 10px;
|
||||
border-bottom: 2px solid var(--background-modifier-active);
|
||||
}
|
||||
|
||||
.vc-permviewer-perms-perms-item:last-child {
|
||||
.vc-permviewer-modal-perms-item:last-child {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.vc-permviewer-perms-perms-item-icon {
|
||||
.vc-permviewer-modal-perms-item-icon {
|
||||
border: 1px solid var(--background-modifier-selected);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.vc-permviewer-perms-perms-item .vc-info-icon {
|
||||
.vc-permviewer-modal-perms-item .vc-info-icon {
|
||||
color: var(--interactive-muted);
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
scale: 0.9;
|
||||
transition: color ease-in 0.1s;
|
||||
}
|
||||
|
||||
.vc-permviewer-perms-perms-item .vc-info-icon:hover {
|
||||
.vc-permviewer-modal-perms-item .vc-info-icon:hover {
|
||||
color: var(--interactive-active);
|
||||
}
|
||||
|
||||
|
|
@ -167,3 +145,14 @@
|
|||
background: rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-6));
|
||||
border-color: var(--profile-body-border-color)
|
||||
}
|
||||
|
||||
.vc-permviewer-granted-by-container {
|
||||
max-width: 300px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.vc-permviewer-granted-by-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ export default definePlugin({
|
|||
// Patches needed for web/vesktop
|
||||
{
|
||||
find: "streamSourceNode",
|
||||
predicate: () => IS_WEB,
|
||||
predicate: () => !IS_DISCORD_DESKTOP,
|
||||
group: true,
|
||||
replacement: [
|
||||
// Remove rounding algorithm
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
*/
|
||||
|
||||
import { Settings, SettingsStore } from "@api/Settings";
|
||||
import { ThemeStore } from "@webpack/common";
|
||||
|
||||
|
||||
let style: HTMLStyleElement;
|
||||
|
|
@ -59,7 +60,18 @@ async function initThemes() {
|
|||
|
||||
const { themeLinks, enabledThemes } = Settings;
|
||||
|
||||
const links: string[] = [...themeLinks];
|
||||
// "darker" and "midnight" both count as dark
|
||||
const activeTheme = ThemeStore.theme === "light" ? "light" : "dark";
|
||||
|
||||
const links = themeLinks
|
||||
.map(rawLink => {
|
||||
const match = /^@(light|dark) (.*)/.exec(rawLink);
|
||||
if (!match) return rawLink;
|
||||
|
||||
const [, mode, link] = match;
|
||||
return mode === activeTheme ? link : null;
|
||||
})
|
||||
.filter(link => link !== null);
|
||||
|
||||
if (IS_WEB) {
|
||||
for (const theme of enabledThemes) {
|
||||
|
|
@ -85,6 +97,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
|
||||
SettingsStore.addChangeListener("themeLinks", initThemes);
|
||||
SettingsStore.addChangeListener("enabledThemes", initThemes);
|
||||
ThemeStore.addChangeListener(initThemes);
|
||||
|
||||
if (!IS_WEB)
|
||||
VencordNative.quickCss.addThemeChangeListener(initThemes);
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@ export const GuildMemberStore = findStore<t.GuildMemberStore>("GuildMemberStore"
|
|||
export const RelationshipStore = findStore<t.RelationshipStore>("RelationshipStore");
|
||||
|
||||
export const EmojiStore = findStore<t.EmojiStore>("EmojiStore");
|
||||
export const ThemeStore = findStore<t.ThemeStore>("ThemeStore");
|
||||
export const WindowStore = findStore<t.WindowStore>("WindowStore");
|
||||
export const DraftStore = findStore<t.DraftStore>("DraftStore");
|
||||
|
||||
|
|
|
|||
2
src/webpack/common/types/components.d.ts
vendored
2
src/webpack/common/types/components.d.ts
vendored
|
|
@ -473,7 +473,7 @@ export type ScrollerThin = ComponentType<PropsWithChildren<{
|
|||
style?: CSSProperties;
|
||||
|
||||
dir?: "ltr";
|
||||
orientation?: "horizontal" | "vertical";
|
||||
orientation?: "horizontal" | "vertical" | "auto";
|
||||
paddingFix?: boolean;
|
||||
fade?: boolean;
|
||||
|
||||
|
|
|
|||
8
src/webpack/common/types/stores.d.ts
vendored
8
src/webpack/common/types/stores.d.ts
vendored
|
|
@ -234,6 +234,14 @@ export type RelationshipStore = FluxStore & Stores.RelationshipStore & {
|
|||
getSince(userId: string): string;
|
||||
};
|
||||
|
||||
export class ThemeStore extends FluxStore {
|
||||
theme: "light" | "dark" | "darker" | "midnight";
|
||||
darkSidebar: boolean;
|
||||
isSystemThemeAvailable: boolean;
|
||||
systemPrefersColorScheme: "light" | "dark";
|
||||
systemTheme: null;
|
||||
}
|
||||
|
||||
export type useStateFromStores = <T>(
|
||||
stores: FluxStore[],
|
||||
mapper: () => T,
|
||||
|
|
|
|||
Loading…
Reference in a new issue