Menu overhaul and window decoration integration

[fbruetting]

Description

It would be really good if Riot could make use of the GTK header bar features and integrate buttons and maybe also other widgets of the custom top bar into the GTK header bar. Currently, it looks totally out of place on Gnome desktops. Yes, you would have double work as there is both GTK and Qt, but if every app now starts to create its own totally different menu layout, the Linux desktop would become a total mess! Please consider this!

I also filed the same bug report against other programs which don’t integrate, like for example MarkText. Just place Riot, MarkText and a GTK-native program like Gnome Builder next to each other and you would immediately recognize the chaos! This is really ugly and would never attract people to use Linux over say MacOS.

Here are my main issues with your current menu layout:

• It is incomprehensible that the gear icon in the top bar doesn’t lead to the application settings but to the chat room settings…?!

• It is even more strange that I have to click on my avatar (where I would expect that I can set my avatar!) to get to the application settings…?! What do these things have in common with each other? I actually searched for three minutes where I can find the application version number, ending up with querying flatpak info im.riot.Riot via command line! No joke! Please move the application settings out of the people’s avatars, this has nothing to do there!

• In 1:1 chats, when I click on the name of a contact in the top bar, I get to the room settings – which is already done by the gear icon…?! Here I expect to get to the contact information and settings instead (like what is done fine in EVERY other IM app I used, like Wire, Threema, Signal, WhatsApp etc.).

  • It might be little bit off-topic in this issue here, but I think it would be best to totally abstract from chat rooms in 1:1 chats for not needlessly overcomplicating things. Instead there for example could be an option for upgrading a 1:1 chat to a chat room, which then would lead to all the room options to be shown (for inviting other people, room settings, etc). ALL other messengers differentiate not without a reason between 1:1 chats and chat groups. What I basically want to say here, is that this is too much information, which irritates non-technical people and would hinder a more widespread adoption. Please:
    • show the room settings just via clicking the room gear icon,
    • show the contact settings when the contact name gets clicked in 1:1 chats, and
    • show just room information (no settings!) when the room name gets clicked in chat rooms.

• If you would introduce a hamburger menu in the header bar, the issue with the application settings vs clicking on the users avatar would easily get solved.

• You then could also show the current active room name in the header bar with a small gear or wrench directly next to the name (i.e. also in the middle of the header bar), then it would also be more obvious that these are the room settings as this is then placed directly next to the room name – whereas the application settings then would reside on the exact spot where application settings of all other programs reside.

  • It would be even better if you would just show a three-dot-icon next to the room name, which then folds up the room settings, the room sharing, the room integrations and the room search – because you really don’t need to show these icons as first-class citizens in the top bar. This is superfluous in most cases and just clutters the UI. Mozilla solved this very good in Firefox with the three-dots icon on the right side of the address widget, where icons for sharing etc. get folded out.
  • Another possibility would be that the room details and options could be shown when the room name of the top bar gets clicked (see for example the awesome widget of Gnome Builder in the middle of the header bar, which is totally mighty yet relatively simple).

• The own avatar could be placed on the left side of the header bar.

• The symbols for members, files and notifications are remaining, these should also go into the header bar. Here Gnome Builder is also an ideal example. There are icons on the left side of the header bar which lead additional panes to unfold when these get pressed.

Please consider my points, next week I can sketch this up if this would help!

Version information

• Platform: Flatpak
• OS: Fedora Silverblue 29
• Version: 1.0.1

[Thovthe]

Look at Fractal if you want a GTK client, it's an official GNOME project. Riot doesn't use native toolkits except, possibly, on mobile.

[fbruetting]

I already tried, but there is quite a lot missing… Still, some of my points are about general UX and logic, which still could really be improved.

[FrobtheBuilder]

Clientside window decorations in Electron are pretty easy, you just hide the window border, set a draggable region and add window buttons to the top bar as web content. Plenty of other applications do it that way and I think that would be the best way forward. Though it wouldn't really match GTK styling, that's usually how Electron apps do it. It's also fairly OS agnostic if the buttons are just your own assets, and you can switch them out for say mac os with ones that look more like the stoplight. It would make the application look a lot more polished, in my opinion.

For example, take a look at how Rainway does it:

And similarly, Parsec:

[ara4n]

yup, we tried to squeeze it into 1.0, but ran out of time to make it look good. chromeless window will happen.

[turt2live]

worth noting that the light theme blends in awkwardly with windows:

[claell]

@t3chguy, as you dealt with the duplicate, can you triage this issue? This doesn't have all proper labels applied and possibly some other parameters can be set for it.

[ArtexJay]

This comment is just for color correcting the titlebar to match the system: Cinny (an alternative desktop app for Matrix/Element) has a working native titlebar color that matches to the systems titlebar in my case Windows and it's theme (dark/light mode). This helps blend in the titlebar with the dark/light mode of the app and desktop system. This tells me this is totally do-able for Windows at least.

[t3chguy]

Of course it is doable, heck even supported by Electron. Just hasn't yet been done by the designers so won't be implemented without design

[ArtexJay]

Of course it is doable, heck even supported by Electron. Just hasn't yet been done by the designers so won't be implemented without design

would rather just have it default then, don't need any special design that I personally probably will not like

[t3chguy]

Designers are more likely to want something better integrated, like the examples at https://github.com/vector-im/element-desktop/issues/773

[ArtexJay]

Designers are more likely to want something better integrated, like the examples at #8749 (comment)

eh those look too blocky and ugly for my tastes and as long as the min,max,close buttons look normal and not like that then i'd be ok with it. If they did what Apple has done and what MS is pushing for whilst still having the app blend into the OS then i'm all for it. I've seen too many times when devs made their own titlebar design only for it look ugly or out of place on the OS, i'd include discord as part of that. One of the reason why i didn't like using discord's client.

[fcwoknhenuxdfiyv]

This comment is just for color correcting the titlebar to match the system: Cinny (an alternative desktop app for Matrix/Element) has a working native titlebar color that matches to the systems titlebar in my case Windows and it's theme (dark/light mode). This helps blend in the titlebar with the dark/light mode of the app and desktop system. This tells me this is totally do-able for Windows at least.

@ArtexJay I just looked at Cinny. It's not built with Electron but rather with Tauri https://tauri.app. I skimmed over the website and it looks like it could be a nice alternative to Electron as it uses system web libraries so the binaries are a lot smaller.

[t3chguy]

@fcwoknhenuxdfiyv in practice that does not seem to be the case: https://github.com/vector-im/element-desktop/issues/771 once you account for the native bits missing in this comment, see also other details like RAM usage and it being slow & laggy when running EW.

[fcwoknhenuxdfiyv]

@t3chguy I've been using it for a few days on Windows 11 and it's very responsive.

Cinny is currently using 215MB, Nheko 140MB and Element Desktop is using 260MB. On disk, Cinny is using 10MB, Nheko 130MB and Element Desktop uses 623MB!

What are the missing native bits to look out for? Cinny has notifications - granted not as pretty as Element Desktop.

[t3chguy]

Cinny is not Element though, it doesn't have the full featureset, you're comparing apples and grapes. The comparison in the linked comment is between Element Web in Tauri, and Element Desktop in Electron (Element Desktop is Element Web + Seshat + SQLCipher + Keytar)

Seshat + SQLCipher power encrypted message search Keytar powers system keyring access to store your data more securely (on secure enclave if your system supports that)