Merge remote-tracking branch 'origin/experimental' into travis/fix-memberlist-order

src/components/views/avatars/MemberStatusMessageAvatar.js

@@ -0,0 +1,120 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import AccessibleButton from '../elements/AccessibleButton';
+import MemberAvatar from '../avatars/MemberAvatar';
+import classNames from 'classnames';
+import * as ContextualMenu from "../../structures/ContextualMenu";
+import StatusMessageContextMenu from "../context_menus/StatusMessageContextMenu";
+import SettingsStore from "../../../settings/SettingsStore";
+
+export default class MemberStatusMessageAvatar extends React.Component {
+    static propTypes = {
+        member: PropTypes.object.isRequired,
+        width: PropTypes.number,
+        height: PropTypes.number,
+        resizeMethod: PropTypes.string,
+    };
+
+    static defaultProps = {
+        width: 40,
+        height: 40,
+        resizeMethod: 'crop',
+    };
+
+    constructor(props, context) {
+        super(props, context);
+    }
+
+    componentWillMount() {
+        if (this.props.member.userId !== MatrixClientPeg.get().getUserId()) {
+            throw new Error("Cannot use MemberStatusMessageAvatar on anyone but the logged in user");
+        }
+    }
+
+    componentDidMount() {
+        MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents);
+
+        if (this.props.member.user) {
+            this.setState({message: this.props.member.user._unstable_statusMessage});
+        } else {
+            this.setState({message: ""});
+        }
+    }
+
+    componentWillUnmount() {
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener("RoomState.events", this._onRoomStateEvents);
+        }
+    }
+
+    _onRoomStateEvents = (ev, state) => {
+        if (ev.getStateKey() !== MatrixClientPeg.get().getUserId()) return;
+        if (ev.getType() !== "im.vector.user_status") return;
+        // TODO: We should be relying on `this.props.member.user._unstable_statusMessage`
+        // We don't currently because the js-sdk doesn't emit a specific event for this
+        // change, and we don't want to race it. This should be improved when we rip out
+        // the im.vector.user_status stuff and replace it with a complete solution.
+        this.setState({message: ev.getContent()["status"]});
+    };
+
+    _onClick = (e) => {
+        e.stopPropagation();
+
+        const elementRect = e.target.getBoundingClientRect();
+
+        // The window X and Y offsets are to adjust position when zoomed in to page
+        const x = (elementRect.left + window.pageXOffset) - (elementRect.width / 2) + 3;
+        const chevronOffset = 12;
+        let y = elementRect.top + (elementRect.height / 2) + window.pageYOffset;
+        y = y - (chevronOffset + 4); // where 4 is 1/4 the height of the chevron
+
+        ContextualMenu.createMenu(StatusMessageContextMenu, {
+            chevronOffset: chevronOffset,
+            chevronFace: 'bottom',
+            left: x,
+            top: y,
+            menuWidth: 190,
+            user: this.props.member.user,
+        });
+    };
+
+    render() {
+        if (!SettingsStore.isFeatureEnabled("feature_custom_status")) {
+            return <MemberAvatar member={this.props.member}
+                                 width={this.props.width}
+                                 height={this.props.height}
+                                 resizeMethod={this.props.resizeMethod} />;
+        }
+
+        const hasStatus = this.props.member.user ? !!this.props.member.user._unstable_statusMessage : false;
+
+        const classes = classNames({
+            "mx_MemberStatusMessageAvatar": true,
+            "mx_MemberStatusMessageAvatar_hasStatus": hasStatus,
+        });
+
+        return <AccessibleButton onClick={this._onClick} className={classes} element="div">
+            <MemberAvatar member={this.props.member}
+                          width={this.props.width}
+                          height={this.props.height}
+                          resizeMethod={this.props.resizeMethod} />
+        </AccessibleButton>;
+    }
+}

src/components/views/context_menus/StatusMessageContextMenu.js

