Collapse Threads In Channel List | libVencore | Page 1

blissful drum Dec 30, 2025, 9:44 PM

#

:root {
    --always-hide-trailing-spine: 0;
    --thread-expand-delay: 0.15s;
    --thread-collapse-delay: 0.3s;
    --thread-animation-speed: 0.4s;
}

#channels ul[role=group] li {
    display: block !important;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    list-style: none;
    pointer-events: none;
    transform: scaleY(0);
    transform-origin: top;
    will-change: transform, opacity, max-height; 
    transition: 
        max-height var(--thread-animation-speed) ease,
        transform var(--thread-animation-speed) ease,
        opacity var(--thread-animation-speed) ease;
    transition-delay: var(--thread-collapse-delay);
}

#channels li[class$=containerDefault]:hover + li[class$=container] ul[role=group] li,
#channels li[class$=selected] + li[class$=container] ul[role=group] li,
#channels ul[role=group]:hover li,
#channels ul[role=group] li[class$=selected] {
    max-height: 40px;
    opacity: 1;
    transform: scaleY(1);
    pointer-events: auto;
    transition-delay: var(--thread-expand-delay);
}

#channels ul[role=group] li [class$=invertedSpine] {
    opacity: 0 !important;
    transition: opacity 0.2s ease;
}

#channels ul[role=group]:hover li [class$=invertedSpine],
#channels li[class$=containerDefault]:hover + li[class$=container] [class$=invertedSpine],
#channels li[class$=selected] + li[class$=container] [class$=invertedSpine] {
    opacity: calc(1 - var(--always-hide-trailing-spine)) !important;
}

#channels ul[role=group] {
    contain: paint;
}

Variables do what they sound like they do. If the channel is selected the threads will remain expanded. If the thread is selected only it remains expanded. Hovering will reveal all currently followed threads for that channel.

#

PS: In the video I have --always-hide-trailing-spine: 1; so you can see how that would look.

blissful drum Jan 1, 2026, 4:42 AM

#

Minor tweak to this, too big for OP. Gets rid of the small gap below the channel with threads when all threads are collapsed. Also fixes the transition when the trailing spine is enabled to be smoother.

blissful drum Jan 1, 2026, 7:50 AM

#

📎 collapse-threads.theme.css

grizzled void Jan 3, 2026, 9:39 PM

#

@blissful drum heyy this is very nice, but it causes a very large amount of lag

#

specifically when clicking a channel that has threads

blissful drum Jan 3, 2026, 9:58 PM

#

I'll see if I can figure out what's causing that - it seems like it's probably a selector with not a tight enough scope.

#

So some of this lag is just the channel being loaded in - the entire layout gets thrashed due to the channel's contents being discarded and then the new channel populating that space. I do wonder if I can trick the browser into ignoring the channel's contents entirely for the purposes of recalcing neighbors in the DoM tree.

For the rest of the lag, I'm gonna play with using transform instead of height and grid-template shenanigans. These can never be accelerated, where transform always is. We'll see how it pans out.

blissful drum Jan 3, 2026, 10:26 PM

#

grizzled void <@375078218107060224> heyy this is very nice, but it causes a very large amount ...

:root {
    --always-hide-trailing-spine: 0;
    --thread-expand-delay: 0.15s;
    --thread-collapse-delay: 0.3s;
    --thread-animation-speed: 0.4s;
}

#channels ul[role=group] li {
    display: block !important;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    list-style: none;
    pointer-events: none;
    transform: scaleY(0);
    transform-origin: top;
    will-change: transform, opacity, max-height; 
    transition: 
        max-height var(--thread-animation-speed) ease,
        transform var(--thread-animation-speed) ease,
        opacity var(--thread-animation-speed) ease;
    transition-delay: var(--thread-collapse-delay);
}

#channels li[class$=containerDefault]:hover + li[class$=container] ul[role=group] li,
#channels li[class$=selected] + li[class$=container] ul[role=group] li,
#channels ul[role=group]:hover li,
#channels ul[role=group] li[class$=selected] {
    max-height: 40px;
    opacity: 1;
    transform: scaleY(1);
    pointer-events: auto;
    transition-delay: var(--thread-expand-delay);
}

#channels ul[role=group] li [class$=invertedSpine] {
    opacity: 0 !important;
    transition: opacity 0.2s ease;
}

#channels ul[role=group]:hover li [class$=invertedSpine],
#channels li[class$=containerDefault]:hover + li[class$=container] [class$=invertedSpine],
#channels li[class$=selected] + li[class$=container] [class$=invertedSpine] {
    opacity: calc(1 - var(--always-hide-trailing-spine)) !important;
}

#channels ul[role=group] {
    contain: paint;
}

