# How best to develop this frontend customization / plugin?

**URL:** https://meta.discourse.org/t/how-best-to-develop-this-frontend-customization-plugin/71440
**Category:** Development
**Created:** [October 5, 2017, 4:16am UTC](https://meta.discourse.org/t/how-best-to-develop-this-frontend-customization-plugin/71440 "2017-10-05T04:16:53Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![mcwumbly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcwumbly/32/103861_2.png) [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [October 5, 2017, 4:16am UTC](https://meta.discourse.org/t/how-best-to-develop-this-frontend-customization-plugin/71440/1 "2017-10-05T04:16:53Z")

</div>

I’d like to experiment with a customization to change the UX for subscribing to topics.

I’d love some pointers on how I might approach this. I’m pretty sure it’s doable as a front-end only customization. I’m unclear as to whether to tackle it as a theme or a plugin and what best practices may be for testing and maintenance.

Also, feel free to comment on the idea itself (whether you love it, hate it or shrug it).

* * *

The goal is to have a UX closer to Github’s simple _Subscribe / Unsubscribe_ interaction:

 ![gh-subscribe](https://global.discourse-cdn.com/meta/original/3X/1/1/11fa7eab283a2cdb4a297f3433ff255e496f958f.png)  
 ![gh-unsubscribe](https://global.discourse-cdn.com/meta/original/3X/0/c/0c5ec3dbc9f364b960e9b952c038b479a75c6c86.png)

In order to achieve something similar, I’d like to:

1. Make the main button action a toggle and move the drop-down to an adjacent … button.
2. Change the button text to describe the _action_ the user is taking, rather than reflect the current state. (The current state is still described in the text next to the button).

The main button would have the following default state transitions:

#### Start Watching

When you are in _Normal_ mode, the call-to-action is to _Watch_ the topic:

![d-start-watching](https://global.discourse-cdn.com/meta/optimized/3X/2/2/22e97293ece5ecf46c853758158073d3be03ea03_2_690x45.png)

#### Stop Watching

When you are in _Watching_ mode, the call-to-action is to _Stop Watching_ the topic, which will set it back to _Normal_:

![d-stop-watching](https://global.discourse-cdn.com/meta/optimized/3X/a/c/ac882add2d66fa1ba3c1920ac306682e66019fa1_2_690x46.png)

#### Stop Tracking

When you are in _Tracking_ mode, the call-to-action is to _Stop Tracking_ the topic, which will set it back to _Normal_:

![d-stop-tracking](https://global.discourse-cdn.com/meta/optimized/3X/5/d/5de142426e5e00b1fcf5e98b9c4cca2fc70ce59e_2_690x44.png)

#### Unmute

When you have in _Muted_ a topic, the call-to-action is to _Unmute_ the topic, which will set it back to _Normal_:

![d-unmute](https://global.discourse-cdn.com/meta/optimized/3X/7/7/77a1164afd085de644f7bbd0501671caf4df24e5_2_690x46.png)

#### Select Notification Level

To select a different notification level, click the …, which will display all the _other_ options not currently selected. For instance, if you’re currently tracking the topic:

 ![d-select](https://global.discourse-cdn.com/meta/original/3X/a/9/a99ffbc92706c36e40f972d483117ccb2da8fc32.png)

(I’m also considering replacing the combo reply/notification button under the progress bar with this control… and perhaps something similar for the category subscription).

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [October 5, 2017, 4:30am UTC](https://meta.discourse.org/t/how-best-to-develop-this-frontend-customization-plugin/71440/2 "2017-10-05T04:30:44Z")

</div>

A theme component can work here (just need to make sure core has all the extension points)

It looks like we are missing one outlet though… we have after-topic-footer-buttons, we would need a before-topic-notifications-button. You can achieve it now by patching the component, but that is not the right way of doing things.

Hold off for some advice from @eviltrout here, we can probably add the extra plugin-outlet in core.

Changing the text of the button should be doable in CSS so all you need really is to add the extra button with the extra logic.

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [October 5, 2017, 12:55pm UTC](https://meta.discourse.org/t/how-best-to-develop-this-frontend-customization-plugin/71440/3 "2017-10-05T12:55:02Z")

</div>

You probably want to talk to @j.jaffeux who is currently working on dropdowns 🙂

Having said that I will almost never say no to a new outlet if required.

---

<div class="post-metadata">

### Author: ![mcwumbly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcwumbly/32/103861_2.png) [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [October 5, 2017, 1:31pm UTC](https://meta.discourse.org/t/how-best-to-develop-this-frontend-customization-plugin/71440/4 "2017-10-05T13:31:45Z")

</div>

Cool, @j.jaffeux I’m definitely interested to hear your insights on how best to approach this or your feedback on the design.
