From 575aad1025725f2acaf50713253846b73754e18d Mon Sep 17 00:00:00 2001
From: Benjii <56143265+Accentaro@users.noreply.github.com>
Date: Thu, 9 Jul 2026 21:31:42 +0100
Subject: [PATCH] Collapsibile UI (#1232)

* refactor:collapsibleUI

Add surfaceClass API / rewrite collapsible

* fix: satisfy collapsibleUI stylelint

* ok papi

* Update CollapsibleUI

* Updates

* bleh

* [autofix.ci] apply automated fixes

* [autofix.ci] apply automated fixes (attempt 2/3)

* fix userarea gap issue

* [autofix.ci] apply automated fixes

* userarea pill matches theme + betterfolders support

---------

Co-authored-by: thororen1234 <78185467+thororen1234@users.noreply.github.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 src/api/Badges.ts                           |  2 +-
 src/equicordplugins/collapsibleUi/style.css | 47 +++++++++++++++++----
 2 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/src/api/Badges.ts b/src/api/Badges.ts
index f9df81a96..88e3c9bd9 100644
--- a/src/api/Badges.ts
+++ b/src/api/Badges.ts
@@ -19,7 +19,7 @@
 import ErrorBoundary from "@components/ErrorBoundary";
 import globalBadges from "@equicordplugins/globalBadges";
 import BadgeAPIPlugin from "@plugins/_api/badges";
-import { ComponentType, HTMLProps, ReactNode } from "react";
+import { ComponentType, HTMLProps } from "react";
 
 import { isPluginEnabled } from "./PluginManager";
 
diff --git a/src/equicordplugins/collapsibleUi/style.css b/src/equicordplugins/collapsibleUi/style.css
index 6de46c265..6b269959f 100644
--- a/src/equicordplugins/collapsibleUi/style.css
+++ b/src/equicordplugins/collapsibleUi/style.css
@@ -54,7 +54,7 @@
     overflow: visible !important;
 }
 
-[data-vc-collapsible-ui-guild-bar-collapsed],
+[data-vc-collapsible-ui-guild-bar-collapsed]:not(.vc-betterFolders-sidebar *),
 [data-vc-collapsible-ui-channel-list-collapsed],
 [data-vc-collapsible-ui-members-list-collapsed] {
     width: var(--vc-cui-peek-size) !important;
@@ -67,7 +67,8 @@
     transition-delay: var(--vc-cui-fade-delay);
 }
 
-[data-vc-collapsible-ui-guild-bar-collapsed]:is(:hover, :focus-within) {
+[data-vc-collapsible-ui-guild-bar-collapsed]:not(.vc-betterFolders-sidebar *):is(:hover, :focus-within),
+[data-vc-collapsible-ui-base]:has(.vc-betterFolders-sidebar:is(:hover, :focus-within)) [data-vc-collapsible-ui-guild-bar-collapsed]:not(.vc-betterFolders-sidebar *) {
     width: var(--vc-cui-guild-bar-expanded-width) !important;
     min-width: var(--vc-cui-guild-bar-expanded-width) !important;
     max-width: var(--vc-cui-guild-bar-expanded-width) !important;
@@ -76,6 +77,25 @@
     transition-delay: 0ms;
 }
 
+/* BetterFolders renders a duplicate guilds nav inside its folder sidebar.
+   The collapse rules above exempt that duplicate; collapse the sidebar
+   wrapper in sync with the real guild bar instead. */
+[data-vc-collapsible-ui-base]:has([data-vc-collapsible-ui-guild-bar-collapsed]) .vc-betterFolders-sidebar {
+    width: 0 !important;
+    min-width: 0 !important;
+    opacity: 0.01;
+    overflow: hidden;
+    transition: opacity var(--vc-cui-transition);
+    transition-delay: var(--vc-cui-fade-delay);
+}
+
+[data-vc-collapsible-ui-base]:has([data-vc-collapsible-ui-guild-bar-collapsed]:is(:hover, :focus-within)) .vc-betterFolders-sidebar,
+[data-vc-collapsible-ui-base]:has([data-vc-collapsible-ui-guild-bar-collapsed]) .vc-betterFolders-sidebar:is(:hover, :focus-within) {
+    width: auto !important;
+    opacity: 1;
+    transition-delay: 0ms;
+}
+
 [data-vc-collapsible-ui-channel-list-expanded],
 [data-vc-collapsible-ui-channel-list-collapsed]:is(:hover, :focus-within) {
     width: var(--custom-guild-sidebar-width, 312px) !important;
@@ -188,10 +208,6 @@
     pointer-events: auto;
 }
 
-[data-vc-collapsible-ui-user-area] {
-    background: var(--background-secondary-alt) !important;
-}
-
 [data-vc-collapsible-ui-user-area-collapsed] {
     height: var(--vc-cui-peek-size) !important;
     min-height: var(--vc-cui-peek-size) !important;
@@ -211,6 +227,14 @@
     pointer-events: auto;
 }
 
+/* Solid background only where the panel floats over other content;
+   docked states keep the theme's own panel background. */
+[data-vc-collapsible-ui-user-area-detached],
+[data-vc-collapsible-ui-user-area-collapsed]:is(:hover, :focus-within),
+[data-vc-collapsible-ui-sidebar-channel-list-collapsed]:not([data-vc-collapsible-ui-sidebar-user-area-detached]) [data-vc-collapsible-ui-user-area] {
+    background: var(--background-secondary-alt) !important;
+}
+
 [data-vc-collapsible-ui-sidebar-channel-list-collapsed]:not([data-vc-collapsible-ui-sidebar-user-area-detached]) [data-vc-collapsible-ui-user-area] {
     width: var(--vc-cui-user-area-collapsed-width) !important;
     min-width: var(--vc-cui-user-area-collapsed-width) !important;
@@ -256,9 +280,14 @@
 }
 
 [data-vc-collapsible-ui-sidebar-channel-list-expanded]:not([data-vc-collapsible-ui-sidebar-user-area-detached]) [data-vc-collapsible-ui-user-area] {
-    width: var(--custom-guild-sidebar-width, 312px) !important;
-    min-width: var(--vc-cui-channel-list-min-width) !important;
-    max-width: var(--vc-cui-channel-list-max-width) !important;
+    /* Anchor both edges instead of forcing a width: the guild bar column is
+       min-content and theme-dependent, so a fixed width leaves a right-side
+       gap whenever the guild bar is expanded. */
+    left: 0 !important;
+    right: 0 !important;
+    width: auto !important;
+    min-width: 0 !important;
+    max-width: none !important;
 }
 
 [data-vc-collapsible-ui-user-area-detached] {