-
+
<>
{IS_WEB ?
(
-
+
+ Upload Theme
+
+
+ }
+ Icon={PlusIcon}
+ />
) : (
-
+ Icon={FolderIcon}
+ />
)}
-
-
+
+ VencordNative.quickCss.openEditor()}
+ Icon={PaintbrushIcon}
+ />
{Vencord.Settings.plugins.ClientTheme.enabled && (
-
+ openPluginModal(Vencord.Plugins.plugins.ClientTheme)}
+ Icon={PencilIcon}
+ />
)}
-
+
{userThemes?.map(theme => (
diff --git a/src/components/VencordSettings/VencordTab.tsx b/src/components/VencordSettings/VencordTab.tsx
index d13b43fb2..97f82e777 100644
--- a/src/components/VencordSettings/VencordTab.tsx
+++ b/src/components/VencordSettings/VencordTab.tsx
@@ -21,15 +21,16 @@ import { useSettings } from "@api/Settings";
import { classNameFactory } from "@api/Styles";
import DonateButton from "@components/DonateButton";
import { openPluginModal } from "@components/PluginSettings/PluginModal";
+import { gitRemote } from "@shared/vencordUserAgent";
import { Margins } from "@utils/margins";
import { identity } from "@utils/misc";
import { relaunch, showItemInFolder } from "@utils/native";
import { useAwaiter } from "@utils/react";
-import { Button, Card, Forms, React, Select, Switch, TooltipContainer } from "@webpack/common";
-import { ComponentType } from "react";
+import { Button, Card, Forms, React, Select, Switch } from "@webpack/common";
import { Flex, FolderIcon, GithubIcon, LogIcon, PaintbrushIcon, RestartIcon } from "..";
import { openNotificationSettingsModal } from "./NotificationSettings";
+import { QuickAction, QuickActionCard } from "./quickActions";
import { SettingsTab, wrapTab } from "./shared";
const cl = classNameFactory("vc-settings-");
@@ -41,17 +42,6 @@ type KeysOfType = {
[K in keyof Object]: Object[K] extends Type ? K : never;
}[keyof Object];
-const iconWithTooltip = (Icon: ComponentType<{ className?: string; }>, tooltip: string) => () => (
-
-
-
-);
-
-const NotificationLogIcon = iconWithTooltip(LogIcon, "Open Notification Log");
-const QuickCssIcon = iconWithTooltip(PaintbrushIcon, "Edit QuickCSS");
-const RelaunchIcon = iconWithTooltip(RestartIcon, "Relaunch Discord");
-const OpenSettingsDirIcon = iconWithTooltip(FolderIcon, "Open Settings Directory");
-const OpenGithubIcon = iconWithTooltip(GithubIcon, "View Vencord's GitHub Repository");
function VencordSettings() {
const [settingsDir, , settingsDirPending] = useAwaiter(VencordNative.settings.getSettingsDir, {
@@ -111,44 +101,37 @@ function VencordSettings() {
-
-
-
+
+
+ VencordNative.quickCss.openEditor()}
+ />
{!IS_WEB && (
-
+
)}
{!IS_WEB && (
-
+ showItemInFolder(settingsDir)}
+ />
)}
-
-
+ VencordNative.native.openExternal("https://github.com/" + gitRemote)}
+ />
+
diff --git a/src/components/VencordSettings/quickActions.css b/src/components/VencordSettings/quickActions.css
new file mode 100644
index 000000000..471c394ee
--- /dev/null
+++ b/src/components/VencordSettings/quickActions.css
@@ -0,0 +1,33 @@
+.vc-settings-quickActions-card {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, max-content));
+ gap: 0.5em;
+ justify-content: center;
+ padding: 0.5em 0;
+ margin-bottom: 1em;
+}
+
+.vc-settings-quickActions-pill {
+ all: unset;
+ background: var(--background-secondary);
+ color: var(--header-secondary);
+ display: flex;
+ align-items: center;
+ gap: 0.5em;
+ padding: 8px 12px;
+ border-radius: 9999px;
+}
+
+.vc-settings-quickActions-pill:hover {
+ background: var(--background-secondary-alt);
+}
+
+.vc-settings-quickActions-pill:focus-visible {
+ outline: 2px solid var(--focus-primary);
+ outline-offset: 2px;
+}
+
+.vc-settings-quickActions-img {
+ width: 24px;
+ height: 24px;
+}
diff --git a/src/components/VencordSettings/quickActions.tsx b/src/components/VencordSettings/quickActions.tsx
new file mode 100644
index 000000000..6cc57180a
--- /dev/null
+++ b/src/components/VencordSettings/quickActions.tsx
@@ -0,0 +1,39 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import "./quickActions.css";
+
+import { classNameFactory } from "@api/Styles";
+import { Card } from "@webpack/common";
+import type { ComponentType, PropsWithChildren, ReactNode } from "react";
+
+const cl = classNameFactory("vc-settings-quickActions-");
+
+export interface QuickActionProps {
+ Icon: ComponentType<{ className?: string; }>;
+ text: ReactNode;
+ action?: () => void;
+ disabled?: boolean;
+}
+
+export function QuickAction(props: QuickActionProps) {
+ const { Icon, action, text, disabled } = props;
+
+ return (
+
+ );
+}
+
+export function QuickActionCard(props: PropsWithChildren) {
+ return (
+
+ {props.children}
+
+ );
+}
diff --git a/src/components/VencordSettings/settingsStyles.css b/src/components/VencordSettings/settingsStyles.css
index 6e8826c52..13558be21 100644
--- a/src/components/VencordSettings/settingsStyles.css
+++ b/src/components/VencordSettings/settingsStyles.css
@@ -10,26 +10,6 @@
margin-bottom: -2px;
}
-.vc-settings-quick-actions-card {
- color: var(--text-normal);
- padding: 1em;
- display: flex;
- justify-content: space-evenly;
- gap: 1em;
- flex-wrap: wrap;
- align-items: center;
- margin-bottom: 1em;
-}
-
-.vc-settings-quick-actions-card button {
- min-width: unset;
-}
-
-.vc-settings-quick-actions-img {
- width: 30px;
- height: 30px;
-}
-
.vc-settings-donate {
display: flex;
flex-direction: row;
diff --git a/src/utils/misc.ts b/src/utils/misc.ts
index 7d6b4affc..28c371c5b 100644
--- a/src/utils/misc.ts
+++ b/src/utils/misc.ts
@@ -24,7 +24,7 @@ import { DevsById } from "./constants";
* Calls .join(" ") on the arguments
* classes("one", "two") => "one two"
*/
-export function classes(...classes: Array) {
+export function classes(...classes: Array) {
return classes.filter(Boolean).join(" ");
}
diff --git a/src/webpack/common/types/utils.d.ts b/src/webpack/common/types/utils.d.ts
index ee3f69944..ce1e3e268 100644
--- a/src/webpack/common/types/utils.d.ts
+++ b/src/webpack/common/types/utils.d.ts
@@ -16,7 +16,7 @@
* along with this program. If not, see .
*/
-import { Guild, GuildMember } from "discord-types/general";
+import { Guild, GuildMember, User } from "discord-types/general";
import type { ReactNode } from "react";
import { LiteralUnion } from "type-fest";
@@ -256,3 +256,63 @@ export interface PopoutActions {
close(key: string): void;
setAlwaysOnTop(key: string, alwaysOnTop: boolean): void;
}
+
+export type UserNameUtilsTagInclude = LiteralUnion<"auto" | "always" | "never", string>;
+export interface UserNameUtilsTagOptions {
+ forcePomelo?: boolean;
+ identifiable?: UserNameUtilsTagInclude;
+ decoration?: UserNameUtilsTagInclude;
+ mode?: "full" | "username";
+}
+
+export interface UsernameUtils {
+ getGlobalName(user: User): string;
+ getFormattedName(user: User, useTagInsteadOfUsername?: boolean): string;
+ getName(user: User): string;
+ useName(user: User): string;
+ getUserTag(user: User, options?: UserNameUtilsTagOptions): string;
+ useUserTag(user: User, options?: UserNameUtilsTagOptions): string;
+
+
+ useDirectMessageRecipient: any;
+ humanizeStatus: any;
+}
+
+export class DisplayProfile {
+ userId: string;
+ banner?: string;
+ bio?: string;
+ pronouns?: string;
+ accentColor?: number;
+ themeColors?: number[];
+ popoutAnimationParticleType?: any;
+ profileEffectId?: string;
+ _userProfile?: any;
+ _guildMemberProfile?: any;
+ canUsePremiumProfileCustomization: boolean;
+ canEditThemes: boolean;
+ premiumGuildSince: Date | null;
+ premiumSince: Date | null;
+ premiumType?: number;
+ primaryColor?: number;
+
+ getBadges(): Array<{
+ id: string;
+ description: string;
+ icon: string;
+ link?: string;
+ }>;
+ getBannerURL(options: { canAnimate: boolean; size: number; }): string;
+ getLegacyUsername(): string | null;
+ hasFullProfile(): boolean;
+ hasPremiumCustomization(): boolean;
+ hasThemeColors(): boolean;
+ isUsingGuildMemberBanner(): boolean;
+ isUsingGuildMemberBio(): boolean;
+ isUsingGuildMemberPronouns(): boolean;
+}
+
+export interface DisplayProfileUtils {
+ getDisplayProfile(userId: string, guildId?: string, customStores?: any): DisplayProfile | null;
+ useDisplayProfile(userId: string, guildId?: string, customStores?: any): DisplayProfile | null;
+}
diff --git a/src/webpack/common/utils.ts b/src/webpack/common/utils.ts
index a6853c84a..280b2ba90 100644
--- a/src/webpack/common/utils.ts
+++ b/src/webpack/common/utils.ts
@@ -73,6 +73,25 @@ const ToastPosition = {
BOTTOM: 1
};
+export interface ToastData {
+ message: string,
+ id: string,
+ /**
+ * Toasts.Type
+ */
+ type: number,
+ options?: ToastOptions;
+}
+
+export interface ToastOptions {
+ /**
+ * Toasts.Position
+ */
+ position?: number;
+ component?: React.ReactNode,
+ duration?: number;
+}
+
export const Toasts = {
Type: ToastType,
Position: ToastPosition,
@@ -81,23 +100,9 @@ export const Toasts = {
// hack to merge with the following interface, dunno if there's a better way
...{} as {
- show(data: {
- message: string,
- id: string,
- /**
- * Toasts.Type
- */
- type: number,
- options?: {
- /**
- * Toasts.Position
- */
- position?: number;
- component?: React.ReactNode,
- duration?: number;
- };
- }): void;
+ show(data: ToastData): void;
pop(): void;
+ create(message: string, type: number, options?: ToastOptions): ToastData;
}
};
@@ -105,18 +110,15 @@ export const Toasts = {
waitFor("showToast", m => {
Toasts.show = m.showToast;
Toasts.pop = m.popToast;
+ Toasts.create = m.createToast;
});
/**
* Show a simple toast. If you need more options, use Toasts.show manually
*/
-export function showToast(message: string, type = ToastType.MESSAGE) {
- Toasts.show({
- id: Toasts.genId(),
- message,
- type
- });
+export function showToast(message: string, type = ToastType.MESSAGE, options?: ToastOptions) {
+ Toasts.show(Toasts.create(message, type, options));
}
export const UserUtils = {
@@ -172,3 +174,9 @@ export const PopoutActions: t.PopoutActions = mapMangledModuleLazy('type:"POPOUT
close: filters.byCode('type:"POPOUT_WINDOW_CLOSE"'),
setAlwaysOnTop: filters.byCode('type:"POPOUT_WINDOW_SET_ALWAYS_ON_TOP"'),
});
+
+export const UsernameUtils: t.UsernameUtils = findByPropsLazy("useName", "getGlobalName");
+export const DisplayProfileUtils: t.DisplayProfileUtils = mapMangledModuleLazy(/=\i\.getUserProfile\(\i\),\i=\i\.getGuildMemberProfile\(/, {
+ getDisplayProfile: filters.byCode(".getGuildMemberProfile("),
+ useDisplayProfile: filters.byCode(/\[\i\.\i,\i\.\i],\(\)=>/)
+});
diff --git a/src/webpack/webpack.ts b/src/webpack/webpack.ts
index f776ab1c3..f21a38d67 100644
--- a/src/webpack/webpack.ts
+++ b/src/webpack/webpack.ts
@@ -38,31 +38,43 @@ export let cache: WebpackInstance["c"];
export type FilterFn = (mod: any) => boolean;
+type PropsFilter = Array;
+type CodeFilter = Array;
+type StoreNameFilter = string;
+
+const stringMatches = (s: string, filter: CodeFilter) =>
+ filter.every(f =>
+ typeof f === "string"
+ ? s.includes(f)
+ : f.test(s)
+ );
+
export const filters = {
- byProps: (...props: string[]): FilterFn =>
+ byProps: (...props: PropsFilter): FilterFn =>
props.length === 1
? m => m[props[0]] !== void 0
: m => props.every(p => m[p] !== void 0),
- byCode: (...code: string[]): FilterFn => m => {
- if (typeof m !== "function") return false;
- const s = Function.prototype.toString.call(m);
- for (const c of code) {
- if (!s.includes(c)) return false;
- }
- return true;
+ byCode: (...code: CodeFilter): FilterFn => {
+ code = code.map(canonicalizeMatch);
+ return m => {
+ if (typeof m !== "function") return false;
+ return stringMatches(Function.prototype.toString.call(m), code);
+ };
},
- byStoreName: (name: string): FilterFn => m =>
+ byStoreName: (name: StoreNameFilter): FilterFn => m =>
m.constructor?.displayName === name,
- componentByCode: (...code: string[]): FilterFn => {
+ componentByCode: (...code: CodeFilter): FilterFn => {
const filter = filters.byCode(...code);
return m => {
if (filter(m)) return true;
if (!m.$$typeof) return false;
- if (m.type && m.type.render) return filter(m.type.render); // memo + forwardRef
- if (m.type) return filter(m.type); // memos
- if (m.render) return filter(m.render); // forwardRefs
+ if (m.type)
+ return m.type.render
+ ? filter(m.type.render) // memo + forwardRef
+ : filter(m.type); // memo
+ if (m.render) return filter(m.render); // forwardRef
return false;
};
}
@@ -245,15 +257,9 @@ export const findBulk = traceFunction("findBulk", function findBulk(...filterFns
* Find the id of the first module factory that includes all the given code
* @returns string or null
*/
-export const findModuleId = traceFunction("findModuleId", function findModuleId(...code: string[]) {
- outer:
+export const findModuleId = traceFunction("findModuleId", function findModuleId(...code: CodeFilter) {
for (const id in wreq.m) {
- const str = wreq.m[id].toString();
-
- for (const c of code) {
- if (!str.includes(c)) continue outer;
- }
- return id;
+ if (stringMatches(wreq.m[id].toString(), code)) return id;
}
const err = new Error("Didn't find module with code(s):\n" + code.join("\n"));
@@ -272,7 +278,7 @@ export const findModuleId = traceFunction("findModuleId", function findModuleId(
* Find the first module factory that includes all the given code
* @returns The module factory or null
*/
-export function findModuleFactory(...code: string[]) {
+export function findModuleFactory(...code: CodeFilter) {
const id = findModuleId(...code);
if (!id) return null;
@@ -325,7 +331,7 @@ export function findLazy(filter: FilterFn) {
/**
* Find the first module that has the specified properties
*/
-export function findByProps(...props: string[]) {
+export function findByProps(...props: PropsFilter) {
const res = find(filters.byProps(...props), { isIndirect: true });
if (!res)
handleModuleNotFound("findByProps", ...props);
@@ -335,7 +341,7 @@ export function findByProps(...props: string[]) {
/**
* Find the first module that has the specified properties, lazily
*/
-export function findByPropsLazy(...props: string[]) {
+export function findByPropsLazy(...props: PropsFilter) {
if (IS_REPORTER) lazyWebpackSearchHistory.push(["findByProps", props]);
return proxyLazy(() => findByProps(...props));
@@ -344,7 +350,7 @@ export function findByPropsLazy(...props: string[]) {
/**
* Find the first function that includes all the given code
*/
-export function findByCode(...code: string[]) {
+export function findByCode(...code: CodeFilter) {
const res = find(filters.byCode(...code), { isIndirect: true });
if (!res)
handleModuleNotFound("findByCode", ...code);
@@ -354,7 +360,7 @@ export function findByCode(...code: string[]) {
/**
* Find the first function that includes all the given code, lazily
*/
-export function findByCodeLazy(...code: string[]) {
+export function findByCodeLazy(...code: CodeFilter) {
if (IS_REPORTER) lazyWebpackSearchHistory.push(["findByCode", code]);
return proxyLazy(() => findByCode(...code));
@@ -363,7 +369,7 @@ export function findByCodeLazy(...code: string[]) {
/**
* Find a store by its displayName
*/
-export function findStore(name: string) {
+export function findStore(name: StoreNameFilter) {
const res = find(filters.byStoreName(name), { isIndirect: true });
if (!res)
handleModuleNotFound("findStore", name);
@@ -373,7 +379,7 @@ export function findStore(name: string) {
/**
* Find a store by its displayName, lazily
*/
-export function findStoreLazy(name: string) {
+export function findStoreLazy(name: StoreNameFilter) {
if (IS_REPORTER) lazyWebpackSearchHistory.push(["findStore", [name]]);
return proxyLazy(() => findStore(name));
@@ -382,7 +388,7 @@ export function findStoreLazy(name: string) {
/**
* Finds the component which includes all the given code. Checks for plain components, memos and forwardRefs
*/
-export function findComponentByCode(...code: string[]) {
+export function findComponentByCode(...code: CodeFilter) {
const res = find(filters.componentByCode(...code), { isIndirect: true });
if (!res)
handleModuleNotFound("findComponentByCode", ...code);
@@ -407,7 +413,7 @@ export function findComponentLazy(filter: FilterFn) {
/**
* Finds the first component that includes all the given code, lazily
*/
-export function findComponentByCodeLazy(...code: string[]) {
+export function findComponentByCodeLazy(...code: CodeFilter) {
if (IS_REPORTER) lazyWebpackSearchHistory.push(["findComponentByCode", code]);
return LazyComponent(() => {
@@ -421,7 +427,7 @@ export function findComponentByCodeLazy(...code: string[
/**
* Finds the first component that is exported by the first prop name, lazily
*/
-export function findExportedComponentLazy(...props: string[]) {
+export function findExportedComponentLazy(...props: PropsFilter) {
if (IS_REPORTER) lazyWebpackSearchHistory.push(["findExportedComponent", props]);
return LazyComponent(() => {
@@ -445,10 +451,13 @@ export function findExportedComponentLazy(...props: stri
* closeModal: filters.byCode("key==")
* })
*/
-export const mapMangledModule = traceFunction("mapMangledModule", function mapMangledModule(code: string, mappers: Record): Record {
+export const mapMangledModule = traceFunction("mapMangledModule", function mapMangledModule(code: string | RegExp | CodeFilter, mappers: Record): Record {
+ if (!Array.isArray(code)) code = [code];
+ code = code.map(canonicalizeMatch);
+
const exports = {} as Record;
- const id = findModuleId(code);
+ const id = findModuleId(...code);
if (id === null)
return exports;
@@ -482,7 +491,7 @@ export const mapMangledModule = traceFunction("mapMangledModule", function mapMa
* closeModal: filters.byCode("key==")
* })
*/
-export function mapMangledModuleLazy(code: string, mappers: Record): Record {
+export function mapMangledModuleLazy(code: string | RegExp | CodeFilter, mappers: Record): Record {
if (IS_REPORTER) lazyWebpackSearchHistory.push(["mapMangledModule", [code, mappers]]);
return proxyLazy(() => mapMangledModule(code, mappers));
@@ -497,7 +506,7 @@ export const ChunkIdsRegex = /\("([^"]+?)"\)/g;
* @param matcher A RegExp that returns the chunk ids array as the first capture group and the entry point id as the second. Defaults to a matcher that captures the first lazy chunk loading found in the module factory
* @returns A promise that resolves with a boolean whether the chunks were loaded
*/
-export async function extractAndLoadChunks(code: string[], matcher: RegExp = DefaultExtractAndLoadChunksRegex) {
+export async function extractAndLoadChunks(code: CodeFilter, matcher: RegExp = DefaultExtractAndLoadChunksRegex) {
const module = findModuleFactory(...code);
if (!module) {
const err = new Error("extractAndLoadChunks: Couldn't find module factory");
@@ -562,7 +571,7 @@ export async function extractAndLoadChunks(code: string[], matcher: RegExp = Def
* @param matcher A RegExp that returns the chunk ids array as the first capture group and the entry point id as the second. Defaults to a matcher that captures the first lazy chunk loading found in the module factory
* @returns A function that returns a promise that resolves with a boolean whether the chunks were loaded, on first call
*/
-export function extractAndLoadChunksLazy(code: string[], matcher = DefaultExtractAndLoadChunksRegex) {
+export function extractAndLoadChunksLazy(code: CodeFilter, matcher = DefaultExtractAndLoadChunksRegex) {
if (IS_REPORTER) lazyWebpackSearchHistory.push(["extractAndLoadChunks", [code, matcher]]);
return makeLazy(() => extractAndLoadChunks(code, matcher));
@@ -572,7 +581,7 @@ export function extractAndLoadChunksLazy(code: string[], matcher = DefaultExtrac
* Wait for a module that matches the provided filter to be registered,
* then call the callback with the module as the first argument
*/
-export function waitFor(filter: string | string[] | FilterFn, callback: CallbackFn, { isIndirect = false }: { isIndirect?: boolean; } = {}) {
+export function waitFor(filter: string | PropsFilter | FilterFn, callback: CallbackFn, { isIndirect = false }: { isIndirect?: boolean; } = {}) {
if (IS_REPORTER && !isIndirect) lazyWebpackSearchHistory.push(["waitFor", Array.isArray(filter) ? filter : [filter]]);
if (typeof filter === "string")
@@ -593,21 +602,18 @@ export function waitFor(filter: string | string[] | FilterFn, callback: Callback
/**
* Search modules by keyword. This searches the factory methods,
* meaning you can search all sorts of things, displayName, methodName, strings somewhere in the code, etc
- * @param filters One or more strings or regexes
+ * @param code One or more strings or regexes
* @returns Mapping of found modules
*/
-export function search(...filters: Array) {
+export function search(...code: CodeFilter) {
const results = {} as Record;
const factories = wreq.m;
- outer:
+
for (const id in factories) {
const factory = factories[id].original ?? factories[id];
- const str: string = factory.toString();
- for (const filter of filters) {
- if (typeof filter === "string" && !str.includes(filter)) continue outer;
- if (filter instanceof RegExp && !filter.test(str)) continue outer;
- }
- results[id] = factory;
+
+ if (stringMatches(factory.toString(), code))
+ results[id] = factory;
}
return results;