@@ -0,0 +1,86 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { _t } from '../../../languageHandler';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import AccessibleButton from '../elements/AccessibleButton';
+import classNames from 'classnames';
+
+export default class StatusMessageContextMenu extends React.Component {
+    static propTypes = {
+        // js-sdk User object. Not required because it might not exist.
+        user: PropTypes.object,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {
+            message: props.user ? props.user._unstable_statusMessage : "",
+        };
+    }
+
+    _onClearClick = async(e) => {
+        await MatrixClientPeg.get()._unstable_setStatusMessage("");
+        this.setState({message: ""});
+    };
+
+    _onSubmit = (e) => {
+        e.preventDefault();
+        MatrixClientPeg.get()._unstable_setStatusMessage(this.state.message);
+    };
+
+    _onStatusChange = (e) => {
+        this.setState({message: e.target.value});
+    };
+
+    render() {
+        const formSubmitClasses = classNames({
+            "mx_StatusMessageContextMenu_submit": true,
+            "mx_StatusMessageContextMenu_submitFaded": !this.state.message, // no message == faded
+        });
+
+        const form = <form className="mx_StatusMessageContextMenu_form" onSubmit={this._onSubmit} autoComplete="off">
+            <input type="text" key="message" placeholder={_t("Set a new status...")} autoFocus={true}
+                   className="mx_StatusMessageContextMenu_message"
+                   value={this.state.message} onChange={this._onStatusChange} maxLength="60" />
+            <AccessibleButton onClick={this._onSubmit} element="div" className={formSubmitClasses}>
+                <img src="img/icons-checkmark.svg" width="22" height="22" />
+            </AccessibleButton>
+        </form>;
+
+        const clearIcon = this.state.message ? "img/cancel-red.svg" : "img/cancel.svg";
+        const clearButton = <AccessibleButton onClick={this._onClearClick} disabled={!this.state.message}
+                                              className="mx_StatusMessageContextMenu_clear">
+            <img src={clearIcon} alt={_t('Clear status')} width="12" height="12"
+                 className="mx_filterFlipColor mx_StatusMessageContextMenu_clearIcon" />
+            <span>{_t("Clear status")}</span>
+        </AccessibleButton>;
+
+        const menuClasses = classNames({
+            "mx_StatusMessageContextMenu": true,
+            "mx_StatusMessageContextMenu_hasStatus": this.state.message,
+        });
+
+        return <div className={menuClasses}>
+            { form }
+            <hr />
+            { clearButton }
+        </div>;
+    }
+}

src/components/views/dialogs/ChangelogDialog.js

