Improve user experience of navigating between overlay popups

[aqilc]

Describe the new feature:
There should be a back button on the top when clicking links on the website browser on the Lazer client. I clicked on WalkingTuna's top play and it took me to here but when I wanted to go back to WalkingTuna's profile, I had to take the long process of finding his profile again.

Proposal designs of the feature:
You can add a back button or something like that at the blank gray space you have at the top of the web browser(which serves no obvious purpose and just exists for some reason). This will probably shorten the time people have to take to look through stuff on the Lazer client.

[smoogipoo]

Probably should happen alongside #4886

[aqilc]

wow that was extremely fast

[peppy]

Not sure if it should be implemented via the #4886 button; probably a separate set of controls to avoid confusion.

[aqilc]

Oh yeah, I just noticed. If you look in the picture at the beatmap's tags, they almost touch the rankings panel. You should probably fix that too. Also, I think some of the Success Rate/Points of Failure panel is also covered.

[Joehuu]

Please post different issues for those, and make sure to search first to avoid duplicates.

[Bryceed]

Edge click in profile's beatmap info panel back to menu, instead to return one-level navigation #12514

@frenzibyte @peppy
That's not a implementation of a new function, is the same thing working with different ways in osu!direct panel and user profile, which can disrupt the users navigation if they unintentionally clicks in beatmap card instead of the download button (thing that can be reversed in osu!direct).

[peppy]

It's the same area of UX that needs improving. The way it's done on the beatmap listing can be thought of as a temporary best-effort (we intentionally don't close the listing when a beatmap is selected). The same can't easily be implemented for other scenarios. Basically, we need a better method of handling back/forward navigation, which is what this issue is tracking.

[akippnn]

It's been a while since this issue had an update and I was directed here from #17577.

The simplest way is to just add the back menu in the overlay itself before the title of the overlay. Like this:

I couldn't use the fonts lazer used so I had to take a screenshot from the in-game client.

The only problem is that we have to navigate up to be able to press this button or visually tell people "hey, you can go back to the previous overlay if you want." So an example I could think of:

Not that I really want to see "player info" anchored since that is personally redundant info and I would rather see the player username there, but this is just for demonstration.

If the button does contract like above, hover interaction would tell the player what they're navigating back to.

Preferably not just telling us we're going back to a beatmap info though, but again just demonstration purposes for now since I couldn't load fonts in Figma.

There are other little things I thought would be interesting to see:

• Gestures designed primarily for touch devices, where dragging from the utmost left area to right on an extent would trigger going back to the previous overlay (with animation as an indication this is being done).
• If it is reactive to mouse side buttons used primarily for navigation. Pressing M4 on an overlay should prevent it from triggering the global "back" keybind.

[peppy]

Curious if @arflyte has considered this in newer UI designs.

[akippnn]

Curious if @arflyte has considered this in newer UI designs.

Would be quite a change presumably, considering there's now another content box to anchor. It seems like a good change though but I think it warrants its issue (while linking this one). Here's sort of a pre-polish comparison preview:

The anchored box is necessary to keep the back button anchored. On the other hand, it doesn't need all of that actually, but a floating button feels a bit jarring to me personally, making overlays feel like a webpage being loaded.

[peppy]

I think that could work quite well with the last design.

[moonfight1]

what about it just being alt+arrow or backward and forward on mice like it is in browsers