bump to v1.4.2

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

.github/ISSUE_TEMPLATE/blank.yml

@@ -1,22 +0,0 @@
-name: Blank Template
-description: Use this only if your issue does not fit into another template. **DO NOT ASK FOR SUPPORT OR REQUEST PLUGINS**
-labels: []
-
-body:
-  - type: textarea
-    id: info-sec
-    attributes:
-      label: Tell us all about it.
-      description: Go nuts, let us know what you're wanting to bring attention to.
-      placeholder: ...
-    validations:
-      required: true
-
-  - type: checkboxes
-    id: agreement-check
-    attributes:
-      label: Request Agreement
-      description: DO NOT USE THIS TEMPLATE FOR SUPPORT OR PLUGIN REQUESTS!!! For Support, **join our Discord**. For plugin requests, **use discussions**
-      options:
-        - label: This is not a support or plugin request
-          required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -1,4 +1,4 @@
-blank_issues_enabled: false
+blank_issues_enabled: true
 contact_links:
   - name: Vencord Support Server
     url: https://discord.gg/D9uwnFnqmd

README.md

@@ -51,6 +51,16 @@ As an alternative to the Discord Desktop app, Vencord also has its own standalon
 
 https://discord.gg/D9uwnFnqmd
 
+## Star History
+
+<a href="https://star-history.com/#Vendicated/Vencord&Timeline">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=Vendicated/Vencord&type=Timeline&theme=dark" />
+    <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=Vendicated/Vencord&type=Timeline" />
+    <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=Vendicated/Vencord&type=Timeline" />
+  </picture>
+</a>
+
 ## Disclaimer
 
 Discord is trademark of Discord Inc. and solely mentioned for the sake of descriptivity.

browser/VencordNativeStub.ts

@@ -23,6 +23,7 @@ import monacoHtml from "~fileContent/../src/components/monacoWin.html";
 import * as DataStore from "../src/api/DataStore";
 import { debounce } from "../src/utils";
 import { getTheme, Theme } from "../src/utils/discord";
+import { getThemeInfo } from "../src/main/themes";
 
 // Discord deletes this so need to store in variable
 const { localStorage } = window;
@@ -34,8 +35,20 @@ const NOOP_ASYNC = async () => { };
 
 const setCssDebounced = debounce((css: string) => VencordNative.quickCss.set(css));
 
