Bump to v1.3.4

Co-authored-by: V <vendicated@riseup.net>

package.json

@@ -1,7 +1,7 @@
 {
     "name": "vencord",
     "private": "true",
-    "version": "1.3.2",
+    "version": "1.3.4",
     "description": "The cutest Discord client mod",
     "homepage": "https://github.com/Vendicated/Vencord#readme",
     "bugs": {

src/components/PluginSettings/components/SettingBooleanComponent.tsx

@@ -16,8 +16,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { wordsFromCamel, wordsToTitle } from "@utils/text";
 import { PluginOptionBoolean } from "@utils/types";
-import { Forms, React, Select } from "@webpack/common";
+import { Forms, React, Switch } from "@webpack/common";
 
 import { ISettingElementProps } from ".";
 
@@ -31,11 +32,6 @@ export function SettingBooleanComponent({ option, pluginSettings, definedSetting
         onError(error !== null);
     }, [error]);
 
-    const options = [
-        { label: "Enabled", value: true, default: def === true },
-        { label: "Disabled", value: false, default: typeof def === "undefined" || def === false },
-    ];
-
     function handleChange(newValue: boolean): void {
         const isValid = option.isValid?.call(definedSettings, newValue) ?? true;
         if (typeof isValid === "string") setError(isValid);
@@ -49,18 +45,17 @@ export function SettingBooleanComponent({ option, pluginSettings, definedSetting
 
     return (
         <Forms.FormSection>
-            <Forms.FormTitle>{option.description}</Forms.FormTitle>
+            <Switch
-            <Select
+                value={state}
-                isDisabled={option.disabled?.call(definedSettings) ?? false}
+                onChange={handleChange}
-                options={options}
+                note={option.description}
-                placeholder={option.placeholder ?? "Select an option"}
+                disabled={option.disabled?.call(definedSettings) ?? false}
-                maxVisibleItems={5}
-                closeOnSelect={true}
-                select={handleChange}
-                isSelected={v => v === state}
-                serialize={v => String(v)}
                 {...option.componentProps}
-            />
+                hideBorder
+                style={{ marginBottom: "0.5em" }}
+            >
+                {wordsToTitle(wordsFromCamel(id))}
+            </Switch>
             {error && <Forms.FormText style={{ color: "var(--text-danger)" }}>{error}</Forms.FormText>}
         </Forms.FormSection>
     );

src/components/VencordSettings/CloudTab.tsx

@@ -86,7 +86,7 @@ function SettingsSyncSection() {
                 <Button
                     size={Button.Sizes.SMALL}
                     disabled={!sectionEnabled}
-                    onClick={() => putCloudSettings()}
+                    onClick={() => putCloudSettings(true)}
                 >Sync to Cloud</Button>
                 <Tooltip text="This will overwrite your local settings with the ones on the cloud. Use wisely!">
                     {({ onMouseLeave, onMouseEnter }) => (

src/plugins/clearURLs/defaultRules.ts

@@ -135,4 +135,5 @@ export const defaultRules = [
     "utm_campaign",
     "utm_term",
     "si@open.spotify.com",
+    "igshid",
 ];

src/plugins/openInApp.ts

@@ -20,7 +20,7 @@ import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
 import { showToast, Toasts } from "@webpack/common";
-import { MouseEvent } from "react";
+import type { MouseEvent } from "react";
 
 const ShortUrlMatcher = /^https:\/\/(spotify\.link|s\.team)\/.+$/;
 const SpotifyMatcher = /^https:\/\/open\.spotify\.com\/(track|album|artist|playlist|user)\/(.+)(?:\?.+?)?$/;
@@ -77,12 +77,12 @@ export default definePlugin({
         }
     ],
 
-    async handleLink(data: { href: string; }, event: MouseEvent) {
+    async handleLink(data: { href: string; }, event?: MouseEvent) {
         if (!data) return false;
 
         let url = data.href;
         if (!IS_WEB && ShortUrlMatcher.test(url)) {
-            event.preventDefault();
+            event?.preventDefault();
             // CORS jumpscare
             url = await VencordNative.pluginHelpers.OpenInApp.resolveRedirect(url);
         }
@@ -96,7 +96,7 @@ export default definePlugin({
             const [, type, id] = match;
             VencordNative.native.openExternal(`spotify:${type}:${id}`);
 
-            event.preventDefault();
+            event?.preventDefault();
             return true;
         }
 
@@ -106,7 +106,7 @@ export default definePlugin({
             if (!SteamMatcher.test(url)) break steam;
 
             VencordNative.native.openExternal(`steam://openurl/${url}`);
-            event.preventDefault();
+            event?.preventDefault();
 
             // Steam does not focus itself so show a toast so it's slightly less confusing
             showToast("Opened link in Steam", Toasts.Type.SUCCESS);
@@ -120,13 +120,13 @@ export default definePlugin({
             if (!match) break epic;
 
             VencordNative.native.openExternal(`com.epicgames.launcher://store/${match[1]}`);
-            event.preventDefault();
+            event?.preventDefault();
 
             return true;
         }
 
         // in case short url didn't end up being something we can handle
-        if (event.defaultPrevented) {
+        if (event?.defaultPrevented) {
             window.open(url, "_blank");
             return true;
         }

src/plugins/relationshipNotifier/functions.ts

@@ -50,7 +50,7 @@ export async function onRelationshipRemove({ relationship: { type, id } }: Relat
                     () => openUserProfile(user.id)
                 );
             break;
-        case RelationshipType.FRIEND_REQUEST:
+        case RelationshipType.INCOMING_REQUEST:
             if (settings.store.friendRequestCancels)
                 notify(
                     `A friend request from ${getUniqueUsername(user)} has been removed.`,

src/plugins/relationshipNotifier/types.ts

@@ -58,5 +58,7 @@ export const enum ChannelType {
 
 export const enum RelationshipType {
     FRIEND = 1,
-    FRIEND_REQUEST = 3,
+    BLOCKED = 2,
+    INCOMING_REQUEST = 3,
+    OUTGOING_REQUEST = 4,
 }

src/plugins/relationshipNotifier/utils.ts

@@ -80,7 +80,10 @@ export async function syncAndRunChecks() {
 
         if (settings.store.friendRequestCancels && oldFriends?.requests?.length) {
             for (const id of oldFriends.requests) {
-                if (friends.requests.includes(id)) continue;
+                if (
+                    friends.requests.includes(id) ||
+                    [RelationshipType.FRIEND, RelationshipType.BLOCKED, RelationshipType.OUTGOING_REQUEST].includes(RelationshipStore.getRelationshipType(id))
+                ) continue;
 
                 const user = await UserUtils.fetchUser(id).catch(() => void 0);
                 if (user)
@@ -164,7 +167,7 @@ export async function syncFriends() {
             case RelationshipType.FRIEND:
                 friends.friends.push(id);
                 break;
-            case RelationshipType.FRIEND_REQUEST:
+            case RelationshipType.INCOMING_REQUEST:
                 friends.requests.push(id);
                 break;
         }

src/plugins/showAllMessageButtons.ts

@@ -28,8 +28,8 @@ export default definePlugin({
         {
             find: ".Messages.MESSAGE_UTILITIES_A11Y_LABEL",
             replacement: {
-                // isExpanded: V, (?<=,V = shiftKeyDown && !H...;)
+                // isExpanded: V, (?<=,V = shiftKeyDown && !H...,|;)
-                match: /isExpanded:(\i),(?<=,\1=\i&&(!.+);.+?)/,
+                match: /isExpanded:(\i),(?<=,\1=\i&&(?=(!.+?)[,;]).+?)/,
                 replace: "isExpanded:$2,"
             }
         }

src/plugins/showHiddenChannels/index.tsx

@@ -29,7 +29,7 @@ import type { Channel, Role } from "discord-types/general";
 
 import HiddenChannelLockScreen, { setChannelBeginHeaderComponent } from "./components/HiddenChannelLockScreen";
 
-const ChannelListClasses = findByPropsLazy("channelName", "subtitle", "modeMuted", "iconContainer");
+const ChannelListClasses = findByPropsLazy("channelEmoji", "unread", "icon");
 
 export const VIEW_CHANNEL = 1n << 10n;
 const CONNECT = 1n << 20n;
@@ -472,7 +472,7 @@ export default definePlugin({
 
     HiddenChannelLockScreen: (channel: any) => <HiddenChannelLockScreen channel={channel} />,
 
-    LockIcon: () => (
+    LockIcon: ErrorBoundary.wrap(() => (
         <svg
             className={ChannelListClasses.icon}
             height="18"
@@ -483,7 +483,7 @@ export default definePlugin({
         >
             <path className="shc-evenodd-fill-current-color" d="M17 11V7C17 4.243 14.756 2 12 2C9.242 2 7 4.243 7 7V11C5.897 11 5 11.896 5 13V20C5 21.103 5.897 22 7 22H17C18.103 22 19 21.103 19 20V13C19 11.896 18.103 11 17 11ZM12 18C11.172 18 10.5 17.328 10.5 16.5C10.5 15.672 11.172 15 12 15C12.828 15 13.5 15.672 13.5 16.5C13.5 17.328 12.828 18 12 18ZM15 11H9V7C9 5.346 10.346 4 12 4C13.654 4 15 5.346 15 7V11Z" />
         </svg>
-    ),
+    ), { noop: true }),
 
     HiddenChannelIcon: ErrorBoundary.wrap(() => (
         <Tooltip text="Hidden Channel">

src/plugins/spotifyControls/PlayerComponent.tsx

@@ -21,7 +21,6 @@ import "./spotifyStyles.css";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
 import { ImageIcon, LinkIcon, OpenExternalIcon } from "@components/Icons";
-import { Link } from "@components/Link";
 import { debounce } from "@utils/debounce";
 import { openImageModal } from "@utils/discord";
 import { classes, copyWithToast } from "@utils/misc";
@@ -254,6 +253,16 @@ function AlbumContextMenu({ track }: { track: Track; }) {
     );
 }
 
+function makeLinkProps(name: string, condition: unknown, path: string) {
+    if (!condition) return {};
+
+    return {
+        role: "link",
+        onClick: () => SpotifyStore.openExternal(path),
+        onContextMenu: makeContextMenu(name, path)
+    } satisfies React.HTMLAttributes<HTMLElement>;
+}
+
 function Info({ track }: { track: Track; }) {
     const img = track?.album?.image;
 
@@ -289,12 +298,8 @@ function Info({ track }: { track: Track; }) {
                     variant="text-sm/semibold"
                     id={cl("song-title")}
                     className={cl("ellipoverflow")}
-                    role={track.id ? "link" : undefined}
                     title={track.name}
-                    onClick={track.id ? () => {
+                    {...makeLinkProps("Song", track.id, `/track/${track.id}`)}
-                        SpotifyStore.openExternal(`/track/${track.id}`);
-                    } : void 0}
-                    onContextMenu={track.id ? makeContextMenu("Song", `/track/${track.id}`) : void 0}
                 >
                     {track.name}
                 </Forms.FormText>
@@ -303,16 +308,14 @@ function Info({ track }: { track: Track; }) {
                         by&nbsp;
                         {track.artists.map((a, i) => (
                             <React.Fragment key={a.name}>
-                                <Link
+                                <span
                                     className={cl("artist")}
-                                    disabled={!a.id}
-                                    href={`https://open.spotify.com/artist/${a.id}`}
                                     style={{ fontSize: "inherit" }}
                                     title={a.name}
-                                    onContextMenu={makeContextMenu("Artist", `/artist/${a.id}`)}
+                                    {...makeLinkProps("Artist", a.id, `/artist/${a.id}`)}
                                 >
                                     {a.name}
-                                </Link>
+                                </span>
                                 {i !== track.artists.length - 1 && <span className={cl("comma")}>{", "}</span>}
                             </React.Fragment>
                         ))}
@@ -321,17 +324,15 @@ function Info({ track }: { track: Track; }) {
                 {track.album.name && (
                     <Forms.FormText variant="text-sm/normal" className={cl("ellipoverflow")}>
                         on&nbsp;
-                        <Link id={cl("album-title")}
+                        <span
-                            href={`https://open.spotify.com/album/${track.album.id}`}
+                            id={cl("album-title")}
-                            target="_blank"
                             className={cl("album")}
-                            disabled={!track.album.id}
                             style={{ fontSize: "inherit" }}
                             title={track.album.name}
-                            onContextMenu={makeContextMenu("Album", `/album/${track.album.id}`)}
+                            {...makeLinkProps("Album", track.album.id, `/album/${track.album.id}`)}
                         >
                             {track.album.name}
-                        </Link>
+                        </span>
                     </Forms.FormText>
                 )}
             </div>

src/plugins/spotifyControls/spotifyStyles.css

@@ -131,8 +131,8 @@
     color: var(--header-secondary);
 }
 
-.vc-spotify-artist:hover,
+.vc-spotify-artist[role="link"]:hover,
-#vc-spotify-album-title:hover,
+#vc-spotify-album-title[role="link"]:hover,
 #vc-spotify-song-title[role="link"]:hover {
     text-decoration: underline;
     cursor: pointer;

src/plugins/translate/TranslationAccessory.tsx

@@ -44,6 +44,9 @@ export function TranslationAccessory({ message }: { message: Message; }) {
     const [translation, setTranslation] = useState<TranslationValue>();
 
     useEffect(() => {
+        // Ignore MessageLinkEmbeds messages
+        if ((message as any).vencordEmbeddedBy) return;
+
         TranslationSetters.set(message.id, setTranslation);
 
         return () => void TranslationSetters.delete(message.id);

src/plugins/translate/index.tsx

@@ -18,19 +18,39 @@
 
 import "./styles.css";
 
+import { addContextMenuPatch, findGroupChildrenByChildId, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
 import { addAccessory, removeAccessory } from "@api/MessageAccessories";
 import { addPreSendListener, removePreSendListener } from "@api/MessageEvents";
 import { addButton, removeButton } from "@api/MessagePopover";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
-import { ChannelStore } from "@webpack/common";
+import { ChannelStore, Menu } from "@webpack/common";
 
 import { settings } from "./settings";
 import { TranslateChatBarIcon, TranslateIcon } from "./TranslateIcon";
 import { handleTranslate, TranslationAccessory } from "./TranslationAccessory";
 import { translate } from "./utils";
 
+const messageCtxPatch: NavContextMenuPatchCallback = (children, { message }) => () => {
+    if (!message.content) return;
+
+    const group = findGroupChildrenByChildId("copy-text", children);
+    if (!group) return;
+
+    group.splice(group.findIndex(c => c?.props?.id === "copy-text") + 1, 0, (
+        <Menu.MenuItem
+            id="vc-trans"
+            label="Translate"
+            icon={TranslateIcon}
+            action={async () => {
+                const trans = await translate("received", message.content);
+                handleTranslate(message.id, trans);
+            }}
+        />
+    ));
+};
+
 export default definePlugin({
     name: "Translate",
     description: "Translate messages with Google Translate",
@@ -53,6 +73,8 @@ export default definePlugin({
     start() {
         addAccessory("vc-translation", props => <TranslationAccessory message={props.message} />);
 
+        addContextMenuPatch("message", messageCtxPatch);
+
         addButton("vc-translate", message => {
             if (!message.content) return null;
 
@@ -78,6 +100,7 @@ export default definePlugin({
 
     stop() {
         removePreSendListener(this.preSend);
+        removeContextMenuPatch("message", messageCtxPatch);
         removeButton("vc-translate");
         removeAccessory("vc-translation");
     },

src/utils/cloud.tsx

@@ -28,15 +28,39 @@ import { openModal } from "./modal";
 export const cloudLogger = new Logger("Cloud", "#39b7e0");
 export const getCloudUrl = () => new URL(Settings.cloud.url);
 
+const cloudUrlOrigin = () => getCloudUrl().origin;
+const getUserId = () => {
+    const id = UserStore.getCurrentUser()?.id;
+    if (!id) throw new Error("User not yet logged in");
+    return id;
+};
+
 export async function getAuthorization() {
     const secrets = await DataStore.get<Record<string, string>>("Vencord_cloudSecret") ?? {};
-    return secrets[getCloudUrl().origin];
+
+    const origin = cloudUrlOrigin();
+
+    // we need to migrate from the old format here
+    if (secrets[origin]) {
+        await DataStore.update<Record<string, string>>("Vencord_cloudSecret", secrets => {
+            secrets ??= {};
+            // use the current user ID
+            secrets[`${origin}:${getUserId()}`] = secrets[origin];
+            delete secrets[origin];
+            return secrets;
+        });
+
+        // since this doesn't update the original object, we'll early return the existing authorization
+        return secrets[origin];
+    }
+
+    return secrets[`${origin}:${getUserId()}`];
 }
 
 async function setAuthorization(secret: string) {
     await DataStore.update<Record<string, string>>("Vencord_cloudSecret", secrets => {
         secrets ??= {};
-        secrets[getCloudUrl().origin] = secret;
+        secrets[`${cloudUrlOrigin()}:${getUserId()}`] = secret;
         return secrets;
     });
 }
@@ -44,7 +68,7 @@ async function setAuthorization(secret: string) {
 export async function deauthorizeCloud() {
     await DataStore.update<Record<string, string>>("Vencord_cloudSecret", secrets => {
         secrets ??= {};
-        delete secrets[getCloudUrl().origin];
+        delete secrets[`${cloudUrlOrigin()}:${getUserId()}`];
         return secrets;
     });
 }
@@ -117,8 +141,7 @@ export async function authorizeCloud() {
 }
 
 export async function getCloudAuth() {
-    const userId = UserStore.getCurrentUser().id;
     const secret = await getAuthorization();
 
-    return window.btoa(`${secret}:${userId}`);
+    return window.btoa(`${secret}:${getUserId()}`);
 }

src/utils/lazy.ts

@@ -27,8 +27,8 @@ const unconfigurable = ["arguments", "caller", "prototype"];
 
 const handler: ProxyHandler<any> = {};
 
-const GET_KEY = Symbol.for("vencord.lazy.get");
+const kGET = Symbol.for("vencord.lazy.get");
-const CACHED_KEY = Symbol.for("vencord.lazy.cached");
+const kCACHE = Symbol.for("vencord.lazy.cached");
 
 for (const method of [
     "apply",
@@ -46,11 +46,11 @@ for (const method of [
     "setPrototypeOf"
 ]) {
     handler[method] =
-        (target: any, ...args: any[]) => Reflect[method](target[GET_KEY](), ...args);
+        (target: any, ...args: any[]) => Reflect[method](target[kGET](), ...args);
 }
 
 handler.ownKeys = target => {
-    const v = target[GET_KEY]();
+    const v = target[kGET]();
     const keys = Reflect.ownKeys(v);
     for (const key of unconfigurable) {
         if (!keys.includes(key)) keys.push(key);
@@ -62,7 +62,7 @@ handler.getOwnPropertyDescriptor = (target, p) => {
     if (typeof p === "string" && unconfigurable.includes(p))
         return Reflect.getOwnPropertyDescriptor(target, p);
 
-    const descriptor = Reflect.getOwnPropertyDescriptor(target[GET_KEY](), p);
+    const descriptor = Reflect.getOwnPropertyDescriptor(target[kGET](), p);
 
     if (descriptor) Object.defineProperty(target, p, descriptor);
     return descriptor;
@@ -72,15 +72,22 @@ handler.getOwnPropertyDescriptor = (target, p) => {
  * Wraps the result of {@see makeLazy} in a Proxy you can consume as if it wasn't lazy.
  * On first property access, the lazy is evaluated
  * @param factory lazy factory
+ * @param attempts how many times to try to evaluate the lazy before giving up
  * @returns Proxy
  *
  * Note that the example below exists already as an api, see {@link findByPropsLazy}
  * @example const mod = proxyLazy(() => findByProps("blah")); console.log(mod.blah);
  */
-export function proxyLazy<T>(factory: () => T): T {
+export function proxyLazy<T>(factory: () => T, attempts = 5): T {
-    const proxyDummy: { (): void;[CACHED_KEY]?: T;[GET_KEY](): T; } = Object.assign(function () { }, {
+    let tries = 0;
-        [CACHED_KEY]: void 0,
+    const proxyDummy = Object.assign(function () { }, {
-        [GET_KEY]: () => proxyDummy[CACHED_KEY] ??= factory(),
+        [kCACHE]: void 0 as T | undefined,
+        [kGET]() {
+            if (!proxyDummy[kCACHE] && attempts > tries++) {
+                proxyDummy[kCACHE] = factory();
+            }
+            return proxyDummy[kCACHE];
+        }
     });
 
     return new Proxy(proxyDummy, handler) as any;

src/utils/quickCss.ts

@@ -27,8 +27,12 @@ export async function toggle(isEnabled: boolean) {
         if (isEnabled) {
             style = document.createElement("style");
             style.id = "vencord-custom-css";
-            document.head.appendChild(style);
+            document.documentElement.appendChild(style);
-            VencordNative.quickCss.addChangeListener(css => style.textContent = css);
+            VencordNative.quickCss.addChangeListener(css => {
+                style.textContent = css;
+                // At the time of writing this, changing textContent resets the disabled state
+                style.disabled = !Settings.useQuickCss;
+            });
             style.textContent = await VencordNative.quickCss.get();
         }
     } else
@@ -39,7 +43,7 @@ async function initThemes() {
     if (!themesStyle) {
         themesStyle = document.createElement("style");
         themesStyle.id = "vencord-themes";
-        document.head.appendChild(themesStyle);
+        document.documentElement.appendChild(themesStyle);
     }
 
     const { themeLinks } = Settings;

src/utils/settingsSync.ts

@@ -41,10 +41,10 @@ export async function importSettings(data: string) {
         throw new Error("Invalid Settings. Is this even a Vencord Settings file?");
 }
 
-export async function exportSettings() {
+export async function exportSettings({ minify }: { minify?: boolean; } = {}) {
     const settings = JSON.parse(VencordNative.settings.get());
     const quickCss = await VencordNative.quickCss.get();
-    return JSON.stringify({ settings, quickCss }, null, 4);
+    return JSON.stringify({ settings, quickCss }, null, minify ? undefined : 4);
 }
 
 export async function downloadSettingsBackup() {
@@ -121,8 +121,8 @@ export async function uploadSettingsBackup(showToast = true): Promise<void> {
 // Cloud settings
 const cloudSettingsLogger = new Logger("Cloud:Settings", "#39b7e0");
 
-export async function putCloudSettings() {
+export async function putCloudSettings(manual?: boolean) {
-    const settings = await exportSettings();
+    const settings = await exportSettings({ minify: true });
 
     try {
         const res = await fetch(new URL("/v1/settings", getCloudUrl()), {
@@ -149,6 +149,14 @@ export async function putCloudSettings() {
         VencordNative.settings.set(JSON.stringify(PlainSettings, null, 4));
 
         cloudSettingsLogger.info("Settings uploaded to cloud successfully");
+
+        if (manual) {
+            showNotification({
+                title: "Cloud Settings",
+                body: "Synchronized settings to the cloud!",
+                noPersist: true,
+            });
+        }
     } catch (e: any) {
         cloudSettingsLogger.error("Failed to sync up", e);
         showNotification({