# Topic List Item footer buttons - timeline content

**URL:** https://meta.discourse.org/t/topic-list-item-footer-buttons-timeline-content/164751
**Category:** Development
**Created:** [September 21, 2020, 6:08pm UTC](https://meta.discourse.org/t/topic-list-item-footer-buttons-timeline-content/164751 "2020-09-21T18:08:30Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![feabila](https://avatars.discourse-cdn.com/v4/letter/f/e9bcb4/32.png) [@feabila](https://meta.discourse.org/u/feabila)
#### Post date: [September 21, 2020, 6:08pm UTC](https://meta.discourse.org/t/topic-list-item-footer-buttons-timeline-content/164751/1 "2020-09-21T18:08:30Z")

</div>

Hi! I’m working on “timeline” content concept community with discourse.

 ![Screen Shot 2020-09-21 at 14.56.13](https://global.discourse-cdn.com/meta/original/3X/7/d/7da3018b911dc0292d7f52641957ca12b820f06b.png)

Both buttons “Reply to” and “Share” are for test. I have created a component like `topic-footer-buttons.hbs` `(#ember)` with some changes

```plaintext
<div class="topic-list-item-footer-buttons">
  {{#each inlineButtons as |button|}}
    {{d-button
      class=(concat "btn-default topic-list-item-footer-buttons " button.classNames)
      action=button.action
      icon=button.icon
      translatedLabel=button.label
      translatedTitle=button.title
      translatedAriaLabel=button.ariaLabel
      disabled=button.disabled}}
  {{/each}}
</div>

```

If I insert this component in topic-list.hbs below _topic-list-item_ template, it works! But It’s is bad for future Discourse version upgrades or plugins implementation. So I’m trying to manipulate over Admin → Customize → Common → Header (HTML), changing `topic-list-item.raw`

`<script type="text/x-handlebars" data-template-name="list/topic-list-item.raw">`

But another problem appeared, I’m not getting to call component from `text/x-handlebars` template, is there some way to call my component of footer buttons inside `topic-list-item.raw` template ? Like a helper or widget which could call component inside ?

I would _appreciate your help_ so that I can eliminate my doubts once and for all.

---

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [September 24, 2020, 11:13pm UTC](https://meta.discourse.org/t/topic-list-item-footer-buttons-timeline-content/164751/2 "2020-09-24T23:13:41Z")

</div>

The way that I’ve dealt with this in the past is by packaging the buttons in a html helper, which will render the raw html in the raw templates, which you can then insert via a raw plugin outlet. Here’s an example:

[https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/helpers/preview-helpers.js.es6#L8](https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/helpers/preview-helpers.js.es6#L8)

The button click is handled in the topic-list-item component, e.g.

[https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/initializers/preview-edits.js.es6#L332](https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/initializers/preview-edits.js.es6#L332)

@merefield May also have some thoughts 🙂

* * *

Also, you’ll probably want to use the theme javascripts folder structure instead of adding scripts to the header.html. See

> [@Split up theme Javascript into multiple files](https://meta.discourse.org/t/splitting-up-theme-javascript-into-multiple-files/119369):
>
> Complex theme javascript can be split into multiple files, to keep things nicely organised. To use this functionality, simply add files to the /javascripts folder in your theme directory. These files can not be edited from the Discourse UI, so you must use the [Theme CLI](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950) or [source the theme from git](https://meta.discourse.org/t/how-to-source-a-theme-from-a-private-git-repository/82584). Javascript files are treated exactly the same as they are in core/plugins, so you should follow the same file/folder structure. Theme files are loaded after core/plugins, so if the filenames match,…

---

<div class="post-metadata">

### Author: ![mbaker341997](https://avatars.discourse-cdn.com/v4/letter/m/c6cbf5/32.png) [@mbaker341997](https://meta.discourse.org/u/mbaker341997)
#### Post date: [March 3, 2021, 1:23am UTC](https://meta.discourse.org/t/topic-list-item-footer-buttons-timeline-content/164751/3 "2021-03-03T01:23:29Z")

</div>

noticed that the most recent commit to preview-edits removed that click event [FIX: remove topic list item click event to prevent transition conflict · merefield/discourse-topic-previews-sidecar@6064a59 · GitHub](https://github.com/paviliondev/discourse-topic-previews/commit/6064a5940a80e69ed56a7cbe67f8ded8e33e5d67) is there still a way to get the button click handled by the topic-list-item component?

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [March 3, 2021, 2:45pm UTC](https://meta.discourse.org/t/topic-list-item-footer-buttons-timeline-content/164751/4 "2021-03-03T14:45:18Z")

</div>

Yeah, @angus, that’s no longer advised imho - it was causing Ember a minor heart attack so I removed it from TLP. When you have two click events simultaneously, e.g. from hitting Topic title which itself has an anchor, the browser ends up performing a full page refresh, which is clearly not want you want in an OPA. This was reported by a number of users.

In TLP for now you have to click on the Title, Excerpt or Thumbnail.

You need to make sure there is only ever one click surface - overlapping ones are going to cause issues.