+const themeStore = DataStore.createStore("VencordThemes", "VencordThemeData");
+
 // probably should make this less cursed at some point
 window.VencordNative = {
+    themes: {
+        uploadTheme: (fileName: string, fileData: string) => DataStore.set(fileName, fileData, themeStore),
+        deleteTheme: (fileName: string) => DataStore.del(fileName, themeStore),
+        getThemesDir: async () => "",
+        getThemesList: () => DataStore.entries(themeStore).then(entries =>
+            entries.map(([name, css]) => getThemeInfo(css, name.toString()))
+        ),
+        getThemeData: (fileName: string) => DataStore.get(fileName, themeStore)
+    },
+
     native: {
         getVersions: () => ({}),
         openExternal: async (url) => void open(url, "_blank")
@@ -57,6 +70,7 @@ window.VencordNative = {
         addChangeListener(cb) {
             cssListeners.add(cb);
         },
+        addThemeChangeListener: NOOP,
         openFile: NOOP_ASYNC,
         async openEditor() {
             const features = `popup,width=${Math.min(window.innerWidth, 1000)},height=${Math.min(window.innerHeight, 1000)}`;
@@ -81,5 +95,7 @@ window.VencordNative = {
         get: () => localStorage.getItem("VencordSettings") || "{}",
         set: async (s: string) => localStorage.setItem("VencordSettings", s),
         getSettingsDir: async () => "LocalStorage"
-    }
+    },
+
+    pluginHelpers: {} as any,
 };

docs/1_INSTALLING.md

@@ -1,5 +1,6 @@
-> **Warning**
+> [!WARNING]  
 > These instructions are only for advanced users. If you're not a Developer, you should use our [graphical installer](https://github.com/Vendicated/VencordInstaller#usage) instead.  
+> No support will be provided for installing in this fashion. If you cannot figure it out, you should just stick to a regular install.  
 
 # Installation Guide
 

package.json

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

scripts/generatePluginList.ts

@@ -151,7 +151,6 @@ async function parseFile(fileName: string) {
                 case "required":
                 case "enabledByDefault":
                     data[key] = value.kind === SyntaxKind.TrueKeyword;
-                    if (!data[key] && value.kind !== SyntaxKind.FalseKeyword) throw fail(`${key} is not a boolean literal`);
                     break;
             }
         }

src/Vencord.ts

@@ -27,6 +27,7 @@ export { PlainSettings, Settings };
 import "./utils/quickCss";
 import "./webpack/patchWebpack";
 
+import { get as dsGet } from "./api/DataStore";
 import { showNotification } from "./api/Notifications";
 import { PlainSettings, Settings } from "./api/Settings";
 import { patches, PMLogger, startAllPlugins } from "./plugins";
@@ -38,6 +39,22 @@ import { onceReady } from "./webpack";
 import { SettingsRouter } from "./webpack/common";
 
 async function syncSettings() {
+    // pre-check for local shared settings
+    if (
+        Settings.cloud.authenticated &&
+        await dsGet("Vencord_cloudSecret") === null // this has been enabled due to local settings share or some other bug
+    ) {
+        // show a notification letting them know and tell them how to fix it
+        showNotification({
+            title: "Cloud Integrations",
+            body: "We've noticed you have cloud integrations enabled in another client! Due to limitations, you will " +
+                "need to re-authenticate to continue using them. Click here to go to the settings page to do so!",
+            color: "var(--yellow-360)",
+            onClick: () => SettingsRouter.open("VencordCloud")
+        });
+        return;
+    }
+
     if (
         Settings.cloud.settingsSync && // if it's enabled
         Settings.cloud.authenticated // if cloud integrations are enabled

src/VencordNative.ts

@@ -19,6 +19,7 @@
 import { IpcEvents } from "@utils/IpcEvents";
 import { IpcRes } from "@utils/types";
 import { ipcRenderer } from "electron";
+import type { UserThemeHeader } from "main/themes";
 
 function invoke<T = any>(event: IpcEvents, ...args: any[]) {
     return ipcRenderer.invoke(event, ...args) as Promise<T>;
@@ -29,6 +30,14 @@ export function sendSync<T = any>(event: IpcEvents, ...args: any[]) {
 }
 
 export default {
+    themes: {
+        uploadTheme: (fileName: string, fileData: string) => invoke<void>(IpcEvents.UPLOAD_THEME, fileName, fileData),
+        deleteTheme: (fileName: string) => invoke<void>(IpcEvents.DELETE_THEME, fileName),
+        getThemesDir: () => invoke<string>(IpcEvents.GET_THEMES_DIR),
+        getThemesList: () => invoke<Array<UserThemeHeader>>(IpcEvents.GET_THEMES_LIST),
+        getThemeData: (fileName: string) => invoke<string | undefined>(IpcEvents.GET_THEME_DATA, fileName)
+    },
+
     updater: {
         getUpdates: () => invoke<IpcRes<Record<"hash" | "author" | "message", string>[]>>(IpcEvents.GET_UPDATES),
         update: () => invoke<IpcRes<boolean>>(IpcEvents.UPDATE),
@@ -50,6 +59,10 @@ export default {
             ipcRenderer.on(IpcEvents.QUICK_CSS_UPDATE, (_, css) => cb(css));
         },
 
+        addThemeChangeListener(cb: () => void) {
+            ipcRenderer.on(IpcEvents.THEME_UPDATE, cb);
+        },
+
         openFile: () => invoke<void>(IpcEvents.OPEN_QUICKCSS),
         openEditor: () => invoke<void>(IpcEvents.OPEN_MONACO_EDITOR),
     },
@@ -58,4 +71,13 @@ export default {
         getVersions: () => process.versions as Partial<NodeJS.ProcessVersions>,
         openExternal: (url: string) => invoke<void>(IpcEvents.OPEN_EXTERNAL, url)
     },
+
+    pluginHelpers: {
+        OpenInApp: {
+            resolveRedirect: (url: string) => invoke<string>(IpcEvents.OPEN_IN_APP__RESOLVE_REDIRECT, url),
+        },
+        VoiceMessages: {
+            readRecording: (path: string) => invoke<Uint8Array | null>(IpcEvents.VOICE_MESSAGES_READ_RECORDING, path),
+        }
+    }
 };

src/api/Settings.ts

@@ -34,6 +34,7 @@ export interface Settings {
     useQuickCss: boolean;
     enableReactDevtools: boolean;
     themeLinks: string[];
+    enabledThemes: string[];
     frameless: boolean;
     transparent: boolean;
     winCtrlQ: boolean;
@@ -68,6 +69,7 @@ const DefaultSettings: Settings = {
     autoUpdateNotification: true,
     useQuickCss: true,
     themeLinks: [],
+    enabledThemes: [],
     enableReactDevtools: false,
     frameless: false,
     transparent: false,
@@ -107,7 +109,7 @@ const saveSettingsOnFrequentAction = debounce(async () => {
     }
 }, 60_000);
 
-type SubscriptionCallback = ((newValue: any, path: string) => void) & { _path?: string; };
+type SubscriptionCallback = ((newValue: any, path: string) => void) & { _paths?: Array<string>; };
 const subscriptions = new Set<SubscriptionCallback>();
 
 const proxyCache = {} as Record<string, any>;
@@ -164,7 +166,7 @@ function makeProxy(settings: any, root = settings, path = ""): Settings {
             const setPath = `${path}${path && "."}${p}`;
             delete proxyCache[setPath];
             for (const subscription of subscriptions) {
-                if (!subscription._path || subscription._path === setPath) {
+                if (!subscription._paths || subscription._paths.includes(setPath)) {
                     subscription(v, setPath);
                 }
             }
@@ -235,7 +237,7 @@ type ResolvePropDeep<T, P> = P extends "" ? T :
 export function addSettingsListener<Path extends keyof Settings>(path: Path, onUpdate: (newValue: Settings[Path], path: Path) => void): void;
 export function addSettingsListener<Path extends string>(path: Path, onUpdate: (newValue: Path extends "" ? any : ResolvePropDeep<Settings, Path>, path: Path extends "" ? string : Path) => void): void;
 export function addSettingsListener(path: string, onUpdate: (newValue: any, path: string) => void) {
-    (onUpdate as SubscriptionCallback)._path = path;
+    ((onUpdate as SubscriptionCallback)._paths ??= []).push(path);
     subscriptions.add(onUpdate);
 }
 

src/api/Styles.ts

@@ -141,7 +141,7 @@ export const compileStyle = (style: Style) => {
  */
 export const classNameToSelector = (name: string, prefix = "") => name.split(" ").map(n => `.${prefix}${n}`).join("");
 
-type ClassNameFactoryArg = string | string[] | Record<string, unknown>;
+type ClassNameFactoryArg = string | string[] | Record<string, unknown> | false | null | undefined | 0 | "";
 /**
  * @param prefix The prefix to add to each class, defaults to `""`
  * @returns A classname generator function
@@ -154,9 +154,9 @@ type ClassNameFactoryArg = string | string[] | Record<string, unknown>;
 export const classNameFactory = (prefix: string = "") => (...args: ClassNameFactoryArg[]) => {
     const classNames = new Set<string>();
     for (const arg of args) {
-        if (typeof arg === "string") classNames.add(arg);
+        if (arg && typeof arg === "string") classNames.add(arg);
         else if (Array.isArray(arg)) arg.forEach(name => classNames.add(name));
-        else if (typeof arg === "object") Object.entries(arg).forEach(([name, value]) => value && classNames.add(name));
+        else if (arg && typeof arg === "object") Object.entries(arg).forEach(([name, value]) => value && classNames.add(name));
     }
     return Array.from(classNames, name => prefix + name).join(" ");
 };

src/components/Icons.tsx

@@ -190,3 +190,16 @@ export function ImageInvisible(props: IconProps) {
         </Icon>
     );
 }
+
+export function Microphone(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            className={classes(props.className, "vc-microphone")}
+            viewBox="0 0 24 24"
+        >
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.99 11C14.99 12.66 13.66 14 12 14C10.34 14 9 12.66 9 11V5C9 3.34 10.34 2 12 2C13.66 2 15 3.34 15 5L14.99 11ZM12 16.1C14.76 16.1 17.3 14 17.3 11H19C19 14.42 16.28 17.24 13 17.72V21H11V17.72C7.72 17.23 5 14.41 5 11H6.7C6.7 14 9.24 16.1 12 16.1ZM12 4C11.2 4 11 4.66667 11 5V11C11 11.3333 11.2 12 12 12C12.8 12 13 11.3333 13 11V5C13 4.66667 12.8 4 12 4Z" fill="currentColor" />
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.99 11C14.99 12.66 13.66 14 12 14C10.34 14 9 12.66 9 11V5C9 3.34 10.34 2 12 2C13.66 2 15 3.34 15 5L14.99 11ZM12 16.1C14.76 16.1 17.3 14 17.3 11H19C19 14.42 16.28 17.24 13 17.72V22H11V17.72C7.72 17.23 5 14.41 5 11H6.7C6.7 14 9.24 16.1 12 16.1Z" fill="currentColor" />
+        </Icon >
+    );
+}

src/components/PluginSettings/PluginModal.tsx

@@ -226,7 +226,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                         </Forms.FormSection>
                     </div>
                 )}
-                <Forms.FormSection>
+                <Forms.FormSection className={Margins.bottom16}>
                     <Forms.FormTitle tag="h3">Settings</Forms.FormTitle>
                     {renderSettings()}
                 </Forms.FormSection>

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/PluginSettings/index.tsx

@@ -22,10 +22,8 @@ import * as DataStore from "@api/DataStore";
 import { showNotice } from "@api/Notices";
 import { Settings, useSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
-import { Flex } from "@components/Flex";
-import { Badge } from "@components/PluginSettings/components";
 import PluginModal from "@components/PluginSettings/PluginModal";
-import { Switch } from "@components/Switch";
+import { AddonCard } from "@components/VencordSettings/AddonCard";
 import { SettingsTab } from "@components/VencordSettings/shared";
 import { ChangeList } from "@utils/ChangeList";
 import { Logger } from "@utils/Logger";
@@ -152,31 +150,31 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
     }
 
     return (
-        <Flex className={cl("card", { "card-disabled": disabled })} flexDirection="column" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+        <AddonCard
-            <div className={cl("card-header")}>
+            name={plugin.name}
-                <Text variant="text-md/bold" className={cl("name")}>
+            description={plugin.description}
-                    {plugin.name}{isNew && <Badge text="NEW" color="#ED4245" />}
+            isNew={isNew}
-                </Text>
+            enabled={isEnabled()}
+            setEnabled={toggleEnabled}
+            disabled={disabled}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+            infoButton={
                 <button role="switch" onClick={() => openModal()} className={classes(ButtonClasses.button, cl("info-button"))}>
                     {plugin.options
                         ? <CogWheel />
                         : <InfoIcon width="24" height="24" />}
                 </button>
-                <Switch
+            }
-                    checked={isEnabled()}
-                    onChange={toggleEnabled}
-                    disabled={disabled}
         />
-            </div>
-            <Text className={cl("note")} variant="text-sm/normal">{plugin.description}</Text>
-        </Flex >
     );
 }
 
 const enum SearchStatus {
     ALL,
     ENABLED,
-    DISABLED
+    DISABLED,
+    NEW
 }
 
 export default function PluginSettings() {
@@ -229,6 +227,7 @@ export default function PluginSettings() {
         const enabled = settings.plugins[plugin.name]?.enabled;
         if (enabled && searchValue.status === SearchStatus.DISABLED) return false;
         if (!enabled && searchValue.status === SearchStatus.ENABLED) return false;
+        if (searchValue.status === SearchStatus.NEW && !newPlugins?.includes(plugin.name)) return false;
         if (!searchValue.value.length) return true;
 
         const v = searchValue.value.toLowerCase();
@@ -321,7 +320,8 @@ export default function PluginSettings() {
                         options={[
                             { label: "Show All", value: SearchStatus.ALL, default: true },
                             { label: "Show Enabled", value: SearchStatus.ENABLED },
-                            { label: "Show Disabled", value: SearchStatus.DISABLED }
+                            { label: "Show Disabled", value: SearchStatus.DISABLED },
+                            { label: "Show New", value: SearchStatus.NEW }
                         ]}
                         serialize={String}
                         select={onStatusChange}

src/components/PluginSettings/styles.css

@@ -23,38 +23,6 @@
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 }
 
-.vc-plugins-card {
-    background-color: var(--background-secondary-alt);
-    color: var(--interactive-active);
-    border-radius: 8px;
-    display: block;
-    height: 100%;
-    padding: 12px;
-    width: 100%;
-    transition: 0.1s ease-out;
-    transition-property: box-shadow, transform, background, opacity;
-}
-
-.vc-plugins-card-disabled {
-    opacity: 0.6;
-}
-
-.vc-plugins-card:hover {
-    background-color: var(--background-tertiary);
-    transform: translateY(-1px);
-    box-shadow: var(--elevation-high);
-}
-
-.vc-plugins-card-header {
-    margin-top: auto;
-    display: flex;
-    width: 100%;
-    justify-content: flex-end;
-    height: 1.5rem;
-    align-items: center;
-    gap: 8px;
-}
-
 .vc-plugins-info-button {
     height: 24px;
     width: 24px;
@@ -86,27 +54,6 @@
     text-align: center;
 }
 
-.vc-plugins-note {
-    height: 36px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
-    /* stylelint-disable-next-line property-no-unknown */
-    box-orient: vertical;
-}
-
-.vc-plugins-name {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    flex-grow: 1;
-    gap: 8px;
-    cursor: "default";
-}
-
 .vc-plugins-dep-name {
     margin: 0 auto;
 }

src/components/VencordSettings/AddonCard.tsx

@@ -0,0 +1,77 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import "./addonCard.css";
+
+import { classNameFactory } from "@api/Styles";
+import { Badge } from "@components/Badge";
+import { Switch } from "@components/Switch";
+import { Text } from "@webpack/common";
+import type { MouseEventHandler, ReactNode } from "react";
+
+const cl = classNameFactory("vc-addon-");
+
+interface Props {
+    name: ReactNode;
+    description: ReactNode;
+    enabled: boolean;
+    setEnabled: (enabled: boolean) => void;
+    disabled?: boolean;
+    isNew?: boolean;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+
+    infoButton?: ReactNode;
+    footer?: ReactNode;
+    author?: ReactNode;
+}
+
+export function AddonCard({ disabled, isNew, name, infoButton, footer, author, enabled, setEnabled, description, onMouseEnter, onMouseLeave }: Props) {
+    return (
+        <div
+            className={cl("card", { "card-disabled": disabled })}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+        >
+            <div className={cl("header")}>
+                <div className={cl("name-author")}>
+                    <Text variant="text-md/bold" className={cl("name")}>
+                        {name}{isNew && <Badge text="NEW" color="#ED4245" />}
+                    </Text>
+                    {!!author && (
+                        <Text variant="text-md/normal" className={cl("author")}>
+                            {author}
+                        </Text>
+                    )}
+                </div>
+
+                {infoButton}
+
+                <Switch
+                    checked={enabled}
+                    onChange={setEnabled}
+                    disabled={disabled}
+                />
+            </div>
+
+            <Text className={cl("note")} variant="text-sm/normal">{description}</Text>
+
+            {footer}
+        </div>
+    );
+}

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/components/VencordSettings/ThemesTab.tsx

@@ -17,16 +17,35 @@
 */
 
 import { useSettings } from "@api/Settings";
+import { classNameFactory } from "@api/Styles";
+import { Flex } from "@components/Flex";
 import { Link } from "@components/Link";
 import { Margins } from "@utils/margins";
+import { classes } from "@utils/misc";
+import { showItemInFolder } from "@utils/native";
 import { useAwaiter } from "@utils/react";
-import { findLazy } from "@webpack";
+import { findByCodeLazy, findByPropsLazy, findLazy } from "@webpack";
-import { Card, Forms, React, TextArea } from "@webpack/common";
+import { Button, Card, FluxDispatcher, Forms, React, showToast, TabBar, TextArea, useEffect, useRef, useState } from "@webpack/common";
+import { UserThemeHeader } from "main/themes";
+import type { ComponentType, Ref, SyntheticEvent } from "react";
 
+import { AddonCard } from "./AddonCard";
 import { SettingsTab, wrapTab } from "./shared";
 
+type FileInput = ComponentType<{
+    ref: Ref<HTMLInputElement>;
+    onChange: (e: SyntheticEvent<HTMLInputElement>) => void;
+    multiple?: boolean;
+    filters?: { name?: string; extensions: string[]; }[];
+}>;
+
+const InviteActions = findByPropsLazy("resolveInvite");
+const TrashIcon = findByCodeLazy("M5 6.99902V18.999C5 20.101 5.897 20.999");
+const FileInput: FileInput = findByCodeLazy("activateUploadDialogue=");
 const TextAreaProps = findLazy(m => typeof m.textarea === "string");
 
+const cl = classNameFactory("vc-settings-theme-");
+
 function Validator({ link }: { link: string; }) {
     const [res, err, pending] = useAwaiter(() => fetch(link).then(res => {
         if (res.status > 300) throw `${res.status} ${res.statusText}`;
@@ -75,10 +94,191 @@ function Validators({ themeLinks }: { themeLinks: string[]; }) {
     );
 }
 
-function ThemesTab() {
+interface ThemeCardProps {
-    const settings = useSettings(["themeLinks"]);
+    theme: UserThemeHeader;
-    const [themeText, setThemeText] = React.useState(settings.themeLinks.join("\n"));
+    enabled: boolean;
+    onChange: (enabled: boolean) => void;
+    onDelete: () => void;
+}
 
+function ThemeCard({ theme, enabled, onChange, onDelete }: ThemeCardProps) {
+    return (
+        <AddonCard
+            name={theme.name}
+            description={theme.description}
+            author={theme.author}
+            enabled={enabled}
+            setEnabled={onChange}
+            infoButton={
+                IS_WEB && (
+                    <div style={{ cursor: "pointer", color: "var(--status-danger" }} onClick={onDelete}>
+                        <TrashIcon />
+                    </div>
+                )
+            }
+            footer={
+                <Flex flexDirection="row" style={{ gap: "0.2em" }}>
+                    {!!theme.website && <Link href={theme.website}>Website</Link>}
+                    {!!(theme.website && theme.invite) && " • "}
+                    {!!theme.invite && (
+                        <Link
+                            href={`https://discord.gg/${theme.invite}`}
+                            onClick={async e => {
+                                e.preventDefault();
+                                const { invite } = await InviteActions.resolveInvite(theme.invite, "Desktop Modal");
+                                if (!invite) return showToast("Invalid or expired invite");
+
+                                FluxDispatcher.dispatch({
+                                    type: "INVITE_MODAL_OPEN",
+                                    invite,
+                                    code: theme.invite,
+                                    context: "APP"
+                                });
+                            }}
+                        >
+                            Discord Server
+                        </Link>
+                    )}
+                </Flex>
+            }
+        />
+    );
+}
+
+enum ThemeTab {
+    LOCAL,
+    ONLINE
+}
+
+function ThemesTab() {
+    const settings = useSettings(["themeLinks", "enabledThemes"]);
+
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const [currentTab, setCurrentTab] = useState(ThemeTab.LOCAL);
+    const [themeText, setThemeText] = useState(settings.themeLinks.join("\n"));
+    const [userThemes, setUserThemes] = useState<UserThemeHeader[] | null>(null);
+    const [themeDir, , themeDirPending] = useAwaiter(VencordNative.themes.getThemesDir);
+
+    useEffect(() => {
+        refreshLocalThemes();
+    }, []);
+
+    async function refreshLocalThemes() {
+        const themes = await VencordNative.themes.getThemesList();
+        setUserThemes(themes);
+    }
+
+    // When a local theme is enabled/disabled, update the settings
+    function onLocalThemeChange(fileName: string, value: boolean) {
+        if (value) {
+            if (settings.enabledThemes.includes(fileName)) return;
+            settings.enabledThemes = [...settings.enabledThemes, fileName];
+        } else {
+            settings.enabledThemes = settings.enabledThemes.filter(f => f !== fileName);
+        }
+    }
+
+    async function onFileUpload(e: SyntheticEvent<HTMLInputElement>) {
+        e.stopPropagation();
+        e.preventDefault();
+        if (!e.currentTarget?.files?.length) return;
+        const { files } = e.currentTarget;
+
+        const uploads = Array.from(files, file => {
+            const { name } = file;
+            if (!name.endsWith(".css")) return;
+
+            return new Promise<void>((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onload = () => {
+                    VencordNative.themes.uploadTheme(name, reader.result as string)
+                        .then(resolve)
+                        .catch(reject);
+                };
+                reader.readAsText(file);
+            });
+        });
+
+        await Promise.all(uploads);
+        refreshLocalThemes();
+    }
+
+    function renderLocalThemes() {
+        return (
+            <>
+                <Card className="vc-settings-card">
+                    <Forms.FormTitle tag="h5">Find Themes:</Forms.FormTitle>
+                    <div style={{ marginBottom: ".5em", display: "flex", flexDirection: "column" }}>
+                        <Link style={{ marginRight: ".5em" }} href="https://betterdiscord.app/themes">
+                            BetterDiscord Themes
+                        </Link>
+                        <Link href="https://github.com/search?q=discord+theme">GitHub</Link>
+                    </div>
+                    <Forms.FormText>If using the BD site, click on "Download" and place the downloaded .theme.css file into your themes folder.</Forms.FormText>
+                </Card>
+
+                <Forms.FormSection title="Local Themes">
+                    <Card className="vc-settings-quick-actions-card">
+                        <>
+                            {IS_WEB ?
+                                (
+                                    <Button
+                                        size={Button.Sizes.SMALL}
+                                        disabled={themeDirPending}
+                                    >
+                                        Upload Theme
+                                        <FileInput
+                                            ref={fileInputRef}
+                                            onChange={onFileUpload}
+                                            multiple={true}
+                                            filters={[{ extensions: ["*.css"] }]}
+                                        />
+                                    </Button>
+                                ) : (
+                                    <Button
+                                        onClick={() => showItemInFolder(themeDir!)}
+                                        size={Button.Sizes.SMALL}
+                                        disabled={themeDirPending}
+                                    >
+                                        Open Themes Folder
+                                    </Button>
+                                )}
+                            <Button
+                                onClick={refreshLocalThemes}
+                                size={Button.Sizes.SMALL}
+                            >
+                                Load missing Themes
+                            </Button>
+                            <Button
+                                onClick={() => VencordNative.quickCss.openEditor()}
+                                size={Button.Sizes.SMALL}
+                            >
+                                Edit QuickCSS
+                            </Button>
+                        </>
+                    </Card>
+
+                    <div className={cl("grid")}>
+                        {userThemes?.map(theme => (
+                            <ThemeCard
+                                key={theme.fileName}
+                                enabled={settings.enabledThemes.includes(theme.fileName)}
+                                onChange={enabled => onLocalThemeChange(theme.fileName, enabled)}
+                                onDelete={async () => {
+                                    onLocalThemeChange(theme.fileName, false);
+                                    await VencordNative.themes.deleteTheme(theme.fileName);
+                                    refreshLocalThemes();
+                                }}
+                                theme={theme}
+                            />
+                        ))}
+                    </div>
+                </Forms.FormSection>
+            </>
+        );
+    }
+
+    // When the user leaves the online theme textbox, update the settings
     function onBlur() {
         settings.themeLinks = [...new Set(
             themeText
@@ -89,42 +289,56 @@ function ThemesTab() {
         )];
     }
 
+    function renderOnlineThemes() {
         return (
-        <SettingsTab title="Themes">
+            <>
                 <Card className="vc-settings-card vc-text-selectable">
-                <Forms.FormTitle tag="h5">Paste links to .theme.css files here</Forms.FormTitle>
+                    <Forms.FormTitle tag="h5">Paste links to css files here</Forms.FormTitle>
                     <Forms.FormText>One link per line</Forms.FormText>
-                <Forms.FormText><strong>Make sure to use the raw links or github.io links!</strong></Forms.FormText>
+                    <Forms.FormText>Make sure to use direct links to files (raw or github.io)!</Forms.FormText>
-                <Forms.FormDivider className={Margins.top8 + " " + Margins.bottom8} />
-                <Forms.FormTitle tag="h5">Find Themes:</Forms.FormTitle>
-                <div style={{ marginBottom: ".5em" }}>
-                    <Link style={{ marginRight: ".5em" }} href="https://betterdiscord.app/themes">
-                        BetterDiscord Themes
-                    </Link>
-                    <Link href="https://github.com/search?q=discord+theme">GitHub</Link>
-                </div>
-                <Forms.FormText>If using the BD site, click on "Source" somewhere below the Download button</Forms.FormText>
-                <Forms.FormText>In the GitHub repository of your theme, find X.theme.css, click on it, then click the "Raw" button</Forms.FormText>
-                <Forms.FormText>
-                    If the theme has configuration that requires you to edit the file:
-                    <ul>
-                        <li>• Make a <Link href="https://github.com/signup">GitHub</Link> account</li>
-                        <li>• Click the fork button on the top right</li>
-                        <li>• Edit the file</li>
-                        <li>• Use the link to your own repository instead</li>
-                    </ul>
-                </Forms.FormText>
                 </Card>
-            <Forms.FormTitle tag="h5">Themes</Forms.FormTitle>
+
+                <Forms.FormSection title="Online Themes" tag="h5">
                     <TextArea
                         value={themeText}
                         onChange={setThemeText}
-                className={`${TextAreaProps.textarea} vc-settings-theme-links`}
+                        className={classes(TextAreaProps.textarea, "vc-settings-theme-links")}
                         placeholder="Theme Links"
                         spellCheck={false}
                         onBlur={onBlur}
+                        rows={10}
                     />
                     <Validators themeLinks={settings.themeLinks} />
+                </Forms.FormSection>
+            </>
+        );
+    }
+
+    return (
+        <SettingsTab title="Themes">
+            <TabBar
+                type="top"
+                look="brand"
+                className="vc-settings-tab-bar"
+                selectedItem={currentTab}
+                onItemSelect={setCurrentTab}
+            >
+                <TabBar.Item
+                    className="vc-settings-tab-bar-item"
+                    id={ThemeTab.LOCAL}
+                >
+                    Local Themes
+                </TabBar.Item>
+                <TabBar.Item
+                    className="vc-settings-tab-bar-item"
+                    id={ThemeTab.ONLINE}
+                >
+                    Online Themes
+                </TabBar.Item>
+            </TabBar>
+
+            {currentTab === ThemeTab.LOCAL && renderLocalThemes()}
+            {currentTab === ThemeTab.ONLINE && renderOnlineThemes()}
         </SettingsTab>
     );
 }

src/components/VencordSettings/addonCard.css

@@ -0,0 +1,63 @@
+.vc-addon-card {
+    background-color: var(--background-secondary-alt);
+    color: var(--interactive-active);
+    border-radius: 8px;
+    display: block;
+    height: 100%;
+    padding: 12px;
+    width: 100%;
+    transition: 0.1s ease-out;
+    transition-property: box-shadow, transform, background, opacity;
+}
+
+.vc-addon-card-disabled {
+    opacity: 0.6;
+}
+
+.vc-addon-card:hover {
+    background-color: var(--background-tertiary);
+    transform: translateY(-1px);
+    box-shadow: var(--elevation-high);
+}
+
+.vc-addon-header {
+    margin-top: auto;
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 0.5em;
+}
+
+.vc-addon-note {
+    height: 36px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    /* stylelint-disable-next-line property-no-unknown */
+    box-orient: vertical;
+}
+
+.vc-addon-name-author {
+    width: 100%;
+}
+
+.vc-addon-name {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    flex-grow: 1;
+    gap: 8px;
+}
+
+.vc-addon-author {
+    font-size: 0.8em;
+}
+
+.vc-addon-author::before {
+    content: "by ";
+}

src/components/VencordSettings/settingsStyles.css

@@ -1,6 +1,6 @@
 .vc-settings-tab-bar {
     margin-top: 20px;
-    margin-bottom: -2px;
+    margin-bottom: 10px;
     border-bottom: 2px solid var(--background-modifier-accent);
 }
 
@@ -43,6 +43,7 @@
     color: var(--text-normal) !important;
     padding: 0.5em;
     border: 1px solid var(--background-modifier-accent);
+    max-height: unset;
 }
 
 .vc-cloud-settings-sync-grid {

src/components/VencordSettings/shared.tsx

@@ -17,6 +17,7 @@
 */
 
 import "./settingsStyles.css";
+import "./themesStyles.css";
 
 import ErrorBoundary from "@components/ErrorBoundary";
 import { handleComponentFailed } from "@components/handleComponentFailed";

src/components/VencordSettings/themesStyles.css

@@ -0,0 +1,29 @@
+.vc-settings-theme-grid {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+}
+
+.vc-settings-theme-card {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--background-secondary-alt);
+    color: var(--interactive-active);
+    border-radius: 8px;
+    padding: 1em;
+    width: 100%;
+    transition: 0.1s ease-out;
+    transition-property: box-shadow, transform, background, opacity;
+}
+
+.vc-settings-theme-card-text {
+    text-overflow: ellipsis;
+    height: 1.2em;
+    margin-bottom: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.vc-settings-theme-author::before {
+    content: "by ";
+}

src/components/monacoWin.html

@@ -5,8 +5,8 @@
         <title>Vencord QuickCSS Editor</title>
         <link
             rel="stylesheet"
-            href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.37.1/min/vs/editor/editor.main.min.css"
+            href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.40.0/min/vs/editor/editor.main.min.css"
-            integrity="sha512-wB3xfL98hWg1bpkVYSyL0js/Jx9s7FsDg9aYO6nOMSJTgPuk/PFqxXQJKKSUjteZjeYrfgo9NFBOA1r9HwDuZw=="
+            integrity="sha512-MOoQ02h80hklccfLrXFYkCzG+WVjORflOp9Zp8dltiaRP+35LYnO4LKOklR64oMGfGgJDLO8WJpkM1o5gZXYZQ=="
             crossorigin="anonymous"
             referrerpolicy="no-referrer"
         />
@@ -29,8 +29,8 @@
     <body>
         <div id="container"></div>
         <script
-            src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.37.1/min/vs/loader.min.js"
+            src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.40.0/min/vs/loader.min.js"
-            integrity="sha512-A+6SvPGkIN9Rf0mUXmW4xh7rDvALXf/f0VtOUiHlDUSPknu2kcfz1KzLpOJyL2pO+nZS13hhIjLqVgiQExLJrw=="
+            integrity="sha512-QzMpXeCPciAHP4wbYlV2PYgrQcaEkDQUjzkPU4xnjyVSD9T36/udamxtNBqb4qK4/bMQMPZ8ayrBe9hrGdBFjQ=="
             crossorigin="anonymous"
             referrerpolicy="no-referrer"
         ></script>
@@ -38,7 +38,7 @@
         <script>
             require.config({
                 paths: {
-                    vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.37.1/min/vs",
+                    vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.40.0/min/vs",
                 },
             });
 

src/main/index.ts

@@ -19,8 +19,8 @@
 import { app, protocol, session } from "electron";
 import { join } from "path";
 
-import { getSettings } from "./ipcMain";
+import { ensureSafePath, getSettings } from "./ipcMain";
-import { IS_VANILLA } from "./utils/constants";
+import { IS_VANILLA, THEMES_DIR } from "./utils/constants";
 import { installExt } from "./utils/extensions";
 
 if (IS_VENCORD_DESKTOP || !IS_VANILLA) {
@@ -30,6 +30,16 @@ if (IS_VENCORD_DESKTOP || !IS_VANILLA) {
         protocol.registerFileProtocol("vencord", ({ url: unsafeUrl }, cb) => {
             let url = unsafeUrl.slice("vencord://".length);
             if (url.endsWith("/")) url = url.slice(0, -1);
+            if (url.startsWith("/themes/")) {
+                const theme = url.slice("/themes/".length);
+                const safeUrl = ensureSafePath(THEMES_DIR, theme);
+                if (!safeUrl) {
+                    cb({ statusCode: 403 });
+                    return;
+                }
+                cb(safeUrl.replace(/\?v=\d+$/, ""));
+                return;
+            }
             switch (url) {
                 case "renderer.js.map":
                 case "vencordDesktopRenderer.js.map":
@@ -75,7 +85,7 @@ if (IS_VENCORD_DESKTOP || !IS_VANILLA) {
                 const csp = parsePolicy(headers[header][0]);
 
                 for (const directive of ["style-src", "connect-src", "img-src", "font-src", "media-src", "worker-src"]) {
-                    csp[directive] = ["*", "blob:", "data:", "'unsafe-inline'"];
+                    csp[directive] = ["*", "blob:", "data:", "vencord:", "'unsafe-inline'"];
                 }
                 // TODO: Restrict this to only imported packages with fixed version.
                 // Perhaps auto generate with esbuild

src/main/ipcMain.ts

@@ -17,25 +17,58 @@
 */
 
 import "./updater";
+import "./ipcPlugins";
 
 import { debounce } from "@utils/debounce";
 import { IpcEvents } from "@utils/IpcEvents";
 import { Queue } from "@utils/Queue";
 import { BrowserWindow, ipcMain, shell } from "electron";
 import { mkdirSync, readFileSync, watch } from "fs";
-import { open, readFile, writeFile } from "fs/promises";
+import { open, readdir, readFile, writeFile } from "fs/promises";
-import { join } from "path";
+import { join, normalize } from "path";
 
 import monacoHtml from "~fileContent/../components/monacoWin.html;base64";
 
-import { ALLOWED_PROTOCOLS, QUICKCSS_PATH, SETTINGS_DIR, SETTINGS_FILE } from "./utils/constants";
+import { getThemeInfo, stripBOM, UserThemeHeader } from "./themes";
+import { ALLOWED_PROTOCOLS, QUICKCSS_PATH, SETTINGS_DIR, SETTINGS_FILE, THEMES_DIR } from "./utils/constants";
+import { makeLinksOpenExternally } from "./utils/externalLinks";
 
 mkdirSync(SETTINGS_DIR, { recursive: true });
+mkdirSync(THEMES_DIR, { recursive: true });
+
+export function ensureSafePath(basePath: string, path: string) {
+    const normalizedBasePath = normalize(basePath);
+    const newPath = join(basePath, path);
+    const normalizedPath = normalize(newPath);
+    return normalizedPath.startsWith(normalizedBasePath) ? normalizedPath : null;
+}
 
 function readCss() {
     return readFile(QUICKCSS_PATH, "utf-8").catch(() => "");
 }
 
+async function listThemes(): Promise<UserThemeHeader[]> {
+    const files = await readdir(THEMES_DIR).catch(() => []);
+
+    const themeInfo: UserThemeHeader[] = [];
+
+    for (const fileName of files) {
+        const data = await getThemeData(fileName).then(stripBOM).catch(() => null);
+        if (!data) continue;
+        const parsed = getThemeInfo(data, fileName);
+        themeInfo.push(parsed);
+    }
+
+    return themeInfo;
+}
+
+function getThemeData(fileName: string) {
+    fileName = fileName.replace(/\?v=\d+$/, "");
+    const safePath = ensureSafePath(THEMES_DIR, fileName);
+    if (!safePath) return Promise.reject(`Unsafe path ${fileName}`);
+    return readFile(safePath, "utf-8");
+}
+
 export function readSettings() {
     try {
         return readFileSync(SETTINGS_FILE, "utf-8");
@@ -74,6 +107,10 @@ ipcMain.handle(IpcEvents.SET_QUICK_CSS, (_, css) =>
     cssWriteQueue.push(() => writeFile(QUICKCSS_PATH, css))
 );
 
+ipcMain.handle(IpcEvents.GET_THEMES_DIR, () => THEMES_DIR);
+ipcMain.handle(IpcEvents.GET_THEMES_LIST, () => listThemes());
+ipcMain.handle(IpcEvents.GET_THEME_DATA, (_, fileName) => getThemeData(fileName));
+
 ipcMain.handle(IpcEvents.GET_SETTINGS_DIR, () => SETTINGS_DIR);
 ipcMain.on(IpcEvents.GET_SETTINGS, e => e.returnValue = readSettings());
 
@@ -89,6 +126,10 @@ export function initIpc(mainWindow: BrowserWindow) {
             mainWindow.webContents.postMessage(IpcEvents.QUICK_CSS_UPDATE, await readCss());
         }, 50));
     });
+
+    watch(THEMES_DIR, { persistent: false }, debounce(() => {
+        mainWindow.webContents.postMessage(IpcEvents.THEME_UPDATE, void 0);
+    }));
 }
 
 ipcMain.handle(IpcEvents.OPEN_MONACO_EDITOR, async () => {
@@ -103,5 +144,8 @@ ipcMain.handle(IpcEvents.OPEN_MONACO_EDITOR, async () => {
             sandbox: false
         }
     });
+
+    makeLinksOpenExternally(win);
+
     await win.loadURL(`data:text/html;base64,${monacoHtml}`);
 });

src/main/ipcPlugins.ts

@@ -0,0 +1,67 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { IpcEvents } from "@utils/IpcEvents";
+import { app, ipcMain } from "electron";
+import { readFile } from "fs/promises";
+import { request } from "https";
+import { basename, normalize } from "path";
+
+// #region OpenInApp
+// These links don't support CORS, so this has to be native
+const validRedirectUrls = /^https:\/\/(spotify\.link|s\.team)\/.+$/;
+
+function getRedirect(url: string) {
+    return new Promise<string>((resolve, reject) => {
+        const req = request(new URL(url), { method: "HEAD" }, res => {
+            resolve(
+                res.headers.location
+                    ? getRedirect(res.headers.location)
+                    : url
+            );
+        });
+        req.on("error", reject);
+        req.end();
+    });
+}
+
+ipcMain.handle(IpcEvents.OPEN_IN_APP__RESOLVE_REDIRECT, async (_, url: string) => {
+    if (!validRedirectUrls.test(url)) return url;
+
+    return getRedirect(url);
+});
+// #endregion
+
+
+// #region VoiceMessages
+ipcMain.handle(IpcEvents.VOICE_MESSAGES_READ_RECORDING, async (_, filePath: string) => {
+    filePath = normalize(filePath);
+    const filename = basename(filePath);
+    const discordBaseDirWithTrailingSlash = normalize(app.getPath("userData") + "/");
+    console.log(filename, discordBaseDirWithTrailingSlash, filePath);
+    if (filename !== "recording.ogg" || !filePath.startsWith(discordBaseDirWithTrailingSlash)) return null;
+
+    try {
+        const buf = await readFile(filePath);
+        return new Uint8Array(buf.buffer);
+    } catch {
+        return null;
+    }
+});
+
+// #endregion

src/main/themes/LICENSE

@@ -0,0 +1,177 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS

src/main/themes/index.ts

@@ -0,0 +1,81 @@
+/* eslint-disable header/header */
+
+/*!
+ * BetterDiscord addon meta parser
+ * Copyright 2023 BetterDiscord contributors
+ * Copyright 2023 Vendicated and Vencord contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const splitRegex = /[^\S\r\n]*?\r?(?:\r\n|\n)[^\S\r\n]*?\*[^\S\r\n]?/;
+const escapedAtRegex = /^\\@/;
+
+export interface UserThemeHeader {
+    fileName: string;
+    name: string;
+    author: string;
+    description: string;
+    version?: string;
+    license?: string;
+    source?: string;
+    website?: string;
+    invite?: string;
+}
+
+function makeHeader(fileName: string, opts: Partial<UserThemeHeader> = {}): UserThemeHeader {
+    return {
+        fileName,
+        name: opts.name ?? fileName.replace(/\.css$/i, ""),
+        author: opts.author ?? "Unknown Author",
+        description: opts.description ?? "A Discord Theme.",
+        version: opts.version,
+        license: opts.license,
+        source: opts.source,
+        website: opts.website,
+        invite: opts.invite
+    };
+}
+
+export function stripBOM(fileContent: string) {
+    if (fileContent.charCodeAt(0) === 0xFEFF) {
+        fileContent = fileContent.slice(1);
+    }
+    return fileContent;
+}
+
+export function getThemeInfo(css: string, fileName: string): UserThemeHeader {
+    if (!css) return makeHeader(fileName);
+
+    const block = css.split("/**", 2)?.[1]?.split("*/", 1)?.[0];
+    if (!block) return makeHeader(fileName);
+
+    const header: Partial<UserThemeHeader> = {};
+    let field = "";
+    let accum = "";
+    for (const line of block.split(splitRegex)) {
+        if (line.length === 0) continue;
+        if (line.charAt(0) === "@" && line.charAt(1) !== " ") {
+            header[field] = accum.trim();
+            const l = line.indexOf(" ");
+            field = line.substring(1, l);
+            accum = line.substring(l + 1);
+        }
+        else {
+            accum += " " + line.replace("\\n", "\n").replace(escapedAtRegex, "@");
+        }
+    }
+    header[field] = accum.trim();
+    delete header[""];
+    return makeHeader(fileName, header);
+}

src/main/utils/constants.ts

@@ -25,13 +25,15 @@ export const DATA_DIR = process.env.VENCORD_USER_DATA_DIR ?? (
         : join(app.getPath("userData"), "..", "Vencord")
 );
 export const SETTINGS_DIR = join(DATA_DIR, "settings");
+export const THEMES_DIR = join(DATA_DIR, "themes");
 export const QUICKCSS_PATH = join(SETTINGS_DIR, "quickCss.css");
 export const SETTINGS_FILE = join(SETTINGS_DIR, "settings.json");
 export const ALLOWED_PROTOCOLS = [
     "https:",
     "http:",
     "steam:",
-    "spotify:"
+    "spotify:",
+    "com.epicgames.launcher:",
 ];
 
 export const IS_VANILLA = /* @__PURE__ */ process.argv.includes("--vanilla");

src/main/utils/externalLinks.ts

@@ -0,0 +1,48 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { type BrowserWindow, shell } from "electron";
+
+export function makeLinksOpenExternally(win: BrowserWindow) {
+    win.webContents.setWindowOpenHandler(({ url }) => {
+        switch (url) {
+            case "about:blank":
+            case "https://discord.com/popout":
+            case "https://ptb.discord.com/popout":
+            case "https://canary.discord.com/popout":
+                return { action: "allow" };
+        }
+
+        try {
+            var { protocol } = new URL(url);
+        } catch {
+            return { action: "deny" };
+        }
+
+        switch (protocol) {
+            case "http:":
+            case "https:":
+            case "mailto:":
+            case "steam:":
+            case "spotify:":
+                shell.openExternal(url);
+        }
+
+        return { action: "deny" };
+    });
+}

src/plugins/_api/badges.tsx

@@ -80,8 +80,8 @@ export default definePlugin({
             find: "Messages.PROFILE_USER_BADGES,role:",
             replacement: [
                 {
-                    match: /(?<=(\i)\.isTryItOutFlow,)(.{0,300})null==\i\?void 0:(\i)\.getBadges\(\)/,
+                    match: /&&(\i)\.push\(\{id:"premium".+?\}\);/,
-                    replace: (_, props, restCode, badgesMod) => `vencordProps=${props},${restCode}Vencord.Api.Badges._getBadges(vencordProps).concat(${badgesMod}?.getBadges()??[])`,
+                    replace: "$&$1.unshift(...Vencord.Api.Badges._getBadges(arguments[0]));",
                 },
                 {
                     // alt: "", aria-hidden: false, src: originalSrc

src/plugins/callTimer.tsx

@@ -19,6 +19,7 @@
 import { Settings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
+import { useTimer } from "@utils/react";
 import definePlugin, { OptionType } from "@utils/types";
 import { React } from "@webpack/common";
 
@@ -85,17 +86,10 @@ export default definePlugin({
     },
 
     Timer({ channelId }: { channelId: string; }) {
-        const [time, setTime] = React.useState(0);
+        const time = useTimer({
-        const startTime = React.useMemo(() => Date.now(), [channelId]);
+            deps: [channelId]
+        });
 
-        React.useEffect(() => {
+        return <p style={{ margin: 0 }}>Connected for <span style={{ fontFamily: "var(--font-code)" }}>{formatDuration(time)}</span></p>;
-            const interval = setInterval(() => setTime(Date.now() - startTime), 1000);
-            return () => {
-                clearInterval(interval);
-                setTime(0);
-            };
-        }, [channelId]);
-
-        return <p style={{ margin: 0 }}>Connected for {formatDuration(time)}</p>;
     }
 });

src/plugins/clearURLs/defaultRules.ts

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

src/plugins/customRPC.tsx

@@ -23,21 +23,12 @@ import { isTruthy } from "@utils/guards";
 import { useAwaiter } from "@utils/react";
 import definePlugin, { OptionType } from "@utils/types";
 import { filters, findByCodeLazy, findByPropsLazy, mapMangledModuleLazy } from "@webpack";
-import {
+import { FluxDispatcher, Forms, GuildStore, React, SelectedChannelStore, SelectedGuildStore, UserStore } from "@webpack/common";
-    FluxDispatcher,
-    Forms,
-    GuildStore,
-    React,
-    SelectedChannelStore,
-    SelectedGuildStore,
-    UserStore
-} from "@webpack/common";
 
 const ActivityComponent = findByCodeLazy("onOpenGameProfile");
 const ActivityClassName = findByPropsLazy("activity", "buttonColor");
 const Colors = findByPropsLazy("profileColors");
 
-// START yoinked from lastfm.tsx
 const assetManager = mapMangledModuleLazy(
     "getAssetImage: size must === [number, number] for Twitch",
     {
@@ -46,6 +37,7 @@ const assetManager = mapMangledModuleLazy(
 );
 
 async function getApplicationAsset(key: string): Promise<string> {
+    if (/https?:\/\/(cdn|media)\.discordapp\.(com|net)\/attachments\//.test(key)) return "mp:" + key.replace(/https?:\/\/(cdn|media)\.discordapp\.(com|net)\//, "");
     return (await assetManager.getAsset(settings.store.appID, [key, undefined]))[0];
 }
 
@@ -71,66 +63,240 @@ interface Activity {
         button_urls?: Array<string>;
     };
     type: ActivityType;
+    url?: string;
     flags: number;
 }
 
 const enum ActivityType {
     PLAYING = 0,
+    STREAMING = 1,
     LISTENING = 2,
     WATCHING = 3,
     COMPETING = 5
 }
-// END
-
-const strOpt = (description: string) => ({
-    type: OptionType.STRING,
-    description,
-    onChange: setRpc
-}) as const;
-
-const numOpt = (description: string) => ({
-    type: OptionType.NUMBER,
-    description,
-    onChange: setRpc
-}) as const;
-
-const choice = (label: string, value: any, _default?: boolean) => ({
-    label,
-    value,
-    default: _default
-}) as const;
-
-const choiceOpt = <T,>(description: string, options: T) => ({
-    type: OptionType.SELECT,
-    description,
-    onChange: setRpc,
-    options
-}) as const;
 
+const enum TimestampMode {
+    NONE,
+    NOW,
+    TIME,
+    CUSTOM,
+}
 
 const settings = definePluginSettings({
-    appID: strOpt("The ID of the application for the rich presence."),
+    appID: {
-    appName: strOpt("The name of the presence."),
+        type: OptionType.STRING,
-    details: strOpt("Line 1 of rich presence."),
+        description: "Application ID (required)",
-    state: strOpt("Line 2 of rich presence."),
+        restartNeeded: true,
-    type: choiceOpt("Type of presence", [
+        onChange: setRpc,
-        choice("Playing", ActivityType.PLAYING, true),
+        isValid: (value: string) => {
-        choice("Listening", ActivityType.LISTENING),
+            if (!value) return "Application ID is required.";
-        choice("Watching", ActivityType.WATCHING),
+            if (value && !/^\d+$/.test(value)) return "Application ID must be a number.";
-        choice("Competing", ActivityType.COMPETING)
+            return true;
-    ]),
+        }
-    startTime: numOpt("Unix Timestamp for beginning of activity."),
+    },
-    endTime: numOpt("Unix Timestamp for end of activity."),
+    appName: {
-    imageBig: strOpt("Sets the big image to the specified image."),
+        type: OptionType.STRING,
-    imageBigTooltip: strOpt("Sets the tooltip text for the big image."),
+        description: "Application name (required)",
-    imageSmall: strOpt("Sets the small image to the specified image."),
+        restartNeeded: true,
-    imageSmallTooltip: strOpt("Sets the tooltip text for the small image."),
+        onChange: setRpc,
-    buttonOneText: strOpt("The text for the first button"),
+        isValid: (value: string) => {
-    buttonOneURL: strOpt("The URL for the first button"),
+            if (!value) return "Application name is required.";
-    buttonTwoText: strOpt("The text for the second button"),
+            if (value.length > 128) return "Application name must be not longer than 128 characters.";
-    buttonTwoURL: strOpt("The URL for the second button")
+            return true;
+        }
+    },
+    details: {
+        type: OptionType.STRING,
+        description: "Details (line 1)",
+        restartNeeded: true,
+        onChange: setRpc,
+        isValid: (value: string) => {
+            if (value && value.length > 128) return "Details (line 1) must be not longer than 128 characters.";
+            return true;
+        }
+    },
+    state: {
+        type: OptionType.STRING,
+        description: "State (line 2)",
+        restartNeeded: true,
+        onChange: setRpc,
+        isValid: (value: string) => {
+            if (value && value.length > 128) return "State (line 2) must be not longer than 128 characters.";
+            return true;
+        }
+    },
+    type: {
+        type: OptionType.SELECT,
+        description: "Activity type",
+        restartNeeded: true,
+        onChange: setRpc,
+        options: [
+            {
+                label: "Playing",
+                value: ActivityType.PLAYING,
+                default: true
+            },
+            {
+                label: "Streaming",
+                value: ActivityType.STREAMING
+            },
+            {
+                label: "Listening",
+                value: ActivityType.LISTENING
+            },
+            {
+                label: "Watching",
+                value: ActivityType.WATCHING
+            },
+            {
+                label: "Competing",
+                value: ActivityType.COMPETING
+            }
+        ]
+    },
+    streamLink: {
+        type: OptionType.STRING,
+        description: "Twitch.tv or Youtube.com link (only for Streaming activity type)",
+        restartNeeded: true,
+        onChange: setRpc,
+        isDisabled: isStreamLinkDisabled,
+        isValid: isStreamLinkValid
+    },
+    timestampMode: {
+        type: OptionType.SELECT,
+        description: "Timestamp mode",
+        restartNeeded: true,
+        onChange: setRpc,
+        options: [
+            {
+                label: "None",
+                value: TimestampMode.NONE,
+                default: true
+            },
+            {
+                label: "Since discord open",
+                value: TimestampMode.NOW
+            },
+            {
+                label: "Same as your current time",
+                value: TimestampMode.TIME
+            },
+            {
+                label: "Custom",
+                value: TimestampMode.CUSTOM
+            }
+        ]
+    },
+    startTime: {
+        type: OptionType.NUMBER,
+        description: "Start timestamp (only for custom timestamp mode)",
+        restartNeeded: true,
+        onChange: setRpc,
+        isDisabled: isTimestampDisabled,
+        isValid: (value: number) => {
+            if (value && value < 0) return "Start timestamp must be greater than 0.";
+            return true;
+        }
+    },
+    endTime: {
+        type: OptionType.NUMBER,
+        description: "End timestamp (only for custom timestamp mode)",
+        restartNeeded: true,
+        onChange: setRpc,
+        isDisabled: isTimestampDisabled,
+        isValid: (value: number) => {
+            if (value && value < 0) return "End timestamp must be greater than 0.";
+            return true;
+        }
+    },
+    imageBig: {
+        type: OptionType.STRING,
+        description: "Big image key",
+        restartNeeded: true,
+        onChange: setRpc,
+        isValid: isImageKeyValid
+    },
+    imageBigTooltip: {
+        type: OptionType.STRING,
+        description: "Big image tooltip",
+        restartNeeded: true,
+        onChange: setRpc,
+        isValid: (value: string) => {
+            if (value && value.length > 128) return "Big image tooltip must be not longer than 128 characters.";
+            return true;
+        }
+    },
+    imageSmall: {
+        type: OptionType.STRING,
+        description: "Small image key",
+        restartNeeded: true,
+        onChange: setRpc,
+        isValid: isImageKeyValid
+    },
+    imageSmallTooltip: {
+        type: OptionType.STRING,
+        description: "Small image tooltip",
+        restartNeeded: true,
+        onChange: setRpc,
+        isValid: (value: string) => {
+            if (value && value.length > 128) return "Small image tooltip must be not longer than 128 characters.";
+            return true;
+        }
+    },
+    buttonOneText: {
+        type: OptionType.STRING,
+        description: "Button 1 text",
+        restartNeeded: true,
+        onChange: setRpc,
+        isValid: (value: string) => {
+            if (value && value.length > 31) return "Button 1 text must be not longer than 31 characters.";
+            return true;
+        }
+    },
+    buttonOneURL: {
+        type: OptionType.STRING,
+        description: "Button 1 URL",
+        restartNeeded: true,
+        onChange: setRpc
+    },
+    buttonTwoText: {
+        type: OptionType.STRING,
+        description: "Button 2 text",
+        restartNeeded: true,
+        onChange: setRpc,
+        isValid: (value: string) => {
+            if (value && value.length > 31) return "Button 2 text must be not longer than 31 characters.";
+            return true;
+        }
+    },
+    buttonTwoURL: {
+        type: OptionType.STRING,
+        description: "Button 2 URL",
+        restartNeeded: true,
+        onChange: setRpc
+    }
 });
 
+function isStreamLinkDisabled(): boolean {
+    return settings.store.type !== ActivityType.STREAMING;
+}
+
+function isStreamLinkValid(): boolean | string {
+    if (settings.store.type === ActivityType.STREAMING && settings.store.streamLink && !/(https?:\/\/(www\.)?(twitch\.tv|youtube\.com)\/\w+)/.test(settings.store.streamLink)) return "Streaming link must be a valid URL.";
+    return true;
+}
+
+function isTimestampDisabled(): boolean {
+    return settings.store.timestampMode !== TimestampMode.CUSTOM;
+}
+
+function isImageKeyValid(value: string) {
+    if (!/https?:\/\//.test(value)) return true;
+    if (/https?:\/\/(?!i\.)?imgur\.com\//.test(value)) return "Imgur link must be a direct link to the image. (e.g. https://i.imgur.com/...)";
+    if (/https?:\/\/(?!media\.)?tenor\.com\//.test(value)) return "Tenor link must be a direct link to the image. (e.g. https://media.tenor.com/...)";
+    return true;
+}
+
 async function createActivity(): Promise<Activity | undefined> {
     const {
         appID,
@@ -138,6 +304,7 @@ async function createActivity(): Promise<Activity | undefined> {
         details,
         state,
         type,
+        streamLink,
         startTime,
         endTime,
         imageBig,
@@ -161,6 +328,20 @@ async function createActivity(): Promise<Activity | undefined> {
         flags: 1 << 0,
     };
 
+    if (type === ActivityType.STREAMING) activity.url = streamLink;
+
+    switch (settings.store.timestampMode) {
+        case TimestampMode.NOW:
+            activity.timestamps = {
+                start: Math.floor(Date.now() / 1000)
+            };
+            break;
+        case TimestampMode.TIME:
+            activity.timestamps = {
+                start: Math.floor(Date.now() / 1000) - (new Date().getHours() * 3600) - (new Date().getMinutes() * 60) - new Date().getSeconds()
+            };
+            break;
+        case TimestampMode.CUSTOM:
             if (startTime) {
                 activity.timestamps = {
                     start: startTime,
@@ -169,6 +350,11 @@ async function createActivity(): Promise<Activity | undefined> {
                     activity.timestamps.end = endTime;
                 }
             }
+            break;
+        case TimestampMode.NONE:
+        default:
+            break;
+    }
 
     if (buttonOneText) {
         activity.buttons = [
@@ -187,7 +373,7 @@ async function createActivity(): Promise<Activity | undefined> {
     if (imageBig) {
         activity.assets = {
             large_image: await getApplicationAsset(imageBig),
-            large_text: imageBigTooltip
+            large_text: imageBigTooltip || undefined
         };
     }
 
@@ -195,13 +381,13 @@ async function createActivity(): Promise<Activity | undefined> {
         activity.assets = {
             ...activity.assets,
             small_image: await getApplicationAsset(imageSmall),
-            small_text: imageSmallTooltip
+            small_text: imageSmallTooltip || undefined
         };
     }
 
 
     for (const k in activity) {
-        if (k === "type") continue; // without type, the presence is considered invalid.
+        if (k === "type") continue;
         const v = activity[k];
         if (!v || v.length === 0)
             delete activity[k];
@@ -223,7 +409,7 @@ async function setRpc(disable?: boolean) {
 export default definePlugin({
     name: "CustomRPC",
     description: "Allows you to set a custom rich presence.",
-    authors: [Devs.captain],
+    authors: [Devs.captain, Devs.AutumnVN],
     start: setRpc,
     stop: () => setRpc(true),
     settings,
@@ -232,11 +418,15 @@ export default definePlugin({
         const activity = useAwaiter(createActivity);
         return (
             <>
-                <Forms.FormTitle tag="h2">NOTE:</Forms.FormTitle>
                 <Forms.FormText>
-                    You will need to <Link href="https://discord.com/developers/applications">create an
+                    Go to <Link href="https://discord.com/developers/applications">Discord Deverloper Portal</Link> to create an application and
-                        application</Link> and
+                    get the application ID.
-                    get its ID to use this plugin.
+                </Forms.FormText>
+                <Forms.FormText>
+                    Upload images in the Rich Presence tab to get the image keys.
+                </Forms.FormText>
+                <Forms.FormText>
+                    If you want to use image link, download your image and reupload the image to <Link href="https://imgur.com">Imgur</Link> and get the image link by right-clicking the image and select "Copy image address".
                 </Forms.FormText>
                 <Forms.FormDivider />
                 <div style={{ width: "284px" }} className={Colors.profileColors}>

src/plugins/disableDMCallIdle.ts

@@ -21,7 +21,7 @@ import definePlugin from "@utils/types";
 
 export default definePlugin({
     name: "DisableDMCallIdle",
-    description: "Disables automatically getting kicked from a DM voice call after 5 minutes.",
+    description: "Disables automatically getting kicked from a DM voice call after 3 minutes.",
     authors: [Devs.Nuckyz],
     patches: [
         {

src/plugins/experiments.tsx

@@ -75,7 +75,7 @@ export default definePlugin({
             replacement: [
                 {
                     match: /return\s*?(\i)\.hasFlag\((\i\.\i)\.STAFF\)}/,
-                    replace: (_, user, flags) => `return Vencord.Webpack.Common.UserStore.getCurrentUser().id===${user}.id||${user}.hasFlag(${flags}.STAFF)}`
+                    replace: (_, user, flags) => `return Vencord.Webpack.Common.UserStore.getCurrentUser()?.id===${user}.id||${user}.hasFlag(${flags}.STAFF)}`
                 },
                 {
                     match: /hasFreePremium=function\(\){return this.isStaff\(\)\s*?\|\|/,

src/plugins/fakeNitro.ts

@@ -565,7 +565,11 @@ export default definePlugin({
 
         switch (embed.type) {
             case "image": {
-                if (!settings.store.transformCompoundSentence && !contentItems.includes(embed.url!) && !contentItems.includes(embed.image!.proxyURL)) return false;
+                if (
+                    !settings.store.transformCompoundSentence
+                    && !contentItems.includes(embed.url!)
+                    && !contentItems.includes(embed.image?.proxyURL!)
+                ) return false;
 
                 if (settings.store.transformEmojis) {
                     if (fakeNitroEmojiRegex.test(embed.url!)) return true;

src/plugins/favGifSearch.tsx

@@ -0,0 +1,241 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { definePluginSettings } from "@api/Settings";
+import ErrorBoundary from "@components/ErrorBoundary";
+import { Devs } from "@utils/constants";
+import definePlugin, { OptionType } from "@utils/types";
+import { findByPropsLazy } from "@webpack";
+import { useCallback, useEffect, useRef, useState } from "@webpack/common";
+
+interface SearchBarComponentProps {
+    ref?: React.MutableRefObject<any>;
+    autoFocus: boolean;
+    className: string;
+    size: string;
+    onChange: (query: string) => void;
+    onClear: () => void;
+    query: string;
+    placeholder: string;
+}
+
+type TSearchBarComponent =
+    React.FC<SearchBarComponentProps> & { Sizes: Record<"SMALL" | "MEDIUM" | "LARGE", string>; };
+
+interface Gif {
+    format: number;
+    src: string;
+    width: number;
+    height: number;
+    order: number;
+    url: string;
+}
+
+interface Instance {
+    dead?: boolean;
+    state: {
+        resultType?: string;
+    };
+    props: {
+        favCopy: Gif[],
+
+        favorites: Gif[],
+    },
+    forceUpdate: () => void;
+}
+
+
+const containerClasses: { searchBar: string; } = findByPropsLazy("searchBar", "searchHeader", "gutterSize");
+
+export const settings = definePluginSettings({
+    searchOption: {
+        type: OptionType.SELECT,
+        description: "The part of the url you want to search",
+        options: [
+            {
+                label: "Entire Url",
+                value: "url"
+            },
+            {
+                label: "Path Only (/somegif.gif)",
+                value: "path"
+            },
+            {
+                label: "Host & Path (tenor.com somgif.gif)",
+                value: "hostandpath",
+                default: true
+            }
+        ] as const
+    }
+});
+
+export default definePlugin({
+    name: "FavoriteGifSearch",
+    authors: [Devs.Aria],
+    description: "Adds a search bar for favorite gifs",
+
+    patches: [
+        {
+            find: "renderCategoryExtras",
+            replacement: [
+                {
+                    // https://regex101.com/r/4uHtTE/1
+                    // ($1 renderHeaderContent=function { ... switch (x) ... case FAVORITES:return) ($2) ($3 case default:return r.jsx(($<searchComp>), {...props}))
+                    match: /(renderHeaderContent=function.{1,150}FAVORITES:return)(.{1,150};)(case.{1,200}default:return\(0,\i\.jsx\)\((?<searchComp>\i\.\i))/,
+                    replace: "$1 this.state.resultType === \"Favorites\" ? $self.renderSearchBar(this, $<searchComp>) : $2; $3"
+                },
+                {
+                    // to persist filtered favorites when component re-renders.
+                    // when resizing the window the component rerenders and we loose the filtered favorites and have to type in the search bar to get them again
+                    match: /(,suggestions:\i,favorites:)(\i),/,
+                    replace: "$1$self.getFav($2),favCopy:$2,"
+                }
+
+            ]
+        }
+    ],
+
+    settings,
+
+    getTargetString,
+
+    instance: null as Instance | null,
+    renderSearchBar(instance: Instance, SearchBarComponent: TSearchBarComponent) {
+        this.instance = instance;
+        return (
+            <ErrorBoundary noop={true}>
+                <SearchBar instance={instance} SearchBarComponent={SearchBarComponent} />
+            </ErrorBoundary>
+        );
+    },
+
+    getFav(favorites: Gif[]) {
+        if (!this.instance || this.instance.dead) return favorites;
+        const { favorites: filteredFavorites } = this.instance.props;
+
+        return filteredFavorites != null && filteredFavorites?.length !== favorites.length ? filteredFavorites : favorites;
+
+    }
+});
+
+
+function SearchBar({ instance, SearchBarComponent }: { instance: Instance; SearchBarComponent: TSearchBarComponent; }) {
+    const [query, setQuery] = useState("");
+    const ref = useRef<{ containerRef?: React.MutableRefObject<HTMLDivElement>; } | null>(null);
+
+    const onChange = useCallback((searchQuery: string) => {
+        setQuery(searchQuery);
+        const { props } = instance;
+
+        // return early
+        if (searchQuery === "") {
+            props.favorites = props.favCopy;
+            instance.forceUpdate();
+            return;
+        }
+
+
+        // scroll back to top
+        ref.current?.containerRef?.current
+            .closest("#gif-picker-tab-panel")
+            ?.querySelector("[class|=\"content\"]")
+            ?.firstElementChild?.scrollTo(0, 0);
+
+
+        const result =
+            props.favCopy
+                .map(gif => ({
+                    score: fuzzySearch(searchQuery.toLowerCase(), getTargetString(gif.url ?? gif.src).replace(/(%20|[_-])/g, " ").toLowerCase()),
+                    gif,
+                }))
+                .filter(m => m.score != null) as { score: number; gif: Gif; }[];
+
+        result.sort((a, b) => b.score - a.score);
+        props.favorites = result.map(e => e.gif);
+
+        instance.forceUpdate();
+    }, [instance.state]);
+
+    useEffect(() => {
+        return () => {
+            instance.dead = true;
+        };
+    }, []);
+
+    return (
+        <SearchBarComponent
+            ref={ref}
+            autoFocus={true}
+            className={containerClasses.searchBar}
+            size={SearchBarComponent.Sizes.MEDIUM}
+            onChange={onChange}
+            onClear={() => {
+                setQuery("");
+                if (instance.props.favCopy != null) {
+                    instance.props.favorites = instance.props.favCopy;
+                    instance.forceUpdate();
+                }
+            }}
+            query={query}
+            placeholder="Search Favorite Gifs"
+        />
+    );
+}
+
+
+
+export function getTargetString(urlStr: string) {
+    const url = new URL(urlStr);
+    switch (settings.store.searchOption) {
+        case "url":
+            return url.href;
+        case "path":
+            if (url.host === "media.discordapp.net" || url.host === "tenor.com")
+                // /attachments/899763415290097664/1095711736461537381/attachment-1.gif -> attachment-1.gif
+                // /view/some-gif-hi-24248063 -> some-gif-hi-24248063
+                return url.pathname.split("/").at(-1) ?? url.pathname;
+            return url.pathname;
+        case "hostandpath":
+            if (url.host === "media.discordapp.net" || url.host === "tenor.com")
+                return `${url.host} ${url.pathname.split("/").at(-1) ?? url.pathname}`;
+            return `${url.host} ${url.pathname}`;
+
+        default:
+            return "";
+    }
+}
+
+function fuzzySearch(searchQuery: string, searchString: string) {
+    let searchIndex = 0;
+    let score = 0;
+
+    for (let i = 0; i < searchString.length; i++) {
+        if (searchString[i] === searchQuery[searchIndex]) {
+            score++;
+            searchIndex++;
+        } else {
+            score--;
+        }
+
+        if (searchIndex === searchQuery.length) {
+            return score;
+        }
+    }
+
+    return null;
+}

src/plugins/ignoreActivities.tsx

@@ -45,7 +45,7 @@ function ToggleIconOff() {
             className={RegisteredGamesClasses.overlayToggleIconOff}
             height="24"
             width="24"
-            viewBox="0 0 32 26"
+            viewBox="0 2.2 32 26"
             aria-hidden={true}
             role="img"
         >
@@ -77,7 +77,7 @@ function ToggleIconOn({ forceWhite }: { forceWhite?: boolean; }) {
             className={RegisteredGamesClasses.overlayToggleIconOn}
             height="24"
             width="24"
-            viewBox="0 0 32 26"
+            viewBox="0 2.2 32 26"
         >
             <path
                 className={forceWhite ? "" : RegisteredGamesClasses.fill}
@@ -119,7 +119,7 @@ function ToggleActivityComponentWithBackground({ activity }: { activity: Ignored
     return (
         <div
             className={`${TryItOutClasses.tryItOutBadge} ${BaseShapeRoundClasses.baseShapeRound}`}
-            style={{ padding: "0px 2px" }}
+            style={{ padding: "0px 2px", height: 28 }}
         >
             <ToggleActivityComponent activity={activity} forceWhite={true} />
         </div>
@@ -157,10 +157,16 @@ export default definePlugin({
         },
         {
             find: ".overlayBadge",
-            replacement: {
+            replacement: [
-                match: /(?<=\(\)\.badgeContainer.+?(\i)\.name}\):null)/,
+                {
-                replace: (_, props) => `,$self.renderToggleActivityButton(${props})`
+                    match: /(?<=\(\)\.badgeContainer,children:).{0,50}?name:(\i)\.name.+?null/,
+                    replace: (m, props) => `[${m},$self.renderToggleActivityButton(${props})]`
+                },
+                {
+                    match: /(?<=\(\)\.badgeContainer,children:).{0,50}?name:(\i\.application)\.name.+?null/,
+                    replace: (m, props) => `${m},$self.renderToggleActivityButton(${props})`
                 }
+            ]
         },
         {
             find: '.displayName="LocalActivityStore"',

src/plugins/imageZoom/components/Magnifier.tsx

@@ -16,6 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { classNameFactory } from "@api/Styles";
 import { FluxDispatcher, React, useRef, useState } from "@webpack/common";
 
 import { ELEMENT_ID } from "../constants";
@@ -33,6 +34,8 @@ export interface MagnifierProps {
     instance: any;
 }
 
+const cl = classNameFactory("vc-imgzoom-");
+
 export const Magnifier: React.FC<MagnifierProps> = ({ instance, size: initialSize, zoom: initalZoom }) => {
     const [ready, setReady] = useState(false);
 
@@ -156,7 +159,7 @@ export const Magnifier: React.FC<MagnifierProps> = ({ instance, size: initialSiz
 
     return (
         <div
-            className="vc-imgzoom-lens"
+            className={cl("lens", { "nearest-neighbor": settings.store.nearestNeighbour, square: settings.store.square })}
             style={{
                 opacity,
                 width: size.current + "px",

src/plugins/imageZoom/index.tsx

@@ -23,7 +23,7 @@ import { makeRange } from "@components/PluginSettings/components";
 import { Devs } from "@utils/constants";
 import { debounce } from "@utils/debounce";
 import definePlugin, { OptionType } from "@utils/types";
-import { Menu, React, ReactDOM } from "@webpack/common";
+import { ContextMenu, Menu, React, ReactDOM } from "@webpack/common";
 import type { Root } from "react-dom/client";
 
 import { Magnifier, MagnifierProps } from "./components/Magnifier";
@@ -50,6 +50,18 @@ export const settings = definePluginSettings({
         default: true,
     },
 
+    nearestNeighbour: {
+        type: OptionType.BOOLEAN,
+        description: "Use Nearest Neighbour Interpolation when scaling images",
+        default: false,
+    },
+
+    square: {
+        type: OptionType.BOOLEAN,
+        description: "Make the lens square",
+        default: false,
+    },
+
     zoom: {
         description: "Zoom of the lens",
         type: OptionType.SLIDER,
@@ -78,9 +90,17 @@ export const settings = definePluginSettings({
 const imageContextMenuPatch: NavContextMenuPatchCallback = children => () => {
     children.push(
         <Menu.MenuGroup id="image-zoom">
-            {/* thanks SpotifyControls */}
+            <Menu.MenuCheckboxItem
+                id="vc-square"
+                label="Square Lens"
+                checked={settings.store.square}
+                action={() => {
+                    settings.store.square = !settings.store.square;
+                    ContextMenu.close();
+                }}
+            />
             <Menu.MenuControlItem
-                id="zoom"
+                id="vc-zoom"
                 label="Zoom"
                 control={(props, ref) => (
                     <Menu.MenuSliderControl
@@ -94,7 +114,7 @@ const imageContextMenuPatch: NavContextMenuPatchCallback = children => () => {
                 )}
             />
             <Menu.MenuControlItem
-                id="size"
+                id="vc-size"
                 label="Lens Size"
                 control={(props, ref) => (
                     <Menu.MenuSliderControl
@@ -108,7 +128,7 @@ const imageContextMenuPatch: NavContextMenuPatchCallback = children => () => {
                 )}
             />
             <Menu.MenuControlItem
-                id="zoom-speed"
+                id="vc-zoom-speed"
                 label="Zoom Speed"
                 control={(props, ref) => (
                     <Menu.MenuSliderControl

src/plugins/imageZoom/styles.css

@@ -11,6 +11,14 @@
     pointer-events: none;
 }
 
+.vc-imgzoom-square {
+    border-radius: 0;
+}
+
+.vc-imgzoom-nearest-neighbor > img {
+    image-rendering: pixelated; /* https://googlechrome.github.io/samples/image-rendering-pixelated/index.html */
+}
+
 /* make the carousel take up less space so we can click the backdrop and exit out of it */
 [class|="carouselModal"] {
     height: fit-content;

src/plugins/invisibleChat/index.tsx

@@ -132,7 +132,7 @@ export default definePlugin({
             find: ".Messages.MESSAGE_EDITED,",
             replacement: {
                 match: /var .,.,.=(.)\.className,.=.\.message,.=.\.children,.=.\.content,.=.\.onUpdate/gm,
-                replace: "try {$1 && $self.INV_REGEX.test($1.content[0]) ? $1.content.push($self.indicator()) : null } catch {};$&"
+                replace: "try {$1 && $self.INV_REGEX.test($1.message.content) ? $1.content.push($self.indicator()) : null } catch {};$&"
             }
         },
         {
@@ -200,8 +200,11 @@ export default definePlugin({
             },
         });
 
-        if (urlCheck?.length)
+        if (urlCheck?.length) {
-            message.embeds.push(await this.getEmbed(new URL(urlCheck[0])));
+            const embed = await this.getEmbed(new URL(urlCheck[0]));
+            if (embed)
+                message.embeds.push(embed);
+        }
 
         this.updateMessage(message);
     },

src/plugins/memberCount.tsx

@@ -106,7 +106,7 @@ export default definePlugin({
         find: ".isSidebarVisible,",
         replacement: {
             match: /(var (\i)=\i\.className.+?children):\[(\i\.useMemo[^}]+"aria-multiselectable")/,
-            replace: "$1:[$2.startsWith('members')?$self.render():null,$3"
+            replace: "$1:[$2?.startsWith('members')?$self.render():null,$3"
         }
     }],
 

src/plugins/messageLinkEmbeds.tsx

@@ -93,6 +93,26 @@ const settings = definePluginSettings({
             }
         ]
     },
+    listMode: {
+        description: "Whether to use ID list as blacklist or whitelist",
+        type: OptionType.SELECT,
+        options: [
+            {
+                label: "Blacklist",
+                value: "blacklist",
+                default: true
+            },
+            {
+                label: "Whitelist",
+                value: "whitelist"
+            }
+        ]
+    },
+    idList: {
+        description: "Guild/channel/user IDs to blacklist or whitelist (separate with comma)",
+        type: OptionType.STRING,
+        default: ""
+    },
     clearMessageCache: {
         type: OptionType.COMPONENT,
         description: "Clear the linked message cache",
@@ -217,6 +237,13 @@ function MessageEmbedAccessory({ message }: { message: Message; }) {
             continue;
         }
 
+        const { listMode, idList } = settings.store;
+
+        const isListed = [guildID, channelID, message.author.id].some(id => id && idList.includes(id));
+
+        if (listMode === "blacklist" && isListed) continue;
+        if (listMode === "whitelist" && !isListed) continue;
+
         let linkedMessage = messageCache.get(messageID)?.message;
         if (!linkedMessage) {
             linkedMessage ??= MessageStore.getMessage(channelID, messageID);
@@ -335,7 +362,7 @@ function AutomodEmbedAccessory(props: MessageEmbedProps): JSX.Element | null {
 export default definePlugin({
     name: "MessageLinkEmbeds",
     description: "Adds a preview to messages that link another message",
-    authors: [Devs.TheSun, Devs.Ven],
+    authors: [Devs.TheSun, Devs.Ven, Devs.RyanCaoDev],
     dependencies: ["MessageAccessoriesAPI"],
     patches: [
         {
@@ -363,7 +390,9 @@ export default definePlugin({
 
             return (
                 <ErrorBoundary>
-                    <MessageEmbedAccessory message={props.message} />
+                    <MessageEmbedAccessory
+                        message={props.message}
+                    />
                 </ErrorBoundary>
             );
         }, 4 /* just above rich embeds */);

src/plugins/messageLogger/index.tsx

@@ -152,14 +152,24 @@ export default definePlugin({
             type: OptionType.STRING,
             description: "Comma-separated list of user IDs to ignore",
             default: ""
-        }
+        },
+        ignoreChannels: {
+            type: OptionType.STRING,
+            description: "Comma-separated list of channel IDs to ignore",
+            default: ""
+        },
+        ignoreGuilds: {
+            type: OptionType.STRING,
+            description: "Comma-separated list of guild IDs to ignore",
+            default: ""
+        },
     },
 
     handleDelete(cache: any, data: { ids: string[], id: string; mlDeleted?: boolean; }, isBulk: boolean) {
         try {
             if (cache == null || (!isBulk && !cache.has(data.id))) return cache;
 
-            const { ignoreBots, ignoreSelf, ignoreUsers } = Settings.plugins.MessageLogger;
+            const { ignoreBots, ignoreSelf, ignoreUsers, ignoreChannels, ignoreGuilds } = Settings.plugins.MessageLogger;
             const myId = UserStore.getCurrentUser().id;
 
             function mutate(id: string) {
@@ -171,7 +181,9 @@ export default definePlugin({
                     (msg.flags & EPHEMERAL) === EPHEMERAL ||
                     ignoreBots && msg.author?.bot ||
                     ignoreSelf && msg.author?.id === myId ||
-                    ignoreUsers.includes(msg.author?.id);
+                    ignoreUsers.includes(msg.author?.id) ||
+                    ignoreChannels.includes(msg.channel_id) ||
+                    ignoreGuilds.includes(msg.guild_id);
 
                 if (shouldIgnore) {
                     cache = cache.remove(id);

src/plugins/moyai.ts

@@ -21,7 +21,7 @@ import { makeRange } from "@components/PluginSettings/components/SettingSliderCo
 import { Devs } from "@utils/constants";
 import { sleep } from "@utils/misc";
 import definePlugin, { OptionType } from "@utils/types";
-import { SelectedChannelStore, UserStore } from "@webpack/common";
+import { RelationshipStore, SelectedChannelStore, UserStore } from "@webpack/common";
 import { Message, ReactionEmoji } from "discord-types/general";
 
 interface IMessageCreate {
@@ -37,6 +37,7 @@ interface IReactionAdd {
     optimistic: boolean;
     channelId: string;
     messageId: string;
+    messageAuthorId: string;
     userId: "195136840355807232";
     emoji: ReactionEmoji;
 }
@@ -71,6 +72,11 @@ const settings = definePluginSettings({
         description: "Ignore bots",
         type: OptionType.BOOLEAN,
         default: true
+    },
+    ignoreBlocked: {
+        description: "Ignore blocked users",
+        type: OptionType.BOOLEAN,
+        default: true
     }
 });
 
@@ -85,6 +91,7 @@ export default definePlugin({
             if (optimistic || type !== "MESSAGE_CREATE") return;
             if (message.state === "SENDING") return;
             if (settings.store.ignoreBots && message.author?.bot) return;
+            if (settings.store.ignoreBlocked && RelationshipStore.isBlocked(message.author?.id)) return;
             if (!message.content) return;
             if (channelId !== SelectedChannelStore.getChannelId()) return;
 
@@ -96,9 +103,10 @@ export default definePlugin({
             }
         },
 
-        MESSAGE_REACTION_ADD({ optimistic, type, channelId, userId, emoji }: IReactionAdd) {
+        MESSAGE_REACTION_ADD({ optimistic, type, channelId, userId, messageAuthorId, emoji }: IReactionAdd) {
             if (optimistic || type !== "MESSAGE_REACTION_ADD") return;
             if (settings.store.ignoreBots && UserStore.getUser(userId)?.bot) return;
+            if (settings.store.ignoreBlocked && RelationshipStore.isBlocked(messageAuthorId)) return;
             if (channelId !== SelectedChannelStore.getChannelId()) return;
 
             const name = emoji.name.toLowerCase();

src/plugins/muteNewGuild.tsx

@@ -36,7 +36,7 @@ const settings = definePluginSettings({
         description: "Suppress All Role @mentions",
         type: OptionType.BOOLEAN,
         default: true
-    },
+    }
 });
 
 export default definePlugin({
@@ -50,6 +50,13 @@ export default definePlugin({
                 match: /INVITE_ACCEPT_SUCCESS.+?;(\i)=null.+?;/,
                 replace: (m, guildId) => `${m}$self.handleMute(${guildId});`
             }
+        },
+        {
+            find: "{joinGuild:function",
+            replacement: {
+                match: /guildId:(\w+),lurker:(\w+).{0,20}\)}\)\);/,
+                replace: (m, guildId, lurker) => `${m}if(!${lurker})$self.handleMute(${guildId});`
+            }
         }
     ],
     settings,

src/plugins/openInApp.ts

@@ -0,0 +1,147 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { definePluginSettings } from "@api/Settings";
+import { Devs } from "@utils/constants";
+import definePlugin, { OptionType } from "@utils/types";
+import { showToast, Toasts } from "@webpack/common";
+import type { MouseEvent } from "react";
+
+const ShortUrlMatcher = /^https:\/\/(spotify\.link|s\.team)\/.+$/;
+const SpotifyMatcher = /^https:\/\/open\.spotify\.com\/(track|album|artist|playlist|user)\/(.+)(?:\?.+?)?$/;
+const SteamMatcher = /^https:\/\/(steamcommunity\.com|(?:help|store)\.steampowered\.com)\/.+$/;
+const EpicMatcher = /^https:\/\/store\.epicgames\.com\/(.+)$/;
+
+const settings = definePluginSettings({
+    spotify: {
+        type: OptionType.BOOLEAN,
+        description: "Open Spotify links in the Spotify app",
+        default: true,
+    },
+    steam: {
+        type: OptionType.BOOLEAN,
+        description: "Open Steam links in the Steam app",
+        default: true,
+    },
+    epic: {
+        type: OptionType.BOOLEAN,
+        description: "Open Epic Games links in the Epic Games Launcher",
+        default: true,
+    }
+});
+
+export default definePlugin({
+    name: "OpenInApp",
+    description: "Open Spotify, Steam and Epic Games URLs in their respective apps instead of your browser",
+    authors: [Devs.Ven],
+    settings,
+
+    patches: [
+        {
+            find: '"MaskedLinkStore"',
+            replacement: {
+                match: /return ((\i)\.apply\(this,arguments\))(?=\}function \i.{0,200}\.trusted)/,
+                replace: "return $self.handleLink(...arguments).then(handled => handled || $1)"
+            }
+        },
+        // Make Spotify profile activity links open in app on web
+        {
+            find: "WEB_OPEN(",
+            predicate: () => !IS_DISCORD_DESKTOP && settings.store.spotify,
+            replacement: {
+                match: /\i\.\i\.isProtocolRegistered\(\)(.{0,100})window.open/g,
+                replace: "true$1VencordNative.native.openExternal"
+            }
+        },
+        {
+            find: ".CONNECTED_ACCOUNT_VIEWED,",
+            replacement: {
+                match: /(?<=href:\i,onClick:function\(\i\)\{)(?=\i=(\i)\.type,.{0,50}CONNECTED_ACCOUNT_VIEWED)/,
+                replace: "$self.handleAccountView(arguments[0],$1.type,$1.id);"
+            }
+        }
+    ],
+
+    async handleLink(data: { href: string; }, event?: MouseEvent) {
+        if (!data) return false;
+
+        let url = data.href;
+        if (!IS_WEB && ShortUrlMatcher.test(url)) {
+            event?.preventDefault();
+            // CORS jumpscare
+            url = await VencordNative.pluginHelpers.OpenInApp.resolveRedirect(url);
+        }
+
+        spotify: {
+            if (!settings.store.spotify) break spotify;
+
+            const match = SpotifyMatcher.exec(url);
+            if (!match) break spotify;
+
+            const [, type, id] = match;
+            VencordNative.native.openExternal(`spotify:${type}:${id}`);
+
+            event?.preventDefault();
+            return true;
+        }
+
+        steam: {
+            if (!settings.store.steam) break steam;
+
+            if (!SteamMatcher.test(url)) break steam;
+
+            VencordNative.native.openExternal(`steam://openurl/${url}`);
+            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);
+            return true;
+        }
+
+        epic: {
+            if (!settings.store.epic) break epic;
+
+            const match = EpicMatcher.exec(url);
+            if (!match) break epic;
+
+            VencordNative.native.openExternal(`com.epicgames.launcher://store/${match[1]}`);
+            event?.preventDefault();
+
+            return true;
+        }
+
+        // in case short url didn't end up being something we can handle
+        if (event?.defaultPrevented) {
+            window.open(url, "_blank");
+            return true;
+        }
+
+        return false;
+    },
+
+    handleAccountView(event: { preventDefault(): void; }, platformType: string, userId: string) {
+        if (platformType === "spotify" && settings.store.spotify) {
+            VencordNative.native.openExternal(`spotify:user:${userId}`);
+            event.preventDefault();
+        } else if (platformType === "steam" && settings.store.steam) {
+            VencordNative.native.openExternal(`steam://openurl/https://steamcommunity.com/profiles/${userId}`);
+            showToast("Opened link in Steam", Toasts.Type.SUCCESS);
+            event.preventDefault();
+        }
+    }
+});

src/plugins/pronoundb/components/PronounsChatComponent.tsx

@@ -52,7 +52,7 @@ export function CompactPronounsChatComponentWrapper({ message }: { message: Mess
 }
 
 function PronounsChatComponent({ message }: { message: Message; }) {
-    const result = useFormattedPronouns(message.author.id);
+    const [result] = useFormattedPronouns(message.author.id);
 
     return result
         ? (
@@ -64,7 +64,7 @@ function PronounsChatComponent({ message }: { message: Message; }) {
 }
 
 export function CompactPronounsChatComponent({ message }: { message: Message; }) {
-    const result = useFormattedPronouns(message.author.id);
+    const [result] = useFormattedPronouns(message.author.id);
 
     return result
         ? (

src/plugins/pronoundb/index.ts

@@ -26,6 +26,11 @@ import { CompactPronounsChatComponentWrapper, PronounsChatComponentWrapper } fro
 import { useProfilePronouns } from "./pronoundbUtils";
 import { settings } from "./settings";
 
+const PRONOUN_TOOLTIP_PATCH = {
+    match: /text:(.{0,10}.Messages\.USER_PROFILE_PRONOUNS)(?=,)/,
+    replace: '$& + (typeof vcPronounSource !== "undefined" ? ` (${vcPronounSource})` : "")'
+};
+
 export default definePlugin({
     name: "PronounDB",
     authors: [Devs.Tyman, Devs.TheKodeToad, Devs.Ven],
@@ -50,18 +55,24 @@ export default definePlugin({
         // Patch the profile popout username header to use our pronoun hook instead of Discord's pronouns
         {
             find: ".userTagNoNickname",
-            replacement: {
+            replacement: [
-                match: /=(\i)\.pronouns/,
+                {
-                replace: "=$self.useProfilePronouns($1.user.id,$1.pronouns)"
+                    match: /,(\i)=(\i)\.pronouns/,
-            }
+                    replace: ",[$1,vcPronounSource]=$self.useProfilePronouns($2.user.id)"
+                },
+                PRONOUN_TOOLTIP_PATCH
+            ]
         },
         // Patch the profile modal username header to use our pronoun hook instead of Discord's pronouns
         {
             find: ".USER_PROFILE_ACTIVITY",
-            replacement: {
+            replacement: [
-                match: /\).showPronouns/,
+                {
-                replace: ").showPronouns||true;const vcPronounce=$self.useProfilePronouns(arguments[0].user.id,arguments[0].displayProfile?.pronouns);if(arguments[0].displayProfile&&vcPronounce)arguments[0].displayProfile.pronouns=vcPronounce"
+                    match: /getGlobalName\(\i\);(?<=displayProfile.{0,200})/,
-            }
+                    replace: "$&const [vcPronounce,vcPronounSource]=$self.useProfilePronouns(arguments[0].user.id,true);if(arguments[0].displayProfile&&vcPronounce)arguments[0].displayProfile.pronouns=vcPronounce;"
+                },
+                PRONOUN_TOOLTIP_PATCH
+            ]
         }
     ],
 

src/plugins/pronoundb/pronoundbUtils.ts

@@ -29,6 +29,9 @@ import { PronounCode, PronounMapping, PronounsResponse } from "./types";
 
 const UserProfileStore = findStoreLazy("UserProfileStore");
 
+type PronounsWithSource = [string | null, string];
+const EmptyPronouns: PronounsWithSource = [null, ""];
+
 export const enum PronounsFormat {
     Lowercase = "LOWERCASE",
     Capitalized = "CAPITALIZED"
@@ -55,52 +58,59 @@ const bulkFetch = debounce(async () => {
     }
 });
 
-function getDiscordPronouns(id: string) {
+function getDiscordPronouns(id: string, useGlobalProfile: boolean = false) {
+    const globalPronouns = UserProfileStore.getUserProfile(id)?.pronouns;
+
+    if (useGlobalProfile) return globalPronouns;
+
     return (
         UserProfileStore.getGuildMemberProfile(id, getCurrentChannel()?.guild_id)?.pronouns
-        || UserProfileStore.getUserProfile(id)?.pronouns
+        || globalPronouns
     );
 }
 
-export function useFormattedPronouns(id: string, discordPronouns: string = getDiscordPronouns(id)): string | null {
+export function useFormattedPronouns(id: string, useGlobalProfile: boolean = false): PronounsWithSource {
-    const [result] = useAwaiter(() => fetchPronouns(id, discordPronouns), {
+    // Discord is so stupid you can put tons of newlines in pronouns
-        fallbackValue: getCachedPronouns(id, discordPronouns),
+    const discordPronouns = getDiscordPronouns(id, useGlobalProfile)?.trim().replace(NewLineRe, " ");
+
+    const [result] = useAwaiter(() => fetchPronouns(id), {
+        fallbackValue: getCachedPronouns(id),
         onError: e => console.error("Fetching pronouns failed: ", e)
     });
 
-    if (result && result !== "unspecified")
+    if (settings.store.pronounSource === PronounSource.PreferDiscord && discordPronouns)
-        return Object.hasOwn(PronounMapping, result)
+        return [discordPronouns, "Discord"];
-            ? formatPronouns(result) // PronounDB
-            : result; // Discord
 
-    return null;
+    if (result && result !== "unspecified")
+        return [formatPronouns(result), "PronounDB"];
+
+    return [discordPronouns, "Discord"];
 }
 
-export function useProfilePronouns(id: string, discordPronouns: string) {
+export function useProfilePronouns(id: string, useGlobalProfile: boolean = false): PronounsWithSource {
-    const pronouns = useFormattedPronouns(id, discordPronouns);
+    const pronouns = useFormattedPronouns(id, useGlobalProfile);
 
-    if (!settings.store.showInProfile) return null;
+    if (!settings.store.showInProfile) return EmptyPronouns;
-    if (!settings.store.showSelf && id === UserStore.getCurrentUser().id) return null;
+    if (!settings.store.showSelf && id === UserStore.getCurrentUser().id) return EmptyPronouns;
 
     return pronouns;
 }
 
 
-// Gets the cached pronouns, if you're too impatient for a promise!
+const NewLineRe = /\n+/g;
-export function getCachedPronouns(id: string, discordPronouns: string): string | null {
-    if (settings.store.pronounSource === PronounSource.PreferDiscord && discordPronouns)
-        return discordPronouns;
 
+// Gets the cached pronouns, if you're too impatient for a promise!
+export function getCachedPronouns(id: string): string | null {
     const cached = cache[id];
     if (cached && cached !== "unspecified") return cached;
 
-    return discordPronouns || cached || null;
+    return cached || null;
 }
 
 // Fetches the pronouns for one id, returning a promise that resolves if it was cached, or once the request is completed
-export function fetchPronouns(id: string, discordPronouns: string): Promise<string> {
+export function fetchPronouns(id: string): Promise<string> {
     return new Promise(res => {
-        const cached = getCachedPronouns(id, discordPronouns);
+        const cached = getCachedPronouns(id);
         if (cached) return res(cached);
 
         // If there is already a request added, then just add this callback to it

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/showConnections/index.tsx

@@ -147,6 +147,13 @@ function CompactConnectionComponent({ connection, theme }: { connection: Connect
                         className="vc-user-connection"
                         href={url}
                         target="_blank"
+                        onClick={e => {
+                            if (Vencord.Plugins.isPluginEnabled("OpenInApp")) {
+                                const OpenInApp = Vencord.Plugins.plugins.OpenInApp as any as typeof import("../openInApp").default;
+                                // handleLink will .preventDefault() if applicable
+                                OpenInApp.handleLink(e.currentTarget, e);
+                            }
+                        }}
                     >
                         {img}
                     </a>

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;
@@ -342,32 +342,27 @@ export default definePlugin({
             ]
         },
         {
-            find: "Guild voice channel without guild id.",
+            find: "useNotificationSettingsItem: channel cannot be undefined",
             replacement: [
                 {
                     // Render our HiddenChannelLockScreen component instead of the main stage channel component
-                    match: /Guild voice channel without guild id.+?children:(?<=(\i)\.getGuildId\(\).+?)(?=.{0,20}?}\)}function)/,
+                    match: /"124px".+?children:(?<=var (\i)=\i\.channel.+?)(?=.{0,20}?}\)}function)/,
                     replace: (m, channel) => `${m}$self.isHiddenChannel(${channel})?$self.HiddenChannelLockScreen(${channel}):`
                 },
                 {
                     // Disable useless components for the HiddenChannelLockScreen of stage channels
-                    match: /render(?!Header).{0,30}?:(?<=(\i)\.getGuildId\(\).+?Guild voice channel without guild id.+?)/g,
+                    match: /render(?:BottomLeft|BottomCenter|BottomRight|ChatToasts):(?<=var (\i)=\i\.channel.+?)/g,
                     replace: (m, channel) => `${m}$self.isHiddenChannel(${channel})?null:`
                 },
-                // Prevent Discord from replacing our route if we aren't connected to the stage channel
-                {
-                    match: /(?=!\i&&!\i&&!\i.{0,80}?(\i)\.getGuildId\(\).{0,50}?Guild voice channel without guild id)(?<=if\()/,
-                    replace: (_, channel) => `!$self.isHiddenChannel(${channel})&&`
-                },
                 {
                     // Disable gradients for the HiddenChannelLockScreen of stage channels
-                    match: /Guild voice channel without guild id.+?disableGradients:(?<=(\i)\.getGuildId\(\).+?)/,
+                    match: /"124px".+?disableGradients:(?<=(\i)\.getGuildId\(\).+?)/,
                     replace: (m, channel) => `${m}$self.isHiddenChannel(${channel})||`
                 },
                 {
                     // Disable strange styles applied to the header for the HiddenChannelLockScreen of stage channels
-                    match: /Guild voice channel without guild id.+?style:(?<=(\i)\.getGuildId\(\).+?)/,
+                    match: /"124px".+?style:(?<=(\i)\.getGuildId\(\).+?)/,
-                    replace: (m, channel) => `${m}$self.isHiddenChannel(${channel})?undefined:`
+                    replace: (m, channel) => `${m}$self.isHiddenChannel(${channel})?void 0:`
                 },
                 {
                     // Remove the divider and amount of users in stage channel components for the HiddenChannelLockScreen
@@ -376,7 +371,7 @@ export default definePlugin({
                 },
                 {
                     // Remove the open chat button for the HiddenChannelLockScreen
-                    match: /"recents".+?null,(?=.+?channelId:(\i)\.id,showRequestToSpeakSidebar)/,
+                    match: /"recents".+?&&(?=\(.+?channelId:(\i)\.id,showRequestToSpeakSidebar)/,
                     replace: (m, channel) => `${m}!$self.isHiddenChannel(${channel})&&`
                 }
             ],
@@ -477,7 +472,7 @@ export default definePlugin({
 
     HiddenChannelLockScreen: (channel: any) => <HiddenChannelLockScreen channel={channel} />,
 
-    LockIcon: () => (
+    LockIcon: ErrorBoundary.wrap(() => (
         <svg
             className={ChannelListClasses.icon}
             height="18"
@@ -488,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,8 +21,8 @@ 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";
 import { ContextMenu, FluxDispatcher, Forms, Menu, React, useEffect, useState, useStateFromStores } from "@webpack/common";
 
@@ -231,7 +231,7 @@ function AlbumContextMenu({ track }: { track: Track; }) {
                 id="view-cover"
                 label="View Album Cover"
                 // trolley
-                action={() => (Vencord.Plugins.plugins.ViewIcons as any).openImage(track.album.image.url)}
+                action={() => openImageModal(track.album.image.url)}
                 icon={ImageIcon}
             />
             <Menu.MenuControlItem
@@ -253,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;
 
@@ -288,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>
@@ -302,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>
                         ))}
@@ -320,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/SpotifyStore.ts

@@ -89,7 +89,7 @@ export const SpotifyStore = proxyLazy(() => {
         public isSettingPosition = false;
 
         public openExternal(path: string) {
-            const url = Settings.plugins.SpotifyControls.useSpotifyUris
+            const url = Settings.plugins.SpotifyControls.useSpotifyUris || Vencord.Plugins.isPluginEnabled("OpenInApp")
                 ? "spotify:" + path.replaceAll("/", (_, idx) => idx === 0 ? "" : ":")
                 : "https://open.spotify.com" + path;
 

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/textReplace.tsx

@@ -123,6 +123,7 @@ function TextReplace({ title, rulesArray, rulesKey, update }: TextReplaceProps)
     const isRegexRules = title === "Using Regex";
 
     async function onClickRemove(index: number) {
+        if (index === rulesArray.length - 1) return;
         rulesArray.splice(index, 1);
 
         await DataStore.set(rulesKey, rulesArray);

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/plugins/userVoiceShow/index.tsx

@@ -51,6 +51,8 @@ const VoiceChannelField = ErrorBoundary.wrap(({ user }: UserProps) => {
     if (!channelId) return null;
 
     const channel = ChannelStore.getChannel(channelId);
+    if (!channel) return null;
+
     const guild = GuildStore.getGuild(channel.guild_id);
 
     if (!guild) return null; // When in DM call

src/plugins/uwuify.ts

@@ -1,143 +0,0 @@
-/*
- * Vencord, a modification for Discord's desktop app
- * Copyright (c) 2022 Vendicated and contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-import { findOption, RequiredMessageOption } from "@api/Commands";
-import { addPreEditListener, addPreSendListener, MessageObject, removePreEditListener, removePreSendListener } from "@api/MessageEvents";
-import { definePluginSettings } from "@api/Settings";
-import { Devs } from "@utils/constants";
-import definePlugin, { OptionType } from "@utils/types";
-
-const endings = [
-    "rawr x3",
-    "OwO",
-    "UwU",
-    "o.O",
-    "-.-",
-    ">w<",
-    "(⑅˘꒳˘)",
-    "(ꈍᴗꈍ)",
-    "(˘ω˘)",
-    "(U ᵕ U❁)",
-    "σωσ",
-    "òωó",
-    "(///ˬ///✿)",
-    "(U ﹏ U)",
-    "( ͡o ω ͡o )",
-    "ʘwʘ",
-    ":3",
-    ":3", // important enough to have twice
-    "XD",
-    "nyaa~~",
-    "mya",
-    ">_<",
-    "😳",
-    "🥺",
-    "😳😳😳",
-    "rawr",
-    "^^",
-    "^^;;",
-    "(ˆ ﻌ ˆ)♡",
-    "^•ﻌ•^",
-    "/(^•ω•^)",
-    "(✿oωo)"
-];
-
-const replacements = [
-    ["small", "smol"],
-    ["cute", "kawaii~"],
-    ["fluff", "floof"],
-    ["love", "luv"],
-    ["stupid", "baka"],
-    ["what", "nani"],
-    ["meow", "nya~"],
-    ["hello", "hewwo"],
-];
-
-const settings = definePluginSettings({
-    uwuEveryMessage: {
-        description: "Make every single message uwuified",
-        type: OptionType.BOOLEAN,
-        default: false,
-        restartNeeded: false
-    }
-});
-
-function selectRandomElement(arr) {
-    // generate a random index based on the length of the array
-    const randomIndex = Math.floor(Math.random() * arr.length);
-
-    // return the element at the randomly generated index
-    return arr[randomIndex];
-}
-
-
-function uwuify(message: string): string {
-    message = message.toLowerCase();
-    // words
-    for (const pair of replacements) {
-        message = message.replaceAll(pair[0], pair[1]);
-    }
-    message = message
-        .replaceAll(/([ \t\n])n/g, "$1ny") // nyaify
-        .replaceAll(/[lr]/g, "w") // [lr] > w
-        .replaceAll(/([ \t\n])([a-z])/g, (_, p1, p2) => Math.random() < .5 ? `${p1}${p2}-${p2}` : `${p1}${p2}`) // stutter
-        .replaceAll(/([^.,!][.,!])([ \t\n])/g, (_, p1, p2) => `${p1} ${selectRandomElement(endings)}${p2}`); // endings
-    return message;
-}
-
-
-
-// actual command declaration
-export default definePlugin({
-    name: "UwUifier",
-    description: "Simply uwuify commands",
-    authors: [Devs.echo, Devs.skyevg, Devs.PandaNinjas],
-    dependencies: ["CommandsAPI", "MessageEventsAPI"],
-    settings,
-
-    commands: [
-        {
-            name: "uwuify",
-            description: "uwuifies your messages",
-            options: [RequiredMessageOption],
-
-            execute: opts => ({
-                content: uwuify(findOption(opts, "message", "")),
-            }),
-        },
-    ],
-
-    onSend(msg: MessageObject) {
-        // Only run when it's enabled
-        if (settings.store.uwuEveryMessage) {
-            msg.content = uwuify(msg.content);
-        }
-    },
-
-    start() {
-        this.preSend = addPreSendListener((_, msg) => this.onSend(msg));
-        this.preEdit = addPreEditListener((_cid, _mid, msg) =>
-            this.onSend(msg)
-        );
-    },
-
-    stop() {
-        removePreSendListener(this.preSend);
-        removePreEditListener(this.preEdit);
-    },
-});

src/plugins/validUser.tsx

@@ -75,7 +75,7 @@ function MentionWrapper({ data, UserMention, RoleMention, parse, props }: Mentio
                     const mention = children?.[0]?.props?.children;
                     if (typeof mention !== "string") return;
 
-                    const id = mention.match(/<@(\d+)>/)?.[1];
+                    const id = mention.match(/<@!?(\d+)>/)?.[1];
                     if (!id) return;
 
                     if (fetching.has(id))

src/plugins/vcNarrator.tsx

@@ -156,6 +156,8 @@ export default definePlugin({
             const myChanId = SelectedChannelStore.getVoiceChannelId();
             const myId = UserStore.getCurrentUser().id;
 
+            if (ChannelStore.getChannel(myChanId!)?.type === 13 /* Stage Channel */) return;
+
             for (const state of voiceStates) {
                 const { userId, channelId, oldChannelId } = state;
                 const isMe = userId === myId;

src/plugins/vencordToolbox/index.css

@@ -1,3 +1,8 @@
+.vc-toolbox-btn,
+.vc-toolbox-btn svg {
+    -webkit-app-region: no-drag;
+}
+
 .vc-toolbox-btn svg {
     color: var(--interactive-normal);
 }

src/plugins/viewIcons.tsx

@@ -35,7 +35,7 @@ interface UserContextProps {
 }
 
 interface GuildContextProps {
-    guild: Guild;
+    guild?: Guild;
 }
 
 const settings = definePluginSettings({
@@ -100,7 +100,8 @@ const UserContext: NavContextMenuPatchCallback = (children, { user, guildId }: U
                     action={() => openImage(BannerStore.getGuildMemberAvatarURLSimple({
                         userId: user.id,
                         avatar: memberAvatar,
-                        guildId
+                        guildId,
+                        canAnimate: true
                     }, true))}
                     icon={ImageIcon}
                 />
@@ -109,7 +110,10 @@ const UserContext: NavContextMenuPatchCallback = (children, { user, guildId }: U
     ));
 };
 
-const GuildContext: NavContextMenuPatchCallback = (children, { guild: { id, icon, banner } }: GuildContextProps) => () => {
+const GuildContext: NavContextMenuPatchCallback = (children, { guild }: GuildContextProps) => () => {
+    if(!guild) return;
+
+    const { id, icon, banner } = guild;
     if (!banner && !icon) return;
 
     children.splice(-1, 0, (
@@ -181,8 +185,8 @@ export default definePlugin({
                 // style: { backgroundImage: shouldShowBanner ? "url(".concat(bannerUrl,
                 match: /style:\{(?=backgroundImage:(\i&&\i)\?"url\("\.concat\((\i),)/,
                 replace:
-                    // onClick: () => shouldShowBanner && openImage(bannerUrl), style: { cursor: shouldShowBanner ? "pointer" : void 0,
+                    // onClick: () => shouldShowBanner && ev.target.style.backgroundImage && openImage(bannerUrl), style: { cursor: shouldShowBanner ? "pointer" : void 0,
-                    'onClick:()=>$1&&$self.openImage($2),style:{cursor:$1?"pointer":void 0,'
+                    'onClick:ev=>$1&&ev.target.style.backgroundImage&&$self.openImage($2),style:{cursor:$1?"pointer":void 0,'
             }
         },
         {

src/plugins/voiceMessages/DesktopRecorder.tsx

@@ -0,0 +1,68 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { Button, showToast, Toasts, useState } from "@webpack/common";
+
+import type { VoiceRecorder } from ".";
+import { settings } from "./settings";
+
+export const VoiceRecorderDesktop: VoiceRecorder = ({ setAudioBlob, onRecordingChange }) => {
+    const [recording, setRecording] = useState(false);
+
+    const changeRecording = (recording: boolean) => {
+        setRecording(recording);
+        onRecordingChange?.(recording);
+    };
+
+    function toggleRecording() {
+        const discordVoice = DiscordNative.nativeModules.requireModule("discord_voice");
+        const nowRecording = !recording;
+
+        if (nowRecording) {
+            discordVoice.startLocalAudioRecording(
+                {
+                    echoCancellation: settings.store.echoCancellation,
+                    noiseCancellation: settings.store.noiseSuppression,
+                },
+                (success: boolean) => {
+                    if (success)
+                        changeRecording(true);
+                    else
+                        showToast("Failed to start recording", Toasts.Type.FAILURE);
+                }
+            );
+        } else {
+            discordVoice.stopLocalAudioRecording(async (filePath: string) => {
+                if (filePath) {
+                    const buf = await VencordNative.pluginHelpers.VoiceMessages.readRecording(filePath);
+                    if (buf)
+                        setAudioBlob(new Blob([buf], { type: "audio/ogg; codecs=opus" }));
+                    else
+                        showToast("Failed to finish recording", Toasts.Type.FAILURE);
+                }
+                changeRecording(false);
+            });
+        }
+    }
+
+    return (
+        <Button onClick={toggleRecording}>
+            {recording ? "Stop" : "Start"} recording
+        </Button>
+    );
+};

src/plugins/voiceMessages/VoicePreview.tsx

@@ -0,0 +1,57 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { LazyComponent, useTimer } from "@utils/react";
+import { findByCode } from "@webpack";
+
+import { cl } from "./utils";
+
+interface VoiceMessageProps {
+    src: string;
+    waveform: string;
+}
+const VoiceMessage = LazyComponent<VoiceMessageProps>(() => findByCode('["onVolumeChange","volume","onMute"]'));
+
+export type VoicePreviewOptions = {
+    src?: string;
+    waveform: string;
+    recording?: boolean;
+};
+export const VoicePreview = ({
+    src,
+    waveform,
+    recording,
+}: VoicePreviewOptions) => {
+    const durationMs = useTimer({
+        deps: [recording]
+    });
+
+    const durationSeconds = recording ? Math.floor(durationMs / 1000) : 0;
+    const durationDisplay = Math.floor(durationSeconds / 60) + ":" + (durationSeconds % 60).toString().padStart(2, "0");
+
+    if (src && !recording)
+        return <VoiceMessage key={src} src={src} waveform={waveform} />;
+
+    return (
+        <div className={cl("preview", recording ? "preview-recording" : [])}>
+            <div className={cl("preview-indicator")} />
+            <div className={cl("preview-time")}>{durationDisplay}</div>
+            <div className={cl("preview-label")}>{recording ? "RECORDING" : "----"}</div>
+        </div>
+    );
+};

src/plugins/voiceMessages/WebRecorder.tsx

@@ -0,0 +1,87 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { Button, useState } from "@webpack/common";
+
+import type { VoiceRecorder } from ".";
+import { settings } from "./settings";
+
+export const VoiceRecorderWeb: VoiceRecorder = ({ setAudioBlob, onRecordingChange }) => {
+    const [recording, setRecording] = useState(false);
+    const [paused, setPaused] = useState(false);
+    const [recorder, setRecorder] = useState<MediaRecorder>();
+    const [chunks, setChunks] = useState<Blob[]>([]);
+
+    const changeRecording = (recording: boolean) => {
+        setRecording(recording);
+        onRecordingChange?.(recording);
+    };
+
+    function toggleRecording() {
+        const nowRecording = !recording;
+
+        if (nowRecording) {
+            navigator.mediaDevices.getUserMedia({
+                audio: {
+                    echoCancellation: settings.store.echoCancellation,
+                    noiseSuppression: settings.store.noiseSuppression,
+                }
+            }).then(stream => {
+                const chunks = [] as Blob[];
+                setChunks(chunks);
+
+                const recorder = new MediaRecorder(stream);
+                setRecorder(recorder);
+                recorder.addEventListener("dataavailable", e => {
+                    chunks.push(e.data);
+                });
+                recorder.start();
+
+                changeRecording(true);
+            });
+        } else {
+            if (recorder) {
+                recorder.addEventListener("stop", () => {
+                    setAudioBlob(new Blob(chunks, { type: "audio/ogg; codecs=opus" }));
+
+                    changeRecording(false);
+                });
+                recorder.stop();
+            }
+        }
+    }
+
+    return (
+        <>
+            <Button onClick={toggleRecording}>
+                {recording ? "Stop" : "Start"} recording
+            </Button>
+
+            <Button
+                disabled={!recording}
+                onClick={() => {
+                    setPaused(!paused);
+                    if (paused) recorder?.resume();
+                    else recorder?.pause();
+                }}
+            >
+                {paused ? "Resume" : "Pause"} recording
+            </Button>
+        </>
+    );
+};

src/plugins/voiceMessages/index.tsx

@@ -0,0 +1,239 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import "./styles.css";
+
+import { addContextMenuPatch, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
+import { Flex } from "@components/Flex";
+import { Microphone } from "@components/Icons";
+import { Devs } from "@utils/constants";
+import { ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal";
+import { useAwaiter } from "@utils/react";
+import definePlugin from "@utils/types";
+import { chooseFile } from "@utils/web";
+import { findByPropsLazy, findLazy, findStoreLazy } from "@webpack";
+import { Button, FluxDispatcher, Forms, Menu, PermissionsBits, PermissionStore, RestAPI, SelectedChannelStore, showToast, SnowflakeUtils, Toasts, useEffect, useState } from "@webpack/common";
+import { ComponentType } from "react";
+
+import { VoiceRecorderDesktop } from "./DesktopRecorder";
+import { settings } from "./settings";
+import { cl } from "./utils";
+import { VoicePreview } from "./VoicePreview";
+import { VoiceRecorderWeb } from "./WebRecorder";
+
+const CloudUpload = findLazy(m => m.prototype?.uploadFileToCloud);
+const MessageCreator = findByPropsLazy("getSendMessageOptionsForReply", "sendMessage");
+const PendingReplyStore = findStoreLazy("PendingReplyStore");
+
+export type VoiceRecorder = ComponentType<{
+    setAudioBlob(blob: Blob): void;
+    onRecordingChange?(recording: boolean): void;
+}>;
+
+const VoiceRecorder = IS_DISCORD_DESKTOP ? VoiceRecorderDesktop : VoiceRecorderWeb;
+
+export default definePlugin({
+    name: "VoiceMessages",
+    description: "Allows you to send voice messages like on mobile. To do so, right click the upload button and click Send Voice Message",
+    authors: [Devs.Ven, Devs.Vap, Devs.Nickyux],
+    settings,
+
+    start() {
+        addContextMenuPatch("channel-attach", ctxMenuPatch);
+    },
+
+    stop() {
+        removeContextMenuPatch("channel-attach", ctxMenuPatch);
+    }
+});
+
+type AudioMetadata = {
+    waveform: string,
+    duration: number,
+};
+const EMPTY_META: AudioMetadata = {
+    waveform: "AAAAAAAAAAAA",
+    duration: 1,
+};
+
+function sendAudio(blob: Blob, meta: AudioMetadata) {
+    const channelId = SelectedChannelStore.getChannelId();
+    const reply = PendingReplyStore.getPendingReply(channelId);
+    if (reply) FluxDispatcher.dispatch({ type: "DELETE_PENDING_REPLY", channelId });
+
+    const upload = new CloudUpload({
+        file: new File([blob], "voice-message.ogg", { type: "audio/ogg; codecs=opus" }),
+        isClip: false,
+        isThumbnail: false,
+        platform: 1,
+    }, channelId, false, 0);
+
+    upload.on("complete", () => {
+        RestAPI.post({
+            url: `/channels/${channelId}/messages`,
+            body: {
+                flags: 1 << 13,
+                channel_id: channelId,
+                content: "",
+                nonce: SnowflakeUtils.fromTimestamp(Date.now()),
+                sticker_ids: [],
+                type: 0,
+                attachments: [{
+                    id: "0",
+                    filename: upload.filename,
+                    uploaded_filename: upload.uploadedFilename,
+                    waveform: meta.waveform,
+                    duration_secs: meta.duration,
+                }],
+                message_reference: reply ? MessageCreator.getSendMessageOptionsForReply(reply)?.messageReference : null,
+            }
+        });
+    });
+    upload.on("error", () => showToast("Failed to upload voice message", Toasts.Type.FAILURE));
+
+    upload.upload();
+}
+
+function useObjectUrl() {
+    const [url, setUrl] = useState<string>();
+    const setWithFree = (blob: Blob) => {
+        if (url)
+            URL.revokeObjectURL(url);
+        setUrl(URL.createObjectURL(blob));
+    };
+
+    return [url, setWithFree] as const;
+}
+
+function Modal({ modalProps }: { modalProps: ModalProps; }) {
+    const [isRecording, setRecording] = useState(false);
+    const [blob, setBlob] = useState<Blob>();
+    const [blobUrl, setBlobUrl] = useObjectUrl();
+
+    useEffect(() => () => {
+        if (blobUrl)
+            URL.revokeObjectURL(blobUrl);
+    }, [blobUrl]);
+
+    const [meta] = useAwaiter(async () => {
+        if (!blob) return EMPTY_META;
+
+        const audioContext = new AudioContext();
+        const audioBuffer = await audioContext.decodeAudioData(await blob.arrayBuffer());
+        const channelData = audioBuffer.getChannelData(0);
+
+        // average the samples into much lower resolution bins, maximum of 256 total bins
+        const bins = new Uint8Array(window._.clamp(Math.floor(audioBuffer.duration * 10), Math.min(32, channelData.length), 256));
+        const samplesPerBin = Math.floor(channelData.length / bins.length);
+
+        // Get root mean square of each bin
+        for (let binIdx = 0; binIdx < bins.length; binIdx++) {
+            let squares = 0;
+            for (let sampleOffset = 0; sampleOffset < samplesPerBin; sampleOffset++) {
+                const sampleIdx = binIdx * samplesPerBin + sampleOffset;
+                squares += channelData[sampleIdx] ** 2;
+            }
+            bins[binIdx] = ~~(Math.sqrt(squares / samplesPerBin) * 0xFF);
+        }
+
+        // Normalize bins with easing
+        const maxBin = Math.max(...bins);
+        const ratio = 1 + (0xFF / maxBin - 1) * Math.min(1, 100 * (maxBin / 0xFF) ** 3);
+        for (let i = 0; i < bins.length; i++) bins[i] = Math.min(0xFF, ~~(bins[i] * ratio));
+
+        return {
+            waveform: window.btoa(String.fromCharCode(...bins)),
+            duration: audioBuffer.duration,
+        };
+    }, {
+        deps: [blob],
+        fallbackValue: EMPTY_META,
+    });
+
+    return (
+        <ModalRoot {...modalProps}>
+            <ModalHeader>
+                <Forms.FormTitle>Record Voice Message</Forms.FormTitle>
+            </ModalHeader>
+
+            <ModalContent className={cl("modal")}>
+                <div className={cl("buttons")}>
+                    <VoiceRecorder
+                        setAudioBlob={blob => {
+                            setBlob(blob);
+                            setBlobUrl(blob);
+                        }}
+                        onRecordingChange={setRecording}
+                    />
+
+                    <Button
+                        onClick={async () => {
+                            const file = await chooseFile("audio/*");
+                            if (file) {
+                                setBlob(file);
+                                setBlobUrl(file);
+                            }
+                        }}
+                    >
+                        Upload File
+                    </Button>
+                </div>
+
+                <Forms.FormTitle>Preview</Forms.FormTitle>
+                <VoicePreview
+                    src={blobUrl}
+                    waveform={meta.waveform}
+                    recording={isRecording}
+                />
+
+            </ModalContent>
+
+            <ModalFooter>
+                <Button
+                    disabled={!blob}
+                    onClick={() => {
+                        sendAudio(blob!, meta);
+                        modalProps.onClose();
+                        showToast("Now sending voice message... Please be patient", Toasts.Type.MESSAGE);
+                    }}
+                >
+                    Send
+                </Button>
+            </ModalFooter>
+        </ModalRoot>
+    );
+}
+
+const ctxMenuPatch: NavContextMenuPatchCallback = (children, props) => () => {
+    if (props.channel.guild_id && !(PermissionStore.can(PermissionsBits.SEND_VOICE_MESSAGES, props.channel) && PermissionStore.can(PermissionsBits.SEND_MESSAGES, props.channel))) return;
+
+    children.push(
+        <Menu.MenuItem
+            id="vc-send-vmsg"
+            label={
+                <>
+                    <Flex flexDirection="row" style={{ alignItems: "center", gap: 8 }}>
+                        <Microphone height={24} width={24} />
+                        Send voice message
+                    </Flex>
+                </>
+            }
+            action={() => openModal(modalProps => <Modal modalProps={modalProps} />)}
+        />
+    );
+};

src/plugins/voiceMessages/settings.ts

@@ -0,0 +1,33 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { definePluginSettings } from "@api/Settings";
+import { OptionType } from "@utils/types";
+
+export const settings = definePluginSettings({
+    noiseSuppression: {
+        type: OptionType.BOOLEAN,
+        description: "Noise Suppression",
+        default: true,
+    },
+    echoCancellation: {
+        type: OptionType.BOOLEAN,
+        description: "Echo Cancellation",
+        default: true,
+    },
+});

src/plugins/voiceMessages/styles.css

@@ -0,0 +1,54 @@
+.vc-vmsg-modal {
+    padding: 1em;
+}
+
+.vc-vmsg-buttons {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.5em;
+    margin-bottom: 1em;
+}
+
+.vc-vmsg-modal audio {
+    width: 100%;
+}
+
+.vc-vmsg-preview {
+    color: var(--text-normal);
+    border-radius: 24px;
+    background-color: var(--background-secondary);
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    height: 48px;
+}
+
+.vc-vmsg-preview-indicator {
+    background: var(--button-secondary-background);
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    transition: background 0.2s ease-in-out;
+}
+
+.vc-vmsg-preview-recording .vc-vmsg-preview-indicator {
+    background: var(--status-danger);
+}
+
+.vc-vmsg-preview-time {
+    opacity: 0.8;
+    margin: 0 0.5em;
+    font-size: 80%;
+
+    /* monospace so different digits have same size */
+    font-family: var(--font-code);
+}
+
+.vc-vmsg-preview-label {
+    opacity: 0.5;
+    letter-spacing: 0.125em;
+    font-weight: 600;
+    flex: 1;
+    text-align: center;
+}

src/plugins/voiceMessages/utils.ts

@@ -0,0 +1,21 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { classNameFactory } from "@api/Styles";
+
+export const cl = classNameFactory("vc-vmsg-");

src/plugins/webContextMenus.web.ts

@@ -47,9 +47,10 @@ const settings = definePluginSettings({
 
 export default definePlugin({
     name: "WebContextMenus",
-    description: "Re-adds context menus missing in the web version of Discord: Images, ChatInputBar, Links, 'Copy Link', 'Open Link', 'Copy Image', 'Save Image'",
+    description: "Re-adds context menus missing in the web version of Discord: Links & Images (Copy/Open Link/Image), Text Area (Copy, Cut, Paste, SpellCheck)",
     authors: [Devs.Ven],
     enabledByDefault: true,
+    required: IS_VENCORD_DESKTOP,
 
     settings,
 
@@ -146,36 +147,30 @@ export default definePlugin({
             }
         },
         {
-            find: ':"command-suggestions"',
+            find: 'navId:"textarea-context"',
+            all: true,
             predicate: () => settings.store.addBack,
             replacement: [
-                {
-                    // desktopOnlyEntries = makeEntries(), spellcheckChildren = desktopOnlyEntries[0], languageChildren = desktopOnlyEntries[1]
-                    match: /\i=.{0,30}text:\i,target:\i,onHeightUpdate:\i\}\),2\),(\i)=\i\[0\],(\i)=\i\[1\]/,
-                    // set spellcheckChildren & languageChildren to empty arrays, so just in case patch 3 fails, we don't
-                    // reference undefined variables
-                    replace: "$1=[],$2=[]",
-                },
                 {
                     // if (!IS_DESKTOP) return null;
                     match: /if\(!\i\.\i\)return null;/,
                     replace: ""
                 },
-                {
-                    // do not add menu items for entries removed in patch 1. Using a lookbehind for group 1 is slow,
-                    // so just capture and add back
-                    match: /("submit-button".+?)(\(0,\i\.jsx\)\(\i\.MenuGroup,\{children:\i\}\),){2}/,
-                    replace: "$1"
-                },
                 {
                     // Change calls to DiscordNative.clipboard to us instead
                     match: /\b\i\.default\.(copy|cut|paste)/g,
                     replace: "$self.$1"
                 }
             ]
+        },
+        {
+            find: '"add-to-dictionary"',
+            predicate: () => settings.store.addBack,
+            replacement: {
+                match: /var \i=\i\.text,/,
+                replace: "return [null,null];$&"
+            }
         }
-
-        // TODO: Maybe add spellcheck for VencordDesktop
     ],
 
     async copyImage(url: string) {

src/plugins/webKeybinds.vencordDesktop.ts

@@ -0,0 +1,79 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { Devs } from "@utils/constants";
+import definePlugin from "@utils/types";
+import { findLazy, mapMangledModuleLazy } from "@webpack";
+import { ComponentDispatch, FluxDispatcher, NavigationRouter, SelectedGuildStore, SettingsRouter } from "@webpack/common";
+
+const GuildNavBinds = mapMangledModuleLazy("mod+alt+down", {
+    CtrlTab: m => m.binds?.at(-1) === "ctrl+tab",
+    CtrlShiftTab: m => m.binds?.at(-1) === "ctrl+shift+tab",
+});
+
+const DigitBinds = findLazy(m => m.binds?.[0] === "mod+1");
+
+export default definePlugin({
+    name: "WebKeybinds",
+    description: "Re-adds keybinds missing in the web version of Discord: ctrl+t, ctrl+shift+t, ctrl+tab, ctrl+shift+tab, ctrl+1-9, ctrl+,",
+    authors: [Devs.Ven],
+    enabledByDefault: true,
+
+    onKey(e: KeyboardEvent) {
+        const hasCtrl = e.ctrlKey || (e.metaKey && navigator.platform.includes("Mac"));
+
+        if (hasCtrl) switch (e.key) {
+            case "t":
+            case "T":
+                e.preventDefault();
+                if (e.shiftKey) {
+                    if (SelectedGuildStore.getGuildId()) NavigationRouter.transitionToGuild("@me");
+                    ComponentDispatch.safeDispatch("TOGGLE_DM_CREATE");
+                } else {
+                    FluxDispatcher.dispatch({
+                        type: "QUICKSWITCHER_SHOW",
+                        query: "",
+                        queryMode: null
+                    });
+                }
+                break;
+            case ",":
+                e.preventDefault();
+                SettingsRouter.open("My Account");
+                break;
+            case "Tab":
+                const handler = e.shiftKey ? GuildNavBinds.CtrlShiftTab : GuildNavBinds.CtrlTab;
+                handler.action(e);
+                break;
+            default:
+                if (e.key >= "1" && e.key <= "9") {
+                    e.preventDefault();
+                    DigitBinds.action(e, `mod+${e.key}`);
+                }
+                break;
+        }
+    },
+
+    start() {
+        document.addEventListener("keydown", this.onKey);
+    },
+
+    stop() {
+        document.removeEventListener("keydown", this.onKey);
+    }
+});

src/utils/IpcEvents.ts

@@ -18,8 +18,14 @@
 
 export const enum IpcEvents {
     QUICK_CSS_UPDATE = "VencordQuickCssUpdate",
+    THEME_UPDATE = "VencordThemeUpdate",
     GET_QUICK_CSS = "VencordGetQuickCss",
     SET_QUICK_CSS = "VencordSetQuickCss",
+    UPLOAD_THEME = "VencordUploadTheme",
+    DELETE_THEME = "VencordDeleteTheme",
+    GET_THEMES_DIR = "VencordGetThemesDir",
+    GET_THEMES_LIST = "VencordGetThemesList",
+    GET_THEME_DATA = "VencordGetThemeData",
     GET_SETTINGS_DIR = "VencordGetSettingsDir",
     GET_SETTINGS = "VencordGetSettings",
     SET_SETTINGS = "VencordSetSettings",
@@ -30,4 +36,7 @@ export const enum IpcEvents {
     UPDATE = "VencordUpdate",
     BUILD = "VencordBuild",
     OPEN_MONACO_EDITOR = "VencordOpenMonacoEditor",
+
+    OPEN_IN_APP__RESOLVE_REDIRECT = "VencordOIAResolveRedirect",
+    VOICE_MESSAGES_READ_RECORDING = "VencordVMReadRecording",
 }

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/constants.ts

@@ -265,7 +265,7 @@ export const Devs = /* #__PURE__*/ Object.freeze({
     },
     Dziurwa: {
         name: "Dziurwa",
-        id: 787017887877169173n
+        id: 1034579679526526976n
     },
     AutumnVN: {
         name: "AutumnVN",
@@ -329,7 +329,7 @@ export const Devs = /* #__PURE__*/ Object.freeze({
     },
     rad: {
         name: "rad",
-        id: 113027285765885952n
+        id: 610945092504780823n
     },
     HypedDomi: {
         name: "HypedDomi",

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,18 +43,37 @@ async function initThemes() {
     if (!themesStyle) {
         themesStyle = document.createElement("style");
         themesStyle.id = "vencord-themes";
-        document.head.appendChild(themesStyle);
+        document.documentElement.appendChild(themesStyle);
     }
 
-    const { themeLinks } = Settings;
+    const { themeLinks, enabledThemes } = Settings;
-    const links = themeLinks.map(link => `@import url("${link.trim()}");`).join("\n");
+
-    themesStyle.textContent = links;
+    const links: string[] = [...themeLinks];
+
+    if (IS_WEB) {
+        for (const theme of enabledThemes) {
+            const themeData = await VencordNative.themes.getThemeData(theme);
+            if (!themeData) continue;
+            const blob = new Blob([themeData], { type: "text/css" });
+            links.push(URL.createObjectURL(blob));
+        }
+    } else {
+        const localThemes = enabledThemes.map(theme => `vencord:///themes/${theme}?v=${Date.now()}`);
+        links.push(...localThemes);
+    }
+
+    themesStyle.textContent = links.map(link => `@import url("${link.trim()}");`).join("\n");
 }
 
 document.addEventListener("DOMContentLoaded", () => {
+    initThemes();
+
     toggle(Settings.useQuickCss);
     addSettingsListener("useQuickCss", toggle);
 
-    initThemes();
     addSettingsListener("themeLinks", initThemes);
+    addSettingsListener("enabledThemes", initThemes);
+
+    if (!IS_WEB)
+        VencordNative.quickCss.addThemeChangeListener(initThemes);
 });

src/utils/react.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { React, useEffect, useReducer, useState } from "@webpack/common";
+import { React, useEffect, useMemo, useReducer, useState } from "@webpack/common";
 
 import { makeLazy } from "./lazy";
 import { checkIntersecting } from "./misc";
@@ -135,3 +135,24 @@ export function LazyComponent<T extends object = any>(factory: () => React.Compo
         return <Component {...props} />;
     };
 }
+
+interface TimerOpts {
+    interval?: number;
+    deps?: unknown[];
+}
+
+export function useTimer({ interval = 1000, deps = [] }: TimerOpts) {
+    const [time, setTime] = useState(0);
+    const start = useMemo(() => Date.now(), deps);
+
+    useEffect(() => {
+        const intervalId = setInterval(() => setTime(Date.now() - start), interval);
+
+        return () => {
+            setTime(0);
+            clearInterval(intervalId);
+        };
+    }, deps);
+
+    return time;
+}

src/utils/settingsSync.ts

@@ -23,7 +23,7 @@ import { deflateSync, inflateSync } from "fflate";
 
 import { getCloudAuth, getCloudUrl } from "./cloud";
 import { Logger } from "./Logger";
-import { saveFile } from "./web";
+import { chooseFile, saveFile } from "./web";
 
 export async function importSettings(data: string) {
     try {
@@ -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() {
@@ -91,12 +91,7 @@ export async function uploadSettingsBackup(showToast = true): Promise<void> {
             }
         }
     } else {
-        const input = document.createElement("input");
+        const file = await chooseFile("application/json");
-        input.type = "file";
-        input.style.display = "none";
-        input.accept = "application/json";
-        input.onchange = async () => {
-            const file = input.files?.[0];
         if (!file) return;
 
         const reader = new FileReader();
@@ -110,19 +105,14 @@ export async function uploadSettingsBackup(showToast = true): Promise<void> {
             }
         };
         reader.readAsText(file);
-        };
-
-        document.body.appendChild(input);
-        input.click();
-        setImmediate(() => document.body.removeChild(input));
     }
 }
 
 // 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 +139,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({

src/utils/web.ts

@@ -16,6 +16,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+/**
+ * Prompts the user to save a file to their system
+ * @param file The file to save
+ */
 export function saveFile(file: File) {
     const a = document.createElement("a");
     a.href = URL.createObjectURL(file);
@@ -28,3 +32,24 @@ export function saveFile(file: File) {
         document.body.removeChild(a);
     });
 }
+
+/**
+ * Prompts the user to choose a file from their system
+ * @param mimeTypes A comma separated list of mime types to accept, see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers
+ * @returns A promise that resolves to the chosen file or null if the user cancels
+ */
+export function chooseFile(mimeTypes: string) {
+    return new Promise<File | null>(resolve => {
+        const input = document.createElement("input");
+        input.type = "file";
+        input.style.display = "none";
+        input.accept = mimeTypes;
+        input.onchange = async () => {
+            resolve(input.files?.[0] ?? null);
+        };
+
+        document.body.appendChild(input);
+        input.click();
+        setImmediate(() => document.body.removeChild(input));
+    });
+}

src/webpack/common/types/utils.d.ts

@@ -96,6 +96,7 @@ export type Permissions = "CREATE_INSTANT_INVITE"
     | "MANAGE_ROLES"
     | "MANAGE_WEBHOOKS"
     | "MANAGE_GUILD_EXPRESSIONS"
+    | "CREATE_GUILD_EXPRESSIONS"
     | "VIEW_AUDIT_LOG"
     | "VIEW_CHANNEL"
     | "VIEW_GUILD_ANALYTICS"
@@ -116,6 +117,7 @@ export type Permissions = "CREATE_INSTANT_INVITE"
     | "CREATE_PRIVATE_THREADS"
     | "USE_EXTERNAL_STICKERS"
     | "SEND_MESSAGES_IN_THREADS"
+    | "SEND_VOICE_MESSAGES"
     | "CONNECT"
     | "SPEAK"
     | "MUTE_MEMBERS"
@@ -125,8 +127,11 @@ export type Permissions = "CREATE_INSTANT_INVITE"
     | "PRIORITY_SPEAKER"
     | "STREAM"
     | "USE_EMBEDDED_ACTIVITIES"
+    | "USE_SOUNDBOARD"
+    | "USE_EXTERNAL_SOUNDS"
     | "REQUEST_TO_SPEAK"
-    | "MANAGE_EVENTS";
+    | "MANAGE_EVENTS"
+    | "CREATE_EVENTS";
 
 export type PermissionsBits = Record<Permissions, bigint>;
 

src/webpack/common/utils.ts

@@ -77,6 +77,17 @@ export const Toasts = {
     }
 };
 
+/**
+ * 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 const UserUtils = {
     fetchUser: findByCodeLazy(".USER(", "getUser") as (id: string) => Promise<User>,
 };