provide a way to hide the notification nag toolbar

skins/base/css/molecules/MatrixToolbar.css

@@ -26,3 +26,9 @@ limitations under the License.
 .mx_MatrixToolbar button {
     margin-left: 12px;
 }
+
+.mx_MatrixToolbar_close {
+    float: right;
+    margin-top: 3px;
+    margin-right: 12px;
+}

skins/base/views/molecules/MatrixToolbar.js

@@ -24,15 +24,21 @@ var LogoutButton = ComponentBroker.get("atoms/LogoutButton");
 var EnableNotificationsButton = ComponentBroker.get("atoms/EnableNotificationsButton");
 
 var MatrixToolbarController = require("../../../../src/controllers/molecules/MatrixToolbar");
+var Notifier = ComponentBroker.get('organisms/Notifier');
 
 module.exports = React.createClass({
     displayName: 'MatrixToolbar',
     mixins: [MatrixToolbarController],
 
+    hideToolbar: function() {
+        Notifier.setToolbarHidden(true);
+    },
+
     render: function() {
         return (
             <div className="mx_MatrixToolbar">
                 You are not receiving desktop notifications. <EnableNotificationsButton />
+                <div className="mx_MatrixToolbar_close"><img src="img/close-white.png" width="16" height="16" onClick={ this.hideToolbar } /></div>
             </div>
         );
     }

skins/base/views/pages/MatrixChat.js

@@ -75,7 +75,7 @@ module.exports = React.createClass({
                     break;
             }
 
-            if (Notifier.supportsDesktopNotifications() && !Notifier.isEnabled()) {
+            if (Notifier.supportsDesktopNotifications() && !Notifier.isEnabled() && !Notifier.isToolbarHidden()) {
                 return (
                         <div className="mx_MatrixChat_wrapper">
                             <MatrixToolbar />

src/controllers/organisms/Notifier.js

@@ -27,10 +27,14 @@ var dis = require("../../dispatcher");
  * }
  */
 
+// XXX: This isn't an organism surely in the atomic sense of the word 
+// what on earth is it doing here?!
+
 module.exports = {
     start: function() {
         this.boundOnRoomTimeline = this.onRoomTimeline.bind(this);
         MatrixClientPeg.get().on('Room.timeline', this.boundOnRoomTimeline);
+        this.state = { 'toolbarHidden' : false };
     },
 
     stop: function() {
@@ -82,6 +86,8 @@ module.exports = {
                 value: false
             });
         }
+
+        this.setToolbarHidden(false);
     },
 
     isEnabled: function() {
@@ -94,6 +100,18 @@ module.exports = {
         return enabled === 'true';
     },
 
+    setToolbarHidden: function(hidden) {
+        this.state.toolbarHidden = hidden;
+        dis.dispatch({
+            action: "notifier_enabled",
+            value: this.isEnabled()
+        });
+    },
+
+    isToolbarHidden: function() {
+        return this.state.toolbarHidden;
+    },
+
     onRoomTimeline: function(ev, room, toStartOfTimeline) {
         if (toStartOfTimeline) return;
         if (ev.sender && ev.sender.userId == MatrixClientPeg.get().credentials.userId) return;