add green dot to shortcut icon to indicate unread messages

README.md

@@ -6,7 +6,7 @@ and [icons](https://google.github.io/material-design-icons/#icon-font-for-the-we
 
 This is work in progress. Bugs are expected. The app was tested in the latest Chrome & Firefox only.
 
-Try it (possibly newer or older version) live at https://api.tinode.co/x/example-react-js/. Login as one of `alice`, `bob`, `carol`, `dave`, `frank`. Password is `<login>123`, e.g. password for `alice` is `alice123`. You can discover other users by email or phone by prefixing them with `email:` or `tel:` respectively. Emails are `<login>@example.com`, e.g. `alice@example.com`, phones are `17025550001` through `17025550009`. The demo is reset every night at 2:15 am Pacific time.
+Try possibly newer or older version live at https://api.tinode.co/x/example-react-js/. Login as one of `alice`, `bob`, `carol`, `dave`, `frank`. Password is `<login>123`, e.g. password for `alice` is `alice123`. You can discover other users by email or phone by prefixing them with `email:` or `tel:` respectively. Emails are `<login>@example.com`, e.g. `alice@example.com`, phones are `17025550001` through `17025550009`. The demo is reset every night at 2:15am Pacific time.
 
 License: [Apache 2.0](http://www.apache.org/licenses/LICENSE-2.0)
 
@@ -20,7 +20,7 @@ Background pattern from http://subtlepatterns.com/, commercial and non-commercia
 * Cannot delete messages.
 * No indication of chat status (muted, blocked, etc.).
 * Browser push notifications are missing.
-* No encryption.
+* No end-to-end encryption.
 * Editing chat permissions is incomplete.
 
 ## Responsive design

index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Tinode example: chat web application in react.js</title>
-    <link rel="shortcut icon" href="img/logo32x32.png" />
+    <link id="shortcut-icon" rel="shortcut icon" href="img/logo32x32.png" />
     <!-- Browser styling for Chrome, FF, Opera -->
     <meta name="theme-color" content="#3949AB">
     <!-- Google's Roboto font -->
@@ -75,6 +75,20 @@
         'data:image/' + photo.type + ';base64,' + photo.data : null;
     }
 
+    // Make shortcut icon appear with a green dot.
+    function updateFavicon(on) {
+      var oldIcon = document.getElementById("shortcut-icon");
+      if (oldIcon) {
+        var head = document.head || document.getElementsByTagName('head')[0];
+        var newIcon = document.createElement('link');
+        newIcon.type = "image/png";
+        newIcon.id = "shortcut-icon";
+        newIcon.rel = "shortcut icon";
+        newIcon.href = "img/logo32x32" + (on ? 'a' : '') + ".png";
+        head.removeChild(oldIcon);
+        head.appendChild(newIcon);
+      }
+    }
     // Get 32 bit integer hash value for a string. Ideally it should produce the same value
     // as Java's String#hash().
     function stringHash(value) {
@@ -1067,7 +1081,6 @@
 
               this.props.state === 'contacts' ?
               <ContactsView
-                data={this.props.subscriptions}
                 topicSelected={this.props.topicSelected}
                 showContextMenu={this.props.showContextMenu}
                 onTopicSelected={this.props.onTopicSelected} /> :
@@ -1355,11 +1368,15 @@
 
       prepareContactList: function() {
         var contacts = [];
+        var totalUnread = 0;
         Tinode.getMeTopic().contacts(function(c) {
           c.unread = c.seq - (c.read > 0 ? c.read : 0);
+          totalUnread += c.unread;
           contacts.push(c);
         }, this);
 
+        updateFavicon(totalUnread > 0);
+
         return contacts;
       },
 
@@ -2800,7 +2817,6 @@
           liveConnection: navigator.onLine,
           topicSelected: '',
           loginDisabled: false,
-          subscriptions: {},
           displayMobile: (window.innerWidth <= MEDIA_BREAKPOINT),
           showInfoPanel: false,
           infoPanelShowMembers: false,
@@ -3272,7 +3288,6 @@
               state={this.state.sidePanelSelected}
               title={this.state.sidePanelTitle}
               avatar={this.state.sidePanelAvatar}
-              subscriptions={this.state.subscriptions}
               login={this.state.login}
               myUserId={this.state.myUserId}
               loginDisabled={this.state.loginDisabled}