Place the user actions in a dropdown window with labels

[Paul-Etienne]

This is built on top of @awestm 's PR regarding issue #13991.
It places the action buttons rack inside of a dropdown window as done originally by awestm, for both desktop and mobile, as I figured even desktop would benefit from this redesign. The original problem was that these buttons are very confusing without hovering over them, and displaying the full text next to the icon is the most efficient way to get that information.
But since showing the text for all of the buttons takes too muhc space even on desktop, the best thing to do (in my opinion) is use the dropdown for all situations.
I would post screenshots but somehow I've broken my local environment and don't have time to set it back up right now.

I placed the dropdown button on the same line as the user's name as it makes more sense now, since it's related to the user's profile. I also fixed the opacity and font-size for the "last active since" text. The opacity would cause this text to overlap the dropdown window (and was looking odd there to be honest, being slightly transparent and smaller than the beginning of the sentence).

[ornicar]

Interesting, but from a quick try there seems to be issues atm

[Paul-Etienne]

Thanks for pointing that out, I'll check that when I have time

[Paul-Etienne]

Alright, I believe I've fixed the issues you reported @ornicar. I had only tested on the user's own profile 🤦‍♂️
I've put the dropdown menu on the second line again, I didn't think there could be other ui components at this location.
But there's still some gray area, I see code in def mini() in RelationUi.scala that would probably break because of the remaining btn-rack classes, but I'm not sure where it's called exactly.

[Paul-Etienne]

Do you see other things that need to be addressed in this PR?

[gbtami]

Just let you know that this change made the profile page UI/UX worse for desktop users.
Read https://lichess.org/forum/lichess-feedback/watch-block-follow-actions-dropdown-menu-petition-to-reverse-changes?page=1 please.

[schlawg]

@Paul-Etienne

We talked about this briefly and feel that if these items must be in a dropdown on desktop, a different icon such as kabob or a descriptive word with a down triangle would be preferable to hamburger. That's just a consistency thing (because all the other hamburgers in the app are "click to disclose").

I'm pinging you in case you'd like to handle this yourself. If not, just letting you know this code will be changed to either show the original buttons on desktop or use a different icon by someone else in the near future. Thanks for working on this, you are a hero to mobile profile browsers everywhere.

[Paul-Etienne]

Thanks for the ping, and thanks @gbtami for letting us know about this request on Lichess forums.
I actually meant to reply on those threads but it slipped my mind.

So here's what I wanted to point out, everyone on these threads is upset about the UI changing from a button rack to a dropdown menu (I'm not going to discuss the fact that this could be due to fear of change or anything else, they have their reasons). But there's one thing that fails to be mentioned there, understandably so because I believe the forum users are mostly long time users of Lichess. That thing is that the button rack as it existed had another problem that this PR was addressing as well and I think it kind of flew under the radar, mainly because of the name of the original issue stating a problem with mobile. I'm talking about the very low affordance that these buttons offered, and that would be a problem that mainly newcomers would face.

Just so everyone's on the same page, affordance here means the ability for a user to understand the behavior something's going to have by performing an action on it (with my words, that may still not be clear enough, but feel free to Google the term to get a clearer definition). And what I mean by that is that those buttons only showed an icon that wasn't exactly standard. I think about the book indicating the player's opening, stuff like that. And you would have to hover over the button to get a clearer idea of what the button does, which isn't good UI and UX. One could not even really think about hovering on them and just don't really know what they do.

So yeah, this PR was also aiming at displaying the labels of those buttons in clear text. There was a suggestion in the original issue to add those labels in the button racks but it was decided that it would clutter the interface too much, hence the dropdown menu.
I think reverting to the old button rack would be a regression, but that could just be my opinion. I'd rather make the suggested change of displaying a different icon, which I get would be a improvement consistency wise.

And yes I should be able to work on it if needed.

[gbtami]

@Paul-Etienne I just collected some places where lichess uses icon buttons without text.
Main page header
Played game, above the move list
Game analysis page, below the move list
Study page, below the board
Tournament page, above the standings list
Forum post header
Hover on user name

"And you would have to hover over the button to get a clearer idea of what the button does, which isn't good UI and UX." :)

OK, I was just joking. All I want to say using icon only buttons are sometimes reasonable, when available space is small.
And of course I know that icon only buttons are worse than icon+text ones. But hiding frequently used action buttons behind a hamburger is even worse especially when there is space to use (I'm talking about desktop screens here).

My suggestion is to provide icon+text for important/frequently used actions (Challenge, Message, Follow, Block) and another "...more" to open the dropdown for the remaining ones on desktop and full hamburger for mobile.

[Paul-Etienne]

Your joke doesn't ridicule my point, it just goes to show that there are other parts of Lichess that have somewhat obscure UI.
But yeah, point taken. I guess not everything can be addressed that quickly. Still I think it's a good thing to improve gradually.

Now it's true that this current solution may no be the best one, it solves some problems but does bring some new ones. There's the consistency problem that schlawg was mentioning, and there's what you're pointing out. In addition to kind of wasting the available space, it may be a bit too discreet in a way, for actions that are pretty important.

I have to say I really like your suggestion, it looks like the best of both worlds. The most used actions would remain accessible in a single click without hovering and would reclaim the available space, and the UI wouldn't get cluttered with all the labeled buttons. Plus it would be way more obvious that there are other actions available in this "More" dropdown menu. It could be a labeled button with a down triangle like in schlawg's suggestion.

I'm voting for this solution ;)