How to create a custom activity tab in user profile?

[SubStrider]

I was dabbling with plugin development and while I have been able to make the plugin settings appear on the admin settings page, I am not quite sure how to make the UI elements to appear on the discourse UI.

If someone can point me to the direction of relevant documentation or which files to look at in any existing plugin as reference, then that would be really great.

PS:
I am trying to modify these sections overall.

1. add a custom string in the (topic meta data) userbit area under the username in the post.
2. add a button in the posts control area to open a form
3. add a custom tab on the user profile activity page
4. add some custom summary information on the user card and user summary stats

[Arkshine]

I would recommend using Introducing Discourse developer toolbar .

Then, look for a plugin outlet where you can insert a component:

Then you can see for example:

Here is a guide about it:

Theme Developer Tutorial: 4. Using Outlets to insert and replace content

Discourse uses the Ember JS Framework for its user interface. On top of Ember, Discourse provides a number of APIs to allow themes to customize the user interface. The most commonly-used API is Plugin Outlets. These outlets are positioned throughout Discourse core, and allow themes to render Ember Components inside them. Those components are given access to some contextual information called “outlet args”. Some outlets also “wrap” part of the core user interface, which allows themes to add the…

[SubStrider]

Is it possible to request plugin outlets?

I am hoping to insert user reputation rating under their username. Or based on experience what would be a good place to insert it. topic-map-expanded-after?

[Arkshine]

@SubStrider

Is it possible to request plugin outlets?

Sure! You can make Development topic.

@SubStrider

I am hoping to insert user reputation rating under their username

It doesn’t show for some reason, but you do have outlets around the post name:

old answer

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/post/meta-data/poster-name.gjs#L119

It requires you enable the glimmer post stream mode:

Then, they appears:

[NateDhaliwal]

So this outlet would be post-metadata__after, or use renderAfterWrapperOutlet("post-metadata")?

[Arkshine]

@NateDhaliwal

renderAfterWrapperOutlet(“post-metadata”, …)

That would be a good option to try, yes.

[david (David Taylor)]

@Arkshine

It requires you enable the glimmer post stream mode:

It’s fine to play with this, but please make sure to read the disclaimer in the setting description. This mode is not yet ready for production use. We aren’t even using it on Meta.

For the current post-stream implementation, you’d need to use the old decorateWidget API, or the addPosterIcon API:

app/assets/javascripts/discourse/app/lib/plugin-api.gjs

[Arkshine]

Sorry, David, I got too excited with the new stuff that I completely disregarded the warning that it’s still under active development. I will be careful next time.

[SubStrider]

@SubStrider

add a button in the posts control area to open a form

For this I used the following to render the button.

api.registerValueTransformer("post-menu-buttons", ({ value: dag, context })

Now I am stuck where I am not able to open the modal without errors when using other components.

GJS component fails with "undefined helper" error when shown via modal service (Discourse 3.5.0

encountering a persistent rendering error when trying to display a Glimmer component (.gjs) as a modal using this.modal.show(). The modal is triggered from another GJS component added to the post menu via the post-menu-buttons value transformer. I’m running Discourse v3.5.0.beta3-dev I am trying to Add a button to the post menu using api.registerValueTransformer("post-menu-buttons", ...). Clicking this button should open a modal defined by a separate GJS component (FeedbackFormModal) using this…