@@ -36,8 +36,12 @@ export default class ChangelogDialog extends React.Component {
         for (let i=0; i<REPOS.length; i++) {
             const oldVersion = version2[2*i];
             const newVersion = version[2*i];
-            request(`https://api.github.com/repos/${REPOS[i]}/compare/${oldVersion}...${newVersion}`, (a, b, body) => {
-                if (body == null) return;
+            const url = `https://api.github.com/repos/${REPOS[i]}/compare/${oldVersion}...${newVersion}`;
+            request(url, (err, response, body) => {
+                if (response.statusCode < 200 || response.statusCode >= 300) {
+                    this.setState({ [REPOS[i]]: response.statusText });
+                    return;
+                }
                 this.setState({[REPOS[i]]: JSON.parse(body).commits});
             });
         }
@@ -58,13 +62,20 @@ export default class ChangelogDialog extends React.Component {
         const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
 
         const logs = REPOS.map(repo => {
-            if (this.state[repo] == null) return <Spinner key={repo} />;
+            let content;
+            if (this.state[repo] == null) {
+                content = <Spinner key={repo} />;
+            } else if (typeof this.state[repo] === "string") {
+                content = _t("Unable to load commit detail: %(msg)s", {
+                    msg: this.state[repo],
+                });
+            } else {
+                content = this.state[repo].map(this._elementsForCommit);
+            }
             return (
                 <div key={repo}>
                     <h2>{repo}</h2>
-                    <ul>
-                    {this.state[repo].map(this._elementsForCommit)}
-                    </ul>
+                    <ul>{content}</ul>
                 </div>
             );
         });

src/components/views/elements/TintableSvg.js

@@ -29,7 +29,6 @@ var TintableSvg = React.createClass({
         width: PropTypes.string.isRequired,
         height: PropTypes.string.isRequired,
         className: PropTypes.string,
-        forceColors: PropTypes.arrayOf(PropTypes.string),
     },
 
     statics: {
@@ -51,12 +50,6 @@ var TintableSvg = React.createClass({
         delete TintableSvg.mounts[this.id];
     },
 
-    componentDidUpdate: function(prevProps, prevState) {
-        if (prevProps.forceColors !== this.props.forceColors) {
-            this.calcAndApplyFixups(this.refs.svgContainer);
-        }
-    },
-
     tint: function() {
         // TODO: only bother running this if the global tint settings have changed
         // since we loaded!
@@ -64,13 +57,8 @@ var TintableSvg = React.createClass({
     },
 
     onLoad: function(event) {
-        this.calcAndApplyFixups(event.target);
-    },
-
-    calcAndApplyFixups: function(target) {
-        if (!target) return;
-        // console.log("TintableSvg.calcAndApplyFixups for " + this.props.src);
-        this.fixups = Tinter.calcSvgFixups([target], this.props.forceColors);
+        // console.log("TintableSvg.onLoad for " + this.props.src);
+        this.fixups = Tinter.calcSvgFixups([event.target]);
         Tinter.applySvgFixups(this.fixups);
     },
 
@@ -83,7 +71,6 @@ var TintableSvg = React.createClass({
                     height={this.props.height}
                     onLoad={this.onLoad}
                     tabIndex="-1"
-                    ref="svgContainer"
                 />
         );
     },

src/components/views/messages/SenderProfile.js

@@ -85,8 +85,8 @@ export default React.createClass({
     _getDisplayedGroups(userGroups, relatedGroups) {
         let displayedGroups = userGroups || [];
         if (relatedGroups && relatedGroups.length > 0) {
-            displayedGroups = displayedGroups.filter((groupId) => {
-                return relatedGroups.includes(groupId);
+            displayedGroups = relatedGroups.filter((groupId) => {
+                return displayedGroups.includes(groupId);
             });
         } else {
             displayedGroups = [];

src/components/views/rooms/EntityTile.js

@@ -70,6 +70,7 @@ const EntityTile = React.createClass({
         onClick: PropTypes.func,
         suppressOnHover: PropTypes.bool,
         showPresence: PropTypes.bool,
+        subtextLabel: PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -129,6 +130,9 @@ const EntityTile = React.createClass({
                     presenceState={this.props.presenceState} />;
                 nameClasses += ' mx_EntityTile_name_hover';
             }
+            if (this.props.subtextLabel) {
+                presenceLabel = <span className="mx_EntityTile_subtext">{this.props.subtextLabel}</span>;
+            }
             nameEl = (
                 <div className="mx_EntityTile_details">
                     <EmojiText element="div" className={nameClasses} dir="auto">
@@ -137,6 +141,15 @@ const EntityTile = React.createClass({
                     {presenceLabel}
                 </div>
             );
+        } else if (this.props.subtextLabel) {
+            nameEl = (
+                <div className="mx_EntityTile_details">
+                    <EmojiText element="div" className="mx_EntityTile_name" dir="auto">
+                        {name}
+                    </EmojiText>
+                    <span className="mx_EntityTile_subtext">{this.props.subtextLabel}</span>
+                </div>
+            );
         } else {
             nameEl = (
                 <EmojiText element="div" className="mx_EntityTile_name" dir="auto">{ name }</EmojiText>

src/components/views/rooms/MemberInfo.js

@@ -42,6 +42,7 @@ import AccessibleButton from '../elements/AccessibleButton';
 import RoomViewStore from '../../../stores/RoomViewStore';
 import SdkConfig from '../../../SdkConfig';
 import MultiInviter from "../../../utils/MultiInviter";
+import SettingsStore from "../../../settings/SettingsStore";
 
 module.exports = withMatrixClient(React.createClass({
     displayName: 'MemberInfo',
@@ -889,11 +890,16 @@ module.exports = withMatrixClient(React.createClass({
         let presenceState;
         let presenceLastActiveAgo;
         let presenceCurrentlyActive;
+        let statusMessage;
 
         if (this.props.member.user) {
             presenceState = this.props.member.user.presence;
             presenceLastActiveAgo = this.props.member.user.lastActiveAgo;
             presenceCurrentlyActive = this.props.member.user.currentlyActive;
+
+            if (SettingsStore.isFeatureEnabled("feature_custom_status")) {
+                statusMessage = this.props.member.user._unstable_statusMessage;
+            }
         }
 
         const room = this.props.matrixClient.getRoom(this.props.member.roomId);
@@ -915,6 +921,11 @@ module.exports = withMatrixClient(React.createClass({
                 presenceState={presenceState} />;
         }
 
+        let statusLabel = null;
+        if (statusMessage) {
+            statusLabel = <span className="mx_MemberInfo_statusMessage">{ statusMessage }</span>;
+        }
+
         let roomMemberDetails = null;
         if (this.props.member.roomId) { // is in room
             const PowerSelector = sdk.getComponent('elements.PowerSelector');
@@ -931,6 +942,7 @@ module.exports = withMatrixClient(React.createClass({
                 </div>
                 <div className="mx_MemberInfo_profileField">
                     {presenceLabel}
+                    {statusLabel}
                 </div>
             </div>;
         }

src/components/views/rooms/MemberTile.js

@@ -16,6 +16,8 @@ limitations under the License.
 
 'use strict';
 
+import SettingsStore from "../../../settings/SettingsStore";
+
 const React = require('react');
 import PropTypes from 'prop-types';
 
@@ -85,6 +87,11 @@ module.exports = React.createClass({
         const active = -1;
         const presenceState = member.user ? member.user.presence : null;
 
+        let statusMessage = null;
+        if (member.user && SettingsStore.isFeatureEnabled("feature_custom_status")) {
+            statusMessage = member.user._unstable_statusMessage;
+        }
+
         const av = (
             <MemberAvatar member={member} width={36} height={36} />
         );
@@ -106,7 +113,9 @@ module.exports = React.createClass({
                 presenceLastTs={member.user ? member.user.lastPresenceTs : 0}
                 presenceCurrentlyActive={member.user ? member.user.currentlyActive : false}
                 avatarJsx={av} title={this.getPowerLabel()} onClick={this.onClick}
-                name={name} powerStatus={powerStatus} showPresence={this.props.showPresence} />
+                name={name} powerStatus={powerStatus} showPresence={this.props.showPresence}
+                subtextLabel={statusMessage}
+            />
         );
     },
 });

src/components/views/rooms/MessageComposer.js

@@ -291,7 +291,7 @@ export default class MessageComposer extends React.Component {
 
     render() {
         const uploadInputStyle = {display: 'none'};
-        const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+        const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const MessageComposerInput = sdk.getComponent("rooms.MessageComposerInput");
 
@@ -300,7 +300,7 @@ export default class MessageComposer extends React.Component {
         if (this.state.me) {
             controls.push(
                 <div key="controls_avatar" className="mx_MessageComposer_avatar">
-                    <MemberAvatar member={this.state.me} width={24} height={24} />
+                    <MemberStatusMessageAvatar member={this.state.me} width={24} height={24} />
                 </div>,
             );
         }
@@ -349,6 +349,34 @@ export default class MessageComposer extends React.Component {
         const canSendMessages = !this.state.tombstone &&
             this.props.room.maySendMessage();
 
+        // TODO: Remove temporary logging for riot-web#7838
+        // Note: we rip apart the power level event ourselves because we don't want to
+        // log too much data about it - just the bits we care about. Many of the variables
+        // logged here are to help figure out where in the stack the 'cannot post in room'
+        // warning is coming from. This means logging various numbers from the PL event to
+        // verify RoomState._maySendEventOfType is doing the right thing.
+        const room = this.props.room;
+        const plEvent = room.currentState.getStateEvents('m.room.power_levels', '');
+        let plEventString = "<no power level event>";
+        if (plEvent) {
+            const content = plEvent.getContent();
+            if (!content) {
+                plEventString = "<no event content>";
+            } else {
+                const stringifyFalsey = (v) => v === null ? '<null>' : (v === undefined ? '<undefined>' : v);
+                const actualUserPl = stringifyFalsey(content.users ? content.users[room.myUserId] : "<no users in content>");
+                const usersPl = stringifyFalsey(content.users_default);
+                const actualEventPl = stringifyFalsey(content.events ? content.events['m.room.message'] : "<no events in content>");
+                const eventPl = stringifyFalsey(content.events_default);
+                plEventString = `actualUserPl=${actualUserPl} defaultUserPl=${usersPl} actualEventPl=${actualEventPl} defaultEventPl=${eventPl}`;
+            }
+        }
+        console.log(
+            `[riot-web#7838] renderComposer() hasTombstone=${!!this.state.tombstone} maySendMessage=${room.maySendMessage()}` +
+            ` myMembership=${room.getMyMembership()} maySendEvent=${room.currentState.maySendEvent('m.room.message', room.myUserId)}` +
+            ` myUserId=${room.myUserId} roomId=${room.roomId} hasPlEvent=${!!plEvent} powerLevels='${plEventString}'`
+        );
+
         if (canSendMessages) {
             // This also currently includes the call buttons. Really we should
             // check separately for whether we can call, but this is slightly
@@ -425,6 +453,8 @@ export default class MessageComposer extends React.Component {
                 </div>
             </div>);
         } else {
+            // TODO: Remove temporary logging for riot-web#7838
+            console.log("[riot-web#7838] Falling back to showing cannot post in room error");
             controls.push(
                 <div key="controls_error" className="mx_MessageComposer_noperm_error">
                     { _t('You do not have permission to post to this room') }

src/components/views/rooms/RoomList.js

@@ -86,6 +86,7 @@ module.exports = React.createClass({
             incomingCallTag: null,
             incomingCall: null,
             selectedTags: [],
+            hover: false,
         };
     },
 
@@ -294,6 +295,17 @@ module.exports = React.createClass({
         this.forceUpdate();
     },
 
+    onMouseEnter: function(ev) {
+        this.setState({hover: true});
+    },
+
+    onMouseLeave: function(ev) {
+        this.setState({hover: false});
+
+        // Refresh the room list just in case the user missed something.
+        this._delayedRefreshRoomList();
+    },
+
     _delayedRefreshRoomList: new rate_limited_func(function() {
         this.refreshRoomList();
     }, 500),
@@ -346,6 +358,11 @@ module.exports = React.createClass({
     },
 
     refreshRoomList: function() {
+        if (this.state.hover) {
+            // Don't re-sort the list if we're hovering over the list
+            return;
+        }
+
         // TODO: ideally we'd calculate this once at start, and then maintain
         // any changes to it incrementally, updating the appropriate sublists
         // as needed.
@@ -693,9 +710,10 @@ module.exports = React.createClass({
         const subListComponents = this._mapSubListProps(subLists);
 
         return (
-            <div ref={this._collectResizeContainer} className="mx_RoomList">
+            <div ref={this._collectResizeContainer} className="mx_RoomList"
+                 onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
                 { subListComponents }
             </div>
         );
     },
-});
+});

src/components/views/rooms/RoomRecoveryReminder.js

@@ -19,13 +19,76 @@ import PropTypes from "prop-types";
 import sdk from "../../../index";
 import { _t } from "../../../languageHandler";
 import Modal from "../../../Modal";
+import MatrixClientPeg from "../../../MatrixClientPeg";
 
 export default class RoomRecoveryReminder extends React.PureComponent {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,
     }
 
-    showKeyBackupDialog = () => {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            loading: true,
+            error: null,
+            unverifiedDevice: null,
+        };
+    }
+
+    componentWillMount() {
+        this._loadBackupStatus();
+    }
+
+    async _loadBackupStatus() {
+        let backupSigStatus;
+        try {
+            const backupInfo = await MatrixClientPeg.get().getKeyBackupVersion();
+            backupSigStatus = await MatrixClientPeg.get().isKeyBackupTrusted(backupInfo);
+        } catch (e) {
+            console.log("Unable to fetch key backup status", e);
+            this.setState({
+                loading: false,
+                error: e,
+            });
+            return;
+        }
+
+        let unverifiedDevice;
+        for (const sig of backupSigStatus.sigs) {
+            if (!sig.device.isVerified()) {
+                unverifiedDevice = sig.device;
+                break;
+            }
+        }
+        this.setState({
+            loading: false,
+            unverifiedDevice,
+        });
+    }
+
+    showSetupDialog = () => {
+        if (this.state.unverifiedDevice) {
+            // A key backup exists for this account, but the creating device is not
+            // verified, so we'll show the device verify dialog.
+            // TODO: Should change to a restore key backup flow that checks the recovery
+            // passphrase while at the same time also cross-signing the device as well in
+            // a single flow (for cases where a key backup exists but the backup creating
+            // device is unverified).  Since we don't have that yet, we'll look for an
+            // unverified device and verify it.  Note that this means we won't restore
+            // keys yet; instead we'll only trust the backup for sending our own new keys
+            // to it.
+            const DeviceVerifyDialog = sdk.getComponent('views.dialogs.DeviceVerifyDialog');
+            Modal.createTrackedDialog('Device Verify Dialog', '', DeviceVerifyDialog, {
+                userId: MatrixClientPeg.get().credentials.userId,
+                device: this.state.unverifiedDevice,
+                onFinished: this.props.onFinished,
+            });
+            return;
+        }
+
+        // The default case assumes that a key backup doesn't exist for this account, so
+        // we'll show the create key backup flow.
         Modal.createTrackedDialogAsync("Key Backup", "Key Backup",
             import("../../../async-components/views/dialogs/keybackup/CreateKeyBackupDialog"),
             {
@@ -46,29 +109,51 @@ export default class RoomRecoveryReminder extends React.PureComponent {
                     this.props.onFinished(false);
                 },
                 onSetup: () => {
-                    this.showKeyBackupDialog();
+                    this.showSetupDialog();
                 },
             },
         );
     }
 
     onSetupClick = () => {
-        this.showKeyBackupDialog();
+        this.showSetupDialog();
     }
 
     render() {
+        if (this.state.loading) {
+            return null;
+        }
+
         const AccessibleButton = sdk.getComponent("views.elements.AccessibleButton");
 
+        let body;
+        if (this.state.error) {
+            body = <div className="error">
+                {_t("Unable to load key backup status")}
+            </div>;
+        } else if (this.state.unverifiedDevice) {
+            // A key backup exists for this account, but the creating device is not
+            // verified.
+            body = _t(
+                "To view your secure message history and ensure you can view new " +
+                "messages on future devices, set up Secure Message Recovery.",
+            );
+        } else {
+            // The default case assumes that a key backup doesn't exist for this account.
+            // (This component doesn't currently check that itself.)
+            body = _t(
+                "If you log out or use another device, you'll lose your " +
+                "secure message history. To prevent this, set up Secure " +
+                "Message Recovery.",
+            );
+        }
+
         return (
             <div className="mx_RoomRecoveryReminder">
                 <div className="mx_RoomRecoveryReminder_header">{_t(
                     "Secure Message Recovery",
                 )}</div>
-                <div className="mx_RoomRecoveryReminder_body">{_t(
-                    "If you log out or use another device, you'll lose your " +
-                    "secure message history. To prevent this, set up Secure " +
-                    "Message Recovery.",
-                )}</div>
+                <div className="mx_RoomRecoveryReminder_body">{body}</div>
                 <div className="mx_RoomRecoveryReminder_buttons">
                     <AccessibleButton className="mx_RoomRecoveryReminder_button mx_RoomRecoveryReminder_secondary"
                         onClick={this.onDontAskAgainClick}>

src/components/views/rooms/RoomTile.js

@@ -30,6 +30,7 @@ import * as FormattingUtils from '../../../utils/FormattingUtils';
 import AccessibleButton from '../elements/AccessibleButton';
 import ActiveRoomObserver from '../../../ActiveRoomObserver';
 import RoomViewStore from '../../../stores/RoomViewStore';
+import SettingsStore from "../../../settings/SettingsStore";
 
 module.exports = React.createClass({
     displayName: 'RoomTile',
@@ -251,6 +252,17 @@ module.exports = React.createClass({
         const mentionBadges = this.props.highlight && this._shouldShowMentionBadge();
         const badges = notifBadges || mentionBadges;
 
+        const isJoined = this.props.room.getMyMembership() === "join";
+        const looksLikeDm = this.props.room.getInvitedAndJoinedMemberCount() === 2;
+        let subtext = null;
+        if (!isInvite && isJoined && looksLikeDm && SettingsStore.isFeatureEnabled("feature_custom_status")) {
+            const selfId = MatrixClientPeg.get().getUserId();
+            const otherMember = this.props.room.currentState.getMembersExcept([selfId])[0];
+            if (otherMember && otherMember.user && otherMember.user._unstable_statusMessage) {
+                subtext = otherMember.user._unstable_statusMessage;
+            }
+        }
+
         const classes = classNames({
             'mx_RoomTile': true,
             'mx_RoomTile_selected': this.state.selected,
@@ -261,6 +273,7 @@ module.exports = React.createClass({
             'mx_RoomTile_menuDisplayed': this.state.menuDisplayed,
             'mx_RoomTile_noBadges': !badges,
             'mx_RoomTile_transparent': this.props.transparent,
+            'mx_RoomTile_hasSubtext': subtext && !this.props.collapsed,
         });
 
         const avatarClasses = classNames({
@@ -286,6 +299,7 @@ module.exports = React.createClass({
 
         const EmojiText = sdk.getComponent('elements.EmojiText');
         let label;
+        let subtextLabel;
         let tooltip;
         if (!this.props.collapsed) {
             const nameClasses = classNames({
@@ -294,6 +308,8 @@ module.exports = React.createClass({
                 'mx_RoomTile_badgeShown': badges || this.state.badgeHover || this.state.menuDisplayed,
             });
 
+            subtextLabel = subtext ? <span className="mx_RoomTile_subtext">{ subtext }</span> : null;
+
             if (this.state.selected) {
                 const nameSelected = <EmojiText>{ name }</EmojiText>;
 
@@ -337,9 +353,14 @@ module.exports = React.createClass({
                     { dmIndicator }
                 </div>
             </div>
-            { label }
-            { contextMenuButton }
-            { badge }
+            <div className="mx_RoomTile_nameContainer">
+                <div className="mx_RoomTile_labelContainer">
+                    { label }
+                    { subtextLabel }
+                </div>
+                { contextMenuButton }
+                { badge }
+            </div>
             { /* { incomingCallBox } */ }
             { tooltip }
         </AccessibleButton>;