From 97daca4b311722faa1ec9a23a799cf024ee33e1b Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Mon, 22 Aug 2016 14:10:06 +0100
Subject: [PATCH 01/28] Initial restyle of the sub lists and room lists

---
 src/components/structures/RoomSubList.js      | 14 ++++---
 .../matrix-react-sdk/structures/SearchBox.css |  1 -
 .../matrix-react-sdk/views/rooms/RoomList.css |  1 -
 .../matrix-react-sdk/views/rooms/RoomTile.css | 21 +++++-----
 .../css/vector-web/structures/RoomSubList.css | 40 ++++++++++++++++---
 5 files changed, 52 insertions(+), 25 deletions(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 74ddb879a..6fa8a28bb 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
+var classNames = require('classnames');
 var DropTarget = require('react-dnd').DropTarget;
 var sdk = require('matrix-react-sdk')
 var dis = require('matrix-react-sdk/lib/dispatcher');
@@ -300,13 +301,16 @@ var RoomSubList = React.createClass({
 
     _getHeaderJsx: function() {
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
+        var classes = classNames({
+            'mx_RoomSubList_chevron': true,
+            'mx_RoomSubList_chevronUp': this.state.hidden,
+            'mx_RoomSubList_chevronDown': !this.state.hidden,
+        });
         return (
-            <h2 onClick={ this.onClick } className="mx_RoomSubList_label">
+            <div onClick={ this.onClick } className="mx_RoomSubList_label">
                 { this.props.collapsed ? '' : this.props.label }
-                <img className="mx_RoomSubList_chevron"
-                    src={ this.state.hidden ? "img/list-close.svg" : "img/list-open.svg" }
-                    width="10" height="10" />
-            </h2>
+                <div className={classes}></div>
+            </div>
         );
     },
 
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css
index d9e4e05fd..0b5362593 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css
@@ -20,7 +20,6 @@ limitations under the License.
     margin-right: 16px;
     padding-top: 24px;
     padding-bottom: 22px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 
     display: flex;
     display: -webkit-flex;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
index a22418534..a339d80f9 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 .mx_RoomList {
-    padding-top: 8px;
     padding-bottom: 12px;
     min-height: 400px;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
index c266b027d..254565035 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
@@ -109,9 +109,8 @@ limitations under the License.
 }
 
 .collapsed .mx_RoomTile_badge {
-    top: -2px;
+    top: 0px;
     min-width: 12px;
-    height: 16px;
     border-radius: 16px;
     padding: 0px 4px 0px 4px;
     z-index: 200;
@@ -129,22 +128,22 @@ limitations under the License.
     display: block;
     width: 0;
     height: 0;
-    margin-left: 6px;
-    border-top: 8px solid #ff0064;
-    border-right: 10px solid transparent;
+    margin-left: 5px;
+    border-top: 5px solid #ff0064;
+    border-right: 7px solid transparent;
 }
 
 .mx_RoomTile_badge {
     display: inline-block;
-    min-width: 19px;
-    height: 17px;
+    min-width: 15px;
+    height: 15px;
     position: absolute;
     right: 8px; /*gutter */
     top: 9px;
-    border-radius: 14px;
+    border-radius: 8px;
     color: #fff;
     font-weight: 600;
-    font-size: 11px;
+    font-size: 10px;
     text-align: center;
     padding-top: 1px;
     padding-left: 4px;
@@ -175,7 +174,7 @@ limitations under the License.
 }
 
 .mx_RoomTile_selected {
-    background-color: rgba(118,207,166,0.2);
+    background-color: rgba(255, 255, 255, 0.8);
 }
 
 .mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
@@ -187,5 +186,3 @@ limitations under the License.
     right: 0px;
 }
 
-.mx_RoomTile:hover {
-}
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index b54fea981..cd232181c 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -21,22 +21,50 @@ limitations under the License.
 }
 
 .mx_RoomSubList_label {
+    position: relative;
     text-transform: uppercase;
     color: #3d3b39;
     font-weight: 600;
-    font-size: 13px;
+    font-size: 12px;
     padding-left: 16px; /* gutter */
     padding-right: 16px; /* gutter */
-    margin-top: 8px;
-    margin-bottom: 4px;
+    padding-top: 6px;
+    padding-bottom: 6px;
     cursor: pointer;
+    background-color: rgba(118, 207, 166, 0.2);
+}
+
+.collapsed .mx_RoomSubList_label {
+    height: 16px;
 }
 
 .mx_RoomSubList_chevron {
-    padding-left: 4px;
     pointer-events: none;
+    position: absolute;
+    right: 41px;
+    top: 11px;
 }
 
-.collapsed .mx_RoomSubList_chevron  {
-    padding-left: 12px;
+.mx_RoomSubList_chevronDown {
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 6px solid #76cfa6;
+}
+
+.mx_RoomSubList_chevronUp {
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 6px solid #76cfa6;
+}
+
+.mx_RoomSubList_chevronRight {
+    width: 0;
+    height: 0;
+    border-top: 5px solid transparent;
+    border-left: 6px solid #76cfa6;
+    border-bottom: 5px solid transparent;
 }

From 71f73d8df2cfd38d27f23d8e88603616e50f655b Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Mon, 22 Aug 2016 15:50:36 +0100
Subject: [PATCH 02/28] Collapsing and truncation initial state and onClick
 event logic

---
 src/components/structures/RoomSubList.js | 57 +++++++++++++-----------
 1 file changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 6fa8a28bb..c5507e76b 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -27,6 +27,8 @@ var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 // turn this on for drop & drag console debugging galore
 var debug = false;
 
+const TRUNCATE_AT = 6;
+
 var roomListTarget = {
     canDrop: function() {
         return true;
@@ -81,7 +83,8 @@ var RoomSubList = React.createClass({
     getInitialState: function() {
         return {
             hidden: this.props.startAsHidden || false,
-            truncateAt: 20,
+            capTruncate: this.props.list.length > TRUNCATE_AT,
+            truncateAt: this.props.list.length > TRUNCATE_AT ? TRUNCATE_AT : -1,
             sortedList: [],
         };
     },
@@ -111,15 +114,32 @@ var RoomSubList = React.createClass({
     },
 
     onClick: function(ev) {
-        var isHidden = !this.state.hidden;
-        this.setState({ hidden : isHidden });
+        // Collapse and truncation logic
+        var isHidden = false;
+        var isTruncatable = this.props.list.length > TRUNCATE_AT;
 
-        if (isHidden) {
-            // as good a way as any to reset the truncate state
-            this.setState({ truncateAt : 20 });
-            this.props.onShowMoreRooms();
+        if (this.state.hidden && (this.state.capTruncate && isTruncatable)) {
+            isHidden = false;
+            this.setState({ hidden : isHidden });
+            this.setState({ capTruncate : true });
+            // Show truncated list
+            this.setState({ truncateAt : TRUNCATE_AT });
+        } else if ((!this.state.hidden && this.state.capTruncate) ||
+                   (this.state.hidden && (this.state.capTruncate && !isTruncatable))) {
+            isHidden = false;
+            this.setState({ hidden : isHidden });
+            this.setState({ capTruncate : false });
+            // Show full list
+            this.setState({ truncateAt : -1 });
+        } else if (!this.state.hidden && !this.state.capTruncate) {
+            isHidden = true;
+            this.setState({ hidden : isHidden });
+            this.setState({ capTruncate : true });
+            // Truncated list
+            this.setState({ truncateAt : TRUNCATE_AT });
         }
 
+        this.props.onShowMoreRooms();
         this.props.onHeaderClick(isHidden);
     },
 
@@ -304,7 +324,8 @@ var RoomSubList = React.createClass({
         var classes = classNames({
             'mx_RoomSubList_chevron': true,
             'mx_RoomSubList_chevronUp': this.state.hidden,
-            'mx_RoomSubList_chevronDown': !this.state.hidden,
+            'mx_RoomSubList_chevronRight': !this.state.hidden && this.state.capTruncate,
+            'mx_RoomSubList_chevronDown': !this.state.hidden && !this.state.capTruncate,
         });
         return (
             <div onClick={ this.onClick } className="mx_RoomSubList_label">
@@ -314,25 +335,7 @@ var RoomSubList = React.createClass({
         );
     },
 
-    _createOverflowTile: function(overflowCount, totalCount) {
-        var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-        // XXX: this is duplicated from RoomTile - factor it out
-        return (
-            <div className="mx_RoomTile mx_RoomTile_ellipsis" onClick={this._showFullMemberList}>
-                <div className="mx_RoomTile_avatar">
-                    <BaseAvatar url="img/ellipsis.svg" name="..." width={24} height={24} />
-                </div>
-                <div className="mx_RoomTile_name">and { overflowCount } others...</div>
-            </div>
-        );
-    },
-
-    _showFullMemberList: function() {
-        this.setState({
-            truncateAt: -1
-        });
-        this.props.onShowMoreRooms();
-    },
+    _createOverflowTile: function() {}, // NOP
 
     // Fix any undefined order elements of a room in a manual ordered list
     //     room.tag[tagname].order

From 895172d4981848121a69245244316975b4911250 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Mon, 22 Aug 2016 16:42:08 +0100
Subject: [PATCH 03/28] Added catch to help get the Historical and any other
 weird sections into a sound state, so the states can then change correctly
 from then on

---
 src/components/structures/RoomSubList.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index c5507e76b..50db2b412 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -137,6 +137,13 @@ var RoomSubList = React.createClass({
             this.setState({ capTruncate : true });
             // Truncated list
             this.setState({ truncateAt : TRUNCATE_AT });
+        } else {
+            // Catch any weird states the system gets into
+            isHidden = false;
+            this.setState({ hidden : isHidden });
+            this.setState({ capTruncate : true });
+            // Show truncated list
+            this.setState({ truncateAt : TRUNCATE_AT });
         }
 
         this.props.onShowMoreRooms();

From ff55a951c9f415a88b0862d80f88d91c8e57ddea Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Mon, 22 Aug 2016 17:02:52 +0100
Subject: [PATCH 04/28] Number of rooms added to header of sections

---
 src/components/structures/RoomSubList.js                  | 5 +++--
 .../vector/css/vector-web/structures/RoomSubList.css      | 8 ++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 50db2b412..a96e8d285 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -328,7 +328,7 @@ var RoomSubList = React.createClass({
 
     _getHeaderJsx: function() {
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
-        var classes = classNames({
+        var chevronClasses = classNames({
             'mx_RoomSubList_chevron': true,
             'mx_RoomSubList_chevronUp': this.state.hidden,
             'mx_RoomSubList_chevronRight': !this.state.hidden && this.state.capTruncate,
@@ -337,7 +337,8 @@ var RoomSubList = React.createClass({
         return (
             <div onClick={ this.onClick } className="mx_RoomSubList_label">
                 { this.props.collapsed ? '' : this.props.label }
-                <div className={classes}></div>
+                <div className="mx_RoomSubList_roomCount">{this.props.list.length > 0 ? this.props.list.length : ''}</div>
+                <div className={chevronClasses}></div>
             </div>
         );
     },
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index cd232181c..b1e89cb88 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -38,6 +38,14 @@ limitations under the License.
     height: 16px;
 }
 
+.mx_RoomSubList_roomCount {
+    display: inline-block;
+    font-size: 12px;
+    font-weight: normal;
+    color: #76cfa6;
+    padding-left: 5px;
+}
+
 .mx_RoomSubList_chevron {
     pointer-events: none;
     position: absolute;

From 4d5e3bc22be8b9ce4a0a13c2d508ff77ce67066a Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Mon, 22 Aug 2016 17:25:43 +0100
Subject: [PATCH 05/28] Initial tag section header badge

---
 src/components/structures/RoomSubList.js      |  1 +
 .../css/vector-web/structures/RoomSubList.css | 26 +++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index a96e8d285..e4ca6edbf 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -339,6 +339,7 @@ var RoomSubList = React.createClass({
                 { this.props.collapsed ? '' : this.props.label }
                 <div className="mx_RoomSubList_roomCount">{this.props.list.length > 0 ? this.props.list.length : ''}</div>
                 <div className={chevronClasses}></div>
+                <div className="mx_RoomSubList_badge">0</div>
             </div>
         );
     },
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index b1e89cb88..974cf3e71 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -46,6 +46,32 @@ limitations under the License.
     padding-left: 5px;
 }
 
+.collapsed .mx_RoomSubList_roomCount {
+    display: none;
+}
+
+.mx_RoomSubList_badge {
+    display: inline-block;
+    min-width: 15px;
+    height: 15px;
+    position: absolute;
+    right: 8px; /*gutter */
+    top: 7px;
+    border-radius: 8px;
+    color: #fff;
+    font-weight: 600;
+    font-size: 10px;
+    text-align: center;
+    padding-top: 1px;
+    padding-left: 4px;
+    padding-right: 4px;
+    background-color: #76cfa6; /* Temporary */
+}
+
+.collapsed .mx_RoomSubList_badge {
+    display: none;
+}
+
 .mx_RoomSubList_chevron {
     pointer-events: none;
     position: absolute;

From ca4d506391d796e51b49394b247e33024a641070 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Mon, 22 Aug 2016 22:47:00 +0100
Subject: [PATCH 06/28] Header wording for capped truncation count updated

---
 src/components/structures/RoomSubList.js               | 10 +++++++++-
 .../vector/css/vector-web/structures/RoomSubList.css   |  1 +
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index e4ca6edbf..a60951f9e 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -328,16 +328,24 @@ var RoomSubList = React.createClass({
 
     _getHeaderJsx: function() {
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
+
         var chevronClasses = classNames({
             'mx_RoomSubList_chevron': true,
             'mx_RoomSubList_chevronUp': this.state.hidden,
             'mx_RoomSubList_chevronRight': !this.state.hidden && this.state.capTruncate,
             'mx_RoomSubList_chevronDown': !this.state.hidden && !this.state.capTruncate,
         });
+
+        var roomCount = this.props.list.length > 0 ? this.props.list.length : '';
+        var isTruncatable = this.props.list.length > TRUNCATE_AT;
+        if (!this.state.hidden && this.state.capTruncate && isTruncatable) {
+            roomCount = TRUNCATE_AT + " of " + roomCount;
+        }
+
         return (
             <div onClick={ this.onClick } className="mx_RoomSubList_label">
                 { this.props.collapsed ? '' : this.props.label }
-                <div className="mx_RoomSubList_roomCount">{this.props.list.length > 0 ? this.props.list.length : ''}</div>
+                <div className="mx_RoomSubList_roomCount">{roomCount}</div>
                 <div className={chevronClasses}></div>
                 <div className="mx_RoomSubList_badge">0</div>
             </div>
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index 974cf3e71..aeef4a424 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -44,6 +44,7 @@ limitations under the License.
     font-weight: normal;
     color: #76cfa6;
     padding-left: 5px;
+    text-transform: none;
 }
 
 .collapsed .mx_RoomSubList_roomCount {

From a980864886e9c6c79bd9c89d81feea7d48e5544d Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 23 Aug 2016 10:47:17 +0100
Subject: [PATCH 07/28] Initial sub list notifications count. Still needs
 propagation of muting/unmuting etc. events from room tile up to sub list

---
 src/components/structures/RoomSubList.js      | 55 ++++++++++++++++---
 .../css/vector-web/structures/RoomSubList.css | 23 +++++++-
 2 files changed, 70 insertions(+), 8 deletions(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index a60951f9e..740cb82e4 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -214,6 +214,38 @@ var RoomSubList = React.createClass({
         this.setState({ sortedList: list.sort(comparator) });
     },
 
+    roomNotificationCount: function() {
+        var self = this;
+        var subListCount = 0;
+        var subListHighlight = false;
+        var cli = MatrixClientPeg.get();
+
+        this.state.sortedList.map(function(room) {
+            var notifsMuted = false;
+            if (!cli.isGuest()) {
+                var roomPushRule = cli.getRoomPushRule("global", room.roomId);
+                if (roomPushRule) {
+                    if (0 <= roomPushRule.actions.indexOf("dont_notify")) {
+                        notifsMuted = true;
+                    }
+                }
+            }
+
+            var highlight = room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites';
+
+            var notificationCount = room.getUnreadNotificationCount();
+
+            if (notificationCount > 0 && (!notifsMuted || (notifsMuted && highlight))) {
+                subListCount += notificationCount;
+                if (highlight) {
+                    subListHighlight = true;
+                }
+            }
+        });
+
+        return [subListCount, subListHighlight];
+    },
+
     moveRoomTile: function(room, atIndex) {
         if (debug) console.log("moveRoomTile: id " + room.roomId + ", atIndex " + atIndex);
         //console.log("moveRoomTile before: " + JSON.stringify(this.state.rooms));
@@ -329,12 +361,9 @@ var RoomSubList = React.createClass({
     _getHeaderJsx: function() {
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
 
-        var chevronClasses = classNames({
-            'mx_RoomSubList_chevron': true,
-            'mx_RoomSubList_chevronUp': this.state.hidden,
-            'mx_RoomSubList_chevronRight': !this.state.hidden && this.state.capTruncate,
-            'mx_RoomSubList_chevronDown': !this.state.hidden && !this.state.capTruncate,
-        });
+        var subListNotifications = this.roomNotificationCount();
+        var subListNotificationsCount = subListNotifications[0];
+        var subListNotificationsHighlight = subListNotifications[1];
 
         var roomCount = this.props.list.length > 0 ? this.props.list.length : '';
         var isTruncatable = this.props.list.length > TRUNCATE_AT;
@@ -342,12 +371,24 @@ var RoomSubList = React.createClass({
             roomCount = TRUNCATE_AT + " of " + roomCount;
         }
 
+        var chevronClasses = classNames({
+            'mx_RoomSubList_chevron': true,
+            'mx_RoomSubList_chevronUp': this.state.hidden,
+            'mx_RoomSubList_chevronRight': !this.state.hidden && this.state.capTruncate,
+            'mx_RoomSubList_chevronDown': !this.state.hidden && !this.state.capTruncate,
+        });
+
+        var badgeClasses = classNames({
+            'mx_RoomSubList_badge': true,
+            'mx_RoomSubList_badgeHighlight': subListNotificationsHighlight,
+        });
+
         return (
             <div onClick={ this.onClick } className="mx_RoomSubList_label">
                 { this.props.collapsed ? '' : this.props.label }
                 <div className="mx_RoomSubList_roomCount">{roomCount}</div>
                 <div className={chevronClasses}></div>
-                <div className="mx_RoomSubList_badge">0</div>
+                <div className={badgeClasses}>{subListNotificationsCount}</div>
             </div>
         );
     },
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index aeef4a424..a5ea7d144 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -66,13 +66,34 @@ limitations under the License.
     padding-top: 1px;
     padding-left: 4px;
     padding-right: 4px;
-    background-color: #76cfa6; /* Temporary */
+    background-color: #76cfa6;
 }
 
 .collapsed .mx_RoomSubList_badge {
     display: none;
 }
 
+.mx_RoomSubList_badgeHighlight {
+    background-color: #ff0064;
+}
+
+/* This is the bottom of the speech bubble */
+.mx_RoomSubList_badgeHighlight:after {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    margin-left: 5px;
+    border-top: 5px solid #ff0064;
+    border-right: 7px solid transparent;
+}
+
+/* Hide the bottom of speech bubble */
+.collapsed .mx_RoomSubList_badgeHighlight:after {
+    display: none;
+}
+
 .mx_RoomSubList_chevron {
     pointer-events: none;
     position: absolute;

From d3fa680373e8ff7f8ed730b6025e41a29efe6f0e Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 23 Aug 2016 11:14:45 +0100
Subject: [PATCH 08/28] Added all the notification states to the sub list count
 logic

---
 src/components/structures/RoomSubList.js | 26 ++++++++++--------------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 740cb82e4..221691087 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -23,6 +23,7 @@ var sdk = require('matrix-react-sdk')
 var dis = require('matrix-react-sdk/lib/dispatcher');
 var Unread = require('matrix-react-sdk/lib/Unread');
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs');
 
 // turn this on for drop & drag console debugging galore
 var debug = false;
@@ -221,24 +222,19 @@ var RoomSubList = React.createClass({
         var cli = MatrixClientPeg.get();
 
         this.state.sortedList.map(function(room) {
-            var notifsMuted = false;
-            if (!cli.isGuest()) {
-                var roomPushRule = cli.getRoomPushRule("global", room.roomId);
-                if (roomPushRule) {
-                    if (0 <= roomPushRule.actions.indexOf("dont_notify")) {
-                        notifsMuted = true;
-                    }
-                }
-            }
-
+            var roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
             var highlight = room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites';
-
             var notificationCount = room.getUnreadNotificationCount();
 
-            if (notificationCount > 0 && (!notifsMuted || (notifsMuted && highlight))) {
-                subListCount += notificationCount;
-                if (highlight) {
-                    subListHighlight = true;
+            if (notificationCount > 0 && roomNotifState !== RoomNotifs.MUTE) {
+                if (roomNotifState === RoomNotifs.ALL_MESSAGES_LOUD
+                    || roomNotifState === RoomNotifs.ALL_MESSAGES
+                    || (roomNotifState === RoomNotifs.MENTIONS_ONLY && highlight))
+                {
+                    subListCount += notificationCount;
+                    if (highlight) {
+                        subListHighlight = true;
+                    }
                 }
             }
         });

From ee73bc3aa427395e02e7d895c200ce6d7715192e Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 23 Aug 2016 11:35:03 +0100
Subject: [PATCH 09/28] Refactor of the badge logic, and also added no badges
 when zero notifications

---
 src/components/structures/RoomSubList.js | 33 +++++++++++++++++-------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 221691087..746d0fb1c 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -215,6 +215,15 @@ var RoomSubList = React.createClass({
         this.setState({ sortedList: list.sort(comparator) });
     },
 
+    _shouldShowNotifBadge: function(roomNotifState) {
+        const showBadgeInStates = [RoomNotifs.ALL_MESSAGES, RoomNotifs.ALL_MESSAGES_LOUD];
+        return showBadgeInStates.indexOf(roomNotifState) > -1;
+    },
+
+    _shouldShowMentionBadge: function(roomNotifState) {
+        return roomNotifState != RoomNotifs.MUTE;
+    },
+
     roomNotificationCount: function() {
         var self = this;
         var subListCount = 0;
@@ -226,15 +235,14 @@ var RoomSubList = React.createClass({
             var highlight = room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites';
             var notificationCount = room.getUnreadNotificationCount();
 
-            if (notificationCount > 0 && roomNotifState !== RoomNotifs.MUTE) {
-                if (roomNotifState === RoomNotifs.ALL_MESSAGES_LOUD
-                    || roomNotifState === RoomNotifs.ALL_MESSAGES
-                    || (roomNotifState === RoomNotifs.MENTIONS_ONLY && highlight))
-                {
-                    subListCount += notificationCount;
-                    if (highlight) {
-                        subListHighlight = true;
-                    }
+            const notifBadges = notificationCount > 0 && self._shouldShowNotifBadge(roomNotifState);
+            const mentionBadges = highlight && self._shouldShowMentionBadge(roomNotifState);
+            const badges = notifBadges || mentionBadges;
+
+            if (badges) {
+                subListCount += notificationCount;
+                if (highlight) {
+                    subListHighlight = true;
                 }
             }
         });
@@ -379,12 +387,17 @@ var RoomSubList = React.createClass({
             'mx_RoomSubList_badgeHighlight': subListNotificationsHighlight,
         });
 
+        var badge;
+        if (subListNotificationsCount > 0) {
+            badge = <div className={badgeClasses}>{subListNotificationsCount}</div>;
+        }
+
         return (
             <div onClick={ this.onClick } className="mx_RoomSubList_label">
                 { this.props.collapsed ? '' : this.props.label }
                 <div className="mx_RoomSubList_roomCount">{roomCount}</div>
                 <div className={chevronClasses}></div>
-                <div className={badgeClasses}>{subListNotificationsCount}</div>
+                {badge}
             </div>
         );
     },

From 2cf2df20f6458c933f8d806ce87ff19333494c48 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 23 Aug 2016 12:40:15 +0100
Subject: [PATCH 10/28] Added updating of count when room tile notification
 state changed

---
 src/components/structures/RoomSubList.js | 66 ++++++++++++++----------
 1 file changed, 40 insertions(+), 26 deletions(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 746d0fb1c..6ddea5606 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -82,11 +82,15 @@ var RoomSubList = React.createClass({
     },
 
     getInitialState: function() {
+        var subListNotifications = this.roomNotificationCount();
+
         return {
             hidden: this.props.startAsHidden || false,
             capTruncate: this.props.list.length > TRUNCATE_AT,
             truncateAt: this.props.list.length > TRUNCATE_AT ? TRUNCATE_AT : -1,
             sortedList: [],
+            subListNotifCount: subListNotifications[0],
+            subListNotifHighlight: subListNotifications[1],
         };
     },
 
@@ -121,30 +125,35 @@ var RoomSubList = React.createClass({
 
         if (this.state.hidden && (this.state.capTruncate && isTruncatable)) {
             isHidden = false;
-            this.setState({ hidden : isHidden });
-            this.setState({ capTruncate : true });
-            // Show truncated list
-            this.setState({ truncateAt : TRUNCATE_AT });
-        } else if ((!this.state.hidden && this.state.capTruncate) ||
-                   (this.state.hidden && (this.state.capTruncate && !isTruncatable))) {
+            this.setState({
+                hidden : isHidden,
+                capTruncate : true,
+                truncateAt : TRUNCATE_AT
+            });
+        } else if ((!this.state.hidden && this.state.capTruncate)
+                    || (this.state.hidden && (this.state.capTruncate && !isTruncatable)))
+        {
             isHidden = false;
-            this.setState({ hidden : isHidden });
-            this.setState({ capTruncate : false });
-            // Show full list
-            this.setState({ truncateAt : -1 });
+            this.setState({
+                hidden : isHidden,
+                capTruncate : false,
+                truncateAt : -1
+            });
         } else if (!this.state.hidden && !this.state.capTruncate) {
             isHidden = true;
-            this.setState({ hidden : isHidden });
-            this.setState({ capTruncate : true });
-            // Truncated list
-            this.setState({ truncateAt : TRUNCATE_AT });
+            this.setState({
+                hidden : isHidden,
+                capTruncate : true,
+                truncateAt : TRUNCATE_AT
+            });
         } else {
             // Catch any weird states the system gets into
             isHidden = false;
-            this.setState({ hidden : isHidden });
-            this.setState({ capTruncate : true });
-            // Show truncated list
-            this.setState({ truncateAt : TRUNCATE_AT });
+            this.setState({
+                hidden : isHidden,
+                capTruncate : true,
+                truncateAt : TRUNCATE_AT
+            });
         }
 
         this.props.onShowMoreRooms();
@@ -230,7 +239,7 @@ var RoomSubList = React.createClass({
         var subListHighlight = false;
         var cli = MatrixClientPeg.get();
 
-        this.state.sortedList.map(function(room) {
+        this.props.list.map(function(room) {
             var roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
             var highlight = room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites';
             var notificationCount = room.getUnreadNotificationCount();
@@ -250,6 +259,14 @@ var RoomSubList = React.createClass({
         return [subListCount, subListHighlight];
     },
 
+    _updateSubListCount: function() {
+        var subListNotifications = this.roomNotificationCount();
+        this.setState({
+            subListNotifCount: subListNotifications[0],
+            subListNotifHighlight: subListNotifications[1]
+        });
+    },
+
     moveRoomTile: function(room, atIndex) {
         if (debug) console.log("moveRoomTile: id " + room.roomId + ", atIndex " + atIndex);
         //console.log("moveRoomTile before: " + JSON.stringify(this.state.rooms));
@@ -357,6 +374,7 @@ var RoomSubList = React.createClass({
                     unread={ Unread.doesRoomHaveUnreadMessages(room) }
                     highlight={ room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites' }
                     isInvite={ self.props.label === 'Invites' }
+                    refreshSubList={ self._updateSubListCount }
                     incomingCall={ self.props.incomingCall && (self.props.incomingCall.roomId === room.roomId) ? self.props.incomingCall : null } />
             );
         });
@@ -365,10 +383,6 @@ var RoomSubList = React.createClass({
     _getHeaderJsx: function() {
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
 
-        var subListNotifications = this.roomNotificationCount();
-        var subListNotificationsCount = subListNotifications[0];
-        var subListNotificationsHighlight = subListNotifications[1];
-
         var roomCount = this.props.list.length > 0 ? this.props.list.length : '';
         var isTruncatable = this.props.list.length > TRUNCATE_AT;
         if (!this.state.hidden && this.state.capTruncate && isTruncatable) {
@@ -384,12 +398,12 @@ var RoomSubList = React.createClass({
 
         var badgeClasses = classNames({
             'mx_RoomSubList_badge': true,
-            'mx_RoomSubList_badgeHighlight': subListNotificationsHighlight,
+            'mx_RoomSubList_badgeHighlight': this.state.subListNotifHighlight,
         });
 
         var badge;
-        if (subListNotificationsCount > 0) {
-            badge = <div className={badgeClasses}>{subListNotificationsCount}</div>;
+        if (this.state.subListNotifCount > 0) {
+            badge = <div className={badgeClasses}>{this.state.subListNotifCount}</div>;
         }
 
         return (

From d2e8201d79c3188b558f82e2f83f77a31ac0c0cb Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 23 Aug 2016 13:24:02 +0100
Subject: [PATCH 11/28] Making sure that the sub list count always stays up to
 date, including when people read the outstanding notifications

---
 src/components/structures/RoomSubList.js | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 6ddea5606..e79f612de 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -82,15 +82,11 @@ var RoomSubList = React.createClass({
     },
 
     getInitialState: function() {
-        var subListNotifications = this.roomNotificationCount();
-
         return {
             hidden: this.props.startAsHidden || false,
             capTruncate: this.props.list.length > TRUNCATE_AT,
             truncateAt: this.props.list.length > TRUNCATE_AT ? TRUNCATE_AT : -1,
             sortedList: [],
-            subListNotifCount: subListNotifications[0],
-            subListNotifHighlight: subListNotifications[1],
         };
     },
 
@@ -260,11 +256,10 @@ var RoomSubList = React.createClass({
     },
 
     _updateSubListCount: function() {
-        var subListNotifications = this.roomNotificationCount();
-        this.setState({
-            subListNotifCount: subListNotifications[0],
-            subListNotifHighlight: subListNotifications[1]
-        });
+        // Force an update by setting the state to the current state
+        // Doing it this way rather than using forceUpdate(), so that the shouldComponentUpdate()
+        // method is honoured
+        this.setState(this.state);
     },
 
     moveRoomTile: function(room, atIndex) {
@@ -383,6 +378,10 @@ var RoomSubList = React.createClass({
     _getHeaderJsx: function() {
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
 
+        var subListNotifications = this.roomNotificationCount();
+        var subListNotifCount = subListNotifications[0];
+        var subListNotifHighlight = subListNotifications[1];
+
         var roomCount = this.props.list.length > 0 ? this.props.list.length : '';
         var isTruncatable = this.props.list.length > TRUNCATE_AT;
         if (!this.state.hidden && this.state.capTruncate && isTruncatable) {
@@ -398,12 +397,12 @@ var RoomSubList = React.createClass({
 
         var badgeClasses = classNames({
             'mx_RoomSubList_badge': true,
-            'mx_RoomSubList_badgeHighlight': this.state.subListNotifHighlight,
+            'mx_RoomSubList_badgeHighlight': subListNotifHighlight,
         });
 
         var badge;
-        if (this.state.subListNotifCount > 0) {
-            badge = <div className={badgeClasses}>{this.state.subListNotifCount}</div>;
+        if (subListNotifCount > 0) {
+            badge = <div className={badgeClasses}>{subListNotifCount}</div>;
         }
 
         return (

From 4cb1f8a2264ea440037f63945c83f523c05743b6 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Thu, 25 Aug 2016 19:46:15 +0100
Subject: [PATCH 12/28] Initial pass at sticky headers for the LHS panel
 section labels

---
 src/components/structures/RoomSubList.js          | 13 ++++++++-----
 .../css/vector-web/structures/RoomSubList.css     | 15 +++++++++++++++
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index e79f612de..3a6fecec1 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -79,6 +79,7 @@ var RoomSubList = React.createClass({
         incomingCall: React.PropTypes.object,
         onShowMoreRooms: React.PropTypes.func,
         searchFilter: React.PropTypes.string,
+        headerStack: React.PropTypes.func,
     },
 
     getInitialState: function() {
@@ -406,11 +407,13 @@ var RoomSubList = React.createClass({
         }
 
         return (
-            <div onClick={ this.onClick } className="mx_RoomSubList_label">
-                { this.props.collapsed ? '' : this.props.label }
-                <div className="mx_RoomSubList_roomCount">{roomCount}</div>
-                <div className={chevronClasses}></div>
-                {badge}
+            <div className="mx_RoomSubList_stickyContainer">
+                <div onClick={ this.onClick } className="mx_RoomSubList_label">
+                    { this.props.collapsed ? '' : this.props.label }
+                    <div className="mx_RoomSubList_roomCount">{roomCount}</div>
+                    <div className={chevronClasses}></div>
+                    {badge}
+                </div>
             </div>
         );
     },
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index a5ea7d144..cb80a8f76 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -20,18 +20,33 @@ limitations under the License.
     width: 100%;
 }
 
+.mx_RoomSubList_stickyContainer {
+    height: 29px;
+    position: relative;
+}
+
 .mx_RoomSubList_label {
     position: relative;
     text-transform: uppercase;
     color: #3d3b39;
     font-weight: 600;
     font-size: 12px;
+    width: 203px; /* padding + width = LHS Panel width */
+    height: 17px; /* padding + height = 29px, same as mx_RoomSubList_stickyContainer */
     padding-left: 16px; /* gutter */
     padding-right: 16px; /* gutter */
     padding-top: 6px;
     padding-bottom: 6px;
     cursor: pointer;
     background-color: rgba(118, 207, 166, 0.2);
+    z-index: 3;
+}
+
+.mx_RoomSubList_label.mx_RoomSubList_fixed {
+    position: fixed;
+    top: 0;
+    z-index: 2;
+    pointer-events: none;
 }
 
 .collapsed .mx_RoomSubList_label {

From a0236a9b7631a22305abfdb4b80545db69c0e4d3 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Fri, 26 Aug 2016 09:57:02 +0100
Subject: [PATCH 13/28] Code tidy-up and better name for label container class

---
 src/components/structures/RoomSubList.js                   | 3 +--
 src/skins/vector/css/vector-web/structures/RoomSubList.css | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 3a6fecec1..e1c65c981 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -79,7 +79,6 @@ var RoomSubList = React.createClass({
         incomingCall: React.PropTypes.object,
         onShowMoreRooms: React.PropTypes.func,
         searchFilter: React.PropTypes.string,
-        headerStack: React.PropTypes.func,
     },
 
     getInitialState: function() {
@@ -407,7 +406,7 @@ var RoomSubList = React.createClass({
         }
 
         return (
-            <div className="mx_RoomSubList_stickyContainer">
+            <div className="mx_RoomSubList_labelContainer">
                 <div onClick={ this.onClick } className="mx_RoomSubList_label">
                     { this.props.collapsed ? '' : this.props.label }
                     <div className="mx_RoomSubList_roomCount">{roomCount}</div>
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index cb80a8f76..8e3c228a8 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -20,7 +20,7 @@ limitations under the License.
     width: 100%;
 }
 
-.mx_RoomSubList_stickyContainer {
+.mx_RoomSubList_labelContainer {
     height: 29px;
     position: relative;
 }

From d2937c2aed9d0f5a2d49259081c1ca4723523d21 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Fri, 26 Aug 2016 11:02:12 +0100
Subject: [PATCH 14/28] Setting correct heights and widths for label and
 container

---
 src/skins/vector/css/vector-web/structures/RoomSubList.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index 8e3c228a8..bc7f15e68 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -22,6 +22,7 @@ limitations under the License.
 
 .mx_RoomSubList_labelContainer {
     height: 29px;
+    width: 235px; /* LHS Panel width */
     position: relative;
 }
 
@@ -50,7 +51,8 @@ limitations under the License.
 }
 
 .collapsed .mx_RoomSubList_label {
-    height: 16px;
+    height: 17px;
+    width: 28px; /* collapsed LHS Panel width */
 }
 
 .mx_RoomSubList_roomCount {

From 5467fd89d87d209f65fc3c8f60b2bd690a141736 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Fri, 26 Aug 2016 14:35:40 +0100
Subject: [PATCH 15/28] Getting click to not collapse expand when header stuck

---
 src/components/structures/RoomSubList.js      | 85 ++++++++++---------
 .../css/vector-web/structures/LeftPanel.css   |  1 +
 .../css/vector-web/structures/RoomSubList.css |  3 +-
 3 files changed, 49 insertions(+), 40 deletions(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index e1c65c981..f3122decb 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
+var ReactDOM = require('react-dom');
 var classNames = require('classnames');
 var DropTarget = require('react-dnd').DropTarget;
 var sdk = require('matrix-react-sdk')
@@ -114,46 +115,54 @@ var RoomSubList = React.createClass({
         });
     },
 
+    isHeaderStuck: function() {
+        var stuck = this.refs.header.dataset.stuck;
+        return stuck !== undefined && (stuck === "top" || stuck === "bottom");
+    },
+
     onClick: function(ev) {
-        // Collapse and truncation logic
-        var isHidden = false;
-        var isTruncatable = this.props.list.length > TRUNCATE_AT;
+        if (!this.isHeaderStuck()) {
+            // Collapse and truncation logic
+            var isHidden = false;
+            var isTruncatable = this.props.list.length > TRUNCATE_AT;
 
-        if (this.state.hidden && (this.state.capTruncate && isTruncatable)) {
-            isHidden = false;
-            this.setState({
-                hidden : isHidden,
-                capTruncate : true,
-                truncateAt : TRUNCATE_AT
-            });
-        } else if ((!this.state.hidden && this.state.capTruncate)
-                    || (this.state.hidden && (this.state.capTruncate && !isTruncatable)))
-        {
-            isHidden = false;
-            this.setState({
-                hidden : isHidden,
-                capTruncate : false,
-                truncateAt : -1
-            });
-        } else if (!this.state.hidden && !this.state.capTruncate) {
-            isHidden = true;
-            this.setState({
-                hidden : isHidden,
-                capTruncate : true,
-                truncateAt : TRUNCATE_AT
-            });
-        } else {
-            // Catch any weird states the system gets into
-            isHidden = false;
-            this.setState({
-                hidden : isHidden,
-                capTruncate : true,
-                truncateAt : TRUNCATE_AT
-            });
+            if (this.state.hidden && (this.state.capTruncate && isTruncatable)) {
+                isHidden = false;
+                this.setState({
+                    hidden : isHidden,
+                    capTruncate : true,
+                    truncateAt : TRUNCATE_AT
+                });
+            } else if ((!this.state.hidden && this.state.capTruncate)
+                        || (this.state.hidden && (this.state.capTruncate && !isTruncatable)))
+            {
+                isHidden = false;
+                this.setState({
+                    hidden : isHidden,
+                    capTruncate : false,
+                    truncateAt : -1
+                });
+            } else if (!this.state.hidden && !this.state.capTruncate) {
+                isHidden = true;
+                this.setState({
+                    hidden : isHidden,
+                    capTruncate : true,
+                    truncateAt : TRUNCATE_AT
+                });
+            } else {
+                // Catch any weird states the system gets into
+                isHidden = false;
+                this.setState({
+                    hidden : isHidden,
+                    capTruncate : true,
+                    truncateAt : TRUNCATE_AT
+                });
+            }
+
+            this.props.onShowMoreRooms();
         }
-
-        this.props.onShowMoreRooms();
-        this.props.onHeaderClick(isHidden);
+        ev.persist();
+        this.props.onHeaderClick(ev, isHidden);
     },
 
     tsOfNewestEvent: function(room) {
@@ -406,7 +415,7 @@ var RoomSubList = React.createClass({
         }
 
         return (
-            <div className="mx_RoomSubList_labelContainer">
+            <div className="mx_RoomSubList_labelContainer" ref="header">
                 <div onClick={ this.onClick } className="mx_RoomSubList_label">
                     { this.props.collapsed ? '' : this.props.label }
                     <div className="mx_RoomSubList_roomCount">{roomCount}</div>
diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css
index 316246cb3..e97746cbe 100644
--- a/src/skins/vector/css/vector-web/structures/LeftPanel.css
+++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css
@@ -49,6 +49,7 @@ limitations under the License.
     flex: 1 1 0;
 
     overflow-y: auto;
+    z-index: 3;
 }
 
 .mx_LeftPanel.collapsed .mx_BottomLeftMenu {
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index bc7f15e68..0751921da 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -40,14 +40,13 @@ limitations under the License.
     padding-bottom: 6px;
     cursor: pointer;
     background-color: rgba(118, 207, 166, 0.2);
-    z-index: 3;
 }
 
 .mx_RoomSubList_label.mx_RoomSubList_fixed {
     position: fixed;
     top: 0;
     z-index: 2;
-    pointer-events: none;
+    /* pointer-events: none; */
 }
 
 .collapsed .mx_RoomSubList_label {

From 5b9d3b119fe4d6e0d566f8414af72e5ab9318690 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Fri, 26 Aug 2016 15:08:47 +0100
Subject: [PATCH 16/28] Click on stuck header scrolls to that header, collapses
 expands for none stuck header

---
 src/components/structures/RoomSubList.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index f3122decb..cce68b187 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -160,9 +160,10 @@ var RoomSubList = React.createClass({
             }
 
             this.props.onShowMoreRooms();
+            this.props.onHeaderClick(isHidden);
+        } else {
+            this.props.onHeaderClick(isHidden, this.refs.header.dataset.originalPosition);
         }
-        ev.persist();
-        this.props.onHeaderClick(ev, isHidden);
     },
 
     tsOfNewestEvent: function(room) {

From 7ad3f4a5777de02066d7ba237a3e1dc2bd64827e Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Fri, 26 Aug 2016 15:53:31 +0100
Subject: [PATCH 17/28] Better comments

---
 src/components/structures/RoomSubList.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index cce68b187..488b54912 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -115,6 +115,7 @@ var RoomSubList = React.createClass({
         });
     },
 
+    // The dataset elements are added in the RoomList _initAndPositionStickyHeaders method
     isHeaderStuck: function() {
         var stuck = this.refs.header.dataset.stuck;
         return stuck !== undefined && (stuck === "top" || stuck === "bottom");
@@ -122,7 +123,7 @@ var RoomSubList = React.createClass({
 
     onClick: function(ev) {
         if (!this.isHeaderStuck()) {
-            // Collapse and truncation logic
+            // The header is not stuck, so the click is to be interpreted as collapse and truncation logic
             var isHidden = false;
             var isTruncatable = this.props.list.length > TRUNCATE_AT;
 
@@ -162,6 +163,7 @@ var RoomSubList = React.createClass({
             this.props.onShowMoreRooms();
             this.props.onHeaderClick(isHidden);
         } else {
+            // The header is stuck, so the click is to be interpreted as a scroll to the header
             this.props.onHeaderClick(isHidden, this.refs.header.dataset.originalPosition);
         }
     },

From 879c325b83909485471ad2271b21053d6bba0503 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 26 Aug 2016 16:08:15 +0100
Subject: [PATCH 18/28] DIE ZALGO

---
 src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css
index 9534d9f55..22a88458a 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css
@@ -50,6 +50,7 @@ limitations under the License.
     color: #454545;
     opacity: 0.5;
     font-size: 14px;
+    display: block; /* anti-zalgo, with overflow hidden */
     overflow-y: hidden;
     cursor: pointer;
     padding-left: 65px; /* left gutter */

From dc4459083f9d8533f17383bb6747866ca6aad369 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Fri, 26 Aug 2016 16:22:59 +0100
Subject: [PATCH 19/28] Fixed the LHS panel not collapsing but most of the
 content doing so

---
 src/skins/vector/css/vector-web/structures/RoomSubList.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index 0751921da..27467fb0d 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -54,6 +54,10 @@ limitations under the License.
     width: 28px; /* collapsed LHS Panel width */
 }
 
+.collapsed .mx_RoomSubList_labelContainer {
+    width: 28px; /* collapsed LHS Panel width */
+}
+
 .mx_RoomSubList_roomCount {
     display: inline-block;
     font-size: 12px;

From 8d4268754eda6ad774fbedd1e207c907af5257a1 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Sun, 28 Aug 2016 12:03:05 +0100
Subject: [PATCH 20/28] Fixed the stickies notification count to limit it to
 99+

---
 src/components/structures/RoomSubList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 488b54912..29d450643 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -414,7 +414,7 @@ var RoomSubList = React.createClass({
 
         var badge;
         if (subListNotifCount > 0) {
-            badge = <div className={badgeClasses}>{subListNotifCount}</div>;
+            badge = <div className={badgeClasses}>{subListNotifCount > 99 ? "99+" : subListNotifCount}</div>;
         }
 
         return (

From b782e7b9ad04e95ddcb00b15b180b4b3b40d93c4 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Sun, 28 Aug 2016 13:22:14 +0100
Subject: [PATCH 21/28] Bottom line of the scroll area (well the top line of
 the bottom left menu) is now tinted same colour as the section headers

---
 src/skins/vector/css/vector-web/structures/LeftPanel.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css
index e97746cbe..8d8e20938 100644
--- a/src/skins/vector/css/vector-web/structures/LeftPanel.css
+++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css
@@ -63,7 +63,7 @@ limitations under the License.
     -webkit-order: 3;
     order: 3;
 
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-top: 1px solid rgba(118, 207, 166, 0.2);
     margin-left: 16px; /* gutter */
     margin-right: 16px; /* gutter */
     -webkit-flex: 0 0 60px;

From 900b4b4cf848290763c0e20f549768f11a92d82d Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Sun, 28 Aug 2016 13:44:52 +0100
Subject: [PATCH 22/28] Added a border to the top of the sections to better
 seperate them when they are stuck together

---
 src/skins/vector/css/vector-web/structures/RoomSubList.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index 27467fb0d..3bc468fe5 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -40,6 +40,7 @@ limitations under the License.
     padding-bottom: 6px;
     cursor: pointer;
     background-color: rgba(118, 207, 166, 0.2);
+    border-top: solid 2px #eaf5f0;
 }
 
 .mx_RoomSubList_label.mx_RoomSubList_fixed {

From 4ae424f37a4012f5b2b07a81355593da750312da Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Sun, 28 Aug 2016 14:48:29 +0100
Subject: [PATCH 23/28] Removed the 2px border at top of labels to see if that
 has any effect on bottom stickies overscroll on matthews machine

---
 src/skins/vector/css/vector-web/structures/RoomSubList.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index 3bc468fe5..f3f7037f7 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -40,7 +40,7 @@ limitations under the License.
     padding-bottom: 6px;
     cursor: pointer;
     background-color: rgba(118, 207, 166, 0.2);
-    border-top: solid 2px #eaf5f0;
+    /* border-top: solid 2px #eaf5f0; */
 }
 
 .mx_RoomSubList_label.mx_RoomSubList_fixed {

From 93fff53e29ed3c7e14c6bf05503d0f0bf1581b03 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Sun, 28 Aug 2016 16:22:56 +0100
Subject: [PATCH 24/28] Added back the border spacing, as it wasn't the issue

---
 src/skins/vector/css/vector-web/structures/RoomSubList.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index f3f7037f7..3bc468fe5 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -40,7 +40,7 @@ limitations under the License.
     padding-bottom: 6px;
     cursor: pointer;
     background-color: rgba(118, 207, 166, 0.2);
-    /* border-top: solid 2px #eaf5f0; */
+    border-top: solid 2px #eaf5f0;
 }
 
 .mx_RoomSubList_label.mx_RoomSubList_fixed {

From f2e8607433d0afdda70488c1c3f06cc68349fba4 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Sun, 28 Aug 2016 19:14:54 +0100
Subject: [PATCH 25/28] Over scroll of bottom sticky headers should be fixed,
 and expansion of hidden stuck headers should now work

---
 src/components/structures/RoomSubList.js           | 14 ++++++++++----
 .../css/matrix-react-sdk/views/rooms/RoomList.css  |  5 +++++
 .../vector/css/vector-web/structures/LeftPanel.css |  1 -
 .../css/vector-web/structures/RoomSubList.css      |  2 +-
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 29d450643..81d851dd1 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -115,15 +115,21 @@ var RoomSubList = React.createClass({
         });
     },
 
+    // The header is collapsable if it is hidden or not stuck
     // The dataset elements are added in the RoomList _initAndPositionStickyHeaders method
-    isHeaderStuck: function() {
+    isCollapsableOnClick: function() {
         var stuck = this.refs.header.dataset.stuck;
-        return stuck !== undefined && (stuck === "top" || stuck === "bottom");
+        var topBottomSticky = this.refs.header.dataset.topBottomSticky;
+        if (this.state.hidden || stuck === undefined || stuck === "none") {
+            return true;
+        } else {
+            return false;
+        }
     },
 
     onClick: function(ev) {
-        if (!this.isHeaderStuck()) {
-            // The header is not stuck, so the click is to be interpreted as collapse and truncation logic
+        if (this.isCollapsableOnClick()) {
+            // The header iscCollapsable, so the click is to be interpreted as collapse and truncation logic
             var isHidden = false;
             var isTruncatable = this.props.list.length > TRUNCATE_AT;
 
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
index a339d80f9..06ac885c2 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
@@ -32,3 +32,8 @@ limitations under the License.
     overflow-x: hidden ! important;
     overflow-y: scroll ! important;
 }
+
+/* Make sure the scrollbar is above the sticky headers from RoomList */
+.mx_RoomList_scrollbar .gm-scrollbar.-vertical {
+    z-index: 3;
+}
diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css
index 8d8e20938..47f286715 100644
--- a/src/skins/vector/css/vector-web/structures/LeftPanel.css
+++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css
@@ -49,7 +49,6 @@ limitations under the License.
     flex: 1 1 0;
 
     overflow-y: auto;
-    z-index: 3;
 }
 
 .mx_LeftPanel.collapsed .mx_BottomLeftMenu {
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index 3bc468fe5..2c1c49a38 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -21,7 +21,7 @@ limitations under the License.
 }
 
 .mx_RoomSubList_labelContainer {
-    height: 29px;
+    height: 31px; /* mx_RoomSubList_label height including border */
     width: 235px; /* LHS Panel width */
     position: relative;
 }

From ff3ad47be72155e7952eec770ff15d36434c8381 Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 30 Aug 2016 10:45:59 +0100
Subject: [PATCH 26/28] Code clean up, and better comments, along with z-index
 fixes for scrollbar and avatar menu

---
 src/components/structures/RoomSubList.js          | 15 +++++----------
 .../css/matrix-react-sdk/views/rooms/RoomList.css |  2 +-
 .../css/vector-web/structures/LeftPanel.css       |  1 +
 .../css/vector-web/structures/RoomSubList.css     |  2 +-
 4 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 81d851dd1..4817218be 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -119,7 +119,6 @@ var RoomSubList = React.createClass({
     // The dataset elements are added in the RoomList _initAndPositionStickyHeaders method
     isCollapsableOnClick: function() {
         var stuck = this.refs.header.dataset.stuck;
-        var topBottomSticky = this.refs.header.dataset.topBottomSticky;
         if (this.state.hidden || stuck === undefined || stuck === "none") {
             return true;
         } else {
@@ -249,11 +248,8 @@ var RoomSubList = React.createClass({
 
     roomNotificationCount: function() {
         var self = this;
-        var subListCount = 0;
-        var subListHighlight = false;
-        var cli = MatrixClientPeg.get();
 
-        this.props.list.map(function(room) {
+        return this.props.list.reduce(function(result, room) {
             var roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
             var highlight = room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites';
             var notificationCount = room.getUnreadNotificationCount();
@@ -263,14 +259,13 @@ var RoomSubList = React.createClass({
             const badges = notifBadges || mentionBadges;
 
             if (badges) {
-                subListCount += notificationCount;
+                result[0] += notificationCount;
                 if (highlight) {
-                    subListHighlight = true;
+                    result[1] = true;
                 }
             }
-        });
-
-        return [subListCount, subListHighlight];
+            return result;
+        }, [0, false]);
     },
 
     _updateSubListCount: function() {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
index 06ac885c2..4dcda646f 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
@@ -35,5 +35,5 @@ limitations under the License.
 
 /* Make sure the scrollbar is above the sticky headers from RoomList */
 .mx_RoomList_scrollbar .gm-scrollbar.-vertical {
-    z-index: 3;
+    z-index: 5;
 }
diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css
index 47f286715..fb023ffea 100644
--- a/src/skins/vector/css/vector-web/structures/LeftPanel.css
+++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css
@@ -49,6 +49,7 @@ limitations under the License.
     flex: 1 1 0;
 
     overflow-y: auto;
+    z-index: 5;
 }
 
 .mx_LeftPanel.collapsed .mx_BottomLeftMenu {
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index 2c1c49a38..4d9b0668f 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -46,7 +46,7 @@ limitations under the License.
 .mx_RoomSubList_label.mx_RoomSubList_fixed {
     position: fixed;
     top: 0;
-    z-index: 2;
+    z-index: 4;
     /* pointer-events: none; */
 }
 

From 45a813b7953a2a2c8e10f700797099d7f00777af Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 30 Aug 2016 11:56:16 +0100
Subject: [PATCH 27/28] Fixed historical scetion not scrolling up when clicked
 if not hidden and stuck

---
 src/components/structures/RoomSubList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 4fd2618d6..2565bd1ff 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -169,7 +169,7 @@ var RoomSubList = React.createClass({
             this.props.onHeaderClick(isHidden);
         } else {
             // The header is stuck, so the click is to be interpreted as a scroll to the header
-            this.props.onHeaderClick(isHidden, this.refs.header.dataset.originalPosition);
+            this.props.onHeaderClick(this.state.hidden, this.refs.header.dataset.originalPosition);
         }
     },
 

From b91a0dd7a5f195e1b5075134d5a8e9b2bce5ac8b Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Tue, 30 Aug 2016 12:14:32 +0100
Subject: [PATCH 28/28] Increased truncation limit to 10

---
 src/components/structures/RoomSubList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 2565bd1ff..63b340563 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -29,7 +29,7 @@ var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs');
 // turn this on for drop & drag console debugging galore
 var debug = false;
 
-const TRUNCATE_AT = 6;
+const TRUNCATE_AT = 10;
 
 var roomListTarget = {
     canDrop: function() {