Asking for feedback: Tag Reveal Component in Topic Lists - Expand/Collapse tags in topic lists

[jrgong]

Note: Before I post this in theme components, I wanted to get some feedback first if this theme component qualifies or if there are any major issues with it.

Disclosure: This theme component was planned, implemented, and tested with the help of AI coding tools.

Would love to hear your feedback!

---

	Summary	Tag Reveal
	Preview	Not available…
	Repository	GitHub - jrgong420/discourse-tag-reveal
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Discourse Tag Reveal is a lightweight theme component that keeps topic lists tidy by showing only the first N tags per topic and replacing the rest with an accessible “+X more tags” toggle. Users can expand to see all tags and collapse back to the shortened view. It works out of the box with Discourse’s standard tag UI and requires no server-side changes.

Features

• Configurable tag limit (default: 5) via theme settings

• Toggle styled as a tag, keyboard accessible (Enter/Space) with ARIA attributes

• Localized strings using themePrefix and discourse-i18n

• SPA-safe behavior: resets and re-applies logic on page changes

• Supports infinite scrolling via MutationObserver

• Minimal CSS; respects core tag styles

• No template overrides or plugin dependencies

Video Demo:

Installation & Configuration

• Tested with Discourse version: 3.6.0beta1

• Configure settings under the component’s Settings tab:

• max_tags_visible (integer, default 5): How many tags to show before collapsing

• toggle_tag_style : Visual style of the toggle to match tag appearance (Currently only “box” style implemented)

• Scope: affects topic lists (Latest, New, Unread, and category topic lists)

Compatibility with other Theme Components

Only minimal tests performed, please test yourself before deploying to production

• Topic Cards

Notes

• Ensure tagging is enabled (Admin → Settings → Tags), otherwise you won’t see any effect

• If your site heavily customizes tag CSS, you may want to tweak .ts-toggle styles for perfect visual alignment

Ideas for the future

I don’t really plan to implement more features but I’m happy to accept PRs. Some ideas for the future:

• Enable/disable for tags in topic view

• Granular control for specific pages and/or categories

[Moin]

@jrgong

max_tags_per_topic

Did you deliberately name the setting the same as a setting in the core? I would be concerned about misunderstandings.

[jrgong]

@Moin

Did you deliberately name the setting the same as a setting in the core? I would be concerned about misunderstandings.

good catch! Just modified it…

[NateDhaliwal]

Looks really interesting. I’ll try it on my dev env larer since it doesn’t seem to work on Theme Creator (unless I’m doing something wrong?) .

[mcwumbly (Dave McClure)]

Sounds interesting! Could you share a few screenshots or screen recordings of the feature in action?

[jrgong]

Added a quick video demo in the first post, see here:

@jrgong

Video Demo:

@NateDhaliwal

Looks really interesting. I’ll try it on my dev env later since it doesn’t seem to work on Theme Creator (unless I’m doing something wrong?) .

I haven’t even checked how to submit/add my TC component there…
But either way, I prefer to gather some feedback here first, and once it’s ready to be published in Theme component, I will see how to add it there.

[Moin]

@NateDhaliwal

it doesn’t seem to work on Theme Creator

Theme creator doesn’t use the box style for tags

[Moin]

locales/en.yml

You may want to use

more_tags:
  one: "+%{count} more tag"
  other: "+%{count} more tags"

[jrgong]

good point. I forgot to change the default label to +%{count} more to keep it short and concise, that’s how we use it and keep things compact and clean.

[Arkshine]

Hey,

This feature could be interesting in some situations!

At first glance, there are a few things to note:

• Theme settings and Site settings are not the same. You need to retrieve the service first to access max_tags_per_topic, e.g.: const siteSettings = api.container.lookup("service:site-settings");

• The extra checks to get the limit should not be necessary; you can retrieve the value directly. You can probably do Math.min(settings.max_tags_visible, siteSettings.max_tags_per_topic )

• You are not restoring the visibility of separators.

• You might want to unregister the events

• The process on initial load should not be needed with MutationObserver. Usually, before going global, you would want to check first if there is a way to reduce the scope around the element using the API (plugin outlet, for example).

Let me check if there is a different way!

[NateDhaliwal]

@Arkshine

const siteSettings = api.container.lookup(“service:site-settings”);

Since it’s in the api-initializers file, would @service siteSettings also work?

[jrgong]

Can you check now? The latest commit should have fixed the addressed points

[Moin]

The minimum Discourse version 3.6.0 means it will take quite a while until anyone will be able to use it. Did you mean 3.5.0 or 3.6.0beta1?

[jrgong]

I meant 3.6.0beta1, that’s the version I have been testing it with…