From 9a4d3a8c2c1110f4a2e339ee06572573deac4e86 Mon Sep 17 00:00:00 2001
From: Wagyourtail <wagyourtail@wagyourtail.xyz>
Date: Fri, 18 Oct 2024 13:29:42 -0500
Subject: [PATCH] each folder on own line

---
 src/plugins/betterFolders/FolderSideBar.tsx | 46 ++++++++++-----------
 src/plugins/betterFolders/index.tsx         | 44 ++++++++++----------
 2 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/src/plugins/betterFolders/FolderSideBar.tsx b/src/plugins/betterFolders/FolderSideBar.tsx
index 53d24ed93..851085a33 100644
--- a/src/plugins/betterFolders/FolderSideBar.tsx
+++ b/src/plugins/betterFolders/FolderSideBar.tsx
@@ -27,17 +27,24 @@ const ChannelRTCStore = findStoreLazy("ChannelRTCStore");
 const Animations = findByPropsLazy("a", "animated", "useTransition");
 const GuildsBar = findComponentByCodeLazy('("guildsnav")');
 
+function generateSidebar(guildsBarProps, expandedFolders, id: number) {
+    return (
+        <GuildsBar
+            {...guildsBarProps}
+            betterFoldersId={id}
+            betterFoldersExpandedIds={expandedFolders}
+        />
+    );
+}
+
 export default ErrorBoundary.wrap(guildsBarProps => {
     const expandedFolders = useStateFromStores([ExpandedGuildFolderStore], () => ExpandedGuildFolderStore.getExpandedFolders());
     const isFullscreen = useStateFromStores([ChannelRTCStore], () => ChannelRTCStore.isFullscreenInContext());
 
-    const Sidebar = (
-        <GuildsBar
-            {...guildsBarProps}
-            isBetterFolders={true}
-            betterFoldersExpandedIds={expandedFolders}
-        />
-    );
+    console.log("EXPANDED FOLDERS");
+    console.log(expandedFolders);
+
+    const Sidebars = Array.from(expandedFolders).map(e => generateSidebar(guildsBarProps, new Set([e]), 1));
 
     const visible = !!expandedFolders.size;
     const guilds = document.querySelector(guildsBarProps.className.split(" ").map(c => `.${c}`).join(""));
@@ -50,25 +57,18 @@ export default ErrorBoundary.wrap(guildsBarProps => {
 
     if (!guilds || !settings.store.sidebarAnim) {
         return visible
-            ? <div style={barStyle}>{Sidebar}</div>
+            ? <div style={barStyle}>{Sidebars}</div>
             : null;
     }
 
+    const animStyle = {
+        width: guilds.getBoundingClientRect().width * Sidebars.length,
+        transition: "width .2s ease-out"
+    } as CSSProperties;
+
     return (
-        <Animations.Transition
-            items={visible}
-            from={{ width: 0 }}
-            enter={{ width: guilds.getBoundingClientRect().width }}
-            leave={{ width: 0 }}
-            config={{ duration: 200 }}
-        >
-            {(animationStyle, show) =>
-                show && (
-                    <Animations.animated.div style={{ ...animationStyle, ...barStyle }}>
-                        {Sidebar}
-                    </Animations.animated.div>
-                )
-            }
-        </Animations.Transition>
+        <div style={{ ...animStyle, ...barStyle }}>
+            {Sidebars}
+        </div>
     );
 }, { noop: true });
diff --git a/src/plugins/betterFolders/index.tsx b/src/plugins/betterFolders/index.tsx
index bb1a67ebb..8529c98f3 100644
--- a/src/plugins/betterFolders/index.tsx
+++ b/src/plugins/betterFolders/index.tsx
@@ -110,30 +110,30 @@ export default definePlugin({
             find: '("guildsnav")',
             predicate: () => settings.store.sidebar,
             replacement: [
-                // Create the isBetterFolders variable in the GuildsBar component
+                // Create the betterFoldersId variable in the GuildsBar component
                 {
                     match: /let{disableAppDownload:\i=\i\.isPlatformEmbedded,isOverlay:.+?(?=}=\i,)/,
-                    replace: "$&,isBetterFolders"
+                    replace: "$&,betterFoldersId"
                 },
                 // If we are rendering the Better Folders sidebar, we filter out guilds that are not in folders and unexpanded folders
                 {
                     match: /\[(\i)\]=(\(0,\i\.\i\).{0,40}getGuildsTree\(\).+?}\))(?=,)/,
-                    replace: (_, originalTreeVar, rest) => `[betterFoldersOriginalTree]=${rest},${originalTreeVar}=$self.getGuildTree(!!arguments[0]?.isBetterFolders,betterFoldersOriginalTree,arguments[0]?.betterFoldersExpandedIds)`
+                    replace: (_, originalTreeVar, rest) => `[betterFoldersOriginalTree]=${rest},${originalTreeVar}=$self.getGuildTree(arguments[0]?.betterFoldersId ?? 0,betterFoldersOriginalTree,arguments[0]?.betterFoldersExpandedIds)`
                 },
                 // If we are rendering the Better Folders sidebar, we filter out everything but the servers and folders from the GuildsBar Guild List children
                 {
                     match: /lastTargetNode:\i\[\i\.length-1\].+?Fragment.+?\]}\)\]/,
-                    replace: "$&.filter($self.makeGuildsBarGuildListFilter(!!arguments[0]?.isBetterFolders))"
+                    replace: "$&.filter($self.makeGuildsBarGuildListFilter(arguments[0]?.betterFoldersId ?? 0))"
                 },
                 // If we are rendering the Better Folders sidebar, we filter out everything but the scroller for the guild list from the GuildsBar Tree children
                 {
                     match: /unreadMentionsIndicatorBottom,.+?}\)\]/,
