Add CollapsibleUI panel targets (#987)

src/equicordplugins/collapsibleUi/index.tsx

@@ -29,7 +29,7 @@ function PanelsIcon(props: SVGProps<SVGSVGElement>) {
 }
 
 function getStateClasses(store: StateStore) {
-    const classNames = [cl("state"), cl(`transition-${store.transitionMs}`)];
+    const classNames = [cl("state"), cl(`collapsed-size-${store.collapsedSize}`), cl(`transition-${store.transitionMs}`)];
 
     for (const panelId of toolbarPanelOrder) {
         const panel = panelRegistry[panelId];

src/equicordplugins/collapsibleUi/settings.ts

@@ -8,8 +8,15 @@ import { definePluginSettings } from "@api/Settings";
 import { OptionType } from "@utils/types";
 
 export const transitionMarkers = [0, 80, 120, 160, 200, 260, 320];
+export const collapsedSizeMarkers = [8, 12, 16, 20, 24, 28, 32, 40, 48];
 
 export const panelRegistry = {
+    guildBar: {
+        id: "guildBar",
+        classId: "guild-bar",
+        label: "Guild Bar",
+        collapsedKey: "guildBarCollapsed",
+    },
     channelList: {
         id: "channelList",
         classId: "channel-list",
@@ -28,6 +35,12 @@ export const panelRegistry = {
         label: "Message Buttons",
         collapsedKey: "chatButtonsCollapsed",
     },
+    titleBar: {
+        id: "titleBar",
+        classId: "title-bar",
+        label: "Title Bar",
+        collapsedKey: "titleBarCollapsed",
+    },
     userArea: {
         id: "userArea",
         classId: "user-area",
@@ -38,15 +51,26 @@ export const panelRegistry = {
 
 export type PanelId = keyof typeof panelRegistry;
 
-export const toolbarPanelOrder = ["channelList", "membersList", "chatButtons", "userArea"] as const satisfies readonly PanelId[];
+export const toolbarPanelOrder = ["guildBar", "channelList", "membersList", "chatButtons", "titleBar", "userArea"] as const satisfies readonly PanelId[];
 
 export const settings = definePluginSettings({
+    collapsedSize: {
+        type: OptionType.SLIDER,
+        description: "Collapsed hover area size in pixels.",
+        default: 12,
+        markers: collapsedSizeMarkers,
+    },
     transitionMs: {
         type: OptionType.SLIDER,
         description: "Panel transition speed in milliseconds.",
         default: 160,
         markers: transitionMarkers,
     },
+    guildBarCollapsed: {
+        type: OptionType.BOOLEAN,
+        description: "Persist the guild bar as collapsed.",
+        default: false,
+    },
     channelListCollapsed: {
         type: OptionType.BOOLEAN,
         description: "Persist the channel list as collapsed.",
@@ -62,6 +86,11 @@ export const settings = definePluginSettings({
         description: "Persist the message button row as collapsed.",
         default: false,
     },
+    titleBarCollapsed: {
+        type: OptionType.BOOLEAN,
+        description: "Persist the title bar as collapsed.",
+        default: false,
+    },
     userAreaCollapsed: {
         type: OptionType.BOOLEAN,
         description: "Persist the user area as collapsed.",

src/equicordplugins/collapsibleUi/style.css

@@ -1,13 +1,49 @@
 body:has(.vc-collapsible-ui-state) {
     --vc-cui-chat-buttons-width: min(320px, 36vw);
     --vc-cui-collapsed-size: 12px;
-    --vc-cui-hover-peek: 18px;
+    --vc-cui-hover-peek: var(--vc-cui-collapsed-size);
     --vc-cui-hover-delay: 120ms;
     --vc-cui-user-area-collapsed-width: 52px;
     --vc-cui-transition: 160ms;
     --vc-cui-ease: cubic-bezier(.2, 0, 0, 1);
 }
 
+body:has(.vc-collapsible-ui-collapsed-size-8) {
+    --vc-cui-collapsed-size: 8px;
+}
+
+body:has(.vc-collapsible-ui-collapsed-size-12) {
+    --vc-cui-collapsed-size: 12px;
+}
+
+body:has(.vc-collapsible-ui-collapsed-size-16) {
+    --vc-cui-collapsed-size: 16px;
+}
+
+body:has(.vc-collapsible-ui-collapsed-size-20) {
+    --vc-cui-collapsed-size: 20px;
+}
+
+body:has(.vc-collapsible-ui-collapsed-size-24) {
+    --vc-cui-collapsed-size: 24px;
+}
+
+body:has(.vc-collapsible-ui-collapsed-size-28) {
+    --vc-cui-collapsed-size: 28px;
+}
+
+body:has(.vc-collapsible-ui-collapsed-size-32) {
+    --vc-cui-collapsed-size: 32px;
+}
+
+body:has(.vc-collapsible-ui-collapsed-size-40) {
+    --vc-cui-collapsed-size: 40px;
+}
+
+body:has(.vc-collapsible-ui-collapsed-size-48) {
+    --vc-cui-collapsed-size: 48px;
+}
+
 body:has(.vc-collapsible-ui-transition-0) {
     --vc-cui-transition: 0ms;
 }
@@ -36,6 +72,47 @@ body:has(.vc-collapsible-ui-transition-320) {
     --vc-cui-transition: 320ms;
 }
 
+body:has(.vc-collapsible-ui-guild-bar-collapsed) nav[class*="guilds_"] {
+    overflow: hidden !important;
+    transition:
+        width var(--vc-cui-transition) var(--vc-cui-ease),
+        inline-size var(--vc-cui-transition) var(--vc-cui-ease),
+        min-width var(--vc-cui-transition) var(--vc-cui-ease),
+        min-inline-size var(--vc-cui-transition) var(--vc-cui-ease),
+        max-width var(--vc-cui-transition) var(--vc-cui-ease),
+        max-inline-size var(--vc-cui-transition) var(--vc-cui-ease),
+        flex-basis var(--vc-cui-transition) var(--vc-cui-ease) !important;
+}
+
+body:has(.vc-collapsible-ui-guild-bar-collapsed):has(nav[class*="guilds_"]:hover) nav[class*="guilds_"],
+body:has(.vc-collapsible-ui-guild-bar-collapsed):has(nav[class*="guilds_"]:focus-within) nav[class*="guilds_"] {
+    transition-delay: var(--vc-cui-hover-delay);
+}
+
+body:has(.vc-collapsible-ui-guild-bar-collapsed):has(nav[class*="guilds_"]:hover) nav[class*="guilds_"] > :where(*),
+body:has(.vc-collapsible-ui-guild-bar-collapsed):has(nav[class*="guilds_"]:focus-within) nav[class*="guilds_"] > :where(*) {
+    opacity: 1;
+    pointer-events: auto;
+    transition: opacity var(--vc-cui-transition) var(--vc-cui-ease);
+    transition-delay: var(--vc-cui-hover-delay);
+}
+
+body:has(.vc-collapsible-ui-guild-bar-collapsed):not(:has(nav[class*="guilds_"]:hover), :has(nav[class*="guilds_"]:focus-within)) nav[class*="guilds_"] {
+    width: var(--vc-cui-collapsed-size) !important;
+    inline-size: var(--vc-cui-collapsed-size) !important;
+    min-width: var(--vc-cui-collapsed-size) !important;
+    min-inline-size: var(--vc-cui-collapsed-size) !important;
+    max-width: var(--vc-cui-collapsed-size) !important;
+    max-inline-size: var(--vc-cui-collapsed-size) !important;
+    flex: 0 0 var(--vc-cui-collapsed-size) !important;
+}
+
+body:has(.vc-collapsible-ui-guild-bar-collapsed):not(:has(nav[class*="guilds_"]:hover), :has(nav[class*="guilds_"]:focus-within)) nav[class*="guilds_"] > :where(*) {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--vc-cui-transition) var(--vc-cui-ease);
+}
+
 body:has(.vc-collapsible-ui-channel-list-collapsed):has([class*="sidebarList_"]:hover) [class*="sidebarList_"] {
     transition-delay: var(--vc-cui-hover-delay);
 }
@@ -171,6 +248,56 @@ body:has(.vc-collapsible-ui-user-area-collapsed):not(:has([class*="sidebar_"] >
     transition: opacity var(--vc-cui-transition) var(--vc-cui-ease);
 }
 
+body:has(.vc-collapsible-ui-guild-bar-collapsed):has(.vc-collapsible-ui-channel-list-collapsed):not(:has([class*="sidebar_"] > [class*="panels_"]:hover)) [class*="sidebar_"] > [class*="panels_"] {
+    width: calc(var(--vc-cui-hover-peek) + 4px) !important;
+    inline-size: calc(var(--vc-cui-hover-peek) + 4px) !important;
+    min-width: calc(var(--vc-cui-hover-peek) + 4px) !important;
+    min-inline-size: calc(var(--vc-cui-hover-peek) + 4px) !important;
+    max-width: calc(var(--vc-cui-hover-peek) + 4px) !important;
+    max-inline-size: calc(var(--vc-cui-hover-peek) + 4px) !important;
+}
+
+body:has(.vc-collapsible-ui-title-bar-collapsed) section[class*="title_"][class*="container__"] {
+    overflow: hidden !important;
+    transition:
+        height var(--vc-cui-transition) var(--vc-cui-ease),
+        block-size var(--vc-cui-transition) var(--vc-cui-ease),
+        min-height var(--vc-cui-transition) var(--vc-cui-ease),
+        min-block-size var(--vc-cui-transition) var(--vc-cui-ease),
+        max-height var(--vc-cui-transition) var(--vc-cui-ease),
+        max-block-size var(--vc-cui-transition) var(--vc-cui-ease),
+        padding var(--vc-cui-transition) var(--vc-cui-ease) !important;
+}
+
+body:has(.vc-collapsible-ui-title-bar-collapsed):has(section[class*="title_"][class*="container__"]:hover) section[class*="title_"][class*="container__"],
+body:has(.vc-collapsible-ui-title-bar-collapsed):has(section[class*="title_"][class*="container__"]:focus-within) section[class*="title_"][class*="container__"] {
+    transition-delay: var(--vc-cui-hover-delay);
+}
+
+body:has(.vc-collapsible-ui-title-bar-collapsed):has(section[class*="title_"][class*="container__"]:hover) section[class*="title_"][class*="container__"] > :where(*),
+body:has(.vc-collapsible-ui-title-bar-collapsed):has(section[class*="title_"][class*="container__"]:focus-within) section[class*="title_"][class*="container__"] > :where(*) {
+    opacity: 1;
+    pointer-events: auto;
+    transition: opacity var(--vc-cui-transition) var(--vc-cui-ease);
+    transition-delay: var(--vc-cui-hover-delay);
+}
+
+body:has(.vc-collapsible-ui-title-bar-collapsed):not(:has(section[class*="title_"][class*="container__"]:hover), :has(section[class*="title_"][class*="container__"]:focus-within)) section[class*="title_"][class*="container__"] {
+    height: var(--vc-cui-hover-peek) !important;
+    block-size: var(--vc-cui-hover-peek) !important;
+    min-height: var(--vc-cui-hover-peek) !important;
+    min-block-size: var(--vc-cui-hover-peek) !important;
+    max-height: var(--vc-cui-hover-peek) !important;
+    max-block-size: var(--vc-cui-hover-peek) !important;
+    padding-block: 0 !important;
+}
+
+body:has(.vc-collapsible-ui-title-bar-collapsed):not(:has(section[class*="title_"][class*="container__"]:hover), :has(section[class*="title_"][class*="container__"]:focus-within)) section[class*="title_"][class*="container__"] > :where(*) {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--vc-cui-transition) var(--vc-cui-ease);
+}
+
 .vc-collapsible-ui-chat-buttons {
     display: flex;
     align-items: center;