Merge branch 'develop' into export-conversations

src/components/views/rooms/AppsDrawer.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Resizable } from "re-resizable";
 
@@ -26,8 +25,6 @@ import * as sdk from '../../../index';
 import * as ScalarMessaging from '../../../ScalarMessaging';
 import WidgetUtils from '../../../utils/WidgetUtils';
 import WidgetEchoStore from "../../../stores/WidgetEchoStore";
-import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
-import SettingsStore from "../../../settings/SettingsStore";
 import ResizeNotifier from "../../../utils/ResizeNotifier";
 import ResizeHandle from "../elements/ResizeHandle";
 import Resizer from "../../../resizer/resizer";
@@ -37,60 +34,74 @@ import { clamp, percentageOf, percentageWithin } from "../../../utils/numbers";
 import { useStateCallback } from "../../../hooks/useStateCallback";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import UIStore from "../../../stores/UIStore";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { IApp } from "../../../stores/WidgetStore";
+import { ActionPayload } from "../../../dispatcher/payloads";
+
+interface IProps {
+    userId: string;
+    room: Room;
+    resizeNotifier: ResizeNotifier;
+    showApps?: boolean; // Should apps be rendered
+    maxHeight: number;
+}
+
+interface IState {
+    apps: IApp[];
+    resizingVertical: boolean; // true when changing the height of the apps drawer
+    resizingHorizontal: boolean; // true when chagning the distribution of the width between widgets
+    resizing: boolean;
+}
 
 @replaceableComponent("views.rooms.AppsDrawer")
