Fully working, needs docs

client/coral-embed-stream/src/components/ViewingOptions.js

@@ -24,7 +24,7 @@ export default class ViewingOptions extends React.Component {
           <a onClick={this.toggleOpen}>Viewing Options</a>
         </div>
         {
-          true ? (
+          this.state.open ? (
             <div className={cn([styles.streamViewingOptionsList, 'streamViewingOptionsList'])}>
               <ul>
                 {

client/coral-embed-stream/src/reducers/comment.js

@@ -1,11 +1,7 @@
 import {ADD_CLASSNAME, REMOVE_CLASSNAME} from '../constants/comment';
 
 const initialState = {
-  classNames: [{
-    'wapoOff' : {
-      tags: ['OFF_TOPIC']
-    }
-  }]
+  classNames: []
 };
 
 export default function comment (state = initialState, action) {

client/coral-embed-stream/style/default.css

@@ -494,3 +494,7 @@ button.comment__action-button[disabled],
     visibility: visible;
   }
 }
+
+.offTopicComment {
+  display: none;
+}

plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js

@@ -7,15 +7,14 @@ import {addClassName, removeClassName} from 'coral-embed-stream/src/actions/comm
 class OffTopicFilter extends React.Component {
 
   tag = 'OFF_TOPIC';
-  className = 'wapoOfftopic';
+  className = 'offTopicComment';
+  cn = {[this.className] : {tags: [this.tag]}};
 
   handleChange = (e) => {
     if (e.target.checked) {
-      this.props.addClassName({
-        [this.className] : {tags: [this.tag]}
-      });
+      this.props.addClassName(this.cn);
     } else {
-      const idx = this.props.comment.classNames.indexOf(this.className);
+      const idx = this.props.comment.classNames.indexOf(this.cn);
       this.props.removeClassName(idx);
     }
   }