Schritte zum Erstellen benutzerdefinierter Small-Actions für die Verwendung in Plugins?

Ich arbeite an domänenspezifischen Plugins für unser Forum und möchten gerne benutzerdefinierte kleine Aktionen erstellen, die diesen hier ähneln:

Im Besonderen brauche ich nur die Möglichkeit, solche Hinweise in Themen anzuzeigen, wobei ich das Symbol und den Text anpassen können muss.

Könnte mir jemand die Konstrukte, Module, Vorlagen usw. erklären, die ich auf der Backend- und Frontend-Seite einbinden müsste, um dies umzusetzen? Oder könntet ihr mich auf ein bestehendes Plugin hinweisen, das dies bereits implementiert?

Vielen Dank!

discourse-assign ist wahrscheinlich das beste Beispiel dafür:

Und dann noch einige Ergänzungen für das Icon bzw. den Inhalt:

https://github.com/discourse/discourse-assign/blob/master/assets/javascripts/discourse-assign/initializers/extend-for-assigns.js.es6#L158-L169

Danke, das hat sehr geholfen.

Was wäre der beste Weg, um die kleine Aktionsanzeige mit reichhaltigerem Text zu versehen?

Aktuell:
image

Das möchte ich erreichen: (Ich habe dies erreicht, indem ich manuell die Klasse cooked in das Div mit der Klasse small-action-desc eingefügt habe)

image

Ich habe den Quellcode bezüglich Post-Transformern durchsucht, konnte aber nichts dazu finden.


EDIT: Am Ende habe ich dies einfach als .scss hinzugefügt

.custom-message {
    ins {
        background-color: dark-light-choose(
            $success-low,
            scale-color($success, $lightness: -60%)
        );
    }
    del {
        background-color: dark-light-choose(
            $danger-low,
            scale-color($danger, $lightness: -60%)
        );
    }
}