diff --git a/src/plugins/betterRoleContext/README.md b/src/plugins/betterRoleContext/README.md
index 3f3086bdb..e54e1e313 100644
--- a/src/plugins/betterRoleContext/README.md
+++ b/src/plugins/betterRoleContext/README.md
@@ -1,6 +1,6 @@
# BetterRoleContext
-Adds options to copy role color and edit role when right clicking roles in the user profile
+Adds options to copy role color, edit role and view role icon when right clicking roles in the user profile
-![](https://github.com/Vendicated/Vencord/assets/45497981/d1765e9e-7db2-4a3c-b110-139c59235326)
+![](https://github.com/Vendicated/Vencord/assets/45497981/354220a4-09f3-4c5f-a28e-4b19ca775190)
diff --git a/src/plugins/betterRoleContext/index.tsx b/src/plugins/betterRoleContext/index.tsx
index 3db3494f9..ecb1ed400 100644
--- a/src/plugins/betterRoleContext/index.tsx
+++ b/src/plugins/betterRoleContext/index.tsx
@@ -4,9 +4,11 @@
* SPDX-License-Identifier: GPL-3.0-or-later
*/
+import { definePluginSettings } from "@api/Settings";
+import { ImageIcon } from "@components/Icons";
import { Devs } from "@utils/constants";
-import { getCurrentGuild } from "@utils/discord";
-import definePlugin from "@utils/types";
+import { getCurrentGuild, openImageModal } from "@utils/discord";
+import definePlugin, { OptionType } from "@utils/types";
import { findByPropsLazy } from "@webpack";
import { Clipboard, GuildStore, Menu, PermissionStore, TextAndImagesSettingsStores } from "@webpack/common";
@@ -34,10 +36,34 @@ function AppearanceIcon() {
);
}
+const settings = definePluginSettings({
+ roleIconFileFormat: {
+ type: OptionType.SELECT,
+ description: "File format to use when viewing role icons",
+ options: [
+ {
+ label: "png",
+ value: "png",
+ default: true
+ },
+ {
+ label: "webp",
+ value: "webp",
+ },
+ {
+ label: "jpg",
+ value: "jpg"
+ }
+ ]
+ }
+});
+
export default definePlugin({
name: "BetterRoleContext",
- description: "Adds options to copy role color / edit role when right clicking roles in the user profile",
- authors: [Devs.Ven],
+ description: "Adds options to copy role color / edit role / view role icon when right clicking roles in the user profile",
+ authors: [Devs.Ven, Devs.goodbee],
+
+ settings,
start() {
// DeveloperMode needs to be enabled for the context menu to be shown
@@ -63,6 +89,20 @@ export default definePlugin({
);
}
+ if (role.icon) {
+ children.push(
+
{
+ openImageModal(`${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/role-icons/${role.id}/${role.icon}.${settings.store.roleIconFileFormat}`);
+ }}
+ icon={ImageIcon}
+ />
+
+ );
+ }
+
if (PermissionStore.getGuildPermissionProps(guild).canManageRoles) {
children.push(
void;
+ onBannerChange: () => void;
+ canUsePremiumCustomization: boolean;
+ hideExampleButton: boolean;
+ hideFakeActivity: boolean;
+ isTryItOutFlow: boolean;
+}
+
+const ColorPicker = findComponentByCodeLazy(".Messages.USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR", ".BACKGROUND_PRIMARY)");
+const ProfileModal = findComponentByCodeLazy('"ProfileCustomizationPreview"');
+
+const requireColorPicker = extractAndLoadChunksLazy(["USER_SETTINGS_PROFILE_COLOR_DEFAULT_BUTTON.format"], /createPromise:\(\)=>\i\.\i\("(.+?)"\).then\(\i\.bind\(\i,"(.+?)"\)\)/);
+
export default definePlugin({
name: "FakeProfileThemes",
description: "Allows profile theming by hiding the colors in your bio thanks to invisible 3y3 encoding",
@@ -101,21 +133,98 @@ export default definePlugin({
}
}
],
- settingsAboutComponent: () => (
-
- Usage
-
- After enabling this plugin, you will see custom colors in the profiles of other people using compatible plugins.
- To set your own colors:
-
-
• go to your profile settings
-
• choose your own colors in the Nitro preview
-
• click the "Copy 3y3" button
-
• paste the invisible text anywhere in your bio
-
- Please note: if you are using a theme which hides nitro ads, you should disable it temporarily to set colors.
-
- ),
+ settingsAboutComponent: () => {
+ const existingColors = decode(
+ UserProfileStore.getUserProfile(UserStore.getCurrentUser().id).bio
+ ) ?? [0, 0];
+ const [color1, setColor1] = useState(existingColors[0]);
+ const [color2, setColor2] = useState(existingColors[1]);
+
+ const [, , loadingColorPickerChunk] = useAwaiter(requireColorPicker);
+
+ return (
+
+ Usage
+
+ After enabling this plugin, you will see custom colors in
+ the profiles of other people using compatible plugins.{" "}
+
+ To set your own colors:
+
+
+ • use the color pickers below to choose your colors
+