FEATURE: Show FAQ at top of the hamburger until the user reads it

app/assets/javascripts/discourse/controllers/static.js.es6

@@ -3,8 +3,11 @@ export default Ember.Controller.extend({
 
   actions: {
     markFaqRead() {
-      if (this.currentUser) {
-        Discourse.ajax("/users/read-faq", { method: "POST" });
+      const currentUser = this.currentUser;
+      if (currentUser) {
+        Discourse.ajax("/users/read-faq", { method: "POST" }).then(() => {
+          currentUser.set('read_faq', true);
+        });
       }
     }
   }

app/assets/javascripts/discourse/templates/components/hamburger-menu.hbs

@@ -1,6 +1,17 @@
 {{#menu-panel visible=visible}}
+  {{#unless currentUser.read_faq}}
+    {{#menu-links}}
+      <li>
+        {{#d-link path=faqUrl class="faq-link"}}
+          {{i18n "faq"}}
+          <span class='new'>{{i18n "new_item"}}</span>
+        {{/d-link}}
+      </li>
+    {{/menu-links}}
+  {{/unless}}
+
   {{#if currentUser.staff}}
-    {{#menu-links class="columned"}}
+    {{#menu-links}}
       <li>{{d-link route="admin" class="admin-link" icon="wrench" label="admin_title"}}</li>
       <li>
         {{#d-link route="adminFlags" class="flagged-posts-link"}}
@@ -70,7 +81,9 @@
 
   {{#menu-links omitRule="true"}}
     <li>{{d-link route="about" class="about-link" label="about.simple_title"}}</li>
-    <li>{{d-link path=faqUrl class="faq-link" label="faq"}}</li>
+    {{#if currentUser.read_faq}}
+      <li>{{d-link path=faqUrl class="faq-link" label="faq"}}</li>
+    {{/if}}
 
     {{#if showKeyboardShortcuts}}
       <li>{{d-link action="keyboardShortcuts" class="keyboard-shortcuts-link" label="keyboard_shortcuts_help.title"}}</li>

app/assets/javascripts/discourse/views/static.js.es6

@@ -1,24 +1,28 @@
 import isElementInViewport from "discourse/lib/is-element-in-viewport";
 import ScrollTop from 'discourse/mixins/scroll-top';
-
-var readFaq = false;
+import { on } from 'ember-addons/ember-computed-decorators';
 
 export default Ember.View.extend(ScrollTop, {
 
-  _checkRead: function() {
-    const path = this.get('controller.model.path');
-    if (path === "faq" || path === "guidelines") {
-      const controller = this.get('controller');
-      $(window).on('load.faq resize.faq scroll.faq', function() {
-        if (!readFaq && isElementInViewport($(".contents p").last())) {
-          readFaq = true;
-          controller.send('markFaqRead');
-        }
-      });
+  @on('didInsertElement')
+  _checkRead() {
+    const currentUser = this.get('controller.currentUser');
+    if (currentUser) {
+      const path = this.get('controller.model.path');
+      if (path === "faq" || path === "guidelines") {
+        const controller = this.get('controller');
+        $(window).on('load.faq resize.faq scroll.faq', function() {
+          const faqUnread = !currentUser.get('read_faq');
+          if (faqUnread && isElementInViewport($(".contents p").last())) {
+            controller.send('markFaqRead');
+          }
+        });
+      }
     }
-  }.on('didInsertElement'),
+  },
 
-  _stopChecking: function(){
+  @on('willDestroyElement')
+  _stopChecking() {
     $(window).off('load.faq resize.faq scroll.faq');
-  }.on('willDestroyElement')
+  }
 });