From 9d2f2460e1a3d666bc10be0a9d98bf109a421825 Mon Sep 17 00:00:00 2001
From: sadan4 <117494111+sadan4@users.noreply.github.com>
Date: Fri, 4 Apr 2025 18:33:59 -0400
Subject: [PATCH] BetterFolders: Fix for visual refresh (#3314)

---
 src/plugins/betterFolders/FolderSideBar.tsx |  3 ++-
 src/plugins/betterFolders/index.tsx         | 26 +++++++++++++++++----
 src/plugins/betterFolders/sidebarFix.css    |  9 +++++++
 3 files changed, 32 insertions(+), 6 deletions(-)
 create mode 100644 src/plugins/betterFolders/sidebarFix.css

diff --git a/src/plugins/betterFolders/FolderSideBar.tsx b/src/plugins/betterFolders/FolderSideBar.tsx
index 5203b14d..d2ffe6bb 100644
--- a/src/plugins/betterFolders/FolderSideBar.tsx
+++ b/src/plugins/betterFolders/FolderSideBar.tsx
@@ -45,7 +45,8 @@ export default ErrorBoundary.wrap(guildsBarProps => {
     // Also display flex otherwise to fix scrolling
     const barStyle = {
         display: isFullscreen ? "none" : "flex",
-    } as CSSProperties;
+        gridArea: "betterFoldersSidebar"
+    } satisfies CSSProperties;
 
     if (!guilds || !settings.store.sidebarAnim) {
         return visible
diff --git a/src/plugins/betterFolders/index.tsx b/src/plugins/betterFolders/index.tsx
index ded8b611..06c398b1 100644
--- a/src/plugins/betterFolders/index.tsx
+++ b/src/plugins/betterFolders/index.tsx
@@ -16,6 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./sidebarFix.css";
+
 import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
 import { getIntlMessage } from "@utils/discord";
@@ -199,11 +201,23 @@ export default definePlugin({
         {
             find: "APPLICATION_LIBRARY,render:",
             predicate: () => settings.store.sidebar,
-            replacement: {
-                // Render the Better Folders sidebar
-                match: /(container.{0,50}({className:\i\.guilds,themeOverride:\i})\))/,
-                replace: "$1,$self.FolderSideBar({...$2})"
-            }
+            group: true,
+            replacement: [
+                {
+                    // Render the Better Folders sidebar
+                    // Discord has two different places where they render the sidebar.
+                    // One is for visual refresh, one is not,
+                    // and each has a bunch of conditions &&ed in front of it.
+                    // Add the betterFolders sidebar to both, keeping the conditions Discord uses.
+                    match: /(?<=[[,])((?:!?\i&&)+)\(.{0,50}({className:\i\.guilds,themeOverride:\i})\)/g,
+                    replace: (m, conditions, props) => `${m},${conditions}$self.FolderSideBar(${props})`
+                },
+                {
+                    // Add grid styles to fix aligment with other visual refresh elements
+                    match: /(?<=className:)(\i\.base)(?=,)/,
+                    replace: "`${$self.gridStyle} ${$1}`"
+                }
+            ]
         },
         {
             find: "#{intl::DISCODO_DISABLED}",
@@ -257,6 +271,8 @@ export default definePlugin({
         }
     },
 
+    gridStyle: "vc-betterFolders-sidebar-grid",
+
     getGuildTree(isBetterFolders: boolean, originalTree: any, expandedFolderIds?: Set<any>) {
         return useMemo(() => {
             if (!isBetterFolders || expandedFolderIds == null) return originalTree;
diff --git a/src/plugins/betterFolders/sidebarFix.css b/src/plugins/betterFolders/sidebarFix.css
new file mode 100644
index 00000000..7a048eb7
--- /dev/null
+++ b/src/plugins/betterFolders/sidebarFix.css
@@ -0,0 +1,9 @@
+/* These area names need to be hardcoded. Only betterFoldersSidebar is added by the plugin. */
+
+.visual-refresh .vc-betterFolders-sidebar-grid {
+    grid-template-columns: [start] min-content [guildsEnd] min-content [sidebarEnd] min-content [channelsEnd] 1fr [end]; /* stylelint-disable-line value-keyword-case */
+    grid-template-areas:
+        "titleBar titleBar titleBar titleBar"
+        "guildsList betterFoldersSidebar notice notice"
+        "guildsList betterFoldersSidebar channelsList page";
+}