Show notification dot when toolbar is collapsed

customize.dist/src/less2/include/toolbar.less

@@ -1045,10 +1045,24 @@
         is very small, which makes it unlikely that you'll see the title unless
         you hover perfectly. The same is true of the drive's grid/list view toggle.
 */
-
+            position: relative;
             .fa {
                 margin-right: 0px;
             }
+            .cp-collapsed-notif {
+                display: inline-block;
+                width: 12px;
+                height: 12px;
+                background-color: @cryptpad_color_red;
+                position: absolute;
+                bottom: -3px;
+                right: -3px;
+                border: 2px solid @cp_toolbar-bg;
+                border-radius: 50%;
+            }
+            &:not(.cp-toolbar-button-active) .cp-collapsed-notif {
+                display: none;
+            }
         }
 
         &.cp-toolbar-small {

www/common/toolbar.js

@@ -463,15 +463,18 @@ MessengerUI, Messages, Pages) {
     createCollapse = function (toolbar) {
         var up = h('i.fa.fa-chevron-up', {title: Messages.toolbar_collapse});
         var down = h('i.fa.fa-chevron-down', {title: Messages.toolbar_expand});
+        var notif = h('span.cp-collapsed-notif');
 
         var $button = $(h('button.cp-toolbar-collapse',[
             up,
-            down
+            down,
+            notif
         ]));
         var $up = $(up);
         var $down = $(down);
         toolbar.$bottomR.prepend($button);
         $down.hide();
+        $(notif).hide();
         $button.click(function () {
             toolbar.$top.toggleClass('toolbar-hidden');
             var hidden = toolbar.$top.hasClass('toolbar-hidden');
@@ -482,6 +485,7 @@ MessengerUI, Messages, Pages) {
             } else {
                 $up.show();
                 $down.hide();
+                $(notif).hide();
             }
         });
     };
@@ -1173,6 +1177,9 @@ MessengerUI, Messages, Pages) {
 
         Common.mailbox.subscribe(['notifications', 'team', 'broadcast', 'reminders'], {
             onMessage: function (data, el) {
+                if (toolbar.$top.hasClass('toolbar-hidden')) {
+                    $('.cp-collapsed-notif').css('display', '');
+                }
                 if (el) {
                     $(div).prepend(el);
                 }