Merge branch 'develop' into new-guest-access

Conflicts:
	src/component-index.js

src/components/views/dialogs/BaseDialog.js

@@ -57,20 +57,25 @@ export default React.createClass({
         }
     },
 
+    // Don't let key{down,press} events escape the modal. Consume them all.
+    _eatKeyEvent: function(e) {
+        e.stopPropagation();
+    },
+    
     // Must be when the key is released (and not pressed) otherwise componentWillUnmount
     // will focus another element which will receive future key events
     _onKeyUp: function(e) {
         if (e.keyCode === KeyCode.ESCAPE) {
-            e.stopPropagation();
             e.preventDefault();
             this.props.onFinished();
         } else if (e.keyCode === KeyCode.ENTER) {
             if (this.props.onEnterPressed) {
-                e.stopPropagation();
                 e.preventDefault();
                 this.props.onEnterPressed(e);
             }
         }
+        // Consume all keyup events while Modal is open
+        e.stopPropagation();
     },
 
     _onCancelClick: function(e) {
@@ -81,7 +86,11 @@ export default React.createClass({
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
         return (
-            <div onKeyUp={this._onKeyUp} className={this.props.className}>
+            <div onKeyUp={this._onKeyUp}
+                 onKeyDown={this._eatKeyEvent}
+                 onKeyPress={this._eatKeyEvent}
+                 className={this.props.className}
+            >
                 <AccessibleButton onClick={this._onCancelClick}
                     className="mx_Dialog_cancelButton"
                 >

src/components/views/elements/ActionButton.js

@@ -0,0 +1,80 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import AccessibleButton from './AccessibleButton';
+import dis from '../../../dispatcher';
+import sdk from '../../../index';
+
+export default React.createClass({
+    displayName: 'RoleButton',
+
+    propTypes: {
+        size: PropTypes.string,
+        tooltip: PropTypes.bool,
+        action: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired,
+        iconPath: PropTypes.string.isRequired,
+    },
+
+    getDefaultProps: function() {
+        return {
+            size: "25",
+            tooltip: false,
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            showTooltip: false,
+        };
+    },
+
+    _onClick: function(ev) {
+        ev.stopPropagation();
+        dis.dispatch({action: this.props.action});
+    },
+
+    _onMouseEnter: function() {
+        if (this.props.tooltip) this.setState({showTooltip: true});
+    },
+
+    _onMouseLeave: function() {
+        this.setState({showTooltip: false});
+    },
+
+    render: function() {
+        const TintableSvg = sdk.getComponent("elements.TintableSvg");
+
+        let tooltip;
+        if (this.state.showTooltip) {
+            const RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
+            tooltip = <RoomTooltip className="mx_RoleButton_tooltip" label={this.props.label} />;
+        }
+
+        return (
+            <AccessibleButton className="mx_RoleButton"
+                onClick={this._onClick}
+                onMouseEnter={this._onMouseEnter}
+                onMouseLeave={this._onMouseLeave}
+            >
+                <TintableSvg src={this.props.iconPath} width={this.props.size} height={this.props.size} />
+                {tooltip}
+            </AccessibleButton>
+        );
+    }
+});

src/components/views/elements/AddressSelector.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -138,7 +139,7 @@ export default React.createClass({
                         onClick={this.onClick.bind(this, i)}
                         onMouseEnter={this.onMouseEnter.bind(this, i)}
                         onMouseLeave={this.onMouseLeave}
-                        key={this.props.addressList[i].userId}
+                        key={this.props.addressList[i].addressType + "/" + this.props.addressList[i].address}
                         ref={(ref) => { this.addressListElement = ref; }}
                     >
                         <AddressTile address={this.props.addressList[i]} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />

src/components/views/elements/CreateRoomButton.js

@@ -0,0 +1,38 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import sdk from '../../../index';
+import PropTypes from 'prop-types';
+
+const CreateRoomButton = function(props) {
+    const ActionButton = sdk.getComponent('elements.ActionButton');
+    return (
+        <ActionButton action="view_create_room"
+            label="Create new room"
+            iconPath="img/icons-create-room.svg"
+            size={props.size}
+            tooltip={props.tooltip}
+        />
+    );
+};
+
+CreateRoomButton.propTypes = {
+    size: PropTypes.string,
+    tooltip: PropTypes.bool,
+};
+
+export default CreateRoomButton;

src/components/views/elements/HomeButton.js

@@ -0,0 +1,38 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import sdk from '../../../index';
+import PropTypes from 'prop-types';
+
+const HomeButton = function(props) {
+    const ActionButton = sdk.getComponent('elements.ActionButton');
+    return (
+        <ActionButton action="view_home_page"
+            label="Welcome page"
+            iconPath="img/icons-home.svg"
+            size={props.size}
+            tooltip={props.tooltip}
+        />
+    );
+};
+
+HomeButton.propTypes = {
+    size: PropTypes.string,
+    tooltip: PropTypes.bool,
+};
+
+export default HomeButton;

src/components/views/elements/MemberEventListSummary.js

@@ -369,6 +369,7 @@ module.exports = React.createClass({
 
     render: function() {
         const eventsToRender = this.props.events;
+        const eventIds = eventsToRender.map(e => e.getId()).join(',');
         const fewEvents = eventsToRender.length < this.props.threshold;
         const expanded = this.state.expanded || fewEvents;
 
@@ -379,7 +380,7 @@ module.exports = React.createClass({
 
         if (fewEvents) {
             return (
-                <div className="mx_MemberEventListSummary">
+                <div className="mx_MemberEventListSummary" data-scroll-tokens={eventIds}>
                     {expandedEvents}
                 </div>
             );
@@ -437,7 +438,7 @@ module.exports = React.createClass({
         );
 
         return (
-            <div className="mx_MemberEventListSummary">
+            <div className="mx_MemberEventListSummary" data-scroll-tokens={eventIds}>
                 {toggleButton}
                 {summaryContainer}
                 {expanded ? <div className="mx_MemberEventListSummary_line">&nbsp;</div> : null}

src/components/views/elements/RoomDirectoryButton.js

@@ -0,0 +1,38 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import sdk from '../../../index';
+import PropTypes from 'prop-types';
+
+const RoomDirectoryButton = function(props) {
+    const ActionButton = sdk.getComponent('elements.ActionButton');
+    return (
+        <ActionButton action="view_room_directory"
+            label="Room directory"
+            iconPath="img/icons-directory.svg"
+            size={props.size}
+            tooltip={props.tooltip}
+        />
+    );
+};
+
+RoomDirectoryButton.propTypes = {
+    size: PropTypes.string,
+    tooltip: PropTypes.bool,
+};
+
+export default RoomDirectoryButton;

src/components/views/elements/SettingsButton.js

@@ -0,0 +1,38 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import sdk from '../../../index';
+import PropTypes from 'prop-types';
+
+const SettingsButton = function(props) {
+    const ActionButton = sdk.getComponent('elements.ActionButton');
+    return (
+        <ActionButton action="view_user_settings"
+            label="Settings"
+            iconPath="img/icons-settings.svg"
+            size={props.size}
+            tooltip={props.tooltip}
+        />
+    );
+};
+
+SettingsButton.propTypes = {
+    size: PropTypes.string,
+    tooltip: PropTypes.bool,
+};
+
+export default SettingsButton;

src/components/views/elements/StartChatButton.js

@@ -0,0 +1,38 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import sdk from '../../../index';
+import PropTypes from 'prop-types';
+
+const StartChatButton = function(props) {
+    const ActionButton = sdk.getComponent('elements.ActionButton');
+    return (
+        <ActionButton action="view_create_chat"
+            label="Start chat"
+            iconPath="img/icons-people.svg"
+            size={props.size}
+            tooltip={props.tooltip}
+        />
+    );
+};
+
+StartChatButton.propTypes = {
+    size: PropTypes.string,
+    tooltip: PropTypes.bool,
+};
+
+export default StartChatButton;

src/components/views/rooms/LinkPreviewWidget.js

@@ -100,7 +100,9 @@ module.exports = React.createClass({
 
     render: function() {
         var p = this.state.preview;
-        if (!p) return <div/>;
+        if (!p || Object.keys(p).length === 0) {
+            return <div/>;
+        }
 
         // FIXME: do we want to factor out all image displaying between this and MImageBody - especially for lightboxing?
         var image = p["og:image"];

src/components/views/rooms/MessageComposer.js

@@ -43,6 +43,7 @@ export default class MessageComposer extends React.Component {
         this.onToggleMarkdownClicked = this.onToggleMarkdownClicked.bind(this);
         this.onInputStateChanged = this.onInputStateChanged.bind(this);
         this.onEvent = this.onEvent.bind(this);
+        this.onPageUnload = this.onPageUnload.bind(this);
 
         this.state = {
             autocompleteQuery: '',
@@ -64,12 +65,21 @@ export default class MessageComposer extends React.Component {
         // marked as encrypted.
         // XXX: fragile as all hell - fixme somehow, perhaps with a dedicated Room.encryption event or something.
         MatrixClientPeg.get().on("event", this.onEvent);
+
+        window.addEventListener('beforeunload', this.onPageUnload);
     }
 
     componentWillUnmount() {
         if (MatrixClientPeg.get()) {
             MatrixClientPeg.get().removeListener("event", this.onEvent);
         }
+        window.removeEventListener('beforeunload', this.onPageUnload);
+    }
+
+    onPageUnload(event) {
+        if (this.messageComposerInput) {
+            this.messageComposerInput.sentHistory.saveLastTextEntry();
+        }
     }
 
     onEvent(event) {

src/components/views/rooms/RoomList.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -28,8 +29,16 @@ var Rooms = require('../../../Rooms');
 import DMRoomMap from '../../../utils/DMRoomMap';
 var Receipt = require('../../../utils/Receipt');
 var constantTimeDispatcher = require('../../../ConstantTimeDispatcher');
+import AccessibleButton from '../elements/AccessibleButton';
 
-var HIDE_CONFERENCE_CHANS = true;
+const HIDE_CONFERENCE_CHANS = true;
+
+const VERBS = {
+    'm.favourite': 'favourite',
+    'im.vector.fake.direct': 'tag direct chat',
+    'im.vector.fake.recent': 'restore',
+    'm.lowpriority': 'demote',
+};
 
 module.exports = React.createClass({
     displayName: 'RoomList',
@@ -53,6 +62,7 @@ module.exports = React.createClass({
     getInitialState: function() {
         return {
             isLoadingLeftRooms: false,
+            totalRoomCount: null,
             lists: {},
             incomingCall: null,
         };
@@ -73,8 +83,7 @@ module.exports = React.createClass({
         // lookup for which lists a given roomId is currently in.
         this.listsForRoomId = {};
 
-        var s = this.getRoomLists();
-        this.setState(s);
+        this.refreshRoomList();
 
         // order of the sublists
         //this.listOrder = [];
@@ -97,7 +106,7 @@ module.exports = React.createClass({
             if (this.props.selectedRoom) {
                 constantTimeDispatcher.dispatch(
                     "RoomTile.select", this.props.selectedRoom, {}
-                );            
+                );
             }
             constantTimeDispatcher.dispatch(
                 "RoomTile.select", nextProps.selectedRoom, { selected: true }
@@ -265,7 +274,7 @@ module.exports = React.createClass({
     },
 
     onRoomStateMember: function(ev, state, member) {
-        if (ev.getStateKey() === MatrixClientPeg.get().credentials.userId && 
+        if (ev.getStateKey() === MatrixClientPeg.get().credentials.userId &&
             ev.getPrevContent() && ev.getPrevContent().membership === "invite")
         {
             this._delayedRefreshRoomList();
@@ -290,7 +299,7 @@ module.exports = React.createClass({
             this._delayedRefreshRoomList();
         }
         else if (ev.getType() == 'm.push_rules') {
-            this._delayedRefreshRoomList();            
+            this._delayedRefreshRoomList();
         }
     },
 
@@ -317,21 +326,29 @@ module.exports = React.createClass({
         // any changes to it incrementally, updating the appropriate sublists
         // as needed.
         // Alternatively we'd do something magical with Immutable.js or similar.
-        this.setState(this.getRoomLists());
+        const lists = this.getRoomLists();
+        let totalRooms = 0;
+        for (const l of Object.values(lists)) {
+            totalRooms += l.length;
+        }
+        this.setState({
+            lists: this.getRoomLists(),
+            totalRoomCount: totalRooms,
+        });
         
         // this._lastRefreshRoomListTs = Date.now();
     },
 
     getRoomLists: function() {
         var self = this;
-        var s = { lists: {} };
+        const lists = {};
 
-        s.lists["im.vector.fake.invite"] = [];
-        s.lists["m.favourite"] = [];
-        s.lists["im.vector.fake.recent"] = [];
-        s.lists["im.vector.fake.direct"] = [];
-        s.lists["m.lowpriority"] = [];
-        s.lists["im.vector.fake.archived"] = [];
+        lists["im.vector.fake.invite"] = [];
+        lists["m.favourite"] = [];
+        lists["im.vector.fake.recent"] = [];
+        lists["im.vector.fake.direct"] = [];
+        lists["m.lowpriority"] = [];
+        lists["im.vector.fake.archived"] = [];
 
         this.listsForRoomId = {};
         var otherTagNames = {};
@@ -341,7 +358,7 @@ module.exports = React.createClass({
         MatrixClientPeg.get().getRooms().forEach(function(room) {
             const me = room.getMember(MatrixClientPeg.get().credentials.userId);
             if (!me) return;
-            
+
             // console.log("room = " + room.name + ", me.membership = " + me.membership +
             //             ", sender = " + me.events.member.getSender() +
             //             ", target = " + me.events.member.getStateKey() +
@@ -353,7 +370,7 @@ module.exports = React.createClass({
 
             if (me.membership == "invite") {
                 self.listsForRoomId[room.roomId].push("im.vector.fake.invite");
-                s.lists["im.vector.fake.invite"].push(room);
+                lists["im.vector.fake.invite"].push(room);
             }
             else if (HIDE_CONFERENCE_CHANS && Rooms.isConfCallRoom(room, me, self.props.ConferenceHandler)) {
                 // skip past this room & don't put it in any lists
@@ -366,8 +383,8 @@ module.exports = React.createClass({
                 if (tagNames.length) {
                     for (var i = 0; i < tagNames.length; i++) {
                         var tagName = tagNames[i];
-                        s.lists[tagName] = s.lists[tagName] || [];
-                        s.lists[tagName].push(room);
+                        lists[tagName] = lists[tagName] || [];
+                        lists[tagName].push(room);
                         self.listsForRoomId[room.roomId].push(tagName);
                         otherTagNames[tagName] = 1;
                     }
@@ -375,67 +392,26 @@ module.exports = React.createClass({
                 else if (dmRoomMap.getUserIdForRoomId(room.roomId)) {
                     // "Direct Message" rooms (that we're still in and that aren't otherwise tagged)
                     self.listsForRoomId[room.roomId].push("im.vector.fake.direct");
-                    s.lists["im.vector.fake.direct"].push(room);
+                    lists["im.vector.fake.direct"].push(room);
                 }
                 else {
                     self.listsForRoomId[room.roomId].push("im.vector.fake.recent");
-                    s.lists["im.vector.fake.recent"].push(room);
+                    lists["im.vector.fake.recent"].push(room);
                 }
             }
             else if (me.membership === "leave") {
                 self.listsForRoomId[room.roomId].push("im.vector.fake.archived");
-                s.lists["im.vector.fake.archived"].push(room);
+                lists["im.vector.fake.archived"].push(room);
             }
             else {
                 console.error("unrecognised membership: " + me.membership + " - this should never happen");
             }
         });
 
-        if (s.lists["im.vector.fake.direct"].length == 0 &&
-            MatrixClientPeg.get().getAccountData('m.direct') === undefined &&
-            !MatrixClientPeg.get().isGuest())
-        {
-            // scan through the 'recents' list for any rooms which look like DM rooms
-            // and make them DM rooms
-            const oldRecents = s.lists["im.vector.fake.recent"];
-            s.lists["im.vector.fake.recent"] = [];
-
-            for (const room of oldRecents) {
-                const me = room.getMember(MatrixClientPeg.get().credentials.userId);
-
-                if (me && Rooms.looksLikeDirectMessageRoom(room, me)) {
-                    self.listsForRoomId[room.roomId].push("im.vector.fake.direct");
-                    s.lists["im.vector.fake.direct"].push(room);
-                } else {
-                    self.listsForRoomId[room.roomId].push("im.vector.fake.recent");
-                    s.lists["im.vector.fake.recent"].push(room);
-                }
-            }
-
-            // save these new guessed DM rooms into the account data
-            const newMDirectEvent = {};
-            for (const room of s.lists["im.vector.fake.direct"]) {
-                const me = room.getMember(MatrixClientPeg.get().credentials.userId);
-                const otherPerson = Rooms.getOnlyOtherMember(room, me);
-                if (!otherPerson) continue;
-
-                const roomList = newMDirectEvent[otherPerson.userId] || [];
-                roomList.push(room.roomId);
-                newMDirectEvent[otherPerson.userId] = roomList;
-            }
-
-            console.warn("Resetting room DM state to be " + JSON.stringify(newMDirectEvent));
-
-            // if this fails, fine, we'll just do the same thing next time we get the room lists
-            MatrixClientPeg.get().setAccountData('m.direct', newMDirectEvent).done();
-        }
-
-        //console.log("calculated new roomLists; im.vector.fake.recent = " + s.lists["im.vector.fake.recent"]);
-
         // we actually apply the sorting to this when receiving the prop in RoomSubLists.
 
         // we'll need this when we get to iterating through lists programatically - e.g. ctrl-shift-up/down
-/*        
+/*
         this.listOrder = [
             "im.vector.fake.invite",
             "m.favourite",
@@ -449,7 +425,7 @@ module.exports = React.createClass({
         ];
 */
 
-        return s;
+        return lists;
     },
 
     _getScrollNode: function() {
@@ -479,6 +455,7 @@ module.exports = React.createClass({
         var incomingCallBox = document.getElementById("incomingCallBox");
         if (incomingCallBox && incomingCallBox.parentElement) {
             var scrollArea = this._getScrollNode();
+            if (!scrollArea) return;
             // Use the offset of the top of the scroll area from the window
             // as this is used to calculate the CSS fixed top position for the stickies
             var scrollAreaOffset = scrollArea.getBoundingClientRect().top + window.pageYOffset;
@@ -502,6 +479,7 @@ module.exports = React.createClass({
     // properly through React
     _initAndPositionStickyHeaders: function(initialise, scrollToPosition) {
         var scrollArea = this._getScrollNode();
+        if (!scrollArea) return;
         // Use the offset of the top of the scroll area from the window
         // as this is used to calculate the CSS fixed top position for the stickies
         var scrollAreaOffset = scrollArea.getBoundingClientRect().top + window.pageYOffset;
@@ -599,6 +577,58 @@ module.exports = React.createClass({
         this.refs.gemscroll.forceUpdate();
     },
 
+    _getEmptyContent: function(section) {
+        const RoomDropTarget = sdk.getComponent('rooms.RoomDropTarget');
+
+        if (this.props.collapsed) {
+            return <RoomDropTarget label="" />;
+        }
+
+        const StartChatButton = sdk.getComponent('elements.StartChatButton');
+        const RoomDirectoryButton = sdk.getComponent('elements.RoomDirectoryButton');
+        const CreateRoomButton = sdk.getComponent('elements.CreateRoomButton');
+        if (this.state.totalRoomCount === 0) {
+            const TintableSvg = sdk.getComponent('elements.TintableSvg');
+            switch (section) {
+                case 'im.vector.fake.direct':
+                    return <div className="mx_RoomList_emptySubListTip">
+                        Press
+                        <StartChatButton size="16" />
+                        to start a chat with someone
+                    </div>;
+                case 'im.vector.fake.recent':
+                    return <div className="mx_RoomList_emptySubListTip">
+                        You're not in any rooms yet! Press
+                        <CreateRoomButton size="16" />
+                        to make a room or
+                        <RoomDirectoryButton size="16" />
+                        to browse the directory
+                    </div>;
+            }
+        }
+
+        const labelText = 'Drop here to ' + (VERBS[section] || 'tag ' + section);
+
+        return <RoomDropTarget label={labelText} />;
+    },
+
+    _getHeaderItems: function(section) {
+        const StartChatButton = sdk.getComponent('elements.StartChatButton');
+        const RoomDirectoryButton = sdk.getComponent('elements.RoomDirectoryButton');
+        const CreateRoomButton = sdk.getComponent('elements.CreateRoomButton');
+        switch (section) {
+            case 'im.vector.fake.direct':
+                return <span className="mx_RoomList_headerButtons">
+                    <StartChatButton size="16" />
+                </span>;
+            case 'im.vector.fake.recent':
+                return <span className="mx_RoomList_headerButtons">
+                    <RoomDirectoryButton size="16" />
+                    <CreateRoomButton size="16" />
+                </span>;
+        }
+    },
+
     render: function() {
         var RoomSubList = sdk.getComponent('structures.RoomSubList');
         var self = this;
@@ -622,7 +652,7 @@ module.exports = React.createClass({
                 <RoomSubList list={ self.state.lists['m.favourite'] }
                              label="Favourites"
                              tagName="m.favourite"
-                             verb="favourite"
+                             emptyContent={self._getEmptyContent('m.favourite')}
                              editable={ true }
                              order="manual"
                              incomingCall={ self.state.incomingCall }
@@ -635,7 +665,8 @@ module.exports = React.createClass({
                 <RoomSubList list={ self.state.lists['im.vector.fake.direct'] }
                              label="People"
                              tagName="im.vector.fake.direct"
-                             verb="tag direct chat"
+                             emptyContent={self._getEmptyContent('im.vector.fake.direct')}
+                             headerItems={self._getHeaderItems('im.vector.fake.direct')}
                              editable={ true }
                              order="recent"
                              incomingCall={ self.state.incomingCall }
@@ -650,7 +681,8 @@ module.exports = React.createClass({
                              label="Rooms"
                              tagName="im.vector.fake.recent"
                              editable={ true }
-                             verb="restore"
+                             emptyContent={self._getEmptyContent('im.vector.fake.recent')}
+                             headerItems={self._getHeaderItems('im.vector.fake.recent')}
                              order="recent"
                              incomingCall={ self.state.incomingCall }
                              collapsed={ self.props.collapsed }
@@ -665,7 +697,7 @@ module.exports = React.createClass({
                              key={ tagName }
                              label={ tagName }
                              tagName={ tagName }
-                             verb={ "tag as " + tagName }
+                             emptyContent={self._getEmptyContent(tagName)}
                              editable={ true }
                              order="manual"
                              incomingCall={ self.state.incomingCall }
@@ -681,7 +713,7 @@ module.exports = React.createClass({
                 <RoomSubList list={ self.state.lists['m.lowpriority'] }
                              label="Low priority"
                              tagName="m.lowpriority"
-                             verb="demote"
+                             emptyContent={self._getEmptyContent('m.lowpriority')}
                              editable={ true }
                              order="recent"
                              incomingCall={ self.state.incomingCall }

src/components/views/rooms/RoomSettings.js

@@ -926,7 +926,7 @@ module.exports = React.createClass({
                         <PowerSelector ref="ban" value={ban_level} controlled={false} disabled={!can_change_levels || current_user_level < ban_level} onChange={this.onPowerLevelsChanged}/>
                     </div>
                     <div className="mx_RoomSettings_powerLevel">
-                        <span className="mx_RoomSettings_powerLevelKey">To redact messages, you must be a </span>
+                        <span className="mx_RoomSettings_powerLevelKey">To redact other users' messages, you must be a </span>
                         <PowerSelector ref="redact" value={redact_level} controlled={false} disabled={!can_change_levels || current_user_level < redact_level} onChange={this.onPowerLevelsChanged}/>
                     </div>
 

src/components/views/rooms/SearchResultTile.js

@@ -60,7 +60,7 @@ module.exports = React.createClass({
             }
         }
         return (
-            <li data-scroll-token={eventId+"+"+j}>
+            <li data-scroll-tokens={eventId+"+"+j}>
                 {ret}
             </li>);
     },