Add notification badge to mobile menu icon

Maybe the user count badge will be annoying to have included
in the total, probably no one even knows what it’s for…
maybe should be a separate indicator.

app/controllers/application.js

@@ -1,47 +1,12 @@
-import { computed } from '@ember/object';
 import { inject as service } from '@ember/service';
 import Controller from '@ember/controller';
 
-import ObjectProxy from '@ember/object/proxy';
-import PromiseProxyMixin from '@ember/object/promise-proxy-mixin';
-let ObjectPromiseProxy = ObjectProxy.extend(PromiseProxyMixin);
-
 export default Controller.extend({
   sidebar: service(),
   session: service(),
   store: service(),
   userSocket: service(),
 
-  userCount: computed('userSocket.present.length', function () {
-    const count = this.get('userSocket.present.length');
-
-    if (count > 1) {
-      return count;
-    } else {
-      return undefined;
-    }
-  }),
-
-  postsRequest: computed(function () {
-    return ObjectPromiseProxy.create({
-      promise: this.get('store').findAll('post').then(posts => {
-        return {
-          posts
-        };
-      })
-    });
-  }),
-
-  unreadCount: computed('[email protected]', function () {
-    let posts = this.get('postsRequest.posts')
-
-    if (posts) {
-      return posts.filterBy('unread').length;
-    } else {
-      return 0;
-    }
-  }),
-
   actions: {
     logout() {
       this.get('session').invalidate();

app/services/sidebar.js

@@ -1,5 +1,48 @@
 import Service from '@ember/service';
+import { inject as service } from '@ember/service';
+import { computed } from '@ember/object';
+
+import ObjectProxy from '@ember/object/proxy';
+import PromiseProxyMixin from '@ember/object/promise-proxy-mixin';
+let ObjectPromiseProxy = ObjectProxy.extend(PromiseProxyMixin);
 
 export default Service.extend({
-  open: false
+  store: service(),
+  userSocket: service(),
+
+  open: false,
+
+  userCount: computed('userSocket.present.length', function () {
+    const count = this.get('userSocket.present.length');
+
+    if (count > 1) {
+      return count;
+    } else {
+      return 0;
+    }
+  }),
+
+  postsRequest: computed(function () {
+    return ObjectPromiseProxy.create({
+      promise: this.get('store').findAll('post').then(posts => {
+        return {
+          posts
+        };
+      })
+    });
+  }),
+
+  unreadCount: computed('[email protected]', function () {
+    let posts = this.get('postsRequest.posts')
+
+    if (posts) {
+      return posts.filterBy('unread').length;
+    } else {
+      return 0;
+    }
+  }),
+
+  notificationCount: computed('userCount', 'unreadCount', function() {
+    return this.get('userCount') + this.get('unreadCount');
+  }),
 });

app/styles/app.scss

@@ -58,6 +58,19 @@ md-toolbar {
       box-shadow: none;
     }
   }
+
+  .count {
+    border-radius: 10px;
+    background: white;
+    color: color($color-indigo, '600');
+    font-size: 50%;
+    text-align: center;
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    top: 10px;
+    left: 32px;
+  }
 }
 
 md-sidenav {

app/templates/application.hbs

@@ -47,13 +47,13 @@
             {{#paper-item}}
               {{#link-to 'log'}}<span class='log'>
                 <span>Log</span>
-                {{#if unreadCount}}<span class='count' title='How many unread posts you have'>{{unreadCount}}</span>{{/if}}
+                {{#if sidebar.unreadCount}}<span class='count' title='How many unread posts you have'>{{sidebar.unreadCount}}</span>{{/if}}
               </span>{{/link-to}}
             {{/paper-item}}
             {{#paper-item}}
               {{#link-to 'users'}}<span class='users'>
                 <span>Users</span>
-                {{#if userCount}}<span class='count' title='How many users are connected'>{{userCount}}</span>{{/if}}
+                {{#if sidebar.userCount}}<span class='count' title='How many users are connected'>{{sidebar.userCount}}</span>{{/if}}
               </span>{{/link-to}}
             {{/paper-item}}
             {{paper-divider}}

app/templates/components/toolbar-header.hbs

@@ -3,6 +3,9 @@
     {{#paper-button iconButton=true onClick=(action 'toggleSidebar') class='hide-gt-sm'}}
       {{paper-icon "menu"}}
     {{/paper-button}}
+    {{#if sidebar.notificationCount}}
+      <span class='count hide-gt-sm' title='Check on {{pluralize sidebar.notificationCount 'notification'}}'>{{sidebar.notificationCount}}</span>
+    {{/if}}
     <h2>{{title}}</h2>
     {{#paper-chips readOnly=true content=chips as |item|}}<span title='{{item.title}}'>{{item.label}}</span>{{/paper-chips}}
     <span class='flex'></span>