Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into set_default_federate_by_settings

src/components/views/avatars/BaseAvatar.js

@@ -14,10 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
-var React = require('react');
-var AvatarLogic = require("../../../Avatar");
+import React from 'react';
+import AvatarLogic from '../../../Avatar';
 import sdk from '../../../index';
 import AccessibleButton from '../elements/AccessibleButton';
 

src/components/views/avatars/RoomAvatar.js

@@ -13,11 +13,10 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-var React = require('react');
-var ContentRepo = require("matrix-js-sdk").ContentRepo;
-var MatrixClientPeg = require('../../../MatrixClientPeg');
-var Avatar = require('../../../Avatar');
-var sdk = require("../../../index");
+import React from "react";
+import {ContentRepo} from "matrix-js-sdk";
+import MatrixClientPeg from "../../../MatrixClientPeg";
+import sdk from "../../../index";
 
 module.exports = React.createClass({
     displayName: 'RoomAvatar',
@@ -30,7 +29,7 @@ module.exports = React.createClass({
         oobData: React.PropTypes.object,
         width: React.PropTypes.number,
         height: React.PropTypes.number,
-        resizeMethod: React.PropTypes.string
+        resizeMethod: React.PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -44,13 +43,13 @@ module.exports = React.createClass({
 
     getInitialState: function() {
         return {
-            urls: this.getImageUrls(this.props)
+            urls: this.getImageUrls(this.props),
         };
     },
 
     componentWillReceiveProps: function(newProps) {
         this.setState({
-            urls: this.getImageUrls(newProps)
+            urls: this.getImageUrls(newProps),
         });
     },
 
@@ -61,11 +60,10 @@ module.exports = React.createClass({
                 props.oobData.avatarUrl,
                 Math.floor(props.width * window.devicePixelRatio),
                 Math.floor(props.height * window.devicePixelRatio),
-                props.resizeMethod
+                props.resizeMethod,
             ), // highest priority
             this.getRoomAvatarUrl(props),
-            this.getOneToOneAvatar(props),
-            this.getFallbackAvatar(props) // lowest priority
+            this.getOneToOneAvatar(props), // lowest priority
         ].filter(function(url) {
             return (url != null && url != "");
         });
@@ -79,17 +77,17 @@ module.exports = React.createClass({
             Math.floor(props.width * window.devicePixelRatio),
             Math.floor(props.height * window.devicePixelRatio),
             props.resizeMethod,
-            false
+            false,
         );
     },
 
     getOneToOneAvatar: function(props) {
         if (!props.room) return null;
 
-        var mlist = props.room.currentState.members;
-        var userIds = [];
+        const mlist = props.room.currentState.members;
+        const userIds = [];
         // for .. in optimisation to return early if there are >2 keys
-        for (var uid in mlist) {
+        for (const uid in mlist) {
             if (mlist.hasOwnProperty(uid)) {
                 userIds.push(uid);
             }
@@ -99,7 +97,7 @@ module.exports = React.createClass({
         }
 
         if (userIds.length == 2) {
-            var theOtherGuy = null;
+            let theOtherGuy = null;
             if (mlist[userIds[0]].userId == MatrixClientPeg.get().credentials.userId) {
                 theOtherGuy = mlist[userIds[1]];
             } else {
@@ -110,7 +108,7 @@ module.exports = React.createClass({
                 Math.floor(props.width * window.devicePixelRatio),
                 Math.floor(props.height * window.devicePixelRatio),
                 props.resizeMethod,
-                false
+                false,
             );
         } else if (userIds.length == 1) {
             return mlist[userIds[0]].getAvatarUrl(
@@ -118,37 +116,24 @@ module.exports = React.createClass({
                 Math.floor(props.width * window.devicePixelRatio),
                 Math.floor(props.height * window.devicePixelRatio),
                 props.resizeMethod,
-                false
+                false,
             );
         } else {
            return null;
         }
     },
 
-    getFallbackAvatar: function(props) {
-        let roomId = null;
-        if (props.oobData && props.oobData.roomId) {
-            roomId = this.props.oobData.roomId;
-        } else if (props.room) {
-            roomId = props.room.roomId;
-        } else {
-            return null;
-        }
-
-        return Avatar.defaultAvatarUrlForString(roomId);
-    },
-
     render: function() {
-        var BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
 
-        var {room, oobData, ...otherProps} = this.props;
+        const {room, oobData, ...otherProps} = this.props;
 
-        var roomName = room ? room.name : oobData.name;
+        const roomName = room ? room.name : oobData.name;
 
         return (
             <BaseAvatar {...otherProps} name={roomName}
                 idName={room ? room.roomId : null}
                 urls={this.state.urls} />
         );
-    }
+    },
 });

src/components/views/dialogs/AddressPickerDialog.js

@@ -28,7 +28,7 @@ const TRUNCATE_QUERY_LIST = 40;
 const QUERY_USER_DIRECTORY_DEBOUNCE_MS = 200;
 
 module.exports = React.createClass({
-    displayName: "UserPickerDialog",
+    displayName: "AddressPickerDialog",
 
     propTypes: {
         title: PropTypes.string.isRequired,
@@ -38,8 +38,14 @@ module.exports = React.createClass({
         roomId: PropTypes.string,
         button: PropTypes.string,
         focus: PropTypes.bool,
-        validAddressTypes: PropTypes.arrayOf(PropTypes.oneOfType(addressTypes)),
+        validAddressTypes: PropTypes.arrayOf(PropTypes.oneOf(addressTypes)),
         onFinished: PropTypes.func.isRequired,
+        groupId: PropTypes.string,
+        // The type of entity to search for. Default: 'user'.
+        pickerType: PropTypes.oneOf(['user', 'room']),
+        // Whether the current user should be included in the addresses returned. Only
+        // applicable when pickerType is `user`. Default: false.
+        includeSelf: PropTypes.bool,
     },
 
     getDefaultProps: function() {
@@ -47,6 +53,8 @@ module.exports = React.createClass({
             value: "",
             focus: true,
             validAddressTypes: addressTypes,
+            pickerType: 'user',
+            includeSelf: false,
         };
     },
 
@@ -140,10 +148,22 @@ module.exports = React.createClass({
         // Only do search if there is something to search
         if (query.length > 0 && query != '@' && query.length >= 2) {
             this.queryChangedDebouncer = setTimeout(() => {
-                if (this.state.serverSupportsUserDirectory) {
-                    this._doUserDirectorySearch(query);
+                if (this.props.pickerType === 'user') {
+                    if (this.props.groupId) {
+                        this._doNaiveGroupSearch(query);
+                    } else if (this.state.serverSupportsUserDirectory) {
+                        this._doUserDirectorySearch(query);
+                    } else {
+                        this._doLocalSearch(query);
+                    }
+                } else if (this.props.pickerType === 'room') {
+                    if (this.props.groupId) {
+                        this._doNaiveGroupRoomSearch(query);
+                    } else {
+                        this._doRoomSearch(query);
+                    }
                 } else {
-                    this._doLocalSearch(query);
+                    console.error('Unknown pickerType', this.props.pickerType);
                 }
             }, QUERY_USER_DIRECTORY_DEBOUNCE_MS);
         } else {
@@ -185,6 +205,101 @@ module.exports = React.createClass({
         if (this._cancelThreepidLookup) this._cancelThreepidLookup();
     },
 
+    _doNaiveGroupSearch: function(query) {
+        const lowerCaseQuery = query.toLowerCase();
+        this.setState({
+            busy: true,
+            query,
+            searchError: null,
+        });
+        MatrixClientPeg.get().getGroupUsers(this.props.groupId).then((resp) => {
+            const results = [];
+            resp.chunk.forEach((u) => {
+                const userIdMatch = u.user_id.toLowerCase().includes(lowerCaseQuery);
+                const displayNameMatch = (u.displayname || '').toLowerCase().includes(lowerCaseQuery);
+                if (!(userIdMatch || displayNameMatch)) {
+                    return;
+                }
+                results.push({
+                    user_id: u.user_id,
+                    avatar_url: u.avatar_url,
+                    display_name: u.displayname,
+                });
+            });
+            this._processResults(results, query);
+        }).catch((err) => {
+            console.error('Error whilst searching group rooms: ', err);
+            this.setState({
+                searchError: err.errcode ? err.message : _t('Something went wrong!'),
+            });
+        }).done(() => {
+            this.setState({
+                busy: false,
+            });
+        });
+    },
+
+    _doNaiveGroupRoomSearch: function(query) {
+        const lowerCaseQuery = query.toLowerCase();
+        MatrixClientPeg.get().getGroupRooms(this.props.groupId).then((resp) => {
+            const results = [];
+            resp.chunk.forEach((r) => {
+                const nameMatch = (r.name || '').toLowerCase().includes(lowerCaseQuery);
+                const topicMatch = (r.topic || '').toLowerCase().includes(lowerCaseQuery);
+                const aliasMatch = (r.canonical_alias || '').toLowerCase().includes(lowerCaseQuery);
+                if (!(nameMatch || topicMatch || aliasMatch)) {
+                    return;
+                }
+                results.push({
+                    room_id: r.room_id,
+                    avatar_url: r.avatar_url,
+                    name: r.name || r.canonical_alias,
+                });
+            });
+            this._processResults(results, query);
+        }).catch((err) => {
+            console.error('Error whilst searching group users: ', err);
+            this.setState({
+                searchError: err.errcode ? err.message : _t('Something went wrong!'),
+            });
+        }).done(() => {
+            this.setState({
+                busy: false,
+            });
+        });
+    },
+
+    _doRoomSearch: function(query) {
+        const lowerCaseQuery = query.toLowerCase();
+        const rooms = MatrixClientPeg.get().getRooms();
+        const results = [];
+        rooms.forEach((room) => {
+            const nameEvent = room.currentState.getStateEvents('m.room.name', '');
+            const topicEvent = room.currentState.getStateEvents('m.room.topic', '');
+            const name = nameEvent ? nameEvent.getContent().name : '';
+            const canonicalAlias = room.getCanonicalAlias();
+            const topic = topicEvent ? topicEvent.getContent().topic : '';
+
+            const nameMatch = (name || '').toLowerCase().includes(lowerCaseQuery);
+            const aliasMatch = (canonicalAlias || '').toLowerCase().includes(lowerCaseQuery);
+            const topicMatch = (topic || '').toLowerCase().includes(lowerCaseQuery);
+            if (!(nameMatch || topicMatch || aliasMatch)) {
+                return;
+            }
+            const avatarEvent = room.currentState.getStateEvents('m.room.avatar', '');
+            const avatarUrl = avatarEvent ? avatarEvent.getContent().url : undefined;
+            results.push({
+                room_id: room.roomId,
+                avatar_url: avatarUrl,
+                name: name || canonicalAlias,
+            });
+        });
+        this._processResults(results, query);
+        this.setState({
+            busy: false,
+        });
+    },
+
     _doUserDirectorySearch: function(query) {
         this.setState({
             busy: true,
@@ -245,17 +360,30 @@ module.exports = React.createClass({
 
     _processResults: function(results, query) {
         const queryList = [];
-        results.forEach((user) => {
-            if (user.user_id === MatrixClientPeg.get().credentials.userId) {
+        results.forEach((result) => {
+            if (result.room_id) {
+                queryList.push({
+                    addressType: 'mx-room-id',
+                    address: result.room_id,
+                    displayName: result.name,
+                    avatarMxc: result.avatar_url,
+                    isKnown: true,
+                });
                 return;
             }
+            if (!this.props.includeSelf &&
+                result.user_id === MatrixClientPeg.get().credentials.userId
+            ) {
+                return;
+            }
+
             // Return objects, structure of which is defined
             // by UserAddressType
             queryList.push({
-                addressType: 'mx',
-                address: user.user_id,
-                displayName: user.display_name,
-                avatarMxc: user.avatar_url,
+                addressType: 'mx-user-id',
+                address: result.user_id,
+                displayName: result.display_name,
+                avatarMxc: result.avatar_url,
                 isKnown: true,
             });
         });
@@ -291,16 +419,23 @@ module.exports = React.createClass({
             address: addressText,
             isKnown: false,
         };
-        if (addrType == null) {
+        if (!this.props.validAddressTypes.includes(addrType)) {
             this.setState({ error: true });
             return null;
-        } else if (addrType == 'mx') {
+        } else if (addrType == 'mx-user-id') {
             const user = MatrixClientPeg.get().getUser(addrObj.address);
             if (user) {
                 addrObj.displayName = user.displayName;
                 addrObj.avatarMxc = user.avatarUrl;
                 addrObj.isKnown = true;
             }
+        } else if (addrType == 'mx-room-id') {
+            const room = MatrixClientPeg.get().getRoom(addrObj.address);
+            if (room) {
+                addrObj.displayName = room.name;
+                addrObj.avatarMxc = room.avatarUrl;
+                addrObj.isKnown = true;
+            }
         }
 
         const userList = this.state.userList.slice();
@@ -360,7 +495,7 @@ module.exports = React.createClass({
             const AddressTile = sdk.getComponent("elements.AddressTile");
             for (let i = 0; i < this.state.userList.length; i++) {
                 query.push(
-                    <AddressTile key={i} address={this.state.userList[i]} canDismiss={true} onDismissed={ this.onDismissed(i) } />,
+                    <AddressTile key={i} address={this.state.userList[i]} canDismiss={true} onDismissed={this.onDismissed(i)} />,
                 );
             }
         }
@@ -382,23 +517,36 @@ module.exports = React.createClass({
         let error;
         let addressSelector;
         if (this.state.error) {
+            let tryUsing = '';
+            const validTypeDescriptions = this.props.validAddressTypes.map((t) => {
+                return {
+                    'mx-user-id': _t("Matrix ID"),
+                    'mx-room-id': _t("Matrix Room ID"),
+                    'email': _t("email address"),
+                }[t];
+            });
+            tryUsing = _t("Try using one of the following valid address types: %(validTypesList)s.", {
+                validTypesList: validTypeDescriptions.join(", "),
+            });
             error = <div className="mx_ChatInviteDialog_error">
-                {_t("You have entered an invalid contact. Try using their Matrix ID or email address.")}
+                { _t("You have entered an invalid address.") }
+                <br />
+                { tryUsing }
             </div>;
         } else if (this.state.searchError) {
-            error = <div className="mx_ChatInviteDialog_error">{this.state.searchError}</div>;
+            error = <div className="mx_ChatInviteDialog_error">{ this.state.searchError }</div>;
         } else if (
             this.state.query.length > 0 &&
             this.state.queryList.length === 0 &&
             !this.state.busy
         ) {
-            error = <div className="mx_ChatInviteDialog_error">{_t("No results")}</div>;
+            error = <div className="mx_ChatInviteDialog_error">{ _t("No results") }</div>;
         } else {
             addressSelector = (
                 <AddressSelector ref={(ref) => {this.addressSelector = ref;}}
-                    addressList={ this.state.queryList }
-                    onSelected={ this.onSelected }
-                    truncateAt={ TRUNCATE_QUERY_LIST }
+                    addressList={this.state.queryList}
+                    onSelected={this.onSelected}
+                    truncateAt={TRUNCATE_QUERY_LIST}
                 />
             );
         }
@@ -406,7 +554,7 @@ module.exports = React.createClass({
         return (
             <div className="mx_ChatInviteDialog" onKeyDown={this.onKeyDown}>
                 <div className="mx_Dialog_title">
-                    {this.props.title}
+                    { this.props.title }
                 </div>
                 <AccessibleButton className="mx_ChatInviteDialog_cancel"
                         onClick={this.onCancel} >
@@ -422,7 +570,7 @@ module.exports = React.createClass({
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button className="mx_Dialog_primary" onClick={this.onButtonClick}>
-                        {this.props.button}
+                        { this.props.button }
                     </button>
                 </div>
             </div>

src/components/views/dialogs/ConfirmRedactDialog.js

@@ -52,20 +52,20 @@ export default React.createClass({
 
         return (
             <BaseDialog className="mx_ConfirmUserActionDialog" onFinished={this.props.onFinished}
-                onEnterPressed={ this.onOk }
+                onEnterPressed={this.onOk}
                 title={title}
             >
                 <div className="mx_Dialog_content">
-                    {_t("Are you sure you wish to remove (delete) this event? " +
-                        "Note that if you delete a room name or topic change, it could undo the change.")}
+                    { _t("Are you sure you wish to remove (delete) this event? " +
+                        "Note that if you delete a room name or topic change, it could undo the change.") }
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button className={confirmButtonClass} onClick={this.onOk}>
-                        {_t("Remove")}
+                        { _t("Remove") }
                     </button>
 
                     <button onClick={this.onCancel}>
-                        {_t("Cancel")}
+                        { _t("Cancel") }
                     </button>
                 </div>
             </BaseDialog>

src/components/views/dialogs/ConfirmUserActionDialog.js

@@ -18,6 +18,7 @@ import React from 'react';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import classnames from 'classnames';
+import { GroupMemberType } from '../../../groups';
 
 /*
  * A dialog for confirming an operation on another user.
@@ -30,7 +31,10 @@ import classnames from 'classnames';
 export default React.createClass({
     displayName: 'ConfirmUserActionDialog',
     propTypes: {
-        member: React.PropTypes.object.isRequired, // matrix-js-sdk member object
+        // matrix-js-sdk (room) member object. Supply either this or 'groupMember'
+        member: React.PropTypes.object,
+        // group member object. Supply either this or 'member'
+        groupMember: GroupMemberType,
         action: React.PropTypes.string.isRequired, // eg. 'Ban'
 
         // Whether to display a text field for a reason
@@ -69,6 +73,7 @@ export default React.createClass({
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
+        const BaseAvatar = sdk.getComponent("views.avatars.BaseAvatar");
 
         const title = _t("%(actionVerb)s this person?", { actionVerb: this.props.action});
         const confirmButtonClass = classnames({
@@ -83,7 +88,7 @@ export default React.createClass({
                     <form onSubmit={this.onOk}>
                         <input className="mx_ConfirmUserActionDialog_reasonField"
                             ref={this._collectReasonField}
-                            placeholder={ _t("Reason") }
+                            placeholder={_t("Reason")}
                             autoFocus={true}
                         />
                     </form>
@@ -91,24 +96,38 @@ export default React.createClass({
             );
         }
 
+        let avatar;
+        let name;
+        let userId;
+        if (this.props.member) {
+            avatar = <MemberAvatar member={this.props.member} width={48} height={48} />;
+            name = this.props.member.name;
+            userId = this.props.member.userId;
+        } else {
+            // we don't get this info from the API yet
+            avatar = <BaseAvatar name={this.props.groupMember.userId} width={48} height={48} />;
+            name = this.props.groupMember.userId;
+            userId = this.props.groupMember.userId;
+        }
+
         return (
             <BaseDialog className="mx_ConfirmUserActionDialog" onFinished={this.props.onFinished}
-                onEnterPressed={ this.onOk }
+                onEnterPressed={this.onOk}
                 title={title}
             >
                 <div className="mx_Dialog_content">
                     <div className="mx_ConfirmUserActionDialog_avatar">
-                        <MemberAvatar member={this.props.member} width={48} height={48} />
+                        { avatar }
                     </div>
-                    <div className="mx_ConfirmUserActionDialog_name">{this.props.member.name}</div>
-                    <div className="mx_ConfirmUserActionDialog_userId">{this.props.member.userId}</div>
+                    <div className="mx_ConfirmUserActionDialog_name">{ name }</div>
+                    <div className="mx_ConfirmUserActionDialog_userId">{ userId }</div>
                 </div>
-                {reasonBox}
+                { reasonBox }
                 <div className="mx_Dialog_buttons">
                     <button className={confirmButtonClass}
                         onClick={this.onOk} autoFocus={!this.props.askReason}
                     >
-                        {this.props.action}
+                        { this.props.action }
                     </button>
 
                     <button onClick={this.onCancel}>

src/components/views/dialogs/CreateGroupDialog.js

@@ -142,8 +142,8 @@ export default React.createClass({
             // rather than displaying what the server gives us, but synapse doesn't give
             // any yet.
             createErrorNode = <div className="error">
-                <div>{_t('Room creation failed')}</div>
-                <div>{this.state.createError.message}</div>
+                <div>{ _t('Room creation failed') }</div>
+                <div>{ this.state.createError.message }</div>
             </div>;
         }
 
@@ -156,7 +156,7 @@ export default React.createClass({
                     <div className="mx_Dialog_content">
                         <div className="mx_CreateGroupDialog_inputRow">
                             <div className="mx_CreateGroupDialog_label">
-                                <label htmlFor="groupname">{_t('Group Name')}</label>
+                                <label htmlFor="groupname">{ _t('Group Name') }</label>
                             </div>
                             <div>
                                 <input id="groupname" className="mx_CreateGroupDialog_input"
@@ -169,7 +169,7 @@ export default React.createClass({
                         </div>
                         <div className="mx_CreateGroupDialog_inputRow">
                             <div className="mx_CreateGroupDialog_label">
-                                <label htmlFor="groupid">{_t('Group ID')}</label>
+                                <label htmlFor="groupid">{ _t('Group ID') }</label>
                             </div>
                             <div>
                                 <input id="groupid" className="mx_CreateGroupDialog_input"
@@ -182,9 +182,9 @@ export default React.createClass({
                             </div>
                         </div>
                         <div className="error">
-                            {this.state.groupIdError}
+                            { this.state.groupIdError }
                         </div>
-                        {createErrorNode}
+                        { createErrorNode }
                     </div>
                     <div className="mx_Dialog_buttons">
                         <button onClick={this._onCancel}>

src/components/views/dialogs/DeviceVerifyDialog.js

@@ -28,25 +28,25 @@ export default function DeviceVerifyDialog(props) {
     const body = (
         <div>
             <p>
-                {_t("To verify that this device can be trusted, please contact its " +
+                { _t("To verify that this device can be trusted, please contact its " +
                     "owner using some other means (e.g. in person or a phone call) " +
                     "and ask them whether the key they see in their User Settings " +
-                    "for this device matches the key below:")}
+                    "for this device matches the key below:") }
             </p>
             <div className="mx_UserSettings_cryptoSection">
                 <ul>
-                    <li><label>{_t("Device name")}:</label> <span>{ props.device.getDisplayName() }</span></li>
-                    <li><label>{_t("Device ID")}:</label> <span><code>{ props.device.deviceId}</code></span></li>
-                    <li><label>{_t("Device key")}:</label> <span><code><b>{ key }</b></code></span></li>
+                    <li><label>{ _t("Device name") }:</label> <span>{ props.device.getDisplayName() }</span></li>
+                    <li><label>{ _t("Device ID") }:</label> <span><code>{ props.device.deviceId }</code></span></li>
+                    <li><label>{ _t("Device key") }:</label> <span><code><b>{ key }</b></code></span></li>
                 </ul>
             </div>
             <p>
-                {_t("If it matches, press the verify button below. " +
+                { _t("If it matches, press the verify button below. " +
                     "If it doesn't, then someone else is intercepting this device " +
-                    "and you probably want to press the blacklist button instead.")}
+                    "and you probably want to press the blacklist button instead.") }
             </p>
             <p>
-                {_t("In future this verification process will be more sophisticated.")}
+                { _t("In future this verification process will be more sophisticated.") }
             </p>
         </div>
     );

src/components/views/dialogs/ErrorDialog.js

@@ -63,11 +63,11 @@ export default React.createClass({
             <BaseDialog className="mx_ErrorDialog" onFinished={this.props.onFinished}
                     title={this.props.title || _t('Error')}>
                 <div className="mx_Dialog_content">
-                    {this.props.description || _t('An error has occurred.')}
+                    { this.props.description || _t('An error has occurred.') }
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button ref="button" className="mx_Dialog_primary" onClick={this.props.onFinished}>
-                        {this.props.button || _t('OK')}
+                        { this.props.button || _t('OK') }
                     </button>
                 </div>
             </BaseDialog>

src/components/views/dialogs/KeyShareDialog.js

@@ -18,7 +18,7 @@ import Modal from '../../../Modal';
 import React from 'react';
 import sdk from '../../../index';
 
-import { _t } from '../../../languageHandler';
+import { _t, _td } from '../../../languageHandler';
 
 /**
  * Dialog which asks the user whether they want to share their keys with
@@ -116,27 +116,27 @@ export default React.createClass({
 
         let text;
         if (this.state.wasNewDevice) {
-            text = "You added a new device '%(displayName)s', which is"
-                + " requesting encryption keys.";
+            text = _td("You added a new device '%(displayName)s', which is"
+                + " requesting encryption keys.");
         } else {
-            text = "Your unverified device '%(displayName)s' is requesting"
-                + " encryption keys.";
+            text = _td("Your unverified device '%(displayName)s' is requesting"
+                + " encryption keys.");
         }
         text = _t(text, {displayName: displayName});
 
         return (
             <div>
-                <p>{text}</p>
+                <p>{ text }</p>
 
                 <div className="mx_Dialog_buttons">
                     <button onClick={this._onVerifyClicked}>
-                        {_t('Start verification')}
+                        { _t('Start verification') }
                     </button>
                     <button onClick={this._onShareClicked}>
-                        {_t('Share without verifying')}
+                        { _t('Share without verifying') }
                     </button>
                     <button onClick={this._onIgnoreClicked}>
-                        {_t('Ignore request')}
+                        { _t('Ignore request') }
                     </button>
                 </div>
             </div>
@@ -154,7 +154,7 @@ export default React.createClass({
         } else {
             content = (
                 <div>
-                    <p>{_t('Loading device info...')}</p>
+                    <p>{ _t('Loading device info...') }</p>
                     <Spinner />
                 </div>
             );
@@ -165,7 +165,7 @@ export default React.createClass({
                 onFinished={this.props.onFinished}
                 title={_t('Encryption key request')}
             >
-                {content}
+                { content }
             </BaseDialog>
         );
     },

src/components/views/dialogs/QuestionDialog.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 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.
@@ -17,6 +18,7 @@ limitations under the License.
 import React from 'react';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
+import classnames from 'classnames';
 
 export default React.createClass({
     displayName: 'QuestionDialog',
@@ -25,6 +27,7 @@ export default React.createClass({
         description: React.PropTypes.node,
         extraButtons: React.PropTypes.node,
         button: React.PropTypes.string,
+        danger: React.PropTypes.bool,
         focus: React.PropTypes.bool,
         onFinished: React.PropTypes.func.isRequired,
     },
@@ -36,6 +39,7 @@ export default React.createClass({
             extraButtons: null,
             focus: true,
             hasCancelButton: true,
+            danger: false,
         };
     },
 
@@ -51,23 +55,27 @@ export default React.createClass({
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const cancelButton = this.props.hasCancelButton ? (
             <button onClick={this.onCancel}>
-                {_t("Cancel")}
+                { _t("Cancel") }
             </button>
         ) : null;
+        const buttonClasses = classnames({
+            mx_Dialog_primary: true,
+            danger: this.props.danger,
+        });
         return (
             <BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished}
-                onEnterPressed={ this.onOk }
+                onEnterPressed={this.onOk}
                 title={this.props.title}
             >
                 <div className="mx_Dialog_content">
-                    {this.props.description}
+                    { this.props.description }
                 </div>
                 <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this.onOk} autoFocus={this.props.focus}>
-                        {this.props.button || _t('OK')}
+                    <button className={buttonClasses} onClick={this.onOk} autoFocus={this.props.focus}>
+                        { this.props.button || _t('OK') }
                     </button>
-                    {this.props.extraButtons}
-                    {cancelButton}
+                    { this.props.extraButtons }
+                    { cancelButton }
                 </div>
             </BaseDialog>
         );

src/components/views/dialogs/SessionRestoreErrorDialog.js

@@ -45,10 +45,10 @@ export default React.createClass({
         if (SdkConfig.get().bug_report_endpoint_url) {
             bugreport = (
                 <p>
-                {_tJsx(
+                { _tJsx(
                     "Otherwise, <a>click here</a> to send a bug report.",
-                    /<a>(.*?)<\/a>/, (sub) => <a onClick={this._sendBugReport} key="bugreport" href='#'>{sub}</a>,
-                )}
+                    /<a>(.*?)<\/a>/, (sub) => <a onClick={this._sendBugReport} key="bugreport" href='#'>{ sub }</a>,
+                ) }
                 </p>
             );
         }
@@ -57,19 +57,19 @@ export default React.createClass({
             <BaseDialog className="mx_ErrorDialog" onFinished={this.props.onFinished}
                     title={_t('Unable to restore session')}>
                 <div className="mx_Dialog_content">
-                    <p>{_t("We encountered an error trying to restore your previous session. If " +
+                    <p>{ _t("We encountered an error trying to restore your previous session. If " +
                     "you continue, you will need to log in again, and encrypted chat " +
-                    "history will be unreadable.")}</p>
+                    "history will be unreadable.") }</p>
 
-                    <p>{_t("If you have previously used a more recent version of Riot, your session " +
+                    <p>{ _t("If you have previously used a more recent version of Riot, your session " +
                     "may be incompatible with this version. Close this window and return " +
-                    "to the more recent version.")}</p>
+                    "to the more recent version.") }</p>
 
-                    {bugreport}
+                    { bugreport }
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button className="mx_Dialog_primary" onClick={this._continueClicked}>
-                        {_t("Continue anyway")}
+                        { _t("Continue anyway") }
                     </button>
                 </div>
             </BaseDialog>

src/components/views/dialogs/SetEmailDialog.js

@@ -130,10 +130,10 @@ export default React.createClass({
 
         const emailInput = this.state.emailBusy ? <Spinner /> : <EditableText
             className="mx_SetEmailDialog_email_input"
-            placeholder={ _t("Email address") }
+            placeholder={_t("Email address")}
             placeholderClassName="mx_SetEmailDialog_email_input_placeholder"
-            blurToCancel={ false }
-            onValueChanged={ this.onEmailAddressChanged } />;
+            blurToCancel={false}
+            onValueChanged={this.onEmailAddressChanged} />;
 
         return (
             <BaseDialog className="mx_SetEmailDialog"

src/components/views/dialogs/SetMxIdDialog.js

@@ -226,7 +226,7 @@ export default React.createClass({
         let usernameIndicator = null;
         let usernameBusyIndicator = null;
         if (this.state.usernameBusy) {
-            usernameBusyIndicator = <Spinner w="24" h="24"/>;
+            usernameBusyIndicator = <Spinner w="24" h="24" />;
         } else {
             const usernameAvailable = this.state.username &&
                 this.state.usernameCheckSupport && !this.state.usernameError;
@@ -275,17 +275,17 @@ export default React.createClass({
                                 /<a>(.*?)<\/a>/,
                             ],
                             [
-                                (sub) => <span>{this.props.homeserverUrl}</span>,
-                                (sub) => <a href="#" onClick={this.props.onDifferentServerClicked}>{sub}</a>,
+                                (sub) => <span>{ this.props.homeserverUrl }</span>,
+                                (sub) => <a href="#" onClick={this.props.onDifferentServerClicked}>{ sub }</a>,
                             ],
-                        )}
+                        ) }
                     </p>
                     <p>
                         { _tJsx(
                             'If you already have a Matrix account you can <a>log in</a> instead.',
                             /<a>(.*?)<\/a>/,
-                            [(sub) => <a href="#" onClick={this.props.onLoginClick}>{sub}</a>],
-                        )}
+                            [(sub) => <a href="#" onClick={this.props.onLoginClick}>{ sub }</a>],
+                        ) }
                     </p>
                     { auth }
                     { authErrorIndicator }

src/components/views/dialogs/TextInputDialog.js

@@ -65,10 +65,10 @@ export default React.createClass({
             >
                 <div className="mx_Dialog_content">
                     <div className="mx_TextInputDialog_label">
-                        <label htmlFor="textinput"> {this.props.description} </label>
+                        <label htmlFor="textinput"> { this.props.description } </label>
                     </div>
                     <div>
-                        <input id="textinput" ref="textinput" className="mx_TextInputDialog_input" defaultValue={this.props.value} autoFocus={this.props.focus} size="64" onKeyDown={this.onKeyDown}/>
+                        <input id="textinput" ref="textinput" className="mx_TextInputDialog_input" defaultValue={this.props.value} autoFocus={this.props.focus} size="64" onKeyDown={this.onKeyDown} />
                     </div>
                 </div>
                 <div className="mx_Dialog_buttons">
@@ -76,7 +76,7 @@ export default React.createClass({
                         { _t("Cancel") }
                     </button>
                     <button className="mx_Dialog_primary" onClick={this.onOk}>
-                        {this.props.button}
+                        { this.props.button }
                     </button>
                 </div>
             </BaseDialog>

src/components/views/elements/ActionButton.js

@@ -19,6 +19,7 @@ import PropTypes from 'prop-types';
 import AccessibleButton from './AccessibleButton';
 import dis from '../../../dispatcher';
 import sdk from '../../../index';
+import Analytics from '../../../Analytics';
 
 export default React.createClass({
     displayName: 'RoleButton',
@@ -47,6 +48,7 @@ export default React.createClass({
 
     _onClick: function(ev) {
         ev.stopPropagation();
+        Analytics.trackEvent('Action Button', 'click', this.props.action);
         dis.dispatch({action: this.props.action});
     },
 

src/components/views/elements/AddressTile.js

@@ -45,11 +45,12 @@ export default React.createClass({
         const address = this.props.address;
         const name = address.displayName || address.address;
 
-        let imgUrls = [];
+        const imgUrls = [];
+        const isMatrixAddress = ['mx-user-id', 'mx-room-id'].includes(address.addressType);
 
-        if (address.addressType === "mx" && address.avatarMxc) {
+        if (isMatrixAddress && address.avatarMxc) {
             imgUrls.push(MatrixClientPeg.get().mxcUrlToHttp(
-                address.avatarMxc, 25, 25, 'crop'
+                address.avatarMxc, 25, 25, 'crop',
             ));
         } else if (address.addressType === 'email') {
             imgUrls.push('img/icon-email-user.svg');
@@ -77,7 +78,7 @@ export default React.createClass({
 
         let info;
         let error = false;
-        if (address.addressType === "mx" && address.isKnown) {
+        if (isMatrixAddress && address.isKnown) {
             const idClasses = classNames({
                 "mx_AddressTile_id": true,
                 "mx_AddressTile_justified": this.props.justified,
@@ -89,7 +90,7 @@ export default React.createClass({
                     <div className={idClasses}>{ address.address }</div>
                 </div>
             );
-        } else if (address.addressType === "mx") {
+        } else if (isMatrixAddress) {
             const unknownMxClasses = classNames({
                 "mx_AddressTile_unknownMx": true,
                 "mx_AddressTile_justified": this.props.justified,

src/components/views/elements/AppPermission.js

@@ -47,13 +47,19 @@ export default class AppPermission extends React.Component {
     }
 
     render() {
+        let e2eWarningText;
+        if (this.props.isRoomEncrypted) {
+            e2eWarningText =
+                <span className='mx_AppPermissionWarningTextLabel'>{ _t('NOTE: Apps are not end-to-end encrypted') }</span>;
+        }
         return (
             <div className='mx_AppPermissionWarning'>
                 <div className='mx_AppPermissionWarningImage'>
-                    <img src='img/warning.svg' alt={_t('Warning!')}/>
+                    <img src='img/warning.svg' alt={_t('Warning!')} />
                 </div>
                 <div className='mx_AppPermissionWarningText'>
-                    <span className='mx_AppPermissionWarningTextLabel'>Do you want to load widget from URL:</span> <span className='mx_AppPermissionWarningTextURL'>{this.state.curlBase}</span>
+                    <span className='mx_AppPermissionWarningTextLabel'>{ _t('Do you want to load widget from URL:') }</span> <span className='mx_AppPermissionWarningTextURL'>{ this.state.curlBase }</span>
+                    { e2eWarningText }
                 </div>
                 <input
                     className='mx_AppPermissionButton'
@@ -67,9 +73,11 @@ export default class AppPermission extends React.Component {
 }
 
 AppPermission.propTypes = {
+    isRoomEncrypted: PropTypes.bool,
     url: PropTypes.string.isRequired,
     onPermissionGranted: PropTypes.func.isRequired,
 };
 AppPermission.defaultProps = {
+    isRoomEncrypted: false,
     onPermissionGranted: function() {},
 };

src/components/views/elements/AppTile.js

@@ -19,18 +19,19 @@ limitations under the License.
 import url from 'url';
 import React from 'react';
 import MatrixClientPeg from '../../../MatrixClientPeg';
+import PlatformPeg from '../../../PlatformPeg';
 import ScalarAuthClient from '../../../ScalarAuthClient';
 import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
-import { _t } from '../../../languageHandler';
+import { _t, _td } from '../../../languageHandler';
 import sdk from '../../../index';
 import AppPermission from './AppPermission';
 import AppWarning from './AppWarning';
 import MessageSpinner from './MessageSpinner';
 import WidgetUtils from '../../../WidgetUtils';
+import dis from '../../../dispatcher';
 
 const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:'];
-const betaHelpMsg = 'This feature is currently experimental and is intended for beta testing only';
 
 export default React.createClass({
     displayName: 'AppTile',
@@ -44,6 +45,10 @@ export default React.createClass({
         // Specifying 'fullWidth' as true will render the app tile to fill the width of the app drawer continer.
         // This should be set to true when there is only one widget in the app drawer, otherwise it should be false.
         fullWidth: React.PropTypes.bool,
+        // UserId of the current user
+        userId: React.PropTypes.string.isRequired,
+        // UserId of the entity that added / modified the widget
+        creatorUserId: React.PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -59,7 +64,8 @@ export default React.createClass({
             loading: false,
             widgetUrl: this.props.url,
             widgetPermissionId: widgetPermissionId,
-            hasPermissionToLoad: Boolean(hasPermissionToLoad === 'true'),
+            // Assume that widget has permission to load if we are the user who added it to the room, or if explicitly granted by the user
+            hasPermissionToLoad: hasPermissionToLoad === 'true' || this.props.userId === this.props.creatorUserId,
             error: null,
             deleting: false,
         };
@@ -67,8 +73,17 @@ export default React.createClass({
 
     // Returns true if props.url is a scalar URL, typically https://scalar.vector.im/api
     isScalarUrl: function() {
-        const scalarUrl = SdkConfig.get().integrations_rest_url;
-        return scalarUrl && this.props.url.startsWith(scalarUrl);
+        let scalarUrls = SdkConfig.get().integrations_widgets_urls;
+        if (!scalarUrls || scalarUrls.length == 0) {
+            scalarUrls = [SdkConfig.get().integrations_rest_url];
+        }
+
+        for (let i = 0; i < scalarUrls.length; i++) {
+            if (this.props.url.startsWith(scalarUrls[i])) {
+                return true;
+            }
+        }
+        return false;
     },
 
     isMixedContent: function() {
@@ -113,6 +128,30 @@ export default React.createClass({
                 loading: false,
             });
         });
+        window.addEventListener('message', this._onMessage, false);
+    },
+
+    componentWillUnmount() {
+        window.removeEventListener('message', this._onMessage);
+    },
+
+    _onMessage(event) {
+        if (this.props.type !== 'jitsi') {
+            return;
+        }
+        if (!event.origin) {
+            event.origin = event.originalEvent.origin;
+        }
+
+        if (!this.state.widgetUrl.startsWith(event.origin)) {
+            return;
+        }
+
+        if (event.data.widgetAction === 'jitsi_iframe_loaded') {
+            const iframe = this.refs.appFrame.contentWindow
+                .document.querySelector('iframe[id^="jitsiConferenceFrame"]');
+            PlatformPeg.get().setupScreenSharingForIframe(iframe);
+        }
     },
 
     _canUserModify: function() {
@@ -122,7 +161,8 @@ export default React.createClass({
     _onEditClick: function(e) {
         console.log("Edit widget ID ", this.props.id);
         const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
-        const src = this._scalarClient.getScalarInterfaceUrlForRoom(this.props.room.roomId, 'type_' + this.props.type);
+        const src = this._scalarClient.getScalarInterfaceUrlForRoom(
+            this.props.room.roomId, 'type_' + this.props.type, this.props.id);
         Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
             src: src,
         }, "mx_IntegrationsManager");
@@ -155,9 +195,9 @@ export default React.createClass({
     // These strings are translated at the point that they are inserted in to the DOM, in the render method
     _deleteWidgetLabel() {
         if (this._canUserModify()) {
-            return 'Delete widget';
+            return _td('Delete widget');
         }
-        return 'Revoke widget access';
+        return _td('Revoke widget access');
     },
 
     /* TODO -- Store permission in account data so that it is persisted across multiple devices */
@@ -177,11 +217,25 @@ export default React.createClass({
         let appTileName = "No name";
         if(this.props.name && this.props.name.trim()) {
             appTileName = this.props.name.trim();
-            appTileName = appTileName[0].toUpperCase() + appTileName.slice(1).toLowerCase();
         }
         return appTileName;
     },
 
+    onClickMenuBar: function(ev) {
+        ev.preventDefault();
+
+        // Ignore clicks on menu bar children
+        if (ev.target !== this.refs.menu_bar) {
+            return;
+        }
+
+        // Toggle the view state of the apps drawer
+        dis.dispatch({
+            action: 'appsDrawer',
+            show: !this.props.show,
+        });
+    },
+
     render: function() {
         let appTileBody;
 
@@ -203,42 +257,46 @@ export default React.createClass({
             safeWidgetUrl = url.format(parsedWidgetUrl);
         }
 
-        if (this.state.loading) {
-            appTileBody = (
-                <div className='mx_AppTileBody mx_AppLoading'>
-                    <MessageSpinner msg='Loading...'/>
-                </div>
-            );
-        } else if (this.state.hasPermissionToLoad == true) {
-            if (this.isMixedContent()) {
+        if (this.props.show) {
+            if (this.state.loading) {
+                appTileBody = (
+                    <div className='mx_AppTileBody mx_AppLoading'>
+                        <MessageSpinner msg='Loading...' />
+                    </div>
+                );
+            } else if (this.state.hasPermissionToLoad == true) {
+                if (this.isMixedContent()) {
+                    appTileBody = (
+                        <div className="mx_AppTileBody">
+                            <AppWarning
+                                errorMsg="Error - Mixed content"
+                            />
+                        </div>
+                    );
+                } else {
+                    appTileBody = (
+                        <div className="mx_AppTileBody">
+                            <iframe
+                                ref="appFrame"
+                                src={safeWidgetUrl}
+                                allowFullScreen="true"
+                                sandbox={sandboxFlags}
+                            ></iframe>
+                        </div>
+                    );
+                }
+            } else {
+                const isRoomEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
                 appTileBody = (
                     <div className="mx_AppTileBody">
-                        <AppWarning
-                            errorMsg="Error - Mixed content"
+                        <AppPermission
+                            isRoomEncrypted={isRoomEncrypted}
+                            url={this.state.widgetUrl}
+                            onPermissionGranted={this._grantWidgetPermission}
                         />
                     </div>
                 );
-            } else {
-                appTileBody = (
-                    <div className="mx_AppTileBody">
-                        <iframe
-                            ref="appFrame"
-                            src={safeWidgetUrl}
-                            allowFullScreen="true"
-                            sandbox={sandboxFlags}
-                        ></iframe>
-                    </div>
-                );
             }
-        } else {
-            appTileBody = (
-                <div className="mx_AppTileBody">
-                    <AppPermission
-                        url={this.state.widgetUrl}
-                        onPermissionGranted={this._grantWidgetPermission}
-                    />
-                </div>
-            );
         }
 
         // editing is done in scalar
@@ -253,21 +311,20 @@ export default React.createClass({
 
         return (
             <div className={this.props.fullWidth ? "mx_AppTileFullWidth" : "mx_AppTile"} id={this.props.id}>
-                <div className="mx_AppTileMenuBar">
-                    {this.formatAppTileName()}
+                <div ref="menu_bar" className="mx_AppTileMenuBar" onClick={this.onClickMenuBar}>
+                    { this.formatAppTileName() }
                     <span className="mx_AppTileMenuBarWidgets">
-                        <span className="mx_Beta" alt={betaHelpMsg} title={betaHelpMsg}>&#946;</span>
-                        {/* Edit widget */}
-                        {showEditButton && <img
+                        { /* Edit widget */ }
+                        { showEditButton && <img
                             src="img/edit.svg"
                             className="mx_filterFlipColor mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
                             width="8" height="8"
                             alt={_t('Edit')}
                             title={_t('Edit')}
                             onClick={this._onEditClick}
-                        />}
+                        /> }
 
-                        {/* Delete widget */}
+                        { /* Delete widget */ }
                         <img src={deleteIcon}
                         className={deleteClasses}
                         width="8" height="8"
@@ -277,7 +334,7 @@ export default React.createClass({
                         />
                     </span>
                 </div>
-                {appTileBody}
+                { appTileBody }
             </div>
         );
     },

src/components/views/elements/AppWarning.js

@@ -6,10 +6,10 @@ const AppWarning = (props) => {
     return (
         <div className='mx_AppPermissionWarning'>
             <div className='mx_AppPermissionWarningImage'>
-                <img src='img/warning.svg' alt={_t('Warning!')}/>
+                <img src='img/warning.svg' alt={_t('Warning!')} />
             </div>
             <div className='mx_AppPermissionWarningText'>
-                <span className='mx_AppPermissionWarningTextLabel'>{props.errorMsg}</span>
+                <span className='mx_AppPermissionWarningTextLabel'>{ props.errorMsg }</span>
             </div>
         </div>
     );

src/components/views/elements/EditableItemList.js

@@ -0,0 +1,149 @@
+/*
+Copyright 2017 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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import {_t} from '../../../languageHandler.js';
+
+const EditableItem = React.createClass({
+    displayName: 'EditableItem',
+
+    propTypes: {
+        initialValue: PropTypes.string,
+        index: PropTypes.number,
+        placeholder: PropTypes.string,
+
+        onChange: PropTypes.func,
+        onRemove: PropTypes.func,
+        onAdd: PropTypes.func,
+
+        addOnChange: PropTypes.bool,
+    },
+
+    onChange: function(value) {
+        this.setState({ value });
+        if (this.props.onChange) this.props.onChange(value, this.props.index);
+        if (this.props.addOnChange && this.props.onAdd) this.props.onAdd(value);
+    },
+
+    onRemove: function() {
+        if (this.props.onRemove) this.props.onRemove(this.props.index);
+    },
+
+    onAdd: function() {
+        if (this.props.onAdd) this.props.onAdd(this.state.value);
+    },
+
+    render: function() {
+        const EditableText = sdk.getComponent('elements.EditableText');
+        return <div className="mx_EditableItem">
+            <EditableText
+                className="mx_EditableItem_editable"
+                placeholderClassName="mx_EditableItem_editablePlaceholder"
+                placeholder={this.props.placeholder}
+                blurToCancel={false}
+                editable={true}
+                initialValue={this.props.initialValue}
+                onValueChanged={this.onChange} />
+            { this.props.onAdd ?
+                <div className="mx_EditableItem_addButton">
+                    <img className="mx_filterFlipColor"
+                        src="img/plus.svg" width="14" height="14"
+                        alt={_t("Add")} onClick={this.onAdd} />
+                </div>
+                :
+                <div className="mx_EditableItem_removeButton">
+                    <img className="mx_filterFlipColor"
+                        src="img/cancel-small.svg" width="14" height="14"
+                        alt={_t("Delete")} onClick={this.onRemove} />
+                </div>
+            }
+        </div>;
+    },
+});
+
+module.exports = React.createClass({
+    displayName: 'EditableItemList',
+
+    propTypes: {
+        items: PropTypes.arrayOf(PropTypes.string).isRequired,
+        onNewItemChanged: PropTypes.func,
+        onItemAdded: PropTypes.func,
+        onItemEdited: PropTypes.func,
+        onItemRemoved: PropTypes. func,
+    },
+
+    getDefaultProps: function() {
+        return {
+            onItemAdded: () => {},
+            onItemEdited: () => {},
+            onItemRemoved: () => {},
+            onNewItemChanged: () => {},
+        };
+    },
+
+    onItemAdded: function(value) {
+        this.props.onItemAdded(value);
+    },
+
+    onItemEdited: function(value, index) {
+        if (value.length === 0) {
+            this.onItemRemoved(index);
+        } else {
+            this.props.onItemEdited(value, index);
+        }
+    },
+
+    onItemRemoved: function(index) {
+        this.props.onItemRemoved(index);
+    },
+
+    onNewItemChanged: function(value) {
+        this.props.onNewItemChanged(value);
+    },
+
+    render: function() {
+        const editableItems = this.props.items.map((item, index) => {
+            return <EditableItem
+                key={index}
+                index={index}
+                initialValue={item}
+                onChange={this.onItemEdited}
+                onRemove={this.onItemRemoved}
+                placeholder={this.props.placeholder}
+            />;
+        });
+
+        const label = this.props.items.length > 0 ?
+            this.props.itemsLabel : this.props.noItemsLabel;
+
+        return (<div className="mx_EditableItemList">
+            <div className="mx_EditableItemList_label">
+                { label }
+            </div>
+            { editableItems }
+            <EditableItem
+                key={-1}
+                initialValue={this.props.newItem}
+                onAdd={this.onItemAdded}
+                onChange={this.onNewItemChanged}
+                addOnChange={true}
+                placeholder={this.props.placeholder}
+            />
+        </div>);
+    },
+});

src/components/views/elements/EditableText.js

@@ -65,7 +65,9 @@ module.exports = React.createClass({
     },
 
     componentWillReceiveProps: function(nextProps) {
-        if (nextProps.initialValue !== this.props.initialValue) {
+        if (nextProps.initialValue !== this.props.initialValue ||
+            nextProps.initialValue !== this.value
+        ) {
             this.value = nextProps.initialValue;
             if (this.refs.editable_div) {
                 this.showPlaceholder(!this.value);

src/components/views/elements/EmojiText.js

@@ -1,5 +1,6 @@
 /*
  Copyright 2016 Aviral Dasgupta
+ Copyright 2017 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.
@@ -15,12 +16,19 @@
  */
 
 import React from 'react';
-import {emojifyText} from '../../../HtmlUtils';
+import {emojifyText, containsEmoji} from '../../../HtmlUtils';
 
 export default function EmojiText(props) {
     const {element, children, ...restProps} = props;
-    restProps.dangerouslySetInnerHTML = emojifyText(children);
-    return React.createElement(element, restProps);
+
+    // fast path: simple regex to detect strings that don't contain
+    // emoji and just return them
+    if (containsEmoji(children)) {
+        restProps.dangerouslySetInnerHTML = emojifyText(children);
+        return React.createElement(element, restProps);
+    } else {
+        return React.createElement(element, restProps, children);
+    }
 }
 
 EmojiText.propTypes = {

src/components/views/elements/Flair.js

@@ -0,0 +1,290 @@
+/*
+ Copyright 2017 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.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+'use strict';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {MatrixClient} from 'matrix-js-sdk';
+import UserSettingsStore from '../../../UserSettingsStore';
+import dis from '../../../dispatcher';
+import Promise from 'bluebird';
+
+const BULK_REQUEST_DEBOUNCE_MS = 200;
+
+// Does the server support groups? Assume yes until we receive M_UNRECOGNIZED.
+// If true, flair can function and we should keep sending requests for groups and avatars.
+let groupSupport = true;
+
+const USER_GROUPS_CACHE_BUST_MS = 1800000; // 30 mins
+const GROUP_PROFILES_CACHE_BUST_MS = 1800000; // 30 mins
+
+// TODO: Cache-busting based on time. (The server won't inform us of membership changes.)
+// This applies to userGroups and groupProfiles. We can provide a slightly better UX by
+// cache-busting when the current user joins/leaves a group.
+const userGroups = {
+    // $userId: ['+group1:domain', '+group2:domain', ...]
+};
+
+const groupProfiles = {
+//  $groupId: {
+//      avatar_url: 'mxc://...'
+//  }
+};
+
+// Represents all unsettled promises to retrieve the groups for each userId. When a promise
+// is settled, it is deleted from this object.
+const usersPending = {
+//  $userId: {
+//      prom: Promise
+//      resolve: () => {}
+//      reject: () => {}
+//  }
+};
+
+let debounceTimeoutID;
+function getPublicisedGroupsCached(matrixClient, userId) {
+    if (userGroups[userId]) {
+        return Promise.resolve(userGroups[userId]);
+    }
+
+    // Bulk lookup ongoing, return promise to resolve/reject
+    if (usersPending[userId]) {
+        return usersPending[userId].prom;
+    }
+
+    usersPending[userId] = {};
+    usersPending[userId].prom = new Promise((resolve, reject) => {
+        usersPending[userId].resolve = resolve;
+        usersPending[userId].reject = reject;
+    }).then((groups) => {
+        userGroups[userId] = groups;
+        setTimeout(() => {
+            delete userGroups[userId];
+        }, USER_GROUPS_CACHE_BUST_MS);
+        return userGroups[userId];
+    }).catch((err) => {
+        throw err;
+    }).finally(() => {
+        delete usersPending[userId];
+    });
+
+    // This debounce will allow consecutive requests for the public groups of users that
+    // are sent in intervals of < BULK_REQUEST_DEBOUNCE_MS to be batched and only requested
+    // when no more requests are received within the next BULK_REQUEST_DEBOUNCE_MS. The naive
+    // implementation would do a request that only requested the groups for `userId`, leading
+    // to a worst and best case of 1 user per request. This implementation's worst is still
+    // 1 user per request but only if the requests are > BULK_REQUEST_DEBOUNCE_MS apart and the
+    // best case is N users per request.
+    //
+    // This is to reduce the number of requests made whilst trading off latency when viewing
+    // a Flair component.
+    if (debounceTimeoutID) clearTimeout(debounceTimeoutID);
+    debounceTimeoutID = setTimeout(() => {
+        batchedGetPublicGroups(matrixClient);
+    }, BULK_REQUEST_DEBOUNCE_MS);
+
+    return usersPending[userId].prom;
+}
+
+async function batchedGetPublicGroups(matrixClient) {
+    // Take the userIds from the keys of usersPending
+    const usersInFlight = Object.keys(usersPending);
+    let resp = {
+        users: [],
+    };
+    try {
+        resp = await matrixClient.getPublicisedGroups(usersInFlight);
+    } catch (err) {
+        // Propagate the same error to all usersInFlight
+        usersInFlight.forEach((userId) => {
+            usersPending[userId].reject(err);
+        });
+        return;
+    }
+    const updatedUserGroups = resp.users;
+    usersInFlight.forEach((userId) => {
+        usersPending[userId].resolve(updatedUserGroups[userId] || []);
+    });
+}
+
+async function getGroupProfileCached(matrixClient, groupId) {
+    if (groupProfiles[groupId]) {
+        return groupProfiles[groupId];
+    }
+
+    const profile = await matrixClient.getGroupProfile(groupId);
+    groupProfiles[groupId] = {
+        groupId,
+        avatarUrl: profile.avatar_url,
+    };
+    setTimeout(() => {
+        delete groupProfiles[groupId];
+    }, GROUP_PROFILES_CACHE_BUST_MS);
+
+    return groupProfiles[groupId];
+}
+
+class FlairAvatar extends React.Component {
+    constructor() {
+        super();
+        this.onClick = this.onClick.bind(this);
+    }
+
+    onClick(ev) {
+        ev.preventDefault();
+        // Don't trigger onClick of parent element
+        ev.stopPropagation();
+        dis.dispatch({
+            action: 'view_group',
+            group_id: this.props.groupProfile.groupId,
+        });
+    }
+
+    render() {
+        const httpUrl = this.context.matrixClient.mxcUrlToHttp(
+            this.props.groupProfile.avatarUrl, 14, 14, 'scale', false);
+        return <img
+            src={httpUrl}
+            width="14px"
+            height="14px"
+            onClick={this.onClick}
+            title={this.props.groupProfile.groupId} />;
+    }
+}
+
+FlairAvatar.propTypes = {
+    groupProfile: PropTypes.shape({
+        groupId: PropTypes.string.isRequired,
+        avatarUrl: PropTypes.string.isRequired,
+    }),
+};
+
+FlairAvatar.contextTypes = {
+    matrixClient: React.PropTypes.instanceOf(MatrixClient).isRequired,
+};
+
+export default class Flair extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            profiles: [],
+        };
+        this.onRoomStateEvents = this.onRoomStateEvents.bind(this);
+    }
+
+    componentWillUnmount() {
+        this._unmounted = true;
+        this.context.matrixClient.removeListener('RoomState.events', this.onRoomStateEvents);
+    }
+
+    componentWillMount() {
+        this._unmounted = false;
+        if (UserSettingsStore.isFeatureEnabled('feature_groups') && groupSupport) {
+            this._generateAvatars();
+        }
+        this.context.matrixClient.on('RoomState.events', this.onRoomStateEvents);
+    }
+
+    onRoomStateEvents(event) {
+        if (event.getType() === 'm.room.related_groups' && groupSupport) {
+            this._generateAvatars();
+        }
+    }
+
+    async _getGroupProfiles(groups) {
+        const profiles = [];
+        for (const groupId of groups) {
+            let groupProfile = null;
+            try {
+                groupProfile = await getGroupProfileCached(this.context.matrixClient, groupId);
+            } catch (err) {
+                console.error('Could not get profile for group', groupId, err);
+            }
+            profiles.push(groupProfile);
+        }
+        return profiles.filter((p) => p !== null);
+    }
+
+    async _generateAvatars() {
+        let groups;
+        try {
+            groups = await getPublicisedGroupsCached(this.context.matrixClient, this.props.userId);
+        } catch (err) {
+            // Indicate whether the homeserver supports groups
+            if (err.errcode === 'M_UNRECOGNIZED') {
+                console.warn('Cannot display flair, server does not support groups');
+                groupSupport = false;
+                // Return silently to avoid spamming for non-supporting servers
+                return;
+            }
+            console.error('Could not get groups for user', this.props.userId, err);
+        }
+        if (this.props.roomId && this.props.showRelated) {
+            const relatedGroupsEvent = this.context.matrixClient
+                .getRoom(this.props.roomId)
+                .currentState
+                .getStateEvents('m.room.related_groups', '');
+            const relatedGroups = relatedGroupsEvent ?
+                relatedGroupsEvent.getContent().groups || [] : [];
+            if (relatedGroups && relatedGroups.length > 0) {
+                groups = groups.filter((groupId) => {
+                    return relatedGroups.includes(groupId);
+                });
+            } else {
+                groups = [];
+            }
+        }
+        if (!groups || groups.length === 0) {
+            return;
+        }
+        const profiles = await this._getGroupProfiles(groups);
+        if (!this.unmounted) {
+            this.setState({profiles});
+        }
+    }
+
+    render() {
+        if (this.state.profiles.length === 0) {
+            return <div />;
+        }
+        const avatars = this.state.profiles.map((profile, index) => {
+            return <FlairAvatar key={index} groupProfile={profile} />;
+        });
+        return (
+            <span className="mx_Flair" style={{"marginLeft": "5px", "verticalAlign": "-3px"}}>
+                { avatars }
+            </span>
+        );
+    }
+}
+
+Flair.propTypes = {
+    userId: PropTypes.string,
+
+    // Whether to show only the flair associated with related groups of the given room,
+    // or all flair associated with a user.
+    showRelated: PropTypes.bool,
+    // The room that this flair will be displayed in. Optional. Only applies when showRelated = true.
+    roomId: PropTypes.string,
+};
+
+// TODO: We've decided that all components should follow this pattern, which means removing withMatrixClient and using
+// this.context.matrixClient everywhere instead of this.props.matrixClient.
+// See https://github.com/vector-im/riot-web/issues/4951.
+Flair.contextTypes = {
+    matrixClient: React.PropTypes.instanceOf(MatrixClient).isRequired,
+};

src/components/views/elements/GroupsButton.js

@@ -0,0 +1,38 @@
+/*
+Copyright 2017 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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import sdk from '../../../index';
+import PropTypes from 'prop-types';
+import { _t } from '../../../languageHandler';
+
+const GroupsButton = function(props) {
+    const ActionButton = sdk.getComponent('elements.ActionButton');
+    return (
+        <ActionButton action="view_my_groups"
+            label={_t("Groups")}
+            iconPath="img/icons-groups.svg"
+            size={props.size}
+            tooltip={props.tooltip}
+        />
+    );
+};
+
+GroupsButton.propTypes = {
+    size: PropTypes.string,
+    tooltip: PropTypes.bool,
+};
+
+export default GroupsButton;

src/components/views/elements/ManageIntegsButton.js

@@ -0,0 +1,107 @@
+/*
+Copyright 2017 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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import classNames from 'classnames';
+import SdkConfig from '../../../SdkConfig';
+import ScalarAuthClient from '../../../ScalarAuthClient';
+import ScalarMessaging from '../../../ScalarMessaging';
+import Modal from "../../../Modal";
+import { _t } from '../../../languageHandler';
+import AccessibleButton from './AccessibleButton';
+import TintableSvg from './TintableSvg';
+
+export default class ManageIntegsButton extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            scalarError: null,
+        };
+
+        this.onManageIntegrations = this.onManageIntegrations.bind(this);
+    }
+
+    componentWillMount() {
+        ScalarMessaging.startListening();
+        this.scalarClient = null;
+
+        if (SdkConfig.get().integrations_ui_url && SdkConfig.get().integrations_rest_url) {
+            this.scalarClient = new ScalarAuthClient();
+            this.scalarClient.connect().done(() => {
+                this.forceUpdate();
+            }, (err) => {
+                this.setState({ scalarError: err});
+                console.error('Error whilst initialising scalarClient for ManageIntegsButton', err);
+            });
+        }
+    }
+
+    componentWillUnmount() {
+        ScalarMessaging.stopListening();
+    }
+
+    onManageIntegrations(ev) {
+        ev.preventDefault();
+        if (this.state.scalarError && !this.scalarClient.hasCredentials()) {
+            return;
+        }
+        const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
+        Modal.createDialog(IntegrationsManager, {
+            src: (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
+                this.scalarClient.getScalarInterfaceUrlForRoom(this.props.roomId) :
+                null,
+        }, "mx_IntegrationsManager");
+    }
+
+    render() {
+        let integrationsButton = <div />;
+        let integrationsWarningTriangle = <div />;
+        let integrationsErrorPopup = <div />;
+        if (this.scalarClient !== null) {
+            const integrationsButtonClasses = classNames({
+                mx_RoomHeader_button: true,
+                mx_RoomSettings_integrationsButton_error: !!this.state.scalarError,
+            });
+
+            if (this.state.scalarError && !this.scalarClient.hasCredentials()) {
+                integrationsWarningTriangle = <img src="img/warning.svg" title={_t('Integrations Error')} width="17" />;
+                // Popup shown when hovering over integrationsButton_error (via CSS)
+                integrationsErrorPopup = (
+                    <span className="mx_RoomSettings_integrationsButton_errorPopup">
+                        { _t('Could not connect to the integration server') }
+                    </span>
+                );
+            }
+
+            integrationsButton = (
+                <AccessibleButton className={integrationsButtonClasses} onClick={this.onManageIntegrations} title={_t('Manage Integrations')}>
+                    <TintableSvg src="img/icons-apps.svg" width="35" height="35" />
+                    { integrationsWarningTriangle }
+                    { integrationsErrorPopup }
+                </AccessibleButton>
+            );
+        }
+
+        return integrationsButton;
+    }
+}
+
+ManageIntegsButton.propTypes = {
+    roomId: PropTypes.string.isRequired,
+};

src/components/views/elements/MemberEventListSummary.js

@@ -34,11 +34,13 @@ module.exports = React.createClass({
         threshold: React.PropTypes.number,
         // Called when the MELS expansion is toggled
         onToggle: React.PropTypes.func,
+        // Whether or not to begin with state.expanded=true
+        startExpanded: React.PropTypes.bool,
     },
 
     getInitialState: function() {
         return {
-            expanded: false,
+            expanded: Boolean(this.props.startExpanded),
         };
     },
 
@@ -376,7 +378,7 @@ module.exports = React.createClass({
             return items[0];
         } else if (remaining) {
             items = items.slice(0, itemLimit);
-            return (remaining > 1) 
+            return (remaining > 1)
                 ? _t("%(items)s and %(remaining)s others", { items: items.join(', '), remaining: remaining } )
                 : _t("%(items)s and one other", { items: items.join(', ') });
         } else {

src/components/views/elements/MessageSpinner.js

@@ -26,8 +26,8 @@ module.exports = React.createClass({
         const msg = this.props.msg || "Loading...";
         return (
             <div className="mx_Spinner">
-                <div className="mx_Spinner_Msg">{msg}</div>&nbsp;
-                <img src="img/spinner.gif" width={w} height={h} className={imgClass}/>
+                <div className="mx_Spinner_Msg">{ msg }</div>&nbsp;
+                <img src="img/spinner.gif" width={w} height={h} className={imgClass} />
             </div>
         );
     },

src/components/views/elements/Pill.js

@@ -167,11 +167,11 @@ const Pill = React.createClass({
                         userId = member.userId;
                         linkText = member.rawDisplayName.replace(' (IRC)', ''); // FIXME when groups are done
                         if (this.props.shouldShowPillAvatar) {
-                            avatar = <MemberAvatar member={member} width={16} height={16}/>;
+                            avatar = <MemberAvatar member={member} width={16} height={16} />;
                         }
                         pillClass = 'mx_UserPill';
                         href = null;
-                        onClick = this.onUserPillClicked.bind(this);
+                        onClick = this.onUserPillClicked;
                     }
             }
                 break;
@@ -180,7 +180,7 @@ const Pill = React.createClass({
                 if (room) {
                     linkText = (room ? getDisplayAliasForRoom(room) : null) || resource;
                     if (this.props.shouldShowPillAvatar) {
-                        avatar = <RoomAvatar room={room} width={16} height={16}/>;
+                        avatar = <RoomAvatar room={room} width={16} height={16} />;
                     }
                     pillClass = 'mx_RoomPill';
                 }
@@ -195,12 +195,12 @@ const Pill = React.createClass({
         if (this.state.pillType) {
             return this.props.inMessage ?
                 <a className={classes} href={href} onClick={onClick} title={resource} data-offset-key={this.props.offsetKey}>
-                    {avatar}
-                    {linkText}
+                    { avatar }
+                    { linkText }
                 </a> :
                 <span className={classes} title={resource} data-offset-key={this.props.offsetKey}>
-                    {avatar}
-                    {linkText}
+                    { avatar }
+                    { linkText }
                 </span>;
         } else {
             // Deliberately render nothing if the URL isn't recognised

src/components/views/elements/TruncatedList.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2017 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.
@@ -13,7 +14,9 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-var React = require('react');
+
+import React from 'react';
+import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
@@ -21,12 +24,21 @@ module.exports = React.createClass({
 
     propTypes: {
         // The number of elements to show before truncating. If negative, no truncation is done.
-        truncateAt: React.PropTypes.number,
+        truncateAt: PropTypes.number,
         // The className to apply to the wrapping div
-        className: React.PropTypes.string,
+        className: PropTypes.string,
+        // A function that returns the children to be rendered into the element.
+        // function getChildren(start: number, end: number): Array<React.Node>
+        // The start element is included, the end is not (as in `slice`).
+        // If omitted, the React child elements will be used. This parameter can be used
+        // to avoid creating unnecessary React elements.
+        getChildren: PropTypes.func,
+        // A function that should return the total number of child element available.
+        // Required if getChildren is supplied.
+        getChildCount: PropTypes.func,
         // A function which will be invoked when an overflow element is required.
         // This will be inserted after the children.
-        createOverflowElement: React.PropTypes.func
+        createOverflowElement: PropTypes.func,
     },
 
     getDefaultProps: function() {
@@ -34,40 +46,56 @@ module.exports = React.createClass({
             truncateAt: 2,
             createOverflowElement: function(overflowCount, totalCount) {
                 return (
-                    <div>{_t("And %(count)s more...", {count: overflowCount})}</div>
+                    <div>{ _t("And %(count)s more...", {count: overflowCount}) }</div>
                 );
-            }
+            },
         };
     },
 
+    _getChildren: function(start, end) {
+        if (this.props.getChildren && this.props.getChildCount) {
+            return this.props.getChildren(start, end);
+        } else {
+            // XXX: I'm not sure why anything would pass null into this, it seems
+            // like a bizzare case to handle, but I'm preserving the behaviour.
+            // (see commit 38d5c7d5c5d5a34dc16ef5d46278315f5c57f542)
+            return React.Children.toArray(this.props.children).filter((c) => {
+                return c != null;
+            }).slice(start, end);
+        }
+    },
+
+    _getChildCount: function() {
+        if (this.props.getChildren && this.props.getChildCount) {
+            return this.props.getChildCount();
+        } else {
+            return React.Children.toArray(this.props.children).filter((c) => {
+                return c != null;
+            }).length;
+        }
+    },
+
     render: function() {
-        var childsJsx = this.props.children;
-        var overflowJsx;
-        var childArray = React.Children.toArray(this.props.children).filter((c) => {
-            return c != null;
-        });
-
-        var childCount = childArray.length;
+        let overflowNode = null;
 
+        const totalChildren = this._getChildCount();
+        let upperBound = totalChildren;
         if (this.props.truncateAt >= 0) {
-            var overflowCount = childCount - this.props.truncateAt;
-
+            const overflowCount = totalChildren - this.props.truncateAt;
             if (overflowCount > 1) {
-                overflowJsx = this.props.createOverflowElement(
-                    overflowCount, childCount
+                overflowNode = this.props.createOverflowElement(
+                    overflowCount, totalChildren,
                 );
-
-                // cut out the overflow elements
-                childArray.splice(childCount - overflowCount, overflowCount);
-                childsJsx = childArray; // use what is left
+                upperBound = this.props.truncateAt;
             }
         }
+        const childNodes = this._getChildren(0, upperBound);
 
         return (
             <div className={this.props.className}>
-                {childsJsx}
-                {overflowJsx}
+                { childNodes }
+                { overflowNode }
             </div>
         );
-    }
+    },
 });

src/components/views/groups/GroupInviteTile.js

@@ -0,0 +1,70 @@
+/*
+Copyright 2017 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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import dis from '../../../dispatcher';
+import AccessibleButton from '../elements/AccessibleButton';
+
+export default React.createClass({
+    displayName: 'GroupInviteTile',
+
+    propTypes: {
+        group: PropTypes.object.isRequired,
+    },
+
+    onClick: function(e) {
+        dis.dispatch({
+            action: 'view_group',
+            group_id: this.props.group.groupId,
+        });
+    },
+
+    render: function() {
+        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        const EmojiText = sdk.getComponent('elements.EmojiText');
+
+        const av = (
+            <BaseAvatar name={this.props.group.name} width={24} height={24}
+                url={this.props.group.avatarUrl}
+            />
+        );
+
+        const label = <EmojiText
+            element="div"
+            title={this.props.group.name}
+            className="mx_GroupInviteTile_name"
+            dir="auto"
+        >
+            { this.props.group.name }
+        </EmojiText>;
+
+        const badge = <div className="mx_GroupInviteTile_badge">!</div>;
+
+        return (
+            <AccessibleButton className="mx_GroupInviteTile" onClick={this.onClick}>
+                <div className="mx_GroupInviteTile_avatarContainer">
+                    { av }
+                </div>
+                <div className="mx_GroupInviteTile_nameContainer">
+                    { label }
+                    { badge }
+                </div>
+            </AccessibleButton>
+        );
+    },
+});

src/components/views/groups/GroupMemberInfo.js

@@ -0,0 +1,195 @@
+/*
+Copyright 2017 Vector Creations Ltd
+Copyright 2017 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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import dis from '../../../dispatcher';
+import Modal from '../../../Modal';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import { GroupMemberType } from '../../../groups';
+import { groupMemberFromApiObject } from '../../../groups';
+import withMatrixClient from '../../../wrappers/withMatrixClient';
+import AccessibleButton from '../elements/AccessibleButton';
+import GeminiScrollbar from 'react-gemini-scrollbar';
+
+
+module.exports = withMatrixClient(React.createClass({
+    displayName: 'GroupMemberInfo',
+
+    propTypes: {
+        matrixClient: PropTypes.object.isRequired,
+        groupId: PropTypes.string,
+        groupMember: GroupMemberType,
+    },
+
+    getInitialState: function() {
+        return {
+            fetching: false,
+            removingUser: false,
+            groupMembers: null,
+        };
+    },
+
+    componentWillMount: function() {
+        this._fetchMembers();
+    },
+
+    _fetchMembers: function() {
+        this.setState({fetching: true});
+        this.props.matrixClient.getGroupUsers(this.props.groupId).then((result) => {
+            this.setState({
+                groupMembers: result.chunk.map((apiMember) => {
+                    return groupMemberFromApiObject(apiMember);
+                }),
+                fetching: false,
+            });
+        }).catch((e) => {
+            this.setState({fetching: false});
+            console.error("Failed to get group groupMember list: ", e);
+        });
+    },
+
+    _onKick: function() {
+        const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
+        Modal.createDialog(ConfirmUserActionDialog, {
+            groupMember: this.props.groupMember,
+            action: _t('Remove from group'),
+            danger: true,
+            onFinished: (proceed) => {
+                if (!proceed) return;
+
+                this.setState({removingUser: true});
+                this.props.matrixClient.removeUserFromGroup(
+                    this.props.groupId, this.props.groupMember.userId,
+                ).then(() => {
+                    // return to the user list
+                    dis.dispatch({
+                        action: "view_user",
+                        member: null,
+                    });
+                }).catch((e) => {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createTrackedDialog('Failed to remove user from group', '', ErrorDialog, {
+                        title: _t('Error'),
+                        description: _t('Failed to remove user from group'),
+                    });
+                }).finally(() => {
+                    this.setState({removingUser: false});
+                });
+            },
+        });
+    },
+
+    _onCancel: function(e) {
+        // Go back to the user list
+        dis.dispatch({
+            action: "view_user",
+            member: null,
+        });
+    },
+
+    onRoomTileClick(roomId) {
+        dis.dispatch({
+            action: 'view_room',
+            room_id: roomId,
+        });
+    },
+
+    render: function() {
+        if (this.state.fetching || this.state.removingUser) {
+            const Spinner = sdk.getComponent("elements.Spinner");
+            return <Spinner />;
+        }
+        if (!this.state.groupMembers) return null;
+
+        const targetIsInGroup = this.state.groupMembers.some((m) => {
+            return m.userId === this.props.groupMember.userId;
+        });
+
+        let kickButton;
+        let adminButton;
+
+        if (targetIsInGroup) {
+            kickButton = (
+                <AccessibleButton className="mx_MemberInfo_field"
+                        onClick={this._onKick}>
+                    { _t('Remove from group') }
+                </AccessibleButton>
+            );
+
+            // No make/revoke admin API yet
+            /*const opLabel = this.state.isTargetMod ? _t("Revoke Moderator") : _t("Make Moderator");
+            giveModButton = <AccessibleButton className="mx_MemberInfo_field" onClick={this.onModToggle}>
+                {giveOpLabel}
+            </AccessibleButton>;*/
+        }
+
+        let adminTools;
+        if (kickButton || adminButton) {
+            adminTools =
+                <div className="mx_MemberInfo_adminTools">
+                    <h3>{ _t("Admin Tools") }</h3>
+
+                    <div className="mx_MemberInfo_buttons">
+                        { kickButton }
+                        { adminButton }
+                    </div>
+                </div>;
+        }
+
+        const avatarUrl = this.props.matrixClient.mxcUrlToHttp(
+            this.props.groupMember.avatarUrl,
+            36, 36, 'crop',
+        );
+
+        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        const avatar = (
+            <BaseAvatar name={this.props.groupMember.userId} width={36} height={36}
+                url={avatarUrl}
+            />
+        );
+
+        const groupMemberName = (
+            this.props.groupMember.displayname || this.props.groupMember.userId
+        );
+
+        const EmojiText = sdk.getComponent('elements.EmojiText');
+        return (
+            <div className="mx_MemberInfo">
+                <GeminiScrollbar autoshow={true}>
+                    <AccessibleButton className="mx_MemberInfo_cancel"onClick={this._onCancel}>
+                        <img src="img/cancel.svg" width="18" height="18" />
+                    </AccessibleButton>
+                    <div className="mx_MemberInfo_avatar">
+                        { avatar }
+                    </div>
+
+                    <EmojiText element="h2">{ groupMemberName }</EmojiText>
+
+                    <div className="mx_MemberInfo_profile">
+                        <div className="mx_MemberInfo_profileField">
+                            { this.props.groupMember.userId }
+                        </div>
+                    </div>
+
+                    { adminTools }
+                </GeminiScrollbar>
+            </div>
+        );
+    },
+}));

src/components/views/groups/GroupMemberList.js

@@ -0,0 +1,155 @@
+/*
+Copyright 2017 Vector Creations Ltd.
+Copyright 2017 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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import React from 'react';
+import { _t } from '../../../languageHandler';
+import sdk from '../../../index';
+import { groupMemberFromApiObject } from '../../../groups';
+import GeminiScrollbar from 'react-gemini-scrollbar';
+import PropTypes from 'prop-types';
+import withMatrixClient from '../../../wrappers/withMatrixClient';
+
+const INITIAL_LOAD_NUM_MEMBERS = 30;
+
+export default withMatrixClient(React.createClass({
+    displayName: 'GroupMemberList',
+
+    propTypes: {
+        matrixClient: PropTypes.object.isRequired,
+        groupId: PropTypes.string.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            fetching: false,
+            members: null,
+            truncateAt: INITIAL_LOAD_NUM_MEMBERS,
+        };
+    },
+
+    componentWillMount: function() {
+        this._unmounted = false;
+        this._fetchMembers();
+    },
+
+    _fetchMembers: function() {
+        this.setState({fetching: true});
+        this.props.matrixClient.getGroupUsers(this.props.groupId).then((result) => {
+            this.setState({
+                members: result.chunk.map((apiMember) => {
+                    return groupMemberFromApiObject(apiMember);
+                }),
+                fetching: false,
+            });
+        }).catch((e) => {
+            this.setState({fetching: false});
+            console.error("Failed to get group member list: " + e);
+        });
+    },
+
+    _createOverflowTile: function(overflowCount, totalCount) {
+        // For now we'll pretend this is any entity. It should probably be a separate tile.
+        const EntityTile = sdk.getComponent("rooms.EntityTile");
+        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+        const text = _t("and %(count)s others...", { count: overflowCount });
+        return (
+            <EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
+                <BaseAvatar url="img/ellipsis.svg" name="..." width={36} height={36} />
+            } name={text} presenceState="online" suppressOnHover={true}
+            onClick={this._showFullMemberList} />
+        );
+    },
+
+    _showFullMemberList: function() {
+        this.setState({
+            truncateAt: -1,
+        });
+    },
+
+    onSearchQueryChanged: function(ev) {
+        this.setState({ searchQuery: ev.target.value });
+    },
+
+    makeGroupMemberTiles: function(query) {
+        const GroupMemberTile = sdk.getComponent("groups.GroupMemberTile");
+        query = (query || "").toLowerCase();
+
+        let memberList = this.state.members;
+        if (query) {
+            memberList = memberList.filter((m) => {
+                const matchesName = m.displayname.toLowerCase().indexOf(query) !== -1;
+                const matchesId = m.userId.toLowerCase().includes(query);
+
+                if (!matchesName && !matchesId) {
+                    return false;
+                }
+
+                return true;
+            });
+        }
+
+        memberList = memberList.map((m) => {
+            return (
+                <GroupMemberTile key={m.userId} groupId={this.props.groupId} member={m} />
+            );
+        });
+
+        memberList.sort((a, b) => {
+            // TODO: should put admins at the top: we don't yet have that info
+            if (a < b) {
+                return -1;
+            } else if (a > b) {
+                return 1;
+            } else {
+                return 0;
+            }
+        });
+
+        return memberList;
+    },
+
+    render: function() {
+        if (this.state.fetching) {
+            const Spinner = sdk.getComponent("elements.Spinner");
+            return (<div className="mx_MemberList">
+                <Spinner />
+            </div>);
+        } else if (this.state.members === null) {
+            return null;
+        }
+
+        const inputBox = (
+            <form autoComplete="off">
+                <input className="mx_GroupMemberList_query" id="mx_GroupMemberList_query" type="text"
+                        onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
+                        placeholder={_t('Filter group members')} />
+            </form>
+        );
+
+        const TruncatedList = sdk.getComponent("elements.TruncatedList");
+        return (
+            <div className="mx_MemberList">
+                { inputBox }
+                <GeminiScrollbar autoshow={true} className="mx_MemberList_joined mx_MemberList_outerWrapper">
+                    <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAt}
+                            createOverflowElement={this._createOverflowTile}>
+                        { this.makeGroupMemberTiles(this.state.searchQuery) }
+                    </TruncatedList>
+                </GeminiScrollbar>
+            </div>
+        );
+    },
+}));

src/components/views/groups/GroupMemberTile.js

@@ -0,0 +1,70 @@
+/*
+Copyright 2017 Vector Creations Ltd
+Copyright 2017 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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import dis from '../../../dispatcher';
+import { GroupMemberType } from '../../../groups';
+import withMatrixClient from '../../../wrappers/withMatrixClient';
+
+export default withMatrixClient(React.createClass({
+    displayName: 'GroupMemberTile',
+
+    propTypes: {
+        matrixClient: PropTypes.object,
+        groupId: PropTypes.string.isRequired,
+        member: GroupMemberType.isRequired,
+    },
+
+    getInitialState: function() {
+        return {};
+    },
+
+    onClick: function(e) {
+        dis.dispatch({
+            action: 'view_group_user',
+            member: this.props.member,
+            groupId: this.props.groupId,
+        });
+    },
+
+    render: function() {
+        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        const EntityTile = sdk.getComponent('rooms.EntityTile');
+
+        const name = this.props.member.displayname || this.props.member.userId;
+        const avatarUrl = this.props.matrixClient.mxcUrlToHttp(
+            this.props.member.avatarUrl,
+            36, 36, 'crop',
+        );
+
+        const av = (
+            <BaseAvatar name={this.props.member.userId}
+                width={36} height={36}
+                url={avatarUrl}
+            />
+        );
+
+        return (
+            <EntityTile presenceState="online"
+                avatarJsx={av} onClick={this.onClick}
+                name={name} powerLevel={0} suppressOnHover={true}
+            />
+        );
+    },
+}));

src/components/views/groups/GroupRoomList.js

@@ -0,0 +1,143 @@
+/*
+Copyright 2017 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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import React from 'react';
+import { _t } from '../../../languageHandler';
+import sdk from '../../../index';
+import { groupRoomFromApiObject } from '../../../groups';
+import GeminiScrollbar from 'react-gemini-scrollbar';
+import PropTypes from 'prop-types';
+import {MatrixClient} from 'matrix-js-sdk';
+
+const INITIAL_LOAD_NUM_ROOMS = 30;
+
+export default React.createClass({
+    contextTypes: {
+        matrixClient: React.PropTypes.instanceOf(MatrixClient).isRequired,
+    },
+
+    propTypes: {
+        groupId: PropTypes.string.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            fetching: false,
+            rooms: null,
+            truncateAt: INITIAL_LOAD_NUM_ROOMS,
+            searchQuery: "",
+        };
+    },
+
+    componentWillMount: function() {
+        this._unmounted = false;
+        this._fetchRooms();
+    },
+
+    _fetchRooms: function() {
+        this.setState({fetching: true});
+        this.context.matrixClient.getGroupRooms(this.props.groupId).then((result) => {
+            this.setState({
+                rooms: result.chunk.map((apiRoom) => {
+                    return groupRoomFromApiObject(apiRoom);
+                }),
+                fetching: false,
+            });
+        }).catch((e) => {
+            this.setState({fetching: false});
+            console.error("Failed to get group room list: ", e);
+        });
+    },
+
+    _createOverflowTile: function(overflowCount, totalCount) {
+        // For now we'll pretend this is any entity. It should probably be a separate tile.
+        const EntityTile = sdk.getComponent("rooms.EntityTile");
+        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+        const text = _t("and %(count)s others...", { count: overflowCount });
+        return (
+            <EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
+                <BaseAvatar url="img/ellipsis.svg" name="..." width={36} height={36} />
+            } name={text} presenceState="online" suppressOnHover={true}
+            onClick={this._showFullRoomList} />
+        );
+    },
+
+    _showFullRoomList: function() {
+        this.setState({
+            truncateAt: -1,
+        });
+    },
+
+    onSearchQueryChanged: function(ev) {
+        this.setState({ searchQuery: ev.target.value });
+    },
+
+    makeGroupRoomTiles: function(query) {
+        const GroupRoomTile = sdk.getComponent("groups.GroupRoomTile");
+        query = (query || "").toLowerCase();
+
+        let roomList = this.state.rooms;
+        if (query) {
+            roomList = roomList.filter((room) => {
+                const matchesName = (room.name || "").toLowerCase().include(query);
+                const matchesAlias = (room.canonicalAlias || "").toLowerCase().includes(query);
+                return matchesName || matchesAlias;
+            });
+        }
+
+        roomList = roomList.map((groupRoom, index) => {
+            return (
+                <GroupRoomTile
+                    key={index}
+                    groupId={this.props.groupId}
+                    groupRoom={groupRoom} />
+            );
+        });
+
+        return roomList;
+    },
+
+    render: function() {
+        if (this.state.fetching) {
+            const Spinner = sdk.getComponent("elements.Spinner");
+            return (<div className="mx_GroupRoomList">
+                <Spinner />
+            </div>);
+        } else if (this.state.rooms === null) {
+            return null;
+        }
+
+        const inputBox = (
+            <form autoComplete="off">
+                <input className="mx_GroupRoomList_query" id="mx_GroupRoomList_query" type="text"
+                        onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
+                        placeholder={_t('Filter group rooms')} />
+            </form>
+        );
+
+        const TruncatedList = sdk.getComponent("elements.TruncatedList");
+        return (
+            <div className="mx_GroupRoomList">
+                { inputBox }
+                <GeminiScrollbar autoshow={true} className="mx_GroupRoomList_joined mx_GroupRoomList_outerWrapper">
+                    <TruncatedList className="mx_GroupRoomList_wrapper" truncateAt={this.state.truncateAt}
+                            createOverflowElement={this._createOverflowTile}>
+                        { this.makeGroupRoomTiles(this.state.searchQuery) }
+                    </TruncatedList>
+                </GeminiScrollbar>
+            </div>
+        );
+    },
+});

src/components/views/groups/GroupRoomTile.js

@@ -0,0 +1,135 @@
+/*
+Copyright 2017 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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import {MatrixClient} from 'matrix-js-sdk';
+import { _t } from '../../../languageHandler';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import dis from '../../../dispatcher';
+import { GroupRoomType } from '../../../groups';
+import Modal from '../../../Modal';
+
+const GroupRoomTile = React.createClass({
+    displayName: 'GroupRoomTile',
+
+    propTypes: {
+        groupId: PropTypes.string.isRequired,
+        groupRoom: GroupRoomType.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            name: this.calculateRoomName(this.props.groupRoom),
+        };
+    },
+
+    componentWillReceiveProps: function(newProps) {
+        this.setState({
+            name: this.calculateRoomName(newProps.groupRoom),
+        });
+    },
+
+    calculateRoomName: function(groupRoom) {
+        return groupRoom.name || groupRoom.canonicalAlias || _t("Unnamed Room");
+    },
+
+    removeRoomFromGroup: function() {
+        const groupId = this.props.groupId;
+        const roomName = this.state.name;
+        const roomId = this.props.groupRoom.roomId;
+        this.context.matrixClient
+            .removeRoomFromGroup(groupId, roomId)
+            .catch((err) => {
+                console.error(`Error whilst removing ${roomId} from ${groupId}`, err);
+                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                Modal.createTrackedDialog('Failed to remove room from group', '', ErrorDialog, {
+                    title: _t("Failed to remove room from group"),
+                    description: _t("Failed to remove '%(roomName)s' from %(groupId)s", {groupId, roomName}),
+                });
+            });
+    },
+
+    onClick: function(e) {
+        let roomId;
+        let roomAlias;
+        if (this.props.groupRoom.canonicalAlias) {
+            roomAlias = this.props.groupRoom.canonicalAlias;
+        } else {
+            roomId = this.props.groupRoom.roomId;
+        }
+        dis.dispatch({
+            action: 'view_room',
+            room_id: roomId,
+            room_alias: roomAlias,
+        });
+    },
+
+    onDeleteClick: function(e) {
+        const groupId = this.props.groupId;
+        const roomName = this.state.name;
+        e.preventDefault();
+        e.stopPropagation();
+        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+        Modal.createTrackedDialog('Confirm removal of group from room', '', QuestionDialog, {
+            title: _t("Are you sure you want to remove '%(roomName)s' from %(groupId)s?", {roomName, groupId}),
+            description: _t("Removing a room from the group will also remove it from the group page."),
+            button: _t("Remove"),
+            onFinished: (success) => {
+                if (success) {
+                    this.removeRoomFromGroup();
+                }
+            },
+        });
+    },
+
+    render: function() {
+        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const avatarUrl = this.context.matrixClient.mxcUrlToHttp(
+            this.props.groupRoom.avatarUrl,
+            36, 36, 'crop',
+        );
+
+        const av = (
+            <BaseAvatar name={this.state.name}
+                width={36} height={36}
+                url={avatarUrl}
+            />
+        );
+
+        return (
+            <AccessibleButton className="mx_GroupRoomTile" onClick={this.onClick}>
+                <div className="mx_GroupRoomTile_avatar">
+                    { av }
+                </div>
+                <div className="mx_GroupRoomTile_name">
+                    { this.state.name }
+                </div>
+                <AccessibleButton className="mx_GroupRoomTile_delete" onClick={this.onDeleteClick}>
+                    <img src="img/cancel-small.svg" />
+                </AccessibleButton>
+            </AccessibleButton>
+        );
+    },
+});
+
+GroupRoomTile.contextTypes = {
+    matrixClient: React.PropTypes.instanceOf(MatrixClient).isRequired,
+};
+
+
+export default GroupRoomTile;

src/components/views/login/CaptchaForm.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { _t, _tJsx } from '../../../languageHandler';
 
 var DIV_ID = 'mx_recaptcha';
@@ -66,11 +67,10 @@ module.exports = React.createClass({
                 // * jumping straight to a hosted captcha page (but we don't support that yet)
                 // * embedding the captcha in an iframe (if that works)
                 // * using a better captcha lib
-                warning.innerHTML = _tJsx(
-                     "Robot check is currently unavailable on desktop - please use a <a>web browser</a>",
-                     /<a>(.*?)<\/a>/,
-                     (sub) => { return "<a href='https://riot.im/app'>{ sub }</a>"; }
-                 );
+                ReactDOM.render(_tJsx(
+                    "Robot check is currently unavailable on desktop - please use a <a>web browser</a>",
+                    /<a>(.*?)<\/a>/,
+                    (sub) => { return <a href='https://riot.im/app'>{ sub }</a>; }), warning);
                 this.refs.recaptchaContainer.appendChild(warning);
             }
             else {

src/components/views/login/LoginFooter.js

@@ -25,7 +25,7 @@ module.exports = React.createClass({
     render: function() {
         return (
             <div className="mx_Login_links">
-                <a href="https://matrix.org">{_t("powered by Matrix")}</a>
+                <a href="https://matrix.org">{ _t("powered by Matrix") }</a>
             </div>
         );
     },

src/components/views/messages/SenderProfile.js

@@ -18,6 +18,7 @@
 
 import React from 'react';
 import sdk from '../../../index';
+import Flair from '../elements/Flair.js';
 
 export default function SenderProfile(props) {
     const EmojiText = sdk.getComponent('elements.EmojiText');
@@ -30,8 +31,17 @@ export default function SenderProfile(props) {
     }
 
     return (
-        <EmojiText className="mx_SenderProfile" dir="auto"
-              onClick={props.onClick}>{`${name || ''} ${props.aux || ''}`}</EmojiText>
+        <div className="mx_SenderProfile" dir="auto" onClick={props.onClick}>
+            <EmojiText className="mx_SenderProfile_name">{ name || '' }</EmojiText>
+            { props.enableFlair ?
+                <Flair
+                    userId={mxEvent.getSender()}
+                    roomId={mxEvent.getRoomId()}
+                    showRelated={true} />
+                : null
+            }
+            { props.aux ? <EmojiText className="mx_SenderProfile_aux"> { props.aux }</EmojiText> : null }
+        </div>
     );
 }
 

src/components/views/messages/TextualBody.js

@@ -31,6 +31,7 @@ import dis from '../../../dispatcher';
 import { _t } from '../../../languageHandler';
 import UserSettingsStore from "../../../UserSettingsStore";
 import MatrixClientPeg from '../../../MatrixClientPeg';
+import ContextualMenu from '../../structures/ContextualMenu';
 import {RoomMember} from 'matrix-js-sdk';
 import classNames from 'classnames';
 
@@ -72,12 +73,16 @@ module.exports = React.createClass({
         textArea.value = text;
         document.body.appendChild(textArea);
         textArea.select();
+
+        let successful = false;
         try {
-            const successful = document.execCommand('copy');
+            successful = document.execCommand('copy');
         } catch (err) {
             console.log('Unable to copy');
         }
+
         document.body.removeChild(textArea);
+        return successful;
     },
 
     componentDidMount: function() {
@@ -113,14 +118,7 @@ module.exports = React.createClass({
                     }
                 }, 10);
             }
-            // add event handlers to the 'copy code' buttons
-            const buttons = ReactDOM.findDOMNode(this).getElementsByClassName("mx_EventTile_copyButton");
-            for (let i = 0; i < buttons.length; i++) {
-                buttons[i].onclick = (e) => {
-                    const copyCode = buttons[i].parentNode.getElementsByTagName("code")[0];
-                    this.copyToClipboard(copyCode.textContent);
-                };
-            }
+            this._addCodeCopyButton();
         }
     },
 
@@ -257,6 +255,33 @@ module.exports = React.createClass({
         }
     },
 
+    _addCodeCopyButton() {
+        // Add 'copy' buttons to pre blocks
+        ReactDOM.findDOMNode(this).querySelectorAll('.mx_EventTile_body pre').forEach((p) => {
+            const button = document.createElement("span");
+            button.className = "mx_EventTile_copyButton";
+            button.onclick = (e) => {
+                const copyCode = button.parentNode.getElementsByTagName("code")[0];
+                const successful = this.copyToClipboard(copyCode.textContent);
+              
+                const GenericTextContextMenu = sdk.getComponent('context_menus.GenericTextContextMenu');
+                const buttonRect = e.target.getBoundingClientRect();
+
+                // The window X and Y offsets are to adjust position when zoomed in to page
+                const x = buttonRect.right + window.pageXOffset;
+                const y = (buttonRect.top + (buttonRect.height / 2) + window.pageYOffset) - 19;
+                const {close} = ContextualMenu.createMenu(GenericTextContextMenu, {
+                    chevronOffset: 10,
+                    left: x,
+                    top: y,
+                    message: successful ? _t('Copied!') : _t('Failed to copy'),
+                });
+                e.target.onmouseout = close;
+            };
+            p.appendChild(button);
+        });
+    },
+
     onCancelClick: function(event) {
         this.setState({ widgetHidden: true });
         // FIXME: persist this somewhere smarter than local storage

src/components/views/messages/UnknownBody.js

@@ -23,10 +23,15 @@ module.exports = React.createClass({
     displayName: 'UnknownBody',
 
     render: function() {
+        let tooltip = _t("Removed or unknown message type");
+        if (this.props.mxEvent.isRedacted()) {
+            tooltip = _t("Message removed by %(userId)s", {userId: this.props.mxEvent.getSender()});
+        }
+
         const text = this.props.mxEvent.getContent().body;
         return (
-            <span className="mx_UnknownBody" title={_t("Removed or unknown message type")}>
-                {text}
+            <span className="mx_UnknownBody" title={tooltip}>
+                { text }
             </span>
         );
     },

src/components/views/room_settings/AliasSettings.js

@@ -136,24 +136,25 @@ module.exports = React.createClass({
         return ObjectUtils.getKeyValueArrayDiffs(oldAliases, this.state.domainToAliases);
     },
 
-    onAliasAdded: function(alias) {
+    onNewAliasChanged: function(value) {
+        this.setState({newAlias: value});
+    },
+
+    onLocalAliasAdded: function(alias) {
         if (!alias || alias.length === 0) return; // ignore attempts to create blank aliases
 
-        if (this.isAliasValid(alias)) {
-            // add this alias to the domain to aliases dict
-            var domain = alias.replace(/^.*?:/, '');
-            // XXX: do we need to deep copy aliases before editing it?
-            this.state.domainToAliases[domain] = this.state.domainToAliases[domain] || [];
-            this.state.domainToAliases[domain].push(alias);
-            this.setState({
-                domainToAliases: this.state.domainToAliases
-            });
+        const localDomain = MatrixClientPeg.get().getDomain();
+        if (this.isAliasValid(alias) && alias.endsWith(localDomain)) {
+            this.state.domainToAliases[localDomain] = this.state.domainToAliases[localDomain] || [];
+            this.state.domainToAliases[localDomain].push(alias);
 
-            // reset the add field
-            this.refs.add_alias.setValue(''); // FIXME
-        }
-        else {
-            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            this.setState({
+                domainToAliases: this.state.domainToAliases,
+                // Reset the add field
+                newAlias: "",
+            });
+        } else {
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createTrackedDialog('Invalid alias format', '', ErrorDialog, {
                 title: _t('Invalid alias format'),
                 description: _t('\'%(alias)s\' is not a valid format for an alias', { alias: alias }),
@@ -161,15 +162,13 @@ module.exports = React.createClass({
         }
     },
 
-    onAliasChanged: function(domain, index, alias) {
+    onLocalAliasChanged: function(alias, index) {
         if (alias === "") return; // hit the delete button to delete please
-        var oldAlias;
-        if (this.isAliasValid(alias)) {
-            oldAlias = this.state.domainToAliases[domain][index];
-            this.state.domainToAliases[domain][index] = alias;
-        }
-        else {
-            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        const localDomain = MatrixClientPeg.get().getDomain();
+        if (this.isAliasValid(alias) && alias.endsWith(localDomain)) {
+            this.state.domainToAliases[localDomain][index] = alias;
+        } else {
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createTrackedDialog('Invalid address format', '', ErrorDialog, {
                 title: _t('Invalid address format'),
                 description: _t('\'%(alias)s\' is not a valid format for an address', { alias: alias }),
@@ -177,15 +176,16 @@ module.exports = React.createClass({
         }
     },
 
-    onAliasDeleted: function(domain, index) {
+    onLocalAliasDeleted: function(index) {
+        const localDomain = MatrixClientPeg.get().getDomain();
         // It's a bit naughty to directly manipulate this.state, and React would
         // normally whine at you, but it can't see us doing the splice.  Given we
         // promptly setState anyway, it's just about acceptable.  The alternative
         // would be to arbitrarily deepcopy to a temp variable and then setState
         // that, but why bother when we can cut this corner.
-        var alias = this.state.domainToAliases[domain].splice(index, 1);
+        this.state.domainToAliases[localDomain].splice(index, 1);
         this.setState({
-            domainToAliases: this.state.domainToAliases
+            domainToAliases: this.state.domainToAliases,
         });
     },
 
@@ -198,6 +198,7 @@ module.exports = React.createClass({
     render: function() {
         var self = this;
         var EditableText = sdk.getComponent("elements.EditableText");
+        var EditableItemList = sdk.getComponent("elements.EditableItemList");
         var localDomain = MatrixClientPeg.get().getDomain();
 
         var canonical_alias_section;
@@ -257,58 +258,24 @@ module.exports = React.createClass({
                 <div className="mx_RoomSettings_aliasLabel">
                     { _t('The main address for this room is') }: { canonical_alias_section }
                 </div>
-                <div className="mx_RoomSettings_aliasLabel">
-                    { (this.state.domainToAliases[localDomain] &&
-                        this.state.domainToAliases[localDomain].length > 0)
-                      ? _t('Local addresses for this room:')
-                      : _t('This room has no local addresses') }
-                </div>
-                <div className="mx_RoomSettings_aliasesTable">
-                    { (this.state.domainToAliases[localDomain] || []).map((alias, i) => {
-                        var deleteButton;
-                        if (this.props.canSetAliases) {
-                            deleteButton = (
-                                <img src="img/cancel-small.svg" width="14" height="14"
-                                    alt={ _t('Delete') } onClick={ self.onAliasDeleted.bind(self, localDomain, i) } />
-                            );
-                        }
-                        return (
-                            <div className="mx_RoomSettings_aliasesTableRow" key={ i }>
-                                <EditableText
-                                    className="mx_RoomSettings_alias mx_RoomSettings_editable"
-                                    placeholderClassName="mx_RoomSettings_aliasPlaceholder"
-                                    placeholder={ _t('New address (e.g. #foo:%(localDomain)s)', { localDomain: localDomain}) }
-                                    blurToCancel={ false }
-                                    onValueChanged={ self.onAliasChanged.bind(self, localDomain, i) }
-                                    editable={ self.props.canSetAliases }
-                                    initialValue={ alias } />
-                                <div className="mx_RoomSettings_deleteAlias mx_filterFlipColor">
-                                     { deleteButton }
-                                </div>
-                            </div>
-                        );
-                    })}
-
-                    { this.props.canSetAliases ?
-                        <div className="mx_RoomSettings_aliasesTableRow" key="new">
-                            <EditableText
-                                ref="add_alias"
-                                className="mx_RoomSettings_alias mx_RoomSettings_editable"
-                                placeholderClassName="mx_RoomSettings_aliasPlaceholder"
-                                placeholder={ _t('New address (e.g. #foo:%(localDomain)s)', { localDomain: localDomain}) }
-                                blurToCancel={ false }
-                                onValueChanged={ self.onAliasAdded } />
-                            <div className="mx_RoomSettings_addAlias mx_filterFlipColor">
-                                 <img src="img/plus.svg" width="14" height="14" alt="Add"
-                                      onClick={ self.onAliasAdded.bind(self, undefined) }/>
-                            </div>
-                        </div> : ""
-                    }
-                </div>
+                <EditableItemList
+                    className={"mx_RoomSettings_localAliases"}
+                    items={this.state.domainToAliases[localDomain] || []}
+                    newItem={this.state.newAlias}
+                    onNewItemChanged={this.onNewAliasChanged}
+                    onItemAdded={this.onLocalAliasAdded}
+                    onItemEdited={this.onLocalAliasChanged}
+                    onItemRemoved={this.onLocalAliasDeleted}
+                    itemsLabel={_t('Local addresses for this room:')}
+                    noItemsLabel={_t('This room has no local addresses')}
+                    placeholder={_t(
+                        'New address (e.g. #foo:%(localDomain)s)', {localDomain: localDomain},
+                    )}
+                />
 
                 { remote_aliases_section }
 
             </div>
         );
-    }
+    },
 });

src/components/views/room_settings/RelatedGroupSettings.js

@@ -0,0 +1,125 @@
+/*
+Copyright 2017 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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import {MatrixEvent, MatrixClient} from 'matrix-js-sdk';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import Modal from '../../../Modal';
+
+const GROUP_ID_REGEX = /\+\S+\:\S+/;
+
+module.exports = React.createClass({
+    displayName: 'RelatedGroupSettings',
+
+    propTypes: {
+        roomId: React.PropTypes.string.isRequired,
+        canSetRelatedRooms: React.PropTypes.bool.isRequired,
+        relatedGroupsEvent: React.PropTypes.instanceOf(MatrixEvent),
+    },
+
+    contextTypes: {
+        matrixClient: React.PropTypes.instanceOf(MatrixClient),
+    },
+
+    getDefaultProps: function() {
+        return {
+            canSetRelatedRooms: false,
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            newGroupsList: this.props.relatedGroupsEvent ?
+                (this.props.relatedGroupsEvent.getContent().groups || []) : [],
+            newGroupId: null,
+        };
+    },
+
+    saveSettings: function() {
+        return this.context.matrixClient.sendStateEvent(
+            this.props.roomId,
+            'm.room.related_groups',
+            {
+                groups: this.state.newGroupsList,
+            },
+            '',
+        );
+    },
+
+    validateGroupId: function(groupId) {
+        if (!GROUP_ID_REGEX.test(groupId)) {
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createTrackedDialog('Invalid related group ID', '', ErrorDialog, {
+                title: _t('Invalid group ID'),
+                description: _t('\'%(groupId)s\' is not a valid group ID', { groupId }),
+            });
+            return false;
+        }
+        return true;
+    },
+
+    onNewGroupChanged: function(newGroupId) {
+        this.setState({ newGroupId });
+    },
+
+    onGroupAdded: function(groupId) {
+        if (groupId.length === 0 || !this.validateGroupId(groupId)) {
+            return;
+        }
+        this.setState({
+            newGroupsList: this.state.newGroupsList.concat([groupId]),
+            newGroupId: '',
+        });
+    },
+
+    onGroupEdited: function(groupId, index) {
+        if (groupId.length === 0 || !this.validateGroupId(groupId)) {
+            return;
+        }
+        this.setState({
+            newGroupsList: Object.assign(this.state.newGroupsList, {[index]: groupId}),
+        });
+    },
+
+    onGroupDeleted: function(index) {
+        const newGroupsList = this.state.newGroupsList.slice();
+        newGroupsList.splice(index, 1),
+        this.setState({ newGroupsList });
+    },
+
+    render: function() {
+        const localDomain = this.context.matrixClient.getDomain();
+        const EditableItemList = sdk.getComponent('elements.EditableItemList');
+        return (<div>
+            <h3>{ _t('Related Groups') }</h3>
+            <EditableItemList
+                items={this.state.newGroupsList}
+                className={"mx_RelatedGroupSettings"}
+                newItem={this.state.newGroupId}
+                onNewItemChanged={this.onNewGroupChanged}
+                onItemAdded={this.onGroupAdded}
+                onItemEdited={this.onGroupEdited}
+                onItemRemoved={this.onGroupDeleted}
+                itemsLabel={_t('Related groups for this room:')}
+                noItemsLabel={_t('This room has no related groups')}
+                placeholder={_t(
+                    'New group ID (e.g. +foo:%(localDomain)s)', {localDomain},
+                )}
+            />
+        </div>);
+    },
+});

src/components/views/rooms/AppsDrawer.js

@@ -28,6 +28,8 @@ import ScalarMessaging from '../../../ScalarMessaging';
 import { _t } from '../../../languageHandler';
 import WidgetUtils from '../../../WidgetUtils';
 
+// The maximum number of widgets that can be added in a room
+const MAX_WIDGETS = 2;
 
 module.exports = React.createClass({
     displayName: 'AppsDrawer',
@@ -51,19 +53,18 @@ module.exports = React.createClass({
         this.scalarClient = null;
         if (SdkConfig.get().integrations_ui_url && SdkConfig.get().integrations_rest_url) {
             this.scalarClient = new ScalarAuthClient();
-            this.scalarClient.connect().done(() => {
+            this.scalarClient.connect().then(() => {
                 this.forceUpdate();
-                if (this.state.apps && this.state.apps.length < 1) {
-                    this.onClickAddWidget();
-                }
-            // TODO -- Handle Scalar errors
-            // },
-            // (err) => {
-            //     this.setState({
-            //         scalar_error: err,
-            //     });
+            }).catch((e) => {
+                console.log("Failed to connect to integrations server");
+                // TODO -- Handle Scalar errors
+                //     this.setState({
+                //         scalar_error: err,
+                //     });
             });
         }
+
+        this.dispatcherRef = dis.register(this.onAction);
     },
 
     componentWillUnmount: function() {
@@ -71,6 +72,27 @@ module.exports = React.createClass({
         if (MatrixClientPeg.get()) {
             MatrixClientPeg.get().removeListener("RoomState.events", this.onRoomStateEvents);
         }
+        dis.unregister(this.dispatcherRef);
+    },
+
+    componentWillReceiveProps(newProps) {
+        // Room has changed probably, update apps
+        this._updateApps();
+    },
+
+    onAction: function(action) {
+        switch (action.action) {
+            case 'appsDrawer':
+                // When opening the app draw when there aren't any apps, auto-launch the
+                // integrations manager to skip the awkward click on "Add widget"
+                if (action.show) {
+                    const apps = this._getApps();
+                    if (apps.length === 0) {
+                        this._launchManageIntegrations();
+                    }
+                }
+                break;
+        }
     },
 
     /**
@@ -93,7 +115,7 @@ module.exports = React.createClass({
         return pathTemplate;
     },
 
-    _initAppConfig: function(appId, app) {
+    _initAppConfig: function(appId, app, sender) {
         const user = MatrixClientPeg.get().getUser(this.props.userId);
         const params = {
             '$matrix_user_id': this.props.userId,
@@ -111,6 +133,7 @@ module.exports = React.createClass({
         app.id = appId;
         app.name = app.name || app.type;
         app.url = this.encodeUri(app.url, params);
+        app.creatorUserId = (sender && sender.userId) ? sender.userId : null;
 
         return app;
     },
@@ -131,18 +154,12 @@ module.exports = React.createClass({
         return appsStateEvents.filter((ev) => {
             return ev.getContent().type && ev.getContent().url;
         }).map((ev) => {
-            return this._initAppConfig(ev.getStateKey(), ev.getContent());
+            return this._initAppConfig(ev.getStateKey(), ev.getContent(), ev.sender);
         });
     },
 
     _updateApps: function() {
         const apps = this._getApps();
-        if (apps.length < 1) {
-            dis.dispatch({
-                action: 'appsDrawer',
-                show: false,
-            });
-        }
         this.setState({
             apps: apps,
         });
@@ -157,11 +174,7 @@ module.exports = React.createClass({
         }
     },
 
-    onClickAddWidget: function(e) {
-        if (e) {
-            e.preventDefault();
-        }
-
+    _launchManageIntegrations: function() {
         const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
         const src = (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
                 this.scalarClient.getScalarInterfaceUrlForRoom(this.props.room.roomId, 'add_integ') :
@@ -171,6 +184,23 @@ module.exports = React.createClass({
         }, "mx_IntegrationsManager");
     },
 
+    onClickAddWidget: function(e) {
+        e.preventDefault();
+        // Display a warning dialog if the max number of widgets have already been added to the room
+        const apps = this._getApps();
+        if (apps && apps.length >= MAX_WIDGETS) {
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            const errorMsg = `The maximum number of ${MAX_WIDGETS} widgets have already been added to this room.`;
+            console.error(errorMsg);
+            Modal.createDialog(ErrorDialog, {
+                title: _t("Cannot add any more widgets"),
+                description: _t("The maximum permitted number of widgets have already been added to this room."),
+            });
+            return;
+        }
+        this._launchManageIntegrations();
+    },
+
     render: function() {
         const apps = this.state.apps.map(
             (app, index, arr) => {
@@ -183,24 +213,34 @@ module.exports = React.createClass({
                     fullWidth={arr.length<2 ? true : false}
                     room={this.props.room}
                     userId={this.props.userId}
+                    show={this.props.showApps}
+                    creatorUserId={app.creatorUserId}
                 />);
             });
 
-        const addWidget = this.state.apps && this.state.apps.length < 2 && this._canUserModify() &&
-            (<div onClick={this.onClickAddWidget}
-                            role="button"
-                            tabIndex="0"
-                            className="mx_AddWidget_button"
-                            title={_t('Add a widget')}>
-                            [+] {_t('Add a widget')}
-                        </div>);
+        let addWidget;
+        if (this.props.showApps &&
+            this._canUserModify()
+        ) {
+            addWidget = <div
+                onClick={this.onClickAddWidget}
+                role="button"
+                tabIndex="0"
+                className={this.state.apps.length<2 ?
+                    "mx_AddWidget_button mx_AddWidget_button_full_width" :
+                    "mx_AddWidget_button"
+                }
+                title={_t('Add a widget')}>
+                [+] { _t('Add a widget') }
+            </div>;
+        }
 
         return (
             <div className="mx_AppsDrawer">
                 <div id="apps" className="mx_AppsContainer">
-                    {apps}
+                    { apps }
                 </div>
-                {addWidget}
+                { this._canUserModify() && addWidget }
             </div>
         );
     },

src/components/views/rooms/Autocomplete.js

@@ -143,7 +143,6 @@ export default class Autocomplete extends React.Component {
             return null;
         }
         this.setSelection(selectionOffset);
-        return selectionOffset === COMPOSER_SELECTED ? null : this.state.completionList[selectionOffset - 1];
     }
 
     // called from MessageComposerInput
@@ -155,7 +154,6 @@ export default class Autocomplete extends React.Component {
             return null;
         }
         this.setSelection(selectionOffset);
-        return selectionOffset === COMPOSER_SELECTED ? null : this.state.completionList[selectionOffset - 1];
     }
 
     onEscape(e): boolean {
@@ -201,6 +199,9 @@ export default class Autocomplete extends React.Component {
 
     setSelection(selectionOffset: number) {
         this.setState({selectionOffset, hide: false});
+        if (this.props.onSelectionChange) {
+            this.props.onSelectionChange(this.state.completionList[selectionOffset - 1]);
+        }
     }
 
     componentDidUpdate() {

src/components/views/rooms/AuxPanel.js

@@ -129,11 +129,13 @@ module.exports = React.createClass({
         );
 
         let appsDrawer = null;
-        if(UserSettingsStore.isFeatureEnabled('matrix_apps') && this.props.showApps) {
+        if(UserSettingsStore.isFeatureEnabled('matrix_apps')) {
             appsDrawer = <AppsDrawer ref="appsDrawer"
                 room={this.props.room}
                 userId={this.props.userId}
-                maxHeight={this.props.maxHeight}/>;
+                maxHeight={this.props.maxHeight}
+                showApps={this.props.showApps}
+            />;
         }
 
         return (

src/components/views/rooms/EventTile.js

@@ -44,6 +44,8 @@ var eventTileTypes = {
     'm.room.history_visibility' : 'messages.TextualEvent',
     'm.room.encryption' : 'messages.TextualEvent',
     'm.room.power_levels' : 'messages.TextualEvent',
+
+    'im.vector.modular.widgets': 'messages.TextualEvent',
 };
 
 var MAX_READ_AVATARS = 5;
@@ -506,10 +508,10 @@ module.exports = withMatrixClient(React.createClass({
                 if (msgtype === 'm.image') aux = _t('sent an image');
                 else if (msgtype === 'm.video') aux = _t('sent a video');
                 else if (msgtype === 'm.file') aux = _t('uploaded a file');
-                sender = <SenderProfile onClick={ this.onSenderProfileClick } mxEvent={this.props.mxEvent} aux={aux} />;
+                sender = <SenderProfile onClick={ this.onSenderProfileClick } mxEvent={this.props.mxEvent} enableFlair={!aux} aux={aux} />;
             }
             else {
-                sender = <SenderProfile mxEvent={this.props.mxEvent} />;
+                sender = <SenderProfile mxEvent={this.props.mxEvent} enableFlair={true} />;
             }
         }
 

src/components/views/rooms/ForwardMessage.js

@@ -61,7 +61,7 @@ module.exports = React.createClass({
     render: function() {
         return (
             <div className="mx_ForwardMessage">
-                <h1>{_t('Please select the destination room for this message')}</h1>
+                <h1>{ _t('Please select the destination room for this message') }</h1>
             </div>
         );
     },

src/components/views/rooms/MemberInfo.js

@@ -62,6 +62,7 @@ module.exports = withMatrixClient(React.createClass({
             updating: 0,
             devicesLoading: true,
             devices: null,
+            isIgnoring: false,
         };
     },
 
@@ -81,6 +82,8 @@ module.exports = withMatrixClient(React.createClass({
         cli.on("RoomState.events", this.onRoomStateEvents);
         cli.on("RoomMember.name", this.onRoomMemberName);
         cli.on("accountData", this.onAccountData);
+
+        this._checkIgnoreState();
     },
 
     componentDidMount: function() {
@@ -111,6 +114,11 @@ module.exports = withMatrixClient(React.createClass({
         }
     },
 
+    _checkIgnoreState: function() {
+        const isIgnoring = this.props.matrixClient.isUserIgnored(this.props.member.userId);
+        this.setState({isIgnoring: isIgnoring});
+    },
+
     _disambiguateDevices: function(devices) {
         var names = Object.create(null);
         for (var i = 0; i < devices.length; i++) {
@@ -225,6 +233,18 @@ module.exports = withMatrixClient(React.createClass({
         });
     },
 
+    onIgnoreToggle: function() {
+        const ignoredUsers = this.props.matrixClient.getIgnoredUsers();
+        if (this.state.isIgnoring) {
+            const index = ignoredUsers.indexOf(this.props.member.userId);
+            if (index !== -1) ignoredUsers.splice(index, 1);
+        } else {
+            ignoredUsers.push(this.props.member.userId);
+        }
+
+        this.props.matrixClient.setIgnoredUsers(ignoredUsers).then(() => this.setState({isIgnoring: !this.state.isIgnoring}));
+    },
+
     onKick: function() {
         const membership = this.props.member.membership;
         const kickLabel = membership === "invite" ? _t("Disinvite") : _t("Kick");
@@ -607,6 +627,29 @@ module.exports = withMatrixClient(React.createClass({
         );
     },
 
+    _renderUserOptions: function() {
+        // Only allow the user to ignore the user if its not ourselves
+        let ignoreButton = null;
+        if (this.props.member.userId !== this.props.matrixClient.getUserId()) {
+            ignoreButton = (
+                <AccessibleButton onClick={this.onIgnoreToggle} className="mx_MemberInfo_field">
+                    {this.state.isIgnoring ? _t("Unignore") : _t("Ignore")}
+                </AccessibleButton>
+            );
+        }
+
+        if (!ignoreButton) return null;
+
+        return (
+            <div>
+                <h3>{ _t("User Options") }</h3>
+                <div className="mx_MemberInfo_buttons">
+                    {ignoreButton}
+                </div>
+            </div>
+        );
+    },
+
     render: function() {
         var startChat, kickButton, banButton, muteButton, giveModButton, spinner;
         if (this.props.member.userId !== this.props.matrixClient.credentials.userId) {
@@ -708,7 +751,7 @@ module.exports = withMatrixClient(React.createClass({
         if (kickButton || banButton || muteButton || giveModButton) {
             adminTools =
                 <div>
-                    <h3>{_t("Admin tools")}</h3>
+                    <h3>{_t("Admin Tools")}</h3>
 
                     <div className="mx_MemberInfo_buttons">
                         {muteButton}
@@ -756,6 +799,8 @@ module.exports = withMatrixClient(React.createClass({
                         </div>
                     </div>
 
+                    { this._renderUserOptions() }
+
                     { adminTools }
 
                     { startChat }

src/components/views/rooms/MemberList.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
+Copyright 2017 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.
@@ -14,42 +15,37 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-var React = require('react');
+
+import React from 'react';
 import { _t } from '../../../languageHandler';
-var classNames = require('classnames');
-var Matrix = require("matrix-js-sdk");
-import Promise from 'bluebird';
 var MatrixClientPeg = require("../../../MatrixClientPeg");
-var Modal = require("../../../Modal");
-var Entities = require("../../../Entities");
 var sdk = require('../../../index');
 var GeminiScrollbar = require('react-gemini-scrollbar');
 var rate_limited_func = require('../../../ratelimitedfunc');
 var CallHandler = require("../../../CallHandler");
-var Invite = require("../../../Invite");
 
-var INITIAL_LOAD_NUM_MEMBERS = 30;
+const INITIAL_LOAD_NUM_MEMBERS = 30;
+const INITIAL_LOAD_NUM_INVITED = 5;
+const SHOW_MORE_INCREMENT = 100;
 
 module.exports = React.createClass({
     displayName: 'MemberList',
 
     getInitialState: function() {
-        var state = {
-            members: [],
+        this.memberDict = this.getMemberDict();
+        const members = this.roomMembers();
+
+        return {
+            members: members,
+            filteredJoinedMembers: this._filterMembers(members, 'join'),
+            filteredInvitedMembers: this._filterMembers(members, 'invite'),
+
             // ideally we'd size this to the page height, but
             // in practice I find that a little constraining
-            truncateAt: INITIAL_LOAD_NUM_MEMBERS,
+            truncateAtJoined: INITIAL_LOAD_NUM_MEMBERS,
+            truncateAtInvited: INITIAL_LOAD_NUM_INVITED,
             searchQuery: "",
         };
-        if (!this.props.roomId) return state;
-        var cli = MatrixClientPeg.get();
-        var room = cli.getRoom(this.props.roomId);
-        if (!room) return state;
-
-        this.memberDict = this.getMemberDict();
-
-        state.members = this.roomMembers();
-        return state;
     },
 
     componentWillMount: function() {
@@ -147,10 +143,12 @@ module.exports = React.createClass({
         // console.log("Updating memberlist");
         this.memberDict = this.getMemberDict();
 
-        var self = this;
-        this.setState({
-            members: self.roomMembers()
-        });
+        const newState = {
+            members: this.roomMembers(),
+        };
+        newState.filteredJoinedMembers = this._filterMembers(newState.members, 'join');
+        newState.filteredInvitedMembers = this._filterMembers(newState.members, 'invite');
+        this.setState(newState);
     }, 500),
 
     getMemberDict: function() {
@@ -199,7 +197,15 @@ module.exports = React.createClass({
         return to_display;
     },
 
-    _createOverflowTile: function(overflowCount, totalCount) {
+    _createOverflowTileJoined: function(overflowCount, totalCount) {
+        return this._createOverflowTile(overflowCount, totalCount, this._showMoreJoinedMemberList);
+    },
+
+    _createOverflowTileInvited: function(overflowCount, totalCount) {
+        return this._createOverflowTile(overflowCount, totalCount, this._showMoreInvitedMemberList);
+    },
+
+    _createOverflowTile: function(overflowCount, totalCount, onClick) {
         // For now we'll pretend this is any entity. It should probably be a separate tile.
         const EntityTile = sdk.getComponent("rooms.EntityTile");
         const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
@@ -208,13 +214,19 @@ module.exports = React.createClass({
             <EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
                 <BaseAvatar url="img/ellipsis.svg" name="..." width={36} height={36} />
             } name={text} presenceState="online" suppressOnHover={true}
-            onClick={this._showFullMemberList} />
+            onClick={onClick} />
         );
     },
 
-    _showFullMemberList: function() {
+    _showMoreJoinedMemberList: function() {
         this.setState({
-            truncateAt: -1
+            truncateAtJoined: this.state.truncateAtJoined + SHOW_MORE_INCREMENT,
+        });
+    },
+
+    _showMoreInvitedMemberList: function() {
+        this.setState({
+            truncateAtInvited: this.state.truncateAtInvited + SHOW_MORE_INCREMENT,
         });
     },
 
@@ -280,17 +292,17 @@ module.exports = React.createClass({
     },
 
     onSearchQueryChanged: function(ev) {
-        this.setState({ searchQuery: ev.target.value });
+        const q = ev.target.value;
+        this.setState({
+            searchQuery: q,
+            filteredJoinedMembers: this._filterMembers(this.state.members, 'join', q),
+            filteredInvitedMembers: this._filterMembers(this.state.members, 'invite', q),
+        });
     },
 
-    makeMemberTiles: function(membership, query) {
-        var MemberTile = sdk.getComponent("rooms.MemberTile");
-        query = (query || "").toLowerCase();
-
-        var self = this;
-
-        var memberList = self.state.members.filter(function(userId) {
-            var m = self.memberDict[userId];
+    _filterMembers: function(members, membership, query) {
+        return members.filter((userId) => {
+            const m = this.memberDict[userId];
 
             if (query) {
                 const matchesName = m.name.toLowerCase().indexOf(query) !== -1;
@@ -302,14 +314,23 @@ module.exports = React.createClass({
             }
 
             return m.membership == membership;
-        }).map(function(userId) {
-            var m = self.memberDict[userId];
+        });
+    },
+
+    _makeMemberTiles: function(members, membership) {
+        const MemberTile = sdk.getComponent("rooms.MemberTile");
+
+        const memberList = members.map((userId) => {
+            const m = this.memberDict[userId];
             return (
                 <MemberTile key={userId} member={m} ref={userId} />
             );
         });
 
         // XXX: surely this is not the right home for this logic.
+        // Double XXX: Now it's really, really not the right home for this logic:
+        // we shouldn't even be passing in the 'membership' param to this function.
+        // Ew, ew, and ew.
         if (membership === "invite") {
             // include 3pid invites (m.room.third_party_invite) state events.
             // The HS may have already converted these into m.room.member invites so
@@ -333,7 +354,7 @@ module.exports = React.createClass({
                         return;
                     }
                     memberList.push(
-                        <EntityTile key={e.getStateKey()} name={e.getContent().display_name} />
+                        <EntityTile key={e.getStateKey()} name={e.getContent().display_name} suppressOnHover={true} />
                     );
                 });
             }
@@ -342,21 +363,42 @@ module.exports = React.createClass({
         return memberList;
     },
 
+    _getChildrenJoined: function(start, end) {
+        return this._makeMemberTiles(this.state.filteredJoinedMembers.slice(start, end));
+    },
+
+    _getChildCountJoined: function() {
+        return this.state.filteredJoinedMembers.length;
+    },
+
+    _getChildrenInvited: function(start, end) {
+        return this._makeMemberTiles(this.state.filteredInvitedMembers.slice(start, end), 'invite');
+    },
+
+    _getChildCountInvited: function() {
+        return this.state.filteredInvitedMembers.length;
+    },
+
     render: function() {
-        var invitedSection = null;
-        var invitedMemberTiles = this.makeMemberTiles('invite', this.state.searchQuery);
-        if (invitedMemberTiles.length > 0) {
+        const TruncatedList = sdk.getComponent("elements.TruncatedList");
+
+        let invitedSection = null;
+        if (this._getChildCountInvited() > 0) {
             invitedSection = (
                 <div className="mx_MemberList_invited">
                     <h2>{ _t("Invited") }</h2>
                     <div className="mx_MemberList_wrapper">
-                        {invitedMemberTiles}
+                        <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAtInvited}
+                                createOverflowElement={this._createOverflowTileInvited}
+                                getChildren={this._getChildrenInvited}
+                                getChildCount={this._getChildCountInvited}
+                        />
                     </div>
                 </div>
             );
         }
 
-        var inputBox = (
+        const inputBox = (
             <form autoComplete="off">
                 <input className="mx_MemberList_query" id="mx_MemberList_query" type="text"
                         onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
@@ -364,15 +406,15 @@ module.exports = React.createClass({
             </form>
         );
 
-        var TruncatedList = sdk.getComponent("elements.TruncatedList");
         return (
             <div className="mx_MemberList">
                 { inputBox }
                 <GeminiScrollbar autoshow={true} className="mx_MemberList_joined mx_MemberList_outerWrapper">
-                    <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAt}
-                            createOverflowElement={this._createOverflowTile}>
-                        {this.makeMemberTiles('join', this.state.searchQuery)}
-                    </TruncatedList>
+                    <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAtJoined}
+                            createOverflowElement={this._createOverflowTileJoined}
+                            getChildren={this._getChildrenJoined}
+                            getChildCount={this._getChildCountJoined}
+                    />
                     {invitedSection}
                 </GeminiScrollbar>
             </div>

src/components/views/rooms/MessageComposer.js

@@ -289,12 +289,12 @@ export default class MessageComposer extends React.Component {
             if (this.props.showApps) {
                 hideAppsButton =
                     <div key="controls_hide_apps" className="mx_MessageComposer_apps" onClick={this.onHideAppsClick} title={_t("Hide Apps")}>
-                        <TintableSvg src="img/icons-apps-active.svg" width="35" height="35"/>
+                        <TintableSvg src="img/icons-hide-apps.svg" width="35" height="35"/>
                     </div>;
             } else {
                 showAppsButton =
                     <div key="show_apps" className="mx_MessageComposer_apps" onClick={this.onShowAppsClick} title={_t("Show Apps")}>
-                        <TintableSvg src="img/icons-apps.svg" width="35" height="35"/>
+                        <TintableSvg src="img/icons-show-apps.svg" width="35" height="35"/>
                     </div>;
             }
         }

src/components/views/rooms/MessageComposerInput.js

@@ -30,7 +30,7 @@ import SlashCommands from '../../../SlashCommands';
 import KeyCode from '../../../KeyCode';
 import Modal from '../../../Modal';
 import sdk from '../../../index';
-import { _t } from '../../../languageHandler';
+import { _t, _td } from '../../../languageHandler';
 import Analytics from '../../../Analytics';
 
 import dis from '../../../dispatcher';
@@ -949,8 +949,7 @@ export default class MessageComposerInput extends React.Component {
     };
 
     moveAutocompleteSelection = (up) => {
-        const completion = up ? this.autocomplete.onUpArrow() : this.autocomplete.onDownArrow();
-        return this.setDisplayedCompletion(completion);
+        up ? this.autocomplete.onUpArrow() : this.autocomplete.onDownArrow();
     };
 
     onEscape = async (e) => {
@@ -1033,10 +1032,10 @@ export default class MessageComposerInput extends React.Component {
      buttons. */
     getSelectionInfo(editorState: EditorState) {
         const styleName = {
-            BOLD: 'bold',
-            ITALIC: 'italic',
-            STRIKETHROUGH: 'strike',
-            UNDERLINE: 'underline',
+            BOLD: _td('bold'),
+            ITALIC: _td('italic'),
+            STRIKETHROUGH: _td('strike'),
+            UNDERLINE: _td('underline'),
         };
 
         const originalStyle = editorState.getCurrentInlineStyle().toArray();
@@ -1045,10 +1044,10 @@ export default class MessageComposerInput extends React.Component {
             .filter((styleName) => !!styleName);
 
         const blockName = {
-            'code-block': 'code',
-            'blockquote': 'quote',
-            'unordered-list-item': 'bullet',
-            'ordered-list-item': 'numbullet',
+            'code-block': _td('code'),
+            'blockquote': _td('quote'),
+            'unordered-list-item': _td('bullet'),
+            'ordered-list-item': _td('numbullet'),
         };
         const originalBlockType = editorState.getCurrentContent()
             .getBlockForKey(editorState.getSelection().getStartKey())
@@ -1133,6 +1132,7 @@ export default class MessageComposerInput extends React.Component {
                     <Autocomplete
                         ref={(e) => this.autocomplete = e}
                         onConfirm={this.setDisplayedCompletion}
+                        onSelectionChange={this.setDisplayedCompletion}
                         query={this.getAutocompleteQuery(content)}
                         selection={selection}/>
                 </div>

src/components/views/rooms/PresenceLabel.js

@@ -70,7 +70,7 @@ module.exports = React.createClass({
         if (presence === "online") return _t("Online");
         if (presence === "unavailable") return _t("Idle"); // XXX: is this actually right?
         if (presence === "offline") return _t("Offline");
-        return "Unknown";
+        return _t("Unknown");
     },
 
     render: function() {

src/components/views/rooms/ReadReceiptMarker.js

@@ -123,7 +123,19 @@ module.exports = React.createClass({
         }
 
         var newElement = ReactDOM.findDOMNode(this);
-        var startTopOffset = oldTop - newElement.offsetParent.getBoundingClientRect().top;
+        let startTopOffset;
+        if (!newElement.offsetParent) {
+            // this seems to happen sometimes for reasons I don't understand
+            // the docs for `offsetParent` say it may be null if `display` is
+            // `none`, but I can't see why that would happen.
+            console.warn(
+                `ReadReceiptMarker for ${this.props.member.userId} in ` +
+                `${this.props.member.roomId} has no offsetParent`,
+            );
+            startTopOffset = 0;
+        } else {
+            startTopOffset = oldTop - newElement.offsetParent.getBoundingClientRect().top;
+        }
 
         var startStyles = [];
         var enterTransitionOpts = [];
@@ -131,13 +143,12 @@ module.exports = React.createClass({
         if (oldInfo && oldInfo.left) {
             // start at the old height and in the old h pos
 
-            var leftOffset = oldInfo.left;
             startStyles.push({ top: startTopOffset+"px",
                                left: oldInfo.left+"px" });
 
             var reorderTransitionOpts = {
                 duration: 100,
-                easing: 'easeOut'
+                easing: 'easeOut',
             };
 
             enterTransitionOpts.push(reorderTransitionOpts);
@@ -175,7 +186,7 @@ module.exports = React.createClass({
         if (this.props.timestamp) {
             title = _t(
                 "Seen by %(userName)s at %(dateTime)s",
-                {userName: this.props.member.userId, dateTime: DateUtils.formatDate(new Date(this.props.timestamp), this.props.showTwelveHour)}
+                {userName: this.props.member.userId, dateTime: DateUtils.formatDate(new Date(this.props.timestamp), this.props.showTwelveHour)},
             );
         }
 

src/components/views/rooms/RoomHeader.js

@@ -29,6 +29,7 @@ import * as linkify from 'linkifyjs';
 import linkifyElement from 'linkifyjs/element';
 import linkifyMatrix from '../../../linkify-matrix';
 import AccessibleButton from '../elements/AccessibleButton';
+import ManageIntegsButton from '../elements/ManageIntegsButton';
 import {CancelButton} from './SimpleRoomHeader';
 
 linkifyMatrix(linkify);
@@ -47,6 +48,7 @@ module.exports = React.createClass({
         onSaveClick: React.PropTypes.func,
         onSearchClick: React.PropTypes.func,
         onLeaveClick: React.PropTypes.func,
+        onCancelClick: React.PropTypes.func,
     },
 
     getDefaultProps: function() {
@@ -54,6 +56,7 @@ module.exports = React.createClass({
             editing: false,
             inRoom: false,
             onSaveClick: function() {},
+            onCancelClick: null,
         };
     },
 
@@ -183,18 +186,18 @@ module.exports = React.createClass({
 
             saveButton = (
                 <AccessibleButton className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>
-                    {_t("Save")}
+                    { _t("Save") }
                 </AccessibleButton>
             );
         }
 
         if (this.props.onCancelClick) {
-            cancelButton = <CancelButton onClick={this.props.onCancelClick}/>;
+            cancelButton = <CancelButton onClick={this.props.onCancelClick} />;
         }
 
         if (this.props.saving) {
             const Spinner = sdk.getComponent("elements.Spinner");
-            spinner = <div className="mx_RoomHeader_spinner"><Spinner/></div>;
+            spinner = <div className="mx_RoomHeader_spinner"><Spinner /></div>;
         }
 
         if (canSetRoomName) {
@@ -251,7 +254,7 @@ module.exports = React.createClass({
             }
             if (topic) {
                 topicElement =
-                    <div className="mx_RoomHeader_topic" ref="topic" title={ topic } dir="auto">{ topic }</div>;
+                    <div className="mx_RoomHeader_topic" ref="topic" title={topic} dir="auto">{ topic }</div>;
             }
         }
 
@@ -259,16 +262,16 @@ module.exports = React.createClass({
         if (canSetRoomAvatar) {
             roomAvatar = (
                 <div className="mx_RoomHeader_avatarPicker">
-                    <div onClick={ this.onAvatarPickerClick }>
+                    <div onClick={this.onAvatarPickerClick}>
                         <ChangeAvatar ref="changeAvatar" room={this.props.room} showUploadSection={false} width={48} height={48} />
                     </div>
                     <div className="mx_RoomHeader_avatarPicker_edit">
                         <label htmlFor="avatarInput" ref="file_label">
                             <img src="img/camera.svg"
-                                alt={ _t("Upload avatar") } title={ _t("Upload avatar") }
+                                alt={_t("Upload avatar")} title={_t("Upload avatar")}
                                 width="17" height="15" />
                         </label>
-                        <input id="avatarInput" type="file" onChange={ this.onAvatarSelected }/>
+                        <input id="avatarInput" type="file" onChange={this.onAvatarSelected} />
                     </div>
                 </div>
             );
@@ -283,7 +286,7 @@ module.exports = React.createClass({
         if (this.props.onSettingsClick) {
             settingsButton =
                 <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSettingsClick} title={_t("Settings")}>
-                    <TintableSvg src="img/icons-settings-room.svg" width="16" height="16"/>
+                    <TintableSvg src="img/icons-settings-room.svg" width="16" height="16" />
                 </AccessibleButton>;
         }
 
@@ -298,32 +301,40 @@ module.exports = React.createClass({
         let forgetButton;
         if (this.props.onForgetClick) {
             forgetButton =
-                <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onForgetClick} title={ _t("Forget room") }>
-                    <TintableSvg src="img/leave.svg" width="26" height="20"/>
+                <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onForgetClick} title={_t("Forget room")}>
+                    <TintableSvg src="img/leave.svg" width="26" height="20" />
                 </AccessibleButton>;
         }
 
         let searchButton;
         if (this.props.onSearchClick && this.props.inRoom) {
             searchButton =
-                <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title={ _t("Search") }>
-                    <TintableSvg src="img/icons-search.svg" width="35" height="35"/>
+                <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title={_t("Search")}>
+                    <TintableSvg src="img/icons-search.svg" width="35" height="35" />
                 </AccessibleButton>;
         }
 
         let rightPanelButtons;
         if (this.props.collapsedRhs) {
             rightPanelButtons =
-                <AccessibleButton className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title={ _t('Show panel') }>
-                    <TintableSvg src="img/maximise.svg" width="10" height="16"/>
+                <AccessibleButton className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title={_t('Show panel')}>
+                    <TintableSvg src="img/maximise.svg" width="10" height="16" />
                 </AccessibleButton>;
         }
 
         let rightRow;
+        let manageIntegsButton;
+        if(this.props.room && this.props.room.roomId && this.props.inRoom) {
+            manageIntegsButton = <ManageIntegsButton
+                roomId={this.props.room.roomId}
+            />;
+        }
+
         if (!this.props.editing) {
             rightRow =
                 <div className="mx_RoomHeader_rightRow">
                     { settingsButton }
+                    { manageIntegsButton }
                     { forgetButton }
                     { searchButton }
                     { rightPanelButtons }
@@ -331,7 +342,7 @@ module.exports = React.createClass({
         }
 
         return (
-            <div className={ "mx_RoomHeader " + (this.props.editing ? "mx_RoomHeader_editing" : "") }>
+            <div className={"mx_RoomHeader " + (this.props.editing ? "mx_RoomHeader_editing" : "")}>
                 <div className="mx_RoomHeader_wrapper">
                     <div className="mx_RoomHeader_leftRow">
                         <div className="mx_RoomHeader_avatar">
@@ -342,10 +353,10 @@ module.exports = React.createClass({
                             { topicElement }
                         </div>
                     </div>
-                    {spinner}
-                    {saveButton}
-                    {cancelButton}
-                    {rightRow}
+                    { spinner }
+                    { saveButton }
+                    { cancelButton }
+                    { rightRow }
                 </div>
             </div>
         );

src/components/views/rooms/RoomList.js

@@ -63,7 +63,6 @@ module.exports = React.createClass({
     propTypes: {
         ConferenceHandler: React.PropTypes.any,
         collapsed: React.PropTypes.bool.isRequired,
-        currentRoom: React.PropTypes.string,
         searchFilter: React.PropTypes.string,
     },
 
@@ -88,7 +87,9 @@ module.exports = React.createClass({
         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);
+        cli.on("Group.myMembership", this._onGroupMyMembership);
 
         this.refreshRoomList();
 
@@ -155,7 +156,9 @@ module.exports = React.createClass({
             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);
+            MatrixClientPeg.get().removeListener("Group.myMembership", this._onGroupMyMembership);
         }
         // cancel any pending calls to the rate_limited_funcs
         this._delayedRefreshRoomList.cancelPendingCall();
@@ -224,12 +227,21 @@ module.exports = React.createClass({
         this._delayedRefreshRoomList();
     },
 
+    onEventDecrypted: function(ev) {
+        // An event being decrypted may mean we need to re-order the room list
+        this._delayedRefreshRoomList();
+    },
+
     onAccountData: function(ev) {
         if (ev.getType() == 'm.direct') {
             this._delayedRefreshRoomList();
         }
     },
 
+    _onGroupMyMembership: function(group) {
+        this.forceUpdate();
+    },
+
     _delayedRefreshRoomList: new rate_limited_func(function() {
         this.refreshRoomList();
     }, 500),
@@ -544,8 +556,24 @@ module.exports = React.createClass({
         }
     },
 
+    _makeGroupInviteTiles() {
+        const ret = [];
+
+        const GroupInviteTile = sdk.getComponent('groups.GroupInviteTile');
+        for (const group of MatrixClientPeg.get().getGroups()) {
+            if (group.myMembership !== 'invite') continue;
+
+            ret.push(<GroupInviteTile key={group.groupId} group={group} />);
+        }
+
+        return ret;
+    },
+
     render: function() {
-        var RoomSubList = sdk.getComponent('structures.RoomSubList');
+        const RoomSubList = sdk.getComponent('structures.RoomSubList');
+
+        const inviteSectionExtraTiles = this._makeGroupInviteTiles();
+
         var self = this;
         return (
             <GeminiScrollbar className="mx_RoomList_scrollbar"
@@ -555,12 +583,15 @@ module.exports = React.createClass({
                              label={ _t('Invites') }
                              editable={ false }
                              order="recent"
+                             isInvite={true}
                              selectedRoom={ self.props.selectedRoom }
                              incomingCall={ self.state.incomingCall }
                              collapsed={ self.props.collapsed }
                              searchFilter={ self.props.searchFilter }
                              onHeaderClick={ self.onSubListHeaderClick }
-                             onShowMoreRooms={ self.onShowMoreRooms } />
+                             onShowMoreRooms={ self.onShowMoreRooms }
+                             extraTiles={ inviteSectionExtraTiles }
+                />
 
                 <RoomSubList list={ self.state.lists['m.favourite'] }
                              label={ _t('Favourites') }

src/components/views/rooms/RoomSettings.js

@@ -24,8 +24,6 @@ import sdk from '../../../index';
 import Modal from '../../../Modal';
 import ObjectUtils from '../../../ObjectUtils';
 import dis from '../../../dispatcher';
-import ScalarAuthClient from '../../../ScalarAuthClient';
-import ScalarMessaging from '../../../ScalarMessaging';
 import UserSettingsStore from '../../../UserSettingsStore';
 import AccessibleButton from '../elements/AccessibleButton';
 
@@ -92,7 +90,6 @@ module.exports = React.createClass({
     propTypes: {
         room: React.PropTypes.object.isRequired,
         onSaveClick: React.PropTypes.func,
-        onCancelClick: React.PropTypes.func,
     },
 
     getInitialState: function() {
@@ -118,14 +115,10 @@ module.exports = React.createClass({
             // Default to false if it's undefined, otherwise react complains about changing
             // components from uncontrolled to controlled
             isRoomPublished: this._originalIsRoomPublished || false,
-            scalar_error: null,
-            showIntegrationsError: false,
         };
     },
 
     componentWillMount: function() {
-        ScalarMessaging.startListening();
-
         MatrixClientPeg.get().on("RoomMember.membership", this._onRoomMemberMembership);
 
         MatrixClientPeg.get().getRoomDirectoryVisibility(
@@ -137,18 +130,6 @@ module.exports = React.createClass({
             console.error("Failed to get room visibility: " + err);
         });
 
-        this.scalarClient = null;
-        if (SdkConfig.get().integrations_ui_url && SdkConfig.get().integrations_rest_url) {
-            this.scalarClient = new ScalarAuthClient();
-            this.scalarClient.connect().done(() => {
-                this.forceUpdate();
-            }, (err) => {
-                this.setState({
-                    scalar_error: err
-                });
-            });
-        }
-
         dis.dispatch({
             action: 'ui_opacity',
             sideOpacity: 0.3,
@@ -157,8 +138,6 @@ module.exports = React.createClass({
     },
 
     componentWillUnmount: function() {
-        ScalarMessaging.stopListening();
-
         const cli = MatrixClientPeg.get();
         if (cli) {
             cli.removeListener("RoomMember.membership", this._onRoomMemberMembership);
@@ -308,6 +287,9 @@ module.exports = React.createClass({
             promises.push(ps);
         }
 
+        // related groups
+        promises.push(this.saveRelatedGroups());
+
         // encryption
         p = this.saveEnableEncryption();
         if (!p.isFulfilled()) {
@@ -325,6 +307,11 @@ module.exports = React.createClass({
         return this.refs.alias_settings.saveSettings();
     },
 
+    saveRelatedGroups: function() {
+        if (!this.refs.related_groups) { return Promise.resolve(); }
+        return this.refs.related_groups.saveSettings();
+    },
+
     saveColor: function() {
         if (!this.refs.color_settings) { return Promise.resolve(); }
         return this.refs.color_settings.saveSettings();
@@ -514,28 +501,6 @@ module.exports = React.createClass({
                 roomState.mayClientSendStateEvent("m.room.guest_access", cli));
     },
 
-    onManageIntegrations(ev) {
-        ev.preventDefault();
-        var IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
-        Modal.createTrackedDialog('Integrations Manager', 'onManageIntegrations', IntegrationsManager, {
-            src: (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
-                    this.scalarClient.getScalarInterfaceUrlForRoom(this.props.room.roomId) :
-                    null,
-            onFinished: ()=>{
-                if (this._calcSavePromises().length === 0) {
-                    this.props.onCancelClick(ev);
-                }
-            },
-        }, "mx_IntegrationsManager");
-    },
-
-    onShowIntegrationsError(ev) {
-        ev.preventDefault();
-        this.setState({
-            showIntegrationsError: !this.state.showIntegrationsError,
-        });
-    },
-
     onLeaveClick() {
         dis.dispatch({
             action: 'leave_room',
@@ -634,6 +599,7 @@ module.exports = React.createClass({
         var AliasSettings = sdk.getComponent("room_settings.AliasSettings");
         var ColorSettings = sdk.getComponent("room_settings.ColorSettings");
         var UrlPreviewSettings = sdk.getComponent("room_settings.UrlPreviewSettings");
+        var RelatedGroupSettings = sdk.getComponent("room_settings.RelatedGroupSettings");
         var EditableText = sdk.getComponent('elements.EditableText');
         var PowerSelector = sdk.getComponent('elements.PowerSelector');
         var Loader = sdk.getComponent("elements.Spinner");
@@ -666,6 +632,14 @@ module.exports = React.createClass({
 
         var self = this;
 
+        let relatedGroupsSection;
+        if (UserSettingsStore.isFeatureEnabled('feature_groups')) {
+            relatedGroupsSection = <RelatedGroupSettings ref="related_groups"
+                roomId={this.props.room.roomId}
+                canSetRelatedGroups={roomState.mayClientSendStateEvent("m.room.related_groups", cli)}
+                relatedGroupsEvent={this.props.room.currentState.getStateEvents('m.room.related_groups', '')} />;
+        }
+
         var userLevelsSection;
         if (Object.keys(user_levels).length) {
             userLevelsSection =
@@ -797,46 +771,10 @@ module.exports = React.createClass({
                 </div>;
         }
 
-        let integrationsButton;
-        let integrationsError;
-
-        if (this.scalarClient !== null) {
-            if (this.state.showIntegrationsError && this.state.scalar_error) {
-                console.error(this.state.scalar_error);
-                integrationsError = (
-                    <span className="mx_RoomSettings_integrationsButton_errorPopup">
-                        { _t('Could not connect to the integration server') }
-                    </span>
-                );
-            }
-
-            if (this.scalarClient.hasCredentials()) {
-                integrationsButton = (
-                    <div className="mx_RoomSettings_integrationsButton" onClick={ this.onManageIntegrations }>
-                        { _t('Manage Integrations') }
-                    </div>
-                );
-            } else if (this.state.scalar_error) {
-                integrationsButton = (
-                    <div className="mx_RoomSettings_integrationsButton_error" onClick={ this.onShowIntegrationsError }>
-                        Integrations Error <img src="img/warning.svg" width="17"/>
-                        { integrationsError }
-                    </div>
-                );
-            } else {
-                integrationsButton = (
-                    <div className="mx_RoomSettings_integrationsButton" style={{opacity: 0.5}}>
-                        { _t('Manage Integrations') }
-                    </div>
-                );
-            }
-        }
-
         return (
             <div className="mx_RoomSettings">
 
                 { leaveButton }
-                { integrationsButton }
 
                 { tagsSection }
 
@@ -872,7 +810,7 @@ module.exports = React.createClass({
                             <input type="checkbox" disabled={ !roomState.mayClientSendStateEvent("m.room.aliases", cli) }
                                    onChange={ this._onToggle.bind(this, "isRoomPublished", true, false)}
                                    checked={this.state.isRoomPublished}/>
-                            {_t("List this room in %(domain)s's room directory?", { domain: MatrixClientPeg.get().getDomain() })}
+                            {_t("Publish this room to the public in %(domain)s's room directory?", { domain: MatrixClientPeg.get().getDomain() })}
                         </label>
                     </div>
                     <div className="mx_RoomSettings_settings">
@@ -926,6 +864,8 @@ module.exports = React.createClass({
                     canonicalAliasEvent={this.props.room.currentState.getStateEvents('m.room.canonical_alias', '')}
                     aliasEvents={this.props.room.currentState.getStateEvents('m.room.aliases')} />
 
+                { relatedGroupsSection }
+
                 <UrlPreviewSettings ref="url_preview_settings" room={this.props.room} />
 
                 <h3>{ _t('Permissions') }</h3>

src/components/views/rooms/RoomTile.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 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.
@@ -27,6 +28,8 @@ var RoomNotifs = require('../../../RoomNotifs');
 var FormattingUtils = require('../../../utils/FormattingUtils');
 import AccessibleButton from '../elements/AccessibleButton';
 var UserSettingsStore = require('../../../UserSettingsStore');
+import ActiveRoomObserver from '../../../ActiveRoomObserver';
+import RoomViewStore from '../../../stores/RoomViewStore';
 
 module.exports = React.createClass({
     displayName: 'RoomTile',
@@ -39,7 +42,6 @@ module.exports = React.createClass({
 
         room: React.PropTypes.object.isRequired,
         collapsed: React.PropTypes.bool.isRequired,
-        selected: React.PropTypes.bool.isRequired,
         unread: React.PropTypes.bool.isRequired,
         highlight: React.PropTypes.bool.isRequired,
         isInvite: React.PropTypes.bool.isRequired,
@@ -58,6 +60,7 @@ module.exports = React.createClass({
             badgeHover : false,
             menuDisplayed: false,
             notifState: RoomNotifs.getRoomNotifsState(this.props.room.roomId),
+            selected: this.props.room.roomId === RoomViewStore.getRoomId(),
         });
     },
 
@@ -87,8 +90,15 @@ module.exports = React.createClass({
         }
     },
 
+    _onActiveRoomChange: function() {
+        this.setState({
+            selected: this.props.room.roomId === RoomViewStore.getRoomId(),
+        });
+    },
+
     componentWillMount: function() {
         MatrixClientPeg.get().on("accountData", this.onAccountData);
+        ActiveRoomObserver.addListener(this.props.room.roomId, this._onActiveRoomChange);
     },
 
     componentWillUnmount: function() {
@@ -96,6 +106,7 @@ module.exports = React.createClass({
         if (cli) {
             MatrixClientPeg.get().removeListener("accountData", this.onAccountData);
         }
+        ActiveRoomObserver.removeListener(this.props.room.roomId, this._onActiveRoomChange);
     },
 
     onClick: function(ev) {
@@ -174,7 +185,7 @@ module.exports = React.createClass({
 
         var classes = classNames({
             'mx_RoomTile': true,
-            'mx_RoomTile_selected': this.props.selected,
+            'mx_RoomTile_selected': this.state.selected,
             'mx_RoomTile_unread': this.props.unread,
             'mx_RoomTile_unreadNotify': notifBadges,
             'mx_RoomTile_highlight': mentionBadges,
@@ -221,7 +232,7 @@ module.exports = React.createClass({
                 'mx_RoomTile_badgeShown': badges || this.state.badgeHover || this.state.menuDisplayed,
             });
 
-            if (this.props.selected) {
+            if (this.state.selected) {
                 let nameSelected = <EmojiText>{name}</EmojiText>;
 
                 label = <div title={ name } className={ nameClasses } dir="auto">{ nameSelected }</div>;

src/components/views/rooms/SimpleRoomHeader.js

@@ -26,7 +26,7 @@ export function CancelButton(props) {
     return (
         <AccessibleButton className='mx_RoomHeader_cancelButton' onClick={onClick}>
             <img src="img/cancel.svg" className='mx_filterFlipColor'
-                width="18" height="18" alt={_t("Cancel")}/>
+                width="18" height="18" alt={_t("Cancel")} />
         </AccessibleButton>
     );
 }

src/components/views/settings/ChangePassword.js

@@ -208,7 +208,7 @@ module.exports = React.createClass({
         if (!this.state.cachedPassword) {
             currentPassword = <div className={rowClassName}>
                 <div className={rowLabelClassName}>
-                    <label htmlFor="passwordold">Current password</label>
+                    <label htmlFor="passwordold">{ _t('Current password') }</label>
                 </div>
                 <div className={rowInputClassName}>
                     <input id="passwordold" type="password" ref="old_input" />

src/components/views/settings/DevicesPanelEntry.js

@@ -71,7 +71,7 @@ export default class DevicesPanelEntry extends React.Component {
             // pop up an interactive auth dialog
             var InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog");
 
-            Modal.createTrackedDialog('Delete Device Dialog', InteractiveAuthDialog, {
+            Modal.createTrackedDialog('Delete Device Dialog', '', InteractiveAuthDialog, {
                 title: _t("Authentication"),
                 matrixClient: MatrixClientPeg.get(),
                 authData: error.data,

src/components/views/voip/CallPreview.js

@@ -0,0 +1,97 @@
+/*
+Copyright 2017 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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import RoomViewStore from '../../../stores/RoomViewStore';
+import CallHandler from '../../../CallHandler';
+import dis from '../../../dispatcher';
+import sdk from '../../../index';
+
+module.exports = React.createClass({
+    displayName: 'CallPreview',
+
+    propTypes: {
+        // A Conference Handler implementation
+        // Must have a function signature:
+        //  getConferenceCallForRoom(roomId: string): MatrixCall
+        ConferenceHandler: React.PropTypes.object,
+    },
+
+    getInitialState: function() {
+        return {
+            roomId: RoomViewStore.getRoomId(),
+            activeCall: CallHandler.getAnyActiveCall(),
+        };
+    },
+
+    componentWillMount: function() {
+        this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
+        this.dispatcherRef = dis.register(this._onAction);
+    },
+
+    componentWillUnmount: function() {
+        if (this._roomStoreToken) {
+            this._roomStoreToken.remove();
+        }
+        dis.unregister(this.dispatcherRef);
+    },
+
+    _onRoomViewStoreUpdate: function(payload) {
+        if (RoomViewStore.getRoomId() === this.state.roomId) return;
+        this.setState({
+            roomId: RoomViewStore.getRoomId(),
+        });
+    },
+
+    _onAction: function(payload) {
+        switch (payload.action) {
+            // listen for call state changes to prod the render method, which
+            // may hide the global CallView if the call it is tracking is dead
+            case 'call_state':
+                this.setState({
+                    activeCall: CallHandler.getAnyActiveCall(),
+                });
+                break;
+        }
+    },
+
+    _onCallViewClick: function() {
+        const call = CallHandler.getAnyActiveCall();
+        if (call) {
+            dis.dispatch({
+                action: 'view_room',
+                room_id: call.groupRoomId || call.roomId,
+            });
+        }
+    },
+
+    render: function() {
+        const callForRoom = CallHandler.getCallForRoom(this.state.roomId);
+        const showCall = (this.state.activeCall && this.state.activeCall.call_state === 'connected' && !callForRoom);
+
+        if (showCall) {
+            const CallView = sdk.getComponent('voip.CallView');
+            return (
+                <CallView
+                    className="mx_LeftPanel_callView" showVoice={true} onClick={this._onCallViewClick}
+                    ConferenceHandler={this.props.ConferenceHandler}
+                />
+            );
+        }
+        return null;
+    },
+});
+

src/components/views/voip/CallView.js

@@ -129,17 +129,17 @@ module.exports = React.createClass({
         if (this.state.call && this.state.call.type === "voice" && this.props.showVoice) {
             const callRoom = MatrixClientPeg.get().getRoom(this.state.call.roomId);
             voice = (
-                <div className="mx_CallView_voice" onClick={ this.props.onClick }>
-                {_t("Active call (%(roomName)s)", {roomName: callRoom.name})}
+                <div className="mx_CallView_voice" onClick={this.props.onClick}>
+                { _t("Active call (%(roomName)s)", {roomName: callRoom.name}) }
                 </div>
             );
         }
 
         return (
             <div>
-                <VideoView ref="video" onClick={ this.props.onClick }
-                    onResize={ this.props.onResize }
-                    maxHeight={ this.props.maxVideoHeight }
+                <VideoView ref="video" onClick={this.props.onClick}
+                    onResize={this.props.onResize}
+                    maxHeight={this.props.maxVideoHeight}
                 />
                 { voice }
             </div>

src/components/views/voip/IncomingCallBox.js

@@ -62,17 +62,17 @@ module.exports = React.createClass({
             <div className="mx_IncomingCallBox" id="incomingCallBox">
                 <img className="mx_IncomingCallBox_chevron" src="img/chevron-left.png" width="9" height="16" />
                 <div className="mx_IncomingCallBox_title">
-                    {incomingCallText}
+                    { incomingCallText }
                 </div>
                 <div className="mx_IncomingCallBox_buttons">
                     <div className="mx_IncomingCallBox_buttons_cell">
                         <div className="mx_IncomingCallBox_buttons_decline" onClick={this.onRejectClick}>
-                            {_t("Decline")}
+                            { _t("Decline") }
                         </div>
                     </div>
                     <div className="mx_IncomingCallBox_buttons_cell">
                         <div className="mx_IncomingCallBox_buttons_accept" onClick={this.onAnswerClick}>
-                            {_t("Accept")}
+                            { _t("Accept") }
                         </div>
                     </div>
                 </div>

src/components/views/voip/VideoView.js

@@ -110,13 +110,13 @@ module.exports = React.createClass({
         const maxVideoHeight = fullscreenElement ? null : this.props.maxHeight;
 
         return (
-            <div className="mx_VideoView" ref={this.setContainer} onClick={ this.props.onClick }>
+            <div className="mx_VideoView" ref={this.setContainer} onClick={this.props.onClick}>
                 <div className="mx_VideoView_remoteVideoFeed">
                     <VideoFeed ref="remote" onResize={this.props.onResize}
                         maxHeight={maxVideoHeight} />
                 </div>
                 <div className="mx_VideoView_localVideoFeed">
-                    <VideoFeed ref="local"/>
+                    <VideoFeed ref="local" />
                 </div>
             </div>
         );