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

Dev
1

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.

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

Would love to hear your feedback!
:information_source: Summary Tag Reveal
:eyeglasses: Preview Not available…
:hammer_and_wrench: Repository GitHub - jrgong420/discourse-tag-reveal
:question: Install Guide How to install a theme or theme component
:open_book: 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:

CleanShot 2025-10-18 at 19.28.39

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

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

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

1 Like
2

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

Screenshot_20251018_140027_Firefox
Screenshot_20251018_140027_Firefox1015×140 20.6 KB

3

good catch! Just modified it…

1 Like
4

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?) :thinking:.

5

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

6

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

I haven’t even checked how to submit/add my TC component there…:smiley:
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.

2 Likes
7

Theme creator doesn’t use the box style for tags

8

You may want to use

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

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.