From 7c405f673a6c906e10ea9698426696b28908f400 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 18 Jun 2015 14:35:17 +0100
Subject: [PATCH] Highlight rooms with unread messages

---
 css/molecules/RoomTile.css | 12 ++++++++----
 src/molecules/RoomTile.js  |  3 ++-
 src/organisms/RoomList.js  | 38 ++++++++++++++++++++++++++++++++++++--
 3 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/css/molecules/RoomTile.css b/css/molecules/RoomTile.css
index babeedaf27..a762b1cb87 100644
--- a/css/molecules/RoomTile.css
+++ b/css/molecules/RoomTile.css
@@ -13,10 +13,6 @@
     border: 2px inset #eee;
 }
 
-.mx_RoomTile:hover {
-    background-color: #aad;
-}
-
 .mx_RoomTile_name {
     font-size: 80%;
     font-weight: bold;
@@ -26,3 +22,11 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+.mx_RoomTile.unread {
+    background-color: #66e;
+}
+
+.mx_RoomTile:hover {
+    background-color: #ff8;
+}
diff --git a/src/molecules/RoomTile.js b/src/molecules/RoomTile.js
index 9d75726349..54e59147f0 100644
--- a/src/molecules/RoomTile.js
+++ b/src/molecules/RoomTile.js
@@ -14,7 +14,8 @@ module.exports = React.createClass({
     render: function() {
         var classes = classNames({
             'mx_RoomTile': true,
-            'selected': this.props.selected
+            'selected': this.props.selected,
+            'unread': this.props.unread
         });
         return (
             <div className={classes} onClick={this.onClick}>
diff --git a/src/organisms/RoomList.js b/src/organisms/RoomList.js
index 45dd700156..20c8a162e3 100644
--- a/src/organisms/RoomList.js
+++ b/src/organisms/RoomList.js
@@ -5,11 +5,40 @@ var ComponentBroker = require('../ComponentBroker');
 
 var RoomTile = ComponentBroker.get("molecules/RoomTile");
 
+
 module.exports = React.createClass({
     componentWillMount: function() {
         var cli = MatrixClientPeg.get();
+        cli.on("Room.timeline", this.onRoomTimeline);
 
-        this.setState({roomList: cli.getRooms()});
+        this.setState({
+            roomList: cli.getRooms(),
+            activityMap: {}
+        });
+    },
+
+    componentWillUnmount: function() {
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
+        }
+    },
+
+    componentWillReceiveProps: function() {
+        this.state.activityMap[this.props.selectedRoom] = undefined;
+        this.setState({
+            activityMap: this.state.activityMap
+        });
+    },
+
+    onRoomTimeline: function(ev, room, toStartOfTimeline) {
+        if (room.roomId == this.props.selectedRoom) return;
+
+        // obviously this won't deep copy but we this shouldn't be necessary
+        var amap = this.state.activityMap;
+        amap[room.roomId] = 1;
+        this.setState({
+            roomMap: amap
+        });
     },
 
     makeRoomTiles: function() {
@@ -17,7 +46,12 @@ module.exports = React.createClass({
         return this.state.roomList.map(function(room) {
             var selected = room.roomId == that.props.selectedRoom;
             return (
-                <RoomTile room={room} key={room.roomId} selected={selected} />
+                <RoomTile
+                    room={room}
+                    key={room.roomId}
+                    selected={selected}
+                    unread={that.state.activityMap[room.roomId] === 1}
+                />
             );
         });
     },