Quick access to bookmarks and messages on user menu

Using the new profile menu on mobile, I notice that clicking any of these buttons

shows basically the same result - the top of the user profile page, which only has a navigation menu. You have to scroll down a lot to actually see what you came for.

Instead of that, why not show a short list of what you clicked on, right in the menu?

Bookmarks:

Messages:

16 Likes

I agree it’s odd to arrive at basically the profile menu on mobile when clicking these links. the idea of displaying results in the menu panel, like notifications, is interesting! or at least jump down to an anchor in the results?

2 Likes

This problem exists for a long time. It makes it quite difficult to use the profile on mobile.

https://meta.discourse.org/t/profile-page-on-mobile-selecting-menu-item-should-jump-to-the-selected-content/19896?u=gerhard

6 Likes

I like this idea! Although you’d need a “tab” (since that’s basically how these would function now) for notifications as well, to return to it.

Seems like 80+% of the time you’re only looking for recent bookmarks, messages, etc., so this might be useful.

You might also need a divider between the tabs and the settings icon though, since they now have different functions.

2 Likes

Basically profile page needs fixing. As @sam indicated it might be better if, when you view your own profile only, we compress the top part. It’s especially large on mobile too…

2 Likes

Mobile looks so much better these days :slight_smile: user page is much improved.

I still sort of like the idea of having a “quick access” somehow, cause despite the improvements I still avoid the user page quite a lot.

2 Likes

Hello everyone,

I started working on this one. Here is a part of my progress so far.

6 Likes

I think this change looks good, well done @nbianca, provided “view older {x}…” is updated to be conditional and link to the right place in each view:

  • view older bookmarks…
  • view older messages…
  • view older notifications…

technically assignments are included here as well @sam

This should be reviewed closely as it is a reasonably large change…

8 Likes

Is this still pr-welcome? I’d love to take a stab at this!

I’ve read through the topic and the last PR, but I am not 100% sure of:

  • After closing and reopening the user menu (without refreshing), should it always show all notifications?
  • If not, when new notifications come in, I am assuming opening the user menu should always show all notifications?
5 Likes

I think I would like to see this in a theme component first. API improvements that make this theme component doable (and clean up core as needed) are totally welcome along the way. But I think theme is a perfect place to test out this concept!

Then we can install on meta and “live” with it for a bit and see if it makes us happy, also our core API plus theme component infrastructure gets better along the way which is a huge plus.

9 Likes

The theme component is at: https://github.com/xrav3nz/discourse-quick-access. Open to suggestions!

I’ve made sure the design is easy for other plugins/themes to provide their own quick access panel. I will document this in detail (or PR an example to discourse-assign) if and when there is interest.

A Quick Demo:

Selected Panel Color

It reuses the coloring for hover state for now.

Going to the Full Page

  • You can still right-click or Ctrl-click to open the full page in a new tab, or
  • Click the link at the bottom (it will always show for bookmark and message), or
  • Click the same quick access panel twice.

Empty State

Bookmarks%20quick%20access%20panel%20empty%20state

Not sure what’s the best approach to this. I added the existing empty state help text from their respective “full page” for now. The bookmarks one might be too long for a quick access panel.

21 Likes

@xrav3nz that looks good! Is this working yet - I added the component and still have the old behavior?

1 Like

Awesome work, this is very polished. I love that a second click takes you to the page.

This is installed here on meta, just pick Sam's Simple Theme to try it out in the hamburger.

Some feedback:

  1. This should work with discourse-assign, try installing it and assigning something to yourself.

image

  1. I feel the yellow is too much here style wise, @Johani / @awesomerobot any ideas for less noisy styling.

  2. Not sure what to do about this, but on mobile the click targets are just too tiny. Maybe the component should make stuff a bit bigger so you have a shot at changing stuff?

  3. Prefs is “different” maybe it should be the same and add a list for Summary Activity or perhaps a list with Account Profile Emails and so on.

    a. Actually … thinking about it, maybe you would drop the cog altogether and use the “person sam” icon to drop down a panel with Summary, Activity and so on. That gives you a big more click target area for the tabs.

Overall … spectacular job!

13 Likes

Well done @xrav3nz :clap: this looks amazing!

We can follow the same pattern for the header icons / menus, so something like this

and here’s what it would look like with an unread notification at the top

15 Likes

OP here. Glad to see an idea can persist for four years and still turn out to be a useful addition!

This is the power of Discourse, in a nutshell.

16 Likes

This feature is huge for bookmarks! :heart_eyes: would also love to see it for assign

I feel like the border @johani mocked up might be a bit too subtle, but I do like it… so let’s go with that.

14 Likes

Thanks for the feedback! Just pushed an update to address the first two items. Will follow-up the other two later this week (#4 will require a minor PR to core first).

Aweeesome and thanks for the mock up!

:wink:

Also, this commit shows how simple it is for other themes/plugins to introduce a new quick access panel!

12 Likes

This is fantastic! How fantastic you ask? So fantastic I enabled it on all themes on meta.

Everyone feel free to have a play with this and give feedback. This is almost, imo, ready for core inclusion but we have some niggly things to sort out here.

The gear :gear: is not a tab. It feels really out of place. If you remove it then you can make all the tabs a bit wider which will help having bigger click targets on mobile! I think you should try removing it.

Showing “Log out” on every tab to me feels like way too much, why are we inviting people to log out just cause they are looking at notifications? Seems like mixed concerns.

My recommendation here is

  1. Remove logout from all subtabs
  2. Add a new tab for when you click on person sam on the left. It can have “summary”, “activity”, “messages” “prefrences” “log out” links.

Once these niggles are sorted I am thinking this is a prime candidate for inclusion in core.

21 Likes

This is amazing!

I noticed one very small issue - this component seems to affect the color of icons elsewhere in the app (e.g. the “watching” status). Normally the icon is blue here:

I like that idea - how about also adding quick-access to theme and font size to ‘the sam tab’? The hamburger menu here on Meta is getting quite cluttered with theme options, so moving it somewhere else would be nice.

10 Likes

I really like this. Nice job, everyone involved!

A big +1 on this - I think this will make the assign plugin much more useful and actionable.

I like these changes too and look forward to trying them out. Not sure it’s a good idea to bury “log out” behind another click, but agree it seems out of place where it is now so willing to try it. I was going to suggest putting it where the preferences icon is now but agree that they seem out of place and we don’t want to encourage people to log out whenever they go to that menu.

It would be nice also if it were possible to provide one or two custom links within person sam. We use wordpress SSO so have to send folks over to wordpress to edit their profile and email address settings.

6 Likes