Merge efb2e07fb6 into 8afd79dd50

add Icons to webpack commons
remove need to depend on CommandsAPI
2024-09-19 22:20:34 +00:00 · 2024-09-17 19:36:50 -06:00 · 2024-09-18 01:36:52 +02:00 · 2024-09-18 01:26:25 +02:00 · 2024-09-17 14:30:23 -03:00 · 2024-09-17 14:30:23 -03:00
51 changed files with 1587 additions and 342 deletions
--- a/src/components/PluginSettings/index.tsx
+++ b/src/components/PluginSettings/index.tsx
@ -292,10 +292,10 @@ export default function PluginSettings() {

        if (!pluginFilter(p)) continue;

-        const isRequired = p.required || depMap[p.name]?.some(d => settings.plugins[d].enabled);
+        const isRequired = p.required || p.isDependency || depMap[p.name]?.some(d => settings.plugins[d].enabled);

        if (isRequired) {
-            const tooltipText = p.required
+            const tooltipText = p.required || !depMap[p.name]
                ? "This plugin is required for Vencord to function."
                : makeDependencyList(depMap[p.name]?.filter(d => settings.plugins[d].enabled));

--- a/src/plugins/_core/supportHelper.tsx
+++ b/src/plugins/_core/supportHelper.tsx
@ -142,7 +142,7 @@ export default definePlugin({
    required: true,
    description: "Helps us provide support to you",
    authors: [Devs.Ven],
-    dependencies: ["CommandsAPI", "UserSettingsAPI", "MessageAccessoriesAPI"],
+    dependencies: ["UserSettingsAPI", "MessageAccessoriesAPI"],

    settings,

--- a/src/plugins/appleMusic.desktop/index.tsx
+++ b/src/plugins/appleMusic.desktop/index.tsx
@ -24,7 +24,7 @@ interface ActivityButton {
 }

 interface Activity {
-    state: string;
+    state?: string;
    details?: string;
    timestamps?: {
        start?: number;
@ -52,8 +52,8 @@ const enum ActivityFlag {

 export interface TrackData {
    name: string;
-    album: string;
-    artist: string;
+    album?: string;
+    artist?: string;

    appleMusicLink?: string;
    songLink?: string;
@ -61,8 +61,8 @@ export interface TrackData {
    albumArtwork?: string;
    artistArtwork?: string;

-    playerPosition: number;
-    duration: number;
+    playerPosition?: number;
+    duration?: number;
 }

 const enum AssetImageType {
@ -120,7 +120,7 @@ const settings = definePluginSettings({
    stateString: {
        type: OptionType.STRING,
        description: "Activity state format string",
-        default: "{artist}"
+        default: "{artist} · {album}"
    },
    largeImageType: {
        type: OptionType.SELECT,
@ -155,8 +155,8 @@ const settings = definePluginSettings({
 function customFormat(formatStr: string, data: TrackData) {
    return formatStr
        .replaceAll("{name}", data.name)
-        .replaceAll("{album}", data.album)
-        .replaceAll("{artist}", data.artist);
+        .replaceAll("{album}", data.album ?? "")
+        .replaceAll("{artist}", data.artist ?? "");
 }

 function getImageAsset(type: AssetImageType, data: TrackData) {
@ -212,14 +212,16 @@ export default definePlugin({

        const assets: ActivityAssets = {};

+        const isRadio = Number.isNaN(trackData.duration) && (trackData.playerPosition === 0);
+
        if (settings.store.largeImageType !== AssetImageType.Disabled) {
            assets.large_image = largeImageAsset;
-            assets.large_text = customFormat(settings.store.largeTextString, trackData);
+            if (!isRadio) assets.large_text = customFormat(settings.store.largeTextString, trackData);
        }

        if (settings.store.smallImageType !== AssetImageType.Disabled) {
            assets.small_image = smallImageAsset;
-            assets.small_text = customFormat(settings.store.smallTextString, trackData);
+            if (!isRadio) assets.small_text = customFormat(settings.store.smallTextString, trackData);
        }

        const buttons: ActivityButton[] = [];
@ -243,17 +245,17 @@ export default definePlugin({

            name: customFormat(settings.store.nameString, trackData),
            details: customFormat(settings.store.detailsString, trackData),
-            state: customFormat(settings.store.stateString, trackData),
+            state: isRadio ? undefined : customFormat(settings.store.stateString, trackData),

-            timestamps: (settings.store.enableTimestamps ? {
+            timestamps: (trackData.playerPosition && trackData.duration && settings.store.enableTimestamps) ? {
                start: Date.now() - (trackData.playerPosition * 1000),
                end: Date.now() - (trackData.playerPosition * 1000) + (trackData.duration * 1000),
-            } : undefined),
+            } : undefined,

            assets,

-            buttons: buttons.length ? buttons.map(v => v.label) : undefined,
-            metadata: { button_urls: buttons.map(v => v.url) || undefined, },
+            buttons: !isRadio && buttons.length ? buttons.map(v => v.label) : undefined,
+            metadata: !isRadio && buttons.length ? { button_urls: buttons.map(v => v.url) } : undefined,

            type: settings.store.activityType,
            flags: ActivityFlag.INSTANCE,
--- a/src/plugins/appleMusic.desktop/native.ts
+++ b/src/plugins/appleMusic.desktop/native.ts
@ -11,37 +11,11 @@ import type { TrackData } from ".";

 const exec = promisify(execFile);

-// function exec(file: string, args: string[] = []) {
-//     return new Promise<{ code: number | null, stdout: string | null, stderr: string | null; }>((resolve, reject) => {
-//         const process = spawn(file, args, { stdio: [null, "pipe", "pipe"] });
-
-//         let stdout: string | null = null;
-//         process.stdout.on("data", (chunk: string) => { stdout ??= ""; stdout += chunk; });
-//         let stderr: string | null = null;
-//         process.stderr.on("data", (chunk: string) => { stdout ??= ""; stderr += chunk; });
-
-//         process.on("exit", code => { resolve({ code, stdout, stderr }); });
-//         process.on("error", err => reject(err));
-//     });
-// }
-
 async function applescript(cmds: string[]) {
    const { stdout } = await exec("osascript", cmds.map(c => ["-e", c]).flat());
    return stdout;
 }

-function makeSearchUrl(type: string, query: string) {
-    const url = new URL("https://tools.applemediaservices.com/api/apple-media/music/US/search.json");
-    url.searchParams.set("types", type);
-    url.searchParams.set("limit", "1");
-    url.searchParams.set("term", query);
-    return url;
-}
-
-const requestOptions: RequestInit = {
-    headers: { "user-agent": "Mozilla/5.0 (Windows NT 10.0; rv:125.0) Gecko/20100101 Firefox/125.0" },
-};
-
 interface RemoteData {
    appleMusicLink?: string,
    songLink?: string,
@ -51,6 +25,24 @@ interface RemoteData {

 let cachedRemoteData: { id: string, data: RemoteData; } | { id: string, failures: number; } | null = null;

+const APPLE_MUSIC_BUNDLE_REGEX = /<script type="module" crossorigin src="([a-zA-Z0-9.\-/]+)"><\/script>/;
+const APPLE_MUSIC_TOKEN_REGEX = /\w+="([A-Za-z0-9-_]*\.[A-Za-z0-9-_]*\.[A-Za-z0-9-_]*)",\w+="x-apple-jingle-correlation-key"/;
+
+let cachedToken: string | undefined = undefined;
+
+const getToken = async () => {
+    if (cachedToken) return cachedToken;
+
+    const html = await fetch("https://music.apple.com/").then(r => r.text());
+    const bundleUrl = new URL(html.match(APPLE_MUSIC_BUNDLE_REGEX)![1], "https://music.apple.com/");
+
+    const bundle = await fetch(bundleUrl).then(r => r.text());
+    const token = bundle.match(APPLE_MUSIC_TOKEN_REGEX)![1];
+
+    cachedToken = token;
+    return token;
+};
+
 async function fetchRemoteData({ id, name, artist, album }: { id: string, name: string, artist: string, album: string; }) {
    if (id === cachedRemoteData?.id) {
        if ("data" in cachedRemoteData) return cachedRemoteData.data;
@ -58,21 +50,39 @@ async function fetchRemoteData({ id, name, artist, album }: { id: string, name:
    }

    try {
-        const [songData, artistData] = await Promise.all([
-            fetch(makeSearchUrl("songs", artist + " " + album + " " + name), requestOptions).then(r => r.json()),
-            fetch(makeSearchUrl("artists", artist.split(/ *[,&] */)[0]), requestOptions).then(r => r.json())
-        ]);
+        const dataUrl = new URL("https://amp-api-edge.music.apple.com/v1/catalog/us/search");
+        dataUrl.searchParams.set("platform", "web");
+        dataUrl.searchParams.set("l", "en-US");
+        dataUrl.searchParams.set("limit", "1");
+        dataUrl.searchParams.set("with", "serverBubbles");
+        dataUrl.searchParams.set("types", "songs");
+        dataUrl.searchParams.set("term", `${name} ${artist} ${album}`);
+        dataUrl.searchParams.set("include[songs]", "artists");

-        const appleMusicLink = songData?.songs?.data[0]?.attributes.url;
-        const songLink = songData?.songs?.data[0]?.id ? `https://song.link/i/${songData?.songs?.data[0]?.id}` : undefined;
+        const token = await getToken();

-        const albumArtwork = songData?.songs?.data[0]?.attributes.artwork.url.replace("{w}", "512").replace("{h}", "512");
-        const artistArtwork = artistData?.artists?.data[0]?.attributes.artwork.url.replace("{w}", "512").replace("{h}", "512");
+        const songData = await fetch(dataUrl, {
+            headers: {
+                "accept": "*/*",
+                "accept-language": "en-US,en;q=0.9",
+                "authorization": `Bearer ${token}`,
+                "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36",
+                "origin": "https://music.apple.com",
+            },
+        })
+            .then(r => r.json())
+            .then(data => data.results.song.data[0]);

        cachedRemoteData = {
            id,
-            data: { appleMusicLink, songLink, albumArtwork, artistArtwork }
+            data: {
+                appleMusicLink: songData.attributes.url,
+                songLink: `https://song.link/i/${songData.id}`,
+                albumArtwork: songData.attributes.artwork.url.replace("{w}x{h}", "512x512"),
+                artistArtwork: songData.relationships.artists.data[0].attributes.artwork.url.replace("{w}x{h}", "512x512"),
+            }
        };
+
        return cachedRemoteData.data;
    } catch (e) {
        console.error("[AppleMusicRichPresence] Failed to fetch remote data:", e);
--- a/src/plugins/betterSettings/PluginsSubmenu.tsx
+++ b/src/plugins/betterSettings/PluginsSubmenu.tsx
@ -0,0 +1,68 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { openPluginModal } from "@components/PluginSettings/PluginModal";
+import { isObjectEmpty } from "@utils/misc";
+import { Alerts, i18n, Menu, useMemo, useState } from "@webpack/common";
+
+import Plugins from "~plugins";
+
+function onRestartNeeded() {
+    Alerts.show({
+        title: "Restart required",
+        body: <p>You have changed settings that require a restart.</p>,
+        confirmText: "Restart now",
+        cancelText: "Later!",
+        onConfirm: () => location.reload()
+    });
+}
+
+export default function PluginsSubmenu() {
+    const sortedPlugins = useMemo(() => Object.values(Plugins)
+        .sort((a, b) => a.name.localeCompare(b.name)), []);
+    const [query, setQuery] = useState("");
+
+    const search = query.toLowerCase();
+    const include = (p: typeof Plugins[keyof typeof Plugins]) => (
+        Vencord.Plugins.isPluginEnabled(p.name)
+        && p.options && !isObjectEmpty(p.options)
+        && (
+            p.name.toLowerCase().includes(search)
+            || p.description.toLowerCase().includes(search)
+            || p.tags?.some(t => t.toLowerCase().includes(search))
+        )
+    );
+
+    const plugins = sortedPlugins.filter(include);
+
+    return (
+        <>
+            <Menu.MenuControlItem
+                id="vc-plugins-search"
+                control={(props, ref) => (
+                    <Menu.MenuSearchControl
+                        {...props}
+                        query={query}
+                        onChange={setQuery}
+                        ref={ref}
+                        placeholder={i18n.Messages.SEARCH}
+                    />
+                )}
+            />
+
+            {!!plugins.length && <Menu.MenuSeparator />}
+
+            {plugins.map(p => (
+                <Menu.MenuItem
+                    key={p.name}
+                    id={p.name}
+                    label={p.name}
+                    action={() => openPluginModal(p, onRestartNeeded)}
+                />
+            ))}
+        </>
+    );
+}
--- a/src/plugins/betterSettings/index.tsx
+++ b/src/plugins/betterSettings/index.tsx
@ -13,6 +13,8 @@ import { waitFor } from "@webpack";
 import { ComponentDispatch, FocusLock, i18n, Menu, useEffect, useRef } from "@webpack/common";
 import type { HTMLAttributes, ReactElement } from "react";

+import PluginsSubmenu from "./PluginsSubmenu";
+
 type SettingsEntry = { section: string, label: string; };

 const cl = classNameFactory("");
@ -118,13 +120,21 @@ export default definePlugin({
        },
        { // Settings cog context menu
            find: "Messages.USER_SETTINGS_ACTIONS_MENU_LABEL",
-            replacement: {
-                match: /(EXPERIMENTS:.+?)(\(0,\i.\i\)\(\))(?=\.filter\(\i=>\{let\{section:\i\}=)/,
-                replace: "$1$self.wrapMenu($2)"
-            }
-        }
+            replacement: [
+                {
+                    match: /(EXPERIMENTS:.+?)(\(0,\i.\i\)\(\))(?=\.filter\(\i=>\{let\{section:\i\}=)/,
+                    replace: "$1$self.wrapMenu($2)"
+                },
+                {
+                    match: /case \i\.\i\.DEVELOPER_OPTIONS:return \i;/,
+                    replace: "$&case 'VencordPlugins':return $self.PluginsSubmenu();"
+                }
+            ]
+        },
    ],

+    PluginsSubmenu,
+
    // This is the very outer layer of the entire ui, so we can't wrap this in an ErrorBoundary
    // without possibly also catching unrelated errors of children.
    //
--- a/src/plugins/consoleJanitor/index.ts
+++ b/src/plugins/consoleJanitor/index.ts
@ -126,7 +126,7 @@ export default definePlugin({
            }
        },
        {
-            find: '"Handling ping: "',
+            find: '"_handleLocalVideoDisabled: ',
            predicate: () => settings.store.disableNoisyLoggers,
            replacement: {
                match: /new \i\.\i\("RTCConnection\("\.concat.+?\)\)(?=,)/,
--- a/src/plugins/experiments/index.tsx
+++ b/src/plugins/experiments/index.tsx
@ -23,12 +23,13 @@ import { ErrorCard } from "@components/ErrorCard";
 import { Devs } from "@utils/constants";
 import { Margins } from "@utils/margins";
 import definePlugin, { OptionType } from "@utils/types";
-import { findByPropsLazy } from "@webpack";
+import { findByPropsLazy, findLazy } from "@webpack";
 import { Forms, React } from "@webpack/common";

 import hideBugReport from "./hideBugReport.css?managed";

 const KbdStyles = findByPropsLazy("key", "combo");
+const BugReporterExperiment = findLazy(m => m?.definition?.id === "2024-09_bug_reporter");

 const settings = definePluginSettings({
    toolbarDevMenu: {
@ -78,8 +79,8 @@ export default definePlugin({
        {
            find: "toolbar:function",
            replacement: {
-                match: /\i\.isStaff\(\)/,
-                replace: "true"
+                match: /hasBugReporterAccess:(\i)/,
+                replace: "_hasBugReporterAccess:$1=true"
            },
            predicate: () => settings.store.toolbarDevMenu
        },
@ -91,10 +92,18 @@ export default definePlugin({
                match: /\i\.isDM\(\)\|\|\i\.isThread\(\)/,
                replace: "false",
            }
+        },
+        // enable option to always record clips even if you are not streaming
+        {
+            find: "isDecoupledGameClippingEnabled(){",
+            replacement: {
+                match: /\i\.isStaff\(\)/,
+                replace: "true"
+            }
        }
    ],

-    start: () => enableStyle(hideBugReport),
+    start: () => !BugReporterExperiment.getCurrentConfig().hasBugReporterAccess && enableStyle(hideBugReport),
    stop: () => disableStyle(hideBugReport),

    settingsAboutComponent: () => {
--- a/src/plugins/friendInvites/index.ts
+++ b/src/plugins/friendInvites/index.ts
@ -27,7 +27,6 @@ export default definePlugin({
    name: "FriendInvites",
    description: "Create and manage friend invite links via slash commands (/create friend invite, /view friend invites, /revoke friend invites).",
    authors: [Devs.afn, Devs.Dziurwa],
-    dependencies: ["CommandsAPI"],
    commands: [
        {
            name: "create friend invite",
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@ -105,6 +105,11 @@ for (const p of pluginsValues) if (isPluginEnabled(p.name)) {
        settings[d].enabled = true;
        dep.isDependency = true;
    });
+
+    if (p.commands?.length) {
+        Plugins.CommandsAPI.isDependency = true;
+        settings.CommandsAPI.enabled = true;
+    }
 }

 for (const p of pluginsValues) {
--- a/src/plugins/messageTags/index.ts
+++ b/src/plugins/messageTags/index.ts
@ -82,7 +82,6 @@ export default definePlugin({
            default: true
        }
    },
-    dependencies: ["CommandsAPI"],

    async start() {
        for (const tag of await getTags()) createTagCommand(tag);
--- a/src/plugins/moreCommands/index.ts
+++ b/src/plugins/moreCommands/index.ts
@ -33,7 +33,6 @@ export default definePlugin({
    name: "MoreCommands",
    description: "echo, lenny, mock",
    authors: [Devs.Arjix, Devs.echo, Devs.Samu],
-    dependencies: ["CommandsAPI"],
    commands: [
        {
            name: "echo",
--- a/src/plugins/moreKaomoji/index.ts
+++ b/src/plugins/moreKaomoji/index.ts
@ -24,7 +24,6 @@ export default definePlugin({
    name: "MoreKaomoji",
    description: "Adds more Kaomoji to discord. ヽ(´▽`)/",
    authors: [Devs.JacobTm],
-    dependencies: ["CommandsAPI"],
    commands: [
        { name: "dissatisfaction", description: " ＞﹏＜" },
        { name: "smug", description: "ಠ_ಠ" },
--- a/src/plugins/noDefaultHangStatus/README.md
+++ b/src/plugins/noDefaultHangStatus/README.md
@ -1,5 +0,0 @@
-# NoDefaultHangStatus
-
-Disable the default hang status when joining voice channels
-
-![Visualization](https://github.com/Vendicated/Vencord/assets/24937357/329a9742-236f-48f7-94ff-c3510eca505a)
--- a/src/plugins/noDefaultHangStatus/index.ts
+++ b/src/plugins/noDefaultHangStatus/index.ts
@ -1,24 +0,0 @@
-/*
- * Vencord, a Discord client mod
- * Copyright (c) 2024 Vendicated and contributors
- * SPDX-License-Identifier: GPL-3.0-or-later
- */
-
-import { Devs } from "@utils/constants";
-import definePlugin from "@utils/types";
-
-export default definePlugin({
-    name: "NoDefaultHangStatus",
-    description: "Disable the default hang status when joining voice channels",
-    authors: [Devs.D3SOX],
-
-    patches: [
-        {
-            find: ".CHILLING)",
-            replacement: {
-                match: /{enableHangStatus:(\i),/,
-                replace: "{_enableHangStatus:$1=false,"
-            }
-        }
-    ]
-});
--- a/src/plugins/openInApp/index.ts
+++ b/src/plugins/openInApp/index.ts
@ -33,7 +33,7 @@ interface URLReplacementRule {
 // Do not forget to add protocols to the ALLOWED_PROTOCOLS constant
 const UrlReplacementRules: Record<string, URLReplacementRule> = {
    spotify: {
-        match: /^https:\/\/open\.spotify\.com\/(?:intl-[a-z]{2}\/)?(track|album|artist|playlist|user|episode)\/(.+)(?:\?.+?)?$/,
+        match: /^https:\/\/open\.spotify\.com\/(?:intl-[a-z]{2}\/)?(track|album|artist|playlist|user|episode|prerelease)\/(.+)(?:\?.+?)?$/,
        replace: (_, type, id) => `spotify://${type}/${id}`,
        description: "Open Spotify links in the Spotify app",
        shortlinkMatch: /^https:\/\/spotify\.link\/.+$/,
--- a/src/plugins/petpet/index.ts
+++ b/src/plugins/petpet/index.ts
@ -88,7 +88,6 @@ export default definePlugin({
    name: "petpet",
    description: "Adds a /petpet slash command to create headpet gifs from any image",
    authors: [Devs.Ven],
-    dependencies: ["CommandsAPI"],
    commands: [
        {
            inputType: ApplicationCommandInputType.BUILT_IN,
--- a/src/plugins/remix/README.md
+++ b/src/plugins/remix/README.md
@ -0,0 +1,8 @@
+# Remix
+Adds Remix from mobile to desktop cause discord is lazy
+
+Right click any image and press "Remix" and do whatever, or press the + in the message bar and upload your own file
+
+![Remix UI](https://github.com/Vendicated/Vencord/assets/84212701/ce212de8-9ea3-4f1a-9533-ca116e21c90c)
+
+https://github.com/MrDiamondDog/Vencord/assets/84212701/ed3f7bf5-73dd-450c-a831-d68909bc3f26
--- a/src/plugins/remix/RemixModal.tsx
+++ b/src/plugins/remix/RemixModal.tsx
@ -0,0 +1,54 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize } from "@utils/modal";
+import { Button, Text } from "@webpack/common";
+
+import { sendRemix } from ".";
+import { brushCanvas, canvas, cropCanvas, ctx, exportImg, shapeCanvas } from "./editor/components/Canvas";
+import { Editor } from "./editor/Editor";
+import { resetBounds } from "./editor/tools/crop";
+import { SendIcon } from "./icons/SendIcon";
+
+type Props = {
+    modalProps: ModalProps;
+    close: () => void;
+    url?: string;
+};
+
+function reset() {
+    resetBounds();
+
+    if (!ctx || !canvas) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    brushCanvas.clearRect(0, 0, canvas.width, canvas.height);
+    shapeCanvas.clearRect(0, 0, canvas.width, canvas.height);
+    cropCanvas.clearRect(0, 0, canvas.width, canvas.height);
+}
+
+async function closeModal(closeFunc: () => void, save?: boolean) {
+    if (save) sendRemix(await exportImg());
+    reset();
+    closeFunc();
+}
+
+export default function RemixModal({ modalProps, close, url }: Props) {
+    return (
+        <ModalRoot {...modalProps} size={ModalSize.LARGE}>
+            <ModalHeader>
+                <Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>Remix</Text>
+                <ModalCloseButton onClick={() => closeModal(close)} />
+            </ModalHeader>
+            <ModalContent>
+                <Editor url={url} />
+            </ModalContent>
+            <ModalFooter className="vc-remix-modal-footer">
+                <Button onClick={() => closeModal(close, true)} className="vc-remix-send"><SendIcon /> Send</Button>
+                <Button onClick={() => closeModal(close)} color={Button.Colors.RED}>Close</Button>
+            </ModalFooter>
+        </ModalRoot>
+    );
+}
--- a/src/plugins/remix/editor/Editor.tsx
+++ b/src/plugins/remix/editor/Editor.tsx
@ -0,0 +1,44 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { findComponentByCodeLazy } from "@webpack";
+import { useEffect, useState } from "@webpack/common";
+
+import { Canvas } from "./components/Canvas";
+import { Toolbar } from "./components/Toolbar";
+import { imageToBlob, urlToImage } from "./utils/canvas";
+
+const FileUpload = findComponentByCodeLazy("fileUploadInput,");
+
+export const Editor = (props: { url?: string; }) => {
+    const [file, setFile] = useState<File | undefined>(undefined);
+
+    useEffect(() => {
+        if (!props.url) return;
+
+        urlToImage(props.url).then(img => {
+            imageToBlob(img).then(blob => {
+                setFile(new File([blob], "remix.png"));
+            });
+        });
+    }, []);
+
+    return (
+        <div className="vc-remix-editor">
+            {!file && <FileUpload
+                filename={undefined}
+                placeholder="Choose an image"
+                buttonText="Browse"
+                filters={[{ name: "Image", extensions: ["png", "jpeg"] }]}
+                onFileSelect={(file: File) => setFile(file)}
+            />}
+            {file && (<>
+                <Toolbar />
+                <Canvas file={file!} />
+            </>)}
+        </div>
+    );
+};
--- a/src/plugins/remix/editor/components/Canvas.tsx
+++ b/src/plugins/remix/editor/components/Canvas.tsx
@ -0,0 +1,82 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { useEffect, useRef } from "@webpack/common";
+
+import { initInput } from "../input";
+import { bounds } from "../tools/crop";
+import { heightFromBounds, widthFromBounds } from "../utils/canvas";
+
+export let canvas: HTMLCanvasElement | null = null;
+export let ctx: CanvasRenderingContext2D | null = null;
+
+export const brushCanvas = document.createElement("canvas")!.getContext("2d")!;
+export const shapeCanvas = document.createElement("canvas")!.getContext("2d")!;
+export const cropCanvas = document.createElement("canvas")!.getContext("2d")!;
+
+export let image: HTMLImageElement;
+
+export function exportImg(): Promise<Blob> {
+    return new Promise<Blob>(resolve => {
+        if (!canvas || !ctx) return;
+
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(image, 0, 0);
+        ctx.drawImage(brushCanvas.canvas, 0, 0);
+
+        if (bounds.right === -1) bounds.right = canvas.width;
+        if (bounds.bottom === -1) bounds.bottom = canvas.height;
+
+        const renderCanvas = document.createElement("canvas");
+        renderCanvas.width = widthFromBounds(bounds);
+        renderCanvas.height = heightFromBounds(bounds);
+
+        const renderCtx = renderCanvas.getContext("2d")!;
+        renderCtx.drawImage(canvas, -bounds.left, -bounds.top);
+        renderCanvas.toBlob(blob => resolve(blob!));
+
+        render();
+    });
+}
+
+export const Canvas = ({ file }: { file: File; }) => {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+
+    useEffect(() => {
+        image = new Image();
+        image.src = URL.createObjectURL(file);
+        image.onload = () => {
+            canvas = canvasRef.current;
+
+            if (!canvas) return;
+
+            canvas.width = image.width;
+            canvas.height = image.height;
+            brushCanvas.canvas.width = image.width;
+            brushCanvas.canvas.height = image.height;
+            shapeCanvas.canvas.width = image.width;
+            shapeCanvas.canvas.height = image.height;
+            cropCanvas.canvas.width = image.width;
+            cropCanvas.canvas.height = image.height;
+
+            ctx = canvas.getContext("2d")!;
+            ctx.drawImage(image, 0, 0);
+
+            initInput();
+        };
+    });
+
+    return (<canvas ref={canvasRef} className="vc-remix-canvas"></canvas>);
+};
+
+export function render() {
+    if (!ctx || !canvas) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(image, 0, 0);
+    ctx.drawImage(brushCanvas.canvas, 0, 0);
+    ctx.drawImage(shapeCanvas.canvas, 0, 0);
+    ctx.drawImage(cropCanvas.canvas, 0, 0);
+}
--- a/src/plugins/remix/editor/components/SettingColorComponent.tsx
+++ b/src/plugins/remix/editor/components/SettingColorComponent.tsx
@ -0,0 +1,52 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2023 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+// brutally ripped out of usercss
+// (remove when usercss is merged)
+
+import "./colorStyles.css";
+
+import { classNameFactory } from "@api/Styles";
+import { findComponentByCodeLazy } from "@webpack";
+import { Forms } from "@webpack/common";
+
+interface ColorPickerProps {
+    color: number | null;
+    showEyeDropper?: boolean;
+    onChange(value: number | null): void;
+}
+
+const ColorPicker = findComponentByCodeLazy<ColorPickerProps>(".BACKGROUND_PRIMARY).hex");
+
+const cl = classNameFactory("vc-remix-settings-color-");
+
+interface Props {
+    name: string;
+    color: number;
+    onChange(value: string): void;
+}
+
+function hexToColorString(color: number): string {
+    return `#${color.toString(16).padStart(6, "0")}`;
+}
+
+export function SettingColorComponent({ name, onChange, color }: Props) {
+    function handleChange(newColor: number) {
+        onChange(hexToColorString(newColor));
+    }
+
+    return (
+        <Forms.FormSection>
+            <div className={cl("swatch-row")}>
+                <ColorPicker
+                    key={name}
+                    color={color}
+                    onChange={handleChange}
+                />
+            </div>
+        </Forms.FormSection>
+    );
+}
--- a/src/plugins/remix/editor/components/Toolbar.tsx
+++ b/src/plugins/remix/editor/components/Toolbar.tsx
@ -0,0 +1,141 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { Switch } from "@components/Switch";
+import { Button, Forms, Select, Slider, useEffect, useState } from "@webpack/common";
+
+import { BrushTool } from "../tools/brush";
+import { CropTool, resetBounds } from "../tools/crop";
+import { EraseTool } from "../tools/eraser";
+import { currentShape, setShape, setShapeFill, Shape, ShapeTool } from "../tools/shape";
+import { brushCanvas, canvas, cropCanvas, render, shapeCanvas } from "./Canvas";
+import { SettingColorComponent } from "./SettingColorComponent";
+
+export type Tool = "none" | "brush" | "erase" | "crop" | "shape";
+
+export type ToolDefinition = {
+    selected: () => void;
+    unselected: () => void;
+    [key: string]: any;
+};
+
+export const tools: Record<Tool, ToolDefinition | undefined> = {
+    none: undefined,
+    brush: BrushTool,
+    erase: EraseTool,
+    crop: CropTool,
+    shape: ShapeTool,
+};
+
+export let currentTool: Tool = "none";
+export let currentColor = "#ff0000";
+export let currentSize = 20;
+export let currentFill = false;
+
+function colorStringToHex(color: string): number {
+    return parseInt(color.replace("#", ""), 16);
+}
+
+export const Toolbar = () => {
+    const [tool, setTool] = useState<Tool>(currentTool);
+    const [color, setColor] = useState(currentColor);
+    const [size, setSize] = useState(currentSize);
+    const [fill, setFill] = useState(currentFill);
+
+    function changeTool(newTool: Tool) {
+        const oldTool = tool;
+
+        setTool(newTool);
+        onChangeTool(oldTool, newTool);
+    }
+
+    function onChangeTool(old: Tool, newTool: Tool) {
+        tools[old]?.unselected();
+        tools[newTool]?.selected();
+    }
+
+    useEffect(() => {
+        currentTool = tool;
+        currentColor = color;
+        currentSize = size;
+        currentFill = fill;
+
+        brushCanvas.fillStyle = color;
+        shapeCanvas.fillStyle = color;
+
+        brushCanvas.strokeStyle = color;
+        shapeCanvas.strokeStyle = color;
+
+        brushCanvas.lineWidth = size;
+        shapeCanvas.lineWidth = size;
+
+        brushCanvas.lineCap = "round";
+        brushCanvas.lineJoin = "round";
+
+        setShapeFill(currentFill);
+    }, [tool, color, size, fill]);
+
+    function clear() {
+        if (!canvas) return;
+
+        brushCanvas.clearRect(0, 0, canvas.width, canvas.height);
+        shapeCanvas.clearRect(0, 0, canvas.width, canvas.height);
+        resetBounds();
+        if (tool !== "crop") cropCanvas.clearRect(0, 0, canvas.width, canvas.height);
+        render();
+    }
+
+    return (
+        <div className="vc-remix-toolbar">
+            <div className="vc-remix-tools">
+                <Button className={(tool === "brush" ? "tool-active" : "")} onClick={() => changeTool("brush")}>Brush</Button>
+                <Button className={(tool === "erase" ? "tool-active" : "")} onClick={() => changeTool("erase")}>Erase</Button>
+                <Button className={(tool === "crop" ? "tool-active" : "")} onClick={() => changeTool("crop")}>Crop</Button>
+                <Button className={(tool === "shape" ? "tool-active" : "")} onClick={() => changeTool("shape")}>Shape</Button>
+            </div>
+            <div className="vc-remix-settings">
+                <div className="vc-remix-setting-section">
+                    {(tool === "brush" || tool === "shape") &&
+                        <SettingColorComponent name="vc-remix-color-picker" onChange={setColor} color={colorStringToHex(color)} />
+                    }
+
+                    {(tool === "brush" || tool === "erase" || tool === "shape") &&
+                        <Slider
+                            minValue={1}
+                            maxValue={500}
+                            initialValue={size}
+                            onValueChange={setSize}
+                            markers={[1, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500]}
+                            hideBubble
+                        />
+                    }
+                </div>
+                {(tool === "crop") && <Button onClick={resetBounds}>Reset</Button>}
+                <div className="vc-remix-setting-section">
+                    {(tool === "shape") && (<>
+                        <Select
+                            select={setShape}
+                            isSelected={v => v === currentShape}
+                            serialize={v => String(v)}
+                            placeholder="Shape"
+                            options={
+                                ["Rectangle", "Ellipse", "Line", "Arrow"].map(v => ({
+                                    label: v,
+                                    value: v.toLowerCase() as Shape,
+                                }))
+                            }
+                        />
+
+                        <Forms.FormText className="vc-remix-setting-switch">Fill <Switch checked={fill} onChange={setFill} /></Forms.FormText>
+                    </>)}
+                </div>
+            </div>
+            <div className="vc-remix-misc">
+                <Button onClick={clear}>Clear</Button>
+            </div>
+        </div>
+    );
+};
--- a/src/plugins/remix/editor/components/colorStyles.css
+++ b/src/plugins/remix/editor/components/colorStyles.css
@ -0,0 +1,19 @@
+.vc-remix-settings-color-swatch-row {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    align-items: center;
+}
+
+.vc-remix-settings-color-swatch-row > span {
+    display: block;
+    flex: 1;
+    overflow: hidden;
+    margin-top: 0;
+    margin-bottom: 0;
+    color: var(--header-primary);
+    line-height: 24px;
+    font-size: 16px;
+    font-weight: 500;
+    word-wrap: break-word;
+}
--- a/src/plugins/remix/editor/input.ts
+++ b/src/plugins/remix/editor/input.ts
@ -0,0 +1,57 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { canvas } from "./components/Canvas";
+import { EventEmitter } from "./utils/eventEmitter";
+
+export const Mouse = {
+    x: 0,
+    y: 0,
+    down: false,
+    dx: 0,
+    dy: 0,
+    prevX: 0,
+    prevY: 0,
+    event: new EventEmitter<MouseEvent>()
+};
+
+export function initInput() {
+    if (!canvas) return;
+    canvas.addEventListener("mousemove", e => {
+        Mouse.prevX = Mouse.x;
+        Mouse.prevY = Mouse.y;
+
+        const rect = canvas!.getBoundingClientRect();
+        const scaleX = canvas!.width / rect.width;
+        const scaleY = canvas!.height / rect.height;
+
+        Mouse.x = (e.clientX - rect.left) * scaleX;
+        Mouse.y = (e.clientY - rect.top) * scaleY;
+
+        Mouse.dx = Mouse.x - Mouse.prevX;
+        Mouse.dy = Mouse.y - Mouse.prevY;
+
+        Mouse.event.emit("move", e);
+    });
+
+    canvas.addEventListener("mousedown", e => {
+        Mouse.down = true;
+
+        Mouse.event.emit("down", e);
+    });
+
+    canvas.addEventListener("mouseup", e => {
+        Mouse.down = false;
+
+        Mouse.event.emit("up", e);
+    });
+
+    canvas.addEventListener("mouseleave", e => {
+        Mouse.down = false;
+
+        Mouse.event.emit("up", e);
+    });
+}
--- a/src/plugins/remix/editor/tools/brush.ts
+++ b/src/plugins/remix/editor/tools/brush.ts
@ -0,0 +1,31 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { brushCanvas, ctx, render } from "../components/Canvas";
+import { currentSize, ToolDefinition } from "../components/Toolbar";
+import { Mouse } from "../input";
+import { line } from "../utils/canvas";
+
+export const BrushTool: ToolDefinition = {
+    onMouseMove() {
+        if (!Mouse.down || !ctx) return;
+
+        ctx.lineCap = "round";
+        ctx.lineJoin = "round";
+
+        brushCanvas.lineWidth = currentSize;
+
+        line(Mouse.prevX, Mouse.prevY, Mouse.x, Mouse.y);
+
+        render();
+    },
+    selected() {
+        Mouse.event.on("move", this.onMouseMove);
+    },
+    unselected() {
+        Mouse.event.off("move", this.onMouseMove);
+    },
+};
--- a/src/plugins/remix/editor/tools/crop.ts
+++ b/src/plugins/remix/editor/tools/crop.ts
@ -0,0 +1,151 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { canvas, cropCanvas, render } from "../components/Canvas";
+import { ToolDefinition } from "../components/Toolbar";
+import { Mouse } from "../input";
+import { dist, fillCircle } from "../utils/canvas";
+
+export const bounds = {
+    top: 0,
+    left: 0,
+    right: -1,
+    bottom: -1,
+};
+
+export function resetBounds() {
+    if (!canvas) return;
+
+    bounds.top = 0;
+    bounds.left = 0;
+    bounds.right = canvas.width;
+    bounds.bottom = canvas.height;
+
+    CropTool.update();
+}
+
+export const CropTool: ToolDefinition = {
+    dragging: "",
+
+    onMouseMove() {
+        if (!canvas) return;
+
+        if (this.dragging !== "") {
+            if (this.dragging.includes("left")) bounds.left = Mouse.x;
+            if (this.dragging.includes("right")) bounds.right = Mouse.x;
+            if (this.dragging.includes("top")) bounds.top = Mouse.y;
+            if (this.dragging.includes("bottom")) bounds.bottom = Mouse.y;
+
+            this.update();
+            return;
+        }
+
+        if (dist(Mouse.x, Mouse.y, bounds.left, bounds.top) < 30) {
+            if (Mouse.down) {
+                bounds.left = Mouse.x;
+                bounds.top = Mouse.y;
+                this.dragging = "left top";
+            } else {
+                canvas.style.cursor = "nwse-resize";
+            }
+        }
+        else if (dist(Mouse.x, Mouse.y, bounds.right, bounds.top) < 30) {
+            if (Mouse.down) {
+                bounds.right = Mouse.x;
+                bounds.top = Mouse.y;
+                this.dragging = "right top";
+            } else {
+                canvas.style.cursor = "nesw-resize";
+            }
+        }
+        else if (dist(Mouse.x, Mouse.y, bounds.left, bounds.bottom) < 30) {
+            if (Mouse.down) {
+                bounds.left = Mouse.x;
+                bounds.bottom = Mouse.y;
+                this.dragging = "left bottom";
+            } else {
+                canvas.style.cursor = "nesw-resize";
+            }
+        }
+        else if (dist(Mouse.x, Mouse.y, bounds.right, bounds.bottom) < 30) {
+            if (Mouse.down) {
+                bounds.right = Mouse.x;
+                bounds.bottom = Mouse.y;
+                this.dragging = "right bottom";
+            } else {
+                canvas.style.cursor = "nwse-resize";
+            }
+        } else {
+            canvas.style.cursor = "default";
+        }
+
+        if (this.dragging !== "") this.update();
+    },
+
+    onMouseUp() {
+        this.dragging = "";
+
+        if (bounds.left > bounds.right) [bounds.left, bounds.right] = [bounds.right, bounds.left];
+        if (bounds.top > bounds.bottom) [bounds.top, bounds.bottom] = [bounds.bottom, bounds.top];
+    },
+
+    update() {
+        if (!canvas) return;
+
+        cropCanvas.clearRect(0, 0, canvas.width, canvas.height);
+        cropCanvas.fillStyle = "rgba(0, 0, 0, 0.75)";
+        cropCanvas.fillRect(0, 0, canvas.width, canvas.height);
+
+        cropCanvas.fillStyle = "rgba(0, 0, 0, 0.25)";
+        cropCanvas.clearRect(bounds.left, bounds.top, bounds.right - bounds.left, bounds.bottom - bounds.top);
+        cropCanvas.fillRect(bounds.left, bounds.top, bounds.right - bounds.left, bounds.bottom - bounds.top);
+
+        cropCanvas.fillStyle = "white";
+        cropCanvas.strokeStyle = "white";
+        cropCanvas.lineWidth = 3;
+
+        cropCanvas.strokeRect(bounds.left, bounds.top, bounds.right - bounds.left, bounds.bottom - bounds.top);
+
+        fillCircle(bounds.left, bounds.top, 10, cropCanvas);
+        fillCircle(bounds.right, bounds.top, 10, cropCanvas);
+        fillCircle(bounds.left, bounds.bottom, 10, cropCanvas);
+        fillCircle(bounds.right, bounds.bottom, 10, cropCanvas);
+
+        render();
+    },
+
+    onMouseMoveCallback: undefined,
+    onMouseUpCallback: undefined,
+
+    selected() {
+        if (!canvas) return;
+
+        if (bounds.right === -1) bounds.right = canvas.width;
+        if (bounds.bottom === -1) bounds.bottom = canvas.height;
+
+        this.update();
+
+        this.onMouseMoveCallback = this.onMouseMove.bind(this);
+        this.onMouseUpCallback = this.onMouseUp.bind(this);
+
+        Mouse.event.on("move", this.onMouseMoveCallback);
+        Mouse.event.on("up", this.onMouseUpCallback);
+    },
+    unselected() {
+        if (!canvas) return;
+
+        cropCanvas.clearRect(0, 0, canvas.width, canvas.height);
+
+        cropCanvas.fillStyle = "rgba(0, 0, 0, 0.75)";
+        cropCanvas.fillRect(0, 0, canvas.width, canvas.height);
+        cropCanvas.clearRect(bounds.left, bounds.top, bounds.right - bounds.left, bounds.bottom - bounds.top);
+
+        render();
+
+        Mouse.event.off("move", this.onMouseMoveCallback);
+        Mouse.event.off("up", this.onMouseUpCallback);
+    },
+};
--- a/src/plugins/remix/editor/tools/eraser.ts
+++ b/src/plugins/remix/editor/tools/eraser.ts
@ -0,0 +1,36 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { brushCanvas, render } from "../components/Canvas";
+import { currentSize, ToolDefinition } from "../components/Toolbar";
+import { Mouse } from "../input";
+
+export const EraseTool: ToolDefinition = {
+    onMouseMove() {
+        if (!Mouse.down) return;
+
+        brushCanvas.lineCap = "round";
+        brushCanvas.lineJoin = "round";
+        brushCanvas.lineWidth = currentSize;
+
+        brushCanvas.globalCompositeOperation = "destination-out";
+
+        brushCanvas.beginPath();
+        brushCanvas.moveTo(Mouse.prevX, Mouse.prevY);
+        brushCanvas.lineTo(Mouse.x, Mouse.y);
+        brushCanvas.stroke();
+
+        brushCanvas.globalCompositeOperation = "source-over";
+
+        render();
+    },
+    selected() {
+        Mouse.event.on("move", this.onMouseMove);
+    },
+    unselected() {
+        Mouse.event.off("move", this.onMouseMove);
+    },
+};
--- a/src/plugins/remix/editor/tools/shape.ts
+++ b/src/plugins/remix/editor/tools/shape.ts
@ -0,0 +1,109 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { brushCanvas, render, shapeCanvas } from "../components/Canvas";
+import { ToolDefinition } from "../components/Toolbar";
+import { Mouse } from "../input";
+import { line } from "../utils/canvas";
+
+export type Shape = "rectangle" | "ellipse" | "line" | "arrow";
+
+export let currentShape: Shape = "rectangle";
+
+export function setShape(shape: Shape) {
+    currentShape = shape;
+}
+
+export let shapeFill = false;
+
+export function setShapeFill(fill: boolean) {
+    shapeFill = fill;
+}
+
+export const ShapeTool: ToolDefinition = {
+    draggingFrom: { x: 0, y: 0 },
+    isDragging: false,
+
+    onMouseMove() {
+        if (!Mouse.down) return;
+
+        if (!this.isDragging) {
+            this.draggingFrom.x = Mouse.x;
+            this.draggingFrom.y = Mouse.y;
+            this.isDragging = true;
+        }
+
+        shapeCanvas.clearRect(0, 0, shapeCanvas.canvas.width, shapeCanvas.canvas.height);
+        this.draw();
+    },
+
+    onMouseUp() {
+        if (!this.isDragging) return;
+
+        shapeCanvas.clearRect(0, 0, shapeCanvas.canvas.width, shapeCanvas.canvas.height);
+        this.draw(brushCanvas);
+        this.isDragging = false;
+    },
+
+    onMouseMoveListener: null,
+    onMouseUpListener: null,
+
+    draw(canvas = shapeCanvas) {
+        canvas.lineCap = "butt";
+        canvas.lineJoin = "miter";
+
+        switch (currentShape) {
+            case "rectangle":
+                if (shapeFill) canvas.fillRect(this.draggingFrom.x, this.draggingFrom.y, Mouse.x - this.draggingFrom.x, Mouse.y - this.draggingFrom.y);
+                else canvas.strokeRect(this.draggingFrom.x, this.draggingFrom.y, Mouse.x - this.draggingFrom.x, Mouse.y - this.draggingFrom.y);
+                break;
+            case "ellipse":
+                const width = Mouse.x - this.draggingFrom.x;
+                const height = Mouse.y - this.draggingFrom.y;
+                const centerX = this.draggingFrom.x + width / 2;
+                const centerY = this.draggingFrom.y + height / 2;
+                const radiusX = Math.abs(width / 2);
+                const radiusY = Math.abs(height / 2);
+                canvas.beginPath();
+                canvas.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, Math.PI * 2);
+                if (shapeFill) canvas.fill();
+                else canvas.stroke();
+                break;
+            case "line":
+                line(this.draggingFrom.x, this.draggingFrom.y, Mouse.x, Mouse.y, canvas);
+                break;
+            case "arrow":
+                line(this.draggingFrom.x, this.draggingFrom.y, Mouse.x, Mouse.y, canvas);
+                // draw arrowhead (thanks copilot :3)
+                const angle = Math.atan2(Mouse.y - this.draggingFrom.y, Mouse.x - this.draggingFrom.x);
+                const arrowLength = 10;
+                canvas.beginPath();
+                canvas.moveTo(Mouse.x, Mouse.y);
+                canvas.lineTo(Mouse.x - arrowLength * Math.cos(angle - Math.PI / 6), Mouse.y - arrowLength * Math.sin(angle - Math.PI / 6));
+                canvas.lineTo(Mouse.x - arrowLength * Math.cos(angle + Math.PI / 6), Mouse.y - arrowLength * Math.sin(angle + Math.PI / 6));
+                canvas.closePath();
+                if (shapeFill) canvas.fill();
+                else canvas.stroke();
+                break;
+        }
+
+        render();
+    },
+
+    selected() {
+        this.onMouseMoveListener = this.onMouseMove.bind(this);
+        this.onMouseUpListener = this.onMouseUp.bind(this);
+
+        Mouse.event.on("move", this.onMouseMoveListener);
+        Mouse.event.on("up", this.onMouseUpListener);
+    },
+    unselected() {
+        shapeCanvas.clearRect(0, 0, shapeCanvas.canvas.width, shapeCanvas.canvas.height);
+
+        Mouse.event.off("move", this.onMouseMoveListener);
+        Mouse.event.off("up", this.onMouseUpListener);
+    },
+};
--- a/src/plugins/remix/editor/utils/canvas.ts
+++ b/src/plugins/remix/editor/utils/canvas.ts
@ -0,0 +1,63 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { brushCanvas } from "../components/Canvas";
+
+export function fillCircle(x: number, y: number, radius: number, canvas = brushCanvas) {
+    canvas.beginPath();
+    canvas.arc(x, y, radius, 0, Math.PI * 2);
+    canvas.fill();
+}
+
+export function strokeCircle(x: number, y: number, radius: number, canvas = brushCanvas) {
+    canvas.beginPath();
+    canvas.arc(x, y, radius, 0, Math.PI * 2);
+    canvas.stroke();
+}
+
+export function line(x1: number, y1: number, x2: number, y2: number, canvas = brushCanvas) {
+    canvas.beginPath();
+    canvas.moveTo(x1, y1);
+    canvas.lineTo(x2, y2);
+    canvas.stroke();
+}
+
+export function dist(x1: number, y1: number, x2: number, y2: number) {
+    return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+}
+
+export function widthFromBounds(bounds: { left: number, right: number, top: number, bottom: number; }) {
+    return bounds.right - bounds.left;
+}
+
+export function heightFromBounds(bounds: { left: number, right: number, top: number, bottom: number; }) {
+    return bounds.bottom - bounds.top;
+}
+
+export async function urlToImage(url: string) {
+    return new Promise<HTMLImageElement>(resolve => {
+        const img = new Image();
+        img.crossOrigin = "anonymous";
+        img.onload = () => resolve(img);
+        img.src = url;
+    });
+}
+
+export function imageToBlob(image: HTMLImageElement) {
+    return new Promise<File>(resolve => {
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d")!;
+        canvas.width = image.width;
+        canvas.height = image.height;
+        ctx.drawImage(image, 0, 0);
+
+        canvas.toBlob(blob => {
+            if (!blob) return;
+
+            resolve(new File([blob], "image.png", { type: "image/png" }));
+        });
+    });
+}
--- a/src/plugins/remix/editor/utils/eventEmitter.ts
+++ b/src/plugins/remix/editor/utils/eventEmitter.ts
@ -0,0 +1,56 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+export class EventEmitter<T> {
+    events: {
+        [key: string]: ((val: T) => void)[];
+    };
+
+    constructor() {
+        this.events = {};
+    }
+
+    on(eventName: string, callback: (val: T) => void) {
+        if (!this.events[eventName]) {
+            this.events[eventName] = [];
+        }
+
+        this.events[eventName].push(callback);
+    }
+
+    emit(eventName: string, val: T) {
+        if (!this.events[eventName]) {
+            return;
+        }
+
+        this.events[eventName].forEach(callback => {
+            callback(val);
+        });
+    }
+
+    off(eventName: string, callback: (val: T) => void) {
+        if (!this.events[eventName]) {
+            return;
+        }
+
+        this.events[eventName] = this.events[eventName].filter(cb => {
+            return cb !== callback;
+        });
+    }
+
+    clear() {
+        this.events = {};
+    }
+
+    once(eventName: string, callback: (val: T) => void) {
+        const onceCallback = (val: T) => {
+            callback(val);
+            this.off(eventName, onceCallback);
+        };
+
+        this.on(eventName, onceCallback);
+    }
+}
--- a/src/plugins/remix/icons/SendIcon.tsx
+++ b/src/plugins/remix/icons/SendIcon.tsx
@ -0,0 +1,11 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+export const SendIcon = () => {
+    return (<svg className="sendIcon__461ff" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24">
+        <path fill="currentColor" d="M6.6 10.02 14 11.4a.6.6 0 0 1 0 1.18L6.6 14l-2.94 5.87a1.48 1.48 0 0 0 1.99 1.98l17.03-8.52a1.48 1.48 0 0 0 0-2.64L5.65 2.16a1.48 1.48 0 0 0-1.99 1.98l2.94 5.88Z"></path>
+    </svg>);
+};
--- a/src/plugins/remix/index.tsx
+++ b/src/plugins/remix/index.tsx
@ -0,0 +1,133 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { addContextMenuPatch, findGroupChildrenByChildId, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
+import { definePluginSettings } from "@api/Settings";
+import { disableStyle, enableStyle } from "@api/Styles";
+import { Devs } from "@utils/constants";
+import { closeModal, openModal } from "@utils/modal";
+import definePlugin, { OptionType } from "@utils/types";
+import { extractAndLoadChunksLazy, findByPropsLazy, findStoreLazy } from "@webpack";
+import { FluxDispatcher, Menu, MessageActions, RestAPI, showToast, SnowflakeUtils, Toasts } from "@webpack/common";
+import { Util } from "Vencord";
+
+import RemixModal from "./RemixModal";
+import css from "./styles.css?managed";
+
+// so FileUpload is loaded
+export const requireCreateStickerModal = extractAndLoadChunksLazy(["stickerInspected]:"]);
+// so ColorPicker is loaded
+export const requireSettingsMenu = extractAndLoadChunksLazy(['name:"UserSettings"'], /createPromise:.{0,20}el\("(.+?)"\).{0,50}"UserSettings"/);
+
+const CloudUtils = findByPropsLazy("CloudUpload");
+const PendingReplyStore = findStoreLazy("PendingReplyStore");
+
+
+const validMediaTypes = ["image/png", "image/jpeg", "image/jpg", "image/webp"];
+
+const UploadContextMenuPatch: NavContextMenuPatchCallback = (children, props) => {
+    if (children.find(c => c?.props?.id === "vc-remix")) return;
+
+    children.push(<Menu.MenuItem
+        id="vc-remix"
+        label="Remix"
+        action={() => {
+            const key = openModal(props =>
+                <RemixModal modalProps={props} close={() => closeModal(key)} />
+            );
+        }}
+    />);
+};
+
+const MessageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => {
+    const url = props.itemHref ?? props.itemSrc;
+    if (!url) return;
+    if (props.attachment && !validMediaTypes.includes(props.attachment.content_type)) return;
+
+    const group = findGroupChildrenByChildId("copy-text", children);
+    if (!group) return;
+    if (group.find(c => c?.props?.id === "vc-remix")) return;
+
+    const index = group.findIndex(c => c?.props?.id === "copy-text");
+
+    group.splice(index + 1, 0, <Menu.MenuItem
+        id="vc-remix"
+        label="Remix"
+        action={() => {
+            const key = openModal(modalProps =>
+                <RemixModal modalProps={modalProps} close={() => closeModal(key)} url={url} />
+            );
+        }}
+    />);
+};
+
+export function sendRemix(blob: Blob) {
+    const currentChannelId = Util.getCurrentChannel().id;
+    const reply = PendingReplyStore.getPendingReply(currentChannelId);
+    if (reply) FluxDispatcher.dispatch({ type: "DELETE_PENDING_REPLY", currentChannelId });
+
+    const upload = new CloudUtils.CloudUpload({
+        file: new File([blob], "remix.png", { type: "image/png" }),
+        isClip: false,
+        isThumbnail: false,
+        platform: 1
+    }, currentChannelId, false, 0);
+
+    upload.on("complete", () => {
+        RestAPI.post({
+            url: `/channels/${currentChannelId}/messages`,
+            body: {
+                channel_id: currentChannelId,
+                content: "",
+                nonce: SnowflakeUtils.fromTimestamp(Date.now()),
+                sticker_ids: [],
+                attachments: [{
+                    id: "0",
+                    filename: upload.filename,
+                    uploaded_filename: upload.uploadedFilename,
+                    size: blob.size,
+                    is_remix: settings.store.remixTag
+                }],
+                message_reference: reply ? MessageActions.getSendMessageOptionsForReply(reply)?.messageReference : null,
+            },
+        });
+    });
+    upload.on("error", () => showToast("Failed to upload remix", Toasts.Type.FAILURE));
+
+    upload.upload();
+}
+
+const settings = definePluginSettings({
+    remixTag: {
+        description: "Include the remix tag in remixed messages",
+        type: OptionType.BOOLEAN,
+        default: true,
+    },
+});
+
+export default definePlugin({
+    name: "Remix",
+    description: "Adds Remix to Desktop",
+    authors: [Devs.MrDiamond],
+    settings,
+
+    async start() {
+        addContextMenuPatch("channel-attach", UploadContextMenuPatch);
+        addContextMenuPatch("message", MessageContextMenuPatch);
+
+        await requireCreateStickerModal();
+        await requireSettingsMenu();
+
+        enableStyle(css);
+    },
+
+    stop() {
+        removeContextMenuPatch("channel-attach", UploadContextMenuPatch);
+        removeContextMenuPatch("message", MessageContextMenuPatch);
+
+        disableStyle(css);
+    },
+});
--- a/src/plugins/remix/styles.css
+++ b/src/plugins/remix/styles.css
@ -0,0 +1,57 @@
+.vc-remix-toolbar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+.vc-remix-tools,
+.vc-remix-misc,
+.vc-remix-settings {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 5px;
+    width: 100%;
+    background-color: var(--modal-footer-background);
+    padding: 10px 0;
+    border-radius: 8px;
+}
+
+.vc-remix-settings {
+    flex-direction: column;
+}
+
+.vc-remix-setting-section {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    width: 75%;
+}
+
+.vc-remix-toolbar button {
+    min-width: 100px;
+    height: 40px;
+    background-color: var(--brand);
+    color: var(--text-primary);
+    border-radius: 8px;
+    margin: 0 3px;
+}
+
+.vc-remix-canvas {
+    max-width: 100%;
+    max-height: 100%;
+    min-width: 50%;
+    min-height: 50%;
+}
+
+.vc-remix-editor {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
--- a/src/plugins/reviewDB/index.tsx
+++ b/src/plugins/reviewDB/index.tsx
@ -91,7 +91,7 @@ export default definePlugin({
            }
        },
        {
-            find: ".PANEL,isInteractionSource:",
+            find: ".PANEL,interactionType:",
            replacement: {
                match: /{profileType:\i\.\i\.PANEL,children:\[/,
                replace: "$&$self.BiteSizeReviewsButton({user:arguments[0].user}),"
--- a/src/plugins/silentTyping/index.tsx
+++ b/src/plugins/silentTyping/index.tsx
@ -88,7 +88,7 @@ export default definePlugin({
    name: "SilentTyping",
    authors: [Devs.Ven, Devs.Rini, Devs.ImBanana],
    description: "Hide that you are typing",
-    dependencies: ["CommandsAPI", "ChatInputButtonAPI"],
+    dependencies: ["ChatInputButtonAPI"],
    settings,
    contextMenus: {
        "textarea-context": ChatBarContextCheckbox
--- a/src/plugins/spotifyShareCommands/index.ts
+++ b/src/plugins/spotifyShareCommands/index.ts
@ -76,7 +76,6 @@ export default definePlugin({
    name: "SpotifyShareCommands",
    description: "Share your current Spotify track, album or artist via slash command (/track, /album, /artist)",
    authors: [Devs.katlyn],
-    dependencies: ["CommandsAPI"],
    commands: [
        {
            name: "track",
--- a/src/plugins/timeBarAllActivities/README.md
+++ b/src/plugins/timeBarAllActivities/README.md
@ -1,5 +0,0 @@
-# TimeBarAllActivities
-
-Adds the Spotify time bar to all activities if they have start and end timestamps.
-
-![](https://github.com/user-attachments/assets/9fbbe33c-8218-43c9-8b8d-f907a4e809fe)
--- a/src/plugins/timeBarAllActivities/index.tsx
+++ b/src/plugins/timeBarAllActivities/index.tsx
@ -1,84 +0,0 @@
-/*
- * Vencord, a Discord client mod
- * Copyright (c) 2024 Vendicated and contributors
- * SPDX-License-Identifier: GPL-3.0-or-later
- */
-
-import { definePluginSettings } from "@api/Settings";
-import ErrorBoundary from "@components/ErrorBoundary";
-import { Devs } from "@utils/constants";
-import definePlugin, { OptionType } from "@utils/types";
-import { findComponentByCodeLazy } from "@webpack";
-import { RequiredDeep } from "type-fest";
-
-interface Activity {
-    timestamps?: ActivityTimestamps;
-}
-
-interface ActivityTimestamps {
-    start?: string;
-    end?: string;
-}
-
-interface TimebarComponentProps {
-    activity: Activity;
-}
-
-const ActivityTimeBar = findComponentByCodeLazy<ActivityTimestamps>(".bar", ".progress", "(100*");
-
-function isActivityTimestamped(activity: Activity): activity is RequiredDeep<Activity> {
-    return activity.timestamps != null && activity.timestamps.start != null && activity.timestamps.end != null;
-}
-
-export const settings = definePluginSettings({
-    hideActivityDetailText: {
-        type: OptionType.BOOLEAN,
-        description: "Hide the large title text next to the activity",
-        default: true,
-    },
-    hideActivityTimerBadges: {
-        type: OptionType.BOOLEAN,
-        description: "Hide the timer badges next to the activity",
-        default: true,
-    }
-});
-
-export default definePlugin({
-    name: "TimeBarAllActivities",
-    description: "Adds the Spotify time bar to all activities if they have start and end timestamps",
-    authors: [Devs.fawn, Devs.niko],
-    settings,
-    patches: [
-        {
-            find: ".gameState,children:",
-            replacement: [
-                // Insert Spotify time bar component
-                {
-                    match: /\(0,.{0,30}activity:(\i),className:\i\.badges\}\)/g,
-                    replace: "$&,$self.TimebarComponent({activity:$1})"
-                },
-                // Hide the large title on listening activities, to make them look more like Spotify (also visible from hovering over the large icon)
-                {
-                    match: /(\i).type===(\i\.\i)\.WATCHING/,
-                    replace: "($self.settings.store.hideActivityDetailText&&$self.isActivityTimestamped($1)&&$1.type===$2.LISTENING)||$&"
-                }
-            ]
-        },
-        // Hide the "badge" timers that count the time since the activity starts
-        {
-            find: ".TvIcon).otherwise",
-            replacement: {
-                match: /null!==\(\i=null===\(\i=(\i)\.timestamps\).{0,50}created_at/,
-                replace: "($self.settings.store.hideActivityTimerBadges&&$self.isActivityTimestamped($1))?null:$&"
-            }
-        }
-    ],
-
-    isActivityTimestamped,
-
-    TimebarComponent: ErrorBoundary.wrap(({ activity }: TimebarComponentProps) => {
-        if (!isActivityTimestamped(activity)) return null;
-
-        return <ActivityTimeBar start={activity.timestamps.start} end={activity.timestamps.end} />;
-    }, { noop: true })
-});
--- a/src/plugins/userVoiceShow/README.md
+++ b/src/plugins/userVoiceShow/README.md
@ -0,0 +1,7 @@
+# User Voice Show
+
+Shows an indicator when a user is in a Voice Channel
+
+![a preview of the indicator in the user profile](https://github.com/user-attachments/assets/48f825e4-fad5-40d7-bb4f-41d5e595aae0)
+
+![a preview of the indicator in the member list](https://github.com/user-attachments/assets/51be081d-7bbb-45c5-8533-d565228e50c1)
--- a/src/plugins/userVoiceShow/components.tsx
+++ b/src/plugins/userVoiceShow/components.tsx
@ -0,0 +1,170 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { classNameFactory } from "@api/Styles";
+import ErrorBoundary from "@components/ErrorBoundary";
+import { classes } from "@utils/misc";
+import { findByPropsLazy, findComponentByCodeLazy, findStoreLazy } from "@webpack";
+import { ChannelStore, GuildStore, IconUtils, NavigationRouter, PermissionsBits, PermissionStore, showToast, Text, Toasts, Tooltip, useCallback, useMemo, UserStore, useStateFromStores } from "@webpack/common";
+import { Channel } from "discord-types/general";
+
+const cl = classNameFactory("vc-uvs-");
+
+const { selectVoiceChannel } = findByPropsLazy("selectChannel", "selectVoiceChannel");
+const VoiceStateStore = findStoreLazy("VoiceStateStore");
+const UserSummaryItem = findComponentByCodeLazy("defaultRenderUser", "showDefaultAvatarsForNullUsers");
+
+interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+
+function SpeakerIcon(props: IconProps) {
+    props.size ??= 16;
+
+    return (
+        <div
+            {...props}
+            role={props.onClick != null ? "button" : undefined}
+            className={classes(cl("speaker"), props.onClick != null ? cl("clickable") : undefined)}
+        >
+            <svg
+                width={props.size}
+                height={props.size}
+                viewBox="0 0 24 24"
+                fill="currentColor"
+            >
+                <path d="M12 3a1 1 0 0 0-1-1h-.06a1 1 0 0 0-.74.32L5.92 7H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2.92l4.28 4.68a1 1 0 0 0 .74.32H11a1 1 0 0 0 1-1V3ZM15.1 20.75c-.58.14-1.1-.33-1.1-.92v-.03c0-.5.37-.92.85-1.05a7 7 0 0 0 0-13.5A1.11 1.11 0 0 1 14 4.2v-.03c0-.6.52-1.06 1.1-.92a9 9 0 0 1 0 17.5Z" />
+                <path d="M15.16 16.51c-.57.28-1.16-.2-1.16-.83v-.14c0-.43.28-.8.63-1.02a3 3 0 0 0 0-5.04c-.35-.23-.63-.6-.63-1.02v-.14c0-.63.59-1.1 1.16-.83a5 5 0 0 1 0 9.02Z" />
+            </svg>
+        </div>
+    );
+}
+
+function LockedSpeakerIcon(props: IconProps) {
+    props.size ??= 16;
+
+    return (
+        <div
+            {...props}
+            role={props.onClick != null ? "button" : undefined}
+            className={classes(cl("speaker"), props.onClick != null ? cl("clickable") : undefined)}
+        >
+            <svg
+                width={props.size}
+                height={props.size}
+                viewBox="0 0 24 24"
+                fill="currentColor"
+            >
+                <path fillRule="evenodd" clipRule="evenodd" d="M16 4h.5v-.5a2.5 2.5 0 0 1 5 0V4h.5a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Zm4-.5V4h-2v-.5a1 1 0 1 1 2 0Z" />
+                <path d="M11 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1h-.06a1 1 0 0 1-.74-.32L5.92 17H3a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2.92l4.28-4.68a1 1 0 0 1 .74-.32H11ZM20.5 12c-.28 0-.5.22-.52.5a7 7 0 0 1-5.13 6.25c-.48.13-.85.55-.85 1.05v.03c0 .6.52 1.06 1.1.92a9 9 0 0 0 6.89-8.25.48.48 0 0 0-.49-.5h-1ZM16.5 12c-.28 0-.5.23-.54.5a3 3 0 0 1-1.33 2.02c-.35.23-.63.6-.63 1.02v.14c0 .63.59 1.1 1.16.83a5 5 0 0 0 2.82-4.01c.02-.28-.2-.5-.48-.5h-1Z" />
+            </svg>
+        </div>
+    );
+}
+
+interface VoiceChannelTooltipProps {
+    channel: Channel;
+}
+
+function VoiceChannelTooltip({ channel }: VoiceChannelTooltipProps) {
+    const voiceStates = useStateFromStores([VoiceStateStore], () => VoiceStateStore.getVoiceStatesForChannel(channel.id));
+    const users = useMemo(
+        () => Object.values<any>(voiceStates).map(voiceState => UserStore.getUser(voiceState.userId)).filter(user => user != null),
+        [voiceStates]
+    );
+
+    const guild = useMemo(
+        () => channel.getGuildId() == null ? undefined : GuildStore.getGuild(channel.getGuildId()),
+        [channel]
+    );
+
+    const guildIcon = useMemo(() => {
+        return guild?.icon == null ? undefined : IconUtils.getGuildIconURL({
+            id: guild.id,
+            icon: guild.icon,
+            size: 30
+        });
+    }, [guild]);
+
+    return (
+        <>
+            {guild != null && (
+                <div className={cl("guild-name")}>
+                    {guildIcon != null && <img className={cl("guild-icon")} src={guildIcon} alt="" />}
+                    <Text variant="text-sm/bold">{guild.name}</Text>
+                </div>
+            )}
+            <Text variant="text-sm/semibold">{channel.name}</Text>
+            <div className={cl("vc-members")}>
+                <SpeakerIcon size={18} />
+                <UserSummaryItem
+                    users={users}
+                    renderIcon={false}
+                    max={7}
+                    size={18}
+                />
+            </div>
+        </>
+    );
+}
+
+interface VoiceChannelIndicatorProps {
+    userId: string;
+}
+
+const clickTimers = {} as Record<string, any>;
+
+export const VoiceChannelIndicator = ErrorBoundary.wrap(({ userId }: VoiceChannelIndicatorProps) => {
+    const channelId = useStateFromStores([VoiceStateStore], () => VoiceStateStore.getVoiceStateForUser(userId)?.channelId as string | undefined);
+    const channel = useMemo(() => channelId == null ? undefined : ChannelStore.getChannel(channelId), [channelId]);
+
+    const onClick = useCallback((e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (channel == null || channelId == null) return;
+
+        if (!PermissionStore.can(PermissionsBits.VIEW_CHANNEL, channel)) {
+            showToast("You cannot view the user's Voice Channel", Toasts.Type.FAILURE);
+            return;
+        }
+
+        clearTimeout(clickTimers[channelId]);
+        delete clickTimers[channelId];
+
+        if (e.detail > 1) {
+            if (!PermissionStore.can(PermissionsBits.CONNECT, channel)) {
+                showToast("You cannot join the user's Voice Channel", Toasts.Type.FAILURE);
+                return;
+            }
+
+            selectVoiceChannel(channelId);
+        } else {
+            clickTimers[channelId] = setTimeout(() => {
+                NavigationRouter.transitionTo(`/channels/${channel.getGuildId() ?? "@me"}/${channelId}`);
+                delete clickTimers[channelId];
+            }, 250);
+        }
+    }, [channelId]);
+
+    const isLocked = useMemo(() => {
+        return !PermissionStore.can(PermissionsBits.VIEW_CHANNEL, channel) || !PermissionStore.can(PermissionsBits.CONNECT, channel);
+    }, [channelId]);
+
+    if (channel == null) return null;
+
+    return (
+        <Tooltip
+            text={<VoiceChannelTooltip channel={channel} />}
+            tooltipClassName={cl("tooltip-container")}
+        >
+            {props =>
+                isLocked ?
+                    <LockedSpeakerIcon {...props} onClick={onClick} />
+                    : <SpeakerIcon {...props} onClick={onClick} />
+            }
+        </Tooltip>
+    );
+}, { noop: true });
--- a/src/plugins/userVoiceShow/components/VoiceChannelSection.css
+++ b/src/plugins/userVoiceShow/components/VoiceChannelSection.css
@ -1,27 +0,0 @@
-.vc-uvs-button>div {
-    white-space: normal !important;
-}
-
-.vc-uvs-button {
-    width: 100%;
-    margin: auto;
-    height: unset;
-}
-
-.vc-uvs-header {
-    color: var(--header-primary);
-    margin-bottom: 6px;
-}
-
-.vc-uvs-modal-margin {
-    margin: 0 12px;
-}
-
-.vc-uvs-modal-margin div {
-    margin-bottom: 0 !important;
-}
-
-.vc-uvs-popout-margin-self>[class^="section"] {
-    padding-top: 0;
-    padding-bottom: 12px;
-}
--- a/src/plugins/userVoiceShow/components/VoiceChannelSection.tsx
+++ b/src/plugins/userVoiceShow/components/VoiceChannelSection.tsx
@ -1,61 +0,0 @@
-/*
- * 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 "./VoiceChannelSection.css";
-
-import { findByPropsLazy } from "@webpack";
-import { Button, Forms, PermissionStore, Toasts } from "@webpack/common";
-import { Channel } from "discord-types/general";
-
-const ChannelActions = findByPropsLazy("selectChannel", "selectVoiceChannel");
-
-const CONNECT = 1n << 20n;
-
-interface VoiceChannelFieldProps {
-    channel: Channel;
-    label: string;
-    showHeader: boolean;
-}
-
-export const VoiceChannelSection = ({ channel, label, showHeader }: VoiceChannelFieldProps) => (
-    // @TODO The div is supposed to be a UserPopoutSection
-    <div>
-        {showHeader && <Forms.FormTitle className="vc-uvs-header">In a voice channel</Forms.FormTitle>}
-        <Button
-            className="vc-uvs-button"
-            color={Button.Colors.TRANSPARENT}
-            size={Button.Sizes.SMALL}
-
-            onClick={() => {
-                if (PermissionStore.can(CONNECT, channel))
-                    ChannelActions.selectVoiceChannel(channel.id);
-                else
-                    Toasts.show({
-                        message: "Insufficient permissions to enter the channel.",
-                        id: "user-voice-show-insufficient-permissions",
-                        type: Toasts.Type.FAILURE,
-                        options: {
-                            position: Toasts.Position.BOTTOM,
-                        }
-                    });
-            }}
-        >
-            {label}
-        </Button>
-    </div>
-);
--- a/src/plugins/userVoiceShow/index.tsx
+++ b/src/plugins/userVoiceShow/index.tsx
@ -16,85 +16,85 @@
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

+import "./style.css";
+
+import { addDecorator, removeDecorator } from "@api/MemberListDecorators";
 import { definePluginSettings } from "@api/Settings";
-import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
-import { findStoreLazy } from "@webpack";
-import { ChannelStore, GuildStore, UserStore } from "@webpack/common";
-import { User } from "discord-types/general";

-import { VoiceChannelSection } from "./components/VoiceChannelSection";
-
-const VoiceStateStore = findStoreLazy("VoiceStateStore");
+import { VoiceChannelIndicator } from "./components";

 const settings = definePluginSettings({
    showInUserProfileModal: {
        type: OptionType.BOOLEAN,
-        description: "Show a user's voice channel in their profile modal",
+        description: "Show a user's Voice Channel indicator in their profile next to the name",
        default: true,
+        restartNeeded: true
    },
-    showVoiceChannelSectionHeader: {
+    showInVoiceMemberList: {
        type: OptionType.BOOLEAN,
-        description: 'Whether to show "IN A VOICE CHANNEL" above the join button',
+        description: "Show a user's Voice Channel indicator in the member and DMs list",
        default: true,
+        restartNeeded: true
    }
 });

-interface UserProps {
-    user: User;
-}
-
-const VoiceChannelField = ErrorBoundary.wrap(({ user }: UserProps) => {
-    const { channelId } = VoiceStateStore.getVoiceStateForUser(user.id) ?? {};
-    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
-
-    const result = `${guild.name} | ${channel.name}`;
-
-    return (
-        <VoiceChannelSection
-            channel={channel}
-            label={result}
-            showHeader={settings.store.showVoiceChannelSectionHeader}
-        />
-    );
-});
-
 export default definePlugin({
    name: "UserVoiceShow",
-    description: "Shows whether a User is currently in a voice channel somewhere in their profile",
-    authors: [Devs.LordElias],
+    description: "Shows an indicator when a user is in a Voice Channel",
+    authors: [Devs.LordElias, Devs.Nuckyz],
    settings,

-    patchModal({ user }: UserProps) {
-        if (!settings.store.showInUserProfileModal)
-            return null;
-
-        return (
-            <div className="vc-uvs-modal-margin">
-                <VoiceChannelField user={user} />
-            </div>
-        );
-    },
-
-    patchProfilePopout: ({ user }: UserProps) => {
-        const isSelfUser = user.id === UserStore.getCurrentUser().id;
-        return (
-            <div className={isSelfUser ? "vc-uvs-popout-margin-self" : ""}>
-                <VoiceChannelField user={user} />
-            </div>
-        );
-    },
-
    patches: [
-        // @TODO Maybe patch UserVoiceShow in simplified profile popout
-        // @TODO Patch new profile modal
+        // User Popout, Full Size Profile, Direct Messages Side Profile
+        {
+            find: ".Messages.USER_PROFILE_LOAD_ERROR",
+            replacement: {
+                match: /(\.fetchError.+?\?)null/,
+                replace: (_, rest) => `${rest}$self.VoiceChannelIndicator({userId:arguments[0]?.userId})`
+            },
+            predicate: () => settings.store.showInUserProfileModal
+        },
+        // To use without the MemberList decorator API
+        /* // Guild Members List
+        {
+            find: ".lostPermission)",
+            replacement: {
+                match: /\.lostPermission\).+?(?=avatar:)/,
+                replace: "$&children:[$self.VoiceChannelIndicator({userId:arguments[0]?.user?.id})],"
+            },
+            predicate: () => settings.store.showVoiceChannelIndicator
+        },
+        // Direct Messages List
+        {
+            find: "PrivateChannel.renderAvatar",
+            replacement: {
+                match: /\.Messages\.CLOSE_DM.+?}\)(?=])/,
+                replace: "$&,$self.VoiceChannelIndicator({userId:arguments[0]?.user?.id})"
+            },
+            predicate: () => settings.store.showVoiceChannelIndicator
+        }, */
+        // Friends List
+        {
+            find: ".avatar,animate:",
+            replacement: {
+                match: /\.subtext,children:.+?}\)\]}\)(?=])/,
+                replace: "$&,$self.VoiceChannelIndicator({userId:arguments[0]?.user?.id})"
+            },
+            predicate: () => settings.store.showInVoiceMemberList
+        }
    ],
+
+    start() {
+        if (settings.store.showInVoiceMemberList) {
+            addDecorator("UserVoiceShow", ({ user }) => user == null ? null : <VoiceChannelIndicator userId={user.id} />);
+        }
+    },
+
+    stop() {
+        removeDecorator("UserVoiceShow");
+    },
+
+    VoiceChannelIndicator
 });
--- a/src/plugins/userVoiceShow/style.css
+++ b/src/plugins/userVoiceShow/style.css
@ -0,0 +1,37 @@
+.vc-uvs-speaker {
+    color: var(--interactive-normal);
+    padding: 0 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.vc-uvs-clickable {
+    cursor: pointer;
+}
+
+.vc-uvs-clickable:hover {
+    color: var(--interactive-hover);
+}
+
+.vc-uvs-tooltip-container {
+    max-width: 200px;
+}
+
+.vc-uvs-guild-name {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.vc-uvs-guild-icon {
+    border-radius: 100%;
+    align-self: center;
+}
+
+.vc-uvs-vc-members {
+    display: flex;
+    margin: 8px 0;
+    flex-direction: row;
+    gap: 6px;
+}
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@ -268,7 +268,7 @@ export const Devs = /* #__PURE__*/ Object.freeze({
        id: 841509053422632990n
    },
    F53: {
-        name: "F53",
+        name: "Cassie (Code)",
        id: 280411966126948353n
    },
    AutumnVN: {
@ -419,6 +419,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
        name: "coolelectronics",
        id: 696392247205298207n,
    },
+    MrDiamond: {
+        name: "MrDiamond",
+        id: 523338295644782592n,
+    },
    Av32000: {
        name: "Av32000",
        id: 593436735380127770n,
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@ -72,13 +72,13 @@ export interface PluginDef {
    stop?(): void;
    patches?: Omit<Patch, "plugin">[];
    /**
-     * List of commands. If you specify these, you must add CommandsAPI to dependencies
+     * List of commands that your plugin wants to register
     */
    commands?: Command[];
    /**
     * A list of other plugins that your plugin depends on.
     * These will automatically be enabled and loaded before your plugin
-     * Common examples are CommandsAPI, MessageEventsAPI...
+     * Generally these will be API plugins
     */
    dependencies?: string[],
    /**
--- a/src/webpack/common/components.ts
+++ b/src/webpack/common/components.ts
@ -28,6 +28,8 @@ export let Forms = {} as {
    FormText: t.FormText,
 };

+export let Icons = {} as t.Icons;
+
 export let Card: t.Card;
 export let Button: t.Button;
 export let Switch: t.Switch;
@ -85,4 +87,5 @@ waitFor(["FormItem", "Button"], m => {
        Heading
    } = m);
    Forms = m;
+    Icons = m;
 });
--- a/src/webpack/common/types/components.d.ts
+++ b/src/webpack/common/types/components.d.ts
@ -18,6 +18,8 @@

 import type { ComponentType, CSSProperties, FunctionComponent, HtmlHTMLAttributes, HTMLProps, KeyboardEvent, MouseEvent, PropsWithChildren, PropsWithRef, ReactNode, Ref } from "react";

+import { IconNames } from "./iconNames";
+
 export type TextVariant = "heading-sm/normal" | "heading-sm/medium" | "heading-sm/semibold" | "heading-sm/bold" | "heading-md/normal" | "heading-md/medium" | "heading-md/semibold" | "heading-md/bold" | "heading-lg/normal" | "heading-lg/medium" | "heading-lg/semibold" | "heading-lg/bold" | "heading-xl/normal" | "heading-xl/medium" | "heading-xl/bold" | "heading-xxl/normal" | "heading-xxl/medium" | "heading-xxl/bold" | "eyebrow" | "heading-deprecated-14/normal" | "heading-deprecated-14/medium" | "heading-deprecated-14/bold" | "text-xxs/normal" | "text-xxs/medium" | "text-xxs/semibold" | "text-xxs/bold" | "text-xs/normal" | "text-xs/medium" | "text-xs/semibold" | "text-xs/bold" | "text-sm/normal" | "text-sm/medium" | "text-sm/semibold" | "text-sm/bold" | "text-md/normal" | "text-md/medium" | "text-md/semibold" | "text-md/bold" | "text-lg/normal" | "text-lg/medium" | "text-lg/semibold" | "text-lg/bold" | "display-sm" | "display-md" | "display-lg" | "code";
 export type FormTextTypes = Record<"DEFAULT" | "INPUT_PLACEHOLDER" | "DESCRIPTION" | "LABEL_BOLD" | "LABEL_SELECTED" | "LABEL_DESCRIPTOR" | "ERROR" | "SUCCESS", string>;
 export type HeadingTag = `h${1 | 2 | 3 | 4 | 5 | 6}`;
@ -69,7 +71,7 @@ export type FormText = ComponentType<PropsWithChildren<{
 }> & TextProps> & { Types: FormTextTypes; };

 export type Tooltip = ComponentType<{
-    text: ReactNode;
+    text: ReactNode | ComponentType;
    children: FunctionComponent<{
        onClick(): void;
        onMouseEnter(): void;
@ -502,3 +504,10 @@ export type Avatar = ComponentType<PropsWithChildren<{
 type FocusLock = ComponentType<PropsWithChildren<{
    containerRef: RefObject<HTMLElement>;
 }>>;
+
+export type Icon = ComponentType<JSX.IntrinsicElements["svg"] & {
+    size?: string;
+    colorClass?: string;
+} & Record<string, any>>;
+
+export type Icons = Record<IconNames, Icon>;
--- a/src/webpack/common/types/iconNames.d.ts
+++ b/src/webpack/common/types/iconNames.d.ts
--- a/src/webpack/common/types/menu.d.ts
+++ b/src/webpack/common/types/menu.d.ts
@ -72,6 +72,11 @@ export interface Menu {
        onChange(value: number): void,
        renderValue?(value: number): string,
    }>;
+    MenuSearchControl: RC<{
+        query: string
+        onChange(query: string): void;
+        placeholder?: string;
+    }>;
 }

 export interface ContextMenuApi {
Author	SHA1	Message	Date
Drew	4efb893fe4	Merge `efb2e07fb6` into `8afd79dd50`	2024-09-17 19:36:50 -06:00
Vendicated	8afd79dd50	add Icons to webpack commons Some checks are pending Sync to Codeberg / codeberg (push) Waiting to run Details test / test (push) Waiting to run Details	2024-09-18 01:36:52 +02:00
Vendicated	65c5897dc3	remove need to depend on CommandsAPI	2024-09-18 01:26:25 +02:00
Nuckyz	6cce8a8bc4	Experiments: Allow clips to be recorded without streaming Some checks failed Sync to Codeberg / codeberg (push) Has been cancelled Details test / test (push) Has been cancelled Details	2024-09-17 14:30:23 -03:00
Nuckyz	1848b16536	ReviewDB: Fix in panel profile	2024-09-17 14:30:23 -03:00
Kyuuhachi	c572116b97	BetterSettings: Add submenu for plugins (#2858 ) Co-authored-by: Vendicated <vendicated@riseup.net>	2024-09-17 15:40:11 +00:00
Lumap	e26986f66a	AppleMusicRichPresence: fix formatting when listening to radio (#2869 ) Co-authored-by: Ryan Cao <70191398+ryanccn@users.noreply.github.com> Co-authored-by: v <vendicated@riseup.net>	2024-09-17 17:29:46 +02:00
Nuckyz	f12335a371	UserVoiceShow: Fix for simplified profiles Some checks are pending Sync to Codeberg / codeberg (push) Waiting to run Details test / test (push) Waiting to run Details	2024-09-16 15:16:41 -03:00
Nuckyz	640d99dcda	delete NoDefaultHangStatus ~ Removed feature Some checks are pending Sync to Codeberg / codeberg (push) Waiting to run Details test / test (push) Waiting to run Details	2024-09-16 07:51:10 -03:00
Vendicated	bcfef05a8a	delete TimeBarAllActivites ~ now a stock feature	2024-09-14 17:22:29 +02:00
Cookie	f17b92c2fd	OpenInApp: support Spotify prerelease links (#2870 )	2024-09-14 15:03:58 +00:00
Ryan Cao	292f7d71d3	AppleMusicRichPresence: fix metadata fetching (#2864 )	2024-09-14 16:59:05 +02:00
Drew	efb2e07fb6	Merge branch 'dev' into remix	2024-06-24 11:49:54 -06:00
Drew	cf3a15eea4	Merge branch 'Vendicated:main' into remix	2024-03-28 15:41:37 -06:00
MrDiamondDog	bdd2c71f9c	Merge branch 'dev' into remix	2024-03-21 18:00:39 -06:00
MrDiamondDog	dc2b61a98d	Merge branch 'dev' into remix	2024-03-21 17:49:46 -06:00
MrDiamondDog	7e18c12e6d	Update README.md	2024-02-06 17:58:12 -07:00
MrDiamondDog	c78b9dc4b3	Merge branch 'dev' into remix	2024-02-06 17:45:57 -07:00
MrDiamondDog	3df388be83	Force-load color picker and fix other stuff	2024-02-06 17:45:30 -07:00
MrDiamondDog	8e660bad9f	Merge branch 'dev' into remix	2024-02-06 16:54:13 -07:00
MrDiamondDog	8540f96e8d	Create README.md	2024-01-30 18:36:59 -07:00
MrDiamondDog	cbb1335cc1	Merge branch 'Vendicated:main' into remix	2024-01-30 18:33:20 -07:00
MrDiamondDog	236850562f	feat(plugin): Remix	2024-01-30 18:32:55 -07:00