From 133e92442549308cc4b9fff728aa57a022216e1d Mon Sep 17 00:00:00 2001
From: Nuckyz <61953774+Nuckyz@users.noreply.github.com>
Date: Sun, 4 May 2025 17:05:48 -0300
Subject: [PATCH] BetterFolders: Add className to Sidebar component

---
 src/plugins/betterFolders/FolderSideBar.tsx            | 10 ++++------
 src/plugins/betterFolders/index.tsx                    |  2 +-
 .../betterFolders/{sidebarFix.css => style.css}        |  5 ++++-
 3 files changed, 9 insertions(+), 8 deletions(-)
 rename src/plugins/betterFolders/{sidebarFix.css => style.css} (88%)

diff --git a/src/plugins/betterFolders/FolderSideBar.tsx b/src/plugins/betterFolders/FolderSideBar.tsx
index cfd15517..40329122 100644
--- a/src/plugins/betterFolders/FolderSideBar.tsx
+++ b/src/plugins/betterFolders/FolderSideBar.tsx
@@ -43,15 +43,13 @@ export default ErrorBoundary.wrap(guildsBarProps => {
 
     // We need to display none if we are in fullscreen. Yes this seems horrible doing with css, but it's literally how Discord does it.
     // Also display flex otherwise to fix scrolling.
-    // gridArea is needed to align properly with the base app grid.
-    const barStyle = {
-        display: isFullscreen ? "none" : "flex",
-        gridArea: "betterFoldersSidebar"
+    const sidebarStyle = {
+        display: isFullscreen ? "none" : "flex"
     } satisfies CSSProperties;
 
     if (!guilds || !settings.store.sidebarAnim) {
         return visible
-            ? <div style={barStyle}>{Sidebar}</div>
+            ? <div className="vc-betterFolders-sidebar" style={sidebarStyle}>{Sidebar}</div>
             : null;
     }
 
@@ -65,7 +63,7 @@ export default ErrorBoundary.wrap(guildsBarProps => {
         >
             {(animationStyle: any, show: any) =>
                 show && (
-                    <Animations.animated.div style={{ ...animationStyle, ...barStyle }}>
+                    <Animations.animated.div className="vc-betterFolders-sidebar" style={{ ...animationStyle, ...sidebarStyle }}>
                         {Sidebar}
                     </Animations.animated.div>
                 )
diff --git a/src/plugins/betterFolders/index.tsx b/src/plugins/betterFolders/index.tsx
index ca46f843..3dc812a4 100644
--- a/src/plugins/betterFolders/index.tsx
+++ b/src/plugins/betterFolders/index.tsx
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import "./sidebarFix.css";
+import "./style.css";
 
 import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
diff --git a/src/plugins/betterFolders/sidebarFix.css b/src/plugins/betterFolders/style.css
similarity index 88%
rename from src/plugins/betterFolders/sidebarFix.css
rename to src/plugins/betterFolders/style.css
index b7c0e66e..a3c82dcb 100644
--- a/src/plugins/betterFolders/sidebarFix.css
+++ b/src/plugins/betterFolders/style.css
@@ -1,5 +1,8 @@
-/* These area names need to be hardcoded. Only betterFoldersSidebar is added by the plugin. */
+.vc-betterFolders-sidebar {
+    grid-area: betterFoldersSidebar
+}
 
+/* These area names need to be hardcoded. Only betterFoldersSidebar is added by the plugin. */
 .visual-refresh .vc-betterFolders-sidebar-grid {
     /* stylelint-disable-next-line value-keyword-case */
     grid-template-columns: [start] min-content [guildsEnd] min-content [sidebarEnd] min-content [channelsEnd] 1fr [end];