Try this variant - seems faster here (though the original was fast enough for me).

grizzled void Jan 3, 2026, 10:27 PM

#

alright!

blissful drum Jan 3, 2026, 10:28 PM

#

Note that clicking on a channel with a ton of threads especially with lots of videos and images pretty much always causes some delay in render (I tried with themes off and selecting the css snippets channel is slower than any of the other channels in this discord.)

grizzled void Jan 3, 2026, 10:28 PM

#

seems to be faster!

grizzled void Jan 3, 2026, 10:28 PM

#

blissful drum Note that clicking on a channel with a ton of threads especially with lots of vi...

yea I noticed 😂

grizzled void Jan 4, 2026, 9:02 PM

#

@blissful drum hey again, two things:

is it possible to make a distinguisher on the channel to show that there are threads in that channel? Maybe replace the # with something or have a small dot at the top right or something similar to a ping.
at the bottom of the channels list, there is a substantial gap, depending on how many threads are hidden.

#

gap

#

diff discord server's gap

blissful drum Jan 4, 2026, 9:04 PM

#

grizzled void <@375078218107060224> hey again, two things: 1. is it possible to make a distin...

I can easily address both of these, yeah. will work on it

grizzled void Jan 4, 2026, 9:04 PM

#

awesome! thank you very much!

blissful drum Jan 4, 2026, 9:36 PM

#

grizzled void awesome! thank you very much!

Try this

📎 collapse-threads.theme.css

#

Might look at seeing if i can get it to show threads that have new activity by default, too

grizzled void Jan 4, 2026, 9:47 PM

#

nothing seems to have changed

#

still get the gap

#

and no indicator

blissful drum Jan 4, 2026, 9:55 PM

#

ignore the random image I used for a background there - just demonstrating. If the background is set another way I'd need to see it in the context of whatever theme.

grizzled void Jan 4, 2026, 10:12 PM

#

im confused sorry

#

so here's the threads for this channel

#

getting these blank spots at the bottom when there should be channels

#

if I keep scrolling down the channels list, the channels will reappear

#

but at the very bottom, there's a huge gap

#

blissful drum Jan 4, 2026, 11:14 PM

#

I see I'll have to find a server with enough channels or just duplicate a bunch in with JS or something.

#

I do know it won't load in past what you have visible - the elements just don't even exist to load in.

blissful drum Jan 5, 2026, 9:31 AM

#

And then I can see why the indicator isn't showing -- your sidebar is quite narrow; where I placed the indicator isn't going to work on that theme, if you have a suggestion for what type of indicator you thing would be appropriate and where you'd like it to pop up I can tailor that. I thing I've figured out the height issue and am working on fixing that reliably without breaking other stuff.

blissful drum Jan 5, 2026, 10:07 AM

#

For now, here's some dumb thing to test:

#

📎 collapse-threads-test.theme.css

grizzled void Jan 5, 2026, 3:26 PM

#

works great! if you scroll down really fast down the channels list, it stalls

blissful drum Jan 5, 2026, 3:35 PM

#

Fun 😄
I'm playing with a version I have that keeps unread threads visible.

#

That bit I don't know I can replicate - I went in the biggest server I'm in for channels, shrunk the window vertically and scrolled as fast as I can. There is some "pausing" between data pop-ins but that's because discord only loads a few entries above and below your current scroll position, and not the whole channel/thread list.

grizzled void Jan 5, 2026, 4:19 PM

#

this is me scrolling the whole time

#

as you can see it stutters a lot

#

you can see the scroll bar starting off very big then getting smaller

blissful drum Jan 5, 2026, 4:49 PM

#

Yeah -- the client loads in the sidebar content dynamically all of the contents aren't always in memory or even available to your client. There's not a way to have the big scrollbar stay and then also have no gap below the list with the threads collapsed as a result. Discord "cheats" by setting the height for "all" of the items and this allows you to scroll to "any point" and then it loads in what would be at that point if it's not already loaded in.

#

As an example you could set the font size really small for the sidebar so it should load more items and after a certain point it will stop showing more items even though not all of them are visible. I ran into that when I first tried to make a sidebar that always showed all channels which made that just "not possible"

#

I might be able to do something hacky for it but it probably ruins performance.

grizzled void Jan 5, 2026, 5:56 PM

#

hmmm ill prolly just have the gap instead of this

#

cause this is actually a huge hinderance

#

while the gap is just a visual thing

blissful drum Jan 5, 2026, 7:32 PM

#

Can just remove the:

[aria-label="Channels"] {
    max-height: fit-content;
}

grizzled void Jan 6, 2026, 1:19 AM

#

alright awesome

#Collapse Threads In Channel List