Merge remote-tracking branch 'matrix-org/develop' into travis/pinned-notice

2017-11-03 19:57:39 -06:00
parent 5c37155730 d4adff3d25
commit a2b7f6d30e
111 changed files with 10299 additions and 3407 deletions
--- a/src/components/views/avatars/BaseAvatar.js
+++ b/src/components/views/avatars/BaseAvatar.js
@@ -110,7 +110,7 @@ module.exports = React.createClass({

        let idx = 0;
        const initial = name[0];
-        if ((initial === '@' || initial === '#') && name[1]) {
+        if ((initial === '@' || initial === '#' || initial === '+') && name[1]) {
            idx++;
        }

--- a/src/components/views/avatars/GroupAvatar.js
+++ b/src/components/views/avatars/GroupAvatar.js
@@ -24,10 +24,12 @@ export default React.createClass({

    propTypes: {
        groupId: PropTypes.string,
+        groupName: PropTypes.string,
        groupAvatarUrl: PropTypes.string,
        width: PropTypes.number,
        height: PropTypes.number,
        resizeMethod: PropTypes.string,
+        onClick: PropTypes.func,
    },

    getDefaultProps: function() {
@@ -52,11 +54,11 @@ export default React.createClass({
        // extract the props we use from props so we can pass any others through
        // should consider adding this as a global rule in js-sdk?
        /*eslint no-unused-vars: ["error", { "ignoreRestSiblings": true }]*/
-        const {groupId, groupAvatarUrl, ...otherProps} = this.props;
+        const {groupId, groupAvatarUrl, groupName, ...otherProps} = this.props;

        return (
            <BaseAvatar
-                name={this.props.groupId[1]}
+                name={groupName || this.props.groupId[1]}
                idName={this.props.groupId}
                url={this.getGroupAvatarUrl()}
                {...otherProps}
--- a/src/components/views/dialogs/AddressPickerDialog.js
+++ b/src/components/views/dialogs/AddressPickerDialog.js
@@ -272,20 +272,27 @@ module.exports = React.createClass({
            const topicEvent = room.currentState.getStateEvents('m.room.topic', '');
            const name = nameEvent ? nameEvent.getContent().name : '';
            const canonicalAlias = room.getCanonicalAlias();
+            const aliasEvents = room.currentState.getStateEvents('m.room.aliases');
+            const aliases = aliasEvents.map((ev) => ev.getContent().aliases).reduce((a, b) => {
+                return a.concat(b);
+            }, []);
            const topic = topicEvent ? topicEvent.getContent().topic : '';

            const nameMatch = (name || '').toLowerCase().includes(lowerCaseQuery);
-            const aliasMatch = (canonicalAlias || '').toLowerCase().includes(lowerCaseQuery);
+            const aliasMatch = aliases.some((alias) =>
+                (alias || '').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,
+                name: name || canonicalAlias || aliases[0] || _t('Unnamed Room'),
            });
        });
        this._processResults(results, query);
@@ -489,7 +496,12 @@ 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)}
+                        showAddress={this.props.pickerType === 'user'} />,
                );
            }
        }
@@ -539,6 +551,7 @@ module.exports = React.createClass({
            addressSelector = (
                <AddressSelector ref={(ref) => {this.addressSelector = ref;}}
                    addressList={this.state.queryList}
+                    showAddress={this.props.pickerType === 'user'}
                    onSelected={this.onSelected}
                    truncateAt={TRUNCATE_QUERY_LIST}
                />
--- a/src/components/views/dialogs/ConfirmUserActionDialog.js
+++ b/src/components/views/dialogs/ConfirmUserActionDialog.js
@@ -36,6 +36,7 @@ export default React.createClass({
        // group member object. Supply either this or 'member'
        groupMember: GroupMemberType,
        action: React.PropTypes.string.isRequired, // eg. 'Ban'
+        title: React.PropTypes.string.isRequired, // eg. 'Ban this user?'

        // Whether to display a text field for a reason
        // If true, the second argument to onFinished will
@@ -75,7 +76,6 @@ export default React.createClass({
        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({
            'mx_Dialog_primary': true,
            'danger': this.props.danger,
@@ -113,7 +113,7 @@ export default React.createClass({
        return (
            <BaseDialog className="mx_ConfirmUserActionDialog" onFinished={this.props.onFinished}
                onEnterPressed={this.onOk}
-                title={title}
+                title={this.props.title}
            >
                <div className="mx_Dialog_content">
                    <div className="mx_ConfirmUserActionDialog_avatar">
--- a/src/components/views/dialogs/CreateGroupDialog.js
+++ b/src/components/views/dialogs/CreateGroupDialog.js
@@ -21,10 +21,6 @@ import dis from '../../../dispatcher';
 import { _t } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';

-// We match fairly liberally and leave it up to the server to reject if
-// there are invalid characters etc.
-const GROUP_REGEX = /^\+(.*?):(.*)$/;
-
 export default React.createClass({
    displayName: 'CreateGroupDialog',
    propTypes: {
@@ -58,22 +54,9 @@ export default React.createClass({
    },

    _checkGroupId: function(e) {
-        const parsedGroupId = this._parseGroupId(this.state.groupId);
        let error = null;
-        if (parsedGroupId === null) {
-            error = _t(
-                "Group IDs must be of the form +localpart:%(domain)s",
-                {domain: MatrixClientPeg.get().getDomain()},
-            );
-        } else {
-            const domain = parsedGroupId[1];
-            if (domain !== MatrixClientPeg.get().getDomain()) {
-                error = _t(
-                    "It is currently only possible to create groups on your own home server: "+
-                    "use a group ID ending with %(domain)s",
-                    {domain: MatrixClientPeg.get().getDomain()},
-                );
-            }
+        if (!/^[a-z0-9=_\-\.\/]*$/.test(this.state.groupId)) {
+            error = _t("Community IDs may only contain characters a-z, 0-9, or '=_-./'");
        }
        this.setState({
            groupIdError: error,
@@ -86,14 +69,13 @@ export default React.createClass({

        if (this._checkGroupId()) return;

-        const parsedGroupId = this._parseGroupId(this.state.groupId);
        const profile = {};
        if (this.state.groupName !== '') {
            profile.name = this.state.groupName;
        }
        this.setState({creating: true});
        MatrixClientPeg.get().createGroup({
-            localpart: parsedGroupId[0],
+            localpart: this.state.groupId,
            profile: profile,
        }).then((result) => {
            dis.dispatch({
@@ -112,22 +94,6 @@ export default React.createClass({
        this.props.onFinished(false);
    },

-    /**
-     * Parse a string that may be a group ID
-     * If the string is a valid group ID, return a list of [localpart, domain],
-     * otherwise return null.
-     *
-     * @param {string} groupId The ID of the group
-     * @return {string[]} array of localpart, domain
-     */
-    _parseGroupId: function(groupId) {
-        const matches = GROUP_REGEX.exec(this.state.groupId);
-        if (!matches || matches.length < 3) {
-            return null;
-        }
-        return [matches[1], matches[2]];
-    },
-
    render: function() {
        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
        const Spinner = sdk.getComponent('elements.Spinner');
@@ -142,7 +108,7 @@ 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>{ _t('Something went wrong whilst creating your community') }</div>
                <div>{ this.state.createError.message }</div>
            </div>;
        }
@@ -150,13 +116,13 @@ export default React.createClass({
        return (
            <BaseDialog className="mx_CreateGroupDialog" onFinished={this.props.onFinished}
                onEnterPressed={this._onFormSubmit}
-                title={_t('Create Group')}
+                title={_t('Create Community')}
            >
                <form onSubmit={this._onFormSubmit}>
                    <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('Community Name') }</label>
                            </div>
                            <div>
                                <input id="groupname" className="mx_CreateGroupDialog_input"
@@ -169,16 +135,21 @@ 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('Community ID') }</label>
                            </div>
-                            <div>
-                                <input id="groupid" className="mx_CreateGroupDialog_input"
-                                    size="64"
-                                    placeholder={_t('+example:%(domain)s', {domain: MatrixClientPeg.get().getDomain()})}
+                            <div className="mx_CreateGroupDialog_input_group">
+                                <span className="mx_CreateGroupDialog_prefix">+</span>
+                                <input id="groupid"
+                                    className="mx_CreateGroupDialog_input mx_CreateGroupDialog_input_hasPrefixAndSuffix"
+                                    size="32"
+                                    placeholder={_t('example')}
                                    onChange={this._onGroupIdChange}
                                    onBlur={this._onGroupIdBlur}
                                    value={this.state.groupId}
                                />
+                                <span className="mx_CreateGroupDialog_suffix">
+                                    :{ MatrixClientPeg.get().getDomain() }
+                                </span>
                            </div>
                        </div>
                        <div className="error">
--- a/src/components/views/elements/AddressSelector.js
+++ b/src/components/views/elements/AddressSelector.js
@@ -30,6 +30,8 @@ export default React.createClass({

        // List of the addresses to display
        addressList: React.PropTypes.arrayOf(UserAddressType).isRequired,
+        // Whether to show the address on the address tiles
+        showAddress: React.PropTypes.bool,
        truncateAt: React.PropTypes.number.isRequired,
        selected: React.PropTypes.number,

@@ -142,7 +144,13 @@ export default React.createClass({
                        key={this.props.addressList[i].addressType + "/" + this.props.addressList[i].address}
                        ref={(ref) => { this.addressListElement = ref; }}
                    >
-                        <AddressTile address={this.props.addressList[i]} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
+                        <AddressTile
+                            address={this.props.addressList[i]}
+                            showAddress={this.props.showAddress}
+                            justified={true}
+                            networkName="vector"
+                            networkUrl="img/search-icon-vector.svg"
+                        />
                    </div>,
                );
            }
--- a/src/components/views/elements/AddressTile.js
+++ b/src/components/views/elements/AddressTile.js
@@ -87,7 +87,10 @@ export default React.createClass({
            info = (
                <div className="mx_AddressTile_mx">
                    <div className={nameClasses}>{ name }</div>
-                    <div className={idClasses}>{ address.address }</div>
+                    { this.props.showAddress ?
+                        <div className={idClasses}>{ address.address }</div> :
+                        <div />
+                    }
                </div>
            );
        } else if (isMatrixAddress) {
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -172,18 +172,29 @@ export default React.createClass({
    */
    _onDeleteClick: function() {
        if (this._canUserModify()) {
-            console.log("Delete widget %s", this.props.id);
-            this.setState({deleting: true});
-            MatrixClientPeg.get().sendStateEvent(
-                this.props.room.roomId,
-                'im.vector.modular.widgets',
-                {}, // empty content
-                this.props.id,
-            ).then(() => {
-                console.log('Deleted widget');
-            }, (e) => {
-                console.error('Failed to delete widget', e);
-                this.setState({deleting: false});
+            // Show delete confirmation dialog
+            const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+            Modal.createTrackedDialog('Delete Widget', '', QuestionDialog, {
+                title: _t("Delete Widget"),
+                description: _t(
+                    "Deleting a widget removes it for all users in this room." +
+                    " Are you sure you want to delete this widget?"),
+                button: _t("Delete widget"),
+                onFinished: (confirmed) => {
+                    if (!confirmed) {
+                        return;
+                    }
+                    this.setState({deleting: true});
+                    MatrixClientPeg.get().sendStateEvent(
+                        this.props.room.roomId,
+                        'im.vector.modular.widgets',
+                        {}, // empty content
+                        this.props.id,
+                    ).catch((e) => {
+                        console.error('Failed to delete widget', e);
+                        this.setState({deleting: false});
+                    });
+                },
            });
        } else {
            console.log("Revoke widget permissions - %s", this.props.id);
@@ -305,7 +316,7 @@ export default React.createClass({
        let deleteIcon = 'img/cancel.svg';
        let deleteClasses = 'mx_filterFlipColor mx_AppTileMenuBarWidget';
        if(this._canUserModify()) {
-            deleteIcon = 'img/cancel-red.svg';
+            deleteIcon = 'img/icon-delete-pink.svg';
            deleteClasses += ' mx_AppTileMenuBarWidgetDelete';
        }

--- a/src/components/views/elements/EditableItemList.js
+++ b/src/components/views/elements/EditableItemList.js
@@ -84,7 +84,9 @@ module.exports = React.createClass({
        onNewItemChanged: PropTypes.func,
        onItemAdded: PropTypes.func,
        onItemEdited: PropTypes.func,
-        onItemRemoved: PropTypes. func,
+        onItemRemoved: PropTypes.func,
+
+        canEdit: PropTypes.bool,
    },

    getDefaultProps: function() {
@@ -136,14 +138,16 @@ module.exports = React.createClass({
                { label }
            </div>
            { editableItems }
-            <EditableItem
-                key={-1}
-                initialValue={this.props.newItem}
-                onAdd={this.onItemAdded}
-                onChange={this.onNewItemChanged}
-                addOnChange={true}
-                placeholder={this.props.placeholder}
-            />
+            { this.props.canEdit ?
+                <EditableItem
+                    key={-1}
+                    initialValue={this.props.newItem}
+                    onAdd={this.onItemAdded}
+                    onChange={this.onNewItemChanged}
+                    addOnChange={true}
+                    placeholder={this.props.placeholder}
+                /> : <div />
+            }
        </div>);
    },
 });
--- a/src/components/views/elements/Flair.js
+++ b/src/components/views/elements/Flair.js
@@ -20,123 +20,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {MatrixClient} from 'matrix-js-sdk';
 import UserSettingsStore from '../../../UserSettingsStore';
+import FlairStore from '../../../stores/FlairStore';
 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() {
@@ -156,11 +42,11 @@ class FlairAvatar extends React.Component {

    render() {
        const httpUrl = this.context.matrixClient.mxcUrlToHttp(
-            this.props.groupProfile.avatarUrl, 14, 14, 'scale', false);
+            this.props.groupProfile.avatarUrl, 16, 16, 'scale', false);
        return <img
            src={httpUrl}
-            width="14px"
-            height="14px"
+            width="16"
+            height="16"
            onClick={this.onClick}
            title={this.props.groupProfile.groupId} />;
    }
@@ -193,14 +79,14 @@ export default class Flair extends React.Component {

    componentWillMount() {
        this._unmounted = false;
-        if (UserSettingsStore.isFeatureEnabled('feature_groups') && groupSupport) {
+        if (UserSettingsStore.isFeatureEnabled('feature_groups') && FlairStore.groupSupport()) {
            this._generateAvatars();
        }
        this.context.matrixClient.on('RoomState.events', this.onRoomStateEvents);
    }

    onRoomStateEvents(event) {
-        if (event.getType() === 'm.room.related_groups' && groupSupport) {
+        if (event.getType() === 'm.room.related_groups' && FlairStore.groupSupport()) {
            this._generateAvatars();
        }
    }
@@ -210,7 +96,7 @@ export default class Flair extends React.Component {
        for (const groupId of groups) {
            let groupProfile = null;
            try {
-                groupProfile = await getGroupProfileCached(this.context.matrixClient, groupId);
+                groupProfile = await FlairStore.getGroupProfileCached(this.context.matrixClient, groupId);
            } catch (err) {
                console.error('Could not get profile for group', groupId, err);
            }
@@ -220,19 +106,7 @@ export default class Flair extends React.Component {
    }

    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);
-        }
+        let groups = await FlairStore.getPublicisedGroupsCached(this.context.matrixClient, this.props.userId);
        if (this.props.roomId && this.props.showRelated) {
            const relatedGroupsEvent = this.context.matrixClient
                .getRoom(this.props.roomId)
@@ -253,7 +127,7 @@ export default class Flair extends React.Component {
        }
        const profiles = await this._getGroupProfiles(groups);
        if (!this.unmounted) {
-            this.setState({profiles});
+            this.setState({profiles: profiles.filter((profile) => {return profile.avatarUrl;})});
        }
    }

--- a/src/components/views/elements/GroupsButton.js
+++ b/src/components/views/elements/GroupsButton.js
@@ -22,7 +22,7 @@ const GroupsButton = function(props) {
    const ActionButton = sdk.getComponent('elements.ActionButton');
    return (
        <ActionButton action="view_my_groups"
-            label={_t("Groups")}
+            label={_t("Communities")}
            iconPath="img/icons-groups.svg"
            size={props.size}
            tooltip={props.tooltip}
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -86,7 +86,6 @@ module.exports = React.createClass({
        const summaries = orderedTransitionSequences.map((transitions) => {
            const userNames = eventAggregates[transitions];
            const nameList = this._renderNameList(userNames);
-            const plural = userNames.length > 1;

            const splitTransitions = transitions.split(',');

@@ -101,13 +100,13 @@ module.exports = React.createClass({

            const descs = coalescedTransitions.map((t) => {
                return this._getDescriptionForTransition(
-                    t.transitionType, plural, t.repeats,
+                    t.transitionType, userNames.length, t.repeats,
                );
            });

            const desc = this._renderCommaSeparatedList(descs);

-            return nameList + " " + desc;
+            return _t('%(nameList)s %(transitionList)s', { nameList: nameList, transitionList: desc });
        });

        if (!summaries) {
@@ -208,148 +207,75 @@ module.exports = React.createClass({
     * For a certain transition, t, describe what happened to the users that
     * underwent the transition.
     * @param {string} t the transition type.
-     * @param {boolean} plural whether there were multiple users undergoing the same
-     * transition.
+     * @param {integer} userCount number of usernames
     * @param {number} repeats the number of times the transition was repeated in a row.
     * @returns {string} the written Human Readable equivalent of the transition.
     */
-    _getDescriptionForTransition(t, plural, repeats) {
+    _getDescriptionForTransition(t, userCount, repeats) {
        // The empty interpolations 'severalUsers' and 'oneUser'
        // are there only to show translators to non-English languages
        // that the verb is conjugated to plural or singular Subject.
        let res = null;
        switch(t) {
            case "joined":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("%(severalUsers)sjoined %(repeats)s times", { severalUsers: "", repeats: repeats })
-                        : _t("%(oneUser)sjoined %(repeats)s times", { oneUser: "", repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("%(severalUsers)sjoined", { severalUsers: "" })
-                        : _t("%(oneUser)sjoined", { oneUser: "" });
-                }
+                res = (userCount > 1)
+                    ? _t("%(severalUsers)sjoined %(count)s times", { severalUsers: "", count: repeats })
+                    : _t("%(oneUser)sjoined %(count)s times", { oneUser: "", count: repeats });
                break;
            case "left":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("%(severalUsers)sleft %(repeats)s times", { severalUsers: "", repeats: repeats })
-                        : _t("%(oneUser)sleft %(repeats)s times", { oneUser: "", repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("%(severalUsers)sleft", { severalUsers: "" })
-                        : _t("%(oneUser)sleft", { oneUser: "" });
-                }
-               break;
+                res = (userCount > 1)
+                    ? _t("%(severalUsers)sleft %(count)s times", { severalUsers: "", count: repeats })
+                    : _t("%(oneUser)sleft %(count)s times", { oneUser: "", count: repeats });
+                break;
            case "joined_and_left":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("%(severalUsers)sjoined and left %(repeats)s times", { severalUsers: "", repeats: repeats })
-                        : _t("%(oneUser)sjoined and left %(repeats)s times", { oneUser: "", repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("%(severalUsers)sjoined and left", { severalUsers: "" })
-                        : _t("%(oneUser)sjoined and left", { oneUser: "" });
-                }
+                res = (userCount > 1)
+                    ? _t("%(severalUsers)sjoined and left %(count)s times", { severalUsers: "", count: repeats })
+                    : _t("%(oneUser)sjoined and left %(count)s times", { oneUser: "", count: repeats });
                break;
            case "left_and_joined":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("%(severalUsers)sleft and rejoined %(repeats)s times", { severalUsers: "", repeats: repeats })
-                        : _t("%(oneUser)sleft and rejoined %(repeats)s times", { oneUser: "", repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("%(severalUsers)sleft and rejoined", { severalUsers: "" })
-                        : _t("%(oneUser)sleft and rejoined", { oneUser: "" });
-                }
+                res = (userCount > 1)
+                    ? _t("%(severalUsers)sleft and rejoined %(count)s times", { severalUsers: "", count: repeats })
+                    : _t("%(oneUser)sleft and rejoined %(count)s times", { oneUser: "", count: repeats });
                break;
            case "invite_reject":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("%(severalUsers)srejected their invitations %(repeats)s times", { severalUsers: "", repeats: repeats })
-                        : _t("%(oneUser)srejected their invitation %(repeats)s times", { oneUser: "", repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("%(severalUsers)srejected their invitations", { severalUsers: "" })
-                        : _t("%(oneUser)srejected their invitation", { oneUser: "" });
-                }
+                res = (userCount > 1)
+                    ? _t("%(severalUsers)srejected their invitations %(count)s times", { severalUsers: "", count: repeats })
+                    : _t("%(oneUser)srejected their invitation %(count)s times", { oneUser: "", count: repeats });
                break;
            case "invite_withdrawal":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("%(severalUsers)shad their invitations withdrawn %(repeats)s times", { severalUsers: "", repeats: repeats })
-                        : _t("%(oneUser)shad their invitation withdrawn %(repeats)s times", { oneUser: "", repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("%(severalUsers)shad their invitations withdrawn", { severalUsers: "" })
-                        : _t("%(oneUser)shad their invitation withdrawn", { oneUser: "" });
-                }
+                res = (userCount > 1)
+                    ? _t("%(severalUsers)shad their invitations withdrawn %(count)s times", { severalUsers: "", count: repeats })
+                    : _t("%(oneUser)shad their invitation withdrawn %(count)s times", { oneUser: "", count: repeats });
                break;
            case "invited":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("were invited %(repeats)s times", { repeats: repeats })
-                        : _t("was invited %(repeats)s times", { repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("were invited")
-                        : _t("was invited");
-                }
+                res = (userCount > 1)
+                    ? _t("were invited %(count)s times", { count: repeats })
+                    : _t("was invited %(count)s times", { count: repeats });
                break;
            case "banned":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("were banned %(repeats)s times", { repeats: repeats })
-                        : _t("was banned %(repeats)s times", { repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("were banned")
-                        : _t("was banned");
-                }
+                res = (userCount > 1)
+                    ? _t("were banned %(count)s times", { count: repeats })
+                    : _t("was banned %(count)s times", { count: repeats });
                break;
            case "unbanned":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("were unbanned %(repeats)s times", { repeats: repeats })
-                        : _t("was unbanned %(repeats)s times", { repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("were unbanned")
-                        : _t("was unbanned");
-                }
+                res = (userCount > 1)
+                    ? _t("were unbanned %(count)s times", { count: repeats })
+                    : _t("was unbanned %(count)s times", { count: repeats });
                break;
            case "kicked":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("were kicked %(repeats)s times", { repeats: repeats })
-                        : _t("was kicked %(repeats)s times", { repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("were kicked")
-                        : _t("was kicked");
-                }
+                res = (userCount > 1)
+                    ? _t("were kicked %(count)s times", { count: repeats })
+                    : _t("was kicked %(count)s times", { count: repeats });
                break;
            case "changed_name":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("%(severalUsers)schanged their name %(repeats)s times", { severalUsers: "", repeats: repeats })
-                        : _t("%(oneUser)schanged their name %(repeats)s times", { oneUser: "", repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("%(severalUsers)schanged their name", { severalUsers: "" })
-                        : _t("%(oneUser)schanged their name", { oneUser: "" });
-                }
+                res = (userCount > 1)
+                    ? _t("%(severalUsers)schanged their name %(count)s times", { severalUsers: "", count: repeats })
+                    : _t("%(oneUser)schanged their name %(count)s times", { oneUser: "", count: repeats });
                break;
            case "changed_avatar":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("%(severalUsers)schanged their avatar %(repeats)s times", { severalUsers: "", repeats: repeats })
-                        : _t("%(oneUser)schanged their avatar %(repeats)s times", { oneUser: "", repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("%(severalUsers)schanged their avatar", { severalUsers: "" })
-                        : _t("%(oneUser)schanged their avatar", { oneUser: "" });
-                }
+                res = (userCount > 1)
+                    ? _t("%(severalUsers)schanged their avatar %(count)s times", { severalUsers: "", count: repeats })
+                    : _t("%(oneUser)schanged their avatar %(count)s times", { oneUser: "", count: repeats });
                break;
        }

@@ -376,11 +302,9 @@ module.exports = React.createClass({
            return "";
        } else if (items.length === 1) {
            return items[0];
-        } else if (remaining) {
+        } else if (remaining > 0) {
            items = items.slice(0, itemLimit);
-            return (remaining > 1)
-                ? _t("%(items)s and %(remaining)s others", { items: items.join(', '), remaining: remaining } )
-                : _t("%(items)s and one other", { items: items.join(', ') });
+            return _t("%(items)s and %(count)s others", { items: items.join(', '), count: remaining } )
        } else {
            const lastItem = items.pop();
            return _t("%(items)s and %(lastItem)s", { items: items.join(', '), lastItem: lastItem });
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.js
@@ -37,11 +37,20 @@ const Pill = React.createClass({
        isMessagePillUrl: (url) => {
            return !!REGEX_LOCAL_MATRIXTO.exec(url);
        },
+        roomNotifPos: (text) => {
+            return text.indexOf("@room");
+        },
+        roomNotifLen: () => {
+            return "@room".length;
+        },
        TYPE_USER_MENTION: 'TYPE_USER_MENTION',
        TYPE_ROOM_MENTION: 'TYPE_ROOM_MENTION',
+        TYPE_AT_ROOM_MENTION: 'TYPE_AT_ROOM_MENTION', // '@room' mention
    },

    props: {
+        // The Type of this Pill. If url is given, this is auto-detected.
+        type: PropTypes.string,
        // The URL to pillify (no validation is done, see isPillUrl and isMessagePillUrl)
        url: PropTypes.string,
        // Whether the pill is in a message
@@ -72,14 +81,20 @@ const Pill = React.createClass({
            regex = REGEX_LOCAL_MATRIXTO;
        }

-        // Default to the empty array if no match for simplicity
-        // resource and prefix will be undefined instead of throwing
-        const matrixToMatch = regex.exec(nextProps.url) || [];
+        let matrixToMatch;
+        let resourceId;
+        let prefix;

-        const resourceId = matrixToMatch[1]; // The room/user ID
-        const prefix = matrixToMatch[2]; // The first character of prefix
+        if (nextProps.url) {
+            // Default to the empty array if no match for simplicity
+            // resource and prefix will be undefined instead of throwing
+            matrixToMatch = regex.exec(nextProps.url) || [];

-        const pillType = {
+            resourceId = matrixToMatch[1]; // The room/user ID
+            prefix = matrixToMatch[2]; // The first character of prefix
+        }
+
+        const pillType = this.props.type || {
            '@': Pill.TYPE_USER_MENTION,
            '#': Pill.TYPE_ROOM_MENTION,
            '!': Pill.TYPE_ROOM_MENTION,
@@ -88,6 +103,10 @@ const Pill = React.createClass({
        let member;
        let room;
        switch (pillType) {
+            case Pill.TYPE_AT_ROOM_MENTION: {
+                room = nextProps.room;
+            }
+                break;
            case Pill.TYPE_USER_MENTION: {
                const localMember = nextProps.room.getMember(resourceId);
                member = localMember;
@@ -160,6 +179,17 @@ const Pill = React.createClass({
        let href = this.props.url;
        let onClick;
        switch (this.state.pillType) {
+            case Pill.TYPE_AT_ROOM_MENTION: {
+                const room = this.props.room;
+                if (room) {
+                    linkText = "@room";
+                    if (this.props.shouldShowPillAvatar) {
+                        avatar = <RoomAvatar room={room} width={16} height={16} />;
+                    }
+                    pillClass = 'mx_AtRoomPill';
+                }
+            }
+                break;
            case Pill.TYPE_USER_MENTION: {
                    // If this user is not a member of this room, default to the empty member
                    const member = this.state.member;
--- a/src/components/views/groups/GroupInviteTile.js
+++ b/src/components/views/groups/GroupInviteTile.js
@@ -38,29 +38,27 @@ export default React.createClass({
        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 groupName = this.props.group.name || this.props.group.groupId;
+
+        const av = <BaseAvatar name={groupName} width={24} height={24} url={this.props.group.avatarUrl} />;

        const label = <EmojiText
            element="div"
-            title={this.props.group.name}
-            className="mx_GroupInviteTile_name"
+            title={this.props.group.groupId}
+            className="mx_RoomTile_name"
            dir="auto"
        >
-            { this.props.group.name }
+            { groupName }
        </EmojiText>;

-        const badge = <div className="mx_GroupInviteTile_badge">!</div>;
+        const badge = <div className="mx_RoomSubList_badge mx_RoomSubList_badgeHighlight">!</div>;

        return (
-            <AccessibleButton className="mx_GroupInviteTile" onClick={this.onClick}>
-                <div className="mx_GroupInviteTile_avatarContainer">
+            <AccessibleButton className="mx_RoomTile mx_RoomTile_highlight" onClick={this.onClick}>
+                <div className="mx_RoomTile_avatar">
                    { av }
                </div>
-                <div className="mx_GroupInviteTile_nameContainer">
+                <div className="mx_RoomTile_nameContainer">
                    { label }
                    { badge }
                </div>
--- a/src/components/views/groups/GroupMemberInfo.js
+++ b/src/components/views/groups/GroupMemberInfo.js
@@ -17,50 +17,66 @@ limitations under the License.

 import PropTypes from 'prop-types';
 import React from 'react';
+import { MatrixClient } from 'matrix-js-sdk';
 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 GroupStoreCache from '../../../stores/GroupStoreCache';
 import AccessibleButton from '../elements/AccessibleButton';
 import GeminiScrollbar from 'react-gemini-scrollbar';

-
-module.exports = withMatrixClient(React.createClass({
+module.exports = React.createClass({
    displayName: 'GroupMemberInfo',

+    contextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+    },
+
    propTypes: {
-        matrixClient: PropTypes.object.isRequired,
        groupId: PropTypes.string,
        groupMember: GroupMemberType,
+        isInvited: PropTypes.bool,
    },

    getInitialState: function() {
        return {
-            fetching: false,
            removingUser: false,
-            groupMembers: null,
+            isUserPrivilegedInGroup: null,
        };
    },

    componentWillMount: function() {
-        this._fetchMembers();
+        this._initGroupStore(this.props.groupId);
    },

-    _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);
+    componentWillReceiveProps(newProps) {
+        if (newProps.groupId !== this.props.groupId) {
+            this._unregisterGroupStore();
+            this._initGroupStore(newProps.groupId);
+        }
+    },
+
+    _initGroupStore(groupId) {
+        this._groupStore = GroupStoreCache.getGroupStore(
+            this.context.matrixClient, this.props.groupId,
+        );
+        this._groupStore.registerListener(this.onGroupStoreUpdated);
+    },
+
+    _unregisterGroupStore() {
+        if (this._groupStore) {
+            this._groupStore.unregisterListener(this.onGroupStoreUpdated);
+        }
+    },
+
+    onGroupStoreUpdated: function() {
+        this.setState({
+            isUserInvited: this._groupStore.getGroupInvitedMembers().some(
+                (m) => m.userId === this.props.groupMember.userId,
+            ),
+            isUserPrivilegedInGroup: this._groupStore.isUserPrivileged(),
        });
    },

@@ -68,13 +84,15 @@ module.exports = withMatrixClient(React.createClass({
        const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
        Modal.createDialog(ConfirmUserActionDialog, {
            groupMember: this.props.groupMember,
-            action: _t('Remove from group'),
+            action: this.state.isUserInvited ? _t('Disinvite') : _t('Remove from community'),
+            title: this.state.isUserInvited ? _t('Disinvite this user from community?')
+                                            : _t('Remove this user from community?'),
            danger: true,
            onFinished: (proceed) => {
                if (!proceed) return;

                this.setState({removingUser: true});
-                this.props.matrixClient.removeUserFromGroup(
+                this.context.matrixClient.removeUserFromGroup(
                    this.props.groupId, this.props.groupMember.userId,
                ).then(() => {
                    // return to the user list
@@ -86,7 +104,9 @@ module.exports = withMatrixClient(React.createClass({
                    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'),
+                        description: this.state.isUserInvited ?
+                            _t('Failed to withdraw invitation') :
+                            _t('Failed to remove user from community'),
                    });
                }).finally(() => {
                    this.setState({removingUser: false});
@@ -111,24 +131,17 @@ module.exports = withMatrixClient(React.createClass({
    },

    render: function() {
-        if (this.state.fetching || this.state.removingUser) {
+        if (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 = (
+        let adminTools;
+        if (this.state.isUserPrivilegedInGroup) {
+            const kickButton = (
                <AccessibleButton className="mx_MemberInfo_field"
                        onClick={this._onKick}>
-                    { _t('Remove from group') }
+                    { this.state.isUserInvited ? _t('Disinvite') : _t('Remove from community') }
                </AccessibleButton>
            );

@@ -137,22 +150,19 @@ module.exports = withMatrixClient(React.createClass({
            giveModButton = <AccessibleButton className="mx_MemberInfo_field" onClick={this.onModToggle}>
                {giveOpLabel}
            </AccessibleButton>;*/
+
+            if (kickButton) {
+                adminTools =
+                    <div className="mx_MemberInfo_adminTools">
+                        <h3>{ _t("Admin Tools") }</h3>
+                        <div className="mx_MemberInfo_buttons">
+                            { kickButton }
+                        </div>
+                    </div>;
+            }
        }

-        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(
+        const avatarUrl = this.context.matrixClient.mxcUrlToHttp(
            this.props.groupMember.avatarUrl,
            36, 36, 'crop',
        );
@@ -173,7 +183,7 @@ module.exports = withMatrixClient(React.createClass({
            <div className="mx_MemberInfo">
                <GeminiScrollbar autoshow={true}>
                    <AccessibleButton className="mx_MemberInfo_cancel"onClick={this._onCancel}>
-                        <img src="img/cancel.svg" width="18" height="18" />
+                        <img src="img/cancel.svg" width="18" height="18" className="mx_filterFlipColor" />
                    </AccessibleButton>
                    <div className="mx_MemberInfo_avatar">
                        { avatar }
@@ -192,4 +202,4 @@ module.exports = withMatrixClient(React.createClass({
            </div>
        );
    },
-}));
+});
--- a/src/components/views/groups/GroupMemberList.js
+++ b/src/components/views/groups/GroupMemberList.js
@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
-import { groupMemberFromApiObject } from '../../../groups';
+import GroupStoreCache from '../../../stores/GroupStoreCache';
 import GeminiScrollbar from 'react-gemini-scrollbar';
 import PropTypes from 'prop-types';
 import withMatrixClient from '../../../wrappers/withMatrixClient';
@@ -27,36 +27,39 @@ const INITIAL_LOAD_NUM_MEMBERS = 30;
 export default withMatrixClient(React.createClass({
    displayName: 'GroupMemberList',

-    propTypes: {
+    contextTypes: {
        matrixClient: PropTypes.object.isRequired,
+    },
+
+    propTypes: {
        groupId: PropTypes.string.isRequired,
    },

    getInitialState: function() {
        return {
-            fetching: false,
            members: null,
+            invitedMembers: null,
            truncateAt: INITIAL_LOAD_NUM_MEMBERS,
        };
    },

    componentWillMount: function() {
        this._unmounted = false;
-        this._fetchMembers();
+        this._initGroupStore(this.props.groupId);
+    },
+
+    _initGroupStore: function(groupId) {
+        this._groupStore = GroupStoreCache.getGroupStore(this.context.matrixClient, groupId);
+        this._groupStore.registerListener(() => {
+            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);
+        if (this._unmounted) return;
+        this.setState({
+            members: this._groupStore.getGroupMembers(),
+            invitedMembers: this._groupStore.getGroupInvitedMembers(),
        });
    },

@@ -83,11 +86,10 @@ export default withMatrixClient(React.createClass({
        this.setState({ searchQuery: ev.target.value });
    },

-    makeGroupMemberTiles: function(query) {
+    makeGroupMemberTiles: function(query, memberList) {
        const GroupMemberTile = sdk.getComponent("groups.GroupMemberTile");
+        const TruncatedList = sdk.getComponent("elements.TruncatedList");
        query = (query || "").toLowerCase();
-
-        let memberList = this.state.members;
        if (query) {
            memberList = memberList.filter((m) => {
                const matchesName = m.displayname.toLowerCase().indexOf(query) !== -1;
@@ -101,12 +103,11 @@ export default withMatrixClient(React.createClass({
            });
        }

-        memberList = memberList.map((m) => {
-            return (
-                <GroupMemberTile key={m.userId} groupId={this.props.groupId} member={m} />
-            );
+        const uniqueMembers = {};
+        memberList.forEach((m) => {
+            if (!uniqueMembers[m.userId]) uniqueMembers[m.userId] = m;
        });
-
+        memberList = Object.keys(uniqueMembers).map((userId) => uniqueMembers[userId]);
        memberList.sort((a, b) => {
            // TODO: should put admins at the top: we don't yet have that info
            if (a < b) {
@@ -118,36 +119,51 @@ export default withMatrixClient(React.createClass({
            }
        });

-        return memberList;
+        const memberTiles = memberList.map((m) => {
+            return (
+                <GroupMemberTile key={m.userId} groupId={this.props.groupId} member={m} />
+            );
+        });
+
+        return <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAt}
+            createOverflowElement={this._createOverflowTile}
+        >
+            { memberTiles }
+        </TruncatedList>;
    },

    render: function() {
-        if (this.state.fetching) {
+        if (this.state.fetching || this.state.fetchingInvitedMembers) {
            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')} />
+                        placeholder={_t('Filter community members')} />
            </form>
        );

-        const TruncatedList = sdk.getComponent("elements.TruncatedList");
+        const joined = this.state.members ? <div className="mx_MemberList_joined">
+            { this.makeGroupMemberTiles(this.state.searchQuery, this.state.members) }
+        </div> : <div />;
+
+        const invited = (this.state.invitedMembers && this.state.invitedMembers.length > 0) ?
+            <div className="mx_MemberList_invited">
+                <h2>{ _t("Invited") }</h2>
+                { this.makeGroupMemberTiles(this.state.searchQuery, this.state.invitedMembers) }
+            </div> : <div />;
+
        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 autoshow={true} className="mx_MemberList_outerWrapper">
+                    { joined }
+                    { invited }
                </GeminiScrollbar>
            </div>
        );
--- a/src/components/views/groups/GroupRoomInfo.js
+++ b/src/components/views/groups/GroupRoomInfo.js
@@ -0,0 +1,242 @@
+/*
+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 { MatrixClient } from 'matrix-js-sdk';
+import dis from '../../../dispatcher';
+import Modal from '../../../Modal';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import GroupStoreCache from '../../../stores/GroupStoreCache';
+import GeminiScrollbar from 'react-gemini-scrollbar';
+
+module.exports = React.createClass({
+    displayName: 'GroupRoomInfo',
+
+    contextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+    },
+
+    propTypes: {
+        groupId: PropTypes.string,
+        groupRoomId: PropTypes.string,
+    },
+
+    getInitialState: function() {
+        return {
+            isUserPrivilegedInGroup: null,
+            groupRoom: null,
+            groupRoomPublicityLoading: false,
+            groupRoomRemoveLoading: false,
+        };
+    },
+
+    componentWillMount: function() {
+        this._initGroupStore(this.props.groupId);
+    },
+
+    componentWillReceiveProps(newProps) {
+        if (newProps.groupId !== this.props.groupId) {
+            this._unregisterGroupStore();
+            this._initGroupStore(newProps.groupId);
+        }
+    },
+
+    componentWillUnmount() {
+        this._unregisterGroupStore();
+    },
+
+    _initGroupStore(groupId) {
+        this._groupStore = GroupStoreCache.getGroupStore(
+            this.context.matrixClient, this.props.groupId,
+        );
+        this._groupStore.registerListener(this.onGroupStoreUpdated);
+    },
+
+    _unregisterGroupStore() {
+        if (this._groupStore) {
+            this._groupStore.unregisterListener(this.onGroupStoreUpdated);
+        }
+    },
+
+    _updateGroupRoom() {
+        this.setState({
+            groupRoom: this._groupStore.getGroupRooms().find(
+                (r) => r.roomId === this.props.groupRoomId,
+            ),
+        });
+    },
+
+    onGroupStoreUpdated: function() {
+        this.setState({
+            isUserPrivilegedInGroup: this._groupStore.isUserPrivileged(),
+        });
+        this._updateGroupRoom();
+    },
+
+    _onRemove: function(e) {
+        const groupId = this.props.groupId;
+        const roomName = this.state.groupRoom.displayname;
+        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 community will also remove it from the community page."),
+            button: _t("Remove"),
+            onFinished: (proceed) => {
+                if (!proceed) return;
+                this.setState({groupRoomRemoveLoading: true});
+                const groupId = this.props.groupId;
+                const roomId = this.props.groupRoomId;
+                this._groupStore.removeRoomFromGroup(roomId).then(() => {
+                    dis.dispatch({
+                        action: "view_group_room_list",
+                    });
+                }).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 community"),
+                        description: _t(
+                            "Failed to remove '%(roomName)s' from %(groupId)s", {groupId, roomName},
+                        ),
+                    });
+                }).finally(() => {
+                    this.setState({groupRoomRemoveLoading: false});
+                });
+            },
+        });
+    },
+
+    _onCancel: function(e) {
+        dis.dispatch({
+            action: "view_group_room_list",
+        });
+    },
+
+    _changeGroupRoomPublicity(e) {
+        const isPublic = e.target.value === "public";
+        this.setState({
+            groupRoomPublicityLoading: true,
+        });
+        const groupId = this.props.groupId;
+        const roomId = this.props.groupRoomId;
+        const roomName = this.state.groupRoom.displayname;
+        this._groupStore.updateGroupRoomAssociation(roomId, isPublic).catch((err) => {
+            console.error(`Error whilst changing visibility of ${roomId} in ${groupId} to ${isPublic}`, err);
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createTrackedDialog('Failed to remove room from group', '', ErrorDialog, {
+                title: _t("Something went wrong!"),
+                description: _t(
+                    "The visibility of '%(roomName)s' in %(groupId)s could not be updated.",
+                    {roomName, groupId},
+                ),
+            });
+        }).finally(() => {
+            this.setState({
+                groupRoomPublicityLoading: false,
+            });
+        });
+    },
+
+    render: function() {
+        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        const EmojiText = sdk.getComponent('elements.EmojiText');
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const InlineSpinner = sdk.getComponent('elements.InlineSpinner');
+        if (this.state.groupRoomRemoveLoading || !this.state.groupRoom) {
+            const Spinner = sdk.getComponent("elements.Spinner");
+            return <div className="mx_MemberInfo">
+                <Spinner />
+            </div>;
+        }
+
+        let adminTools;
+        if (this.state.isUserPrivilegedInGroup) {
+            adminTools =
+                <div className="mx_MemberInfo_adminTools">
+                    <h3>{ _t("Admin Tools") }</h3>
+                    <div className="mx_MemberInfo_buttons">
+                        <AccessibleButton className="mx_MemberInfo_field" onClick={this._onRemove}>
+                            { _t('Remove from community') }
+                        </AccessibleButton>
+                    </div>
+                    <h3>
+                        { _t('Visibility in Room List') }
+                        { this.state.groupRoomPublicityLoading ?
+                            <InlineSpinner /> : <div />
+                        }
+                    </h3>
+                    <div>
+                        <label>
+                            <input type="radio"
+                                value="public"
+                                checked={this.state.groupRoom.isPublic}
+                                onClick={this._changeGroupRoomPublicity}
+                            />
+                            <div className="mx_MemberInfo_label_text">
+                                { _t('Visible to everyone') }
+                            </div>
+                        </label>
+                    </div>
+                    <div>
+                        <label>
+                            <input type="radio"
+                                value="private"
+                                checked={!this.state.groupRoom.isPublic}
+                                onClick={this._changeGroupRoomPublicity}
+                            />
+                            <div className="mx_MemberInfo_label_text">
+                                { _t('Only visible to community members') }
+                            </div>
+                        </label>
+                    </div>
+                </div>;
+        }
+
+        const avatarUrl = this.context.matrixClient.mxcUrlToHttp(
+            this.state.groupRoom.avatarUrl,
+            36, 36, 'crop',
+        );
+
+        const groupRoomName = this.state.groupRoom.displayname;
+        const avatar = <BaseAvatar name={groupRoomName} width={36} height={36} url={avatarUrl} />;
+        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" className="mx_filterFlipColor" />
+                    </AccessibleButton>
+                    <div className="mx_MemberInfo_avatar">
+                        { avatar }
+                    </div>
+
+                    <EmojiText element="h2">{ groupRoomName }</EmojiText>
+
+                    <div className="mx_MemberInfo_profile">
+                        <div className="mx_MemberInfo_profileField">
+                            { this.state.groupRoom.canonical_alias }
+                        </div>
+                    </div>
+
+                    { adminTools }
+                </GeminiScrollbar>
+            </div>
+        );
+    },
+});
--- a/src/components/views/groups/GroupRoomList.js
+++ b/src/components/views/groups/GroupRoomList.js
@@ -16,7 +16,6 @@ limitations under the License.
 import React from 'react';
 import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
-import { groupRoomFromApiObject } from '../../../groups';
 import GroupStoreCache from '../../../stores/GroupStoreCache';
 import GeminiScrollbar from 'react-gemini-scrollbar';
 import PropTypes from 'prop-types';
@@ -48,24 +47,20 @@ export default React.createClass({

    _initGroupStore: function(groupId) {
        this._groupStore = GroupStoreCache.getGroupStore(this.context.matrixClient, groupId);
-        this._groupStore.on('update', () => {
+        this._groupStore.registerListener(() => {
            this._fetchRooms();
        });
        this._groupStore.on('error', (err) => {
-            console.error('Error in group store (listened to by GroupRoomList)', err);
            this.setState({
                rooms: null,
            });
        });
-        this._fetchRooms();
    },

    _fetchRooms: function() {
        if (this._unmounted) return;
        this.setState({
-            rooms: this._groupStore.getGroupRooms().map((apiRoom) => {
-                return groupRoomFromApiObject(apiRoom);
-            }),
+            rooms: this._groupStore.getGroupRooms(),
        });
    },

@@ -126,7 +121,7 @@ export default React.createClass({
            <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')} />
+                        placeholder={_t('Filter community rooms')} />
            </form>
        );

--- a/src/components/views/groups/GroupRoomTile.js
+++ b/src/components/views/groups/GroupRoomTile.js
@@ -16,13 +16,10 @@ 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 GroupStoreCache from '../../../stores/GroupStoreCache';
-import Modal from '../../../Modal';

 const GroupRoomTile = React.createClass({
    displayName: 'GroupRoomTile',
@@ -32,68 +29,11 @@ const GroupRoomTile = React.createClass({
        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 groupStore = GroupStoreCache.getGroupStore(this.context.matrixClient, groupId);
-        const roomName = this.state.name;
-        const roomId = this.props.groupRoom.roomId;
-        groupStore.removeRoomFromGroup(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();
-                }
-            },
+            action: 'view_group_room',
+            groupId: this.props.groupId,
+            groupRoomId: this.props.groupRoom.roomId,
        });
    },

@@ -106,7 +46,7 @@ const GroupRoomTile = React.createClass({
        );

        const av = (
-            <BaseAvatar name={this.state.name}
+            <BaseAvatar name={this.props.groupRoom.displayname}
                width={36} height={36}
                url={avatarUrl}
            />
@@ -118,11 +58,8 @@ const GroupRoomTile = React.createClass({
                    { av }
                </div>
                <div className="mx_GroupRoomTile_name">
-                    { this.state.name }
+                    { this.props.groupRoom.displayname }
                </div>
-                <AccessibleButton className="mx_GroupRoomTile_delete" onClick={this.onDeleteClick}>
-                    <img src="img/cancel-small.svg" />
-                </AccessibleButton>
            </AccessibleButton>
        );
    },
--- a/src/components/views/login/InteractiveAuthEntryComponents.js
+++ b/src/components/views/login/InteractiveAuthEntryComponents.js
@@ -20,7 +20,7 @@ import url from 'url';
 import classnames from 'classnames';

 import sdk from '../../../index';
-import { _t } from '../../../languageHandler';
+import { _t, _tJsx } from '../../../languageHandler';

 /* This file contains a collection of components which are used by the
 * InteractiveAuth to prompt the user to enter the information needed
@@ -256,7 +256,7 @@ export const EmailIdentityAuthEntry = React.createClass({
        } else {
            return (
                <div>
-                    <p>{ _t("An email has been sent to") } <i>{ this.props.inputs.emailAddress }</i></p>
+                    <p>{ _tJsx("An email has been sent to %(emailAddress)s", /%\(emailAddress\)s/, (sub) => <i>{this.props.inputs.emailAddress}</i>) }</p>
                    <p>{ _t("Please check your email to continue registration.") }</p>
                </div>
            );
@@ -370,7 +370,7 @@ export const MsisdnAuthEntry = React.createClass({
            });
            return (
                <div>
-                    <p>{ _t("A text message has been sent to") } +<i>{ this._msisdn }</i></p>
+                    <p>{ _tJsx("A text message has been sent to %(msisdn)s", /%\(msisdn\)s/, (sub) => <i>{this._msisdn}</i>) }</p>
                    <p>{ _t("Please enter the code it contains:") }</p>
                    <div className="mx_InteractiveAuthEntryComponents_msisdnWrapper">
                        <form onSubmit={this._onFormSubmit}>
--- a/src/components/views/messages/SenderProfile.js
+++ b/src/components/views/messages/SenderProfile.js
@@ -19,6 +19,7 @@
 import React from 'react';
 import sdk from '../../../index';
 import Flair from '../elements/Flair.js';
+import { _tJsx } from '../../../languageHandler';

 export default function SenderProfile(props) {
    const EmojiText = sdk.getComponent('elements.EmojiText');
@@ -30,23 +31,39 @@ export default function SenderProfile(props) {
        return <span />; // emote message must include the name so don't duplicate it
    }

+    // Name + flair
+    const nameElem = [
+        <EmojiText key='name' className="mx_SenderProfile_name">{ name || '' }</EmojiText>,
+        props.enableFlair ?
+            <Flair key='flair'
+                userId={mxEvent.getSender()}
+                roomId={mxEvent.getRoomId()}
+                showRelated={true} />
+            : null,
+    ];
+
+    let content = '';
+
+    if(props.text) {
+        // Replace senderName, and wrap surrounding text in spans with the right class
+        content = _tJsx(props.text, /^(.*)\%\(senderName\)s(.*)$/m, (p1, p2) => [
+            p1 ? <span className='mx_SenderProfile_aux'>{ p1 }</span> : null,
+            nameElem,
+            p2 ? <span className='mx_SenderProfile_aux'>{ p2 }</span> : null,
+        ]);
+    } else {
+        content = nameElem;
+    }
+
    return (
        <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 }
+            { content }
        </div>
    );
 }

 SenderProfile.propTypes = {
    mxEvent: React.PropTypes.object.isRequired, // event whose sender we're showing
-    aux: React.PropTypes.string, // stuff to go after the sender name, if anything
+    text: React.PropTypes.string, // Text to show. Defaults to sender name
    onClick: React.PropTypes.func,
 };
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -34,6 +34,7 @@ import MatrixClientPeg from '../../../MatrixClientPeg';
 import ContextualMenu from '../../structures/ContextualMenu';
 import {RoomMember} from 'matrix-js-sdk';
 import classNames from 'classnames';
+import PushProcessor from 'matrix-js-sdk/lib/pushprocessor';

 linkifyMatrix(linkify);

@@ -169,8 +170,10 @@ module.exports = React.createClass({

    pillifyLinks: function(nodes) {
        const shouldShowPillAvatar = !UserSettingsStore.getSyncedSetting("Pill.shouldHidePillAvatar", false);
-        for (let i = 0; i < nodes.length; i++) {
-            const node = nodes[i];
+        let node = nodes[0];
+        while (node) {
+            let pillified = false;
+
            if (node.tagName === "A" && node.getAttribute("href")) {
                const href = node.getAttribute("href");

@@ -189,10 +192,71 @@ module.exports = React.createClass({

                    ReactDOM.render(pill, pillContainer);
                    node.parentNode.replaceChild(pillContainer, node);
+                    // Pills within pills aren't going to go well, so move on
+                    pillified = true;
+
+                    // update the current node with one that's now taken its place
+                    node = pillContainer;
+                }
+            } else if (node.nodeType == Node.TEXT_NODE) {
+                const Pill = sdk.getComponent('elements.Pill');
+
+                let currentTextNode = node;
+                const roomNotifTextNodes = [];
+
+                // Take a textNode and break it up to make all the instances of @room their
+                // own textNode, adding those nodes to roomNotifTextNodes
+                while (currentTextNode !== null) {
+                    const roomNotifPos = Pill.roomNotifPos(currentTextNode.textContent);
+                    let nextTextNode = null;
+                    if (roomNotifPos > -1) {
+                        let roomTextNode = currentTextNode;
+
+                        if (roomNotifPos > 0) roomTextNode = roomTextNode.splitText(roomNotifPos);
+                        if (roomTextNode.textContent.length > Pill.roomNotifLen()) {
+                            nextTextNode = roomTextNode.splitText(Pill.roomNotifLen());
+                        }
+                        roomNotifTextNodes.push(roomTextNode);
+                    }
+                    currentTextNode = nextTextNode;
+                }
+
+                if (roomNotifTextNodes.length > 0) {
+                    const pushProcessor = new PushProcessor(MatrixClientPeg.get());
+                    const atRoomRule = pushProcessor.getPushRuleById(".m.rule.roomnotif");
+                    if (pushProcessor.ruleMatchesEvent(atRoomRule, this.props.mxEvent)) {
+                        // Now replace all those nodes with Pills
+                        for (const roomNotifTextNode of roomNotifTextNodes) {
+                            const pillContainer = document.createElement('span');
+                            const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+                            const pill = <Pill
+                                type={Pill.TYPE_AT_ROOM_MENTION}
+                                inMessage={true}
+                                room={room}
+                                shouldShowPillAvatar={true}
+                            />;
+
+                            ReactDOM.render(pill, pillContainer);
+                            roomNotifTextNode.parentNode.replaceChild(pillContainer, roomNotifTextNode);
+
+                            // Set the next node to be processed to the one after the node
+                            // we're adding now, since we've just inserted nodes into the structure
+                            // we're iterating over.
+                            // Note we've checked roomNotifTextNodes.length > 0 so we'll do this at least once
+                            node = roomNotifTextNode.nextSibling;
+                        }
+                        // Nothing else to do for a text node (and we don't need to advance
+                        // the loop pointer because we did it above)
+                        continue;
+                    }
                }
-            } else if (node.children && node.children.length) {
-                this.pillifyLinks(node.children);
            }
+
+            if (node.childNodes && node.childNodes.length && !pillified) {
+                this.pillifyLinks(node.childNodes);
+            }
+
+            node = node.nextSibling;
        }
    },

--- a/src/components/views/messages/UnknownBody.js
+++ b/src/components/views/messages/UnknownBody.js
@@ -25,7 +25,10 @@ module.exports = React.createClass({
    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 redactedBecauseUserId = this.props.mxEvent.getUnsigned().redacted_because.sender;
+            tooltip = redactedBecauseUserId ?
+                _t("Message removed by %(userId)s", { userId: redactedBecauseUserId }) :
+                _t("Message removed");
        }

        const text = this.props.mxEvent.getContent().body;
--- a/src/components/views/room_settings/AliasSettings.js
+++ b/src/components/views/room_settings/AliasSettings.js
@@ -262,6 +262,7 @@ module.exports = React.createClass({
                    items={this.state.domainToAliases[localDomain] || []}
                    newItem={this.state.newAlias}
                    onNewItemChanged={this.onNewAliasChanged}
+                    canEdit={this.props.canSetAliases}
                    onItemAdded={this.onLocalAliasAdded}
                    onItemEdited={this.onLocalAliasChanged}
                    onItemRemoved={this.onLocalAliasDeleted}
--- a/src/components/views/room_settings/RelatedGroupSettings.js
+++ b/src/components/views/room_settings/RelatedGroupSettings.js
@@ -27,7 +27,7 @@ module.exports = React.createClass({

    propTypes: {
        roomId: React.PropTypes.string.isRequired,
-        canSetRelatedRooms: React.PropTypes.bool.isRequired,
+        canSetRelatedGroups: React.PropTypes.bool.isRequired,
        relatedGroupsEvent: React.PropTypes.instanceOf(MatrixEvent),
    },

@@ -37,7 +37,7 @@ module.exports = React.createClass({

    getDefaultProps: function() {
        return {
-            canSetRelatedRooms: false,
+            canSetRelatedGroups: false,
        };
    },

@@ -63,9 +63,9 @@ module.exports = React.createClass({
    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 }),
+            Modal.createTrackedDialog('Invalid related community ID', '', ErrorDialog, {
+                title: _t('Invalid community ID'),
+                description: _t('\'%(groupId)s\' is not a valid community ID', { groupId }),
            });
            return false;
        }
@@ -105,19 +105,20 @@ module.exports = React.createClass({
        const localDomain = this.context.matrixClient.getDomain();
        const EditableItemList = sdk.getComponent('elements.EditableItemList');
        return (<div>
-            <h3>{ _t('Related Groups') }</h3>
+            <h3>{ _t('Related Communities') }</h3>
            <EditableItemList
                items={this.state.newGroupsList}
                className={"mx_RelatedGroupSettings"}
                newItem={this.state.newGroupId}
+                canEdit={this.props.canSetRelatedGroups}
                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')}
+                itemsLabel={_t('Related communities for this room:')}
+                noItemsLabel={_t('This room has no related communities')}
                placeholder={_t(
-                    'New group ID (e.g. +foo:%(localDomain)s)', {localDomain},
+                    'New community ID (e.g. +foo:%(localDomain)s)', {localDomain},
                )}
            />
        </div>);
--- a/src/components/views/rooms/Autocomplete.js
+++ b/src/components/views/rooms/Autocomplete.js
@@ -1,5 +1,23 @@
+/*
+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.
+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 ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import flatMap from 'lodash/flatMap';
 import isEqual from 'lodash/isEqual';
@@ -7,8 +25,9 @@ import sdk from '../../../index';
 import type {Completion} from '../../../autocomplete/Autocompleter';
 import Promise from 'bluebird';
 import UserSettingsStore from '../../../UserSettingsStore';
+import { Room } from 'matrix-js-sdk';

-import {getCompletions} from '../../../autocomplete/Autocompleter';
+import Autocompleter from '../../../autocomplete/Autocompleter';

 const COMPOSER_SELECTED = 0;

@@ -17,6 +36,7 @@ export default class Autocomplete extends React.Component {
    constructor(props) {
        super(props);

+        this.autocompleter = new Autocompleter(props.room);
        this.completionPromise = null;
        this.hide = this.hide.bind(this);
        this.onCompletionClicked = this.onCompletionClicked.bind(this);
@@ -41,6 +61,11 @@ export default class Autocomplete extends React.Component {
    }

    componentWillReceiveProps(newProps, state) {
+        if (this.props.room.roomId !== newProps.room.roomId) {
+            this.autocompleter.destroy();
+            this.autocompleter = new Autocompleter(newProps.room);
+        }
+
        // Query hasn't changed so don't try to complete it
        if (newProps.query === this.props.query) {
            return;
@@ -49,6 +74,10 @@ export default class Autocomplete extends React.Component {
        this.complete(newProps.query, newProps.selection);
    }

+    componentWillUnmount() {
+        this.autocompleter.destroy();
+    }
+
    complete(query, selection) {
        this.queryRequested = query;
        if (this.debounceCompletionsRequest) {
@@ -83,7 +112,7 @@ export default class Autocomplete extends React.Component {
    }

    processQuery(query, selection) {
-        return getCompletions(
+        return this.autocompleter.getCompletions(
            query, selection, this.state.forceComplete,
        ).then((completions) => {
            // Only ever process the completions for the most recent query being processed
@@ -267,8 +296,11 @@ export default class Autocomplete extends React.Component {

 Autocomplete.propTypes = {
    // the query string for which to show autocomplete suggestions
-    query: React.PropTypes.string.isRequired,
+    query: PropTypes.string.isRequired,

    // method invoked with range and text content when completion is confirmed
-    onConfirm: React.PropTypes.func.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+
+    // The room in which we're autocompleting
+    room: PropTypes.instanceOf(Room),
 };
--- a/src/components/views/rooms/EntityTile.js
+++ b/src/components/views/rooms/EntityTile.js
@@ -116,7 +116,9 @@ module.exports = React.createClass({
            nameEl = (
                <div className="mx_EntityTile_details">
                    <img className="mx_EntityTile_chevron" src="img/member_chevron.png" width="8" height="12" />
-                    <EmojiText element="div" className="mx_EntityTile_name_hover" dir="auto">{ name }</EmojiText>
+                    <EmojiText element="div" className="mx_EntityTile_name mx_EntityTile_name_hover" dir="auto">
+                        { name }
+                    </EmojiText>
                    <PresenceLabel activeAgo={activeAgo}
                        currentlyActive={this.props.presenceCurrentlyActive}
                        presenceState={this.props.presenceState} />
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -19,7 +19,7 @@ limitations under the License.

 const React = require('react');
 const classNames = require("classnames");
-import { _t } from '../../../languageHandler';
+import { _t, _td } from '../../../languageHandler';
 const Modal = require('../../../Modal');

 const sdk = require('../../../index');
@@ -502,12 +502,12 @@ module.exports = withMatrixClient(React.createClass({
        }

        if (needsSenderProfile) {
-            let aux = null;
+            let text = null;
            if (!this.props.tileShape) {
-                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} enableFlair={!aux} aux={aux} />;
+                if (msgtype === 'm.image') text = _td('%(senderName)s sent an image');
+                else if (msgtype === 'm.video') text = _td('%(senderName)s sent a video');
+                else if (msgtype === 'm.file') text = _td('%(senderName)s uploaded a file');
+                sender = <SenderProfile onClick={this.onSenderProfileClick} mxEvent={this.props.mxEvent} enableFlair={!text} text={text} />;
            } else {
                sender = <SenderProfile mxEvent={this.props.mxEvent} enableFlair={true} />;
            }
--- a/src/components/views/rooms/ForwardMessage.js
+++ b/src/components/views/rooms/ForwardMessage.js
@@ -30,10 +30,9 @@ module.exports = React.createClass({

    componentWillMount: function() {
        dis.dispatch({
-            action: 'ui_opacity',
-            leftOpacity: 1.0,
-            rightOpacity: 0.3,
-            middleOpacity: 0.5,
+            action: 'panel_disable',
+            rightDisabled: true,
+            middleDisabled: true,
        });
    },

@@ -43,9 +42,9 @@ module.exports = React.createClass({

    componentWillUnmount: function() {
        dis.dispatch({
-            action: 'ui_opacity',
-            sideOpacity: 1.0,
-            middleOpacity: 1.0,
+            action: 'panel_disable',
+            sideDisabled: false,
+            middleDisabled: false,
        });
        document.removeEventListener('keydown', this._onKeyDown);
    },
--- a/src/components/views/rooms/LinkPreviewWidget.js
+++ b/src/components/views/rooms/LinkPreviewWidget.js
@@ -133,8 +133,9 @@ module.exports = React.createClass({
                        { p["og:description"] }
                    </div>
                </div>
-                <img className="mx_LinkPreviewWidget_cancel" src="img/cancel.svg" width="18" height="18"
-                     onClick={this.props.onCancelClick} />
+                <img className="mx_LinkPreviewWidget_cancel mx_filterFlipColor"
+                    src="img/cancel.svg" width="18" height="18"
+                    onClick={this.props.onCancelClick} />
            </div>
        );
    },
--- a/src/components/views/rooms/MemberInfo.js
+++ b/src/components/views/rooms/MemberInfo.js
@@ -39,6 +39,7 @@ import { findReadReceiptFromUserId } from '../../../utils/Receipt';
 import withMatrixClient from '../../../wrappers/withMatrixClient';
 import AccessibleButton from '../elements/AccessibleButton';
 import GeminiScrollbar from 'react-gemini-scrollbar';
+import RoomViewStore from '../../../stores/RoomViewStore';


 module.exports = withMatrixClient(React.createClass({
@@ -81,6 +82,7 @@ module.exports = withMatrixClient(React.createClass({
        cli.on("Room.receipt", this.onRoomReceipt);
        cli.on("RoomState.events", this.onRoomStateEvents);
        cli.on("RoomMember.name", this.onRoomMemberName);
+        cli.on("RoomMember.membership", this.onRoomMemberMembership);
        cli.on("accountData", this.onAccountData);

        this._checkIgnoreState();
@@ -91,7 +93,7 @@ module.exports = withMatrixClient(React.createClass({
    },

    componentWillReceiveProps: function(newProps) {
-        if (this.props.member.userId != newProps.member.userId) {
+        if (this.props.member.userId !== newProps.member.userId) {
            this._updateStateForNewMember(newProps.member);
        }
    },
@@ -107,6 +109,7 @@ module.exports = withMatrixClient(React.createClass({
            client.removeListener("Room.receipt", this.onRoomReceipt);
            client.removeListener("RoomState.events", this.onRoomStateEvents);
            client.removeListener("RoomMember.name", this.onRoomMemberName);
+            client.removeListener("RoomMember.membership", this.onRoomMemberMembership);
            client.removeListener("accountData", this.onAccountData);
        }
        if (this._cancelDeviceList) {
@@ -122,12 +125,12 @@ module.exports = withMatrixClient(React.createClass({
    _disambiguateDevices: function(devices) {
        const names = Object.create(null);
        for (let i = 0; i < devices.length; i++) {
-            var name = devices[i].getDisplayName();
+            const name = devices[i].getDisplayName();
            const indexList = names[name] || [];
            indexList.push(i);
            names[name] = indexList;
        }
-        for (name in names) {
+        for (const name in names) {
            if (names[name].length > 1) {
                names[name].forEach((j)=>{
                    devices[j].ambiguous = true;
@@ -141,7 +144,7 @@ module.exports = withMatrixClient(React.createClass({
            return;
        }

-        if (userId == this.props.member.userId) {
+        if (userId === this.props.member.userId) {
            // no need to re-download the whole thing; just update our copy of
            // the list.

@@ -186,8 +189,12 @@ module.exports = withMatrixClient(React.createClass({
        this.forceUpdate();
    },

+    onRoomMemberMembership: function(ev, member) {
+        if (this.props.member.userId === member.userId) this.forceUpdate();
+    },
+
    onAccountData: function(ev) {
-        if (ev.getType() == 'm.direct') {
+        if (ev.getType() === 'm.direct') {
            this.forceUpdate();
        }
    },
@@ -242,17 +249,19 @@ module.exports = withMatrixClient(React.createClass({
            ignoredUsers.push(this.props.member.userId);
        }

-        this.props.matrixClient.setIgnoredUsers(ignoredUsers).then(() => this.setState({isIgnoring: !this.state.isIgnoring}));
+        this.props.matrixClient.setIgnoredUsers(ignoredUsers).then(() => {
+            return this.setState({isIgnoring: !this.state.isIgnoring});
+        });
    },

    onKick: function() {
        const membership = this.props.member.membership;
-        const kickLabel = membership === "invite" ? _t("Disinvite") : _t("Kick");
        const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
        Modal.createTrackedDialog('Confirm User Action Dialog', 'onKick', ConfirmUserActionDialog, {
            member: this.props.member,
-            action: kickLabel,
-            askReason: membership == "join",
+            action: membership === "invite" ? _t("Disinvite") : _t("Kick"),
+            title: membership === "invite" ? _t("Disinvite this user?") : _t("Kick this user?"),
+            askReason: membership === "join",
            danger: true,
            onFinished: (proceed, reason) => {
                if (!proceed) return;
@@ -284,15 +293,16 @@ module.exports = withMatrixClient(React.createClass({
        const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
        Modal.createTrackedDialog('Confirm User Action Dialog', 'onBanOrUnban', ConfirmUserActionDialog, {
            member: this.props.member,
-            action: this.props.member.membership == 'ban' ? _t("Unban") : _t("Ban"),
-            askReason: this.props.member.membership != 'ban',
-            danger: this.props.member.membership != 'ban',
+            action: this.props.member.membership === 'ban' ? _t("Unban") : _t("Ban"),
+            title: this.props.member.membership === 'ban' ? _t("Unban this user?") : _t("Ban this user?"),
+            askReason: this.props.member.membership !== 'ban',
+            danger: this.props.member.membership !== 'ban',
            onFinished: (proceed, reason) => {
                if (!proceed) return;

                this.setState({ updating: this.state.updating + 1 });
                let promise;
-                if (this.props.member.membership == 'ban') {
+                if (this.props.member.membership === 'ban') {
                    promise = this.props.matrixClient.unban(
                        this.props.member.roomId, this.props.member.userId,
                    );
@@ -327,15 +337,11 @@ module.exports = withMatrixClient(React.createClass({
        const roomId = this.props.member.roomId;
        const target = this.props.member.userId;
        const room = this.props.matrixClient.getRoom(roomId);
-        if (!room) {
-            return;
-        }
-        const powerLevelEvent = room.currentState.getStateEvents(
-            "m.room.power_levels", "",
-        );
-        if (!powerLevelEvent) {
-            return;
-        }
+        if (!room) return;
+
+        const powerLevelEvent = room.currentState.getStateEvents("m.room.power_levels", "");
+        if (!powerLevelEvent) return;
+
        const isMuted = this.state.muted;
        const powerLevels = powerLevelEvent.getContent();
        const levelToSend = (
@@ -350,7 +356,7 @@ module.exports = withMatrixClient(React.createClass({
        }
        level = parseInt(level);

-        if (level !== NaN) {
+        if (!isNaN(level)) {
            this.setState({ updating: this.state.updating + 1 });
            this.props.matrixClient.setPowerLevel(roomId, target, level, powerLevelEvent).then(
                function() {
@@ -375,19 +381,14 @@ module.exports = withMatrixClient(React.createClass({
        const roomId = this.props.member.roomId;
        const target = this.props.member.userId;
        const room = this.props.matrixClient.getRoom(roomId);
-        if (!room) {
-            return;
-        }
-        const powerLevelEvent = room.currentState.getStateEvents(
-            "m.room.power_levels", "",
-        );
-        if (!powerLevelEvent) {
-            return;
-        }
+        if (!room) return;
+
+        const powerLevelEvent = room.currentState.getStateEvents("m.room.power_levels", "");
+        if (!powerLevelEvent) return;
+
        const me = room.getMember(this.props.matrixClient.credentials.userId);
-        if (!me) {
-            return;
-        }
+        if (!me) return;
+
        const defaultLevel = powerLevelEvent.getContent().users_default;
        let modLevel = me.powerLevel - 1;
        if (modLevel > 50 && defaultLevel < 50) modLevel = 50; // try to stick with the vector level defaults
@@ -400,7 +401,7 @@ module.exports = withMatrixClient(React.createClass({
                // get out of sync if we force setState here!
                console.log("Mod toggle success");
            }, function(err) {
-                if (err.errcode == 'M_GUEST_ACCESS_FORBIDDEN') {
+                if (err.errcode === 'M_GUEST_ACCESS_FORBIDDEN') {
                    dis.dispatch({action: 'view_set_mxid'});
                } else {
                    console.error("Toggle moderator error:" + err);
@@ -436,7 +437,6 @@ module.exports = withMatrixClient(React.createClass({
    },

    onPowerChange: function(powerLevel) {
-        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
        const roomId = this.props.member.roomId;
        const target = this.props.member.userId;
        const room = this.props.matrixClient.getRoom(roomId);
@@ -497,19 +497,14 @@ module.exports = withMatrixClient(React.createClass({
            modifyLevel: false,
        };
        const room = this.props.matrixClient.getRoom(member.roomId);
-        if (!room) {
-            return defaultPerms;
-        }
-        const powerLevels = room.currentState.getStateEvents(
-            "m.room.power_levels", "",
-        );
-        if (!powerLevels) {
-            return defaultPerms;
-        }
+        if (!room) return defaultPerms;
+
+        const powerLevels = room.currentState.getStateEvents("m.room.power_levels", "");
+        if (!powerLevels) return defaultPerms;
+
        const me = room.getMember(this.props.matrixClient.credentials.userId);
-        if (!me) {
-            return defaultPerms;
-        }
+        if (!me) return defaultPerms;
+
        const them = member;
        return {
            can: this._calculateCanPermissions(
@@ -545,14 +540,13 @@ module.exports = withMatrixClient(React.createClass({
        can.ban = me.powerLevel >= powerLevels.ban;
        can.mute = me.powerLevel >= editPowerLevel;
        can.toggleMod = me.powerLevel > them.powerLevel && them.powerLevel >= levelToSend;
-        can.modifyLevel = me.powerLevel > them.powerLevel;
+        can.modifyLevel = me.powerLevel > them.powerLevel && me.powerLevel >= editPowerLevel;
        return can;
    },

    _isMuted: function(member, powerLevelContent) {
-        if (!powerLevelContent || !member) {
-            return false;
-        }
+        if (!powerLevelContent || !member) return false;
+
        const levelToSend = (
            (powerLevelContent.events ? powerLevelContent.events["m.room.message"] : null) ||
            powerLevelContent.events_default
@@ -568,14 +562,15 @@ module.exports = withMatrixClient(React.createClass({
    },

    onMemberAvatarClick: function() {
-        const avatarUrl = this.props.member.user ? this.props.member.user.avatarUrl : this.props.member.events.member.getContent().avatar_url;
+        const member = this.props.member;
+        const avatarUrl = member.user ? member.user.avatarUrl : member.events.member.getContent().avatar_url;
        if(!avatarUrl) return;

        const httpUrl = this.props.matrixClient.mxcUrlToHttp(avatarUrl);
        const ImageView = sdk.getComponent("elements.ImageView");
        const params = {
            src: httpUrl,
-            name: this.props.member.name,
+            name: member.name,
        };

        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
@@ -589,9 +584,7 @@ module.exports = withMatrixClient(React.createClass({
    },

    _renderDevices: function() {
-        if (!this._enableDevices) {
-            return null;
-        }
+        if (!this._enableDevices) return null;

        const devices = this.state.devices;
        const MemberDeviceInfo = sdk.getComponent('rooms.MemberDeviceInfo');
@@ -629,6 +622,8 @@ module.exports = withMatrixClient(React.createClass({
        const member = this.props.member;

        let ignoreButton = null;
+        let insertPillButton = null;
+        let inviteUserButton = null;
        let readReceiptButton = null;

        // Only allow the user to ignore the user if its not ourselves
@@ -653,29 +648,71 @@ module.exports = withMatrixClient(React.createClass({
                    });
                };

+                const onInsertPillButton = function() {
+                    dis.dispatch({
+                        action: 'insert_mention',
+                        user_id: member.userId,
+                    });
+                };
+
                readReceiptButton = (
                    <AccessibleButton onClick={onReadReceiptButton} className="mx_MemberInfo_field">
                        { _t('Jump to read receipt') }
                    </AccessibleButton>
                );
+
+                insertPillButton = (
+                    <AccessibleButton onClick={onInsertPillButton} className={"mx_MemberInfo_field"}>
+                        { _t('Mention') }
+                    </AccessibleButton>
+                );
+            }
+
+            if (!member || !member.membership || member.membership === 'leave') {
+                const roomId = member && member.roomId ? member.roomId : RoomViewStore.getRoomId();
+                const onInviteUserButton = async () => {
+                    try {
+                        await cli.invite(roomId, member.userId);
+                    } catch (err) {
+                        const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
+                        Modal.createTrackedDialog('Failed to invite', '', ErrorDialog, {
+                            title: _t('Failed to invite'),
+                            description: ((err && err.message) ? err.message : "Operation failed"),
+                        });
+                    }
+                };
+
+                inviteUserButton = (
+                    <AccessibleButton onClick={onInviteUserButton} className="mx_MemberInfo_field">
+                        { _t('Invite') }
+                    </AccessibleButton>
+                );
            }
        }

-        if (!ignoreButton && !readReceiptButton) return null;
+        if (!ignoreButton && !readReceiptButton && !insertPillButton && !inviteUserButton) return null;

        return (
            <div>
                <h3>{ _t("User Options") }</h3>
                <div className="mx_MemberInfo_buttons">
                    { readReceiptButton }
+                    { insertPillButton }
                    { ignoreButton }
+                    { inviteUserButton }
                </div>
            </div>
        );
    },

    render: function() {
-        let startChat, kickButton, banButton, muteButton, giveModButton, spinner;
+        let startChat;
+        let kickButton;
+        let banButton;
+        let muteButton;
+        let giveModButton;
+        let spinner;
+
        if (this.props.member.userId !== this.props.matrixClient.credentials.userId) {
            const dmRoomMap = new DMRoomMap(this.props.matrixClient);
            const dmRooms = dmRoomMap.getDMRoomsForUserId(this.props.member.userId);
@@ -689,7 +726,7 @@ module.exports = withMatrixClient(React.createClass({
                    const me = room.getMember(this.props.matrixClient.credentials.userId);
                    const highlight = (
                        room.getUnreadNotificationCount('highlight') > 0 ||
-                        me.membership == "invite"
+                        me.membership === "invite"
                    );
                    tiles.push(
                        <RoomTile key={room.roomId} room={room}
@@ -697,7 +734,7 @@ module.exports = withMatrixClient(React.createClass({
                            selected={false}
                            unread={Unread.doesRoomHaveUnreadMessages(room)}
                            highlight={highlight}
-                            isInvite={me.membership == "invite"}
+                            isInvite={me.membership === "invite"}
                            onClick={this.onRoomTileClick}
                        />,
                    );
@@ -742,7 +779,7 @@ module.exports = withMatrixClient(React.createClass({
        }
        if (this.state.can.ban) {
            let label = _t("Ban");
-            if (this.props.member.membership == 'ban') {
+            if (this.props.member.membership === 'ban') {
                label = _t("Unban");
            }
            banButton = (
@@ -768,9 +805,6 @@ module.exports = withMatrixClient(React.createClass({
            </AccessibleButton>;
        }

-        // TODO: we should have an invite button if this MemberInfo is showing a user who isn't actually in the current room yet
-        // e.g. clicking on a linkified userid in a room
-
        let adminTools;
        if (kickButton || banButton || muteButton || giveModButton) {
            adminTools =
@@ -788,16 +822,39 @@ module.exports = withMatrixClient(React.createClass({

        const memberName = this.props.member.name;

+        let presenceState;
+        let presenceLastActiveAgo;
+        let presenceCurrentlyActive;
+
        if (this.props.member.user) {
-            var presenceState = this.props.member.user.presence;
-            var presenceLastActiveAgo = this.props.member.user.lastActiveAgo;
-            const presenceLastTs = this.props.member.user.lastPresenceTs;
-            var presenceCurrentlyActive = this.props.member.user.currentlyActive;
+            presenceState = this.props.member.user.presence;
+            presenceLastActiveAgo = this.props.member.user.lastActiveAgo;
+            presenceCurrentlyActive = this.props.member.user.currentlyActive;
+        }
+
+        let roomMemberDetails = null;
+
+        if (this.props.member.roomId) { // is in room
+            const PowerSelector = sdk.getComponent('elements.PowerSelector');
+            const PresenceLabel = sdk.getComponent('rooms.PresenceLabel');
+            roomMemberDetails = <div>
+                <div className="mx_MemberInfo_profileField">
+                    { _t("Level:") } <b>
+                        <PowerSelector controlled={true}
+                            value={parseInt(this.props.member.powerLevel)}
+                            disabled={!this.state.can.modifyLevel}
+                            onChange={this.onPowerChange} />
+                    </b>
+                </div>
+                <div className="mx_MemberInfo_profileField">
+                    <PresenceLabel activeAgo={presenceLastActiveAgo}
+                        currentlyActive={presenceCurrentlyActive}
+                        presenceState={presenceState} />
+                </div>
+            </div>;
        }

        const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
-        const PowerSelector = sdk.getComponent('elements.PowerSelector');
-        const PresenceLabel = sdk.getComponent('rooms.PresenceLabel');
        const EmojiText = sdk.getComponent('elements.EmojiText');
        return (
            <div className="mx_MemberInfo">
@@ -813,14 +870,7 @@ module.exports = withMatrixClient(React.createClass({
                        <div className="mx_MemberInfo_profileField">
                            { this.props.member.userId }
                        </div>
-                        <div className="mx_MemberInfo_profileField">
-                            { _t("Level:") } <b><PowerSelector controlled={true} value={parseInt(this.props.member.powerLevel)} disabled={!this.state.can.modifyLevel} onChange={this.onPowerChange} /></b>
-                        </div>
-                        <div className="mx_MemberInfo_profileField">
-                            <PresenceLabel activeAgo={presenceLastActiveAgo}
-                                currentlyActive={presenceCurrentlyActive}
-                                presenceState={presenceState} />
-                        </div>
+                        { roomMemberDetails }
                    </div>

                    { this._renderUserOptions() }
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -371,7 +371,7 @@ export default class MessageComposer extends React.Component {
        );

        return (
-            <div className="mx_MessageComposer mx_fadable" style={{ opacity: this.props.opacity }}>
+            <div className="mx_MessageComposer">
                <div className="mx_MessageComposer_wrapper">
                    <div className="mx_MessageComposer_row">
                        { controls }
@@ -410,9 +410,6 @@ MessageComposer.propTypes = {
    // callback when a file to upload is chosen
    uploadFile: React.PropTypes.func.isRequired,

-    // opacity for dynamic UI fading effects
-    opacity: React.PropTypes.number,
-
    // string representing the current room app drawer state
    showApps: React.PropTypes.bool,
 };
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.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.
@@ -1130,10 +1131,12 @@ export default class MessageComposerInput extends React.Component {
                <div className="mx_MessageComposer_autocomplete_wrapper">
                    <Autocomplete
                        ref={(e) => this.autocomplete = e}
+                        room={this.props.room}
                        onConfirm={this.setDisplayedCompletion}
                        onSelectionChange={this.setDisplayedCompletion}
                        query={this.getAutocompleteQuery(content)}
-                        selection={selection} />
+                        selection={selection}
+                    />
                </div>
                <div className={className}>
                    <img className="mx_MessageComposer_input_markdownIndicator mx_filterFlipColor"
--- a/src/components/views/rooms/PinnedEventsPanel.js
+++ b/src/components/views/rooms/PinnedEventsPanel.js
@@ -115,7 +115,9 @@ module.exports = React.createClass({
        return (
            <div className="mx_PinnedEventsPanel">
                <div className="mx_PinnedEventsPanel_body">
-                    <AccessibleButton className="mx_PinnedEventsPanel_cancel" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" /></AccessibleButton>
+                    <AccessibleButton className="mx_PinnedEventsPanel_cancel" onClick={this.props.onCancelClick}>
+                        <img className="mx_filterFlipColor" src="img/cancel.svg" width="18" height="18" />
+                    </AccessibleButton>
                    <h3 className="mx_PinnedEventsPanel_header">{ _t("Pinned Messages") }</h3>
                    { tiles }
                </div>
--- a/src/components/views/rooms/RoomDetailList.js
+++ b/src/components/views/rooms/RoomDetailList.js
@@ -0,0 +1,145 @@
+/*
+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 dis from '../../../dispatcher';
+import React from 'react';
+import { _t } from '../../../languageHandler';
+import linkifyString from 'linkifyjs/string';
+import sanitizeHtml from 'sanitize-html';
+import { ContentRepo } from 'matrix-js-sdk';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import PropTypes from 'prop-types';
+
+function getDisplayAliasForRoom(room) {
+    return room.canonicalAlias || (room.aliases ? room.aliases[0] : "");
+}
+
+const RoomDetailRow = React.createClass({
+    propTypes: {
+        room: PropTypes.shape({
+            name: PropTypes.string,
+            topic: PropTypes.string,
+            roomId: PropTypes.string,
+            avatarUrl: PropTypes.string,
+            numJoinedMembers: PropTypes.number,
+            canonicalAlias: PropTypes.string,
+            aliases: PropTypes.arrayOf(PropTypes.string),
+
+            worldReadable: PropTypes.bool,
+            guestCanJoin: PropTypes.bool,
+        }),
+    },
+
+    onClick: function(ev) {
+        ev.preventDefault();
+        dis.dispatch({
+            action: 'view_room',
+            room_id: this.props.room.roomId,
+            room_alias: this.props.room.canonicalAlias || (this.props.room.aliases || [])[0],
+        });
+    },
+
+    onTopicClick: function(ev) {
+        // When clicking a link in the topic, prevent the event being propagated
+        // to `onClick`.
+        ev.stopPropagation();
+    },
+
+    render: function() {
+        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+
+        const room = this.props.room;
+        const name = room.name || getDisplayAliasForRoom(room) || _t('Unnamed room');
+        const topic = linkifyString(sanitizeHtml(room.topic || ''));
+
+        const guestRead = room.worldReadable ? (
+                <div className="mx_RoomDirectory_perm">{ _t('World readable') }</div>
+            ) : <div />;
+        const guestJoin = room.guestCanJoin ? (
+                <div className="mx_RoomDirectory_perm">{ _t('Guests can join') }</div>
+            ) : <div />;
+
+        const perms = (guestRead || guestJoin) ? (<div className="mx_RoomDirectory_perms">
+            { guestRead }
+            { guestJoin }
+        </div>) : <div />;
+
+        return <tr key={room.roomId} onClick={this.onClick}>
+            <td className="mx_RoomDirectory_roomAvatar">
+                <BaseAvatar width={24} height={24} resizeMethod='crop'
+                    name={name} idName={name}
+                    url={ContentRepo.getHttpUriForMxc(
+                            MatrixClientPeg.get().getHomeserverUrl(),
+                            room.avatarUrl, 24, 24, "crop")} />
+            </td>
+            <td className="mx_RoomDirectory_roomDescription">
+                <div className="mx_RoomDirectory_name">{ name }</div>&nbsp;
+                { perms }
+                <div className="mx_RoomDirectory_topic"
+                     onClick={this.onTopicClick}
+                     dangerouslySetInnerHTML={{ __html: topic }} />
+                <div className="mx_RoomDirectory_alias">{ getDisplayAliasForRoom(room) }</div>
+            </td>
+            <td className="mx_RoomDirectory_roomMemberCount">
+                { room.numJoinedMembers }
+            </td>
+        </tr>;
+    },
+});
+
+export default React.createClass({
+    displayName: 'RoomDetailList',
+
+    propTypes: {
+        rooms: PropTypes.arrayOf(PropTypes.shape({
+            name: PropTypes.string,
+            topic: PropTypes.string,
+            roomId: PropTypes.string,
+            avatarUrl: PropTypes.string,
+            numJoinedMembers: PropTypes.number,
+            canonicalAlias: PropTypes.string,
+            aliases: PropTypes.arrayOf(PropTypes.string),
+
+            worldReadable: PropTypes.bool,
+            guestCanJoin: PropTypes.bool,
+        })),
+    },
+
+    getRows: function() {
+        if (!this.props.rooms) return [];
+        return this.props.rooms.map((room, index) => {
+            return <RoomDetailRow key={index} room={room} />;
+        });
+    },
+
+    render() {
+        const rows = this.getRows();
+        let rooms;
+        if (rows.length == 0) {
+            rooms = <i>{ _t('No rooms to show') }</i>;
+        } else {
+            rooms = <table ref="directory_table" className="mx_RoomDirectory_table">
+                <tbody>
+                    { this.getRows() }
+                </tbody>
+            </table>;
+        }
+        return <div className="mx_RoomDetailList">
+            { rooms }
+        </div>;
+    },
+});
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -309,8 +309,11 @@ module.exports = React.createClass({
                        <input id="avatarInput" type="file" onChange={this.onAvatarSelected} />
                    </div>
                    <div className="mx_RoomHeader_avatarPicker_remove" onClick={this.onAvatarRemoveClick}>
-                        <img src="img/cancel.svg" width="10"
-                             alt={_t("Remove avatar")} title={_t("Remove avatar")} />
+                        <img src="img/cancel.svg"
+                            className="mx_filterFlipColor"
+                            width="10"
+                            alt={_t("Remove avatar")}
+                            title={_t("Remove avatar")} />
                    </div>
                </div>
            );
--- a/src/components/views/rooms/RoomList.js
+++ b/src/components/views/rooms/RoomList.js
@@ -34,27 +34,18 @@ const Receipt = require('../../../utils/Receipt');
 const HIDE_CONFERENCE_CHANS = true;

 function phraseForSection(section) {
-    // These would probably be better as individual strings,
-    // but for some reason we have translations for these strings
-    // as-is, so keeping it like this for now.
-    let verb;
    switch (section) {
        case 'm.favourite':
-            verb = _t('to favourite');
-            break;
+            return _t('Drop here to favourite');
        case 'im.vector.fake.direct':
-            verb = _t('to tag direct chat');
-            break;
+            return _t('Drop here to tag direct chat');
        case 'im.vector.fake.recent':
-            verb = _t('to restore');
-            break;
+            return _t('Drop here to restore');
        case 'm.lowpriority':
-            verb = _t('to demote');
-            break;
+            return _t('Drop here to demote');
        default:
            return _t('Drop here to tag %(section)s', {section: section});
    }
-    return _t('Drop here %(toAction)s', {toAction: verb});
 }

 module.exports = React.createClass({
@@ -564,13 +555,23 @@ module.exports = React.createClass({
    render: function() {
        const RoomSubList = sdk.getComponent('structures.RoomSubList');

-        const inviteSectionExtraTiles = this._makeGroupInviteTiles();
-
        const self = this;
        return (
            <GeminiScrollbar className="mx_RoomList_scrollbar"
                 autoshow={true} onScroll={self._whenScrolling} ref="gemscroll">
            <div className="mx_RoomList">
+                <RoomSubList list={[]}
+                             extraTiles={this._makeGroupInviteTiles()}
+                             label={_t('Community Invites')}
+                             editable={false}
+                             order="recent"
+                             isInvite={true}
+                             collapsed={self.props.collapsed}
+                             searchFilter={self.props.searchFilter}
+                             onHeaderClick={self.onSubListHeaderClick}
+                             onShowMoreRooms={self.onShowMoreRooms}
+                />
+
                <RoomSubList list={self.state.lists['im.vector.fake.invite']}
                             label={_t('Invites')}
                             editable={false}
@@ -582,7 +583,6 @@ module.exports = React.createClass({
                             searchFilter={self.props.searchFilter}
                             onHeaderClick={self.onSubListHeaderClick}
                             onShowMoreRooms={self.onShowMoreRooms}
-                             extraTiles={inviteSectionExtraTiles}
                />

                <RoomSubList list={self.state.lists['m.favourite']}
--- a/src/components/views/rooms/RoomPreviewBar.js
+++ b/src/components/views/rooms/RoomPreviewBar.js
@@ -83,10 +83,8 @@ module.exports = React.createClass({
        }
    },

-    _roomNameElement: function(fallback) {
-        fallback = fallback || _t('a room');
-        const name = this.props.room ? this.props.room.name : (this.props.room_alias || "");
-        return name ? name : fallback;
+    _roomNameElement: function() {
+        return this.props.room ? this.props.room.name : (this.props.room_alias || "");
    },

    render: function() {
@@ -150,7 +148,7 @@ module.exports = React.createClass({
                </div>
            );
        } else if (kicked || banned) {
-            const roomName = this._roomNameElement(_t('This room'));
+            const roomName = this._roomNameElement();
            const kickerMember = this.props.room.currentState.getMember(
                myMember.events.member.getSender(),
            );
@@ -167,9 +165,17 @@ module.exports = React.createClass({

            let actionText;
            if (kicked) {
-                actionText = _t("You have been kicked from %(roomName)s by %(userName)s.", {roomName: roomName, userName: kickerName});
+                if(roomName) {
+                    actionText = _t("You have been kicked from %(roomName)s by %(userName)s.", {roomName: roomName, userName: kickerName});
+                } else {
+                    actionText = _t("You have been kicked from this room by %(userName)s.", {userName: kickerName});
+                }
            } else if (banned) {
-                actionText = _t("You have been banned from %(roomName)s by %(userName)s.", {roomName: roomName, userName: kickerName});
+                if(roomName) {
+                    actionText = _t("You have been banned from %(roomName)s by %(userName)s.", {roomName: roomName, userName: kickerName});
+                } else {
+                    actionText = _t("You have been banned from this room by %(userName)s.", {userName: kickerName});
+                }
            } // no other options possible due to the kicked || banned check above.

            joinBlock = (
@@ -203,7 +209,7 @@ module.exports = React.createClass({
            joinBlock = (
                <div>
                    <div className="mx_RoomPreviewBar_join_text">
-                        { _t('You are trying to access %(roomName)s.', {roomName: name}) }
+                        { name ? _t('You are trying to access %(roomName)s.', {roomName: name}) : _t('You are trying to access a room.') }
                        <br />
                        { _tJsx("<a>Click here</a> to join the discussion!",
                            /<a>(.*?)<\/a>/,
--- a/src/components/views/rooms/RoomSettings.js
+++ b/src/components/views/rooms/RoomSettings.js
@@ -19,7 +19,6 @@ import Promise from 'bluebird';
 import React from 'react';
 import { _t, _tJsx, _td } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
-import SdkConfig from '../../../SdkConfig';
 import sdk from '../../../index';
 import Modal from '../../../Modal';
 import ObjectUtils from '../../../ObjectUtils';
@@ -72,6 +71,7 @@ const BannedUser = React.createClass({
        Modal.createTrackedDialog('Confirm User Action Dialog', 'onUnbanClick', ConfirmUserActionDialog, {
            member: this.props.member,
            action: _t('Unban'),
+            title: _t('Unban this user?'),
            danger: false,
            onFinished: (proceed) => {
                if (!proceed) return;
@@ -158,9 +158,9 @@ module.exports = React.createClass({
        });

        dis.dispatch({
-            action: 'ui_opacity',
-            sideOpacity: 0.3,
-            middleOpacity: 0.3,
+            action: 'panel_disable',
+            sideDisabled: true,
+            middleDisabled: true,
        });
    },

@@ -171,9 +171,9 @@ module.exports = React.createClass({
        }

        dis.dispatch({
-            action: 'ui_opacity',
-            sideOpacity: 1.0,
-            middleOpacity: 1.0,
+            action: 'panel_disable',
+            sideDisabled: false,
+            middleDisabled: false,
        });
    },

@@ -867,21 +867,21 @@ module.exports = React.createClass({
                                    disabled={!roomState.mayClientSendStateEvent("m.room.history_visibility", cli)}
                                    checked={historyVisibility === "shared"}
                                    onChange={this._onHistoryRadioToggle} />
-                            { _t('Members only') } ({ _t('since the point in time of selecting this option') })
+                            { _t('Members only (since the point in time of selecting this option)') }
                        </label>
                        <label>
                            <input type="radio" name="historyVis" value="invited"
                                    disabled={!roomState.mayClientSendStateEvent("m.room.history_visibility", cli)}
                                    checked={historyVisibility === "invited"}
                                    onChange={this._onHistoryRadioToggle} />
-                            { _t('Members only') } ({ _t('since they were invited') })
+                            { _t('Members only (since they were invited)') }
                        </label>
                        <label >
                            <input type="radio" name="historyVis" value="joined"
                                    disabled={!roomState.mayClientSendStateEvent("m.room.history_visibility", cli)}
                                    checked={historyVisibility === "joined"}
                                    onChange={this._onHistoryRadioToggle} />
-                            { _t('Members only') } ({ _t('since they joined') })
+                            { _t('Members only (since they joined)') }
                        </label>
                    </div>
                </div>
--- a/src/components/views/settings/ChangePassword.js
+++ b/src/components/views/settings/ChangePassword.js
@@ -184,7 +184,8 @@ module.exports = React.createClass({
        });
    },

-    onClickChange: function() {
+    onClickChange: function(ev) {
+        ev.preventDefault();
        const oldPassword = this.state.cachedPassword || this.refs.old_input.value;
        const newPassword = this.refs.new_input.value;
        const confirmPassword = this.refs.confirm_input.value;
--- a/src/components/views/voip/VideoView.js
+++ b/src/components/views/voip/VideoView.js
@@ -18,10 +18,13 @@ limitations under the License.

 import React from 'react';
 import ReactDOM from 'react-dom';
+import classNames from 'classnames';

 import sdk from '../../../index';
 import dis from '../../../dispatcher';

+import UserSettingsStore from '../../../UserSettingsStore';
+
 module.exports = React.createClass({
    displayName: 'VideoView',

@@ -108,14 +111,18 @@ module.exports = React.createClass({
                 document.mozFullScreenElement ||
                 document.webkitFullscreenElement);
        const maxVideoHeight = fullscreenElement ? null : this.props.maxHeight;
-
+        const localVideoFeedClasses = classNames("mx_VideoView_localVideoFeed",
+            { "mx_VideoView_localVideoFeed_flipped":
+                UserSettingsStore.getSyncedSetting('VideoView.flipVideoHorizontally', false),
+            },
+        );
        return (
            <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">
+                <div className={localVideoFeedClasses}>
                    <VideoFeed ref="local" />
                </div>
            </div>