User stream item templates needs some update

[Don]

Hello,

I noticed on these plugins the user-stream-item templates need some update (maybe there are other plugins too)… to fit to the core changes.

Discourse Follow plugin
https://github.com/discourse/discourse-follow/blob/main/assets/javascripts/discourse/templates/components/follow-feed-post.hbs

Discourse Reactions plugin
https://github.com/discourse/discourse-reactions/blob/main/assets/javascripts/discourse/components/discourse-reactions-reaction-post.hbs

Now it looks like this

This is the expected

---

There was a fix on the core user-stream-item template few month ago which changed the elements order and added some new classes.
https://github.com/discourse/discourse/pull/18368

---

Thank you

[Don]

If someone need a quick workaround I made some css modification to order these elements to the correct place.

Common > CSS

.user-stream {
  .item, 
  .user-stream-item {
    // adding the exclusion doesn't matter much
    // except that it won't add these to the current core style
    .info:not(.user-stream-item__header) {
      display: flex;
      align-items: flex-start;
      .stream-topic-details {
        order: 1;
        flex-grow: 1;
      }
      .expand-item,
      .collapse-item {
        order: 2;
      }
      .time {
        order: 3;
      }
    }
  }
}

[david (David Taylor)]

Thanks for the report @Don! It looks like the reactions/follow plugins originally copy/pasted the HTML structure from core, and so they were both depending on the old CSS.

I think we can make things cleaner by re-using core’s <UserStreamItem> component in both plugins:

This will add a bit of extra core customizability: DEV: Add `{{yield}}` to user-stream-item for plugins/themes by davidtaylorhq · Pull Request #20791 · discourse/discourse · GitHub

Fix for reactions: UX: Re-use UserStreamItem from core by davidtaylorhq · Pull Request #217 · discourse/discourse-reactions · GitHub

Fix for follow: UX: Re-use UserStreamItem from core by davidtaylorhq · Pull Request #91 · discourse/discourse-follow · GitHub