Featuring from Featured Tab

plugins/talk-plugin-featured-comments/client/components/Button.css

@@ -0,0 +1,17 @@
+.button {
+
+  /* TODO: figure out the best location to include the `reset.css` */
+  composes: buttonReset from "coral-framework/styles/reset.css";
+
+  color: #767676;
+  margin-right: 10px;
+}
+
+.button.featured {
+  color: #10589b;
+}
+
+.icon {
+  font-size: 18px;
+  vertical-align: top;
+}

plugins/talk-plugin-featured-comments/client/components/Button.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './Button.css';
+import {pluginName} from '../../package.json';
+import {can} from 'plugin-api/beta/client/services';
+import {withTags} from 'plugin-api/beta/client/hocs';
+import {Icon} from 'plugin-api/beta/client/components/ui';
+
+const Button = (props) => {
+  const {alreadyTagged, deleteTag, postTag, user} = props;
+
+  return can(user, 'MODERATE_COMMENTS') ? (
+    <button
+      className={cn([`${pluginName}-tag-button`, styles.button, {[styles.featured] : alreadyTagged}])}
+      onClick={alreadyTagged ? deleteTag : postTag} >
+
+      {alreadyTagged ?
+        <Icon name="star" className={styles.icon} /> :
+        <Icon name="star_border" className={styles.icon} />
+      }
+
+    </button>
+  ) : null ;
+};
+
+export default withTags('featured')(Button);

plugins/talk-plugin-featured-comments/client/components/Comment.js

@@ -5,6 +5,7 @@ import {t, timeago} from 'plugin-api/beta/client/services';
 import {Slot, CommentAuthorName} from 'plugin-api/beta/client/components';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 import {pluginName} from '../../package.json';
+import Button from './Button';
 
 class Comment extends React.Component {
 
@@ -48,6 +49,13 @@ class Comment extends React.Component {
               asset={asset}
               inline
             />
+
+            <Button
+              root={root}
+              data={data}
+              comment={comment}
+              asset={asset}
+            />
           </div>
           <div className={cn(styles.actionsContainer, `${pluginName}-comment-actions`)}>
             <button className={cn(styles.goTo, `${pluginName}-comment-go-to`)} onClick={this.viewComment}>