forked!!

src/equicordplugins/customAppIcons/AppIconModal.tsx

@@ -0,0 +1,104 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { localStorage } from "@utils/localStorage";
+import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize } from "@utils/modal";
+import { findByProps } from "@webpack";
+import { Button, FluxDispatcher, Forms, React, showToast, Text, TextInput, Toasts, useState } from "@webpack/common";
+
+
+interface AppIcon {
+    id: string,
+    iconSource: string,
+    name: string,
+    isPremium: boolean;
+}
+function AppIconModal(props: ModalProps) {
+    const [name, setName] = useState("");
+    const [imageUrl, setimageUrl] = useState("");
+
+    function addAppIcon(name, url) {
+        const appIcons = JSON.parse(localStorage.getItem("vc_app_icons") ?? "[]");
+        const id = `${name.replaceAll(" ", "")}_${Date.now()}`; // avoid crashing if repeated name
+        const icon = {
+            "id": id,
+            "iconSource": url,
+            "isPremium": false,
+            "name": name
+        } as AppIcon;
+
+
+        appIcons.push(icon);
+        findByProps("ICONS", "ICONS_BY_ID").ICONS.push(icon);
+        findByProps("ICONS", "ICONS_BY_ID").ICONS_BY_ID[icon.id] = icon;
+        showToast("Added custom app icon!", Toasts.Type.SUCCESS);
+        props.onClose();
+        const oldIcon = findByProps("getCurrentDesktopIcon").getCurrentDesktopIcon();
+
+        let random_icon = Object.keys(findByProps("ICONS_BY_ID")).filter(icon => icon !== oldIcon) as [];
+        random_icon = random_icon[Math.floor(Math.random() * random_icon.length)];
+
+        FluxDispatcher.dispatch({
+            type: "APP_ICON_UPDATED",
+            id: random_icon
+        });
+        FluxDispatcher.dispatch({
+            type: "APP_ICON_UPDATED",
+            id: oldIcon
+        });
+        localStorage.setItem("vc_app_icons", JSON.stringify(appIcons));
+    }
+
+    return <ModalRoot {...props} size={ModalSize.MEDIUM}>
+        <ModalHeader>
+            <Text color="header-primary" variant="heading-lg/semibold" tag="h1" style={{ flexGrow: 1 }}>Add a custom app icon:</Text>
+            <ModalCloseButton onClick={props.onClose}></ModalCloseButton>
+        </ModalHeader>
+        <ModalContent>
+            <br />
+            <Forms.FormSection title="Name">
+                <Forms.FormText type="description">
+                    This name will be shown in the App Icons list.
+                </Forms.FormText>
+                <TextInput
+                    placeholder="My awesome Custom App Icon!"
+                    value={name}
+                    onChange={setName}
+                />
+            </Forms.FormSection>
+            <br />
+            <Forms.FormSection title="Image URL">
+                <Forms.FormText type="description">
+                    Paste here your image URL to upload your icon (.webp, .jpg, .jpeg, .png, .gif, .ico and Discord Icons, Emojis, PFPs, etc.).
+                </Forms.FormText>
+                <TextInput
+                    placeholder="https://cdn.discordapp.com/emojis/1098881040900173895.gif"
+                    value={imageUrl}
+                    onChange={setimageUrl}
+                />
+            </Forms.FormSection>
+        </ModalContent>
+        <ModalFooter>
+            <Button
+                onClick={() => {
+                    addAppIcon(name, imageUrl);
+                }}
+                disabled={!name || !imageUrl && imageUrl.match(/(https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z]{2,}(\.[a-zA-Z]{2,})(\.[a-zA-Z]{2,})?\/[a-zA-Z0-9]{2,}|((https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z]{2,}(\.[a-zA-Z]{2,})(\.[a-zA-Z]{2,})?)|(https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z0-9]{2,}\.[a-zA-Z0-9]{2,}\.[a-zA-Z0-9]{2,}(\.[a-zA-Z0-9]{2,})?/) !== undefined}
+            >
+                Add Icon
+            </Button>
+            <Button
+                onClick={props.onClose}
+                color={Button.Colors.PRIMARY}
+                look={Button.Looks.LINK}
+            >
+                Cancel
+            </Button>
+        </ModalFooter>
+    </ModalRoot>;
+}
+
+export default AppIconModal;

