fix *some* horrorcode

src/plugins/customFolderIcons/index.tsx

@@ -4,29 +4,26 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import "./style.css";
-
 import { DataStore } from "@api/index";
 import { Devs } from "@utils/constants";
 import { closeModal, ModalContent, ModalHeader, ModalRoot, openModalLazy } from "@utils/modal";
 import definePlugin from "@utils/types";
 import { Button, Menu, TextInput } from "@webpack/common";
 const DATA_STORE_NAME = "CFI_DATA";
-enum ICON_TYPE {
-    PNG,
-    SVG
-}
 interface folderIcon{
-    type: ICON_TYPE,
+    url: string,
-    url: string
 }
-interface config {
+interface folderMap {
-    [key: string]: folderIcon
+    [key: string]: folderIcon | undefined
 }
-let d: config;
+interface folderProp {
+    folderId: string;
+    folderColor: number;
+}
+let d: folderMap;
 export default definePlugin({
     start: async ()=>{
-        d = await DataStore.get(DATA_STORE_NAME) || {} as config;
+        d = await DataStore.get(DATA_STORE_NAME) || {} as folderMap;
     },
     name: "_customFolderIcons",
     description: "customize folder icons with any png",
@@ -37,15 +34,15 @@ export default definePlugin({
         {
             find: ".expandedFolderIconWrapper",
             replacement: {
-                match: /(return.{0,80}expandedFolderIconWrapper.*,)\(0,..jsxs\)\(.*]}\)/,
+                match: /(return.{0,80}expandedFolderIconWrapper.*,)(\(0,..jsxs\)\(.*]}\))/,
-                replace: "$1$self.test(e)"
+                replace: "$1$self.shouldReplace(e)?$self.replace(e):$2"
             }
         }
     ],
     contextMenus: {
-        "guild-context": (c, a) => {
+        "guild-context": (c, a: folderProp) => {
             if(!("folderId" in a)) return;
-            c.push(makeContextItem(a.folderId));
+            c.push(makeContextItem(a));
         }
     },
     commands: [
@@ -53,68 +50,52 @@ export default definePlugin({
             name: "test",
             description: "test command for some wack shit",
             execute: async () => {
-                console.log("asd");
             }
         }
     ],
-    test(e){
+    shouldReplace(e: any){
-        console.log(e);
+        return d && e.folderNode.id in d && d[e.folderNode.id] && d[e.folderNode.id]?.url;
-        if(d && e.folderNode.id in d){
+    },
-            switch(d[e.folderNode.id].type){
+    replace(e: any){
-                case ICON_TYPE.PNG:
+        if(d && d[e.folderNode.id]){
-                    return (
+            return (
-                        <img src={d[e.folderNode.id].url} width={"100%"} height={"100%"} />
+                <img src={d[e.folderNode.id]!.url} width={"100%"} height={"100%"}
-                    );
+                    style={{
-                case ICON_TYPE.SVG:
+                        backgroundColor: int2rgba(e.folderNode.color, .4)
-                    return null;
+                    }}
-            }
+                />
+            );
         }
-        // TODO: when using the default set the color properly
-        return(
-            <div className="customFolderDefaultIcon">
-                <svg
-                    aria-hidden="true"
-                    role="img"
-                    fill="white"
-                    width={24}
-                    height={24}
-                    viewBox="0 0 24 24"
-                >
-                    <path
-                        d="M2 5a3 3 0 0 1 3-3h3.93a2 2 0 0 1 1.66.9L12 5h7a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V5Z"/>
-                </svg>
-            </div>
-        );
     }
 });
-const setFolderUrl = async (id: string, url: string) => {
+/**
-    console.log(id, url);
+    * @param i RGB value
-    DataStore.get<config>(DATA_STORE_NAME).then(v => {
+    * @param a alpha bewteen zero and 1
-        if(v){
+    */
-            v[id] = {
+const int2rgba = (i: number, a: number = 1)=>{
-                type: ICON_TYPE.PNG,
+    const b = i & 0xFF,
-                url: url
+        g = (i & 0xFF00) >>> 8,
-            };
+        r = (i & 0xFF0000) >>> 16;
-            DataStore.set(DATA_STORE_NAME, v).then(() => { d = v; }).catch(e => {
+    return `rgba(${[r,g,b].join(",")},${a})`;
-                handleUpdateError(e);
+};
-            });
+const setFolderUrl = async (a: folderProp, url: string) => {
-        }else{
+    DataStore.get<folderMap>(DATA_STORE_NAME).then(v => {
-            v = {};
+        v = v ?? {} as folderMap;
-            v[id] = {
+        v[a.folderId] = {
-                type: ICON_TYPE.PNG,
+            // type: url.endsWith("svg") ? ICON_TYPE.SVG:ICON_TYPE.PNG,
-                url: url
+            url: url,
-            };
+        };
-            DataStore.set(DATA_STORE_NAME, v).then(() => { d = v; }).catch(e => {
+        DataStore.set(DATA_STORE_NAME, v).then(() => { d = v; }).catch(e => {
-                handleUpdateError(e);
+            handleUpdateError(e);
-            });
+        });
-        }
     }
     )
         .catch(e => {
             handleUpdateError(e);
         });
 };
-function ImageModal(a: { folderId: string }){
+
+function ImageModal(folderData: folderProp){
     let v = "";
     return(
         <>
@@ -126,23 +107,34 @@ function ImageModal(a: { folderId: string }){
             >
             </TextInput>
             <Button onClick={() => {
-                setFolderUrl(a.folderId, v);
+                setFolderUrl(folderData, v);
                 closeModal("custom-folder-icon");
             }}
             >
                 Set With Url
             </Button>
+            <hr />
+            <Button onClick={() => {
+                DataStore.get(DATA_STORE_NAME).then(v => {
+                    if(!v) return;
+                    v[folderData.folderId] = undefined;
+                    d = v;
+                });
+                closeModal("custom-folder-icon");
+            }}>
+                Unset
+            </Button>
+            <hr />
         </>
     );
 }
-function makeContextItem(id: string) {
+function makeContextItem(a: folderProp) {
     return (
         <Menu.MenuItem
             id="custom-folder-icons"
             key="custom-folder-icons"
             label="Change Icon"
             action={() => {
-                console.log("menu clicked");
                 openModalLazy(async () => {
                     return props => (
                         <ModalRoot {...props}>
@@ -154,8 +146,15 @@ function makeContextItem(id: string) {
                                 </div>
                             </ModalHeader>
                             <ModalContent>
-                                <ImageModal folderId={id}/>
+                                <ImageModal folderId={a.folderId} folderColor={a.folderColor}/>
                             </ModalContent>
+                            <div style={{
+                                color: "white",
+                                margin: "2.5%",
+                                marginTop: "1%"
+                            }}>
+                                You might have to hover the folder after setting in order for it to refresh.
+                            </div>
                         </ModalRoot>
                     );
                 },

src/plugins/customFolderIcons/style.css

@@ -1,7 +0,0 @@
-.customFolderDefaultIcon{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: var(--custom-folder-item-guild-icon-size);
-    height: var(--custom-folder-item-guild-icon-size);
-}