BetterFolders: Fix for visual refresh (#3314)

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

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: {
+            group: true,
+            replacement: [
+                {
                     // Render the Better Folders sidebar
-                match: /(container.{0,50}({className:\i\.guilds,themeOverride:\i})\))/,
-                replace: "$1,$self.FolderSideBar({...$2})"
+                    // 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;

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";
+}