Merge branch 'develop' into luke/submit-debug-logs

src/components/structures/GroupView.js

@@ -29,6 +29,7 @@ import classnames from 'classnames';
 
 import GroupStoreCache from '../../stores/GroupStoreCache';
 import GroupStore from '../../stores/GroupStore';
+import FlairStore from '../../stores/FlairStore';
 import { showGroupAddRoomDialog } from '../../GroupAddressPicker';
 import GeminiScrollbar from 'react-gemini-scrollbar';
 import {makeGroupPermalink, makeUserPermalink} from "../../matrix-to";
@@ -429,6 +430,7 @@ export default React.createClass({
             editing: false,
             saving: false,
             uploadingAvatar: false,
+            avatarChanged: false,
             membershipBusy: false,
             publicityBusy: false,
             inviterProfile: null,
@@ -590,6 +592,10 @@ export default React.createClass({
             this.setState({
                 uploadingAvatar: false,
                 profileForm: newProfileForm,
+
+                // Indicate that FlairStore needs to be poked to show this change
+                // in TagTile (TagPanel), Flair and GroupTile (MyGroups).
+                avatarChanged: true,
             });
         }).catch((e) => {
             this.setState({uploadingAvatar: false});
@@ -615,6 +621,11 @@ export default React.createClass({
             });
             dis.dispatch({action: 'panel_disable'});
             this._initGroupStore(this.props.groupId);
+
+            if (this.state.avatarChanged) {
+                // XXX: Evil - poking a store should be done from an async action
+                FlairStore.refreshGroupProfile(this._matrixClient, this.props.groupId);
+            }
         }).catch((e) => {
             this.setState({
                 saving: false,
@@ -625,6 +636,10 @@ export default React.createClass({
                 title: _t('Error'),
                 description: _t('Failed to update community'),
             });
+        }).finally(() => {
+            this.setState({
+                avatarChanged: false,
+            });
         }).done();
     },
 
@@ -692,8 +707,15 @@ export default React.createClass({
         });
 
         const header = this.state.editing ? <h2> { _t('Community Settings') } </h2> : <div />;
+        const changeDelayWarning = this.state.editing && this.state.isUserPrivileged ?
+            <div className="mx_GroupView_changeDelayWarning">
+                { _t( 'Changes made to your community might not be seen by other users ' +
+                      'for up to 30 minutes.',
+                ) }
+            </div> : <div />;
         return <div className={groupSettingsSectionClasses}>
             { header }
+            { changeDelayWarning }
             { this._getLongDescriptionNode() }
             { this._getRoomsNode() }
         </div>;

src/components/structures/LoggedInView.js

@@ -19,6 +19,7 @@ limitations under the License.
 import * as Matrix from 'matrix-js-sdk';
 import React from 'react';
 import PropTypes from 'prop-types';
+import { DragDropContext } from 'react-beautiful-dnd';
 
 import { KeyCode, isOnlyCtrlOrCmdKeyEvent } from '../../Keyboard';
 import Notifier from '../../Notifier';
@@ -30,6 +31,9 @@ import sessionStore from '../../stores/SessionStore';
 import MatrixClientPeg from '../../MatrixClientPeg';
 import SettingsStore from "../../settings/SettingsStore";
 
+import TagOrderActions from '../../actions/TagOrderActions';
+import RoomListActions from '../../actions/RoomListActions';
+
 /**
  * This is what our MatrixChat shows when we are logged in. The precise view is
  * determined by the page_type property.
@@ -207,8 +211,51 @@ const LoggedInView = React.createClass({
         }
     },
 
+    _onDragEnd: function(result) {
+        // Dragged to an invalid destination, not onto a droppable
+        if (!result.destination) {
+            return;
+        }
+
+        const dest = result.destination.droppableId;
+
+        if (dest === 'tag-panel-droppable') {
+            // Could be "GroupTile +groupId:domain"
+            const draggableId = result.draggableId.split(' ').pop();
+
+            // Dispatch synchronously so that the TagPanel receives an
+            // optimistic update from TagOrderStore before the previous
+            // state is shown.
+            dis.dispatch(TagOrderActions.moveTag(
+                this._matrixClient,
+                draggableId,
+                result.destination.index,
+            ), true);
+        } else if (dest.startsWith('room-sub-list-droppable_')) {
+            this._onRoomTileEndDrag(result);
+        }
+    },
+
+    _onRoomTileEndDrag: function(result) {
+        let newTag = result.destination.droppableId.split('_')[1];
+        let prevTag = result.source.droppableId.split('_')[1];
+        if (newTag === 'undefined') newTag = undefined;
+        if (prevTag === 'undefined') prevTag = undefined;
+
+        const roomId = result.draggableId.split('_')[1];
+
+        const oldIndex = result.source.index;
+        const newIndex = result.destination.index;
+
+        dis.dispatch(RoomListActions.tagRoom(
+            this._matrixClient,
+            this._matrixClient.getRoom(roomId),
+            prevTag, newTag,
+            oldIndex, newIndex,
+        ), true);
+    },
+
     render: function() {
-        const TagPanel = sdk.getComponent('structures.TagPanel');
         const LeftPanel = sdk.getComponent('structures.LeftPanel');
         const RightPanel = sdk.getComponent('structures.RightPanel');
         const RoomView = sdk.getComponent('structures.RoomView');
@@ -329,17 +376,18 @@ const LoggedInView = React.createClass({
         return (
             <div className='mx_MatrixChat_wrapper'>
                 { topBar }
-                <div className={bodyClasses}>
-                    { SettingsStore.isFeatureEnabled("feature_tag_panel") ? <TagPanel /> : <div /> }
-                    <LeftPanel
-                        collapsed={this.props.collapseLhs || false}
-                        disabled={this.props.leftDisabled}
-                    />
-                    <main className='mx_MatrixChat_middlePanel'>
-                        { page_element }
-                    </main>
-                    { right_panel }
-                </div>
+                <DragDropContext onDragEnd={this._onDragEnd}>
+                    <div className={bodyClasses}>
+                        <LeftPanel
+                            collapsed={this.props.collapseLhs || false}
+                            disabled={this.props.leftDisabled}
+                        />
+                        <main className='mx_MatrixChat_middlePanel'>
+                            { page_element }
+                        </main>
+                        { right_panel }
+                    </div>
+                </DragDropContext>
             </div>
         );
     },

src/components/structures/MatrixChat.js

@@ -1171,18 +1171,6 @@ export default React.createClass({
         cli.on("crypto.warning", (type) => {
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             switch (type) {
-                case 'CRYPTO_WARNING_ACCOUNT_MIGRATED':
-                    Modal.createTrackedDialog('Crypto migrated', '', ErrorDialog, {
-                        title: _t('Cryptography data migrated'),
-                        description: _t(
-                            "A one-off migration of cryptography data has been performed. "+
-                            "End-to-end encryption will not work if you go back to an older "+
-                            "version of Riot. If you need to use end-to-end cryptography on "+
-                            "an older version, log out of Riot first. To retain message history, "+
-                            "export and re-import your keys.",
-                        ),
-                    });
-                    break;
                 case 'CRYPTO_WARNING_OLD_VERSION_DETECTED':
                     Modal.createTrackedDialog('Crypto migrated', '', ErrorDialog, {
                         title: _t('Old cryptography data detected'),

src/components/structures/MyGroups.js

@@ -73,8 +73,25 @@ export default withMatrixClient(React.createClass({
             });
             contentHeader = groupNodes.length > 0 ? <h3>{ _t('Your Communities') }</h3> : <div />;
             content = groupNodes.length > 0 ?
-                <GeminiScrollbar className="mx_MyGroups_joinedGroups">
-                    { groupNodes }
+                <GeminiScrollbar>
+                    <div className="mx_MyGroups_microcopy">
+                        <p>
+                            { _t(
+                                "Did you know: you can use communities to filter your Riot.im experience!",
+                            ) }
+                        </p>
+                        <p>
+                            { _t(
+                                "To set up a filter, drag a community avatar over to the filter panel on " +
+                                "the far left hand side of the screen. You can click on an avatar in the " +
+                                "filter panel at any time to see only the rooms and people associated " +
+                                "with that community.",
+                            ) }
+                        </p>
+                    </div>
+                    <div className="mx_MyGroups_joinedGroups">
+                        { groupNodes }
+                    </div>
                 </GeminiScrollbar> :
                 <div className="mx_MyGroups_placeholder">
                     { _t(

src/components/structures/RoomView.js

@@ -627,8 +627,8 @@ module.exports = React.createClass({
         const room = this.state.room;
         if (!room) return;
 
-        const color_scheme = SettingsStore.getValue("roomColor", room.room_id);
         console.log("Tinter.tint from updateTint");
+        const color_scheme = SettingsStore.getValue("roomColor", room.roomId);
         Tinter.tint(color_scheme.primary_color, color_scheme.secondary_color);
     },
 
@@ -677,23 +677,7 @@ module.exports = React.createClass({
         // a member state changed in this room
         // refresh the conf call notification state
         this._updateConfCallNotification();
-
-        // if we are now a member of the room, where we were not before, that
-        // means we have finished joining a room we were previously peeking
-        // into.
-        const me = MatrixClientPeg.get().credentials.userId;
-        if (this.state.joining && this.state.room.hasMembershipState(me, "join")) {
-            // Having just joined a room, check to see if it looks like a DM room, and if so,
-            // mark it as one. This is to work around the fact that some clients don't support
-            // is_direct. We should remove this once they do.
-            const me = this.state.room.getMember(MatrixClientPeg.get().credentials.userId);
-            if (Rooms.looksLikeDirectMessageRoom(this.state.room, me)) {
-                // XXX: There's not a whole lot we can really do if this fails: at best
-                // perhaps we could try a couple more times, but since it's a temporary
-                // compatability workaround, let's not bother.
-                Rooms.setDMRoom(this.state.room.roomId, me.events.member.getSender()).done();
-            }
-        }
+        this._updateDMState();
     }, 500),
 
     _checkIfAlone: function(room) {
@@ -734,6 +718,44 @@ module.exports = React.createClass({
         });
     },
 
+    _updateDMState() {
+        const me = this.state.room.getMember(MatrixClientPeg.get().credentials.userId);
+        if (!me || me.membership !== "join") {
+            return;
+        }
+
+        // The user may have accepted an invite with is_direct set
+        if (me.events.member.getPrevContent().membership === "invite" &&
+            me.events.member.getPrevContent().is_direct
+        ) {
+            // This is a DM with the sender of the invite event (which we assume
+            // preceded the join event)
+            Rooms.setDMRoom(
+                this.state.room.roomId,
+                me.events.member.getUnsigned().prev_sender,
+            );
+            return;
+        }
+
+        const invitedMembers = this.state.room.getMembersWithMembership("invite");
+        const joinedMembers = this.state.room.getMembersWithMembership("join");
+
+        // There must be one invited member and one joined member
+        if (invitedMembers.length !== 1 || joinedMembers.length !== 1) {
+            return;
+        }
+
+        // The user may have sent an invite with is_direct sent
+        const other = invitedMembers[0];
+        if (other &&
+            other.membership === "invite" &&
+            other.events.member.getContent().is_direct
+        ) {
+            Rooms.setDMRoom(this.state.room.roomId, other.userId);
+            return;
+        }
+    },
+
     onSearchResultsResize: function() {
         dis.dispatch({ action: 'timeline_resize' }, true);
     },
@@ -826,18 +848,6 @@ module.exports = React.createClass({
                 action: 'join_room',
                 opts: { inviteSignUrl: signUrl },
             });
-
-            // if this is an invite and has the 'direct' hint set, mark it as a DM room now.
-            if (this.state.room) {
-                const me = this.state.room.getMember(MatrixClientPeg.get().credentials.userId);
-                if (me && me.membership == 'invite') {
-                    if (me.events.member.getContent().is_direct) {
-                        // The 'direct' hint is there, so declare that this is a DM room for
-                        // whoever invited us.
-                        return Rooms.setDMRoom(this.state.room.roomId, me.events.member.getSender());
-                    }
-                }
-            }
             return Promise.resolve();
         });
     },

src/components/structures/TagPanel.js

@@ -17,15 +17,16 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import { MatrixClient } from 'matrix-js-sdk';
+import GeminiScrollbar from 'react-gemini-scrollbar';
 import TagOrderStore from '../../stores/TagOrderStore';
 
 import GroupActions from '../../actions/GroupActions';
-import TagOrderActions from '../../actions/TagOrderActions';
 
 import sdk from '../../index';
 import dis from '../../dispatcher';
+import { _t } from '../../languageHandler';
 
-import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+import { Droppable } from 'react-beautiful-dnd';
 
 const TagPanel = React.createClass({
     displayName: 'TagPanel',
@@ -44,7 +45,7 @@ const TagPanel = React.createClass({
     componentWillMount: function() {
         this.unmounted = false;
         this.context.matrixClient.on("Group.myMembership", this._onGroupMyMembership);
-        this.context.matrixClient.on("sync", this.onClientSync);
+        this.context.matrixClient.on("sync", this._onClientSync);
 
         this._tagOrderStoreToken = TagOrderStore.addListener(() => {
             if (this.unmounted) {
@@ -62,7 +63,7 @@ const TagPanel = React.createClass({
     componentWillUnmount() {
         this.unmounted = true;
         this.context.matrixClient.removeListener("Group.myMembership", this._onGroupMyMembership);
-        this.context.matrixClient.removeListener("sync", this.onClientSync);
+        this.context.matrixClient.removeListener("sync", this._onClientSync);
         if (this._filterStoreToken) {
             this._filterStoreToken.remove();
         }
@@ -73,7 +74,7 @@ const TagPanel = React.createClass({
         dis.dispatch(GroupActions.fetchJoinedGroups(this.context.matrixClient));
     },
 
-    onClientSync(syncState, prevState) {
+    _onClientSync(syncState, prevState) {
         // Consider the client reconnected if there is no error with syncing.
         // This means the state could be RECONNECTING, SYNCING or PREPARED.
         const reconnected = syncState !== "ERROR" && prevState !== syncState;
@@ -83,9 +84,7 @@ const TagPanel = React.createClass({
         }
     },
 
-    onClick(e) {
-        // Ignore clicks on children
-        if (e.target !== e.currentTarget) return;
+    onMouseDown(e) {
         dis.dispatch({action: 'deselect_tags'});
     },
 
@@ -94,26 +93,15 @@ const TagPanel = React.createClass({
         dis.dispatch({action: 'view_create_group'});
     },
 
-    onTagTileEndDrag(result) {
-        // Dragged to an invalid destination, not onto a droppable
-        if (!result.destination) {
-            return;
-        }
-
-        // Dispatch synchronously so that the TagPanel receives an
-        // optimistic update from TagOrderStore before the previous
-        // state is shown.
-        dis.dispatch(TagOrderActions.moveTag(
-            this.context.matrixClient,
-            result.draggableId,
-            result.destination.index,
-        ), true);
+    onClearFilterClick(ev) {
+        dis.dispatch({action: 'deselect_tags'});
     },
 
     render() {
+        const GroupsButton = sdk.getComponent('elements.GroupsButton');
+        const DNDTagTile = sdk.getComponent('elements.DNDTagTile');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const TintableSvg = sdk.getComponent('elements.TintableSvg');
-        const DNDTagTile = sdk.getComponent('elements.DNDTagTile');
 
         const tags = this.state.orderedTags.map((tag, index) => {
             return <DNDTagTile
@@ -123,28 +111,45 @@ const TagPanel = React.createClass({
                 selected={this.state.selectedTags.includes(tag)}
             />;
         });
+
+        const clearButton = this.state.selectedTags.length > 0 ?
+            <TintableSvg src="img/icons-close.svg" width="24" height="24"
+                alt={_t("Clear filter")}
+                title={_t("Clear filter")}
+            /> :
+            <div />;
+
         return <div className="mx_TagPanel">
-            <DragDropContext onDragEnd={this.onTagTileEndDrag}>
-                <Droppable droppableId="tag-panel-droppable">
+            <AccessibleButton className="mx_TagPanel_clearButton" onClick={this.onClearFilterClick}>
+                { clearButton }
+            </AccessibleButton>
+            <div className="mx_TagPanel_divider" />
+            <GeminiScrollbar
+                className="mx_TagPanel_scroller"
+                autoshow={true}
+                // XXX: Use onMouseDown as a workaround for https://github.com/atlassian/react-beautiful-dnd/issues/273
+                // instead of onClick. Otherwise we experience https://github.com/vector-im/riot-web/issues/6253
+                onMouseDown={this.onMouseDown}
+            >
+                <Droppable
+                    droppableId="tag-panel-droppable"
+                    type="draggable-TagTile"
+                >
                     { (provided, snapshot) => (
-                        <div
-                            className="mx_TagPanel_tagTileContainer"
-                            ref={provided.innerRef}
-                            // react-beautiful-dnd has a bug that emits a click to the parent
-                            // of draggables upon dropping
-                            //   https://github.com/atlassian/react-beautiful-dnd/issues/273
-                            // so we use onMouseDown here as a workaround.
-                            onMouseDown={this.onClick}
-                        >
-                            { tags }
-                            { provided.placeholder }
-                        </div>
+                            <div
+                                className="mx_TagPanel_tagTileContainer"
+                                ref={provided.innerRef}
+                            >
+                                { tags }
+                                { provided.placeholder }
+                            </div>
                     ) }
                 </Droppable>
-            </DragDropContext>
-            <AccessibleButton className="mx_TagPanel_createGroupButton" onClick={this.onCreateGroupClick}>
-                <TintableSvg src="img/icons-create-room.svg" width="25" height="25" />
-            </AccessibleButton>
+            </GeminiScrollbar>
+            <div className="mx_TagPanel_divider" />
+            <div className="mx_TagPanel_createGroupButton">
+                <GroupsButton tooltip={true} />
+            </div>
         </div>;
     },
 });

src/components/structures/TimelinePanel.js

@@ -624,6 +624,7 @@ var TimelinePanel = React.createClass({
                 this.props.timelineSet.room.setUnreadNotificationCount('highlight', 0);
                 dis.dispatch({
                     action: 'on_room_read',
+                    roomId: this.props.timelineSet.room.roomId,
                 });
             }
         }
@@ -1121,9 +1122,9 @@ var TimelinePanel = React.createClass({
         // exist.
         if (this.state.timelineLoading) {
             return (
-                    <div className={this.props.className + " mx_RoomView_messageListWrapper"}>
-                        <Loader />
-                    </div>
+                <div className="mx_RoomView_messagePanelSpinner">
+                    <Loader />
+                </div>
             );
         }
 

src/components/structures/UserSettings.js

@@ -79,6 +79,7 @@ const SIMPLE_SETTINGS = [
     { id: "Pill.shouldHidePillAvatar" },
     { id: "TextualBody.disableBigEmoji" },
     { id: "VideoView.flipVideoHorizontally" },
+    { id: "TagPanel.disableTagPanel" },
 ];
 
 // These settings must be defined in SettingsStore

src/components/structures/login/Login.js

@@ -431,10 +431,10 @@ module.exports = React.createClass({
         // FIXME: remove status.im theme tweaks
         const theme = SettingsStore.getValue("theme");
         if (theme !== "status") {
-            header = <h2>{ _t('Sign in') }</h2>;
+            header = <h2>{ _t('Sign in') } { loader }</h2>;
         } else {
             if (!this.state.errorText) {
-                header = <h2>{ _t('Sign in to get started') }</h2>;
+                header = <h2>{ _t('Sign in to get started') } { loader }</h2>;
             }
         }
 

src/components/views/avatars/BaseAvatar.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -82,7 +83,7 @@ module.exports = React.createClass({
         }
     },
 
-    onClientSync(syncState, prevState) {
+    onClientSync: function(syncState, prevState) {
         if (this.unmounted) return;
 
         // Consider the client reconnected if there is no error with syncing.

src/components/views/avatars/RoomAvatar.js

@@ -48,12 +48,33 @@ module.exports = React.createClass({
         };
     },
 
+    componentWillMount: function() {
+        MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
+    },
+
+    componentWillUnmount: function() {
+        const cli = MatrixClientPeg.get();
+        if (cli) {
+            cli.removeListener("RoomState.events", this.onRoomStateEvents);
+        }
+    },
+
     componentWillReceiveProps: function(newProps) {
         this.setState({
             urls: this.getImageUrls(newProps),
         });
     },
 
+    onRoomStateEvents: function(ev) {
+        if (ev.getRoomId() !== this.props.room.roomId ||
+            ev.getType() !== 'm.room.avatar'
+        ) return;
+
+        this.setState({
+            urls: this.getImageUrls(this.props),
+        });
+    },
+
     getImageUrls: function(props) {
         return [
             ContentRepo.getHttpUriForMxc(

src/components/views/dialogs/ChatCreateOrReuseDialog.js

@@ -59,6 +59,7 @@ export default class ChatCreateOrReuseDialog extends React.Component {
                 );
                 tiles.push(
                     <RoomTile key={room.roomId} room={room}
+                        transparent={true}
                         collapsed={false}
                         selected={false}
                         unread={Unread.doesRoomHaveUnreadMessages(room)}

src/components/views/elements/AppTile.js

@@ -393,6 +393,10 @@ export default React.createClass({
         const sandboxFlags = "allow-forms allow-popups allow-popups-to-escape-sandbox "+
             "allow-same-origin allow-scripts allow-presentation";
 
+        // Additional iframe feature pemissions
+        // (see - https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-permissions-in-cross-origin-iframes and https://wicg.github.io/feature-policy/)
+        const iframeFeatures = "microphone; camera; encrypted-media;";
+
         if (this.props.show) {
             const loadingElement = (
                 <div className='mx_AppTileBody mx_AppLoading'>
@@ -412,7 +416,13 @@ export default React.createClass({
                     appTileBody = (
                         <div className={this.state.loading ? 'mx_AppTileBody mx_AppLoading' : 'mx_AppTileBody'}>
                             { this.state.loading && loadingElement }
+                            { /*
+                                The "is" attribute in the following iframe tag is needed in order to enable rendering of the
+                                "allow" attribute, which is unknown to react 15.
+                            */ }
                             <iframe
+                                is
+                                allow={iframeFeatures}
                                 ref="appFrame"
                                 src={this._getSafeUrl()}
                                 allowFullScreen="true"

src/components/views/elements/DNDTagTile.js

@@ -25,6 +25,7 @@ export default function DNDTagTile(props) {
             key={props.tag}
             draggableId={props.tag}
             index={props.index}
+            type="draggable-TagTile"
         >
             { (provided, snapshot) => (
                 <div>

src/components/views/elements/PowerSelector.js

@@ -42,6 +42,9 @@ module.exports = React.createClass({
         // should the user be able to change the value? false by default.
         disabled: PropTypes.bool,
         onChange: PropTypes.func,
+
+        // Optional key to pass as the second argument to `onChange`
+        powerLevelKey: PropTypes.string,
     },
 
     getInitialState: function() {
@@ -84,17 +87,17 @@ module.exports = React.createClass({
     onSelectChange: function(event) {
         this.setState({ custom: event.target.value === "SELECT_VALUE_CUSTOM" });
         if (event.target.value !== "SELECT_VALUE_CUSTOM") {
-            this.props.onChange(event.target.value);
+            this.props.onChange(event.target.value, this.props.powerLevelKey);
         }
     },
 
     onCustomBlur: function(event) {
-        this.props.onChange(parseInt(this.refs.custom.value));
+        this.props.onChange(parseInt(this.refs.custom.value), this.props.powerLevelKey);
     },
 
     onCustomKeyDown: function(event) {
         if (event.key == "Enter") {
-            this.props.onChange(parseInt(this.refs.custom.value));
+            this.props.onChange(parseInt(this.refs.custom.value), this.props.powerLevelKey);
         }
     },
 

src/components/views/elements/TagTile.js

@@ -21,6 +21,7 @@ import { MatrixClient } from 'matrix-js-sdk';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import { isOnlyCtrlOrCmdIgnoreShiftKeyEvent } from '../../../Keyboard';
+import ContextualMenu from '../../structures/ContextualMenu';
 
 import FlairStore from '../../../stores/FlairStore';
 
@@ -54,20 +55,29 @@ export default React.createClass({
     componentWillMount() {
         this.unmounted = false;
         if (this.props.tag[0] === '+') {
-            FlairStore.getGroupProfileCached(
-                this.context.matrixClient,
-                this.props.tag,
-            ).then((profile) => {
-                if (this.unmounted) return;
-                this.setState({profile});
-            }).catch((err) => {
-                console.warn('Could not fetch group profile for ' + this.props.tag, err);
-            });
+            FlairStore.addListener('updateGroupProfile', this._onFlairStoreUpdated);
+            this._onFlairStoreUpdated();
         }
     },
 
     componentWillUnmount() {
         this.unmounted = true;
+        if (this.props.tag[0] === '+') {
+            FlairStore.removeListener('updateGroupProfile', this._onFlairStoreUpdated);
+        }
+    },
+
+    _onFlairStoreUpdated() {
+        if (this.unmounted) return;
+        FlairStore.getGroupProfileCached(
+            this.context.matrixClient,
+            this.props.tag,
+        ).then((profile) => {
+            if (this.unmounted) return;
+            this.setState({profile});
+        }).catch((err) => {
+            console.warn('Could not fetch group profile for ' + this.props.tag, err);
+        });
     },
 
     onClick: function(e) {
@@ -81,6 +91,35 @@ export default React.createClass({
         });
     },
 
+    onContextButtonClick: function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        // Hide the (...) immediately
+        this.setState({ hover: false });
+
+        const TagTileContextMenu = sdk.getComponent('context_menus.TagTileContextMenu');
+        const elementRect = e.target.getBoundingClientRect();
+
+        // The window X and Y offsets are to adjust position when zoomed in to page
+        const x = elementRect.right + window.pageXOffset + 3;
+        const chevronOffset = 12;
+        let y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset);
+        y = y - (chevronOffset + 8); // where 8 is half the height of the chevron
+
+        const self = this;
+        ContextualMenu.createMenu(TagTileContextMenu, {
+            chevronOffset: chevronOffset,
+            left: x,
+            top: y,
+            tag: this.props.tag,
+            onFinished: function() {
+                self.setState({ menuDisplayed: false });
+            },
+        });
+        this.setState({ menuDisplayed: true });
+    },
+
     onMouseOver: function() {
         this.setState({hover: true});
     },
@@ -109,10 +148,21 @@ export default React.createClass({
         const tip = this.state.hover ?
             <RoomTooltip className="mx_TagTile_tooltip" label={name} /> :
             <div />;
+        const contextButton = this.state.hover || this.state.menuDisplayed ?
+            <div className="mx_TagTile_context_button" onClick={this.onContextButtonClick}>
+                { "\u00B7\u00B7\u00B7" }
+            </div> : <div />;
         return <AccessibleButton className={className} onClick={this.onClick}>
             <div className="mx_TagTile_avatar" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
-                <BaseAvatar name={name} url={httpUrl} width={avatarHeight} height={avatarHeight} />
+                <BaseAvatar
+                    name={name}
+                    idName={this.props.tag}
+                    url={httpUrl}
+                    width={avatarHeight}
+                    height={avatarHeight}
+                />
                 { tip }
+                { contextButton }
             </div>
         </AccessibleButton>;
     },

src/components/views/groups/GroupMemberInfo.js

@@ -132,7 +132,9 @@ module.exports = React.createClass({
     render: function() {
         if (this.state.removingUser) {
             const Spinner = sdk.getComponent("elements.Spinner");
-            return <Spinner />;
+            return <div className="mx_MemberInfo">
+                <Spinner />
+            </div>;
         }
 
         let adminTools;

src/components/views/groups/GroupTile.js

@@ -17,10 +17,12 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import {MatrixClient} from 'matrix-js-sdk';
+import { Draggable, Droppable } from 'react-beautiful-dnd';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import FlairStore from '../../../stores/FlairStore';
 
+
 const GroupTile = React.createClass({
     displayName: 'GroupTile',
 
@@ -57,7 +59,7 @@ const GroupTile = React.createClass({
         });
     },
 
-    onClick: function(e) {
+    onMouseDown: function(e) {
         e.preventDefault();
         dis.dispatch({
             action: 'view_group',
@@ -77,10 +79,52 @@ const GroupTile = React.createClass({
         const httpUrl = profile.avatarUrl ? this.context.matrixClient.mxcUrlToHttp(
             profile.avatarUrl, avatarHeight, avatarHeight, "crop",
         ) : null;
-        return <AccessibleButton className="mx_GroupTile" onClick={this.onClick}>
-            <div className="mx_GroupTile_avatar">
-                <BaseAvatar name={name} url={httpUrl} width={avatarHeight} height={avatarHeight} />
-            </div>
+        // XXX: Use onMouseDown as a workaround for https://github.com/atlassian/react-beautiful-dnd/issues/273
+        // instead of onClick. Otherwise we experience https://github.com/vector-im/riot-web/issues/6156
+        return <AccessibleButton className="mx_GroupTile" onMouseDown={this.onMouseDown}>
+            <Droppable droppableId="my-groups-droppable" type="draggable-TagTile">
+                { (droppableProvided, droppableSnapshot) => (
+                    <div ref={droppableProvided.innerRef}>
+                        <Draggable
+                            key={"GroupTile " + this.props.groupId}
+                            draggableId={"GroupTile " + this.props.groupId}
+                            index={this.props.groupId}
+                            type="draggable-TagTile"
+                        >
+                            { (provided, snapshot) => (
+                                <div>
+                                    <div
+                                        ref={provided.innerRef}
+                                        {...provided.draggableProps}
+                                        {...provided.dragHandleProps}
+                                    >
+                                        <div className="mx_GroupTile_avatar">
+                                            <BaseAvatar
+                                                name={name}
+                                                idName={this.props.groupId}
+                                                url={httpUrl}
+                                                width={avatarHeight}
+                                                height={avatarHeight} />
+                                        </div>
+                                    </div>
+                                    { /* Instead of a blank placeholder, use a copy of the avatar itself. */ }
+                                    { provided.placeholder ?
+                                        <div className="mx_GroupTile_avatar">
+                                            <BaseAvatar
+                                                name={name}
+                                                idName={this.props.groupId}
+                                                url={httpUrl}
+                                                width={avatarHeight}
+                                                height={avatarHeight} />
+                                        </div> :
+                                        <div />
+                                    }
+                                </div>
+                            ) }
+                        </Draggable>
+                    </div>
+                ) }
+            </Droppable>
             <div className="mx_GroupTile_profile">
                 <div className="mx_GroupTile_name">{ name }</div>
                 { descElement }

src/components/views/messages/MFileBody.js

@@ -82,7 +82,7 @@ Tinter.registerTintable(updateTintedDownloadImage);
 // downloaded. This limit does not seem to apply when the url is used as
 // the source attribute of an image tag.
 //
-// Blob URLs are generated using window.URL.createObjectURL and unforuntately
+// Blob URLs are generated using window.URL.createObjectURL and unfortunately
 // for our purposes they inherit the origin of the page that created them.
 // This means that any scripts that run when the URL is viewed will be able
 // to access local storage.

src/components/views/rooms/EventTile.js

@@ -152,7 +152,17 @@ module.exports = withMatrixClient(React.createClass({
     },
 
     getInitialState: function() {
-        return {menu: false, allReadAvatars: false, verified: null};
+        return {
+            // Whether the context menu is being displayed.
+            menu: false,
+            // Whether all read receipts are being displayed. If not, only display
+            // a truncation of them.
+            allReadAvatars: false,
+            // Whether the event's sender has been verified.
+            verified: null,
+            // Whether onRequestKeysClick has been called since mounting.
+            previouslyRequestedKeys: false,
+        };
     },
 
     componentWillMount: function() {
@@ -393,6 +403,19 @@ module.exports = withMatrixClient(React.createClass({
         });
     },
 
+    onRequestKeysClick: function() {
+        this.setState({
+            // Indicate in the UI that the keys have been requested (this is expected to
+            // be reset if the component is mounted in the future).
+            previouslyRequestedKeys: true,
+        });
+
+        // Cancel any outgoing key request for this event and resend it. If a response
+        // is received for the request with the required keys, the event could be
+        // decrypted successfully.
+        this.props.matrixClient.cancelAndResendEventRoomKeyRequest(this.props.mxEvent);
+    },
+
     onPermalinkClicked: function(e) {
         // This allows the permalink to be opened in a new tab/window or copied as
         // matrix.to, but also for it to enable routing within Riot when clicked.
@@ -458,6 +481,7 @@ module.exports = withMatrixClient(React.createClass({
 
         const isSending = (['sending', 'queued', 'encrypting'].indexOf(this.props.eventSendStatus) !== -1);
         const isRedacted = (eventType === 'm.room.message') && this.props.isRedacted;
+        const isEncryptionFailure = this.props.mxEvent.isDecryptionFailure();
 
         const classes = classNames({
             mx_EventTile: true,
@@ -474,7 +498,7 @@ module.exports = withMatrixClient(React.createClass({
             menu: this.state.menu,
             mx_EventTile_verified: this.state.verified == true,
             mx_EventTile_unverified: this.state.verified == false,
-            mx_EventTile_bad: msgtype === 'm.bad.encrypted',
+            mx_EventTile_bad: isEncryptionFailure,
             mx_EventTile_emote: msgtype === 'm.emote',
             mx_EventTile_redacted: isRedacted,
         });
@@ -534,6 +558,40 @@ module.exports = withMatrixClient(React.createClass({
         const timestamp = this.props.mxEvent.getTs() ?
             <MessageTimestamp showTwelveHour={this.props.isTwelveHour} ts={this.props.mxEvent.getTs()} /> : null;
 
+        const keyRequestHelpText =
+            <div className="mx_EventTile_keyRequestInfo_tooltip_contents">
+                <p>
+                    { this.state.previouslyRequestedKeys ?
+                        _t( 'Your key share request has been sent - please check your other devices ' +
+                            'for key share requests.') :
+                        _t( 'Key share requests are sent to your other devices automatically. If you ' +
+                            'rejected or dismissed the key share request on your other devices, click ' +
+                            'here to request the keys for this session again.')
+                    }
+                </p>
+                <p>
+                    { _t( 'If your other devices do not have the key for this message you will not ' +
+                            'be able to decrypt them.')
+                    }
+                </p>
+            </div>;
+        const keyRequestInfoContent = this.state.previouslyRequestedKeys ?
+            _t('Key request sent.') :
+            _t(
+                '<requestLink>Re-request encryption keys</requestLink> from your other devices.',
+                {},
+                {'requestLink': (sub) => <a onClick={this.onRequestKeysClick}>{ sub }</a>},
+            );
+
+        const ToolTipButton = sdk.getComponent('elements.ToolTipButton');
+        const keyRequestInfo = isEncryptionFailure ?
+            <div className="mx_EventTile_keyRequestInfo">
+                <span className="mx_EventTile_keyRequestInfo_text">
+                    { keyRequestInfoContent }
+                </span>
+                <ToolTipButton helpText={keyRequestHelpText} />
+            </div> : null;
+
         switch (this.props.tileShape) {
             case 'notif': {
                 const room = this.props.matrixClient.getRoom(this.props.mxEvent.getRoomId());
@@ -627,6 +685,7 @@ module.exports = withMatrixClient(React.createClass({
                                            highlightLink={this.props.highlightLink}
                                            showUrlPreview={this.props.showUrlPreview}
                                            onWidgetLoad={this.props.onWidgetLoad} />
+                            { keyRequestInfo }
                             { editButton }
                         </div>
                     </div>

src/components/views/rooms/MemberInfo.js

@@ -754,6 +754,7 @@ module.exports = withMatrixClient(React.createClass({
 
                     tiles.push(
                         <RoomTile key={room.roomId} room={room}
+                            transparent={true}
                             collapsed={false}
                             selected={false}
                             unread={Unread.doesRoomHaveUnreadMessages(room)}

src/components/views/rooms/RoomList.js

@@ -18,7 +18,6 @@ limitations under the License.
 'use strict';
 const React = require("react");
 const ReactDOM = require("react-dom");
-import { DragDropContext } from 'react-beautiful-dnd';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 const GeminiScrollbar = require('react-gemini-scrollbar');
@@ -27,15 +26,15 @@ const CallHandler = require('../../../CallHandler');
 const dis = require("../../../dispatcher");
 const sdk = require('../../../index');
 const rate_limited_func = require('../../../ratelimitedfunc');
-const Rooms = require('../../../Rooms');
+import * as Rooms from '../../../Rooms';
 import DMRoomMap from '../../../utils/DMRoomMap';
 const Receipt = require('../../../utils/Receipt');
 import TagOrderStore from '../../../stores/TagOrderStore';
+import RoomListStore from '../../../stores/RoomListStore';
 import GroupStoreCache from '../../../stores/GroupStoreCache';
 
-import Modal from '../../../Modal';
-
 const HIDE_CONFERENCE_CHANS = true;
+const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
 
 function phraseForSection(section) {
     switch (section) {
@@ -78,11 +77,7 @@ module.exports = React.createClass({
 
         cli.on("Room", this.onRoom);
         cli.on("deleteRoom", this.onDeleteRoom);
-        cli.on("Room.timeline", this.onRoomTimeline);
-        cli.on("Room.name", this.onRoomName);
-        cli.on("Room.tags", this.onRoomTags);
         cli.on("Room.receipt", this.onRoomReceipt);
-        cli.on("RoomState.events", this.onRoomStateEvents);
         cli.on("RoomMember.name", this.onRoomMemberName);
         cli.on("Event.decrypted", this.onEventDecrypted);
         cli.on("accountData", this.onAccountData);
@@ -118,6 +113,10 @@ module.exports = React.createClass({
             this.updateVisibleRooms();
         });
 
+        this._roomListStoreToken = RoomListStore.addListener(() => {
+            this._delayedRefreshRoomList();
+        });
+
         this.refreshRoomList();
 
         // order of the sublists
@@ -160,12 +159,6 @@ module.exports = React.createClass({
                     });
                 }
                 break;
-            case 'on_room_read':
-                // Force an update because the notif count state is too deep to cause
-                // an update. This forces the local echo of reading notifs to be
-                // reflected by the RoomTiles.
-                this.forceUpdate();
-                break;
         }
     },
 
@@ -176,11 +169,7 @@ module.exports = React.createClass({
         if (MatrixClientPeg.get()) {
             MatrixClientPeg.get().removeListener("Room", this.onRoom);
             MatrixClientPeg.get().removeListener("deleteRoom", this.onDeleteRoom);
-            MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
-            MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
-            MatrixClientPeg.get().removeListener("Room.tags", this.onRoomTags);
             MatrixClientPeg.get().removeListener("Room.receipt", this.onRoomReceipt);
-            MatrixClientPeg.get().removeListener("RoomState.events", this.onRoomStateEvents);
             MatrixClientPeg.get().removeListener("RoomMember.name", this.onRoomMemberName);
             MatrixClientPeg.get().removeListener("Event.decrypted", this.onEventDecrypted);
             MatrixClientPeg.get().removeListener("accountData", this.onAccountData);
@@ -191,6 +180,10 @@ module.exports = React.createClass({
             this._tagStoreToken.remove();
         }
 
+        if (this._roomListStoreToken) {
+            this._roomListStoreToken.remove();
+        }
+
         if (this._groupStoreTokens.length > 0) {
             // NB: GroupStore is not a Flux.Store
             this._groupStoreTokens.forEach((token) => token.unregister());
@@ -232,13 +225,6 @@ module.exports = React.createClass({
         this._updateStickyHeaders(true, scrollToPosition);
     },
 
-    onRoomTimeline: function(ev, room, toStartOfTimeline, removed, data) {
-        if (toStartOfTimeline) return;
-        if (!room) return;
-        if (data.timeline.getTimelineSet() !== room.getUnfilteredTimelineSet()) return;
-        this._delayedRefreshRoomList();
-    },
-
     onRoomReceipt: function(receiptEvent, room) {
         // because if we read a notification, it will affect notification count
         // only bother updating if there's a receipt from us
@@ -247,18 +233,6 @@ module.exports = React.createClass({
         }
     },
 
-    onRoomName: function(room) {
-        this._delayedRefreshRoomList();
-    },
-
-    onRoomTags: function(event, room) {
-        this._delayedRefreshRoomList();
-    },
-
-    onRoomStateEvents: function(ev, state) {
-        this._delayedRefreshRoomList();
-    },
-
     onRoomMemberName: function(ev, member) {
         this._delayedRefreshRoomList();
     },
@@ -278,106 +252,6 @@ module.exports = React.createClass({
         this.forceUpdate();
     },
 
-    onRoomTileEndDrag: function(result) {
-        if (!result.destination) return;
-
-        let newTag = result.destination.droppableId.split('_')[1];
-        let prevTag = result.source.droppableId.split('_')[1];
-        if (newTag === 'undefined') newTag = undefined;
-        if (prevTag === 'undefined') prevTag = undefined;
-
-        const roomId = result.draggableId.split('_')[1];
-        const room = MatrixClientPeg.get().getRoom(roomId);
-
-        const newIndex = result.destination.index;
-
-        // Evil hack to get DMs behaving
-        if ((prevTag === undefined && newTag === 'im.vector.fake.direct') ||
-            (prevTag === 'im.vector.fake.direct' && newTag === undefined)
-        ) {
-            Rooms.guessAndSetDMRoom(
-                room, newTag === 'im.vector.fake.direct',
-            ).catch((err) => {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                console.error("Failed to set direct chat tag " + err);
-                Modal.createTrackedDialog('Failed to set direct chat tag', '', ErrorDialog, {
-                    title: _t('Failed to set direct chat tag'),
-                    description: ((err && err.message) ? err.message : _t('Operation failed')),
-                });
-            });
-            return;
-        }
-
-        const hasChangedSubLists = result.source.droppableId !== result.destination.droppableId;
-
-        let newOrder = null;
-
-        // Is the tag ordered manually?
-        if (newTag && !newTag.match(/^(m\.lowpriority|im\.vector\.fake\.(invite|recent|direct|archived))$/)) {
-            const newList = this.state.lists[newTag];
-
-            // If the room was moved "down" (increasing index) in the same list we
-            // need to use the orders of the tiles with indices shifted by +1
-            const offset = (
-                newTag === prevTag && result.source.index < result.destination.index
-            ) ? 1 : 0;
-
-            const indexBefore = offset + newIndex - 1;
-            const indexAfter = offset + newIndex;
-
-            const prevOrder = indexBefore < 0 ?
-                0 : newList[indexBefore].tags[newTag].order;
-            const nextOrder = indexAfter >= newList.length ?
-                1 : newList[indexAfter].tags[newTag].order;
-
-            newOrder = {
-                order: (prevOrder + nextOrder) / 2.0,
-            };
-        }
-
-        // More evilness: We will still be dealing with moving to favourites/low prio,
-        // but we avoid ever doing a request with 'im.vector.fake.direct`.
-        //
-        // if we moved lists, remove the old tag
-        if (prevTag && prevTag !== 'im.vector.fake.direct' &&
-            hasChangedSubLists
-        ) {
-            // Optimistic update of what will happen to the room tags
-            delete room.tags[prevTag];
-
-            MatrixClientPeg.get().deleteRoomTag(roomId, prevTag).catch(function(err) {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                console.error("Failed to remove tag " + prevTag + " from room: " + err);
-                Modal.createTrackedDialog('Failed to remove tag from room', '', ErrorDialog, {
-                    title: _t('Failed to remove tag %(tagName)s from room', {tagName: prevTag}),
-                    description: ((err && err.message) ? err.message : _t('Operation failed')),
-                });
-            });
-        }
-
-        // if we moved lists or the ordering changed, add the new tag
-        if (newTag && newTag !== 'im.vector.fake.direct' &&
-            (hasChangedSubLists || newOrder)
-        ) {
-            // Optimistic update of what will happen to the room tags
-            room.tags[newTag] = newOrder;
-
-            MatrixClientPeg.get().setRoomTag(roomId, newTag, newOrder).catch(function(err) {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                console.error("Failed to add tag " + newTag + " to room: " + err);
-                Modal.createTrackedDialog('Failed to add tag to room', '', ErrorDialog, {
-                    title: _t('Failed to add tag %(tagName)s to room', {tagName: newTag}),
-                    description: ((err && err.message) ? err.message : _t('Operation failed')),
-                });
-            });
-        }
-
-        // Refresh to display the optimistic updates - this needs to be done in the
-        // same tick as the drag finishing otherwise the room will pop back to its
-        // previous position - hence no delayed refresh
-        this.refreshRoomList();
-    },
-
     _delayedRefreshRoomList: new rate_limited_func(function() {
         this.refreshRoomList();
     }, 500),
@@ -441,7 +315,7 @@ module.exports = React.createClass({
             totalRooms += l.length;
         }
         this.setState({
-            lists: this.getRoomLists(),
+            lists,
             totalRoomCount: totalRooms,
             // Do this here so as to not render every time the selected tags
             // themselves change.
@@ -452,70 +326,38 @@ module.exports = React.createClass({
     },
 
     getRoomLists: function() {
-        const lists = {};
-        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"] = [];
+        const lists = RoomListStore.getRoomLists();
 
-        const dmRoomMap = DMRoomMap.shared();
+        const filteredLists = {};
 
-        this._visibleRooms.forEach((room, index) => {
-            const me = room.getMember(MatrixClientPeg.get().credentials.userId);
-            if (!me) return;
+        const isRoomVisible = {
+            // $roomId: true,
+        };
 
-            // console.log("room = " + room.name + ", me.membership = " + me.membership +
-            //             ", sender = " + me.events.member.getSender() +
-            //             ", target = " + me.events.member.getStateKey() +
-            //             ", prevMembership = " + me.events.member.getPrevContent().membership);
+        this._visibleRooms.forEach((r) => {
+            isRoomVisible[r.roomId] = true;
+        });
 
-            if (me.membership == "invite") {
-                lists["im.vector.fake.invite"].push(room);
-            } else if (HIDE_CONFERENCE_CHANS && Rooms.isConfCallRoom(room, me, this.props.ConferenceHandler)) {
-                // skip past this room & don't put it in any lists
-            } else if (me.membership == "join" || me.membership === "ban" ||
-                     (me.membership === "leave" && me.events.member.getSender() !== me.events.member.getStateKey())) {
-                // Used to split rooms via tags
-                const tagNames = Object.keys(room.tags);
-                if (tagNames.length) {
-                    for (let i = 0; i < tagNames.length; i++) {
-                        const tagName = tagNames[i];
-                        lists[tagName] = lists[tagName] || [];
-                        lists[tagName].push(room);
-                    }
-                } else if (dmRoomMap.getUserIdForRoomId(room.roomId)) {
-                    // "Direct Message" rooms (that we're still in and that aren't otherwise tagged)
-                    lists["im.vector.fake.direct"].push(room);
-                } else {
-                    lists["im.vector.fake.recent"].push(room);
+        Object.keys(lists).forEach((tagName) => {
+            const filteredRooms = lists[tagName].filter((taggedRoom) => {
+                // Somewhat impossible, but guard against it anyway
+                if (!taggedRoom) {
+                    return;
                 }
-            } else if (me.membership === "leave") {
-                lists["im.vector.fake.archived"].push(room);
-            } else {
-                console.error("unrecognised membership: " + me.membership + " - this should never happen");
+                const me = taggedRoom.getMember(MatrixClientPeg.get().credentials.userId);
+                if (HIDE_CONFERENCE_CHANS && Rooms.isConfCallRoom(taggedRoom, me, this.props.ConferenceHandler)) {
+                    return;
+                }
+
+                return Boolean(isRoomVisible[taggedRoom.roomId]);
+            });
+            
+            if (filteredRooms.length > 0 || tagName.match(STANDARD_TAGS_REGEX)) {
+                filteredLists[tagName] = filteredRooms;
             }
         });
 
-        // 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",
-            "im.vector.fake.recent",
-            "im.vector.fake.direct",
-            Object.keys(otherTagNames).filter(tagName=>{
-                return (!tagName.match(/^m\.(favourite|lowpriority)$/));
-            }).sort(),
-            "m.lowpriority",
-            "im.vector.fake.archived"
-        ];
-*/
-
-        return lists;
+        return filteredLists;
     },
 
     _getScrollNode: function() {
@@ -684,17 +526,20 @@ module.exports = React.createClass({
         const RoomDirectoryButton = sdk.getComponent('elements.RoomDirectoryButton');
         const CreateRoomButton = sdk.getComponent('elements.CreateRoomButton');
 
+        let tip = null;
+
         switch (section) {
             case 'im.vector.fake.direct':
-                return <div className="mx_RoomList_emptySubListTip">
+                tip = <div className="mx_RoomList_emptySubListTip">
                     { _t(
                         "Press <StartChatButton> to start a chat with someone",
                         {},
                         { 'StartChatButton': <StartChatButton size="16" callout={true} /> },
                     ) }
                 </div>;
+                break;
             case 'im.vector.fake.recent':
-                return <div className="mx_RoomList_emptySubListTip">
+                tip = <div className="mx_RoomList_emptySubListTip">
                     { _t(
                         "You're not in any rooms yet! Press <CreateRoomButton> to make a room or"+
                         " <RoomDirectoryButton> to browse the directory",
@@ -705,6 +550,13 @@ module.exports = React.createClass({
                         },
                     ) }
                 </div>;
+                break;
+        }
+
+        if (tip) {
+            return <div className="mx_RoomList_emptySubListTip_container">
+                { tip }
+            </div>;
         }
 
         // We don't want to display drop targets if there are no room tiles to drag'n'drop
@@ -752,116 +604,114 @@ module.exports = React.createClass({
 
         const self = this;
         return (
-            <DragDropContext onDragEnd={this.onRoomTileEndDrag}>
-                <GeminiScrollbar className="mx_RoomList_scrollbar"
-                     autoshow={true} onScroll={self._whenScrolling} ref="gemscroll">
-                <div className="mx_RoomList">
-                    <RoomSubList list={[]}
-                                 extraTiles={this._makeGroupInviteTiles()}
-                                 label={_t('Community Invites')}
-                                 editable={false}
-                                 order="recent"
-                                 isInvite={true}
-                                 collapsed={self.props.collapsed}
-                                 searchFilter={self.props.searchFilter}
-                                 onHeaderClick={self.onSubListHeaderClick}
-                                 onShowMoreRooms={self.onShowMoreRooms}
-                    />
+            <GeminiScrollbar className="mx_RoomList_scrollbar"
+                 autoshow={true} onScroll={self._whenScrolling} ref="gemscroll">
+            <div className="mx_RoomList">
+                <RoomSubList list={[]}
+                             extraTiles={this._makeGroupInviteTiles()}
+                             label={_t('Community Invites')}
+                             editable={false}
+                             order="recent"
+                             isInvite={true}
+                             collapsed={self.props.collapsed}
+                             searchFilter={self.props.searchFilter}
+                             onHeaderClick={self.onSubListHeaderClick}
+                             onShowMoreRooms={self.onShowMoreRooms}
+                />
 
-                    <RoomSubList list={self.state.lists['im.vector.fake.invite']}
-                                 label={_t('Invites')}
-                                 editable={false}
-                                 order="recent"
-                                 isInvite={true}
-                                 incomingCall={self.state.incomingCall}
-                                 collapsed={self.props.collapsed}
-                                 searchFilter={self.props.searchFilter}
-                                 onHeaderClick={self.onSubListHeaderClick}
-                                 onShowMoreRooms={self.onShowMoreRooms}
-                    />
+                <RoomSubList list={self.state.lists['im.vector.fake.invite']}
+                             label={_t('Invites')}
+                             editable={false}
+                             order="recent"
+                             isInvite={true}
+                             incomingCall={self.state.incomingCall}
+                             collapsed={self.props.collapsed}
+                             searchFilter={self.props.searchFilter}
+                             onHeaderClick={self.onSubListHeaderClick}
+                             onShowMoreRooms={self.onShowMoreRooms}
+                />
 
-                    <RoomSubList list={self.state.lists['m.favourite']}
-                                 label={_t('Favourites')}
-                                 tagName="m.favourite"
-                                 emptyContent={this._getEmptyContent('m.favourite')}
-                                 editable={true}
-                                 order="manual"
-                                 incomingCall={self.state.incomingCall}
-                                 collapsed={self.props.collapsed}
-                                 searchFilter={self.props.searchFilter}
-                                 onHeaderClick={self.onSubListHeaderClick}
-                                 onShowMoreRooms={self.onShowMoreRooms} />
+                <RoomSubList list={self.state.lists['m.favourite']}
+                             label={_t('Favourites')}
+                             tagName="m.favourite"
+                             emptyContent={this._getEmptyContent('m.favourite')}
+                             editable={true}
+                             order="manual"
+                             incomingCall={self.state.incomingCall}
+                             collapsed={self.props.collapsed}
+                             searchFilter={self.props.searchFilter}
+                             onHeaderClick={self.onSubListHeaderClick}
+                             onShowMoreRooms={self.onShowMoreRooms} />
 
-                    <RoomSubList list={self.state.lists['im.vector.fake.direct']}
-                                 label={_t('People')}
-                                 tagName="im.vector.fake.direct"
-                                 emptyContent={this._getEmptyContent('im.vector.fake.direct')}
-                                 headerItems={this._getHeaderItems('im.vector.fake.direct')}
-                                 editable={true}
-                                 order="recent"
-                                 incomingCall={self.state.incomingCall}
-                                 collapsed={self.props.collapsed}
-                                 alwaysShowHeader={true}
-                                 searchFilter={self.props.searchFilter}
-                                 onHeaderClick={self.onSubListHeaderClick}
-                                 onShowMoreRooms={self.onShowMoreRooms} />
+                <RoomSubList list={self.state.lists['im.vector.fake.direct']}
+                             label={_t('People')}
+                             tagName="im.vector.fake.direct"
+                             emptyContent={this._getEmptyContent('im.vector.fake.direct')}
+                             headerItems={this._getHeaderItems('im.vector.fake.direct')}
+                             editable={true}
+                             order="recent"
+                             incomingCall={self.state.incomingCall}
+                             collapsed={self.props.collapsed}
+                             alwaysShowHeader={true}
+                             searchFilter={self.props.searchFilter}
+                             onHeaderClick={self.onSubListHeaderClick}
+                             onShowMoreRooms={self.onShowMoreRooms} />
 
-                    <RoomSubList list={self.state.lists['im.vector.fake.recent']}
-                                 label={_t('Rooms')}
-                                 editable={true}
-                                 emptyContent={this._getEmptyContent('im.vector.fake.recent')}
-                                 headerItems={this._getHeaderItems('im.vector.fake.recent')}
-                                 order="recent"
-                                 incomingCall={self.state.incomingCall}
-                                 collapsed={self.props.collapsed}
-                                 searchFilter={self.props.searchFilter}
-                                 onHeaderClick={self.onSubListHeaderClick}
-                                 onShowMoreRooms={self.onShowMoreRooms} />
+                <RoomSubList list={self.state.lists['im.vector.fake.recent']}
+                             label={_t('Rooms')}
+                             editable={true}
+                             emptyContent={this._getEmptyContent('im.vector.fake.recent')}
+                             headerItems={this._getHeaderItems('im.vector.fake.recent')}
+                             order="recent"
+                             incomingCall={self.state.incomingCall}
+                             collapsed={self.props.collapsed}
+                             searchFilter={self.props.searchFilter}
+                             onHeaderClick={self.onSubListHeaderClick}
+                             onShowMoreRooms={self.onShowMoreRooms} />
 
-                    { Object.keys(self.state.lists).map((tagName) => {
-                        if (!tagName.match(/^(m\.(favourite|lowpriority)|im\.vector\.fake\.(invite|recent|direct|archived))$/)) {
-                            return <RoomSubList list={self.state.lists[tagName]}
-                                 key={tagName}
-                                 label={tagName}
-                                 tagName={tagName}
-                                 emptyContent={this._getEmptyContent(tagName)}
-                                 editable={true}
-                                 order="manual"
-                                 incomingCall={self.state.incomingCall}
-                                 collapsed={self.props.collapsed}
-                                 searchFilter={self.props.searchFilter}
-                                 onHeaderClick={self.onSubListHeaderClick}
-                                 onShowMoreRooms={self.onShowMoreRooms} />;
-                        }
-                    }) }
+                { Object.keys(self.state.lists).map((tagName) => {
+                    if (!tagName.match(STANDARD_TAGS_REGEX)) {
+                        return <RoomSubList list={self.state.lists[tagName]}
+                             key={tagName}
+                             label={tagName}
+                             tagName={tagName}
+                             emptyContent={this._getEmptyContent(tagName)}
+                             editable={true}
+                             order="manual"
+                             incomingCall={self.state.incomingCall}
+                             collapsed={self.props.collapsed}
+                             searchFilter={self.props.searchFilter}
+                             onHeaderClick={self.onSubListHeaderClick}
+                             onShowMoreRooms={self.onShowMoreRooms} />;
+                    }
+                }) }
 
-                    <RoomSubList list={self.state.lists['m.lowpriority']}
-                                 label={_t('Low priority')}
-                                 tagName="m.lowpriority"
-                                 emptyContent={this._getEmptyContent('m.lowpriority')}
-                                 editable={true}
-                                 order="recent"
-                                 incomingCall={self.state.incomingCall}
-                                 collapsed={self.props.collapsed}
-                                 searchFilter={self.props.searchFilter}
-                                 onHeaderClick={self.onSubListHeaderClick}
-                                 onShowMoreRooms={self.onShowMoreRooms} />
+                <RoomSubList list={self.state.lists['m.lowpriority']}
+                             label={_t('Low priority')}
+                             tagName="m.lowpriority"
+                             emptyContent={this._getEmptyContent('m.lowpriority')}
+                             editable={true}
+                             order="recent"
+                             incomingCall={self.state.incomingCall}
+                             collapsed={self.props.collapsed}
+                             searchFilter={self.props.searchFilter}
+                             onHeaderClick={self.onSubListHeaderClick}
+                             onShowMoreRooms={self.onShowMoreRooms} />
 
-                    <RoomSubList list={self.state.lists['im.vector.fake.archived']}
-                                 label={_t('Historical')}
-                                 editable={false}
-                                 order="recent"
-                                 collapsed={self.props.collapsed}
-                                 alwaysShowHeader={true}
-                                 startAsHidden={true}
-                                 showSpinner={self.state.isLoadingLeftRooms}
-                                 onHeaderClick= {self.onArchivedHeaderClick}
-                                 incomingCall={self.state.incomingCall}
-                                 searchFilter={self.props.searchFilter}
-                                 onShowMoreRooms={self.onShowMoreRooms} />
-                </div>
-                </GeminiScrollbar>
-            </DragDropContext>
+                <RoomSubList list={self.state.lists['im.vector.fake.archived']}
+                             label={_t('Historical')}
+                             editable={false}
+                             order="recent"
+                             collapsed={self.props.collapsed}
+                             alwaysShowHeader={true}
+                             startAsHidden={true}
+                             showSpinner={self.state.isLoadingLeftRooms}
+                             onHeaderClick= {self.onArchivedHeaderClick}
+                             incomingCall={self.state.incomingCall}
+                             searchFilter={self.props.searchFilter}
+                             onShowMoreRooms={self.onShowMoreRooms} />
+            </div>
+            </GeminiScrollbar>
         );
     },
 });

src/components/views/rooms/RoomNameEditor.js

@@ -29,13 +29,21 @@ module.exports = React.createClass({
         room: PropTypes.object.isRequired,
     },
 
+    getInitialState: function() {
+        return {
+            name: null,
+        };
+    },
+
     componentWillMount: function() {
         const room = this.props.room;
         const name = room.currentState.getStateEvents('m.room.name', '');
         const myId = MatrixClientPeg.get().credentials.userId;
         const defaultName = room.getDefaultRoomName(myId);
 
-        this._initialName = name ? name.getContent().name : '';
+        this.setState({
+            name: name ? name.getContent().name : '',
+        });
 
         this._placeholderName = _t("Unnamed Room");
         if (defaultName && defaultName !== 'Empty room') { // default name from JS SDK, needs no translation as we don't ever show it.
@@ -44,7 +52,13 @@ module.exports = React.createClass({
     },
 
     getRoomName: function() {
-        return this.refs.editor.getValue();
+        return this.state.name;
+    },
+
+    _onValueChanged: function(value, shouldSubmit) {
+        this.setState({
+            name: value,
+        });
     },
 
     render: function() {
@@ -57,7 +71,8 @@ module.exports = React.createClass({
                          placeholderClassName="mx_RoomHeader_placeholder"
                          placeholder={this._placeholderName}
                          blurToCancel={false}
-                         initialValue={this._initialName}
+                         initialValue={this.state.name}
+                         onValueChanged={this._onValueChanged}
                          dir="auto" />
                 </div>
         );

src/components/views/rooms/RoomSettings.js

@@ -117,7 +117,6 @@ module.exports = React.createClass({
 
     propTypes: {
         room: PropTypes.object.isRequired,
-        onSaveClick: PropTypes.func,
     },
 
     getInitialState: function() {
@@ -132,7 +131,8 @@ module.exports = React.createClass({
             join_rule: this._yankValueFromEvent("m.room.join_rules", "join_rule"),
             history_visibility: this._yankValueFromEvent("m.room.history_visibility", "history_visibility"),
             guest_access: this._yankValueFromEvent("m.room.guest_access", "guest_access"),
-            power_levels_changed: false,
+            powerLevels: this._yankContentFromEvent("m.room.power_levels", {}),
+            powerLevelsChanged: false,
             tags_changed: false,
             tags: tags,
             // isRoomPublished is loaded async in componentWillMount so when the component
@@ -151,7 +151,7 @@ module.exports = React.createClass({
 
         MatrixClientPeg.get().getRoomDirectoryVisibility(
             this.props.room.roomId,
-        ).done((result) => {
+        ).done((result = {}) => {
             this.setState({ isRoomPublished: result.visibility === "public" });
             this._originalIsRoomPublished = result.visibility === "public";
         }, (err) => {
@@ -272,8 +272,8 @@ module.exports = React.createClass({
 
 
         // power levels
-        const powerLevels = this._getPowerLevels();
-        if (powerLevels) {
+        const powerLevels = this.state.powerLevels;
+        if (this.state.powerLevelsChanged) {
             promises.push(MatrixClientPeg.get().sendStateEvent(
                 roomId, "m.room.power_levels", powerLevels, "",
             ));
@@ -384,36 +384,32 @@ module.exports = React.createClass({
         return strA !== strB;
     },
 
-    _getPowerLevels: function() {
-        if (!this.state.power_levels_changed) return undefined;
+    onPowerLevelsChanged: function(value, powerLevelKey) {
+        const powerLevels = Object.assign({}, this.state.powerLevels);
+        const eventsLevelPrefix = "event_levels_";
 
-        let powerLevels = this.props.room.currentState.getStateEvents('m.room.power_levels', '');
-        powerLevels = powerLevels ? powerLevels.getContent() : {};
+        value = parseInt(value);
 
-        for (const key of Object.keys(this.refs).filter((k) => k.startsWith("event_levels_"))) {
-            const eventType = key.substring("event_levels_".length);
-            powerLevels.events[eventType] = parseInt(this.refs[key].getValue());
+        if (powerLevelKey.startsWith(eventsLevelPrefix)) {
+            // deep copy "events" object, Object.assign itself won't deep copy
+            powerLevels["events"] = Object.assign({}, this.state.powerLevels["events"] || {});
+            powerLevels["events"][powerLevelKey.slice(eventsLevelPrefix.length)] = value;
+        } else {
+            powerLevels[powerLevelKey] = value;
         }
-
-        const newPowerLevels = {
-            ban: parseInt(this.refs.ban.getValue()),
-            kick: parseInt(this.refs.kick.getValue()),
-            redact: parseInt(this.refs.redact.getValue()),
-            invite: parseInt(this.refs.invite.getValue()),
-            events_default: parseInt(this.refs.events_default.getValue()),
-            state_default: parseInt(this.refs.state_default.getValue()),
-            users_default: parseInt(this.refs.users_default.getValue()),
-            users: powerLevels.users,
-            events: powerLevels.events,
-        };
-
-        return newPowerLevels;
+        this.setState({
+            powerLevels,
+            powerLevelsChanged: true,
+        });
     },
 
-    onPowerLevelsChanged: function() {
-        this.setState({
-            power_levels_changed: true,
-        });
+    _yankContentFromEvent: function(stateEventType, defaultValue) {
+        // E.g.("m.room.name") would yank the content of "m.room.name"
+        const event = this.props.room.currentState.getStateEvents(stateEventType, '');
+        if (!event) {
+            return defaultValue;
+        }
+        return event.getContent() || defaultValue;
     },
 
     _yankValueFromEvent: function(stateEventType, keyName, defaultValue) {
@@ -633,29 +629,61 @@ module.exports = React.createClass({
 
         const cli = MatrixClientPeg.get();
         const roomState = this.props.room.currentState;
-        const user_id = cli.credentials.userId;
+        const myUserId = cli.credentials.userId;
 
-        const power_level_event = roomState.getStateEvents('m.room.power_levels', '');
-        const power_levels = power_level_event ? power_level_event.getContent() : {};
-        const events_levels = power_levels.events || {};
-        const user_levels = power_levels.users || {};
+        const powerLevels = this.state.powerLevels;
+        const eventsLevels = powerLevels.events || {};
+        const userLevels = powerLevels.users || {};
 
-        const ban_level = parseIntWithDefault(power_levels.ban, 50);
-        const kick_level = parseIntWithDefault(power_levels.kick, 50);
-        const redact_level = parseIntWithDefault(power_levels.redact, 50);
-        const invite_level = parseIntWithDefault(power_levels.invite, 50);
-        const send_level = parseIntWithDefault(power_levels.events_default, 0);
-        const state_level = power_level_event ? parseIntWithDefault(power_levels.state_default, 50) : 0;
-        const default_user_level = parseIntWithDefault(power_levels.users_default, 0);
+        const powerLevelDescriptors = {
+            users_default: {
+                desc: _t('The default role for new room members is'),
+                defaultValue: 0,
+            },
+            events_default: {
+                desc: _t('To send messages, you must be a'),
+                defaultValue: 0,
+            },
+            invite: {
+                desc: _t('To invite users into the room, you must be a'),
+                defaultValue: 50,
+            },
+            state_default: {
+                desc: _t('To configure the room, you must be a'),
+                defaultValue: 50,
+            },
+            kick: {
+                desc: _t('To kick users, you must be a'),
+                defaultValue: 50,
+            },
+            ban: {
+                desc: _t('To ban users, you must be a'),
+                defaultValue: 50,
+            },
+            redact: {
+                desc: _t('To remove other users\' messages, you must be a'),
+                defaultValue: 50,
+            },
+        };
 
-        this._populateDefaultPlEvents(events_levels, state_level, send_level);
+        const banLevel = parseIntWithDefault(powerLevels.ban, powerLevelDescriptors.ban.defaultValue);
+        const defaultUserLevel = parseIntWithDefault(
+            powerLevels.users_default,
+            powerLevelDescriptors.users_default.defaultValue,
+        );
 
-        let current_user_level = user_levels[user_id];
-        if (current_user_level === undefined) {
-            current_user_level = default_user_level;
+        this._populateDefaultPlEvents(
+            eventsLevels,
+            parseIntWithDefault(powerLevels.state_default, powerLevelDescriptors.state_default.defaultValue),
+            parseIntWithDefault(powerLevels.events_default, powerLevelDescriptors.events_default.defaultValue),
+        );
+
+        let currentUserLevel = userLevels[myUserId];
+        if (currentUserLevel === undefined) {
+            currentUserLevel = defaultUserLevel;
         }
 
-        const can_change_levels = roomState.mayClientSendStateEvent("m.room.power_levels", cli);
+        const canChangeLevels = roomState.mayClientSendStateEvent("m.room.power_levels", cli);
 
         const canSetTag = !cli.isGuest();
 
@@ -668,15 +696,18 @@ module.exports = React.createClass({
         />;
 
         let userLevelsSection;
-        if (Object.keys(user_levels).length) {
+        if (Object.keys(userLevels).length) {
             userLevelsSection =
                 <div>
                     <h3>{ _t('Privileged Users') }</h3>
                     <ul className="mx_RoomSettings_userLevels">
-                        { Object.keys(user_levels).map(function(user, i) {
+                        { Object.keys(userLevels).map(function(user, i) {
                             return (
                                 <li className="mx_RoomSettings_userLevel" key={user}>
-                                    { _t("%(user)s is a", {user: user}) } <PowerSelector value={user_levels[user]} disabled={true} />
+                                    { _t("%(user)s is a %(userRole)s", {
+                                        user: user,
+                                        userRole: <PowerSelector value={userLevels[user]} disabled={true} />,
+                                    }) }
                                 </li>
                             );
                         }) }
@@ -689,7 +720,7 @@ module.exports = React.createClass({
         const banned = this.props.room.getMembersWithMembership("ban");
         let bannedUsersSection;
         if (banned.length) {
-            const canBanUsers = current_user_level >= ban_level;
+            const canBanUsers = currentUserLevel >= banLevel;
             bannedUsersSection =
                 <div>
                     <h3>{ _t('Banned users') }</h3>
@@ -711,13 +742,13 @@ module.exports = React.createClass({
         if (this._yankValueFromEvent("m.room.create", "m.federate", true) === false) {
              unfederatableSection = (
                 <div className="mx_RoomSettings_powerLevel">
-                { _t('This room is not accessible by remote Matrix servers') }.
+                    { _t('This room is not accessible by remote Matrix servers') }.
                 </div>
             );
         }
 
         let leaveButton = null;
-        const myMember = this.props.room.getMember(user_id);
+        const myMember = this.props.room.getMember(myUserId);
         if (myMember) {
             if (myMember.membership === "join") {
                 leaveButton = (
@@ -800,6 +831,50 @@ module.exports = React.createClass({
                 </div>;
         }
 
+        const powerSelectors = Object.keys(powerLevelDescriptors).map((key, index) => {
+            const descriptor = powerLevelDescriptors[key];
+
+            const value = parseIntWithDefault(powerLevels[key], descriptor.defaultValue);
+            return <div key={index} className="mx_RoomSettings_powerLevel">
+                <span className="mx_RoomSettings_powerLevelKey">
+                    { descriptor.desc }
+                </span>
+                <PowerSelector
+                    value={value}
+                    usersDefault={defaultUserLevel}
+                    controlled={false}
+                    disabled={!canChangeLevels || currentUserLevel < value}
+                    powerLevelKey={key} // Will be sent as the second parameter to `onChange`
+                    onChange={this.onPowerLevelsChanged}
+                />
+            </div>;
+        });
+
+        const eventPowerSelectors = Object.keys(eventsLevels).map(function(eventType, i) {
+            let label = plEventsToLabels[eventType];
+            if (label) {
+                label = _t(label);
+            } else {
+                label = _t(
+                    "To send events of type <eventType/>, you must be a", {},
+                    { 'eventType': <code>{ eventType }</code> },
+                );
+            }
+            return (
+                <div className="mx_RoomSettings_powerLevel" key={eventType}>
+                    <span className="mx_RoomSettings_powerLevelKey">{ label } </span>
+                    <PowerSelector
+                        value={eventsLevels[eventType]}
+                        usersDefault={defaultUserLevel}
+                        controlled={false}
+                        disabled={!canChangeLevels || currentUserLevel < eventsLevels[eventType]}
+                        powerLevelKey={"event_levels_" + eventType}
+                        onChange={self.onPowerLevelsChanged}
+                    />
+                </div>
+            );
+        });
+
         return (
             <div className="mx_RoomSettings">
 
@@ -899,49 +974,9 @@ module.exports = React.createClass({
 
                 <h3>{ _t('Permissions') }</h3>
                 <div className="mx_RoomSettings_powerLevels mx_RoomSettings_settings">
-                    <div className="mx_RoomSettings_powerLevel">
-                        <span className="mx_RoomSettings_powerLevelKey">{ _t('The default role for new room members is') } </span>
-                        <PowerSelector ref="users_default" value={default_user_level} usersDefault={default_user_level} controlled={false} disabled={!can_change_levels || current_user_level < default_user_level} onChange={this.onPowerLevelsChanged} />
-                    </div>
-                    <div className="mx_RoomSettings_powerLevel">
-                        <span className="mx_RoomSettings_powerLevelKey">{ _t('To send messages, you must be a') } </span>
-                        <PowerSelector ref="events_default" value={send_level} usersDefault={default_user_level} controlled={false} disabled={!can_change_levels || current_user_level < send_level} onChange={this.onPowerLevelsChanged} />
-                    </div>
-                    <div className="mx_RoomSettings_powerLevel">
-                        <span className="mx_RoomSettings_powerLevelKey">{ _t('To invite users into the room, you must be a') } </span>
-                        <PowerSelector ref="invite" value={invite_level} usersDefault={default_user_level} controlled={false} disabled={!can_change_levels || current_user_level < invite_level} onChange={this.onPowerLevelsChanged} />
-                    </div>
-                    <div className="mx_RoomSettings_powerLevel">
-                        <span className="mx_RoomSettings_powerLevelKey">{ _t('To configure the room, you must be a') } </span>
-                        <PowerSelector ref="state_default" value={state_level} usersDefault={default_user_level} controlled={false} disabled={!can_change_levels || current_user_level < state_level} onChange={this.onPowerLevelsChanged} />
-                    </div>
-                    <div className="mx_RoomSettings_powerLevel">
-                        <span className="mx_RoomSettings_powerLevelKey">{ _t('To kick users, you must be a') } </span>
-                        <PowerSelector ref="kick" value={kick_level} usersDefault={default_user_level} controlled={false} disabled={!can_change_levels || current_user_level < kick_level} onChange={this.onPowerLevelsChanged} />
-                    </div>
-                    <div className="mx_RoomSettings_powerLevel">
-                        <span className="mx_RoomSettings_powerLevelKey">{ _t('To ban users, you must be a') } </span>
-                        <PowerSelector ref="ban" value={ban_level} usersDefault={default_user_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">{ _t('To remove other users\' messages, you must be a') } </span>
-                        <PowerSelector ref="redact" value={redact_level} usersDefault={default_user_level} controlled={false} disabled={!can_change_levels || current_user_level < redact_level} onChange={this.onPowerLevelsChanged} />
-                    </div>
-
-                    { Object.keys(events_levels).map(function(event_type, i) {
-                        let label = plEventsToLabels[event_type];
-                        if (label) label = _t(label);
-                        else label = _t("To send events of type <eventType/>, you must be a", {}, { 'eventType': <code>{ event_type }</code> });
-                        return (
-                            <div className="mx_RoomSettings_powerLevel" key={event_type}>
-                                <span className="mx_RoomSettings_powerLevelKey">{ label } </span>
-                                <PowerSelector ref={"event_levels_"+event_type} value={events_levels[event_type]} usersDefault={default_user_level} onChange={self.onPowerLevelsChanged}
-                                               controlled={false} disabled={!can_change_levels || current_user_level < events_levels[event_type]} />
-                            </div>
-                        );
-                    }) }
-
-                { unfederatableSection }
+                    { powerSelectors }
+                    { eventPowerSelectors }
+                    { unfederatableSection }
                 </div>
 
                 { userLevelsSection }

src/components/views/rooms/RoomTile.js

@@ -21,6 +21,7 @@ const React = require('react');
 const ReactDOM = require("react-dom");
 import PropTypes from 'prop-types';
 const classNames = require('classnames');
+import dis from '../../../dispatcher';
 const MatrixClientPeg = require('../../../MatrixClientPeg');
 import DMRoomMap from '../../../utils/DMRoomMap';
 const sdk = require('../../../index');
@@ -41,6 +42,8 @@ module.exports = React.createClass({
         collapsed: PropTypes.bool.isRequired,
         unread: PropTypes.bool.isRequired,
         highlight: PropTypes.bool.isRequired,
+        // If true, apply mx_RoomTile_transparent class
+        transparent: PropTypes.bool,
         isInvite: PropTypes.bool.isRequired,
         incomingCall: PropTypes.object,
     },
@@ -56,7 +59,9 @@ module.exports = React.createClass({
             hover: false,
             badgeHover: false,
             menuDisplayed: false,
+            roomName: this.props.room.name,
             notifState: RoomNotifs.getRoomNotifsState(this.props.room.roomId),
+            notificationCount: this.props.room.getUnreadNotificationCount(),
             selected: this.props.room.roomId === RoomViewStore.getRoomId(),
         });
     },
@@ -79,6 +84,20 @@ module.exports = React.createClass({
         }
     },
 
+    onRoomTimeline: function(ev, room) {
+        if (room !== this.props.room) return;
+        this.setState({
+            notificationCount: this.props.room.getUnreadNotificationCount(),
+        });
+    },
+
+    onRoomName: function(room) {
+        if (room !== this.props.room) return;
+        this.setState({
+            roomName: this.props.room.name,
+        });
+    },
+
     onAccountData: function(accountDataEvent) {
         if (accountDataEvent.getType() == 'm.push_rules') {
             this.setState({
@@ -87,6 +106,21 @@ module.exports = React.createClass({
         }
     },
 
+    onAction: function(payload) {
+        switch (payload.action) {
+            // XXX: slight hack in order to zero the notification count when a room
+            // is read. Ideally this state would be given to this via props (as we
+            // do with `unread`). This is still better than forceUpdating the entire
+            // RoomList when a room is read.
+            case 'on_room_read':
+                if (payload.roomId !== this.props.room.roomId) break;
+                this.setState({
+                    notificationCount: this.props.room.getUnreadNotificationCount(),
+                });
+            break;
+        }
+    },
+
     _onActiveRoomChange: function() {
         this.setState({
             selected: this.props.room.roomId === RoomViewStore.getRoomId(),
@@ -95,15 +129,37 @@ module.exports = React.createClass({
 
     componentWillMount: function() {
         MatrixClientPeg.get().on("accountData", this.onAccountData);
+        MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
+        MatrixClientPeg.get().on("Room.name", this.onRoomName);
         ActiveRoomObserver.addListener(this.props.room.roomId, this._onActiveRoomChange);
+        this.dispatcherRef = dis.register(this.onAction);
     },
 
     componentWillUnmount: function() {
         const cli = MatrixClientPeg.get();
         if (cli) {
             MatrixClientPeg.get().removeListener("accountData", this.onAccountData);
+            MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
+            MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
         }
         ActiveRoomObserver.removeListener(this.props.room.roomId, this._onActiveRoomChange);
+        dis.unregister(this.dispatcherRef);
+    },
+
+    // Do a simple shallow comparison of props and state to avoid unnecessary
+    // renders. The assumption made here is that only state and props are used
+    // in rendering this component and children.
+    //
+    // RoomList is frequently made to forceUpdate, so this decreases number of
+    // RoomTile renderings.
+    shouldComponentUpdate: function(newProps, newState) {
+        if (Object.keys(newProps).some((k) => newProps[k] !== this.props[k])) {
+            return true;
+        }
+        if (Object.keys(newState).some((k) => newState[k] !== this.state[k])) {
+            return true;
+        }
+        return false;
     },
 
     onClick: function(ev) {
@@ -172,7 +228,7 @@ module.exports = React.createClass({
         const myUserId = MatrixClientPeg.get().credentials.userId;
         const me = this.props.room.currentState.members[myUserId];
 
-        const notificationCount = this.props.room.getUnreadNotificationCount();
+        const notificationCount = this.state.notificationCount;
         // var highlightCount = this.props.room.getUnreadNotificationCount("highlight");
 
         const notifBadges = notificationCount > 0 && this._shouldShowNotifBadge();
@@ -188,6 +244,7 @@ module.exports = React.createClass({
             'mx_RoomTile_invited': (me && me.membership == 'invite'),
             'mx_RoomTile_menuDisplayed': this.state.menuDisplayed,
             'mx_RoomTile_noBadges': !badges,
+            'mx_RoomTile_transparent': this.props.transparent,
         });
 
         const avatarClasses = classNames({
@@ -199,9 +256,7 @@ module.exports = React.createClass({
             'mx_RoomTile_badgeButton': this.state.badgeHover || this.state.menuDisplayed,
         });
 
-        // XXX: We should never display raw room IDs, but sometimes the
-        // room name js sdk gives is undefined (cannot repro this -- k)
-        let name = this.props.room.name || this.props.room.roomId;
+        let name = this.state.roomName;
         name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
 
         let badge;

src/components/views/rooms/RoomTopicEditor.js

@@ -28,26 +28,41 @@ module.exports = React.createClass({
         room: PropTypes.object.isRequired,
     },
 
+    getInitialState: function() {
+        return {
+            topic: null,
+        };
+    },
+
     componentWillMount: function() {
         const room = this.props.room;
         const topic = room.currentState.getStateEvents('m.room.topic', '');
-        this._initialTopic = topic ? topic.getContent().topic : '';
+        this.setState({
+            topic: topic ? topic.getContent().topic : '',
+        });
     },
 
     getTopic: function() {
-        return this.refs.editor.getValue();
+        return this.state.topic;
+    },
+
+    _onValueChanged: function(value) {
+        this.setState({
+            topic: value,
+        });
     },
 
     render: function() {
         const EditableText = sdk.getComponent("elements.EditableText");
 
         return (
-                <EditableText ref="editor"
+                <EditableText
                      className="mx_RoomHeader_topic mx_RoomHeader_editable"
                      placeholderClassName="mx_RoomHeader_placeholder"
                      placeholder={_t("Add a topic")}
                      blurToCancel={false}
-                     initialValue={this._initialTopic}
+                     initialValue={this.state.topic}
+                     onValueChanged={this._onValueChanged}
                      dir="auto" />
         );
     },