-export default class AppsDrawer extends React.Component {
-    static propTypes = {
-        userId: PropTypes.string.isRequired,
-        room: PropTypes.object.isRequired,
-        resizeNotifier: PropTypes.instanceOf(ResizeNotifier).isRequired,
-        showApps: PropTypes.bool, // Should apps be rendered
-    };
-
-    static defaultProps = {
+export default class AppsDrawer extends React.Component<IProps, IState> {
+    private resizeContainer: HTMLDivElement;
+    private resizer: Resizer;
+    private dispatcherRef: string;
+    public static defaultProps: Partial<IProps> = {
         showApps: true,
     };
 
-    constructor(props) {
+    constructor(props: IProps) {
         super(props);
 
         this.state = {
-            apps: this._getApps(),
-            resizingVertical: false, // true when changing the height of the apps drawer
-            resizingHorizontal: false, // true when chagning the distribution of the width between widgets
+            apps: this.getApps(),
+            resizingVertical: false,
+            resizingHorizontal: false,
+            resizing: false,
         };
 
-        this._resizeContainer = null;
-        this.resizer = this._createResizer();
+        this.resizer = this.createResizer();
 
         this.props.resizeNotifier.on("isResizing", this.onIsResizing);
     }
 
-    componentDidMount() {
+    public componentDidMount(): void {
         ScalarMessaging.startListening();
-        WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(this.props.room), this._updateApps);
+        WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(this.props.room), this.updateApps);
         this.dispatcherRef = dis.register(this.onAction);
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount(): void {
         ScalarMessaging.stopListening();
-        WidgetLayoutStore.instance.off(WidgetLayoutStore.emissionForRoom(this.props.room), this._updateApps);
+        WidgetLayoutStore.instance.off(WidgetLayoutStore.emissionForRoom(this.props.room), this.updateApps);
         if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
-        if (this._resizeContainer) {
+        if (this.resizeContainer) {
             this.resizer.detach();
         }
         this.props.resizeNotifier.off("isResizing", this.onIsResizing);
     }
 
-    onIsResizing = (resizing) => {
+    private onIsResizing = (resizing: boolean): void => {
         // This one is the vertical, ie. change height of apps drawer
         this.setState({ resizingVertical: resizing });
         if (!resizing) {
-            this._relaxResizer();
+            this.relaxResizer();
         }
     };
 
-    _createResizer() {
+    private createResizer(): Resizer {
         // This is the horizontal one, changing the distribution of the width between the app tiles
         // (ie. a vertical resize handle because, the handle itself is vertical...)
         const classNames = {
@@ -100,11 +111,11 @@ export default class AppsDrawer extends React.Component {
         };
         const collapseConfig = {
             onResizeStart: () => {
-                this._resizeContainer.classList.add("mx_AppsDrawer_resizing");
+                this.resizeContainer.classList.add("mx_AppsDrawer_resizing");
                 this.setState({ resizingHorizontal: true });
             },
             onResizeStop: () => {
-                this._resizeContainer.classList.remove("mx_AppsDrawer_resizing");
+                this.resizeContainer.classList.remove("mx_AppsDrawer_resizing");
                 WidgetLayoutStore.instance.setResizerDistributions(
                     this.props.room, Container.Top,
                     this.state.apps.slice(1).map((_, i) => this.resizer.forHandleAt(i).size),
@@ -113,13 +124,13 @@ export default class AppsDrawer extends React.Component {
             },
         };
         // pass a truthy container for now, we won't call attach until we update it
-        const resizer = new Resizer({}, PercentageDistributor, collapseConfig);
+        const resizer = new Resizer(null, PercentageDistributor, collapseConfig);
         resizer.setClassNames(classNames);
         return resizer;
     }
 
-    _collectResizer = (ref) => {
-        if (this._resizeContainer) {
+    private collectResizer = (ref: HTMLDivElement): void => {
+        if (this.resizeContainer) {
             this.resizer.detach();
         }
 
@@ -127,22 +138,22 @@ export default class AppsDrawer extends React.Component {
             this.resizer.container = ref;
             this.resizer.attach();
         }
-        this._resizeContainer = ref;
-        this._loadResizerPreferences();
+        this.resizeContainer = ref;
+        this.loadResizerPreferences();
     };
 
-    _getAppsHash = (apps) => apps.map(app => app.id).join("~");
+    private getAppsHash = (apps: IApp[]): string => apps.map(app => app.id).join("~");
 
-    componentDidUpdate(prevProps, prevState) {
+    public componentDidUpdate(prevProps: IProps, prevState: IState): void {
         if (prevProps.userId !== this.props.userId || prevProps.room !== this.props.room) {
             // Room has changed, update apps
-            this._updateApps();
-        } else if (this._getAppsHash(this.state.apps) !== this._getAppsHash(prevState.apps)) {
-            this._loadResizerPreferences();
+            this.updateApps();
+        } else if (this.getAppsHash(this.state.apps) !== this.getAppsHash(prevState.apps)) {
+            this.loadResizerPreferences();
         }
     }
 
-    _relaxResizer = () => {
+    private relaxResizer = (): void => {
         const distributors = this.resizer.getDistributors();
 
         // relax all items if they had any overconstrained flexboxes
@@ -150,7 +161,7 @@ export default class AppsDrawer extends React.Component {
         distributors.forEach(d => d.finish());
     };
 
-    _loadResizerPreferences = () => {
+    private loadResizerPreferences = (): void => {
         const distributions = WidgetLayoutStore.instance.getResizerDistributions(this.props.room, Container.Top);
         if (this.state.apps && (this.state.apps.length - 1) === distributions.length) {
             distributions.forEach((size, i) => {
@@ -168,11 +179,11 @@ export default class AppsDrawer extends React.Component {
         }
     };
 
-    isResizing() {
+    private isResizing(): boolean {
         return this.state.resizingVertical || this.state.resizingHorizontal;
     }
 
-    onAction = (action) => {
+    private onAction = (action: ActionPayload): void => {
         const hideWidgetKey = this.props.room.roomId + '_hide_widget_drawer';
         switch (action.action) {
             case 'appsDrawer':
@@ -190,23 +201,15 @@ export default class AppsDrawer extends React.Component {
         }
     };
 
-    _getApps = () => WidgetLayoutStore.instance.getContainerWidgets(this.props.room, Container.Top);
+    private getApps = (): IApp[] => WidgetLayoutStore.instance.getContainerWidgets(this.props.room, Container.Top);
 
-    _updateApps = () => {
+    private updateApps = (): void => {
         this.setState({
-            apps: this._getApps(),
+            apps: this.getApps(),
         });
     };
 
-    _launchManageIntegrations() {
-        if (SettingsStore.getValue("feature_many_integration_managers")) {
-            IntegrationManagers.sharedInstance().openAll();
-        } else {
-            IntegrationManagers.sharedInstance().getPrimaryManager().open(this.props.room, 'add_integ');
-        }
-    }
-
-    render() {
+    public render(): JSX.Element {
         if (!this.props.showApps) return <div />;
 
         const apps = this.state.apps.map((app, index, arr) => {
@@ -257,7 +260,7 @@ export default class AppsDrawer extends React.Component {
                     className="mx_AppsContainer_resizer"
                     resizeNotifier={this.props.resizeNotifier}
                 >
-                    <div className="mx_AppsContainer" ref={this._collectResizer}>
+                    <div className="mx_AppsContainer" ref={this.collectResizer}>
                         { apps.map((app, i) => {
                             if (i < 1) return app;
                             return <React.Fragment key={app.key}>
@@ -273,7 +276,18 @@ export default class AppsDrawer extends React.Component {
     }
 }
 
-const PersistentVResizer = ({
+interface IPersistentResizerProps {
+    room: Room;
+    minHeight: number;
+    maxHeight: number;
+    className: string;
+    handleWrapperClass: string;
+    handleClass: string;
+    resizeNotifier: ResizeNotifier;
+    children: React.ReactNode;
+}
+
+const PersistentVResizer: React.FC<IPersistentResizerProps> = ({
     room,
     minHeight,
     maxHeight,
@@ -303,7 +317,7 @@ const PersistentVResizer = ({
     });
 
     return <Resizable
-        size={{ height: Math.min(height, maxHeight) }}
+        size={{ height: Math.min(height, maxHeight), width: null }}
         minHeight={minHeight}
         maxHeight={maxHeight}
         onResizeStart={() => {

src/components/views/rooms/BasicMessageComposer.tsx

@@ -50,7 +50,8 @@ import { AutocompleteAction, getKeyBindingsManager, MessageComposerAction } from
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 // matches emoticons which follow the start of a line or whitespace
-const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s$');
+const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s|:^$');
+export const REGEX_EMOTICON = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')$');
 
 const IS_MAC = navigator.platform.indexOf("Mac") !== -1;
 
@@ -161,7 +162,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         }
     }
 
-    private replaceEmoticon = (caretPosition: DocumentPosition): number => {
+    public replaceEmoticon(caretPosition: DocumentPosition, regex: RegExp): number {
         const { model } = this.props;
         const range = model.startRange(caretPosition);
         // expand range max 8 characters backwards from caretPosition,
@@ -170,9 +171,9 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         range.expandBackwardsWhile((index, offset) => {
             const part = model.parts[index];
             n -= 1;
-            return n >= 0 && (part.type === Type.Plain || part.type === Type.PillCandidate);
+            return n >= 0 && [Type.Plain, Type.PillCandidate, Type.Newline].includes(part.type);
         });
-        const emoticonMatch = REGEX_EMOTICON_WHITESPACE.exec(range.text);
+        const emoticonMatch = regex.exec(range.text);
         if (emoticonMatch) {
             const query = emoticonMatch[1].replace("-", "");
             // try both exact match and lower-case, this means that xd won't match xD but :P will match :p
@@ -180,18 +181,25 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
 
             if (data) {
                 const { partCreator } = model;
-                const hasPrecedingSpace = emoticonMatch[0][0] === " ";
+                const firstMatch = emoticonMatch[0];
+                const moveStart = firstMatch[0] === " " ? 1 : 0;
+
                 // we need the range to only comprise of the emoticon
                 // because we'll replace the whole range with an emoji,
                 // so move the start forward to the start of the emoticon.
                 // Take + 1 because index is reported without the possible preceding space.
-                range.moveStart(emoticonMatch.index + (hasPrecedingSpace ? 1 : 0));
+                range.moveStartForwards(emoticonMatch.index + moveStart);
+                // If the end is a trailing space/newline move end backwards, so that we don't replace it
+                if (["\n", " "].includes(firstMatch[firstMatch.length - 1])) {
+                    range.moveEndBackwards(1);
+                }
+
                 // this returns the amount of added/removed characters during the replace
                 // so the caret position can be adjusted.
-                return range.replace([partCreator.plain(data.unicode + " ")]);
+                return range.replace([partCreator.plain(data.unicode)]);
             }
         }
-    };
+    }
 
     private updateEditorState = (selection: Caret, inputType?: string, diff?: IDiff): void => {
         renderModel(this.editorRef.current, this.props.model);
@@ -607,8 +615,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     };
 
     private configureEmoticonAutoReplace = (): void => {
-        const shouldReplace = SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji');
-        this.props.model.setTransformCallback(shouldReplace ? this.replaceEmoticon : null);
+        this.props.model.setTransformCallback(this.transform);
     };
 
     private configureShouldShowPillAvatar = (): void => {
@@ -621,6 +628,11 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         this.setState({ surroundWith });
     };
 
+    private transform = (documentPosition: DocumentPosition): void => {
+        const shouldReplace = SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji');
+        if (shouldReplace) this.replaceEmoticon(documentPosition, REGEX_EMOTICON_WHITESPACE);
+    };
+
     componentWillUnmount() {
         document.removeEventListener("selectionchange", this.onSelectionChange);
         this.editorRef.current.removeEventListener("input", this.onInput, true);

src/components/views/rooms/E2EIcon.tsx

@@ -16,41 +16,51 @@ limitations under the License.
 */
 
 import React, { useState } from "react";
-import PropTypes from "prop-types";
 import classNames from 'classnames';
 
 import { _t, _td } from '../../../languageHandler';
 import AccessibleButton from "../elements/AccessibleButton";
 import Tooltip from "../elements/Tooltip";
+import { E2EStatus } from "../../../utils/ShieldUtils";
 
-export const E2E_STATE = {
-    VERIFIED: "verified",
-    WARNING: "warning",
-    UNKNOWN: "unknown",
-    NORMAL: "normal",
-    UNAUTHENTICATED: "unauthenticated",
+export enum E2EState {
+    Verified = "verified",
+    Warning = "warning",
+    Unknown = "unknown",
+    Normal = "normal",
+    Unauthenticated = "unauthenticated",
+}
+
+const crossSigningUserTitles: { [key in E2EState]?: string } = {
+    [E2EState.Warning]: _td("This user has not verified all of their sessions."),
+    [E2EState.Normal]: _td("You have not verified this user."),
+    [E2EState.Verified]: _td("You have verified this user. This user has verified all of their sessions."),
+};
+const crossSigningRoomTitles: { [key in E2EState]?: string } = {
+    [E2EState.Warning]: _td("Someone is using an unknown session"),
+    [E2EState.Normal]: _td("This room is end-to-end encrypted"),
+    [E2EState.Verified]: _td("Everyone in this room is verified"),
 };
 
-const crossSigningUserTitles = {
-    [E2E_STATE.WARNING]: _td("This user has not verified all of their sessions."),
-    [E2E_STATE.NORMAL]: _td("You have not verified this user."),
-    [E2E_STATE.VERIFIED]: _td("You have verified this user. This user has verified all of their sessions."),
-};
-const crossSigningRoomTitles = {
-    [E2E_STATE.WARNING]: _td("Someone is using an unknown session"),
-    [E2E_STATE.NORMAL]: _td("This room is end-to-end encrypted"),
-    [E2E_STATE.VERIFIED]: _td("Everyone in this room is verified"),
-};
+interface IProps {
+    isUser?: boolean;
+    status?: E2EState | E2EStatus;
+    className?: string;
+    size?: number;
+    onClick?: () => void;
+    hideTooltip?: boolean;
+    bordered?: boolean;
+}
 
-const E2EIcon = ({ isUser, status, className, size, onClick, hideTooltip, bordered }) => {
+const E2EIcon: React.FC<IProps> = ({ isUser, status, className, size, onClick, hideTooltip, bordered }) => {
     const [hover, setHover] = useState(false);
 
     const classes = classNames({
         mx_E2EIcon: true,
         mx_E2EIcon_bordered: bordered,
-        mx_E2EIcon_warning: status === E2E_STATE.WARNING,
-        mx_E2EIcon_normal: status === E2E_STATE.NORMAL,
-        mx_E2EIcon_verified: status === E2E_STATE.VERIFIED,
+        mx_E2EIcon_warning: status === E2EState.Warning,
+        mx_E2EIcon_normal: status === E2EState.Normal,
+        mx_E2EIcon_verified: status === E2EState.Verified,
     }, className);
 
     let e2eTitle;
@@ -92,12 +102,4 @@ const E2EIcon = ({ isUser, status, className, size, onClick, hideTooltip, border
     </div>;
 };
 
-E2EIcon.propTypes = {
-    isUser: PropTypes.bool,
-    status: PropTypes.oneOf(Object.values(E2E_STATE)),
-    className: PropTypes.string,
-    size: PropTypes.number,
-    onClick: PropTypes.func,
-};
-
 export default E2EIcon;

src/components/views/rooms/EditMessageComposer.tsx

@@ -27,7 +27,7 @@ import { findEditableEvent } from '../../../utils/EventUtils';
 import { parseEvent } from '../../../editor/deserialize';
 import { CommandPartCreator, Part, PartCreator, Type } from '../../../editor/parts';
 import EditorStateTransfer from '../../../utils/EditorStateTransfer';
-import BasicMessageComposer from "./BasicMessageComposer";
+import BasicMessageComposer, { REGEX_EMOTICON } from "./BasicMessageComposer";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { Command, CommandCategories, getCommand } from '../../../SlashCommands';
 import { Action } from "../../../dispatcher/actions";
@@ -42,11 +42,9 @@ import ErrorDialog from "../dialogs/ErrorDialog";
 import QuestionDialog from "../dialogs/QuestionDialog";
 import { ActionPayload } from "../../../dispatcher/payloads";
 import AccessibleButton from '../elements/AccessibleButton';
+import SettingsStore from "../../../settings/SettingsStore";
 
-function eventIsReply(mxEvent: MatrixEvent): boolean {
-    const relatesTo = mxEvent.getContent()["m.relates_to"];
-    return !!(relatesTo && relatesTo["m.in_reply_to"]);
-}
+import { logger } from "matrix-js-sdk/src/logger";
 
 function getHtmlReplyFallback(mxEvent: MatrixEvent): string {
     const html = mxEvent.getContent().formatted_body;
@@ -72,7 +70,7 @@ function createEditContent(model: EditorModel, editedEvent: MatrixEvent): IConte
     if (isEmote) {
         model = stripEmoteCommand(model);
     }
-    const isReply = eventIsReply(editedEvent);
+    const isReply = !!editedEvent.replyEventId;
     let plainPrefix = "";
     let htmlPrefix = "";
 
@@ -312,7 +310,7 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
                 description: errText,
             });
         } else {
-            console.log("Command success.");
+            logger.log("Command success.");
             if (messageContent) return messageContent;
         }
     }
@@ -320,6 +318,14 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
     private sendEdit = async (): Promise<void> => {
         const startTime = CountlyAnalytics.getTimestamp();
         const editedEvent = this.props.editState.getEvent();
+
+        // Replace emoticon at the end of the message
+        if (SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji')) {
+            const caret = this.editorRef.current?.getCaret();
+            const position = this.model.positionForOffset(caret.offset, caret.atNodeEnd);
+            this.editorRef.current?.replaceEmoticon(position, REGEX_EMOTICON);
+        }
+
         const editContent = createEditContent(this.model, editedEvent);
         const newContent = editContent["m.new_content"];
 

src/components/views/rooms/EntityTile.tsx

@@ -20,7 +20,7 @@ import React from 'react';
 import AccessibleButton from '../elements/AccessibleButton';
 import { _td } from '../../../languageHandler';
 import classNames from "classnames";
-import E2EIcon from './E2EIcon';
+import E2EIcon, { E2EState } from './E2EIcon';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import BaseAvatar from '../avatars/BaseAvatar';
 import PresenceLabel from "./PresenceLabel";
@@ -75,7 +75,7 @@ interface IProps {
     suppressOnHover?: boolean;
     showPresence?: boolean;
     subtextLabel?: string;
-    e2eStatus?: string;
+    e2eStatus?: E2EState;
     powerStatus?: PowerStatus;
 }
 

src/components/views/rooms/EventTile.tsx

@@ -21,6 +21,7 @@ import { EventType } from "matrix-js-sdk/src/@types/event";
 import { EventStatus, MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { Relations } from "matrix-js-sdk/src/models/relations";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { Thread, ThreadEvent } from 'matrix-js-sdk/src/models/thread';
 
 import ReplyThread from "../elements/ReplyThread";
 import { _t } from '../../../languageHandler';
@@ -32,7 +33,7 @@ import { formatTime } from "../../../DateUtils";
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { ALL_RULE_TYPES } from "../../../mjolnir/BanList";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import { E2E_STATE } from "./E2EIcon";
+import { E2EState } from "./E2EIcon";
 import { toRem } from "../../../utils/units";
 import { WidgetType } from "../../../widgets/WidgetType";
 import RoomAvatar from "../avatars/RoomAvatar";
@@ -55,6 +56,8 @@ import ReadReceiptMarker from "./ReadReceiptMarker";
 import MessageActionBar from "../messages/MessageActionBar";
 import ReactionsRow from '../messages/ReactionsRow';
 import { getEventDisplayInfo } from '../../../utils/EventUtils';
+import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
+import SettingsStore from "../../../settings/SettingsStore";
 
 const eventTileTypes = {
     [EventType.RoomMessage]: 'messages.MessageEvent',
@@ -240,6 +243,7 @@ interface IProps {
     // opaque readreceipt info for each userId; used by ReadReceiptMarker
     // to manage its animations. Should be an empty object when the room
     // first loads
+    // TODO: Proper typing for RR info
     readReceiptMap?: any;
 
     // A function which is used to check if the parent panel is being
@@ -301,6 +305,9 @@ interface IProps {
 
     // whether or not to display the sender
     hideSender?: boolean;
+
+    // whether or not to display thread info
+    showThreadInfo?: boolean;
 }
 
 interface IState {
@@ -317,6 +324,8 @@ interface IState {
     reactions: Relations;
 
     hover: boolean;
+
+    thread?: Thread;
 }
 
 @replaceableComponent("views.rooms.EventTile")
@@ -354,6 +363,8 @@ export default class EventTile extends React.Component<IProps, IState> {
             reactions: this.getReactions(),
 
             hover: false,
+
+            thread: this.props.mxEvent?.getThread(),
         };
 
         // don't do RR animations until we are mounted
@@ -456,8 +467,20 @@ export default class EventTile extends React.Component<IProps, IState> {
                 this.isListeningForReceipts = true;
             }
         }
+
+        if (SettingsStore.getValue("feature_thread")) {
+            this.props.mxEvent.once(ThreadEvent.Ready, this.updateThread);
+            this.props.mxEvent.on(ThreadEvent.Update, this.updateThread);
+        }
     }
 
+    private updateThread = (thread) => {
+        this.setState({
+            thread,
+        });
+        this.forceUpdate();
+    };
+
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
     // eslint-disable-next-line
     UNSAFE_componentWillReceiveProps(nextProps) {
@@ -468,7 +491,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         }
     }
 
-    shouldComponentUpdate(nextProps, nextState) {
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
         if (objectHasDiff(this.state, nextState)) {
             return true;
         }
@@ -496,6 +519,43 @@ export default class EventTile extends React.Component<IProps, IState> {
         }
     }
 
+    private renderThreadInfo(): React.ReactNode {
+        if (!SettingsStore.getValue("feature_thread")) {
+            return null;
+        }
+
+        const thread = this.state.thread;
+        const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+        if (!thread || this.props.showThreadInfo === false || thread.length <= 1) {
+            return null;
+        }
+
+        const avatars = Array.from(thread.participants).map((mxId: string) => {
+            const member = room.getMember(mxId);
+            return <MemberAvatar key={member.userId} member={member} width={14} height={14} />;
+        });
+
+        return (
+            <div
+                className="mx_ThreadInfo"
+                onClick={() => {
+                    dis.dispatch({
+                        action: Action.SetRightPanelPhase,
+                        phase: RightPanelPhases.ThreadView,
+                        refireParams: {
+                            event: this.props.mxEvent,
+                        },
+                    });
+                }}
+            >
+                <span className="mx_EventListSummary_avatars">
+                    { avatars }
+                </span>
+                { thread.length - 1 } { thread.length === 2 ? 'reply' : 'replies' }
+            </div>
+        );
+    }
+
     private onRoomReceipt = (ev, room) => {
         // ignore events for other rooms
         const tileRoom = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
@@ -550,7 +610,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         if (encryptionInfo.mismatchedSender) {
             // something definitely wrong is going on here
             this.setState({
-                verified: E2E_STATE.WARNING,
+                verified: E2EState.Warning,
             }, this.props.onHeightChanged); // Decryption may have caused a change in size
             return;
         }
@@ -558,7 +618,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         if (!userTrust.isCrossSigningVerified()) {
             // user is not verified, so default to everything is normal
             this.setState({
-                verified: E2E_STATE.NORMAL,
+                verified: E2EState.Normal,
             }, this.props.onHeightChanged); // Decryption may have caused a change in size
             return;
         }
@@ -568,27 +628,27 @@ export default class EventTile extends React.Component<IProps, IState> {
         );
         if (!eventSenderTrust) {
             this.setState({
-                verified: E2E_STATE.UNKNOWN,
+                verified: E2EState.Unknown,
             }, this.props.onHeightChanged); // Decryption may have caused a change in size
             return;
         }
 
         if (!eventSenderTrust.isVerified()) {
             this.setState({
-                verified: E2E_STATE.WARNING,
+                verified: E2EState.Warning,
             }, this.props.onHeightChanged); // Decryption may have caused a change in size
             return;
         }
 
         if (!encryptionInfo.authenticated) {
             this.setState({
-                verified: E2E_STATE.UNAUTHENTICATED,
+                verified: E2EState.Unauthenticated,
             }, this.props.onHeightChanged); // Decryption may have caused a change in size
             return;
         }
 
         this.setState({
-            verified: E2E_STATE.VERIFIED,
+            verified: E2EState.Verified,
         }, this.props.onHeightChanged); // Decryption may have caused a change in size
     }
 
@@ -796,13 +856,13 @@ export default class EventTile extends React.Component<IProps, IState> {
 
         // event is encrypted, display padlock corresponding to whether or not it is verified
         if (ev.isEncrypted()) {
-            if (this.state.verified === E2E_STATE.NORMAL) {
+            if (this.state.verified === E2EState.Normal) {
                 return; // no icon if we've not even cross-signed the user
-            } else if (this.state.verified === E2E_STATE.VERIFIED) {
+            } else if (this.state.verified === E2EState.Verified) {
                 return; // no icon for verified
-            } else if (this.state.verified === E2E_STATE.UNAUTHENTICATED) {
+            } else if (this.state.verified === E2EState.Unauthenticated) {
                 return (<E2ePadlockUnauthenticated />);
-            } else if (this.state.verified === E2E_STATE.UNKNOWN) {
+            } else if (this.state.verified === E2EState.Unknown) {
                 return (<E2ePadlockUnknown />);
             } else {
                 return (<E2ePadlockUnverified />);
@@ -907,9 +967,9 @@ export default class EventTile extends React.Component<IProps, IState> {
             mx_EventTile_lastInSection: this.props.lastInSection,
             mx_EventTile_contextual: this.props.contextual,
             mx_EventTile_actionBarFocused: this.state.actionBarFocused,
-            mx_EventTile_verified: !isBubbleMessage && this.state.verified === E2E_STATE.VERIFIED,
-            mx_EventTile_unverified: !isBubbleMessage && this.state.verified === E2E_STATE.WARNING,
-            mx_EventTile_unknown: !isBubbleMessage && this.state.verified === E2E_STATE.UNKNOWN,
+            mx_EventTile_verified: !isBubbleMessage && this.state.verified === E2EState.Verified,
+            mx_EventTile_unverified: !isBubbleMessage && this.state.verified === E2EState.Warning,
+            mx_EventTile_unknown: !isBubbleMessage && this.state.verified === E2EState.Unknown,
             mx_EventTile_bad: isEncryptionFailure,
             mx_EventTile_emote: msgtype === 'm.emote',
             mx_EventTile_noSender: this.props.hideSender,
@@ -1139,15 +1199,20 @@ export default class EventTile extends React.Component<IProps, IState> {
             }
 
             default: {
-                const thread = ReplyThread.makeThread(
-                    this.props.mxEvent,
-                    this.props.onHeightChanged,
-                    this.props.permalinkCreator,
-                    this.replyThread,
-                    this.props.layout,
-                    this.props.forExport,
-                    this.props.alwaysShowTimestamps || this.state.hover,
-                );
+                let thread;
+                // When the "showHiddenEventsInTimeline" lab is enabled,
+                // avoid showing replies for hidden events (events without tiles)
+                if (haveTileForEvent(this.props.mxEvent)) {
+                    thread = ReplyThread.makeThread(
+                        this.props.mxEvent,
+                        this.props.onHeightChanged,
+                        this.props.permalinkCreator,
+                        this.replyThread,
+                        this.props.layout,
+                        this.props.forExport,
+                        this.props.alwaysShowTimestamps || this.state.hover,
+                    );
+                }
 
                 const isOwnEvent = this.props.mxEvent?.sender?.userId === MatrixClientPeg.get().getUserId();
 
@@ -1189,6 +1254,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                             { keyRequestInfo }
                             { actionBar }
                             { this.props.layout === Layout.IRC && (reactionsRow) }
+                            { this.renderThreadInfo() }
                         </div>
                         { this.props.layout !== Layout.IRC && (reactionsRow) }
                         { msgOption }

src/components/views/rooms/JumpToBottomButton.tsx

@@ -14,11 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import React from "react";
 import { _t } from '../../../languageHandler';
 import AccessibleButton from '../elements/AccessibleButton';
 import classNames from 'classnames';
 
-export default (props) => {
+interface IProps {
+    numUnreadMessages: number;
+    highlight: boolean;
+    onScrollToBottomClick: (e: React.MouseEvent) => void;
+}
+
+const JumpToBottomButton: React.FC<IProps> = (props) => {
     const className = classNames({
         'mx_JumpToBottomButton': true,
         'mx_JumpToBottomButton_highlight': props.highlight,
@@ -36,3 +43,5 @@ export default (props) => {
         { badge }
     </div>);
 };
+
+export default JumpToBottomButton;

src/components/views/rooms/LinkPreviewWidget.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef } from 'react';
+import React, { ComponentProps, createRef } from 'react';
 import { AllHtmlEntities } from 'html-entities';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import { IPreviewUrlResponse } from 'matrix-js-sdk/src/client';
@@ -36,6 +36,7 @@ interface IProps {
 @replaceableComponent("views.rooms.LinkPreviewWidget")
 export default class LinkPreviewWidget extends React.Component<IProps> {
     private readonly description = createRef<HTMLDivElement>();
+    private image = createRef<HTMLImageElement>();
 
     componentDidMount() {
         if (this.description.current) {
@@ -59,7 +60,7 @@ export default class LinkPreviewWidget extends React.Component<IProps> {
             src = mediaFromMxc(src).srcHttp;
         }
 
-        const params = {
+        const params: Omit<ComponentProps<typeof ImageView>, "onFinished"> = {
             src: src,
             width: p["og:image:width"],
             height: p["og:image:height"],
@@ -68,6 +69,17 @@ export default class LinkPreviewWidget extends React.Component<IProps> {
             link: this.props.link,
         };
 
+        if (this.image.current) {
+            const clientRect = this.image.current.getBoundingClientRect();
+
+            params.thumbnailInfo = {
+                width: clientRect.width,
+                height: clientRect.height,
+                positionX: clientRect.x,
+                positionY: clientRect.y,
+            };
+        }
+
         Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
     };
 
@@ -100,7 +112,7 @@ export default class LinkPreviewWidget extends React.Component<IProps> {
         let img;
         if (image) {
             img = <div className="mx_LinkPreviewWidget_image" style={{ height: thumbHeight }}>
-                <img style={{ maxWidth: imageMaxWidth, maxHeight: imageMaxHeight }} src={image} onClick={this.onImageClick} />
+                <img ref={this.image} style={{ maxWidth: imageMaxWidth, maxHeight: imageMaxHeight }} src={image} onClick={this.onImageClick} />
             </div>;
         }
 

src/components/views/rooms/MemberList.tsx

@@ -185,8 +185,8 @@ export default class MemberList extends React.Component<IProps, IState> {
         return {
             loading: false,
             members: members,
-            filteredJoinedMembers: this.filterMembers(members, 'join'),
-            filteredInvitedMembers: this.filterMembers(members, 'invite'),
+            filteredJoinedMembers: this.filterMembers(members, 'join', searchQuery),
+            filteredInvitedMembers: this.filterMembers(members, 'invite', searchQuery),
             canInvite: this.canInvite,
 
             // ideally we'd size this to the page height, but

src/components/views/rooms/MessageComposer.tsx

@@ -13,7 +13,7 @@ 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 React, { createRef } from 'react';
 import classNames from 'classnames';
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
@@ -27,7 +27,13 @@ import { makeRoomPermalink, RoomPermalinkCreator } from '../../../utils/permalin
 import ContentMessages from '../../../ContentMessages';
 import E2EIcon from './E2EIcon';
 import SettingsStore from "../../../settings/SettingsStore";
-import { aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu } from "../../structures/ContextMenu";
+import {
+    aboveLeftOf,
+    ContextMenu,
+    useContextMenu,
+    MenuItem,
+    AboveLeftOf,
+} from "../../structures/ContextMenu";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import ReplyPreview from "./ReplyPreview";
 import { UIFeature } from "../../../settings/UIFeature";
@@ -45,9 +51,13 @@ import { Action } from "../../../dispatcher/actions";
 import EditorModel from "../../../editor/model";
 import EmojiPicker from '../emojipicker/EmojiPicker';
 import MemberStatusMessageAvatar from "../avatars/MemberStatusMessageAvatar";
+import UIStore, { UI_EVENTS } from '../../../stores/UIStore';
+
+let instanceCount = 0;
+const NARROW_MODE_BREAKPOINT = 500;
 
 interface IComposerAvatarProps {
-    me: object;
+    me: RoomMember;
 }
 
 function ComposerAvatar(props: IComposerAvatarProps) {
@@ -71,13 +81,19 @@ function SendButton(props: ISendButtonProps) {
     );
 }
 
-const EmojiButton = ({ addEmoji }) => {
+interface IEmojiButtonProps {
+    addEmoji: (unicode: string) => boolean;
+    menuPosition: any; // TODO: Types
+    narrowMode: boolean;
+}
+
+const EmojiButton: React.FC<IEmojiButtonProps> = ({ addEmoji, menuPosition, narrowMode }) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
 
     let contextMenu;
     if (menuDisplayed) {
-        const buttonRect = button.current.getBoundingClientRect();
-        contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} managed={false}>
+        const position = menuPosition ?? aboveLeftOf(button.current.getBoundingClientRect());
+        contextMenu = <ContextMenu {...position} onFinished={closeMenu} managed={false}>
             <EmojiPicker onChoose={addEmoji} showQuickReactions={true} />
         </ContextMenu>;
     }
@@ -93,12 +109,11 @@ const EmojiButton = ({ addEmoji }) => {
     // TODO: replace ContextMenuTooltipButton with a unified representation of
     // the header buttons and the right panel buttons
     return <React.Fragment>
-        <ContextMenuTooltipButton
+        <AccessibleTooltipButton
             className={className}
             onClick={openMenu}
-            isExpanded={menuDisplayed}
-            title={_t('Emoji picker')}
-            inputRef={button}
+            title={!narrowMode && _t('Emoji picker')}
+            label={narrowMode && _t("Add emoji")}
         />
 
         { contextMenu }
@@ -183,7 +198,10 @@ interface IProps {
     resizeNotifier: ResizeNotifier;
     permalinkCreator: RoomPermalinkCreator;
     replyToEvent?: MatrixEvent;
+    replyInThread?: boolean;
+    showReplyPreview?: boolean;
     e2eStatus?: E2EStatus;
+    compact?: boolean;
 }
 
 interface IState {
@@ -193,6 +211,9 @@ interface IState {
     haveRecording: boolean;
     recordingTimeLeftSeconds?: number;
     me?: RoomMember;
+    narrowMode?: boolean;
+    isMenuOpen: boolean;
+    showStickers: boolean;
 }
 
 @replaceableComponent("views.rooms.MessageComposer")
@@ -200,6 +221,14 @@ export default class MessageComposer extends React.Component<IProps, IState> {
     private dispatcherRef: string;
     private messageComposerInput: SendMessageComposer;
     private voiceRecordingButton: VoiceRecordComposerTile;
+    private ref: React.RefObject<HTMLDivElement> = createRef();
+    private instanceId: number;
+
+    static defaultProps = {
+        replyInThread: false,
+        showReplyPreview: true,
+        compact: false,
+    };
 
     constructor(props) {
         super(props);
@@ -211,15 +240,32 @@ export default class MessageComposer extends React.Component<IProps, IState> {
             isComposerEmpty: true,
             haveRecording: false,
             recordingTimeLeftSeconds: null, // when set to a number, shows a toast
+            isMenuOpen: false,
+            showStickers: false,
         };
+
+        this.instanceId = instanceCount++;
     }
 
     componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
         this.waitForOwnMember();
+        UIStore.instance.trackElementDimensions(`MessageComposer${this.instanceId}`, this.ref.current);
+        UIStore.instance.on(`MessageComposer${this.instanceId}`, this.onResize);
     }
 
+    private onResize = (type: UI_EVENTS, entry: ResizeObserverEntry) => {
+        if (type === UI_EVENTS.Resize) {
+            const narrowMode = entry.contentRect.width <= NARROW_MODE_BREAKPOINT;
+            this.setState({
+                narrowMode,
+                isMenuOpen: !narrowMode ? false : this.state.isMenuOpen,
+                showStickers: false,
+            });
+        }
+    };
+
     private onAction = (payload: ActionPayload) => {
         if (payload.action === 'reply_to_event') {
             // add a timeout for the reply preview to be rendered, so
@@ -254,6 +300,8 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         }
         VoiceRecordingStore.instance.off(UPDATE_EVENT, this.onVoiceStoreUpdate);
         dis.unregister(this.dispatcherRef);
+        UIStore.instance.stopTrackingElementDimensions(`MessageComposer${this.instanceId}`);
+        UIStore.instance.removeListener(`MessageComposer${this.instanceId}`, this.onResize);
     }
 
     private onRoomStateEvents = (ev, state) => {
@@ -303,7 +351,11 @@ export default class MessageComposer extends React.Component<IProps, IState> {
 
     private renderPlaceholderText = () => {
         if (this.props.replyToEvent) {
-            if (this.props.e2eStatus) {
+            if (this.props.replyInThread && this.props.e2eStatus) {
+                return _t('Reply to encrypted thread…');
+            } else if (this.props.replyInThread) {
+                return _t('Reply to thread…');
+            } else if (this.props.e2eStatus) {
                 return _t('Send an encrypted reply…');
             } else {
                 return _t('Send a reply…');
@@ -317,11 +369,12 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         }
     };
 
-    private addEmoji(emoji: string) {
+    private addEmoji(emoji: string): boolean {
         dis.dispatch<ComposerInsertPayload>({
             action: Action.ComposerInsert,
             text: emoji,
         });
+        return true;
     }
 
     private sendMessage = async () => {
@@ -360,14 +413,111 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         }
     };
 
+    private shouldShowStickerPicker = (): boolean => {
+        return SettingsStore.getValue(UIFeature.Widgets)
+        && SettingsStore.getValue("MessageComposerInput.showStickersButton")
+        && !this.state.haveRecording;
+    };
+
+    private showStickers = (showStickers: boolean) => {
+        this.setState({ showStickers });
+    };
+
+    private toggleButtonMenu = (): void => {
+        this.setState({
+            isMenuOpen: !this.state.isMenuOpen,
+        });
+    };
+
+    private renderButtons(menuPosition): JSX.Element | JSX.Element[] {
+        const buttons: JSX.Element[] = [];
+        if (!this.state.haveRecording) {
+            buttons.push(
+                <UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
+            );
+            buttons.push(
+                <EmojiButton key="emoji_button" addEmoji={this.addEmoji} menuPosition={menuPosition} narrowMode={this.state.narrowMode} />,
+            );
+        }
+        if (this.shouldShowStickerPicker()) {
+            let title;
+            if (!this.state.narrowMode) {
+                title = this.state.showStickers ? _t("Hide Stickers") : _t("Show Stickers");
+            }
+
+            buttons.push(
+                <AccessibleTooltipButton
+                    id='stickersButton'
+                    key="controls_stickers"
+                    className="mx_MessageComposer_button mx_MessageComposer_stickers"
+                    onClick={() => this.showStickers(!this.state.showStickers)}
+                    title={title}
+                    label={this.state.narrowMode && _t("Send a sticker")}
+                />,
+            );
+        }
+        if (!this.state.haveRecording && !this.state.narrowMode) {
+            buttons.push(
+                <AccessibleTooltipButton
+                    className="mx_MessageComposer_button mx_MessageComposer_voiceMessage"
+                    onClick={() => this.voiceRecordingButton?.onRecordStartEndClick()}
+                    title={_t("Send voice message")}
+                />,
+            );
+        }
+
+        if (!this.state.narrowMode) {
+            return buttons;
+        } else {
+            const classnames = classNames({
+                mx_MessageComposer_button: true,
+                mx_MessageComposer_buttonMenu: true,
+                mx_MessageComposer_closeButtonMenu: this.state.isMenuOpen,
+            });
+
+            return <>
+                { buttons[0] }
+                <AccessibleTooltipButton
+                    className={classnames}
+                    onClick={this.toggleButtonMenu}
+                    title={_t("More options")}
+                    tooltip={false}
+                />
+                { this.state.isMenuOpen && (
+                    <ContextMenu
+                        onFinished={this.toggleButtonMenu}
+                        {...menuPosition}
+                        menuPaddingRight={10}
+                        menuPaddingTop={5}
+                        menuPaddingBottom={5}
+                        menuWidth={150}
+                        wrapperClassName="mx_MessageComposer_Menu"
+                    >
+                        { buttons.slice(1).map((button, index) => (
+                            <MenuItem className="mx_CallContextMenu_item" key={index} onClick={this.toggleButtonMenu}>
+                                { button }
+                            </MenuItem>
+                        )) }
+                    </ContextMenu>
+                ) }
+            </>;
+        }
+    }
+
     render() {
         const controls = [
-            this.state.me ? <ComposerAvatar key="controls_avatar" me={this.state.me} /> : null,
+            this.state.me && !this.props.compact ? <ComposerAvatar key="controls_avatar" me={this.state.me} /> : null,
             this.props.e2eStatus ?
                 <E2EIcon key="e2eIcon" status={this.props.e2eStatus} className="mx_MessageComposer_e2eIcon" /> :
                 null,
         ];
 
+        let menuPosition: AboveLeftOf | undefined;
+        if (this.ref.current) {
+            const contentRect = this.ref.current.getBoundingClientRect();
+            menuPosition = aboveLeftOf(contentRect);
+        }
+
         if (!this.state.tombstone && this.state.canSendMessages) {
             controls.push(
                 <SendMessageComposer
@@ -376,39 +526,17 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                     room={this.props.room}
                     placeholder={this.renderPlaceholderText()}
                     permalinkCreator={this.props.permalinkCreator}
+                    replyInThread={this.props.replyInThread}
                     replyToEvent={this.props.replyToEvent}
                     onChange={this.onChange}
                     disabled={this.state.haveRecording}
                 />,
             );
 
-            if (!this.state.haveRecording) {
-                controls.push(
-                    <UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
-                    <EmojiButton key="emoji_button" addEmoji={this.addEmoji} />,
-                );
-            }
-
-            if (SettingsStore.getValue(UIFeature.Widgets) &&
-                SettingsStore.getValue("MessageComposerInput.showStickersButton") &&
-                !this.state.haveRecording) {
-                controls.push(<Stickerpicker key="stickerpicker_controls_button" room={this.props.room} />);
-            }
-
             controls.push(<VoiceRecordComposerTile
                 key="controls_voice_record"
                 ref={c => this.voiceRecordingButton = c}
                 room={this.props.room} />);
-
-            if (!this.state.isComposerEmpty || this.state.haveRecording) {
-                controls.push(
-                    <SendButton
-                        key="controls_send"
-                        onClick={this.sendMessage}
-                        title={this.state.haveRecording ? _t("Send voice message") : undefined}
-                    />,
-                );
-            }
         } else if (this.state.tombstone) {
             const replacementRoomId = this.state.tombstone.getContent()['replacement_room'];
 
@@ -449,14 +577,39 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                 yOffset={-50}
             />;
         }
+        controls.push(
+            <Stickerpicker
+                room={this.props.room}
+                showStickers={this.state.showStickers}
+                setShowStickers={this.showStickers}
+                menuPosition={menuPosition} />,
+        );
+
+        const showSendButton = !this.state.isComposerEmpty || this.state.haveRecording;
+
+        const classes = classNames({
+            "mx_MessageComposer": true,
+            "mx_GroupLayout": true,
+            "mx_MessageComposer--compact": this.props.compact,
+        });
 
         return (
-            <div className="mx_MessageComposer mx_GroupLayout">
+            <div className={classes} ref={this.ref}>
                 { recordingTooltip }
                 <div className="mx_MessageComposer_wrapper">
-                    <ReplyPreview permalinkCreator={this.props.permalinkCreator} />
+                    { this.props.showReplyPreview && (
+                        <ReplyPreview permalinkCreator={this.props.permalinkCreator} />
+                    ) }
                     <div className="mx_MessageComposer_row">
                         { controls }
+                        { this.renderButtons(menuPosition) }
+                        { showSendButton && (
+                            <SendButton
+                                key="controls_send"
+                                onClick={this.sendMessage}
+                                title={this.state.haveRecording ? _t("Send voice message") : undefined}
+                            />
+                        ) }
                     </div>
                 </div>
             </div>

src/components/views/rooms/NewRoomIntro.tsx

@@ -36,6 +36,7 @@ import { showSpaceInvite } from "../../../utils/space";
 import { privateShouldBeEncrypted } from "../../../createRoom";
 import EventTileBubble from "../messages/EventTileBubble";
 import { ROOM_SECURITY_TAB } from "../dialogs/RoomSettingsDialog";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 
 function hasExpectedEncryptionSettings(matrixClient: MatrixClient, room: Room): boolean {
     const isEncrypted: boolean = matrixClient.isRoomEncrypted(room.roomId);
@@ -191,11 +192,21 @@ const NewRoomIntro = () => {
         });
     }
 
-    const sub2 = _t(
+    const subText = _t(
         "Your private messages are normally encrypted, but this room isn't. "+
         "Usually this is due to an unsupported device or method being used, " +
-        "like email invites. <a>Enable encryption in settings.</a>", {},
-        { a: sub => <a onClick={openRoomSettings} href="#">{ sub }</a> },
+        "like email invites.",
+    );
+
+    let subButton;
+    if (room.currentState.mayClientSendStateEvent(EventType.RoomEncryption, MatrixClientPeg.get())) {
+        subButton = (
+            <a onClick={openRoomSettings} href="#"> { _t("Enable encryption in settings.") }</a>
+        );
+    }
+
+    const subtitle = (
+        <span> { subText } { subButton } </span>
     );
 
     return <div className="mx_NewRoomIntro">
@@ -204,7 +215,7 @@ const NewRoomIntro = () => {
             <EventTileBubble
                 className="mx_cryptoEvent mx_cryptoEvent_icon_warning"
                 title={_t("End-to-end encryption isn't enabled")}
-                subtitle={sub2}
+                subtitle={subtitle}
             />
         ) }
 

src/components/views/rooms/NotificationBadge.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { MouseEvent } from "react";
 import classNames from "classnames";
 import { formatCount } from "../../../utils/FormattingUtils";
 import SettingsStore from "../../../settings/SettingsStore";
@@ -22,6 +22,9 @@ import AccessibleButton from "../elements/AccessibleButton";
 import { XOR } from "../../../@types/common";
 import { NOTIFICATION_STATE_UPDATE, NotificationState } from "../../../stores/notifications/NotificationState";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Tooltip from "../elements/Tooltip";
+import { _t } from "../../../languageHandler";
+import { NotificationColor } from "../../../stores/notifications/NotificationColor";
 
 interface IProps {
     notification: NotificationState;
@@ -39,6 +42,7 @@ interface IProps {
 }
 
 interface IClickableProps extends IProps, React.InputHTMLAttributes<Element> {
+    showUnsentTooltip?: boolean;
     /**
      * If specified will return an AccessibleButton instead of a div.
      */
@@ -47,6 +51,7 @@ interface IClickableProps extends IProps, React.InputHTMLAttributes<Element> {
 
 interface IState {
     showCounts: boolean; // whether or not to show counts. Independent of props.forceCount
+    showTooltip: boolean;
 }
 
 @replaceableComponent("views.rooms.NotificationBadge")
@@ -59,6 +64,7 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
 
         this.state = {
             showCounts: SettingsStore.getValue("Notifications.alwaysShowBadgeCounts", this.roomId),
+            showTooltip: false,
         };
 
         this.countWatcherRef = SettingsStore.watchSetting(
@@ -93,9 +99,22 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
         this.forceUpdate(); // notification state changed - update
     };
 
+    private onMouseOver = (e: MouseEvent) => {
+        e.stopPropagation();
+        this.setState({
+            showTooltip: true,
+        });
+    };
+
+    private onMouseLeave = () => {
+        this.setState({
+            showTooltip: false,
+        });
+    };
+
     public render(): React.ReactElement {
         /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
-        const { notification, forceCount, roomId, onClick, ...props } = this.props;
+        const { notification, showUnsentTooltip, forceCount, roomId, onClick, ...props } = this.props;
 
         // Don't show a badge if we don't need to
         if (notification.isIdle) return null;
@@ -124,9 +143,24 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
         });
 
         if (onClick) {
+            let label: string;
+            let tooltip: JSX.Element;
+            if (showUnsentTooltip && this.state.showTooltip && notification.color === NotificationColor.Unsent) {
+                label = _t("Message didn't send. Click for info.");
+                tooltip = <Tooltip className="mx_RoleButton_tooltip" label={label} />;
+            }
+
             return (
-                <AccessibleButton {...props} className={classes} onClick={onClick}>
+                <AccessibleButton
+                    aria-label={label}
+                    {...props}
+                    className={classes}
+                    onClick={onClick}
+                    onMouseOver={this.onMouseOver}
+                    onMouseLeave={this.onMouseLeave}
+                >
                     <span className="mx_NotificationBadge_count">{ symbol }</span>
+                    { tooltip }
                 </AccessibleButton>
             );
         }

src/components/views/rooms/ReadReceiptMarker.tsx

@@ -15,62 +15,75 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef } from 'react';
-import PropTypes from 'prop-types';
+import React, { createRef, RefObject } from 'react';
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+
 import { _t } from '../../../languageHandler';
 import { formatDate } from '../../../DateUtils';
 import NodeAnimator from "../../../NodeAnimator";
-import * as sdk from "../../../index";
 import { toPx } from "../../../utils/units";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
+import MemberAvatar from '../avatars/MemberAvatar';
+
+interface IProps {
+    // the RoomMember to show the RR for
+    member?: RoomMember;
+    // userId to fallback the avatar to
+    // if the member hasn't been loaded yet
+    fallbackUserId: string;
+
+    // number of pixels to offset the avatar from the right of its parent;
+    // typically a negative value.
+    leftOffset?: number;
+
+    // true to hide the avatar (it will still be animated)
+    hidden?: boolean;
+
+    // don't animate this RR into position
+    suppressAnimation?: boolean;
+
+    // an opaque object for storing information about this user's RR in
+    // this room
+    // TODO: proper typing for RR info
+    readReceiptInfo: any;
+
+    // A function which is used to check if the parent panel is being
+    // unmounted, to avoid unnecessary work. Should return true if we
+    // are being unmounted.
+    checkUnmounting?: () => boolean;
+
+    // callback for clicks on this RR
+    onClick?: (e: React.MouseEvent) => void;
+
+    // Timestamp when the receipt was read
+    timestamp?: number;
+
+    // True to show twelve hour format, false otherwise
+    showTwelveHour?: boolean;
+}
+
+interface IState {
+    suppressDisplay: boolean;
+    startStyles?: IReadReceiptMarkerStyle[];
+}
+
+interface IReadReceiptMarkerStyle {
+    top: number;
+    left: number;
+}
+
 @replaceableComponent("views.rooms.ReadReceiptMarker")
-export default class ReadReceiptMarker extends React.PureComponent {
-    static propTypes = {
-        // the RoomMember to show the RR for
-        member: PropTypes.object,
-        // userId to fallback the avatar to
-        // if the member hasn't been loaded yet
-        fallbackUserId: PropTypes.string.isRequired,
-
-        // number of pixels to offset the avatar from the right of its parent;
-        // typically a negative value.
-        leftOffset: PropTypes.number,
-
-        // true to hide the avatar (it will still be animated)
-        hidden: PropTypes.bool,
-
-        // don't animate this RR into position
-        suppressAnimation: PropTypes.bool,
-
-        // an opaque object for storing information about this user's RR in
-        // this room
-        readReceiptInfo: PropTypes.object,
-
-        // A function which is used to check if the parent panel is being
-        // unmounted, to avoid unnecessary work. Should return true if we
-        // are being unmounted.
-        checkUnmounting: PropTypes.func,
-
-        // callback for clicks on this RR
-        onClick: PropTypes.func,
-
-        // Timestamp when the receipt was read
-        timestamp: PropTypes.number,
-
-        // True to show twelve hour format, false otherwise
-        showTwelveHour: PropTypes.bool,
-    };
+export default class ReadReceiptMarker extends React.PureComponent<IProps, IState> {
+    private avatar: React.RefObject<HTMLDivElement | HTMLImageElement | HTMLSpanElement> = createRef();
 
     static defaultProps = {
         leftOffset: 0,
     };
 
-    constructor(props) {
+    constructor(props: IProps) {
         super(props);
 
-        this._avatar = createRef();
-
         this.state = {
             // if we are going to animate the RR, we don't show it on first render,
             // and instead just add a placeholder to the DOM; once we've been
@@ -80,7 +93,7 @@ export default class ReadReceiptMarker extends React.PureComponent {
         };
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount(): void {
         // before we remove the rr, store its location in the map, so that if
         // it reappears, it can be animated from the right place.
         const rrInfo = this.props.readReceiptInfo;
@@ -95,29 +108,29 @@ export default class ReadReceiptMarker extends React.PureComponent {
             return;
         }
 
-        const avatarNode = this._avatar.current;
+        const avatarNode = this.avatar.current;
         rrInfo.top = avatarNode.offsetTop;
         rrInfo.left = avatarNode.offsetLeft;
         rrInfo.parent = avatarNode.offsetParent;
     }
 
-    componentDidMount() {
+    public componentDidMount(): void {
         if (!this.state.suppressDisplay) {
             // we've already done our display - nothing more to do.
             return;
         }
-        this._animateMarker();
+        this.animateMarker();
     }
 
-    componentDidUpdate(prevProps) {
+    public componentDidUpdate(prevProps: IProps): void {
         const differentLeftOffset = prevProps.leftOffset !== this.props.leftOffset;
         const visibilityChanged = prevProps.hidden !== this.props.hidden;
         if (differentLeftOffset || visibilityChanged) {
-            this._animateMarker();
+            this.animateMarker();
         }
     }
 
-    _animateMarker() {
+    private animateMarker(): void {
         // treat new RRs as though they were off the top of the screen
         let oldTop = -15;
 
@@ -126,7 +139,7 @@ export default class ReadReceiptMarker extends React.PureComponent {
             oldTop = oldInfo.top + oldInfo.parent.getBoundingClientRect().top;
         }
 
-        const newElement = this._avatar.current;
+        const newElement = this.avatar.current;
         let startTopOffset;
         if (!newElement.offsetParent) {
             // this seems to happen sometimes for reasons I don't understand
@@ -156,10 +169,9 @@ export default class ReadReceiptMarker extends React.PureComponent {
         });
     }
 
-    render() {
-        const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+    public render(): JSX.Element {
         if (this.state.suppressDisplay) {
-            return <div ref={this._avatar} />;
+            return <div ref={this.avatar as RefObject<HTMLDivElement>} />;
         }
 
         const style = {
@@ -198,7 +210,7 @@ export default class ReadReceiptMarker extends React.PureComponent {
                     style={style}
                     title={title}
                     onClick={this.props.onClick}
-                    inputRef={this._avatar}
+                    inputRef={this.avatar as RefObject<HTMLImageElement>}
                 />
             </NodeAnimator>
         );

src/components/views/rooms/ReplyTile.tsx

@@ -25,8 +25,9 @@ import MImageReplyBody from "../messages/MImageReplyBody";
 import * as sdk from '../../../index';
 import { EventType, MsgType } from 'matrix-js-sdk/src/@types/event';
 import { replaceableComponent } from '../../../utils/replaceableComponent';
-import { getEventDisplayInfo } from '../../../utils/EventUtils';
+import { getEventDisplayInfo, isVoiceMessage } from '../../../utils/EventUtils';
 import MFileBody from "../messages/MFileBody";
+import MVoiceMessageBody from "../messages/MVoiceMessageBody";
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -95,7 +96,7 @@ export default class ReplyTile extends React.PureComponent<IProps> {
         const msgType = mxEvent.getContent().msgtype;
         const evType = mxEvent.getType() as EventType;
 
-        const { tileHandler, isInfoMessage } = getEventDisplayInfo(this.props.mxEvent);
+        const { tileHandler, isInfoMessage } = getEventDisplayInfo(mxEvent);
         // This shouldn't happen: the caller should check we support this type
         // before trying to instantiate us
         if (!tileHandler) {
@@ -109,14 +110,14 @@ export default class ReplyTile extends React.PureComponent<IProps> {
         const EventTileType = sdk.getComponent(tileHandler);
 
         const classes = classNames("mx_ReplyTile", {
-            mx_ReplyTile_info: isInfoMessage && !this.props.mxEvent.isRedacted(),
+            mx_ReplyTile_info: isInfoMessage && !mxEvent.isRedacted(),
             mx_ReplyTile_audio: msgType === MsgType.Audio,
             mx_ReplyTile_video: msgType === MsgType.Video,
         });
 
         let permalink = "#";
         if (this.props.permalinkCreator) {
-            permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
+            permalink = this.props.permalinkCreator.forEvent(mxEvent.getId());
         }
 
         let sender;
@@ -129,7 +130,7 @@ export default class ReplyTile extends React.PureComponent<IProps> {
 
         if (needsSenderProfile) {
             sender = <SenderProfile
-                mxEvent={this.props.mxEvent}
+                mxEvent={mxEvent}
                 enableFlair={false}
             />;
         }
@@ -137,7 +138,7 @@ export default class ReplyTile extends React.PureComponent<IProps> {
         const msgtypeOverrides = {
             [MsgType.Image]: MImageReplyBody,
             // Override audio and video body with file body. We also hide the download/decrypt button using CSS
-            [MsgType.Audio]: MFileBody,
+            [MsgType.Audio]: isVoiceMessage(mxEvent) ? MVoiceMessageBody : MFileBody,
             [MsgType.Video]: MFileBody,
         };
         const evOverrides = {
@@ -151,14 +152,14 @@ export default class ReplyTile extends React.PureComponent<IProps> {
                     { sender }
                     <EventTileType
                         ref="tile"
-                        mxEvent={this.props.mxEvent}
+                        mxEvent={mxEvent}
                         highlights={this.props.highlights}
                         highlightLink={this.props.highlightLink}
                         onHeightChanged={this.props.onHeightChanged}
                         showUrlPreview={false}
                         overrideBodyTypes={msgtypeOverrides}
                         overrideEventTypes={evOverrides}
-                        replacingEventId={this.props.mxEvent.replacingEventId()}
+                        replacingEventId={mxEvent.replacingEventId()}
                         maxImageHeight={96} />
                 </a>
             </div>

src/components/views/rooms/RoomDetailList.tsx

@@ -14,41 +14,38 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import * as sdk from '../../../index';
-import dis from '../../../dispatcher/dispatcher';
 import React from 'react';
-import { _t } from '../../../languageHandler';
-import PropTypes from 'prop-types';
+import { Room } from 'matrix-js-sdk/src';
 import classNames from 'classnames';
+import dis from '../../../dispatcher/dispatcher';
+import { _t } from '../../../languageHandler';
 
-import { roomShape } from './RoomDetailRow';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import RoomDetailRow from "./RoomDetailRow";
+
+interface IProps {
+    rooms?: Room[];
+    className?: string;
+}
 
 @replaceableComponent("views.rooms.RoomDetailList")
-export default class RoomDetailList extends React.Component {
-    static propTypes = {
-        rooms: PropTypes.arrayOf(roomShape),
-        className: PropTypes.string,
-    };
-
-    getRows() {
+export default class RoomDetailList extends React.Component<IProps> {
+    private getRows(): JSX.Element[] {
         if (!this.props.rooms) return [];
-
-        const RoomDetailRow = sdk.getComponent('rooms.RoomDetailRow');
         return this.props.rooms.map((room, index) => {
             return <RoomDetailRow key={index} room={room} onClick={this.onDetailsClick} />;
         });
     }
 
-    onDetailsClick = (ev, room) => {
+    private onDetailsClick = (ev: React.MouseEvent, room: Room): void => {
         dis.dispatch({
             action: 'view_room',
             room_id: room.roomId,
-            room_alias: room.canonicalAlias || (room.aliases || [])[0],
+            room_alias: room.getCanonicalAlias() || (room.getAltAliases() || [])[0],
         });
     };
 
-    render() {
+    public render(): JSX.Element {
         const rows = this.getRows();
         let rooms;
         if (rows.length === 0) {

src/components/views/rooms/RoomHeader.tsx

@@ -195,7 +195,7 @@ export default class RoomHeader extends React.Component<IProps> {
             videoCallButton =
                 <AccessibleTooltipButton
                     className="mx_RoomHeader_button mx_RoomHeader_videoCallButton"
-                    onClick={(ev) => ev.shiftKey ?
+                    onClick={(ev: React.MouseEvent<Element>) => ev.shiftKey ?
                         this.displayInfoDialogAboutScreensharing() : this.props.onCallPlaced(PlaceCallType.Video)}
                     title={_t("Video call")} />;
         }

src/components/views/rooms/RoomList.tsx

@@ -38,7 +38,6 @@ import { StaticNotificationState } from "../../../stores/notifications/StaticNot
 import { Action } from "../../../dispatcher/actions";
 import { ViewRoomDeltaPayload } from "../../../dispatcher/payloads/ViewRoomDeltaPayload";
 import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
-import SettingsStore from "../../../settings/SettingsStore";
 import CustomRoomTagStore from "../../../stores/CustomRoomTagStore";
 import { arrayFastClone, arrayHasDiff } from "../../../utils/arrays";
 import { objectShallowClone, objectWithOnly } from "../../../utils/objects";
@@ -49,6 +48,7 @@ import SpaceStore, { ISuggestedRoom, SUGGESTED_ROOMS } from "../../../stores/Spa
 import { showAddExistingRooms, showCreateNewRoom, showSpaceInvite } from "../../../utils/space";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import RoomAvatar from "../avatars/RoomAvatar";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 
 interface IProps {
     onKeyDown: (ev: React.KeyboardEvent) => void;
@@ -320,11 +320,6 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
 
     private updateLists = () => {
         const newLists = RoomListStore.instance.orderedLists;
-        if (SettingsStore.getValue("advancedRoomListLogging")) {
-            // TODO: Remove debug: https://github.com/vector-im/element-web/issues/14602
-            console.log("new lists", newLists);
-        }
-
         const previousListIds = Object.keys(this.state.sublists);
         const newListIds = Object.keys(newLists).filter(t => {
             if (!isCustomTag(t)) return true; // always include non-custom tags
@@ -528,20 +523,23 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
             } else if (
                 this.props.activeSpace?.canInvite(userId) || this.props.activeSpace?.getMyMembership() === "join"
             ) {
+                const spaceName = this.props.activeSpace.name;
                 explorePrompt = <div className="mx_RoomList_explorePrompt">
                     <div>{ _t("Quick actions") }</div>
-                    { this.props.activeSpace.canInvite(userId) && <AccessibleButton
+                    { this.props.activeSpace.canInvite(userId) && <AccessibleTooltipButton
                         className="mx_RoomList_explorePrompt_spaceInvite"
                         onClick={this.onSpaceInviteClick}
+                        title={_t("Invite to %(spaceName)s", { spaceName })}
                     >
                         { _t("Invite people") }
-                    </AccessibleButton> }
-                    { this.props.activeSpace.getMyMembership() === "join" && <AccessibleButton
+                    </AccessibleTooltipButton> }
+                    { this.props.activeSpace.getMyMembership() === "join" && <AccessibleTooltipButton
                         className="mx_RoomList_explorePrompt_spaceExplore"
                         onClick={this.onExplore}
+                        title={_t("Explore %(spaceName)s", { spaceName })}
                     >
                         { _t("Explore rooms") }
-                    </AccessibleButton> }
+                    </AccessibleTooltipButton> }
                 </div>;
             } else if (Object.values(this.state.sublists).some(list => list.length > 0)) {
                 const unfilteredLists = RoomListStore.instance.unfilteredLists;
@@ -549,7 +547,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                 const unfilteredHistorical = unfilteredLists[DefaultTagID.Archived] || [];
                 const unfilteredFavourite = unfilteredLists[DefaultTagID.Favourite] || [];
                 // show a prompt to join/create rooms if the user is in 0 rooms and no historical
-                if (unfilteredRooms.length < 1 && unfilteredHistorical < 1 && unfilteredFavourite < 1) {
+                if (unfilteredRooms.length < 1 && unfilteredHistorical.length < 1 && unfilteredFavourite.length < 1) {
                     explorePrompt = <div className="mx_RoomList_explorePrompt">
                         <div>{ _t("Use the + to make a new room or explore existing ones below") }</div>
                         <AccessibleButton

src/components/views/rooms/RoomPreviewBar.tsx

@@ -14,8 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixError } from "matrix-js-sdk/src/http-api";
+import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
+import { IJoinRuleEventContent, JoinRule } from "matrix-js-sdk/src/@types/partials";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+
 import * as sdk from '../../../index';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
@@ -27,89 +32,102 @@ import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import InviteReason from "../elements/InviteReason";
+import { IOOBData } from "../../../stores/ThreepidInviteStore";
+import Spinner from "../elements/Spinner";
+import AccessibleButton from "../elements/AccessibleButton";
 
-const MessageCase = Object.freeze({
-    NotLoggedIn: "NotLoggedIn",
-    Joining: "Joining",
-    Loading: "Loading",
-    Rejecting: "Rejecting",
-    Kicked: "Kicked",
-    Banned: "Banned",
-    OtherThreePIDError: "OtherThreePIDError",
-    InvitedEmailNotFoundInAccount: "InvitedEmailNotFoundInAccount",
-    InvitedEmailNoIdentityServer: "InvitedEmailNoIdentityServer",
-    InvitedEmailMismatch: "InvitedEmailMismatch",
-    Invite: "Invite",
-    ViewingRoom: "ViewingRoom",
-    RoomNotFound: "RoomNotFound",
-    OtherError: "OtherError",
-});
+const MemberEventHtmlReasonField = "io.element.html_reason";
+
+enum MessageCase {
+    NotLoggedIn = "NotLoggedIn",
+    Joining = "Joining",
+    Loading = "Loading",
+    Rejecting = "Rejecting",
+    Kicked = "Kicked",
+    Banned = "Banned",
+    OtherThreePIDError = "OtherThreePIDError",
+    InvitedEmailNotFoundInAccount = "InvitedEmailNotFoundInAccount",
+    InvitedEmailNoIdentityServer = "InvitedEmailNoIdentityServer",
+    InvitedEmailMismatch = "InvitedEmailMismatch",
+    Invite = "Invite",
+    ViewingRoom = "ViewingRoom",
+    RoomNotFound = "RoomNotFound",
+    OtherError = "OtherError",
+}
+
+interface IProps {
+    // if inviterName is specified, the preview bar will shown an invite to the room.
+    // You should also specify onRejectClick if specifying inviterName
+    inviterName?: string;
+
+    // If invited by 3rd party invite, the email address the invite was sent to
+    invitedEmail?: string;
+
+    // For third party invites, information passed about the room out-of-band
+    oobData?: IOOBData;
+
+    // For third party invites, a URL for a 3pid invite signing service
+    signUrl?: string;
+
+    // A standard client/server API error object. If supplied, indicates that the
+    // caller was unable to fetch details about the room for the given reason.
+    error?: MatrixError;
+
+    canPreview?: boolean;
+    previewLoading?: boolean;
+    room?: Room;
+
+    loading?: boolean;
+    joining?: boolean;
+    rejecting?: boolean;
+    // The alias that was used to access this room, if appropriate
+    // If given, this will be how the room is referred to (eg.
+    // in error messages).
+    roomAlias?: string;
+
+    onJoinClick?(): void;
+    onRejectClick?(): void;
+    onRejectAndIgnoreClick?(): void;
+    onForgetClick?(): void;
+}
+
+interface IState {
+    busy: boolean;
+    accountEmails?: string[];
+    invitedEmailMxid?: string;
+    threePidFetchError?: MatrixError;
+}
 
 @replaceableComponent("views.rooms.RoomPreviewBar")
-export default class RoomPreviewBar extends React.Component {
-    static propTypes = {
-        onJoinClick: PropTypes.func,
-        onRejectClick: PropTypes.func,
-        onRejectAndIgnoreClick: PropTypes.func,
-        onForgetClick: PropTypes.func,
-        // if inviterName is specified, the preview bar will shown an invite to the room.
-        // You should also specify onRejectClick if specifiying inviterName
-        inviterName: PropTypes.string,
-
-        // If invited by 3rd party invite, the email address the invite was sent to
-        invitedEmail: PropTypes.string,
-
-        // For third party invites, information passed about the room out-of-band
-        oobData: PropTypes.object,
-
-        // For third party invites, a URL for a 3pid invite signing service
-        signUrl: PropTypes.string,
-
-        // A standard client/server API error object. If supplied, indicates that the
-        // caller was unable to fetch details about the room for the given reason.
-        error: PropTypes.object,
-
-        canPreview: PropTypes.bool,
-        previewLoading: PropTypes.bool,
-        room: PropTypes.object,
-
-        // When a spinner is present, a spinnerState can be specified to indicate the
-        // purpose of the spinner.
-        spinner: PropTypes.bool,
-        spinnerState: PropTypes.oneOf(["joining"]),
-        loading: PropTypes.bool,
-        joining: PropTypes.bool,
-        rejecting: PropTypes.bool,
-        // The alias that was used to access this room, if appropriate
-        // If given, this will be how the room is referred to (eg.
-        // in error messages).
-        roomAlias: PropTypes.string,
-    };
-
+export default class RoomPreviewBar extends React.Component<IProps, IState> {
     static defaultProps = {
         onJoinClick() {},
     };
 
-    state = {
-        busy: false,
-    };
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            busy: false,
+        };
+    }
 
     componentDidMount() {
-        this._checkInvitedEmail();
-        CommunityPrototypeStore.instance.on(UPDATE_EVENT, this._onCommunityUpdate);
+        this.checkInvitedEmail();
+        CommunityPrototypeStore.instance.on(UPDATE_EVENT, this.onCommunityUpdate);
     }
 
     componentDidUpdate(prevProps, prevState) {
         if (this.props.invitedEmail !== prevProps.invitedEmail || this.props.inviterName !== prevProps.inviterName) {
-            this._checkInvitedEmail();
+            this.checkInvitedEmail();
         }
     }
 
     componentWillUnmount() {
-        CommunityPrototypeStore.instance.off(UPDATE_EVENT, this._onCommunityUpdate);
+        CommunityPrototypeStore.instance.off(UPDATE_EVENT, this.onCommunityUpdate);
     }
 
-    async _checkInvitedEmail() {
+    private async checkInvitedEmail() {
         // If this is an invite and we've been told what email address was
         // invited, fetch the user's account emails and discovery bindings so we
         // can check them against the email that was invited.
@@ -119,8 +137,7 @@ export default class RoomPreviewBar extends React.Component {
                 // Gather the account 3PIDs
                 const account3pids = await MatrixClientPeg.get().getThreePids();
                 this.setState({
-                    accountEmails: account3pids.threepids
-                        .filter(b => b.medium === 'email').map(b => b.address),
+                    accountEmails: account3pids.threepids.filter(b => b.medium === 'email').map(b => b.address),
                 });
                 // If we have an IS connected, use that to lookup the email and
                 // check the bound MXID.
@@ -144,21 +161,21 @@ export default class RoomPreviewBar extends React.Component {
         }
     }
 
-    _onCommunityUpdate = (roomId) => {
+    private onCommunityUpdate = (roomId: string): void => {
         if (this.props.room && this.props.room.roomId !== roomId) {
             return;
         }
         this.forceUpdate(); // we have nothing to update
     };
 
-    _getMessageCase() {
+    private getMessageCase(): MessageCase {
         const isGuest = MatrixClientPeg.get().isGuest();
 
         if (isGuest) {
             return MessageCase.NotLoggedIn;
         }
 
-        const myMember = this._getMyMember();
+        const myMember = this.getMyMember();
 
         if (myMember) {
             if (myMember.isKicked()) {
@@ -193,7 +210,7 @@ export default class RoomPreviewBar extends React.Component {
             }
             return MessageCase.Invite;
         } else if (this.props.error) {
-            if (this.props.error.errcode == 'M_NOT_FOUND') {
+            if ((this.props.error as MatrixError).errcode == 'M_NOT_FOUND') {
                 return MessageCase.RoomNotFound;
             } else {
                 return MessageCase.OtherError;
@@ -203,8 +220,8 @@ export default class RoomPreviewBar extends React.Component {
         }
     }
 
-    _getKickOrBanInfo() {
-        const myMember = this._getMyMember();
+    private getKickOrBanInfo(): { memberName?: string, reason?: string } {
+        const myMember = this.getMyMember();
         if (!myMember) {
             return {};
         }
@@ -217,24 +234,19 @@ export default class RoomPreviewBar extends React.Component {
         return { memberName, reason };
     }
 
-    _joinRule() {
-        const room = this.props.room;
-        if (room) {
-            const joinRules = room.currentState.getStateEvents('m.room.join_rules', '');
-            if (joinRules) {
-                return joinRules.getContent().join_rule;
-            }
-        }
+    private joinRule(): JoinRule {
+        return this.props.room?.currentState
+            .getStateEvents(EventType.RoomJoinRules, "")?.getContent<IJoinRuleEventContent>().join_rule;
     }
 
-    _communityProfile() {
+    private communityProfile(): { displayName?: string, avatarMxc?: string } {
         if (this.props.room) return CommunityPrototypeStore.instance.getInviteProfile(this.props.room.roomId);
         return { displayName: null, avatarMxc: null };
     }
 
-    _roomName(atStart = false) {
+    private roomName(atStart = false): string {
         let name = this.props.room ? this.props.room.name : this.props.roomAlias;
-        const profile = this._communityProfile();
+        const profile = this.communityProfile();
         if (profile.displayName) name = profile.displayName;
         if (name) {
             return name;
@@ -245,14 +257,11 @@ export default class RoomPreviewBar extends React.Component {
         }
     }
 
-    _getMyMember() {
-        return (
-            this.props.room &&
-            this.props.room.getMember(MatrixClientPeg.get().getUserId())
-        );
+    private getMyMember(): RoomMember {
+        return this.props.room?.getMember(MatrixClientPeg.get().getUserId());
     }
 
-    _getInviteMember() {
+    private getInviteMember(): RoomMember {
         const { room } = this.props;
         if (!room) {
             return;
@@ -266,8 +275,8 @@ export default class RoomPreviewBar extends React.Component {
         return room.currentState.getMember(inviterUserId);
     }
 
-    _isDMInvite() {
-        const myMember = this._getMyMember();
+    private isDMInvite(): boolean {
+        const myMember = this.getMyMember();
         if (!myMember) {
             return false;
         }
@@ -276,7 +285,7 @@ export default class RoomPreviewBar extends React.Component {
         return memberContent.membership === "invite" && memberContent.is_direct;
     }
 
-    _makeScreenAfterLogin() {
+    private makeScreenAfterLogin(): { screen: string, params: Record<string, any> } {
         return {
             screen: 'room',
             params: {
@@ -289,18 +298,16 @@ export default class RoomPreviewBar extends React.Component {
         };
     }
 
-    onLoginClick = () => {
-        dis.dispatch({ action: 'start_login', screenAfterLogin: this._makeScreenAfterLogin() });
+    private onLoginClick = () => {
+        dis.dispatch({ action: 'start_login', screenAfterLogin: this.makeScreenAfterLogin() });
     };
 
-    onRegisterClick = () => {
-        dis.dispatch({ action: 'start_registration', screenAfterLogin: this._makeScreenAfterLogin() });
+    private onRegisterClick = () => {
+        dis.dispatch({ action: 'start_registration', screenAfterLogin: this.makeScreenAfterLogin() });
     };
 
     render() {
         const brand = SdkConfig.get().brand;
-        const Spinner = sdk.getComponent('elements.Spinner');
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
         let showSpinner = false;
         let title;
@@ -313,10 +320,10 @@ export default class RoomPreviewBar extends React.Component {
         let footer;
         const extraComponents = [];
 
-        const messageCase = this._getMessageCase();
+        const messageCase = this.getMessageCase();
         switch (messageCase) {
             case MessageCase.Joining: {
-                title = _t("Joining room …");
+                title = this.props.oobData?.roomType === RoomType.Space ? _t("Joining space …") : _t("Joining room …");
                 showSpinner = true;
                 break;
             }
@@ -347,12 +354,12 @@ export default class RoomPreviewBar extends React.Component {
                 break;
             }
             case MessageCase.Kicked: {
-                const { memberName, reason } = this._getKickOrBanInfo();
+                const { memberName, reason } = this.getKickOrBanInfo();
                 title = _t("You were kicked from %(roomName)s by %(memberName)s",
-                    { memberName, roomName: this._roomName() });
+                    { memberName, roomName: this.roomName() });
                 subTitle = reason ? _t("Reason: %(reason)s", { reason }) : null;
 
-                if (this._joinRule() === "invite") {
+                if (this.joinRule() === "invite") {
                     primaryActionLabel = _t("Forget this room");
                     primaryActionHandler = this.props.onForgetClick;
                 } else {
@@ -364,9 +371,9 @@ export default class RoomPreviewBar extends React.Component {
                 break;
             }
             case MessageCase.Banned: {
-                const { memberName, reason } = this._getKickOrBanInfo();
+                const { memberName, reason } = this.getKickOrBanInfo();
                 title = _t("You were banned from %(roomName)s by %(memberName)s",
-                    { memberName, roomName: this._roomName() });
+                    { memberName, roomName: this.roomName() });
                 subTitle = reason ? _t("Reason: %(reason)s", { reason }) : null;
                 primaryActionLabel = _t("Forget this room");
                 primaryActionHandler = this.props.onForgetClick;
@@ -374,8 +381,8 @@ export default class RoomPreviewBar extends React.Component {
             }
             case MessageCase.OtherThreePIDError: {
                 title = _t("Something went wrong with your invite to %(roomName)s",
-                    { roomName: this._roomName() });
-                const joinRule = this._joinRule();
+                    { roomName: this.roomName() });
+                const joinRule = this.joinRule();
                 const errCodeMessage = _t(
                     "An error (%(errcode)s) was returned while trying to validate your " +
                     "invite. You could try to pass this information on to a room admin.",
@@ -408,7 +415,7 @@ export default class RoomPreviewBar extends React.Component {
                     "This invite to %(roomName)s was sent to %(email)s which is not " +
                     "associated with your account",
                     {
-                        roomName: this._roomName(),
+                        roomName: this.roomName(),
                         email: this.props.invitedEmail,
                     },
                 );
@@ -425,7 +432,7 @@ export default class RoomPreviewBar extends React.Component {
                 title = _t(
                     "This invite to %(roomName)s was sent to %(email)s",
                     {
-                        roomName: this._roomName(),
+                        roomName: this.roomName(),
                         email: this.props.invitedEmail,
                     },
                 );
@@ -441,7 +448,7 @@ export default class RoomPreviewBar extends React.Component {
                 title = _t(
                     "This invite to %(roomName)s was sent to %(email)s",
                     {
-                        roomName: this._roomName(),
+                        roomName: this.roomName(),
                         email: this.props.invitedEmail,
                     },
                 );
@@ -456,11 +463,11 @@ export default class RoomPreviewBar extends React.Component {
             case MessageCase.Invite: {
                 const RoomAvatar = sdk.getComponent("views.avatars.RoomAvatar");
                 const oobData = Object.assign({}, this.props.oobData, {
-                    avatarUrl: this._communityProfile().avatarMxc,
+                    avatarUrl: this.communityProfile().avatarMxc,
                 });
                 const avatar = <RoomAvatar room={this.props.room} oobData={oobData} />;
 
-                const inviteMember = this._getInviteMember();
+                const inviteMember = this.getInviteMember();
                 let inviterElement;
                 if (inviteMember) {
                     inviterElement = <span>
@@ -472,7 +479,7 @@ export default class RoomPreviewBar extends React.Component {
                     inviterElement = (<span className="mx_RoomPreviewBar_inviter">{ this.props.inviterName }</span>);
                 }
 
-                const isDM = this._isDMInvite();
+                const isDM = this.isDMInvite();
                 if (isDM) {
                     title = _t("Do you want to chat with %(user)s?",
                         { user: inviteMember.name });
@@ -483,7 +490,7 @@ export default class RoomPreviewBar extends React.Component {
                     primaryActionLabel = _t("Start chatting");
                 } else {
                     title = _t("Do you want to join %(roomName)s?",
-                        { roomName: this._roomName() });
+                        { roomName: this.roomName() });
                     subTitle = [
                         avatar,
                         _t("<userName/> invited you", {}, { userName: () => inviterElement }),
@@ -492,9 +499,13 @@ export default class RoomPreviewBar extends React.Component {
                 }
 
                 const myUserId = MatrixClientPeg.get().getUserId();
-                const reason = this.props.room.currentState.getMember(myUserId).events.member.event.content.reason;
-                if (reason) {
-                    reasonElement = <InviteReason reason={reason} />;
+                const memberEventContent = this.props.room.currentState.getMember(myUserId).events.member.getContent();
+
+                if (memberEventContent.reason) {
+                    reasonElement = <InviteReason
+                        reason={memberEventContent.reason}
+                        htmlReason={memberEventContent[MemberEventHtmlReasonField]}
+                    />;
                 }
 
                 primaryActionHandler = this.props.onJoinClick;
@@ -513,22 +524,22 @@ export default class RoomPreviewBar extends React.Component {
             case MessageCase.ViewingRoom: {
                 if (this.props.canPreview) {
                     title = _t("You're previewing %(roomName)s. Want to join it?",
-                        { roomName: this._roomName() });
+                        { roomName: this.roomName() });
                 } else {
                     title = _t("%(roomName)s can't be previewed. Do you want to join it?",
-                        { roomName: this._roomName(true) });
+                        { roomName: this.roomName(true) });
                 }
                 primaryActionLabel = _t("Join the discussion");
                 primaryActionHandler = this.props.onJoinClick;
                 break;
             }
             case MessageCase.RoomNotFound: {
-                title = _t("%(roomName)s does not exist.", { roomName: this._roomName(true) });
+                title = _t("%(roomName)s does not exist.", { roomName: this.roomName(true) });
                 subTitle = _t("This room doesn't exist. Are you sure you're at the right place?");
                 break;
             }
             case MessageCase.OtherError: {
-                title = _t("%(roomName)s is not accessible at this time.", { roomName: this._roomName(true) });
+                title = _t("%(roomName)s is not accessible at this time.", { roomName: this.roomName(true) });
                 subTitle = [
                     _t("Try again later, or ask a room admin to check if you have access."),
                     _t(

src/components/views/rooms/RoomSublist.tsx

@@ -670,6 +670,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                             onClick={this.onBadgeClick}
                             tabIndex={tabIndex}
                             aria-label={ariaLabel}
+                            showUnsentTooltip={true}
                         />
                     );
 

src/components/views/rooms/RoomTile.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 
 import React, { createRef } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import classNames from "classnames";
 import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
 import AccessibleButton, { ButtonEvent } from "../../views/elements/AccessibleButton";
@@ -51,8 +50,6 @@ import IconizedContextMenu, {
 } from "../context_menus/IconizedContextMenu";
 import { CommunityPrototypeStore, IRoomProfile } from "../../../stores/CommunityPrototypeStore";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
-import { getUnsentMessages } from "../../structures/RoomStatusBar";
-import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
 
 interface IProps {
     room: Room;
@@ -68,7 +65,6 @@ interface IState {
     notificationsMenuPosition: PartialDOMRect;
     generalMenuPosition: PartialDOMRect;
     messagePreview?: string;
-    hasUnsentEvents: boolean;
 }
 
 const messagePreviewId = (roomId: string) => `mx_RoomTile_messagePreview_${roomId}`;
@@ -95,7 +91,6 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             selected: ActiveRoomObserver.activeRoomId === this.props.room.roomId,
             notificationsMenuPosition: null,
             generalMenuPosition: null,
-            hasUnsentEvents: this.countUnsentEvents() > 0,
 
             // generatePreview() will return nothing if the user has previews disabled
             messagePreview: "",
@@ -106,11 +101,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         this.roomProps = EchoChamber.forRoom(this.props.room);
     }
 
-    private countUnsentEvents(): number {
-        return getUnsentMessages(this.props.room).length;
-    }
-
-    private onRoomNameUpdate = (room) => {
+    private onRoomNameUpdate = (room: Room) => {
         this.forceUpdate();
     };
 
@@ -118,11 +109,6 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         this.forceUpdate(); // notification state changed - update
     };
 
-    private onLocalEchoUpdated = (ev: MatrixEvent, room: Room) => {
-        if (room?.roomId !== this.props.room.roomId) return;
-        this.setState({ hasUnsentEvents: this.countUnsentEvents() > 0 });
-    };
-
     private onRoomPropertyUpdate = (property: CachedRoomKey) => {
         if (property === CachedRoomKey.NotificationVolume) this.onNotificationUpdate();
         // else ignore - not important for this tile
@@ -178,12 +164,11 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         );
         this.notificationState.on(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
         this.roomProps.on(PROPERTY_UPDATED, this.onRoomPropertyUpdate);
-        this.roomProps.on("Room.name", this.onRoomNameUpdate);
+        this.props.room?.on("Room.name", this.onRoomNameUpdate);
         CommunityPrototypeStore.instance.on(
             CommunityPrototypeStore.getUpdateEventName(this.props.room.roomId),
             this.onCommunityUpdate,
         );
-        MatrixClientPeg.get().on("Room.localEchoUpdated", this.onLocalEchoUpdated);
     }
 
     public componentWillUnmount() {
@@ -208,7 +193,6 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             CommunityPrototypeStore.getUpdateEventName(this.props.room.roomId),
             this.onCommunityUpdate,
         );
-        MatrixClientPeg.get()?.removeListener("Room.localEchoUpdated", this.onLocalEchoUpdated);
     }
 
     private onAction = (payload: ActionPayload) => {
@@ -587,30 +571,17 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         />;
 
         let badge: React.ReactNode;
-        if (!this.props.isMinimized) {
+        if (!this.props.isMinimized && this.notificationState) {
             // aria-hidden because we summarise the unread count/highlight status in a manual aria-label below
-            if (this.state.hasUnsentEvents) {
-                // hardcode the badge to a danger state when there's unsent messages
-                badge = (
-                    <div className="mx_RoomTile_badgeContainer" aria-hidden="true">
-                        <NotificationBadge
-                            notification={StaticNotificationState.RED_EXCLAMATION}
-                            forceCount={false}
-                            roomId={this.props.room.roomId}
-                        />
-                    </div>
-                );
-            } else if (this.notificationState) {
-                badge = (
-                    <div className="mx_RoomTile_badgeContainer" aria-hidden="true">
-                        <NotificationBadge
-                            notification={this.notificationState}
-                            forceCount={false}
-                            roomId={this.props.room.roomId}
-                        />
-                    </div>
-                );
-            }
+            badge = (
+                <div className="mx_RoomTile_badgeContainer" aria-hidden="true">
+                    <NotificationBadge
+                        notification={this.notificationState}
+                        forceCount={false}
+                        roomId={this.props.room.roomId}
+                    />
+                </div>
+            );
         }
 
         let messagePreview = null;

src/components/views/rooms/RoomUpgradeWarningBar.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2018-2020 New Vector Ltd
+Copyright 2018-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,41 +15,43 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { Room } from 'matrix-js-sdk/src/models/room';
+import { RoomState } from 'matrix-js-sdk/src/models/room-state';
+
 import Modal from '../../../Modal';
 
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import RoomUpgradeDialog from '../dialogs/RoomUpgradeDialog';
+import AccessibleButton from '../elements/AccessibleButton';
+
+interface IProps {
+    room: Room;
+}
+
+interface IState {
+    upgraded?: boolean;
+}
 
 @replaceableComponent("views.rooms.RoomUpgradeWarningBar")
-export default class RoomUpgradeWarningBar extends React.PureComponent {
-    static propTypes = {
-        room: PropTypes.object.isRequired,
-        recommendation: PropTypes.object.isRequired,
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {};
-    }
-
-    componentDidMount() {
+export default class RoomUpgradeWarningBar extends React.PureComponent<IProps, IState> {
+    public componentDidMount(): void {
         const tombstone = this.props.room.currentState.getStateEvents("m.room.tombstone", "");
         this.setState({ upgraded: tombstone && tombstone.getContent().replacement_room });
 
-        MatrixClientPeg.get().on("RoomState.events", this._onStateEvents);
+        MatrixClientPeg.get().on("RoomState.events", this.onStateEvents);
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount(): void {
         const cli = MatrixClientPeg.get();
         if (cli) {
-            cli.removeListener("RoomState.events", this._onStateEvents);
+            cli.removeListener("RoomState.events", this.onStateEvents);
         }
     }
 
-    _onStateEvents = (event, state) => {
+    private onStateEvents = (event: MatrixEvent, state: RoomState): void => {
         if (!this.props.room || event.getRoomId() !== this.props.room.roomId) {
             return;
         }
@@ -60,14 +62,11 @@ export default class RoomUpgradeWarningBar extends React.PureComponent {
         this.setState({ upgraded: tombstone && tombstone.getContent().replacement_room });
     };
 
-    onUpgradeClick = () => {
-        const RoomUpgradeDialog = sdk.getComponent('dialogs.RoomUpgradeDialog');
+    private onUpgradeClick = (): void => {
         Modal.createTrackedDialog('Upgrade Room Version', '', RoomUpgradeDialog, { room: this.props.room });
     };
 
-    render() {
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-
+    public render(): JSX.Element {
         let doUpgradeWarnings = (
             <div>
                 <div className="mx_RoomUpgradeWarningBar_body">

src/components/views/rooms/SendMessageComposer.tsx

@@ -31,8 +31,8 @@ import {
     textSerialize,
     unescapeMessage,
 } from '../../../editor/serialize';
+import BasicMessageComposer, { REGEX_EMOTICON } from "./BasicMessageComposer";
 import { CommandPartCreator, Part, PartCreator, SerializedPart, Type } from '../../../editor/parts';
-import BasicMessageComposer from "./BasicMessageComposer";
 import ReplyThread from "../elements/ReplyThread";
 import { findEditableEvent } from '../../../utils/EventUtils';
 import SendHistoryManager from "../../../SendHistoryManager";
@@ -54,18 +54,22 @@ import { Room } from 'matrix-js-sdk/src/models/room';
 import ErrorDialog from "../dialogs/ErrorDialog";
 import QuestionDialog from "../dialogs/QuestionDialog";
 import { ActionPayload } from "../../../dispatcher/payloads";
+import { decorateStartSendingTime, sendRoundTripMetric } from "../../../sendTimePerformanceMetrics";
+
+import { logger } from "matrix-js-sdk/src/logger";
 
 function addReplyToMessageContent(
     content: IContent,
-    repliedToEvent: MatrixEvent,
+    replyToEvent: MatrixEvent,
+    replyInThread: boolean,
     permalinkCreator: RoomPermalinkCreator,
 ): void {
-    const replyContent = ReplyThread.makeReplyMixIn(repliedToEvent);
+    const replyContent = ReplyThread.makeReplyMixIn(replyToEvent, replyInThread);
     Object.assign(content, replyContent);
 
     // Part of Replies fallback support - prepend the text we're sending
     // with the text we're replying to
-    const nestedReply = ReplyThread.getNestedReplyText(repliedToEvent, permalinkCreator);
+    const nestedReply = ReplyThread.getNestedReplyText(replyToEvent, permalinkCreator);
     if (nestedReply) {
         if (content.formatted_body) {
             content.formatted_body = nestedReply.html + content.formatted_body;
@@ -77,8 +81,9 @@ function addReplyToMessageContent(
 // exported for tests
 export function createMessageContent(
     model: EditorModel,
-    permalinkCreator: RoomPermalinkCreator,
     replyToEvent: MatrixEvent,
+    replyInThread: boolean,
+    permalinkCreator: RoomPermalinkCreator,
 ): IContent {
     const isEmote = containsEmote(model);
     if (isEmote) {
@@ -101,7 +106,7 @@ export function createMessageContent(
     }
 
     if (replyToEvent) {
-        addReplyToMessageContent(content, replyToEvent, permalinkCreator);
+        addReplyToMessageContent(content, replyToEvent, replyInThread, permalinkCreator);
     }
 
     return content;
@@ -129,6 +134,7 @@ interface IProps {
     room: Room;
     placeholder?: string;
     permalinkCreator: RoomPermalinkCreator;
+    replyInThread?: boolean;
     replyToEvent?: MatrixEvent;
     disabled?: boolean;
     onChange?(model: EditorModel): void;
@@ -337,27 +343,41 @@ export default class SendMessageComposer extends React.Component<IProps> {
                 description: errText,
             });
         } else {
-            console.log("Command success.");
+            logger.log("Command success.");
             if (messageContent) return messageContent;
         }
     }
 
     public async sendMessage(): Promise<void> {
-        if (this.model.isEmpty) {
+        const model = this.model;
+
+        if (model.isEmpty) {
             return;
         }
 
+        // Replace emoticon at the end of the message
+        if (SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji')) {
+            const caret = this.editorRef.current?.getCaret();
+            const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
+            this.editorRef.current?.replaceEmoticon(position, REGEX_EMOTICON);
+        }
+
         const replyToEvent = this.props.replyToEvent;
         let shouldSend = true;
         let content;
 
-        if (!containsEmote(this.model) && this.isSlashCommand()) {
+        if (!containsEmote(model) && this.isSlashCommand()) {
             const [cmd, args, commandText] = this.getSlashCommand();
             if (cmd) {
                 if (cmd.category === CommandCategories.messages) {
                     content = await this.runSlashCommand(cmd, args);
                     if (replyToEvent) {
-                        addReplyToMessageContent(content, replyToEvent, this.props.permalinkCreator);
+                        addReplyToMessageContent(
+                            content,
+                            replyToEvent,
+                            this.props.replyInThread,
+                            this.props.permalinkCreator,
+                        );
                     }
                 } else {
                     this.runSlashCommand(cmd, args);
@@ -391,7 +411,7 @@ export default class SendMessageComposer extends React.Component<IProps> {
             }
         }
 
-        if (isQuickReaction(this.model)) {
+        if (isQuickReaction(model)) {
             shouldSend = false;
             this.sendQuickReaction();
         }
@@ -400,11 +420,20 @@ export default class SendMessageComposer extends React.Component<IProps> {
             const startTime = CountlyAnalytics.getTimestamp();
             const { roomId } = this.props.room;
             if (!content) {
-                content = createMessageContent(this.model, this.props.permalinkCreator, replyToEvent);
+                content = createMessageContent(
+                    model,
+                    replyToEvent,
+                    this.props.replyInThread,
+                    this.props.permalinkCreator,
+                );
             }
             // don't bother sending an empty message
             if (!content.body.trim()) return;
 
+            if (SettingsStore.getValue("Performance.addSendMessageTimingMetadata")) {
+                decorateStartSendingTime(content);
+            }
+
             const prom = this.context.sendMessage(roomId, content);
             if (replyToEvent) {
                 // Clear reply_to_event as we put the message into the queue
@@ -420,12 +449,17 @@ export default class SendMessageComposer extends React.Component<IProps> {
                     dis.dispatch({ action: `effects.${effect.command}` });
                 }
             });
+            if (SettingsStore.getValue("Performance.addSendMessageTimingMetadata")) {
+                prom.then(resp => {
+                    sendRoundTripMetric(this.context, roomId, resp.event_id);
+                });
+            }
             CountlyAnalytics.instance.trackSendMessage(startTime, prom, roomId, false, !!replyToEvent, content);
         }
 
-        this.sendHistoryManager.save(this.model, replyToEvent);
+        this.sendHistoryManager.save(model, replyToEvent);
         // clear composer
-        this.model.reset([]);
+        model.reset([]);
         this.editorRef.current?.clearUndoHistory();
         this.editorRef.current?.focus();
         this.clearStoredEditorState();

src/components/views/rooms/SimpleRoomHeader.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
+Copyright 2016-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,23 +15,21 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
+interface IProps {
+    title?: string;
+    // `src` to an image. Optional.
+    icon?: string;
+}
+
 /*
  * A stripped-down room header used for things like the user settings
  * and room directory.
  */
 @replaceableComponent("views.rooms.SimpleRoomHeader")
-export default class SimpleRoomHeader extends React.Component {
-    static propTypes = {
-        title: PropTypes.string,
-
-        // `src` to an image. Optional.
-        icon: PropTypes.string,
-    };
-
-    render() {
+export default class SimpleRoomHeader extends React.PureComponent<IProps> {
+    public render(): JSX.Element {
         let icon;
         if (this.props.icon) {
             icon = <img

src/components/views/rooms/Stickerpicker.tsx

@@ -14,23 +14,27 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from 'react';
-import classNames from 'classnames';
+import { Room } from 'matrix-js-sdk/src/models/room';
 import { _t, _td } from '../../../languageHandler';
 import AppTile from '../elements/AppTile';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
-import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import AccessibleButton from '../elements/AccessibleButton';
-import WidgetUtils from '../../../utils/WidgetUtils';
+import WidgetUtils, { IWidgetEvent } from '../../../utils/WidgetUtils';
 import PersistedElement from "../elements/PersistedElement";
 import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
 import SettingsStore from "../../../settings/SettingsStore";
-import { ContextMenu } from "../../structures/ContextMenu";
+import { ChevronFace, ContextMenu } from "../../structures/ContextMenu";
 import { WidgetType } from "../../../widgets/WidgetType";
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { Action } from "../../../dispatcher/actions";
 import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { ActionPayload } from '../../../dispatcher/payloads';
+import ScalarAuthClient from '../../../ScalarAuthClient';
+import GenericElementContextMenu from "../context_menus/GenericElementContextMenu";
+import { IApp } from "../../../stores/WidgetStore";
+
+import { logger } from "matrix-js-sdk/src/logger";
 
 // This should be below the dialog level (4000), but above the rest of the UI (1000-2000).
 // We sit in a context menu, so this should be given to the context menu.
@@ -39,29 +43,38 @@ const STICKERPICKER_Z_INDEX = 3500;
 // Key to store the widget's AppTile under in PersistedElement
 const PERSISTED_ELEMENT_KEY = "stickerPicker";
 
+interface IProps {
+    room: Room;
+    showStickers: boolean;
+    menuPosition?: any;
+    setShowStickers: (showStickers: boolean) => void;
+}
+
+interface IState {
+    imError: string;
+    stickerpickerX: number;
+    stickerpickerY: number;
+    stickerpickerChevronOffset?: number;
+    stickerpickerWidget: IWidgetEvent;
+    widgetId: string;
+}
+
 @replaceableComponent("views.rooms.Stickerpicker")
-export default class Stickerpicker extends React.PureComponent {
+export default class Stickerpicker extends React.PureComponent<IProps, IState> {
     static currentWidget;
 
-    constructor(props) {
+    private dispatcherRef: string;
+
+    private prevSentVisibility: boolean;
+
+    private popoverWidth = 300;
+    private popoverHeight = 300;
+    // This is loaded by _acquireScalarClient on an as-needed basis.
+    private scalarClient: ScalarAuthClient = null;
+
+    constructor(props: IProps) {
         super(props);
-        this._onShowStickersClick = this._onShowStickersClick.bind(this);
-        this._onHideStickersClick = this._onHideStickersClick.bind(this);
-        this._launchManageIntegrations = this._launchManageIntegrations.bind(this);
-        this._removeStickerpickerWidgets = this._removeStickerpickerWidgets.bind(this);
-        this._updateWidget = this._updateWidget.bind(this);
-        this._onWidgetAction = this._onWidgetAction.bind(this);
-        this._onResize = this._onResize.bind(this);
-        this._onFinished = this._onFinished.bind(this);
-
-        this.popoverWidth = 300;
-        this.popoverHeight = 300;
-
-        // This is loaded by _acquireScalarClient on an as-needed basis.
-        this.scalarClient = null;
-
         this.state = {
-            showStickers: false,
             imError: null,
             stickerpickerX: null,
             stickerpickerY: null,
@@ -70,7 +83,7 @@ export default class Stickerpicker extends React.PureComponent {
         };
     }
 
-    _acquireScalarClient() {
+    private acquireScalarClient(): Promise<void | ScalarAuthClient> {
         if (this.scalarClient) return Promise.resolve(this.scalarClient);
         // TODO: Pick the right manager for the widget
         if (IntegrationManagers.sharedInstance().hasManager()) {
@@ -79,20 +92,20 @@ export default class Stickerpicker extends React.PureComponent {
                 this.forceUpdate();
                 return this.scalarClient;
             }).catch((e) => {
-                this._imError(_td("Failed to connect to integration manager"), e);
+                this.imError(_td("Failed to connect to integration manager"), e);
             });
         } else {
             IntegrationManagers.sharedInstance().openNoManagerDialog();
         }
     }
 
-    async _removeStickerpickerWidgets() {
-        const scalarClient = await this._acquireScalarClient();
-        console.log('Removing Stickerpicker widgets');
+    private removeStickerpickerWidgets = async (): Promise<void> => {
+        const scalarClient = await this.acquireScalarClient();
+        logger.log('Removing Stickerpicker widgets');
         if (this.state.widgetId) {
             if (scalarClient) {
                 scalarClient.disableWidgetAssets(WidgetType.STICKERPICKER, this.state.widgetId).then(() => {
-                    console.log('Assets disabled');
+                    logger.log('Assets disabled');
                 }).catch((err) => {
                     console.error('Failed to disable assets');
                 });
@@ -103,50 +116,50 @@ export default class Stickerpicker extends React.PureComponent {
             console.warn('No widget ID specified, not disabling assets');
         }
 
-        this.setState({ showStickers: false });
+        this.props.setShowStickers(false);
         WidgetUtils.removeStickerpickerWidgets().then(() => {
             this.forceUpdate();
         }).catch((e) => {
             console.error('Failed to remove sticker picker widget', e);
         });
-    }
+    };
 
-    componentDidMount() {
+    public componentDidMount(): void {
         // Close the sticker picker when the window resizes
-        window.addEventListener('resize', this._onResize);
+        window.addEventListener('resize', this.onResize);
 
-        this.dispatcherRef = dis.register(this._onWidgetAction);
+        this.dispatcherRef = dis.register(this.onWidgetAction);
 
         // Track updates to widget state in account data
-        MatrixClientPeg.get().on('accountData', this._updateWidget);
+        MatrixClientPeg.get().on('accountData', this.updateWidget);
 
         // Initialise widget state from current account data
-        this._updateWidget();
+        this.updateWidget();
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount(): void {
         const client = MatrixClientPeg.get();
-        if (client) client.removeListener('accountData', this._updateWidget);
+        if (client) client.removeListener('accountData', this.updateWidget);
 
-        window.removeEventListener('resize', this._onResize);
+        window.removeEventListener('resize', this.onResize);
         if (this.dispatcherRef) {
             dis.unregister(this.dispatcherRef);
         }
     }
 
-    componentDidUpdate(prevProps, prevState) {
-        this._sendVisibilityToWidget(this.state.showStickers);
+    public componentDidUpdate(prevProps: IProps, prevState: IState): void {
+        this.sendVisibilityToWidget(this.props.showStickers);
     }
 
-    _imError(errorMsg, e) {
+    private imError(errorMsg: string, e: Error): void {
         console.error(errorMsg, e);
         this.setState({
-            showStickers: false,
             imError: _t(errorMsg),
         });
+        this.props.setShowStickers(false);
     }
 
-    _updateWidget() {
+    private updateWidget = (): void => {
         const stickerpickerWidget = WidgetUtils.getStickerpickerWidgets()[0];
         if (!stickerpickerWidget) {
             Stickerpicker.currentWidget = null;
@@ -175,27 +188,27 @@ export default class Stickerpicker extends React.PureComponent {
             stickerpickerWidget,
             widgetId: stickerpickerWidget ? stickerpickerWidget.id : null,
         });
-    }
+    };
 
-    _onWidgetAction(payload) {
+    private onWidgetAction = (payload: ActionPayload): void => {
         switch (payload.action) {
             case "user_widget_updated":
                 this.forceUpdate();
                 break;
             case "stickerpicker_close":
-                this.setState({ showStickers: false });
+                this.props.setShowStickers(false);
                 break;
             case Action.AfterRightPanelPhaseChange:
             case "show_left_panel":
             case "hide_left_panel":
-                this.setState({ showStickers: false });
+                this.props.setShowStickers(false);
                 break;
         }
-    }
+    };
 
-    _defaultStickerpickerContent() {
+    private defaultStickerpickerContent(): JSX.Element {
         return (
-            <AccessibleButton onClick={this._launchManageIntegrations}
+            <AccessibleButton onClick={this.launchManageIntegrations}
                 className='mx_Stickers_contentPlaceholder'>
                 <p>{ _t("You don't currently have any stickerpacks enabled") }</p>
                 <p className='mx_Stickers_addLink'>{ _t("Add some now") }</p>
@@ -204,29 +217,29 @@ export default class Stickerpicker extends React.PureComponent {
         );
     }
 
-    _errorStickerpickerContent() {
+    private errorStickerpickerContent(): JSX.Element {
         return (
-            <div style={{ "text-align": "center" }} className="error">
+            <div style={{ textAlign: "center" }} className="error">
                 <p> { this.state.imError } </p>
             </div>
         );
     }
 
-    _sendVisibilityToWidget(visible) {
+    private sendVisibilityToWidget(visible: boolean): void {
         if (!this.state.stickerpickerWidget) return;
         const messaging = WidgetMessagingStore.instance.getMessagingForId(this.state.stickerpickerWidget.id);
-        if (messaging && visible !== this._prevSentVisibility) {
+        if (messaging && visible !== this.prevSentVisibility) {
             messaging.updateVisibility(visible).catch(err => {
                 console.error("Error updating widget visibility: ", err);
             });
-            this._prevSentVisibility = visible;
+            this.prevSentVisibility = visible;
         }
     }
 
-    _getStickerpickerContent() {
+    public getStickerpickerContent(): JSX.Element {
         // Handle integration manager errors
-        if (this.state._imError) {
-            return this._errorStickerpickerContent();
+        if (this.state.imError) {
+            return this.errorStickerpickerContent();
         }
 
         // Stickers
@@ -239,20 +252,23 @@ export default class Stickerpicker extends React.PureComponent {
         // Use a separate ReactDOM tree to render the AppTile separately so that it persists and does
         // not unmount when we (a) close the sticker picker (b) switch rooms. It's properties are still
         // updated.
-        const PersistedElement = sdk.getComponent("elements.PersistedElement");
 
         // Load stickerpack content
         if (stickerpickerWidget && stickerpickerWidget.content && stickerpickerWidget.content.url) {
             // Set default name
-            stickerpickerWidget.content.name = stickerpickerWidget.name || _t("Stickerpack");
+            stickerpickerWidget.content.name = stickerpickerWidget.content.name || _t("Stickerpack");
 
             // FIXME: could this use the same code as other apps?
-            const stickerApp = {
+            const stickerApp: IApp = {
                 id: stickerpickerWidget.id,
                 url: stickerpickerWidget.content.url,
                 name: stickerpickerWidget.content.name,
                 type: stickerpickerWidget.content.type,
                 data: stickerpickerWidget.content.data,
+                roomId: stickerpickerWidget.content.roomId,
+                eventId: stickerpickerWidget.content.eventId,
+                avatar_url: stickerpickerWidget.content.avatar_url,
+                creatorUserId: stickerpickerWidget.content.creatorUserId,
             };
 
             stickersContent = (
@@ -275,12 +291,10 @@ export default class Stickerpicker extends React.PureComponent {
                                 creatorUserId={stickerpickerWidget.sender || MatrixClientPeg.get().credentials.userId}
                                 waitForIframeLoad={true}
                                 showMenubar={true}
-                                onEditClick={this._launchManageIntegrations}
-                                onDeleteClick={this._removeStickerpickerWidgets}
+                                onEditClick={this.launchManageIntegrations}
+                                onDeleteClick={this.removeStickerpickerWidgets}
                                 showTitle={false}
-                                showCancel={false}
                                 showPopout={false}
-                                onMinimiseClick={this._onHideStickersClick}
                                 handleMinimisePointerEvents={true}
                                 userWidget={true}
                             />
@@ -290,7 +304,7 @@ export default class Stickerpicker extends React.PureComponent {
             );
         } else {
             // Default content to show if stickerpicker widget not added
-            stickersContent = this._defaultStickerpickerContent();
+            stickersContent = this.defaultStickerpickerContent();
         }
         return stickersContent;
     }
@@ -300,7 +314,7 @@ export default class Stickerpicker extends React.PureComponent {
      * Show the sticker picker overlay
      * If no stickerpacks have been added, show a link to the integration manager add sticker packs page.
      */
-    _onShowStickersClick(e) {
+    private onShowStickersClick = (e: React.MouseEvent<HTMLElement>): void => {
         if (!SettingsStore.getValue("integrationProvisioning")) {
             // Intercept this case and spawn a warning.
             return IntegrationManagers.sharedInstance().showDisabledDialog();
@@ -308,7 +322,7 @@ export default class Stickerpicker extends React.PureComponent {
 
         // XXX: Simplify by using a context menu that is positioned relative to the sticker picker button
 
-        const buttonRect = e.target.getBoundingClientRect();
+        const buttonRect = e.currentTarget.getBoundingClientRect();
 
         // The window X and Y offsets are to adjust position when zoomed in to page
         let x = buttonRect.right + window.pageXOffset - 41;
@@ -324,50 +338,40 @@ export default class Stickerpicker extends React.PureComponent {
         // Offset the chevron location, which is relative to the left of the context menu
         //  (10 = offset when context menu would not be displayed off viewport)
         //  (2 = context menu borders)
-        const stickerPickerChevronOffset = Math.max(10, 2 + window.pageXOffset + buttonRect.left - x);
+        const stickerpickerChevronOffset = Math.max(10, 2 + window.pageXOffset + buttonRect.left - x);
 
         const y = (buttonRect.top + (buttonRect.height / 2) + window.pageYOffset) - 19;
 
+        this.props.setShowStickers(true);
         this.setState({
-            showStickers: true,
-            stickerPickerX: x,
-            stickerPickerY: y,
-            stickerPickerChevronOffset,
+            stickerpickerX: x,
+            stickerpickerY: y,
+            stickerpickerChevronOffset,
         });
-    }
-
-    /**
-     * Trigger hiding of the sticker picker overlay
-     * @param  {Event} ev Event that triggered the function call
-     */
-    _onHideStickersClick(ev) {
-        if (this.state.showStickers) {
-            this.setState({ showStickers: false });
-        }
-    }
+    };
 
     /**
      * Called when the window is resized
      */
-    _onResize() {
-        if (this.state.showStickers) {
-            this.setState({ showStickers: false });
+    private onResize = (): void => {
+        if (this.props.showStickers) {
+            this.props.setShowStickers(false);
         }
-    }
+    };
 
     /**
      * The stickers picker was hidden
      */
-    _onFinished() {
-        if (this.state.showStickers) {
-            this.setState({ showStickers: false });
+    private onFinished = (): void => {
+        if (this.props.showStickers) {
+            this.props.setShowStickers(false);
         }
-    }
+    };
 
     /**
      * Launch the integration manager on the stickers integration page
      */
-    _launchManageIntegrations = () => {
+    private launchManageIntegrations = (): void => {
         // TODO: Open the right integration manager for the widget
         if (SettingsStore.getValue("feature_many_integration_managers")) {
             IntegrationManagers.sharedInstance().openAll(
@@ -384,57 +388,24 @@ export default class Stickerpicker extends React.PureComponent {
         }
     };
 
-    render() {
-        let stickerPicker;
-        let stickersButton;
-        const className = classNames(
-            "mx_MessageComposer_button",
-            "mx_MessageComposer_stickers",
-            "mx_Stickers_hideStickers",
-            "mx_MessageComposer_button_highlight",
-        );
-        if (this.state.showStickers) {
-            // Show hide-stickers button
-            stickersButton =
-                <AccessibleButton
-                    id='stickersButton'
-                    key="controls_hide_stickers"
-                    className={className}
-                    onClick={this._onHideStickersClick}
-                    active={this.state.showStickers.toString()}
-                    title={_t("Hide Stickers")}
-                />;
+    public render(): JSX.Element {
+        if (!this.props.showStickers) return null;
 
-            const GenericElementContextMenu = sdk.getComponent('context_menus.GenericElementContextMenu');
-            stickerPicker = <ContextMenu
-                chevronOffset={this.state.stickerPickerChevronOffset}
-                chevronFace="bottom"
-                left={this.state.stickerPickerX}
-                top={this.state.stickerPickerY}
-                menuWidth={this.popoverWidth}
-                menuHeight={this.popoverHeight}
-                onFinished={this._onFinished}
-                menuPaddingTop={0}
-                menuPaddingLeft={0}
-                menuPaddingRight={0}
-                zIndex={STICKERPICKER_Z_INDEX}
-            >
-                <GenericElementContextMenu element={this._getStickerpickerContent()} onResize={this._onFinished} />
-            </ContextMenu>;
-        } else {
-            // Show show-stickers button
-            stickersButton =
-                <AccessibleTooltipButton
-                    id='stickersButton'
-                    key="controls_show_stickers"
-                    className="mx_MessageComposer_button mx_MessageComposer_stickers"
-                    onClick={this._onShowStickersClick}
-                    title={_t("Show Stickers")}
-                />;
-        }
-        return <React.Fragment>
-            { stickersButton }
-            { stickerPicker }
-        </React.Fragment>;
+        return <ContextMenu
+            chevronOffset={this.state.stickerpickerChevronOffset}
+            chevronFace={ChevronFace.Bottom}
+            left={this.state.stickerpickerX}
+            top={this.state.stickerpickerY}
+            menuWidth={this.popoverWidth}
+            menuHeight={this.popoverHeight}
+            onFinished={this.onFinished}
+            menuPaddingTop={0}
+            menuPaddingLeft={0}
+            menuPaddingRight={0}
+            zIndex={STICKERPICKER_Z_INDEX}
+            {...this.props.menuPosition}
+        >
+            <GenericElementContextMenu element={this.getStickerpickerContent()} onResize={this.onFinished} />
+        </ContextMenu>;
     }
 }

src/components/views/rooms/TopUnreadMessagesBar.tsx

@@ -1,7 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-Copyright 2019 New Vector Ltd
+Copyright 2016 - 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,19 +15,18 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import AccessibleButton from '../elements/AccessibleButton';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
-@replaceableComponent("views.rooms.TopUnreadMessagesBar")
-export default class TopUnreadMessagesBar extends React.Component {
-    static propTypes = {
-        onScrollUpClick: PropTypes.func,
-        onCloseClick: PropTypes.func,
-    };
+interface IProps {
+    onScrollUpClick?: (e: React.MouseEvent) => void;
+    onCloseClick?: (e: React.MouseEvent) => void;
+}
 
-    render() {
+@replaceableComponent("views.rooms.TopUnreadMessagesBar")
+export default class TopUnreadMessagesBar extends React.PureComponent<IProps> {
+    public render(): JSX.Element {
         return (
             <div className="mx_TopUnreadMessagesBar">
                 <AccessibleButton

src/components/views/rooms/VoiceRecordComposerTile.tsx

@@ -20,7 +20,6 @@ import React, { ReactNode } from "react";
 import { IUpload, RecordingState, VoiceRecording } from "../../../audio/VoiceRecording";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import classNames from "classnames";
 import LiveRecordingWaveform from "../audio_messages/LiveRecordingWaveform";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import LiveRecordingClock from "../audio_messages/LiveRecordingClock";
@@ -137,7 +136,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
         await this.disposeRecording();
     };
 
-    private onRecordStartEndClick = async () => {
+    public onRecordStartEndClick = async () => {
         if (this.state.recorder) {
             await this.state.recorder.stop();
             return;
@@ -179,7 +178,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
 
         try {
             // stop any noises which might be happening
-            await PlaybackManager.instance.playOnly(null);
+            await PlaybackManager.instance.pauseAllExcept(null);
 
             const recorder = VoiceRecordingStore.instance.startRecording();
             await recorder.start();
@@ -215,27 +214,23 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
     }
 
     public render(): ReactNode {
-        let stopOrRecordBtn;
-        let deleteButton;
-        if (!this.state.recordingPhase || this.state.recordingPhase === RecordingState.Started) {
-            const classes = classNames({
-                'mx_MessageComposer_button': !this.state.recorder,
-                'mx_MessageComposer_voiceMessage': !this.state.recorder,
-                'mx_VoiceRecordComposerTile_stop': this.state.recorder?.isRecording,
-            });
+        if (!this.state.recordingPhase) return null;
 
+        let stopBtn;
+        let deleteButton;
+        if (this.state.recordingPhase === RecordingState.Started) {
             let tooltip = _t("Send voice message");
             if (!!this.state.recorder) {
                 tooltip = _t("Stop recording");
             }
 
-            stopOrRecordBtn = <AccessibleTooltipButton
-                className={classes}
+            stopBtn = <AccessibleTooltipButton
+                className="mx_VoiceRecordComposerTile_stop"
                 onClick={this.onRecordStartEndClick}
                 title={tooltip}
             />;
             if (this.state.recorder && !this.state.recorder?.isRecording) {
-                stopOrRecordBtn = null;
+                stopBtn = null;
             }
         }
 
@@ -264,13 +259,10 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
             </span>;
         }
 
-        // The record button (mic icon) is meant to be on the right edge, but we also want the
-        // stop button to be left of the waveform area. Luckily, none of the surrounding UI is
-        // rendered when we're not recording, so the record button ends up in the correct spot.
         return (<>
             { uploadIndicator }
             { deleteButton }
-            { stopOrRecordBtn }
+            { stopBtn }
             { this.renderWaveformArea() }
         </>);
     }