add notification bubble on leftpane header

stylesheets/_session_theme_dark_left_pane.scss

@@ -264,3 +264,16 @@ $session-compose-margin: 20px;
     }
   }
 }
+
+.contact-notification-count-bubble {
+  background: $session-color-danger;
+  line-height: 30px;
+  width: 30px;
+  height: 30px;
+  font-size: 14px;
+  margin-left: auto;
+  text-align: center;
+  border-radius: 50%;
+  color: $session-color-white;
+  font-weight: bold;
+}

ts/components/LeftPane.tsx

@@ -114,11 +114,13 @@ export class LeftPane extends React.Component<Props, State> {
     );
   }
 
+  // this static function is set here to be used by all subsections (message, contacts,...) to render their headers
   static renderHeader(
     labels: Array<string>,
     onTabSelected?: any,
     buttonLabel?: string,
-    buttonClicked?: any
+    buttonClicked?: any,
+    notificationCount?: number
   ): JSX.Element {
     return (
       <LeftPaneSectionHeader
@@ -127,6 +129,7 @@ export class LeftPane extends React.Component<Props, State> {
         labels={labels}
         buttonLabel={buttonLabel}
         buttonClicked={buttonClicked}
+        notificationCount={notificationCount}
       />
     );
   }

ts/components/session/LeftPaneSectionHeader.tsx

@@ -58,7 +58,12 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
 
   private renderTabs() {
     const { selectedTab } = this.state;
-    const { labels, buttonLabel, buttonClicked } = this.props;
+    const {
+      labels,
+      buttonLabel,
+      buttonClicked,
+      notificationCount,
+    } = this.props;
 
     const children = [];
     //loop to create children
@@ -82,6 +87,17 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
           key={window.i18n('compose')}
         />
       );
+    } else if (notificationCount && notificationCount > 0) {
+      const shortenedNotificationCount =
+        notificationCount > 9 ? 9 : notificationCount;
+      children.push(
+        <div
+          className="contact-notification-count-bubble"
+          onClick={buttonClicked}
+        >
+          {shortenedNotificationCount}
+        </div>
+      );
     }
 
     //Create the parent and add the children