SheWhoReignsSupreme/Equicord
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Collapsibile UI (#1232)

Browse source 
* 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>
This commit is contained in:
Benjii 2026-07-09 21:31:42 +01:00 • committed by GitHub
parent 665be44e16
commit 575aad1025
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 39 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/api/Badges.ts
View file

@ -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";

47
src/equicordplugins/collapsibleUi/style.css
View file

@ -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] {