[ChannelTabs] Scrollable tab overflow instead of multiple rows

[Hebgbs]

Is your feature request related to a problem? Please describe. I would like it so the tabs are in a single row, so the tabs do not occupy more space in Discord tha it needs to.

Describe the solution you'd like Use of a flexbox for the tabs, and some JQuery code to make them scrollable.

Additional context Here's the code I've managed to conjure so this functionality works:

#channelTabs-container > .channelTabs-tabContainer {
    display: flex !important;
    overflow-x: scroll;
    overflow: hidden;
}

The last bit which is required by the plugin is some JQuery code to translate scrolling into horizontal scroll, so shift isn't required to scroll. This is behaviour similar to Firefox and Chrome browsers, figured for people on a tight vertical screen budget it would be most beneficial for them.

Other additions could be typing indicators shown as an overlay when tabs that have people typing in them are out of viewport (as determined by the typing indicator itself, not the tab) and maybe a new message indicator similar to Discord's guild bar behaviour.

[aarondoet]

I like this idea. Instead of using jQuery (which BD luckily does not ship anymore) a scrollwheel listener could be added to the element (https://alvarotrigo.com/blog/scroll-horizontally-with-mouse-wheel-vanilla-java/, probably needs the ref since the plugin uses react). If someone provides a PR for this I'd happily accept it, otherwise this is low priority right now and might now be implemented soon.

[Hebgbs]

Further appending onto my CSS, I managed to make scrolling work. The user still needs to hold [Shift] to do it. I am not sure how to integrate the JavaScript into your code;

.channelTabs-tabContainer {
    display: flex !important;
    overflow-x: scroll;
}

.channelTabs-tabContainer::-webkit-scrollbar {
    display: none !important;
}

.channelTabs-tab {
    min-width: 220px;
}

Simplified working example by removing parent classes.

but I am sure given enough time and effort I can figure out where to drop it in.

[Hebgbs]

Yeah I took a peek at the code and decided not to bother with doing it myself. But instead of editing your work, I work around your work to make it do what I want. Mainly because I don't want to make your code my problem since I have to add GUI bollocks to Quick Settings and I don't feel like working my ideas into your menus.

What I will say however, is that New Tab should be its own div. Then you can tell that div to either be at the left, or the right, adjacent the container for the channel tabs. Why? Simple: Mouse movement. Some people might find new tab button at left more useful because they can make a new tab and go immediately to their guildbar rather than mousing over all the way to the right, or hitting a New Tab button that always moves because it's always the last thing.

Lastly, this is a really great plugin for Discord with heaps of potential. If only it were not for the pesky issue of how it works now. Here's the final revision of my CSS for the current revision which can be used by others as custom CSS that is surely going to be obsoleted the moment you decide to fix up this plugin with my recommended changes:

.channelTabs-tabContainer {
    display: flex !important;
    overflow-x: scroll;
}
.channelTabs-tabContainer::-webkit-scrollbar {
    display: none !important;
}
.channelTabs-tab {
    min-width: 220px;
}
.channelTabs-tab:first-child {
    margin-left: 36px !IMportant;
}
.channelTabs-newTab {
    position: fixed;
    left: 0px;
    top: 0px;
    margin: 8px !important;
    /* background-color: #5865F2 !important; */
}

Background colour commented out since that isn't important, only a change someone can adjust to taste.