src/equicordplugins/customAppIcons/index.tsx

@@ -0,0 +1,110 @@
+/*
+ * 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 { Link } from "@components/Link";
+import { Devs } from "@utils/constants";
+import { localStorage } from "@utils/localStorage";
+import { closeAllModals, openModal } from "@utils/modal";
+import definePlugin from "@utils/types";
+import { findByProps } from "@webpack";
+import { Button, FluxDispatcher, Forms, React, showToast, Toasts } from "@webpack/common";
+
+import AppIconModal from "./AppIconModal";
+
+function removeAppIcon() {
+    const current_icon = findByProps("getCurrentDesktopIcon").getCurrentDesktopIcon();
+    let icons = JSON.parse(localStorage.getItem("vc_app_icons") || "[]");
+    const index = icons.findIndex(icon => current_icon === icon.id);
+    if (index !== -1) {
+        icons = icons.filter(e => e.id !== current_icon);
+        delete findByProps("ICONS", "ICONS_BY_ID").ICONS_BY_ID[current_icon];
+        delete findByProps("ICONS", "ICONS_BY_ID").ICONS[findByProps("ICONS", "ICONS_BY_ID").ICONS.findIndex((icon => current_icon === icon?.id))];
+        localStorage.setItem("vc_app_icons", JSON.stringify(icons));
+        showToast("Icon successfully deleted!", Toasts.Type.SUCCESS);
+        FluxDispatcher.dispatch({
+            type: "APP_ICON_UPDATED",
+            id: "AppIcon"
+        });
+    } else {
+        showToast("Cannot delete native App Icons!", Toasts.Type.FAILURE);
+        return;
+    }
+
+}
+
+
+export default definePlugin({
+    name: "CustomAppIcons",
+    description: "Add/upload custom (In-)App Icons.",
+    authors: [Devs.HAPPY_ENDERMAN, Devs.SerStars],
+    patches: [
+        {
+            find: ".PremiumUpsellTypes.APP_ICON_UPSELL",
+            replacement: [
+                {
+                    match: /\w+\.jsx\)\(\w+,{markAsDismissed:\w+,isCoachmark:\w+}\)/,
+                    replace(str) {
+                        return str + ",$self.addButtons()";
+                    }
+                }
+            ]
+        }
+    ],
+
+
+    start() {
+        const appIcons = JSON.parse(localStorage.getItem("vc_app_icons") ?? "[]");
+        for (const icon of appIcons) {
+            findByProps("ICONS", "ICONS_BY_ID").ICONS.push(icon);
+            findByProps("ICONS", "ICONS_BY_ID").ICONS_BY_ID[icon.id] = icon;
+        }
+    },
+    stop() {
+
+    },
+    addButtons() {
+
+        const { editorFooter } = findByProps("editorFooter");
+        return (
+            <>
+                <Button color={Button.Colors.BRAND_NEW} size={Button.Sizes.MEDIUM} className={editorFooter} onClick={() => {
+                    openModal(props => <AppIconModal {...props} />);
+                }}>
+                    Add Custom App Icon
+                </Button>
+                <Button color={Button.Colors.RED} size={Button.Sizes.MEDIUM} className={editorFooter} onClick={removeAppIcon}>
+                    Remove Custom selected App Icon
+                </Button>
+            </>
+        );
+    },
+
+    settingsAboutComponent: () => {
+        return (
+            <><Forms.FormTitle>
+                <Forms.FormTitle>How to use?</Forms.FormTitle>
+            </Forms.FormTitle>
+                <Forms.FormText>
+                    <Forms.FormText>Go to <Link href="/settings/appearance" onClick={e => { e.preventDefault(); closeAllModals(); FluxDispatcher.dispatch({ type: "USER_SETTINGS_MODAL_SET_SECTION", section: "Appearance" }); }}>Appearance Settings</Link> tab.</Forms.FormText>
+                    <Forms.FormText>Scroll down to "In-app Icons" and click on "Preview App Icon".</Forms.FormText>
+                    <Forms.FormText>And upload your own custom icon!</Forms.FormText>
+                    <Forms.FormText>You can only use links when you are uploading your Custom Icon.</Forms.FormText>
+                </Forms.FormText></>
+        );
+    }
+});