[Feature Request] Titlebar Integration with Channel Header

[MissionWAR]

Is your feature request related to a problem? Please describe. With the latest Discord update, the titlebar is now integrated into the channel header. However, in Dorion, the titlebar remains as a separate bar above the channel header. This makes the UI feel inconsistent with the official Discord client and takes up extra vertical space.

Describe the solution you'd like I would like an option in Dorion’s settings to integrate the titlebar into the channel header, similar to how it appears in the official Discord client. This would create a more seamless and space-efficient UI.

Describe alternatives you've considered Keeping the current separate titlebar as the default but providing an optional toggle in the settings.

Additional context The attached image shows how the titlebar currently appears in Dorion.

This image shows how Discord’s official client integrates the titlebar with the channel header (the image is taken with a theme called Midnight).

Also, I’m not sure if this is technically feasible, but in previous issues, you mentioned that using Discord’s native titlebar could be problematic. Specifically, you stated that Discord frequently changes CSS class names, and if you were to recreate it using the same class names, you would have to update Dorion constantly. If this is still the case, I completely understand.

[SpikeHD]

I actually did consider this the moment the new UI came out, so its on my radar as something to at least attempt.

[MissionWAR]

Oh, that's nice to hear.

[sebascontre]

Hey @MissionWAR, I use this CSS code with the Inline CSS plugin in the meantime, only had one issue, the inbox and help buttons can only be clicked in the down half, because the top half in being cover by the now transparent dorion bar.

#dorion_topbar, #topbar {
	background: transparent;
}

[class^='app']:has(#dorion_topbar) > [class^='layers'] {
	margin-top: -24px;
}

[class^='app']:has(#dorion_topbar) > [class^='layers'] [class^='bar']:has([class^='title']):has([class^='leading']):has([class^='trailing']) {
	margin-inline: 120px;
}

[MissionWAR]

Oh, thanks. I'll give it a try.

[DrPleaseRespect]

The buttons being unable to be clicked in the upper half can be fixed by adding pointer-events: none to the #topbar and adding pointer-events: auto to the #topright. I also made the window buttons fit the entire header.

#dorion_topbar, #topbar {
	background: transparent;
	pointer-events: none;
}

#dorion_topbar, #topright {
	pointer-events: auto;
}

#topclose, #topmin, #topmax {
	height: 47px;
}

#topclose svg, #topmin svg, #topmax svg {
	margin-top: 12px;
}

[class^='app']:has(#dorion_topbar) > [class^='layers'] {
	margin-top: -24px;
}

[class^='app']:has(#dorion_topbar) > [class^='layers'] [class^='bar']:has([class^='title']):has([class^='leading']):has([class^='trailing']) {
	margin-inline: 120px;
}

[SpikeHD]

Implemented in f133aef5ba4073fc9917f10f66e8c4c4a3408933, will be available in the next release, or you can use a bleeding edge build to have it now