Messages section for sidebar

[Moin]

	Summary	Adds personal and group message inbox links to the sidebar, including unread message indicators
	Preview	Theme Creator
	Repository	GitHub - moin-Jana/sidebar-messages-section: Adds personal and group message inbox links to the sidebar, including unread message indicators.
	Install Guide	How to install a theme or theme component
	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.

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+.

Advanced group inbox configuration

To customize the order of group inboxes or change the name displayed in the sidebar, you can use the advanced_group_inbox_configuration setting.

In this setting you can:

• select a group from a dropdown
• optionally define a custom name that will be shown in the sidebar
• reorder the configured groups using the buttons at the bottom

The custom name is also helpful inside the setting itself.
If no name is provided, the entry will be labeled as group 1, group 2, etc. (based on its position). Adding a temporary name can make reordering easier, and you can remove it again before saving if you like.

Groups with messages that are not added to the advanced configuration will still appear in the sidebar, listed after the configured ones and ordered by their group ID.

Groups listed in the hide_group_inboxes setting will always be hidden, regardless of whether they are also present in the advanced configuration or have messages. An admin-only warning helps highlight when a group is added to both settings.

You can see an example configuration and how it affects the order and displayed names in the screenshots below:

Position of the messages section

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

@nathank

/* 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;
}

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.

[Lilly]

wow, nicely done Moin!

[NateDhaliwal]

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.

[Moin]

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.

[putty (Derek Putnam)]

@Moin

To avoid duplicate links to the personal inbox, you may want to remove the messages link in the first section of the sidebar.

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?

[Moin]

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.

@Moin

Community section

The top section of your sidebar (without a visible heading) is called the “Community” section. This section is visible to all users and contains essential navigation links.

To customize this section:

1. Click More in the sidebar
2. Select Customize this section at the bottom of the extended menu

[putty (Derek Putnam)]

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

[Heliosurge (Dan DeMontmorency)]

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

---

This is a sweet component!

[Moin]

I expanded the note:

@Moin

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.

[Heliosurge (Dan DeMontmorency)]

Yes you did. But as admins we are often used to going through the admin panel. . 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.

[nathank (Nathan Kershaw)]

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.

[Moin]

@nathank

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

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.

[nathank (Nathan Kershaw)]

@Moin

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’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:

Add group page inbox as an option

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

@Moin

There is already a great component about changing the order of sections in the sidebar: Navigation (sidebar) menu display control

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

[Moin]

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.

[nathank (Nathan Kershaw)]

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 .

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!

(BTW the wonderful @moin has done exactly that, adding the functionality - making it work properly!)

[nathank (Nathan Kershaw)]

@Moin

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).

This does indeed work very nicely. Somewhat embarrassingly, I’m one of the authors (very much secondary to @lilly) of that TC !

Would be great to have this in the OP.

[Moin]

@nathank asked for an option to change the order of group inboxes in the sidebar. I previously asked for ideas on how to best approach this in Configuring the order of groups in theme component settings, and I think I’ve now arrived at a solution.
I combined this with the request to display a group’s full name instead of its short name. Since the full name isn’t easily available in this context, the solution is to allow admins to define a custom display name instead. The field that previously would have only been used to display the group’s name in the configuration is now also used to control the name shown in the sidebar.

Both features are handled via the new advanced_group_inbox_configuration setting.

In this setting you can:

• select a group from a dropdown
• optionally define a custom name that will be shown in the sidebar
• reorder the configured groups using the buttons at the bottom

The custom name is also helpful inside the setting itself.
If no name is provided, the entry will be labeled as group 1, group 2, etc. (based on its position). Adding a temporary name can make reordering easier, and you can remove it again before saving if you like.

Groups with messages that are not added to the advanced configuration will still appear in the sidebar, listed after the configured ones and ordered by their group ID.
Groups listed in the hide_group_inboxes setting will always be hidden, regardless of whether they are also present in the advanced configuration or have messages.

In this example, no custom name was entered for the moderator group, which is why it appears as group 1 in the configuration. The other groups have custom names.

This configuration results in:

Here you can see that the ‘doggo-daily’ and ‘cat_pics’ inboxes have switched positions and are displayed without hyphens or underscores. The ‘Team’ inbox appears below the ones configured in the advanced setting.
You can also see an admin-only warning, which appears because the ‘admin’ group was added to the advanced configuration and to the hide_group_inboxes setting at the same time.

[nathank (Nathan Kershaw)]

This is now simply brilliant for those who are utilising groups for communications. Great work, @Moin!

Thank you for listening to and actively engaging with feedback from others (and me) - and producing such a well-designed and pragmatic theme component which solves a long-standing problem so elegantly.