PlainFolderIcon: Fix plugin not working (#3409)

src/plugins/betterFolders/index.tsx

@@ -61,7 +61,7 @@ function filterTreeWithTargetNode(children: any, predicate: (node: any) => boole
             return true;
         }
 
-        return filterTreeWithTargetNode(children.props.children, predicate);
+        return filterTreeWithTargetNode(children.props?.children, predicate);
     }
 
 
@@ -150,7 +150,7 @@ export default definePlugin({
                 },
                 // Export the isBetterFolders and betterFoldersExpandedIds variable to the Guild List component
                 {
-                    match: /0,\i\.jsxs?[^0}]{0,100}guildDiscoveryButton:\i,/g,
+                    match: /,{guildDiscoveryButton:\i,/g,
                     replace: "$&isBetterFolders:arguments[0]?.isBetterFolders,betterFoldersExpandedIds:arguments[0]?.betterFoldersExpandedIds,"
                 },
                 // Export the isBetterFolders variable to the folders component
@@ -349,7 +349,12 @@ export default definePlugin({
                 return true;
             }
 
-            return filterTreeWithTargetNode(child, child => child?.props?.renderTreeNode != null);
+            try {
+                return filterTreeWithTargetNode(child, child => child?.props?.renderTreeNode != null);
+            } catch (e) {
+                console.error(e);
+                return true;
+            }
         };
     },
 

src/plugins/mutualGroupDMs/index.tsx

@@ -59,22 +59,21 @@ function renderClickableGDMs(mutualDms: Channel[], onClose: () => void) {
     return mutualDms.map(c => (
         <Clickable
             key={c.id}
+            className={MutualsListClasses.row}
             onClick={() => {
                 onClose();
                 SelectedChannelActionCreators.selectPrivateChannel(c.id);
             }}
         >
-            <div className={MutualsListClasses.row}>
-                <Avatar
-                    src={IconUtils.getChannelIconURL({ id: c.id, icon: c.icon, size: 32 })}
-                    size="SIZE_40"
-                    className={MutualsListClasses.icon}
-                >
-                </Avatar>
-                <div className={MutualsListClasses.details}>
-                    <div className={MutualsListClasses.name}>{getGroupDMName(c)}</div>
-                    <div className={MutualsListClasses.nick}>{c.recipients.length + 1} Members</div>
-                </div>
+            <Avatar
+                src={IconUtils.getChannelIconURL({ id: c.id, icon: c.icon, size: 32 })}
+                size="SIZE_40"
+                className={MutualsListClasses.icon}
+            >
+            </Avatar>
+            <div className={MutualsListClasses.details}>
+                <div className={MutualsListClasses.name}>{getGroupDMName(c)}</div>
+                <div className={MutualsListClasses.nick}>{c.recipients.length + 1} Members</div>
             </div>
         </Clickable>
     ));

src/plugins/plainFolderIcon/index.ts

@@ -16,28 +16,27 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./style.css";
+
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
 
 export default definePlugin({
     name: "PlainFolderIcon",
-    description: "Doesn't show the small guild icons in folders",
+    description: "Dont show the small guild icons in folders",
     authors: [Devs.botato],
-    patches: [{
-        find: ".expandedFolderIconWrapper",
-        replacement: [
-            // there are two elements, the first one is the plain folder icon
-            // the second is the four guild preview icons
-            // always show this one (the plain icons)
-            {
-                match: /\(\i\|\|\i\)&&(\(.{0,40}\(\i\.animated)/,
-                replace: "$1",
-            },
-            // and never show this one (the guild preview icons)
-            {
-                match: /\(\i\|\|!\i\)&&(\(.{0,40}\(\i\.animated)/,
-                replace: "false&&$1",
-            }
-        ]
-    }]
+
+    patches: [
+        {
+            find: ".folderPreviewGuildIconError",
+            replacement: [
+                {
+                    // Discord always renders both plain and guild icons folders and uses a css transtion to switch between them
+                    match: /(?<=.folderButtonContent]:(!\i))/,
+                    replace: (_, hasFolderButtonContentClass) => `,"vc-plainFolderIcon-plain":${hasFolderButtonContentClass}`
+                }
+
+            ]
+        }
+    ]
 });

src/plugins/plainFolderIcon/style.css

@@ -0,0 +1,10 @@
+.vc-plainFolderIcon-plain {
+    /* Without this, they are a bit laggier */
+    transition: none !important;
+
+    /* Don't show the mini guild icons */
+    transform: translateZ(0);
+
+    /* The new icons are fully transparent. Add a sane default to match the old behavior */
+    background-color: color-mix(in oklab, var(--custom-folder-color, var(--bg-brand)) 30%, var(--background-surface-higher) 70%);
+}