home/recents: show the last message of each message

3 files changed, 102 insertions, 8 deletions

diff --git a/webclient/app.css b/webclient/app.css
index dfa17fae62..bc23f76f00 100644
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -342,6 +342,51 @@ h1 {
     top: 0;
 }
 
+/*** Recents ***/
+.recentsTable {
+    max-width: 480px;
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+}
+
+.recentsTable tr {
+    width: 100%;
+}
+.recentsTable td {
+    vertical-align: text-top;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.recentsRoom {
+    cursor: pointer;
+}
+
+.recentsRoom:hover {
+    background-color: #f8f8ff;
+}
+
+.recentsRoomName {
+    font-size: 16px;
+    padding-top: 7px;
+    width: auto;
+}
+
+.recentsRoomSummaryTS {
+    color: #888;
+    font-size: 12px;
+    width: 7em;
+    text-align: right;
+}
+
+.recentsRoomSummary {
+    color: #888;
+    font-size: 12px;
+    padding-bottom: 5px;
+}
+
 /*** Profile ***/
 
 .profile-avatar {
diff --git a/webclient/home/home-controller.js b/webclient/home/home-controller.js
index 3be7fca909..f0c2ccea2f 100644
--- a/webclient/home/home-controller.js
+++ b/webclient/home/home-controller.js
@@ -86,7 +86,9 @@ angular.module('HomeController', ['matrixService', 'mFileInput', 'mFileUpload',
                     $scope.rooms[data[i].room_id] = data[i];
 
                     // Create a shortcut for the last message of this room
-                    $scope.rooms[data[i].room_id].lastMsg = data[i].messages.chunk[0];
+                    if (data[i].messages && data[i].messages.chunk && data[i].messages.chunk[0]) {
+                        $scope.rooms[data[i].room_id].lastMsg = data[i].messages.chunk[0];
+                    }
                 }
 
                 var presence = response.data.presence;
diff --git a/webclient/home/home.html b/webclient/home/home.html
index 4084f4c388..49eb56a602 100644
--- a/webclient/home/home.html
+++ b/webclient/home/home.html
@@ -23,13 +23,60 @@
         </form>
     </div>
     
-    <h3>My rooms</h3>
-    
-    <div class="rooms" ng-repeat="(rm_id, room) in rooms">
-        <div>
-            <a href="#/room/{{ room.room_alias ? room.room_alias : rm_id }}" >{{ room.room_display_name }}</a> {{room.membership === 'invite' ? ' (invited)' : ''}}
-        </div>
-    </div>
+    <h3>Recents</h3>
+
+    <div class="recentsTableWrapper">
+    <table class="recentsTable">
+        <tbody ng-repeat="(rm_id, room) in rooms" ng-click="goToPage('room/' + (room.room_alias ? room.room_alias : rm_id) )" class ="recentsRoom" >
+            <tr>
+                <td class="recentsRoomName">
+                    {{ room.room_display_name }}
+                </td>
+                <td class="recentsRoomSummaryTS">
+                    {{ (room.lastMsg.ts) | date:'MMM d HH:mm' }}
+                </td>
+            </tr>
+
+            <tr>
+                <td colspan="2" class="recentsRoomSummary">
+
+                    <div ng-show="room.membership === 'invite'" >
+                        {{ room.inviter }} invited you
+                    </div>
+
+                    <div ng-hide="room.membership === 'invite'" ng-switch="room.lastMsg.type" >
+                         <div ng-switch-when="m.room.member">
+                            {{ room.lastMsg.user_id }}
+                            {{ {"join": "joined", "leave": "left", "invite": "invited"}[room.lastMsg.content.membership] }}
+                            {{ room.lastMsg.content.membership === "invite" ? (room.lastMsg.state_key || '') : '' }}
+                        </div>
+
+                        <div ng-switch-when="m.room.message">
+                            <div ng-switch="room.lastMsg.content.msgtype">
+                                <div ng-switch-when="m.text">
+                                    {{ room.lastMsg.user_id }} :
+                                    <span ng-bind-html="(room.lastMsg.content.body) | linky:'_blank'">
+                                    </span>
+                                </div>
+
+                                <div ng-switch-when="m.image">
+                                    {{ room.lastMsg.user_id }} sent an image
+                                </div>
+
+                                <div ng-switch-default>
+                                    {{ room.lastMsg.content }}
+                                </div>
+                            </div>
+                        </div>
+
+                        <div ng-switch-default>
+                            {{ room.lastMsg }}
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        </tbody>
+    </table>
     <br/>
 
     <h3>Public rooms</h3>