Messages section for sidebar

:information_source: Summary Adds personal and group message inbox links to the sidebar, including unread message indicators
:eyeglasses: Preview Theme Creator
:hammer_and_wrench: Repository GitHub - moin-Jana/sidebar-messages-section: Adds personal and group message inbox links to the sidebar, including unread message indicators.
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

The component adds a Messages section to the sidebar with links to personal message inboxes - both the user’s personal inbox and any group inboxes they have access to. The section also includes a button for composing a new personal message next to the section heading.

Personal inbox

By default, the component adds a link to the personal inbox for all users. With the show_personal_inbox setting, admins can also hide it entirely or show it only for users who are allowed to create PMs based on the Personal message enabled groups site setting. This mirrors how the personal inbox link appears in the notifications menu, the user’s profile, and the Community section of the sidebar.

:bulb: To avoid duplicate links to the personal inbox, you may want to remove the messages link in the first section of the sidebar. You can do this by opening the More menu and selecting Customize this section, then remove the Messages link from the section.

Group inboxes

All group inboxes that contain at least one message and that the user is a member of will appear automatically in their sidebar. Admins can hide specific group inboxes using the hide_group_inboxes setting, which can be useful when a group inbox is no longer actively used.
A separate setting, use_group_page_inbox, lets you choose whether group inbox links open in the user’s messages interface (/my/messages/group/{group_name}) or on the group page (/g/{group_name}/messages/inbox).

Unread indicator

Each inbox link shows the current message state based on the user’s preference for “Show a count of the new items”: either a dot or the numeric count. Values above 100 are displayed as 99+.

Position of the messages section

To change the position of the messages section you can either use CSS, for example

Alternatively, you can install Navigation (sidebar) menu display control component which includes a setting for changing the order of sections in the sidebar. Use “inbox-section” as the section name when adjusting its position.

13 likes

wow, nicely done Moin! :clap: :tada:

4 likes

Minor suggestion: perhaps javascripts/discourse/api-initializers/group-inboxes-in-sidebar.gjs should be a JS file instead of GJS?

Great component!


I spent the last 10 minutes looking through the code and examining core classes and I must say how remarkable Discourse was (and is) made such that everything fits in so well.

2 likes

Yes, the API offers almost everything you need to make the section look and work like all the others. The chat uses it too, which probably influenced the development; the features were developed at the same time.

Unfortunately, get badgeText(), which displays the number of unread topics in the core sections, is not supported, so I had to get a little creative with the numbers.

4 likes

I couldn’t find an admin setting for this, so PSA this will hide it via CSS:

.sidebar-section-link[data-link-name="my-messages"] {
    display: none;
}

@Moin, could this be a checkbox in the theme component to hide it?

2 likes

Why do you prefer the link to be hidden with CSS instead of using the existing option for admins to customize the sidebar? Hiding with CSS seems more likely to break than using built in Discourse options.

2 likes

Derp, you’re right. I was overthinking it, thinking it would be a setting in the admin console and/or core functionality.

1 like

You’re not the only one that was looking there. :joy:


This is a sweet component!

1 like

I expanded the note:

5 likes

Yes you did. But as admins we are often used to going through the admin panel. :wink:. Do when skimming instructions we might gloss over some details.

Even with core updates I am sure many of us don’t always read over all the fine details until something we use has been moved to another area

Long long ago with Android for example iirc Gingerbread use to have Nav & Maps. I spent about 10m looking for Nav after they merged it with Maps in an update. :joy:

This is a brilliant Theme Component which suits sites that lean heavily on Messages! Thanks @moin for your excellent work!

In order to make it even better for those who use Groups quite a bit (Messages are a big component of this), would you mind considering these suggestions?

Selectable position on the sidebar

In order to emphasise Messages more in the UI, I’d like them at the top of the Sidebar (i.e. just under the links). Basically, I want people to be able to easily see their recent Messages (per group) at a glance without relying on notifications.

I’ve used this CSS to achieve that, but suspect I’m not the only one who this would be helpful for:

/* Ensure the Messages section appears first in the flexbox container */
.sidebar-section-wrapper {
  order: 1;
}
.sidebar-section-wrapper[data-section-name="inbox-section"] {
  order: 0;
}

Have group inboxes open in the group context

I want my users to be able to easily find interact with their Group(s). It makes sense to me to have them work with Messages in the Inbox which is accessed from the Group page (i.e. /g/the-group/messages/inbox) instead of their Personal Inbox page (i.e. /my/messages/group/the-group)

This gives them a nice clean group-centred page, with easy access to the other group members and settings:

It would be brilliant to have this governed by a setting in the TC.

3 likes

I have thought about this, about which route is a better default and a setting, but I removed it for some reason I don’t remember right now. I will take a look tomorrow later. I think it was about the unread message indicator. Would you still prefer this route if the consequence was that there would be no indicator for unread messages?

I think the current position is the same as the messages section that was in core.
There is already a great component about changing the order of sections in the sidebar: Navigation (sidebar) menu display control
To avoid conflicts because both components try to override the order it might make sense that admins who want a different order use the existing component (The author confirmed it works using “inbox-section” as the section name).
I’ll have to see whether I can offer an additional setting for this. In any case, I want to avoid the components interfering with each other.

2 likes

I’ve been mucking about with this in my fork, and have found the same thing. It works, but loses both the unread message indicator and the link highlighting on the sidebar. Both those things are indeed high value!

I’ve done a PR for where I got up to:

But to really fly, it really needs the unread indicator and the link highlighting to work, eh?

Point well made! That is a much better idea. To my shame, I’m actually one of the authors of that TC!

1 like

Why did you use href instead of route? I think href didn’t work with unread indicators at all. I was more concerned that the numbers on the group.messages.inbox route were not available in the way you can use them at userPrivateMessages.

1 like

Because I’m a rubbish dev, and tried a bunch of things until something stuck! Probably also due to my unhealthy reliance on not-so-smart gen AI :wink:.

I’ve tried to utilise routes, but couldn’t actually get it to override the existing routes. So I gave up.

I did wonder if it was possible to get those numbers / behaviour, while simply hijacking the link to go to a different location. But this is a bit complex for simple old me.

Feel free to ‘improve’ it!

2 likes

This does indeed work very nicely! Would be great to have this in the OP.

1 like