-                    replace: "$&.filter($self.makeGuildsBarTreeFilter(!!arguments[0]?.isBetterFolders))"
+                    replace: "$&.filter($self.makeGuildsBarTreeFilter(arguments[0]?.betterFoldersId ?? 0))"
                 },
-                // Export the isBetterFolders variable to the folders component
+                // Export the betterFoldersId variable to the folders component
                 {
                     match: /switch\(\i\.type\){case \i\.\i\.FOLDER:.+?folderNode:\i,/,
-                    replace: '$&isBetterFolders:typeof isBetterFolders!=="undefined"?isBetterFolders:false,'
+                    replace: '$&betterFoldersId:typeof betterFoldersId!=="undefined"?betterFoldersId:0,'
                 }
             ]
         },
@@ -161,13 +161,13 @@ export default definePlugin({
             find: ".FOLDER_ITEM_GUILD_ICON_MARGIN);",
             predicate: () => settings.store.sidebar,
             replacement: [
-                // We use arguments[0] to access the isBetterFolders variable in this nested folder component (the parent exports all the props so we don't have to patch it)
+                // We use arguments[0] to access the betterFoldersId variable in this nested folder component (the parent exports all the props so we don't have to patch it)
 
                 // If we are rendering the normal GuildsBar sidebar, we make Discord think the folder is always collapsed to show better icons (the mini guild icons) and avoid transitions
                 {
                     predicate: () => settings.store.keepIcons,
                     match: /(?<=let{folderNode:\i,setNodeRef:\i,.+?expanded:(\i),.+?;)(?=let)/,
-                    replace: (_, isExpanded) => `${isExpanded}=!!arguments[0]?.isBetterFolders&&${isExpanded};`
+                    replace: (_, isExpanded) => `${isExpanded}=!!arguments[0]?.betterFoldersId&&${isExpanded};`
                 },
                 // Disable expanding and collapsing folders transition in the normal GuildsBar sidebar
                 {
@@ -185,13 +185,13 @@ export default definePlugin({
                     // Decide if we should render the expanded folder background if we are rendering the Better Folders sidebar
                     predicate: () => settings.store.showFolderIcon !== FolderIconDisplay.Always,
                     match: /(?<=\.wrapper,children:\[)/,
-                    replace: "$self.shouldShowFolderIconAndBackground(!!arguments[0]?.isBetterFolders,arguments[0]?.betterFoldersExpandedIds)&&"
+                    replace: "$self.shouldShowFolderIconAndBackground(!!arguments[0]?.betterFoldersId ?? 0,arguments[0]?.betterFoldersExpandedIds)&&"
                 },
                 {
                     // Decide if we should render the expanded folder icon if we are rendering the Better Folders sidebar
                     predicate: () => settings.store.showFolderIcon !== FolderIconDisplay.Always,
                     match: /(?<=\.expandedFolderBackground.+?}\),)(?=\i,)/,
-                    replace: "!$self.shouldShowFolderIconAndBackground(!!arguments[0]?.isBetterFolders,arguments[0]?.betterFoldersExpandedIds)?null:"
+                    replace: "!$self.shouldShowFolderIconAndBackground(!!arguments[0]?.betterFoldersId ?? 0,arguments[0]?.betterFoldersExpandedIds)?null:"
                 }
             ]
         },
@@ -256,9 +256,9 @@ export default definePlugin({
         }
     },
 
-    getGuildTree(isBetterFolders: boolean, originalTree: any, expandedFolderIds?: Set<any>) {
+    getGuildTree(betterFoldersId: number, originalTree: any, expandedFolderIds?: Set<any>) {
         return useMemo(() => {
-            if (!isBetterFolders || expandedFolderIds == null) return originalTree;
+            if (!betterFoldersId || expandedFolderIds == null) return originalTree;
 
             const newTree = new GuildsTree();
             // Children is every folder and guild which is not in a folder, this filters out only the expanded folders
@@ -270,29 +270,29 @@ export default definePlugin({
             );
 
             return newTree;
-        }, [isBetterFolders, originalTree, expandedFolderIds]);
+        }, [betterFoldersId, originalTree, expandedFolderIds]);
     },
 
-    makeGuildsBarGuildListFilter(isBetterFolders: boolean) {
+    makeGuildsBarGuildListFilter(betterFoldersId: number) {
         return child => {
-            if (isBetterFolders) {
+            if (betterFoldersId) {
                 return child?.props?.["aria-label"] === i18n.Messages.SERVERS;
             }
             return true;
         };
     },
 
-    makeGuildsBarTreeFilter(isBetterFolders: boolean) {
+    makeGuildsBarTreeFilter(betterFoldersId: number) {
         return child => {
-            if (isBetterFolders) {
+            if (betterFoldersId) {
                 return child?.props?.onScroll != null;
             }
             return true;
         };
     },
 
-    shouldShowFolderIconAndBackground(isBetterFolders: boolean, expandedFolderIds?: Set<any>) {
-        if (!isBetterFolders) return true;
+    shouldShowFolderIconAndBackground(betterFoldersId: number, expandedFolderIds?: Set<any>) {
+        if (!betterFoldersId) return true;
 
         switch (settings.store.showFolderIcon) {
             case FolderIconDisplay.Never:
@@ -310,14 +310,14 @@ export default definePlugin({
         // Pending guilds
         if (props?.folderNode?.id === 1) return true;
 
-        return !!props?.isBetterFolders;
+        return !!props?.betterFoldersId;
     },
 
     shouldRenderContents(props: any, isExpanded: boolean) {
         // Pending guilds
         if (props?.folderNode?.id === 1) return false;
 
-        return !props?.isBetterFolders && isExpanded;
+        return !props?.betterFoldersId && isExpanded;
     },
 
     FolderSideBar,