Merge remote-tracking branch 'origin/experimental' into travis/develop-for-real

src/PageTypes.js

@@ -20,7 +20,6 @@ export default {
     HomePage: "home_page",
     RoomView: "room_view",
     UserSettings: "user_settings",
-    CreateRoom: "create_room",
     RoomDirectory: "room_directory",
     UserView: "user_view",
     GroupView: "group_view",

src/PhasedRollOut.js

@@ -15,21 +15,7 @@ limitations under the License.
 */
 
 import SdkConfig from './SdkConfig';
-
-function hashCode(str) {
-    let hash = 0;
-    let i;
-    let chr;
-    if (str.length === 0) {
-        return hash;
-    }
-    for (i = 0; i < str.length; i++) {
-        chr = str.charCodeAt(i);
-        hash = ((hash << 5) - hash) + chr;
-        hash |= 0;
-    }
-    return Math.abs(hash);
-}
+import {hashCode} from './utils/FormattingUtils';
 
 export function phasedRollOutExpiredForUser(username, feature, now, rollOutConfig = SdkConfig.get().phasedRollOut) {
     if (!rollOutConfig) {

src/Presence.js

@@ -17,21 +17,33 @@ limitations under the License.
 
 const MatrixClientPeg = require("./MatrixClientPeg");
 const dis = require("./dispatcher");
+import Timer from './utils/Timer';
 
  // Time in ms after that a user is considered as unavailable/away
 const UNAVAILABLE_TIME_MS = 3 * 60 * 1000; // 3 mins
 const PRESENCE_STATES = ["online", "offline", "unavailable"];
 
 class Presence {
+
+    constructor() {
+        this._activitySignal = null;
+        this._unavailableTimer = null;
+        this._onAction = this._onAction.bind(this);
+        this._dispatcherRef = null;
+    }
     /**
      * Start listening the user activity to evaluate his presence state.
      * Any state change will be sent to the Home Server.
      */
-    start() {
-        this.running = true;
-        if (undefined === this.state) {
-            this._resetTimer();
-            this.dispatcherRef = dis.register(this._onAction.bind(this));
+    async start() {
+        this._unavailableTimer = new Timer(UNAVAILABLE_TIME_MS);
+        // the user_activity_start action starts the timer
+        this._dispatcherRef = dis.register(this._onAction);
+        while (this._unavailableTimer) {
+            try {
+                await this._unavailableTimer.finished();
+                this.setState("unavailable");
+            } catch(e) { /* aborted, stop got called */ }
         }
     }
 
@@ -39,13 +51,14 @@ class Presence {
      * Stop tracking user activity
      */
     stop() {
-        this.running = false;
-        if (this.timer) {
-            clearInterval(this.timer);
-            this.timer = undefined;
-            dis.unregister(this.dispatcherRef);
+        if (this._dispatcherRef) {
+            dis.unregister(this._dispatcherRef);
+            this._dispatcherRef = null;
+        }
+        if (this._unavailableTimer) {
+            this._unavailableTimer.abort();
+            this._unavailableTimer = null;
         }
-        this.state = undefined;
     }
 
     /**
@@ -56,21 +69,25 @@ class Presence {
         return this.state;
     }
 
+    _onAction(payload) {
+        if (payload.action === 'user_activity') {
+            this.setState("online");
+            this._unavailableTimer.restart();
+        }
+    }
+
     /**
      * Set the presence state.
      * If the state has changed, the Home Server will be notified.
      * @param {string} newState the new presence state (see PRESENCE enum)
      */
-    setState(newState) {
+    async setState(newState) {
         if (newState === this.state) {
             return;
         }
         if (PRESENCE_STATES.indexOf(newState) === -1) {
             throw new Error("Bad presence state: " + newState);
         }
-        if (!this.running) {
-            return;
-        }
         const old_state = this.state;
         this.state = newState;
 
@@ -78,42 +95,14 @@ class Presence {
             return; // don't try to set presence when a guest; it won't work.
         }
 
-        const self = this;
-        MatrixClientPeg.get().setPresence(this.state).done(function() {
+        try {
+            await MatrixClientPeg.get().setPresence(this.state);
             console.log("Presence: %s", newState);
-        }, function(err) {
+        } catch(err) {
             console.error("Failed to set presence: %s", err);
-            self.state = old_state;
-        });
-    }
-
-    /**
-     * Callback called when the user made no action on the page for UNAVAILABLE_TIME ms.
-     * @private
-     */
-    _onUnavailableTimerFire() {
-        this.setState("unavailable");
-    }
-
-    _onAction(payload) {
-        if (payload.action === "user_activity") {
-            this._resetTimer();
+            this.state = old_state;
         }
     }
-
-    /**
-     * Callback called when the user made an action on the page
-     * @private
-     */
-    _resetTimer() {
-        const self = this;
-        this.setState("online");
-        // Re-arm the timer
-        clearTimeout(this.timer);
-        this.timer = setTimeout(function() {
-            self._onUnavailableTimerFire();
-        }, UNAVAILABLE_TIME_MS);
-    }
 }
 
 module.exports = new Presence();

src/Tinter.js

@@ -154,6 +154,8 @@ class Tinter {
     }
 
     tint(primaryColor, secondaryColor, tertiaryColor) {
+        return;
+        // eslint-disable-next-line no-unreachable
         this.currentTint[0] = primaryColor;
         this.currentTint[1] = secondaryColor;
         this.currentTint[2] = tertiaryColor;

src/UserActivity.js

@@ -15,32 +15,72 @@ limitations under the License.
 */
 
 import dis from './dispatcher';
+import Timer from './utils/Timer';
 
-const MIN_DISPATCH_INTERVAL_MS = 500;
-const CURRENTLY_ACTIVE_THRESHOLD_MS = 2000;
+// important this is larger than the timeouts of timers
+// used with UserActivity.timeWhileActive,
+// such as READ_MARKER_INVIEW_THRESHOLD_MS,
+// READ_MARKER_OUTOFVIEW_THRESHOLD_MS,
+// READ_RECEIPT_INTERVAL_MS in TimelinePanel
+const CURRENTLY_ACTIVE_THRESHOLD_MS = 2 * 60 * 1000;
 
 /**
  * This class watches for user activity (moving the mouse or pressing a key)
- * and dispatches the user_activity action at times when the user is interacting
- * with the app (but at a much lower frequency than mouse move events)
+ * and starts/stops attached timers while the user is active.
  */
 class UserActivity {
+    constructor() {
+        this._attachedTimers = [];
+        this._activityTimeout = new Timer(CURRENTLY_ACTIVE_THRESHOLD_MS);
+        this._onUserActivity = this._onUserActivity.bind(this);
+        this._onDocumentBlurred = this._onDocumentBlurred.bind(this);
+        this._onPageVisibilityChanged = this._onPageVisibilityChanged.bind(this);
+        this.lastScreenX = 0;
+        this.lastScreenY = 0;
+    }
+
+    /**
+     * Runs the given timer while the user is active, aborting when the user becomes inactive.
+     * Can be called multiple times with the same already running timer, which is a NO-OP.
+     * Can be called before the user becomes active, in which case it is only started
+     * later on when the user does become active.
+     */
+    timeWhileActive(timer) {
+        // important this happens first
+        const index = this._attachedTimers.indexOf(timer);
+        if (index === -1) {
+            this._attachedTimers.push(timer);
+            // remove when done or aborted
+            timer.finished().finally(() => {
+                const index = this._attachedTimers.indexOf(timer);
+                if (index !== -1) { // should never be -1
+                    this._attachedTimers.splice(index, 1);
+                }
+            // as we fork the promise here,
+            // avoid unhandled rejection warnings
+            }).catch((err) => {});
+        }
+        if (this.userCurrentlyActive()) {
+            timer.start();
+        }
+    }
+
     /**
      * Start listening to user activity
      */
     start() {
-        document.onmousedown = this._onUserActivity.bind(this);
-        document.onmousemove = this._onUserActivity.bind(this);
-        document.onkeydown = this._onUserActivity.bind(this);
+        document.onmousedown = this._onUserActivity;
+        document.onmousemove = this._onUserActivity;
+        document.onkeydown = this._onUserActivity;
+        document.addEventListener("visibilitychange", this._onPageVisibilityChanged);
+        document.addEventListener("blur", this._onDocumentBlurred);
+        document.addEventListener("focus", this._onUserActivity);
         // can't use document.scroll here because that's only the document
         // itself being scrolled. Need to use addEventListener's useCapture.
         // also this needs to be the wheel event, not scroll, as scroll is
         // fired when the view scrolls down for a new message.
-        window.addEventListener('wheel', this._onUserActivity.bind(this),
+        window.addEventListener('wheel', this._onUserActivity,
                                 { passive: true, capture: true });
-        this.lastActivityAtTs = new Date().getTime();
-        this.lastDispatchAtTs = 0;
-        this.activityEndTimer = undefined;
     }
 
     /**
@@ -50,8 +90,12 @@ class UserActivity {
         document.onmousedown = undefined;
         document.onmousemove = undefined;
         document.onkeydown = undefined;
-        window.removeEventListener('wheel', this._onUserActivity.bind(this),
+        window.removeEventListener('wheel', this._onUserActivity,
                                    { passive: true, capture: true });
+
+        document.removeEventListener("visibilitychange", this._onPageVisibilityChanged);
+        document.removeEventListener("blur", this._onDocumentBlurred);
+        document.removeEventListener("focus", this._onUserActivity);
     }
 
     /**
@@ -60,10 +104,22 @@ class UserActivity {
      * @returns {boolean} true if user is currently/very recently active
      */
     userCurrentlyActive() {
-        return this.lastActivityAtTs > new Date().getTime() - CURRENTLY_ACTIVE_THRESHOLD_MS;
+        return this._activityTimeout.isRunning();
     }
 
-    _onUserActivity(event) {
+    _onPageVisibilityChanged(e) {
+        if (document.visibilityState === "hidden") {
+            this._activityTimeout.abort();
+        } else {
+            this._onUserActivity(e);
+        }
+    }
+
+    _onDocumentBlurred() {
+        this._activityTimeout.abort();
+    }
+
+    async _onUserActivity(event) {
         if (event.screenX && event.type === "mousemove") {
             if (event.screenX === this.lastScreenX && event.screenY === this.lastScreenY) {
                 // mouse hasn't actually moved
@@ -73,30 +129,20 @@ class UserActivity {
             this.lastScreenY = event.screenY;
         }
 
-        this.lastActivityAtTs = new Date().getTime();
-        if (this.lastDispatchAtTs < this.lastActivityAtTs - MIN_DISPATCH_INTERVAL_MS) {
-            this.lastDispatchAtTs = this.lastActivityAtTs;
-            dis.dispatch({
-                action: 'user_activity',
-            });
-            if (!this.activityEndTimer) {
-                this.activityEndTimer = setTimeout(this._onActivityEndTimer.bind(this), MIN_DISPATCH_INTERVAL_MS);
-            }
-        }
-    }
-
-    _onActivityEndTimer() {
-        const now = new Date().getTime();
-        const targetTime = this.lastActivityAtTs + MIN_DISPATCH_INTERVAL_MS;
-        if (now >= targetTime) {
-            dis.dispatch({
-                action: 'user_activity_end',
-            });
-            this.activityEndTimer = undefined;
+        dis.dispatch({action: 'user_activity'});
+        if (!this._activityTimeout.isRunning()) {
+            this._activityTimeout.start();
+            dis.dispatch({action: 'user_activity_start'});
+            this._attachedTimers.forEach((t) => t.start());
+            try {
+                await this._activityTimeout.finished();
+            } catch (_e) { /* aborted */ }
+            this._attachedTimers.forEach((t) => t.abort());
         } else {
-            this.activityEndTimer = setTimeout(this._onActivityEndTimer.bind(this), targetTime - now);
+            this._activityTimeout.restart();
         }
     }
 }
 
+
 module.exports = new UserActivity();

src/WhoIsTyping.js

@@ -63,16 +63,16 @@ module.exports = {
         if (whoIsTyping.length == 0) {
             return '';
         } else if (whoIsTyping.length == 1) {
-            return _t('%(displayName)s is typing', {displayName: whoIsTyping[0].name});
+            return _t('%(displayName)s is typing …', {displayName: whoIsTyping[0].name});
         }
         const names = whoIsTyping.map(function(m) {
             return m.name;
         });
         if (othersCount>=1) {
-            return _t('%(names)s and %(count)s others are typing', {names: names.slice(0, limit - 1).join(', '), count: othersCount});
+            return _t('%(names)s and %(count)s others are typing …', {names: names.slice(0, limit - 1).join(', '), count: othersCount});
         } else {
             const lastPerson = names.pop();
-            return _t('%(names)s and %(lastPerson)s are typing', {names: names.join(', '), lastPerson: lastPerson});
+            return _t('%(names)s and %(lastPerson)s are typing …', {names: names.join(', '), lastPerson: lastPerson});
         }
     },
 };

src/components/structures/AutoHideScrollbar.js

@@ -0,0 +1,137 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+
+// derived from code from github.com/noeldelgado/gemini-scrollbar
+// Copyright (c) Noel Delgado <pixelia.me@gmail.com> (pixelia.me)
+function getScrollbarWidth(alternativeOverflow) {
+    const div = document.createElement('div');
+    div.style.position = 'absolute';
+    div.style.top = '-9999px';
+    div.style.width = '100px';
+    div.style.height = '100px';
+    div.style.overflow = "scroll";
+    if (alternativeOverflow) {
+        div.style.overflow = alternativeOverflow;
+    }
+    div.style.msOverflowStyle = '-ms-autohiding-scrollbar';
+    document.body.appendChild(div);
+    const scrollbarWidth = (div.offsetWidth - div.clientWidth);
+    document.body.removeChild(div);
+    return scrollbarWidth;
+}
+
+function install() {
+    const scrollbarWidth = getScrollbarWidth();
+    if (scrollbarWidth !== 0) {
+        const hasForcedOverlayScrollbar = getScrollbarWidth('overlay') === 0;
+        // overflow: overlay on webkit doesn't auto hide the scrollbar
+        if (hasForcedOverlayScrollbar) {
+            document.body.classList.add("mx_scrollbar_overlay_noautohide");
+        } else {
+            document.body.classList.add("mx_scrollbar_nooverlay");
+            const style = document.createElement('style');
+            style.type = 'text/css';
+            style.innerText =
+                `body.mx_scrollbar_nooverlay { --scrollbar-width: ${scrollbarWidth}px; }`;
+            document.head.appendChild(style);
+        }
+    }
+}
+
+const installBodyClassesIfNeeded = (function() {
+    let installed = false;
+    return function() {
+        if (!installed) {
+            install();
+            installed = true;
+        }
+    };
+})();
+
+export default class AutoHideScrollbar extends React.Component {
+    constructor(props) {
+        super(props);
+        this.onOverflow = this.onOverflow.bind(this);
+        this.onUnderflow = this.onUnderflow.bind(this);
+        this._collectContainerRef = this._collectContainerRef.bind(this);
+        this._needsOverflowListener = null;
+    }
+
+    onOverflow() {
+        this.containerRef.classList.add("mx_AutoHideScrollbar_overflow");
+        this.containerRef.classList.remove("mx_AutoHideScrollbar_underflow");
+    }
+
+    onUnderflow() {
+        this.containerRef.classList.remove("mx_AutoHideScrollbar_overflow");
+        this.containerRef.classList.add("mx_AutoHideScrollbar_underflow");
+    }
+
+    checkOverflow() {
+        if (!this._needsOverflowListener) {
+            return;
+        }
+        if (this.containerRef.scrollHeight > this.containerRef.clientHeight) {
+            this.onOverflow();
+        } else {
+            this.onUnderflow();
+        }
+    }
+
+    componentDidUpdate() {
+        this.checkOverflow();
+    }
+
+    componentDidMount() {
+        installBodyClassesIfNeeded();
+        this._needsOverflowListener =
+            document.body.classList.contains("mx_scrollbar_nooverlay");
+        if (this._needsOverflowListener) {
+            this.containerRef.addEventListener("overflow", this.onOverflow);
+            this.containerRef.addEventListener("underflow", this.onUnderflow);
+        }
+        this.checkOverflow();
+    }
+
+    _collectContainerRef(ref) {
+        if (ref && !this.containerRef) {
+            this.containerRef = ref;
+        }
+        if (this.props.wrappedRef) {
+            this.props.wrappedRef(ref);
+        }
+    }
+
+    componentWillUnmount() {
+        if (this._needsOverflowListener && this.containerRef) {
+            this.containerRef.removeEventListener("overflow", this.onOverflow);
+            this.containerRef.removeEventListener("underflow", this.onUnderflow);
+        }
+    }
+
+    render() {
+        return (<div
+                    ref={this._collectContainerRef}
+                    className={["mx_AutoHideScrollbar", this.props.className].join(" ")}
+                >
+            <div className="mx_AutoHideScrollbar_offset">
+                { this.props.children }
+            </div>
+        </div>);
+    }
+}

src/components/structures/ContextualMenu.js

@@ -49,7 +49,7 @@ export default class ContextualMenu extends React.Component {
         menuHeight: PropTypes.number,
         chevronOffset: PropTypes.number,
         menuColour: PropTypes.string,
-        chevronFace: PropTypes.string, // top, bottom, left, right
+        chevronFace: PropTypes.string, // top, bottom, left, right or none
         // Function to be called on menu close
         onFinished: PropTypes.func,
         menuPaddingTop: PropTypes.number,
@@ -113,7 +113,6 @@ export default class ContextualMenu extends React.Component {
     render() {
         const position = {};
         let chevronFace = null;
-
         const props = this.props;
 
         if (props.top) {
@@ -137,6 +136,8 @@ export default class ContextualMenu extends React.Component {
         if (props.chevronFace) {
             chevronFace = props.chevronFace;
         }
+        const hasChevron = chevronFace && chevronFace !== "none";
+
         if (chevronFace === 'top' || chevronFace === 'bottom') {
             chevronOffset.left = props.chevronOffset;
         } else {
@@ -174,11 +175,14 @@ export default class ContextualMenu extends React.Component {
             `;
         }
 
-        const chevron = <div style={chevronOffset} className={"mx_ContextualMenu_chevron_" + chevronFace} />;
+        const chevron = hasChevron ?
+            <div style={chevronOffset} className={"mx_ContextualMenu_chevron_" + chevronFace} /> :
+            undefined;
         const className = 'mx_ContextualMenu_wrapper';
 
         const menuClasses = classNames({
             'mx_ContextualMenu': true,
+            'mx_ContextualMenu_noChevron': chevronFace === 'none',
             'mx_ContextualMenu_left': chevronFace === 'left',
             'mx_ContextualMenu_right': chevronFace === 'right',
             'mx_ContextualMenu_top': chevronFace === 'top',

src/components/structures/CreateRoom.js

@@ -1,284 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { _t } from '../../languageHandler';
-import sdk from '../../index';
-import MatrixClientPeg from '../../MatrixClientPeg';
-const PresetValues = {
-    PrivateChat: "private_chat",
-    PublicChat: "public_chat",
-    Custom: "custom",
-};
-
-module.exports = React.createClass({
-    displayName: 'CreateRoom',
-
-    propTypes: {
-        onRoomCreated: PropTypes.func,
-        collapsedRhs: PropTypes.bool,
-    },
-
-    phases: {
-        CONFIG: "CONFIG", // We're waiting for user to configure and hit create.
-        CREATING: "CREATING", // We're sending the request.
-        CREATED: "CREATED", // We successfully created the room.
-        ERROR: "ERROR", // There was an error while trying to create room.
-    },
-
-    getDefaultProps: function() {
-        return {
-            onRoomCreated: function() {},
-        };
-    },
-
-    getInitialState: function() {
-        return {
-            phase: this.phases.CONFIG,
-            error_string: "",
-            is_private: true,
-            share_history: false,
-            default_preset: PresetValues.PrivateChat,
-            topic: '',
-            room_name: '',
-            invited_users: [],
-        };
-    },
-
-    onCreateRoom: function() {
-        const options = {};
-
-        if (this.state.room_name) {
-            options.name = this.state.room_name;
-        }
-
-        if (this.state.topic) {
-            options.topic = this.state.topic;
-        }
-
-        if (this.state.preset) {
-            if (this.state.preset != PresetValues.Custom) {
-                options.preset = this.state.preset;
-            } else {
-                options.initial_state = [
-                    {
-                        type: "m.room.join_rules",
-                        content: {
-                            "join_rule": this.state.is_private ? "invite" : "public",
-                        },
-                    },
-                    {
-                        type: "m.room.history_visibility",
-                        content: {
-                            "history_visibility": this.state.share_history ? "shared" : "invited",
-                        },
-                    },
-                ];
-            }
-        }
-
-        options.invite = this.state.invited_users;
-
-        const alias = this.getAliasLocalpart();
-        if (alias) {
-            options.room_alias_name = alias;
-        }
-
-        const cli = MatrixClientPeg.get();
-        if (!cli) {
-            // TODO: Error.
-            console.error("Cannot create room: No matrix client.");
-            return;
-        }
-
-        const deferred = cli.createRoom(options);
-
-        if (this.state.encrypt) {
-            // TODO
-        }
-
-        this.setState({
-            phase: this.phases.CREATING,
-        });
-
-        const self = this;
-
-        deferred.then(function(resp) {
-            self.setState({
-                phase: self.phases.CREATED,
-            });
-            self.props.onRoomCreated(resp.room_id);
-        }, function(err) {
-            self.setState({
-                phase: self.phases.ERROR,
-                error_string: err.toString(),
-            });
-        });
-    },
-
-    getPreset: function() {
-        return this.refs.presets.getPreset();
-    },
-
-    getName: function() {
-        return this.refs.name_textbox.getName();
-    },
-
-    getTopic: function() {
-        return this.refs.topic.getTopic();
-    },
-
-    getAliasLocalpart: function() {
-        return this.refs.alias.getAliasLocalpart();
-    },
-
-    getInvitedUsers: function() {
-        return this.refs.user_selector.getUserIds();
-    },
-
-    onPresetChanged: function(preset) {
-        switch (preset) {
-            case PresetValues.PrivateChat:
-                this.setState({
-                    preset: preset,
-                    is_private: true,
-                    share_history: false,
-                });
-                break;
-            case PresetValues.PublicChat:
-                this.setState({
-                    preset: preset,
-                    is_private: false,
-                    share_history: true,
-                });
-                break;
-            case PresetValues.Custom:
-                this.setState({
-                    preset: preset,
-                });
-                break;
-        }
-    },
-
-    onPrivateChanged: function(ev) {
-        this.setState({
-            preset: PresetValues.Custom,
-            is_private: ev.target.checked,
-        });
-    },
-
-    onShareHistoryChanged: function(ev) {
-        this.setState({
-            preset: PresetValues.Custom,
-            share_history: ev.target.checked,
-        });
-    },
-
-    onTopicChange: function(ev) {
-        this.setState({
-            topic: ev.target.value,
-        });
-    },
-
-    onNameChange: function(ev) {
-        this.setState({
-            room_name: ev.target.value,
-        });
-    },
-
-    onInviteChanged: function(invited_users) {
-        this.setState({
-            invited_users: invited_users,
-        });
-    },
-
-    onAliasChanged: function(alias) {
-        this.setState({
-            alias: alias,
-        });
-    },
-
-    onEncryptChanged: function(ev) {
-        this.setState({
-            encrypt: ev.target.checked,
-        });
-    },
-
-    render: function() {
-        const curr_phase = this.state.phase;
-        if (curr_phase == this.phases.CREATING) {
-            const Loader = sdk.getComponent("elements.Spinner");
-            return (
-                <Loader />
-            );
-        } else {
-            let error_box = "";
-            if (curr_phase == this.phases.ERROR) {
-                error_box = (
-                    <div className="mx_Error">
-                        { _t('An error occurred: %(error_string)s', {error_string: this.state.error_string}) }
-                    </div>
-                );
-            }
-
-            const CreateRoomButton = sdk.getComponent("create_room.CreateRoomButton");
-            const RoomAlias = sdk.getComponent("create_room.RoomAlias");
-            const Presets = sdk.getComponent("create_room.Presets");
-            const UserSelector = sdk.getComponent("elements.UserSelector");
-            const SimpleRoomHeader = sdk.getComponent("rooms.SimpleRoomHeader");
-
-            const domain = MatrixClientPeg.get().getDomain();
-
-            return (
-            <div className="mx_CreateRoom">
-                <SimpleRoomHeader title={_t("Create Room")} collapsedRhs={this.props.collapsedRhs} />
-                <div className="mx_CreateRoom_body">
-                    <input type="text" ref="room_name" value={this.state.room_name} onChange={this.onNameChange} placeholder={_t('Name')} /> <br />
-                    <textarea className="mx_CreateRoom_description" ref="topic" value={this.state.topic} onChange={this.onTopicChange} placeholder={_t('Topic')} /> <br />
-                    <RoomAlias ref="alias" alias={this.state.alias} homeserver={domain} onChange={this.onAliasChanged} /> <br />
-                    <UserSelector ref="user_selector" selected_users={this.state.invited_users} onChange={this.onInviteChanged} /> <br />
-                    <Presets ref="presets" onChange={this.onPresetChanged} preset={this.state.preset} /> <br />
-                    <div>
-                        <label>
-                            <input type="checkbox" ref="is_private" checked={this.state.is_private} onChange={this.onPrivateChanged} />
-                            { _t('Make this room private') }
-                        </label>
-                    </div>
-                    <div>
-                        <label>
-                            <input type="checkbox" ref="share_history" checked={this.state.share_history} onChange={this.onShareHistoryChanged} />
-                            { _t('Share message history with new users') }
-                        </label>
-                    </div>
-                    <div className="mx_CreateRoom_encrypt">
-                        <label>
-                            <input type="checkbox" ref="encrypt" checked={this.state.encrypt} onChange={this.onEncryptChanged} />
-                            { _t('Encrypt room') }
-                        </label>
-                    </div>
-                    <div>
-                        <CreateRoomButton onCreateRoom={this.onCreateRoom} /> <br />
-                    </div>
-                    { error_box }
-                </div>
-            </div>
-            );
-        }
-    },
-});

src/components/structures/GroupView.js

@@ -24,6 +24,9 @@ import dis from '../../dispatcher';
 import { sanitizedHtmlNode } from '../../HtmlUtils';
 import { _t, _td } from '../../languageHandler';
 import AccessibleButton from '../views/elements/AccessibleButton';
+import GroupHeaderButtons from '../views/right_panel/GroupHeaderButtons';
+import MainSplit from './MainSplit';
+import RightPanel from './RightPanel';
 import Modal from '../../Modal';
 import classnames from 'classnames';
 
@@ -1271,25 +1274,19 @@ export default React.createClass({
                         <TintableSvg src="img/icons-share.svg" width="16" height="16" />
                     </AccessibleButton>,
                 );
-                if (this.props.collapsedRhs) {
-                    rightButtons.push(
-                        <AccessibleButton className="mx_GroupHeader_button"
-                            onClick={this._onShowRhsClick} title={_t('Show panel')} key="_maximiseButton"
-                        >
-                            <TintableSvg src="img/maximise.svg" width="10" height="16" />
-                        </AccessibleButton>,
-                    );
-                }
             }
 
+            const rightPanel = !this.props.collapsedRhs ? <RightPanel groupId={this.props.groupId} /> : undefined;
+
             const headerClasses = {
-                mx_GroupView_header: true,
-                mx_GroupView_header_view: !this.state.editing,
-                mx_GroupView_header_isUserMember: this.state.isUserMember,
+                "mx_GroupView_header": true,
+                "light-panel": true,
+                "mx_GroupView_header_view": !this.state.editing,
+                "mx_GroupView_header_isUserMember": this.state.isUserMember,
             };
 
             return (
-                <div className="mx_GroupView">
+                <main className="mx_GroupView">
                     <div className={classnames(headerClasses)}>
                         <div className="mx_GroupView_header_leftCol">
                             <div className="mx_GroupView_header_avatar">
@@ -1307,12 +1304,15 @@ export default React.createClass({
                         <div className="mx_GroupView_header_rightCol">
                             { rightButtons }
                         </div>
+                        <GroupHeaderButtons collapsedRhs={this.props.collapsedRhs} />
                     </div>
-                    <GeminiScrollbarWrapper className="mx_GroupView_body">
-                        { this._getMembershipSection() }
-                        { this._getGroupSection() }
-                    </GeminiScrollbarWrapper>
-                </div>
+                    <MainSplit collapsedRhs={this.props.collapsedRhs} panel={rightPanel}>
+                        <GeminiScrollbarWrapper className="mx_GroupView_body">
+                            { this._getMembershipSection() }
+                            { this._getGroupSection() }
+                        </GeminiScrollbarWrapper>
+                    </MainSplit>
+                </main>
             );
         } else if (this.state.error) {
             if (this.state.error.httpStatus === 404) {

src/components/structures/IndicatorScrollbar.js

@@ -0,0 +1,73 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import AutoHideScrollbar from "./AutoHideScrollbar";
+
+export default class IndicatorScrollbar extends React.Component {
+    constructor(props) {
+        super(props);
+        this._collectScroller = this._collectScroller.bind(this);
+        this._collectScrollerComponent = this._collectScrollerComponent.bind(this);
+        this.checkOverflow = this.checkOverflow.bind(this);
+        this._scrollElement = null;
+        this._autoHideScrollbar = null;
+    }
+
+    _collectScroller(scroller) {
+        if (scroller && !this._scrollElement) {
+            this._scrollElement = scroller;
+            this._scrollElement.addEventListener("scroll", this.checkOverflow);
+            this.checkOverflow();
+        }
+    }
+
+    _collectScrollerComponent(autoHideScrollbar) {
+        this._autoHideScrollbar = autoHideScrollbar;
+    }
+
+    checkOverflow() {
+        const hasTopOverflow = this._scrollElement.scrollTop > 0;
+        const hasBottomOverflow = this._scrollElement.scrollHeight >
+            (this._scrollElement.scrollTop + this._scrollElement.clientHeight);
+        if (hasTopOverflow) {
+            this._scrollElement.classList.add("mx_IndicatorScrollbar_topOverflow");
+        } else {
+            this._scrollElement.classList.remove("mx_IndicatorScrollbar_topOverflow");
+        }
+        if (hasBottomOverflow) {
+            this._scrollElement.classList.add("mx_IndicatorScrollbar_bottomOverflow");
+        } else {
+            this._scrollElement.classList.remove("mx_IndicatorScrollbar_bottomOverflow");
+        }
+
+        if (this._autoHideScrollbar) {
+            this._autoHideScrollbar.checkOverflow();
+        }
+    }
+
+    componentWillUnmount() {
+        if (this._scrollElement) {
+            this._scrollElement.removeEventListener("scroll", this.checkOverflow);
+        }
+    }
+
+    render() {
+        return (<AutoHideScrollbar ref={this._collectScrollerComponent} wrappedRef={this._collectScroller} {... this.props}>
+            { this.props.children }
+        </AutoHideScrollbar>);
+    }
+}

src/components/structures/LeftPanel.js

@@ -151,8 +151,7 @@ const LeftPanel = React.createClass({
             }
         } while (element && !(
             classes.contains("mx_RoomTile") ||
-            classes.contains("mx_SearchBox_search") ||
-            classes.contains("mx_RoomSubList_ellipsis")));
+            classes.contains("mx_textinput_search")));
 
         if (element) {
             element.focus();
@@ -171,6 +170,12 @@ const LeftPanel = React.createClass({
         this.setState({ searchFilter: term });
     },
 
+    onSearchCleared: function(source) {
+        if (source === "keyboard") {
+            dis.dispatch({action: 'focus_composer'});
+        }
+    },
+
     collectRoomList: function(ref) {
         this._roomList = ref;
     },
@@ -178,18 +183,9 @@ const LeftPanel = React.createClass({
     render: function() {
         const RoomList = sdk.getComponent('rooms.RoomList');
         const TagPanel = sdk.getComponent('structures.TagPanel');
-        const BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu');
-        const CallPreview = sdk.getComponent('voip.CallPreview');
-
+        const TopLeftMenuButton = sdk.getComponent('structures.TopLeftMenuButton');
         const SearchBox = sdk.getComponent('structures.SearchBox');
-        const topBox = <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />;
-
-        const classes = classNames(
-            "mx_LeftPanel",
-            {
-                "collapsed": this.props.collapsed,
-            },
-        );
+        const CallPreview = sdk.getComponent('voip.CallPreview');
 
         const tagPanelEnabled = !SettingsStore.getValue("TagPanel.disableTagPanel");
         const tagPanel = tagPanelEnabled ? <TagPanel /> : <div />;
@@ -197,27 +193,32 @@ const LeftPanel = React.createClass({
         const containerClasses = classNames(
             "mx_LeftPanel_container", "mx_fadable",
             {
-                "mx_LeftPanel_container_collapsed": this.props.collapsed,
+                "collapsed": this.props.collapsed,
                 "mx_LeftPanel_container_hasTagPanel": tagPanelEnabled,
                 "mx_fadable_faded": this.props.disabled,
             },
         );
 
+        const searchBox = !this.props.collapsed ?
+            <SearchBox onSearch={ this.onSearch } onCleared={ this.onSearchCleared } /> :
+            undefined;
+
         return (
             <div className={containerClasses}>
                 { tagPanel }
-                <aside className={classes} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
-                    { topBox }
+                <aside className={"mx_LeftPanel dark-panel"} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
+                    <TopLeftMenuButton collapsed={ this.props.collapsed } />
+                    { searchBox }
                     <CallPreview ConferenceHandler={VectorConferenceHandler} />
                     <RoomList
                         ref={this.collectRoomList}
                         collapsed={this.props.collapsed}
                         searchFilter={this.state.searchFilter}
                         ConferenceHandler={VectorConferenceHandler} />
-                    <BottomLeftMenu collapsed={this.props.collapsed} />
                 </aside>
             </div>
         );
+        // <BottomLeftMenu collapsed={this.props.collapsed}/>
     },
 });
 

src/components/structures/LoggedInView.js

@@ -34,7 +34,8 @@ import RoomListStore from "../../stores/RoomListStore";
 
 import TagOrderActions from '../../actions/TagOrderActions';
 import RoomListActions from '../../actions/RoomListActions';
-
+import ResizeHandle from '../views/elements/ResizeHandle';
+import {Resizer, CollapseDistributor} from '../../resizer'
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
 // NB. this is just for server notices rather than pinned messages in general.
@@ -61,7 +62,7 @@ const LoggedInView = React.createClass({
         // Called with the credentials of a registered user (if they were a ROU that
         // transitioned to PWLU)
         onRegistered: PropTypes.func,
-
+        collapsedRhs: PropTypes.bool,
         teamToken: PropTypes.string,
 
         // Used by the RoomView to handle joining rooms
@@ -94,6 +95,12 @@ const LoggedInView = React.createClass({
         };
     },
 
+    componentDidMount: function() {
+        this.resizer = this._createResizer();
+        this.resizer.attach();
+        this._loadResizerPreferences();
+    },
+
     componentWillMount: function() {
         // stash the MatrixClient in case we log out before we are unmounted
         this._matrixClient = this.props.matrixClient;
@@ -123,6 +130,7 @@ const LoggedInView = React.createClass({
         if (this._sessionStoreToken) {
             this._sessionStoreToken.remove();
         }
+        this.resizer.detach();
     },
 
     // Child components assume that the client peg will not be null, so give them some
@@ -148,6 +156,39 @@ const LoggedInView = React.createClass({
         });
     },
 
+    _createResizer() {
+        const classNames = {
+            handle: "mx_ResizeHandle",
+            vertical: "mx_ResizeHandle_vertical",
+            reverse: "mx_ResizeHandle_reverse"
+        };
+        const collapseConfig = {
+            toggleSize: 260 - 50,
+            onCollapsed: (collapsed) => {
+                this.setState({collapseLhs: collapsed});
+                if (collapsed) {
+                    window.localStorage.setItem("mx_lhs_size", '0');
+                }
+            },
+            onResized: (size) => {
+                window.localStorage.setItem("mx_lhs_size", '' + size);
+            },
+        };
+        const resizer = new Resizer(
+            this.resizeContainer,
+            CollapseDistributor,
+            collapseConfig);
+        resizer.setClassNames(classNames);
+        return resizer;
+    },
+
+    _loadResizerPreferences() {
+        const lhsSize = window.localStorage.getItem("mx_lhs_size");
+        if (lhsSize !== null) {
+            this.resizer.forHandleAt(0).resize(parseInt(lhsSize, 10));
+        }
+    },
+
     onAccountData: function(event) {
         if (event.getType() === "im.vector.web.settings") {
             this.setState({
@@ -364,12 +405,14 @@ const LoggedInView = React.createClass({
         this.setState({mouseDown: null});
     },
 
+    _setResizeContainerRef(div) {
+        this.resizeContainer = div;
+    },
+
     render: function() {
         const LeftPanel = sdk.getComponent('structures.LeftPanel');
-        const RightPanel = sdk.getComponent('structures.RightPanel');
         const RoomView = sdk.getComponent('structures.RoomView');
         const UserSettings = sdk.getComponent('structures.UserSettings');
-        const CreateRoom = sdk.getComponent('structures.CreateRoom');
         const RoomDirectory = sdk.getComponent('structures.RoomDirectory');
         const HomePage = sdk.getComponent('structures.HomePage');
         const GroupView = sdk.getComponent('structures.GroupView');
@@ -382,7 +425,6 @@ const LoggedInView = React.createClass({
         const ServerLimitBar = sdk.getComponent('globals.ServerLimitBar');
 
         let page_element;
-        let right_panel = '';
 
         switch (this.props.page_type) {
             case PageTypes.RoomView:
@@ -396,12 +438,9 @@ const LoggedInView = React.createClass({
                         eventPixelOffset={this.props.initialEventPixelOffset}
                         key={this.props.currentRoomId || 'roomview'}
                         disabled={this.props.middleDisabled}
-                        collapsedRhs={this.props.collapseRhs}
+                        collapsedRhs={this.props.collapsedRhs}
                         ConferenceHandler={this.props.ConferenceHandler}
                     />;
-                if (!this.props.collapseRhs) {
-                    right_panel = <RightPanel roomId={this.props.currentRoomId} disabled={this.props.rightDisabled} />;
-                }
                 break;
 
             case PageTypes.UserSettings:
@@ -411,21 +450,12 @@ const LoggedInView = React.createClass({
                     referralBaseUrl={this.props.config.referralBaseUrl}
                     teamToken={this.props.teamToken}
                 />;
-                if (!this.props.collapseRhs) right_panel = <RightPanel disabled={this.props.rightDisabled} />;
                 break;
 
             case PageTypes.MyGroups:
                 page_element = <MyGroups />;
                 break;
 
-            case PageTypes.CreateRoom:
-                page_element = <CreateRoom
-                    onRoomCreated={this.props.onRoomCreated}
-                    collapsedRhs={this.props.collapseRhs}
-                />;
-                if (!this.props.collapseRhs) right_panel = <RightPanel disabled={this.props.rightDisabled} />;
-                break;
-
             case PageTypes.RoomDirectory:
                 page_element = <RoomDirectory
                     ref="roomDirectory"
@@ -451,15 +481,15 @@ const LoggedInView = React.createClass({
 
             case PageTypes.UserView:
                 page_element = null; // deliberately null for now
-                right_panel = <RightPanel disabled={this.props.rightDisabled} />;
+                // TODO: fix/remove UserView
+                // right_panel = <RightPanel disabled={this.props.rightDisabled} />;
                 break;
             case PageTypes.GroupView:
                 page_element = <GroupView
                     groupId={this.props.currentGroupId}
                     isNew={this.props.currentGroupIsNew}
-                    collapsedRhs={this.props.collapseRhs}
+                    collapsedRhs={this.props.collapsedRhs}
                 />;
-                if (!this.props.collapseRhs) right_panel = <RightPanel groupId={this.props.currentGroupId} disabled={this.props.rightDisabled} />;
                 break;
         }
 
@@ -511,15 +541,13 @@ const LoggedInView = React.createClass({
             <div className='mx_MatrixChat_wrapper' aria-hidden={this.props.hideToSRUsers} onMouseDown={this._onMouseDown} onMouseUp={this._onMouseUp}>
                 { topBar }
                 <DragDropContext onDragEnd={this._onDragEnd}>
-                    <div className={bodyClasses}>
+                    <div ref={this._setResizeContainerRef} className={bodyClasses}>
                         <LeftPanel
-                            collapsed={this.props.collapseLhs || false}
+                            collapsed={this.props.collapseLhs || this.state.collapseLhs || false}
                             disabled={this.props.leftDisabled}
                         />
-                        <main className='mx_MatrixChat_middlePanel'>
-                            { page_element }
-                        </main>
-                        { right_panel }
+                        <ResizeHandle/>
+                        { page_element }
                     </div>
                 </DragDropContext>
             </div>

src/components/structures/MainSplit.js

@@ -0,0 +1,101 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import ResizeHandle from '../views/elements/ResizeHandle';
+import {Resizer, FixedDistributor} from '../../resizer';
+
+export default class MainSplit extends React.Component {
+    constructor(props) {
+        super(props);
+        this._setResizeContainerRef = this._setResizeContainerRef.bind(this);
+        this._onResized = this._onResized.bind(this);
+    }
+
+    _onResized(size) {
+        window.localStorage.setItem("mx_rhs_size", size);
+    }
+
+    _createResizer() {
+        const classNames = {
+            handle: "mx_ResizeHandle",
+            vertical: "mx_ResizeHandle_vertical",
+            reverse: "mx_ResizeHandle_reverse",
+        };
+        const resizer = new Resizer(
+            this.resizeContainer,
+            FixedDistributor,
+            {onResized: this._onResized},
+        );
+        resizer.setClassNames(classNames);
+        let rhsSize = window.localStorage.getItem("mx_rhs_size");
+        if (rhsSize !== null) {
+            rhsSize = parseInt(rhsSize, 10);
+        } else {
+            rhsSize = 350;
+        }
+        resizer.forHandleAt(0).resize(rhsSize);
+
+        resizer.attach();
+        this.resizer = resizer;
+    }
+
+    _setResizeContainerRef(div) {
+        this.resizeContainer = div;
+    }
+
+    componentDidMount() {
+        if (this.props.panel && !this.props.collapsedRhs) {
+            this._createResizer();
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.resizer) {
+            this.resizer.detach();
+            this.resizer = null;
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        const wasExpanded = !this.props.collapsedRhs && prevProps.collapsedRhs;
+        const wasCollapsed = this.props.collapsedRhs && !prevProps.collapsedRhs;
+        const wasPanelSet = this.props.panel && !prevProps.panel;
+        const wasPanelCleared = !this.props.panel && prevProps.panel;
+
+        if (wasExpanded || wasPanelSet) {
+            this._createResizer();
+        } else if (wasCollapsed || wasPanelCleared) {
+            this.resizer.detach();
+            this.resizer = null;
+        }
+    }
+
+    render() {
+        const bodyView = React.Children.only(this.props.children);
+        const panelView = this.props.panel;
+
+        if (this.props.collapsedRhs || !panelView) {
+            return bodyView;
+        } else {
+            return <div className="mx_MainSplit" ref={this._setResizeContainerRef}>
+                { bodyView }
+                <ResizeHandle reverse={true} />
+                { panelView }
+            </div>;
+        }
+    }
+}

src/components/structures/MatrixChat.js

@@ -163,7 +163,7 @@ export default React.createClass({
             viewUserId: null,
 
             collapseLhs: false,
-            collapseRhs: false,
+            collapsedRhs: window.localStorage.getItem("mx_rhs_collapsed") === "true",
             leftDisabled: false,
             middleDisabled: false,
             rightDisabled: false,
@@ -579,7 +579,7 @@ export default React.createClass({
                 break;
             case 'view_user':
                 // FIXME: ugly hack to expand the RightPanel and then re-dispatch.
-                if (this.state.collapseRhs) {
+                if (this.state.collapsedRhs) {
                     setTimeout(()=>{
                         dis.dispatch({
                             action: 'show_right_panel',
@@ -680,13 +680,15 @@ export default React.createClass({
                 });
                 break;
             case 'hide_right_panel':
+                window.localStorage.setItem("mx_rhs_collapsed", true);
                 this.setState({
-                    collapseRhs: true,
+                    collapsedRhs: true,
                 });
                 break;
             case 'show_right_panel':
+                window.localStorage.setItem("mx_rhs_collapsed", false);
                 this.setState({
-                    collapseRhs: false,
+                    collapsedRhs: false,
                 });
                 break;
             case 'panel_disable': {
@@ -697,9 +699,11 @@ export default React.createClass({
                 });
                 break;
             }
-            case 'set_theme':
-                this._onSetTheme(payload.value);
-                break;
+            // case 'set_theme':
+                // disable changing the theme for now
+                // as other themes are not compatible with dharma
+                // this._onSetTheme(payload.value);
+                // break;
             case 'on_logging_in':
                 // We are now logging in, so set the state to reflect that
                 // NB. This does not touch 'ready' since if our dispatches
@@ -1239,7 +1243,7 @@ export default React.createClass({
             view: VIEWS.LOGIN,
             ready: false,
             collapseLhs: false,
-            collapseRhs: false,
+            collapsedRhs: false,
             currentRoomId: null,
             page_type: PageTypes.RoomDirectory,
         });

src/components/structures/MessagePanel.js

@@ -631,12 +631,20 @@ module.exports = React.createClass({
         }
     },
 
+    _scrollDownIfAtBottom: function() {
+        const scrollPanel = this.refs.scrollPanel;
+        if (scrollPanel) {
+            scrollPanel.checkScroll();
+        }
+    },
+
     onResize: function() {
         dis.dispatch({ action: 'timeline_resize' }, true);
     },
 
     render: function() {
         const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
+        const WhoIsTypingTile = sdk.getComponent("rooms.WhoIsTypingTile");
         const Spinner = sdk.getComponent("elements.Spinner");
         let topSpinner;
         let bottomSpinner;
@@ -656,6 +664,11 @@ module.exports = React.createClass({
             },
         );
 
+        let whoIsTyping;
+        if (this.props.room) {
+            whoIsTyping = (<WhoIsTypingTile room={this.props.room} onVisible={this._scrollDownIfAtBottom} />);
+        }
+
         return (
             <ScrollPanel ref="scrollPanel" className={className}
                     onScroll={this.props.onScroll}
@@ -666,6 +679,7 @@ module.exports = React.createClass({
                     stickyBottom={this.props.stickyBottom}>
                 { topSpinner }
                 { this._getEventTiles() }
+                { whoIsTyping }
                 { bottomSpinner }
             </ScrollPanel>
         );

src/components/structures/MyGroups.js

@@ -60,7 +60,6 @@ export default withMatrixClient(React.createClass({
     render: function() {
         const Loader = sdk.getComponent("elements.Spinner");
         const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const GroupTile = sdk.getComponent("groups.GroupTile");
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
 
@@ -112,7 +111,6 @@ export default withMatrixClient(React.createClass({
             <div className='mx_MyGroups_header'>
                 <div className="mx_MyGroups_headerCard">
                     <AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onCreateGroupClick}>
-                        <TintableSvg src="img/icons-create-room.svg" width="50" height="50" />
                     </AccessibleButton>
                     <div className="mx_MyGroups_headerCard_content">
                         <div className="mx_MyGroups_headerCard_header">

src/components/structures/RightPanel.js

@@ -2,6 +2,7 @@
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
 Copyright 2017 New Vector Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -19,86 +20,28 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { _t } from '../../languageHandler';
 import sdk from '../../index';
 import dis from '../../dispatcher';
 import { MatrixClient } from 'matrix-js-sdk';
-import Analytics from '../../Analytics';
 import RateLimitedFunc from '../../ratelimitedfunc';
-import AccessibleButton from '../../components/views/elements/AccessibleButton';
 import { showGroupInviteDialog, showGroupAddRoomDialog } from '../../GroupAddressPicker';
 import GroupStore from '../../stores/GroupStore';
 
-import { formatCount } from '../../utils/FormattingUtils';
-
-class HeaderButton extends React.Component {
-    constructor() {
-        super();
-        this.onClick = this.onClick.bind(this);
+export default class RightPanel extends React.Component {
+    static get propTypes() {
+        return {
+            roomId: React.PropTypes.string, // if showing panels for a given room, this is set
+            groupId: React.PropTypes.string, // if showing panels for a given group, this is set
+        };
     }
 
-    onClick(ev) {
-        Analytics.trackEvent(...this.props.analytics);
-        dis.dispatch({
-            action: 'view_right_panel_phase',
-            phase: this.props.clickPhase,
-        });
+    static get contextTypes() {
+        return {
+            matrixClient: PropTypes.instanceOf(MatrixClient),
+        };
     }
 
-    render() {
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
-        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
-
-        return <AccessibleButton
-            aria-label={this.props.title}
-            aria-expanded={this.props.isHighlighted}
-            title={this.props.title}
-            className="mx_RightPanel_headerButton"
-            onClick={this.onClick} >
-
-                <div className="mx_RightPanel_headerButton_badge">
-                    { this.props.badge ? this.props.badge : <span>&nbsp;</span> }
-                </div>
-                <TintableSvg src={this.props.iconSrc} width="25" height="25" />
-                { this.props.isHighlighted ? <div className="mx_RightPanel_headerButton_highlight" /> : <div /> }
-
-            </AccessibleButton>;
-    }
-}
-
-HeaderButton.propTypes = {
-    // Whether this button is highlighted
-    isHighlighted: PropTypes.bool.isRequired,
-    // The phase to swap to when the button is clicked
-    clickPhase: PropTypes.string.isRequired,
-    // The source file of the icon to display
-    iconSrc: PropTypes.string.isRequired,
-
-    // The badge to display above the icon
-    badge: PropTypes.node,
-    // The parameters to track the click event
-    analytics: PropTypes.arrayOf(PropTypes.string).isRequired,
-
-    // Button title
-    title: PropTypes.string.isRequired,
-};
-
-module.exports = React.createClass({
-    displayName: 'RightPanel',
-
-    propTypes: {
-        // TODO: We're trying to move away from these being props, but we need to know
-        // whether we should be displaying a room or group member list
-        roomId: React.PropTypes.string, // if showing panels for a given room, this is set
-        groupId: React.PropTypes.string, // if showing panels for a given group, this is set
-        collapsed: React.PropTypes.bool, // currently unused property to request for a minimized view of the panel
-    },
-
-    contextTypes: {
-        matrixClient: PropTypes.instanceOf(MatrixClient),
-    },
-
-    Phase: {
+    static Phase = Object.freeze({
         RoomMemberList: 'RoomMemberList',
         GroupMemberList: 'GroupMemberList',
         GroupRoomList: 'GroupRoomList',
@@ -107,160 +50,102 @@ module.exports = React.createClass({
         NotificationPanel: 'NotificationPanel',
         RoomMemberInfo: 'RoomMemberInfo',
         GroupMemberInfo: 'GroupMemberInfo',
-    },
+    });
 
-    componentWillMount: function() {
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            phase: this.props.groupId ? RightPanel.Phase.GroupMemberList : RightPanel.Phase.RoomMemberList,
+            isUserPrivilegedInGroup: null,
+        };
+        this.onAction = this.onAction.bind(this);
+        this.onRoomStateMember = this.onRoomStateMember.bind(this);
+        this.onGroupStoreUpdated = this.onGroupStoreUpdated.bind(this);
+        this.onInviteToGroupButtonClick = this.onInviteToGroupButtonClick.bind(this);
+        this.onAddRoomToGroupButtonClick = this.onAddRoomToGroupButtonClick.bind(this);
+
+        this._delayedUpdate = new RateLimitedFunc(() => {
+            this.forceUpdate();
+        }, 500);
+    }
+
+    componentWillMount() {
         this.dispatcherRef = dis.register(this.onAction);
         const cli = this.context.matrixClient;
         cli.on("RoomState.members", this.onRoomStateMember);
         this._initGroupStore(this.props.groupId);
-    },
+    }
 
-    componentWillUnmount: function() {
+    componentWillUnmount() {
         dis.unregister(this.dispatcherRef);
         if (this.context.matrixClient) {
             this.context.matrixClient.removeListener("RoomState.members", this.onRoomStateMember);
         }
         this._unregisterGroupStore(this.props.groupId);
-    },
-
-    getInitialState: function() {
-        return {
-            phase: this.props.groupId ? this.Phase.GroupMemberList : this.Phase.RoomMemberList,
-            isUserPrivilegedInGroup: null,
-        };
-    },
+    }
 
     componentWillReceiveProps(newProps) {
         if (newProps.groupId !== this.props.groupId) {
             this._unregisterGroupStore(this.props.groupId);
             this._initGroupStore(newProps.groupId);
         }
-    },
+    }
 
     _initGroupStore(groupId) {
         if (!groupId) return;
         GroupStore.registerListener(groupId, this.onGroupStoreUpdated);
-    },
+    }
 
     _unregisterGroupStore() {
         GroupStore.unregisterListener(this.onGroupStoreUpdated);
-    },
+    }
 
-    onGroupStoreUpdated: function() {
+    onGroupStoreUpdated() {
         this.setState({
             isUserPrivilegedInGroup: GroupStore.isUserPrivileged(this.props.groupId),
         });
-    },
+    }
 
-    onCollapseClick: function() {
-        dis.dispatch({
-            action: 'hide_right_panel',
-        });
-    },
-
-    onInviteButtonClick: function() {
-        if (this.context.matrixClient.isGuest()) {
-            dis.dispatch({action: 'require_registration'});
-            return;
-        }
-
-        // call AddressPickerDialog
-        dis.dispatch({
-            action: 'view_invite',
-            roomId: this.props.roomId,
-        });
-    },
-
-    onInviteToGroupButtonClick: function() {
+    onInviteToGroupButtonClick() {
         showGroupInviteDialog(this.props.groupId).then(() => {
             this.setState({
-                phase: this.Phase.GroupMemberList,
+                phase: RightPanel.Phase.GroupMemberList,
             });
         });
-    },
+    }
 
-    onAddRoomToGroupButtonClick: function() {
+    onAddRoomToGroupButtonClick() {
         showGroupAddRoomDialog(this.props.groupId).then(() => {
             this.forceUpdate();
         });
-    },
+    }
 
-    onRoomStateMember: function(ev, state, member) {
+    onRoomStateMember(ev, state, member) {
         if (member.roomId !== this.props.roomId) {
             return;
         }
         // redraw the badge on the membership list
-        if (this.state.phase === this.Phase.RoomMemberList && member.roomId === this.props.roomId) {
+        if (this.state.phase === RightPanel.Phase.RoomMemberList && member.roomId === this.props.roomId) {
             this._delayedUpdate();
-        } else if (this.state.phase === this.Phase.RoomMemberInfo && member.roomId === this.props.roomId &&
+        } else if (this.state.phase === RightPanel.Phase.RoomMemberInfo && member.roomId === this.props.roomId &&
                 member.userId === this.state.member.userId) {
             // refresh the member info (e.g. new power level)
             this._delayedUpdate();
         }
-    },
+    }
 
-    _delayedUpdate: new RateLimitedFunc(function() {
-        this.forceUpdate(); // eslint-disable-line babel/no-invalid-this
-    }, 500),
-
-    onAction: function(payload) {
-        if (payload.action === "view_user") {
-            dis.dispatch({
-                action: 'show_right_panel',
-            });
-            if (payload.member) {
-                this.setState({
-                    phase: this.Phase.RoomMemberInfo,
-                    member: payload.member,
-                });
-            } else {
-                if (this.props.roomId) {
-                    this.setState({
-                        phase: this.Phase.RoomMemberList,
-                    });
-                } else if (this.props.groupId) {
-                    this.setState({
-                        phase: this.Phase.GroupMemberList,
-                        member: payload.member,
-                    });
-                }
-            }
-        } else if (payload.action === "view_group") {
-            this.setState({
-                phase: this.Phase.GroupMemberList,
-                member: null,
-            });
-        } else if (payload.action === "view_group_room") {
-            this.setState({
-                phase: this.Phase.GroupRoomInfo,
-                groupRoomId: payload.groupRoomId,
-            });
-        } else if (payload.action === "view_group_room_list") {
-            this.setState({
-                phase: this.Phase.GroupRoomList,
-            });
-        } else if (payload.action === "view_group_member_list") {
-            this.setState({
-                phase: this.Phase.GroupMemberList,
-            });
-        } else if (payload.action === "view_group_user") {
-            this.setState({
-                phase: this.Phase.GroupMemberInfo,
-                member: payload.member,
-            });
-        } else if (payload.action === "view_room") {
-            this.setState({
-                phase: this.Phase.RoomMemberList,
-            });
-        } else if (payload.action === "view_right_panel_phase") {
+    onAction(payload) {
+        if (payload.action === "view_right_panel_phase") {
             this.setState({
                 phase: payload.phase,
+                groupRoomId: payload.groupRoomId,
+                groupId: payload.groupId,
+                member: payload.member,
             });
         }
-    },
+    }
 
-    render: function() {
+    render() {
         const MemberList = sdk.getComponent('rooms.MemberList');
         const MemberInfo = sdk.getComponent('rooms.MemberInfo');
         const NotificationPanel = sdk.getComponent('structures.NotificationPanel');
@@ -271,155 +156,42 @@ module.exports = React.createClass({
         const GroupRoomList = sdk.getComponent('groups.GroupRoomList');
         const GroupRoomInfo = sdk.getComponent('groups.GroupRoomInfo');
 
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
-
-        let inviteGroup;
-
-        let membersBadge;
-        let membersTitle = _t('Members');
-        if ((this.state.phase === this.Phase.RoomMemberList || this.state.phase === this.Phase.RoomMemberInfo)
-            && this.props.roomId
-        ) {
-            const cli = this.context.matrixClient;
-            const room = cli.getRoom(this.props.roomId);
-            let isUserInRoom;
-            if (room) {
-                const numMembers = room.getJoinedMemberCount();
-                membersTitle = _t('%(count)s Members', { count: numMembers });
-                membersBadge = <div title={membersTitle}>{ formatCount(numMembers) }</div>;
-                isUserInRoom = room.hasMembershipState(this.context.matrixClient.credentials.userId, 'join');
-            }
-
-            if (isUserInRoom) {
-                inviteGroup =
-                    <AccessibleButton className="mx_RightPanel_invite" onClick={this.onInviteButtonClick}>
-                        <div className="mx_RightPanel_icon" >
-                            <TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
-                        </div>
-                        <div className="mx_RightPanel_message">{ _t('Invite to this room') }</div>
-                    </AccessibleButton>;
-            }
-        }
-
-        const isPhaseGroup = [
-            this.Phase.GroupMemberInfo,
-            this.Phase.GroupMemberList,
-        ].includes(this.state.phase);
-
-        let headerButtons = [];
-        if (this.props.roomId) {
-            headerButtons = [
-                <HeaderButton key="_membersButton" title={membersTitle} iconSrc="img/icons-people.svg"
-                    isHighlighted={[this.Phase.RoomMemberList, this.Phase.RoomMemberInfo].includes(this.state.phase)}
-                    clickPhase={this.Phase.RoomMemberList}
-                    badge={membersBadge}
-                    analytics={['Right Panel', 'Member List Button', 'click']}
-                />,
-                <HeaderButton key="_filesButton" title={_t('Files')} iconSrc="img/icons-files.svg"
-                    isHighlighted={this.state.phase === this.Phase.FilePanel}
-                    clickPhase={this.Phase.FilePanel}
-                    analytics={['Right Panel', 'File List Button', 'click']}
-                />,
-                <HeaderButton key="_notifsButton" title={_t('Notifications')} iconSrc="img/icons-notifications.svg"
-                    isHighlighted={this.state.phase === this.Phase.NotificationPanel}
-                    clickPhase={this.Phase.NotificationPanel}
-                    analytics={['Right Panel', 'Notification List Button', 'click']}
-                />,
-            ];
-        } else if (this.props.groupId) {
-            headerButtons = [
-                <HeaderButton key="_groupMembersButton" title={_t('Members')} iconSrc="img/icons-people.svg"
-                    isHighlighted={isPhaseGroup}
-                    clickPhase={this.Phase.GroupMemberList}
-                    analytics={['Right Panel', 'Group Member List Button', 'click']}
-                />,
-                <HeaderButton key="_roomsButton" title={_t('Rooms')} iconSrc="img/icons-room.svg"
-                    isHighlighted={[this.Phase.GroupRoomList, this.Phase.GroupRoomInfo].includes(this.state.phase)}
-                    clickPhase={this.Phase.GroupRoomList}
-                    analytics={['Right Panel', 'Group Room List Button', 'click']}
-                />,
-            ];
-        }
-
-        if (this.props.roomId || this.props.groupId) {
-            // Hiding the right panel hides it completely and relies on an 'expand' button
-            // being put in the RoomHeader or GroupView header, so only show the minimise
-            // button on these 2 screens or you won't be able to re-expand the panel.
-            headerButtons.push(
-                <AccessibleButton className="mx_RightPanel_headerButton mx_RightPanel_collapsebutton" key="_minimizeButton"
-                    title={_t("Hide panel")} aria-label={_t("Hide panel")} onClick={this.onCollapseClick}
-                >
-                    <TintableSvg src="img/minimise.svg" width="10" height="16" alt="" />
-                </AccessibleButton>,
-            );
-        }
-
         let panel = <div />;
-        if (!this.props.collapsed) {
-            if (this.props.roomId && this.state.phase === this.Phase.RoomMemberList) {
-                panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />;
-            } else if (this.props.groupId && this.state.phase === this.Phase.GroupMemberList) {
-                panel = <GroupMemberList groupId={this.props.groupId} key={this.props.groupId} />;
-            } else if (this.state.phase === this.Phase.GroupRoomList) {
-                panel = <GroupRoomList groupId={this.props.groupId} key={this.props.groupId} />;
-            } else if (this.state.phase === this.Phase.RoomMemberInfo) {
-                panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.state.member.userId} />;
-            } else if (this.state.phase === this.Phase.GroupMemberInfo) {
-                panel = <GroupMemberInfo
-                    groupMember={this.state.member}
-                    groupId={this.props.groupId}
-                    key={this.state.member.user_id} />;
-            } else if (this.state.phase === this.Phase.GroupRoomInfo) {
-                panel = <GroupRoomInfo
-                    groupRoomId={this.state.groupRoomId}
-                    groupId={this.props.groupId}
-                    key={this.state.groupRoomId} />;
-            } else if (this.state.phase === this.Phase.NotificationPanel) {
-                panel = <NotificationPanel />;
-            } else if (this.state.phase === this.Phase.FilePanel) {
-                panel = <FilePanel roomId={this.props.roomId} />;
-            }
-        }
 
-        if (!panel) {
-            panel = <div className="mx_RightPanel_blank" />;
-        }
-
-        if (this.props.groupId && this.state.isUserPrivilegedInGroup) {
-            inviteGroup = isPhaseGroup ? (
-                <AccessibleButton className="mx_RightPanel_invite" onClick={this.onInviteToGroupButtonClick}>
-                    <div className="mx_RightPanel_icon" >
-                        <TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
-                    </div>
-                    <div className="mx_RightPanel_message">{ _t('Invite to this community') }</div>
-                </AccessibleButton>
-            ) : (
-                <AccessibleButton className="mx_RightPanel_invite" onClick={this.onAddRoomToGroupButtonClick}>
-                    <div className="mx_RightPanel_icon" >
-                        <TintableSvg src="img/icons-room-add.svg" width="35" height="35" />
-                    </div>
-                    <div className="mx_RightPanel_message">{ _t('Add rooms to this community') }</div>
-                </AccessibleButton>
-            );
+        if (this.props.roomId && this.state.phase === RightPanel.Phase.RoomMemberList) {
+            panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />;
+        } else if (this.props.groupId && this.state.phase === RightPanel.Phase.GroupMemberList) {
+            panel = <GroupMemberList groupId={this.props.groupId} key={this.props.groupId} />;
+        } else if (this.state.phase === RightPanel.Phase.GroupRoomList) {
+            panel = <GroupRoomList groupId={this.props.groupId} key={this.props.groupId} />;
+        } else if (this.state.phase === RightPanel.Phase.RoomMemberInfo) {
+            panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.state.member.userId} />;
+        } else if (this.state.phase === RightPanel.Phase.GroupMemberInfo) {
+            panel = <GroupMemberInfo
+                groupMember={this.state.member}
+                groupId={this.props.groupId}
+                key={this.state.member.user_id} />;
+        } else if (this.state.phase === RightPanel.Phase.GroupRoomInfo) {
+            panel = <GroupRoomInfo
+                groupRoomId={this.state.groupRoomId}
+                groupId={this.props.groupId}
+                key={this.state.groupRoomId} />;
+        } else if (this.state.phase === RightPanel.Phase.NotificationPanel) {
+            panel = <NotificationPanel />;
+        } else if (this.state.phase === RightPanel.Phase.FilePanel) {
+            panel = <FilePanel roomId={this.props.roomId} />;
         }
 
         const classes = classNames("mx_RightPanel", "mx_fadable", {
             "collapsed": this.props.collapsed,
             "mx_fadable_faded": this.props.disabled,
+            "dark-panel": true,
         });
 
         return (
             <aside className={classes}>
-                <div className="mx_RightPanel_header">
-                    <div className="mx_RightPanel_headerButtonGroup">
-                        { headerButtons }
-                    </div>
-                </div>
                 { panel }
-                <div className="mx_RightPanel_footer">
-                    { inviteGroup }
-                </div>
             </aside>
         );
-    },
-});
+    }
+}

src/components/structures/RoomStatusBar.js

@@ -62,10 +62,6 @@ module.exports = React.createClass({
         // more interesting)
         hasActiveCall: PropTypes.bool,
 
-        // Number of names to display in typing indication. E.g. set to 3, will
-        // result in "X, Y, Z and 100 others are typing."
-        whoIsTypingLimit: PropTypes.number,
-
         // true if the room is being peeked at. This affects components that shouldn't
         // logically be shown when peeking, such as a prompt to invite people to a room.
         isPeeking: PropTypes.bool,
@@ -103,24 +99,16 @@ module.exports = React.createClass({
         onVisible: PropTypes.func,
     },
 
-    getDefaultProps: function() {
-        return {
-            whoIsTypingLimit: 3,
-        };
-    },
-
     getInitialState: function() {
         return {
             syncState: MatrixClientPeg.get().getSyncState(),
             syncStateData: MatrixClientPeg.get().getSyncStateData(),
-            usersTyping: WhoIsTyping.usersTypingApartFromMe(this.props.room),
             unsentMessages: getUnsentMessages(this.props.room),
         };
     },
 
     componentWillMount: function() {
         MatrixClientPeg.get().on("sync", this.onSyncStateChange);
-        MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
         MatrixClientPeg.get().on("Room.localEchoUpdated", this._onRoomLocalEchoUpdated);
 
         this._checkSize();
@@ -135,7 +123,6 @@ module.exports = React.createClass({
         const client = MatrixClientPeg.get();
         if (client) {
             client.removeListener("sync", this.onSyncStateChange);
-            client.removeListener("RoomMember.typing", this.onRoomMemberTyping);
             client.removeListener("Room.localEchoUpdated", this._onRoomLocalEchoUpdated);
         }
     },
@@ -150,12 +137,6 @@ module.exports = React.createClass({
         });
     },
 
-    onRoomMemberTyping: function(ev, member) {
-        this.setState({
-            usersTyping: WhoIsTyping.usersTypingApartFromMeAndIgnored(this.props.room),
-        });
-    },
-
     _onSendWithoutVerifyingClick: function() {
         cryptodevices.getUnknownDevicesForRoom(MatrixClientPeg.get(), this.props.room).then((devices) => {
             cryptodevices.markAllDevicesKnown(MatrixClientPeg.get(), devices);
@@ -199,7 +180,6 @@ module.exports = React.createClass({
     // indicate other sizes.
     _getSize: function() {
         if (this._shouldShowConnectionError() ||
-            (this.state.usersTyping.length > 0) ||
             this.props.numUnreadMessages ||
             !this.props.atEndOfLiveTimeline ||
             this.props.hasActiveCall ||
@@ -213,10 +193,7 @@ module.exports = React.createClass({
     },
 
     // return suitable content for the image on the left of the status bar.
-    //
-    // if wantPlaceholder is true, we include a "..." placeholder if
-    // there is nothing better to put in.
-    _getIndicator: function(wantPlaceholder) {
+    _getIndicator: function() {
         if (this.props.numUnreadMessages) {
             return (
                 <div className="mx_RoomStatusBar_scrollDownIndicator"
@@ -250,49 +227,9 @@ module.exports = React.createClass({
             return null;
         }
 
-        if (wantPlaceholder) {
-            return (
-                <div className="mx_RoomStatusBar_typingIndicatorAvatars">
-                    { this._renderTypingIndicatorAvatars(this.props.whoIsTypingLimit) }
-                </div>
-            );
-        }
-
         return null;
     },
 
-    _renderTypingIndicatorAvatars: function(limit) {
-        let users = this.state.usersTyping;
-
-        let othersCount = 0;
-        if (users.length > limit) {
-            othersCount = users.length - limit + 1;
-            users = users.slice(0, limit - 1);
-        }
-
-        const avatars = users.map((u) => {
-            return (
-                <MemberAvatar
-                    key={u.userId}
-                    member={u}
-                    width={24}
-                    height={24}
-                    resizeMethod="crop"
-                />
-            );
-        });
-
-        if (othersCount > 0) {
-            avatars.push(
-                <span className="mx_RoomStatusBar_typingIndicatorRemaining" key="others">
-                    +{ othersCount }
-                </span>,
-            );
-        }
-
-        return avatars;
-    },
-
     _shouldShowConnectionError: function() {
         // no conn bar trumps unread count since you can't get unread messages
         // without a connection! (technically may already have some but meh)
@@ -440,18 +377,6 @@ module.exports = React.createClass({
             );
         }
 
-        const typingString = WhoIsTyping.whoIsTypingString(
-            this.state.usersTyping,
-            this.props.whoIsTypingLimit,
-        );
-        if (typingString) {
-            return (
-                <div className="mx_RoomStatusBar_typingBar">
-                    <EmojiText>{ typingString }</EmojiText>
-                </div>
-            );
-        }
-
         if (this.props.hasActiveCall) {
             return (
                 <div className="mx_RoomStatusBar_callBar">
@@ -483,7 +408,7 @@ module.exports = React.createClass({
 
     render: function() {
         const content = this._getContent();
-        const indicator = this._getIndicator(this.state.usersTyping.length > 0);
+        const indicator = this._getIndicator();
 
         return (
             <div className="mx_RoomStatusBar">

src/components/structures/RoomSubList.js

@@ -19,12 +19,11 @@ limitations under the License.
 import React from 'react';
 import classNames from 'classnames';
 import sdk from '../../index';
-import { Droppable } from 'react-beautiful-dnd';
-import { _t } from '../../languageHandler';
 import dis from '../../dispatcher';
 import Unread from '../../Unread';
 import * as RoomNotifs from '../../RoomNotifs';
 import * as FormattingUtils from '../../utils/FormattingUtils';
+import IndicatorScrollbar from './IndicatorScrollbar';
 import { KeyCode } from '../../Keyboard';
 import { Group } from 'matrix-js-sdk';
 import PropTypes from 'prop-types';
@@ -33,8 +32,6 @@ import PropTypes from 'prop-types';
 // turn this on for drop & drag console debugging galore
 const debug = false;
 
-const TRUNCATE_AT = 10;
-
 const RoomSubList = React.createClass({
     displayName: 'RoomSubList',
 
@@ -44,7 +41,6 @@ const RoomSubList = React.createClass({
         list: PropTypes.arrayOf(PropTypes.object).isRequired,
         label: PropTypes.string.isRequired,
         tagName: PropTypes.string,
-        editable: PropTypes.bool,
 
         order: PropTypes.string.isRequired,
 
@@ -55,21 +51,15 @@ const RoomSubList = React.createClass({
         showSpinner: PropTypes.bool, // true to show a spinner if 0 elements when expanded
         collapsed: PropTypes.bool.isRequired, // is LeftPanel collapsed?
         onHeaderClick: PropTypes.func,
-        alwaysShowHeader: PropTypes.bool,
         incomingCall: PropTypes.object,
-        onShowMoreRooms: PropTypes.func,
-        searchFilter: PropTypes.string,
-        emptyContent: PropTypes.node, // content shown if the list is empty
+        isFiltered: PropTypes.bool,
         headerItems: PropTypes.node, // content shown in the sublist header
         extraTiles: PropTypes.arrayOf(PropTypes.node), // extra elements added beneath tiles
-        showEmpty: PropTypes.bool,
     },
 
     getInitialState: function() {
         return {
             hidden: this.props.startAsHidden || false,
-            truncateAt: TRUNCATE_AT,
-            sortedList: [],
         };
     },
 
@@ -77,18 +67,12 @@ const RoomSubList = React.createClass({
         return {
             onHeaderClick: function() {
             }, // NOP
-            onShowMoreRooms: function() {
-            }, // NOP
             extraTiles: [],
             isInvite: false,
-            showEmpty: true,
         };
     },
 
     componentWillMount: function() {
-        this.setState({
-            sortedList: this.applySearchFilter(this.props.list, this.props.searchFilter),
-        });
         this.dispatcherRef = dis.register(this.onAction);
     },
 
@@ -96,23 +80,6 @@ const RoomSubList = React.createClass({
         dis.unregister(this.dispatcherRef);
     },
 
-    componentWillReceiveProps: function(newProps) {
-        // order the room list appropriately before we re-render
-        //if (debug) console.log("received new props, list = " + newProps.list);
-        this.setState({
-            sortedList: this.applySearchFilter(newProps.list, newProps.searchFilter),
-        });
-    },
-
-    applySearchFilter: function(list, filter) {
-        if (filter === "") return list;
-        const lcFilter = filter.toLowerCase();
-        // case insensitive if room name includes filter,
-        // or if starts with `#` and one of room's aliases starts with filter
-        return list.filter((room) => (room.name && room.name.toLowerCase().includes(lcFilter)) ||
-            (filter[0] === '#' && room.getAliases().some((alias) => alias.toLowerCase().startsWith(lcFilter))));
-    },
-
     // The header is collapsable if it is hidden or not stuck
     // The dataset elements are added in the RoomList _initAndPositionStickyHeaders method
     isCollapsableOnClick: function() {
@@ -143,15 +110,9 @@ const RoomSubList = React.createClass({
         if (this.isCollapsableOnClick()) {
             // The header isCollapsable, so the click is to be interpreted as collapse and truncation logic
             const isHidden = !this.state.hidden;
-            this.setState({hidden: isHidden});
-
-            if (isHidden) {
-                // as good a way as any to reset the truncate state
-                this.setState({truncateAt: TRUNCATE_AT});
-            }
-
-            this.props.onShowMoreRooms();
-            this.props.onHeaderClick(isHidden);
+            this.setState({hidden: isHidden}, () => {
+                this.props.onHeaderClick(isHidden);
+            });
         } else {
             // The header is stuck, so the click is to be interpreted as a scroll to the header
             this.props.onHeaderClick(this.state.hidden, this.refs.header.dataset.originalPosition);
@@ -178,10 +139,9 @@ const RoomSubList = React.createClass({
     /**
      * Total up all the notification counts from the rooms
      *
-     * @param {Number} truncateAt If supplied will only total notifications for rooms outside the truncation number
      * @returns {Array} The array takes the form [total, highlight] where highlight is a bool
      */
-    roomNotificationCount: function(truncateAt) {
+    roomNotificationCount: function() {
         const self = this;
 
         if (this.props.isInvite) {
@@ -189,20 +149,18 @@ const RoomSubList = React.createClass({
         }
 
         return this.props.list.reduce(function(result, room, index) {
-            if (truncateAt === undefined || index >= truncateAt) {
-                const roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
-                const highlight = room.getUnreadNotificationCount('highlight') > 0;
-                const notificationCount = room.getUnreadNotificationCount();
+            const roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
+            const highlight = room.getUnreadNotificationCount('highlight') > 0;
+            const notificationCount = room.getUnreadNotificationCount();
 
-                const notifBadges = notificationCount > 0 && self._shouldShowNotifBadge(roomNotifState);
-                const mentionBadges = highlight && self._shouldShowMentionBadge(roomNotifState);
-                const badges = notifBadges || mentionBadges;
+            const notifBadges = notificationCount > 0 && self._shouldShowNotifBadge(roomNotifState);
+            const mentionBadges = highlight && self._shouldShowMentionBadge(roomNotifState);
+            const badges = notifBadges || mentionBadges;
 
-                if (badges) {
-                    result[0] += notificationCount;
-                    if (highlight) {
-                        result[1] = true;
-                    }
+            if (badges) {
+                result[0] += notificationCount;
+                if (highlight) {
+                    result[1] = true;
                 }
             }
             return result;
@@ -217,15 +175,9 @@ const RoomSubList = React.createClass({
     },
 
     makeRoomTiles: function() {
-        const DNDRoomTile = sdk.getComponent("rooms.DNDRoomTile");
         const RoomTile = sdk.getComponent("rooms.RoomTile");
-        return this.state.sortedList.map((room, index) => {
-            // XXX: is it evil to pass in this as a prop to RoomTile? Yes.
-
-            // We should only use <DNDRoomTile /> when editable
-            const RoomTileComponent = this.props.editable ? DNDRoomTile : RoomTile;
-            return <RoomTileComponent
-                index={index} // For DND
+        return this.props.list.map((room, index) => {
+            return <RoomTile
                 room={room}
                 roomSubList={this}
                 tagName={this.props.tagName}
@@ -246,7 +198,7 @@ const RoomSubList = React.createClass({
         e.preventDefault();
         e.stopPropagation();
         // find first room which has notifications and switch to it
-        for (const room of this.state.sortedList) {
+        for (const room of this.props.list) {
             const roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
             const highlight = room.getUnreadNotificationCount('highlight') > 0;
             const notificationCount = room.getUnreadNotificationCount();
@@ -269,10 +221,10 @@ const RoomSubList = React.createClass({
         e.preventDefault();
         e.stopPropagation();
         // switch to first room in sortedList as that'll be the top of the list for the user
-        if (this.state.sortedList && this.state.sortedList.length > 0) {
+        if (this.props.list && this.props.list.length > 0) {
             dis.dispatch({
                 action: 'view_room',
-                room_id: this.state.sortedList[0].roomId,
+                room_id: this.props.list[0].roomId,
             });
         } else if (this.props.extraTiles && this.props.extraTiles.length > 0) {
             // Group Invites are different in that they are all extra tiles and not rooms
@@ -287,32 +239,25 @@ const RoomSubList = React.createClass({
     },
 
     _getHeaderJsx: function() {
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const subListNotifications = this.roomNotificationCount();
         const subListNotifCount = subListNotifications[0];
         const subListNotifHighlight = subListNotifications[1];
 
-        const totalTiles = this.props.list.length + (this.props.extraTiles || []).length;
-        const roomCount = totalTiles > 0 ? totalTiles : '';
-
-        const chevronClasses = classNames({
-            'mx_RoomSubList_chevron': true,
-            'mx_RoomSubList_chevronRight': this.state.hidden,
-            'mx_RoomSubList_chevronDown': !this.state.hidden,
-        });
-
-        const badgeClasses = classNames({
-            'mx_RoomSubList_badge': true,
-            'mx_RoomSubList_badgeHighlight': subListNotifHighlight,
-        });
-
         let badge;
-        if (subListNotifCount > 0) {
-            badge = <div className={badgeClasses} onClick={this._onNotifBadgeClick}>
-                { FormattingUtils.formatCount(subListNotifCount) }
-            </div>;
-        } else if (this.props.isInvite) {
-            // no notifications but highlight anyway because this is an invite badge
-            badge = <div className={badgeClasses} onClick={this._onInviteBadgeClick}>!</div>;
+        if (!this.props.collapsed) {
+            const badgeClasses = classNames({
+                'mx_RoomSubList_badge': true,
+                'mx_RoomSubList_badgeHighlight': subListNotifHighlight,
+            });
+            if (subListNotifCount > 0) {
+                badge = <div className={badgeClasses} onClick={this._onNotifBadgeClick}>
+                    { FormattingUtils.formatCount(subListNotifCount) }
+                </div>;
+            } else if (this.props.isInvite) {
+                // no notifications but highlight anyway because this is an invite badge
+                badge = <div className={badgeClasses} onClick={this._onInviteBadgeClick}>!</div>;
+            }
         }
 
         // When collapsed, allow a long hover on the header to show user
@@ -320,9 +265,6 @@ const RoomSubList = React.createClass({
         let title;
         if (this.props.collapsed) {
             title = this.props.label;
-            if (roomCount !== '') {
-                title += " [" + roomCount + "]";
-            }
         }
 
         let incomingCall;
@@ -333,126 +275,77 @@ const RoomSubList = React.createClass({
                 <IncomingCallBox className="mx_RoomSubList_incomingCall" incomingCall={this.props.incomingCall} />;
         }
 
-        const tabindex = this.props.searchFilter === "" ? "0" : "-1";
+        let addRoomButton;
+        if (this.props.onAddRoom) {
+            addRoomButton = (
+                <AccessibleButton onClick={ this.props.onAddRoom } className="mx_RoomSubList_addRoom" />
+            );
+        }
 
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const len = this.props.list.length + this.props.extraTiles.length;
+        let chevron;
+        if (len) {
+            const chevronClasses = classNames({
+                'mx_RoomSubList_chevron': true,
+                'mx_RoomSubList_chevronRight': this.state.hidden,
+                'mx_RoomSubList_chevronDown': !this.state.hidden,
+            });
+            chevron = (<div className={chevronClasses}></div>);
+        }
+
+        const tabindex = this.props.isFiltered ? "0" : "-1";
         return (
-            <div className="mx_RoomSubList_labelContainer" title={title} ref="header">
-                <AccessibleButton onClick={this.onClick} className="mx_RoomSubList_label" tabIndex={tabindex}>
-                    {this.props.collapsed ? '' : this.props.label}
-                    <div className="mx_RoomSubList_roomCount">{roomCount}</div>
-                    <div className={chevronClasses} />
-                    {badge}
-                    {incomingCall}
+            <div className="mx_RoomSubList_labelContainer" title={ title } ref="header">
+                <AccessibleButton onClick={ this.onClick } className="mx_RoomSubList_label" tabIndex={tabindex}>
+                    { chevron }
+                    <span>{this.props.label}</span>
+                    { incomingCall }
                 </AccessibleButton>
+                { badge }
+                { addRoomButton }
             </div>
         );
     },
 
-    _createOverflowTile: function(overflowCount, totalCount) {
-        let content = <div className="mx_RoomSubList_chevronDown" />;
-
-        const overflowNotifications = this.roomNotificationCount(TRUNCATE_AT);
-        const overflowNotifCount = overflowNotifications[0];
-        const overflowNotifHighlight = overflowNotifications[1];
-        if (overflowNotifCount && !this.props.collapsed) {
-            content = FormattingUtils.formatCount(overflowNotifCount);
+    checkOverflow: function() {
+        if (this.refs.scroller) {
+            this.refs.scroller.checkOverflow();
         }
-
-        const badgeClasses = classNames({
-            'mx_RoomSubList_moreBadge': true,
-            'mx_RoomSubList_moreBadgeNotify': overflowNotifCount && !this.props.collapsed,
-            'mx_RoomSubList_moreBadgeHighlight': overflowNotifHighlight && !this.props.collapsed,
-        });
-
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        return (
-            <AccessibleButton className="mx_RoomSubList_ellipsis" onClick={this._showFullMemberList}>
-                <div className="mx_RoomSubList_line" />
-                <div className="mx_RoomSubList_more">{_t("more")}</div>
-                <div className={badgeClasses}>{content}</div>
-            </AccessibleButton>
-        );
-    },
-
-    _showFullMemberList: function() {
-        this.setState({
-            truncateAt: -1,
-        });
-
-        this.props.onShowMoreRooms();
-        this.props.onHeaderClick(false);
     },
 
     render: function() {
-        const TruncatedList = sdk.getComponent('elements.TruncatedList');
-
-        let content;
-
-        if (this.props.showEmpty) {
-            // this is new behaviour with still controversial UX in that in hiding RoomSubLists the drop zones for DnD
-            // are also gone so when filtering users can't DnD rooms to some tags but is a lot cleaner otherwise.
-            if (this.state.sortedList.length === 0 && !this.props.searchFilter && this.props.extraTiles.length === 0) {
-                content = this.props.emptyContent;
+        const len = this.props.list.length + this.props.extraTiles.length;
+        if (len) {
+            const subListClasses = classNames({
+                "mx_RoomSubList": true,
+                "mx_RoomSubList_hidden": this.state.hidden,
+                "mx_RoomSubList_nonEmpty": len && !this.state.hidden,
+            });
+            if (this.state.hidden) {
+                return <div className={subListClasses}>
+                    {this._getHeaderJsx()}
+                </div>;
             } else {
-                content = this.makeRoomTiles();
-                content.push(...this.props.extraTiles);
+                const tiles = this.makeRoomTiles();
+                tiles.push(...this.props.extraTiles);
+                return <div className={subListClasses}>
+                    {this._getHeaderJsx()}
+                    <IndicatorScrollbar ref="scroller" className="mx_RoomSubList_scroll">
+                        { tiles }
+                    </IndicatorScrollbar>
+                </div>;
             }
-        } else {
-            if (this.state.sortedList.length === 0 && this.props.extraTiles.length === 0) {
-                // if no search filter is applied and there is a placeholder defined then show it, otherwise show nothing
-                if (!this.props.searchFilter && this.props.emptyContent) {
-                    content = this.props.emptyContent;
-                } else {
-                    // don't show an empty sublist
-                    return null;
-                }
-            } else {
-                content = this.makeRoomTiles();
-                content.push(...this.props.extraTiles);
-            }
-        }
-
-        if (this.state.sortedList.length > 0 || this.props.extraTiles.length > 0 || this.props.editable) {
-            let subList;
-            const classes = "mx_RoomSubList";
-
-            if (!this.state.hidden) {
-                subList = <TruncatedList className={classes} truncateAt={this.state.truncateAt}
-                                         createOverflowElement={this._createOverflowTile}>
-                    {content}
-                </TruncatedList>;
-            } else {
-                subList = <TruncatedList className={classes}>
-                </TruncatedList>;
-            }
-
-            const subListContent = <div>
-                {this._getHeaderJsx()}
-                {subList}
-            </div>;
-
-            return this.props.editable ?
-                <Droppable
-                    droppableId={"room-sub-list-droppable_" + this.props.tagName}
-                    type="draggable-RoomTile"
-                >
-                    {(provided, snapshot) => (
-                        <div ref={provided.innerRef}>
-                            {subListContent}
-                        </div>
-                    )}
-                </Droppable> : subListContent;
         } else {
             const Loader = sdk.getComponent("elements.Spinner");
-            if (this.props.showSpinner) {
+            let content;
+            if (this.props.showSpinner && !this.state.hidden) {
                 content = <Loader />;
             }
 
             return (
                 <div className="mx_RoomSubList">
-                    {this.props.alwaysShowHeader ? this._getHeaderJsx() : undefined}
-                    { this.state.hidden ? undefined : content }
+                    { this._getHeaderJsx() }
+                    { content }
                 </div>
             );
         }

src/components/structures/RoomView.js

@@ -44,6 +44,8 @@ const Rooms = require('../../Rooms');
 
 import { KeyCode, isOnlyCtrlOrCmdKeyEvent } from '../../Keyboard';
 
+import MainSplit from './MainSplit';
+import RightPanel from './RightPanel';
 import RoomViewStore from '../../stores/RoomViewStore';
 import RoomScrollStateStore from '../../stores/RoomScrollStateStore';
 import WidgetEchoStore from '../../stores/WidgetEchoStore';
@@ -1571,18 +1573,20 @@ module.exports = React.createClass({
                             oobData={this.props.oobData}
                             collapsedRhs={this.props.collapsedRhs}
                         />
-                        <div className="mx_RoomView_auxPanel">
-                            <RoomPreviewBar onJoinClick={this.onJoinButtonClicked}
-                                            onForgetClick={this.onForgetClick}
-                                            onRejectClick={this.onRejectThreepidInviteButtonClicked}
-                                            canPreview={false} error={this.state.roomLoadError}
-                                            roomAlias={roomAlias}
-                                            spinner={this.state.joining}
-                                            spinnerState="joining"
-                                            inviterName={inviterName}
-                                            invitedEmail={invitedEmail}
-                                            room={this.state.room}
-                            />
+                        <div className="mx_RoomView_body">
+                            <div className="mx_RoomView_auxPanel">
+                                <RoomPreviewBar onJoinClick={this.onJoinButtonClicked}
+                                                onForgetClick={this.onForgetClick}
+                                                onRejectClick={this.onRejectThreepidInviteButtonClicked}
+                                                canPreview={false} error={this.state.roomLoadError}
+                                                roomAlias={roomAlias}
+                                                spinner={this.state.joining}
+                                                spinnerState="joining"
+                                                inviterName={inviterName}
+                                                invitedEmail={invitedEmail}
+                                                room={this.state.room}
+                                />
+                            </div>
                         </div>
                         <div className="mx_RoomView_messagePanel"></div>
                     </div>
@@ -1616,16 +1620,18 @@ module.exports = React.createClass({
                             room={this.state.room}
                             collapsedRhs={this.props.collapsedRhs}
                         />
-                        <div className="mx_RoomView_auxPanel">
-                            <RoomPreviewBar onJoinClick={this.onJoinButtonClicked}
-                                            onForgetClick={this.onForgetClick}
-                                            onRejectClick={this.onRejectButtonClicked}
-                                            inviterName={inviterName}
-                                            canPreview={false}
-                                            spinner={this.state.joining}
-                                            spinnerState="joining"
-                                            room={this.state.room}
-                            />
+                        <div className="mx_RoomView_body">
+                            <div className="mx_RoomView_auxPanel">
+                                <RoomPreviewBar onJoinClick={this.onJoinButtonClicked}
+                                                onForgetClick={this.onForgetClick}
+                                                onRejectClick={this.onRejectButtonClicked}
+                                                inviterName={inviterName}
+                                                canPreview={false}
+                                                spinner={this.state.joining}
+                                                spinnerState="joining"
+                                                room={this.state.room}
+                                />
+                            </div>
                         </div>
                         <div className="mx_RoomView_messagePanel"></div>
                     </div>
@@ -1668,7 +1674,6 @@ module.exports = React.createClass({
                 onResize={this.onChildResize}
                 onVisible={this.onStatusBarVisible}
                 onHidden={this.onStatusBarHidden}
-                whoIsTypingLimit={3}
             />;
         }
 
@@ -1732,6 +1737,7 @@ module.exports = React.createClass({
 
         const auxPanel = (
             <AuxPanel ref="auxPanel" room={this.state.room}
+              fullHeight={this.state.editingRoomSettings}
               userId={MatrixClientPeg.get().credentials.userId}
               conferenceHandler={this.props.ConferenceHandler}
               draggingFile={this.state.draggingFile}
@@ -1860,14 +1866,10 @@ module.exports = React.createClass({
         let topUnreadMessagesBar = null;
         if (this.state.showTopUnreadMessagesBar) {
             const TopUnreadMessagesBar = sdk.getComponent('rooms.TopUnreadMessagesBar');
-            topUnreadMessagesBar = (
-                <div className="mx_RoomView_topUnreadMessagesBar">
-                    <TopUnreadMessagesBar
-                       onScrollUpClick={this.jumpToReadMarker}
-                       onCloseClick={this.forgetReadMarker}
-                    />
-                </div>
-            );
+            topUnreadMessagesBar = (<TopUnreadMessagesBar
+                                       onScrollUpClick={this.jumpToReadMarker}
+                                       onCloseClick={this.forgetReadMarker}
+                                    />);
         }
         const statusBarAreaClass = classNames(
             "mx_RoomView_statusArea",
@@ -1883,8 +1885,10 @@ module.exports = React.createClass({
             },
         );
 
+        const rightPanel = this.state.room ? <RightPanel roomId={this.state.room.roomId} /> : undefined;
+
         return (
-            <div className={"mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "")} ref="roomView">
+            <main className={"mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "")} ref="roomView">
                 <RoomHeader ref="header" room={this.state.room} searchInfo={searchInfo}
                     oobData={this.props.oobData}
                     editing={this.state.editingRoomSettings}
@@ -1899,20 +1903,24 @@ module.exports = React.createClass({
                     onForgetClick={(myMembership === "leave") ? this.onForgetClick : null}
                     onLeaveClick={(myMembership === "join") ? this.onLeaveClick : null}
                 />
-                { auxPanel }
-                <div className={fadableSectionClasses}>
-                    { topUnreadMessagesBar }
-                    { messagePanel }
-                    { searchResultsPanel }
-                    <div className={statusBarAreaClass}>
-                        <div className="mx_RoomView_statusAreaBox">
-                            <div className="mx_RoomView_statusAreaBox_line"></div>
-                            { statusBar }
+                <MainSplit panel={rightPanel} collapsedRhs={this.props.collapsedRhs}>
+                    <div className={fadableSectionClasses}>
+                        { auxPanel }
+                        <div className="mx_RoomView_timeline">
+                            { topUnreadMessagesBar }
+                            { messagePanel }
+                            { searchResultsPanel }
                         </div>
+                        <div className={statusBarAreaClass}>
+                            <div className="mx_RoomView_statusAreaBox">
+                                <div className="mx_RoomView_statusAreaBox_line"></div>
+                                { statusBar }
+                            </div>
+                        </div>
+                        { messageComposer }
                     </div>
-                    { messageComposer }
-                </div>
-            </div>
+                </MainSplit>
+            </main>
         );
     },
 });

src/components/structures/SearchBox.js

@@ -28,8 +28,8 @@ module.exports = React.createClass({
     displayName: 'SearchBox',
 
     propTypes: {
-        collapsed: React.PropTypes.bool,
         onSearch: React.PropTypes.func,
+        onCleared: React.PropTypes.func,
     },
 
     getInitialState: function() {
@@ -56,7 +56,6 @@ module.exports = React.createClass({
             case 'focus_room_filter':
                 if (this.refs.search) {
                     this.refs.search.focus();
-                    this.refs.search.select();
                 }
                 break;
         }
@@ -75,86 +74,49 @@ module.exports = React.createClass({
         100,
     ),
 
-    onToggleCollapse: function(show) {
-        if (show) {
-            dis.dispatch({
-                action: 'show_left_panel',
-            });
-        } else {
-            dis.dispatch({
-                action: 'hide_left_panel',
-            });
-        }
-    },
-
     _onKeyDown: function(ev) {
         switch (ev.keyCode) {
             case KeyCode.ESCAPE:
-                this._clearSearch();
-                dis.dispatch({action: 'focus_composer'});
+                this._clearSearch("keyboard");
                 break;
         }
     },
 
-    _clearSearch: function() {
+    _onFocus: function(ev) {
+        ev.target.select();
+    },
+
+    _clearSearch: function(source) {
         this.refs.search.value = "";
         this.onChange();
+        if (this.props.onCleared) {
+            this.props.onCleared(source);
+        }
     },
 
     render: function() {
         const TintableSvg = sdk.getComponent('elements.TintableSvg');
 
-        const collapseTabIndex = this.refs.search && this.refs.search.value !== "" ? "-1" : "0";
+        const clearButton = this.state.searchTerm.length > 0 ?
+            (<AccessibleButton key="button"
+                    className="mx_SearchBox_closeButton"
+                    onClick={ () => {this._clearSearch("button")} }>
+            </AccessibleButton>) :  undefined;
 
-        let toggleCollapse;
-        if (this.props.collapsed) {
-            toggleCollapse =
-                <AccessibleButton className="mx_SearchBox_maximise" tabIndex={collapseTabIndex} onClick={ this.onToggleCollapse.bind(this, true) }>
-                    <TintableSvg src="img/maximise.svg" width="10" height="16" alt={ _t("Expand panel") } />
-                </AccessibleButton>;
-        } else {
-            toggleCollapse =
-                <AccessibleButton className="mx_SearchBox_minimise" tabIndex={collapseTabIndex} onClick={ this.onToggleCollapse.bind(this, false) }>
-                    <TintableSvg src="img/minimise.svg" width="10" height="16" alt={ _t("Collapse panel") } />
-                </AccessibleButton>;
-        }
-
-        let searchControls;
-        if (!this.props.collapsed) {
-            searchControls = [
-                    this.state.searchTerm.length > 0 ?
-                    <AccessibleButton key="button"
-                            className="mx_SearchBox_closeButton"
-                            onClick={ ()=>{ this._clearSearch(); } }>
-                        <TintableSvg
-                            className="mx_SearchBox_searchButton"
-                            src="img/icons-close.svg" width="24" height="24"
-                        />
-                    </AccessibleButton>
-                    :
-                    <TintableSvg
-                        key="button"
-                        className="mx_SearchBox_searchButton"
-                        src="img/icons-search-copy.svg" width="13" height="13"
-                    />,
-                    <input
-                        key="searchfield"
-                        type="text"
-                        ref="search"
-                        className="mx_SearchBox_search"
-                        value={ this.state.searchTerm }
-                        onChange={ this.onChange }
-                        onKeyDown={ this._onKeyDown }
-                        placeholder={ _t('Filter room names') }
-                    />,
-                ];
-        }
-
-        const self = this;
         return (
-            <div className="mx_SearchBox">
-                { searchControls }
-                { toggleCollapse }
+            <div className="mx_SearchBox mx_textinput">
+                <input
+                    key="searchfield"
+                    type="text"
+                    ref="search"
+                    className="mx_textinput_icon mx_textinput_search"
+                    value={ this.state.searchTerm }
+                    onFocus={ this._onFocus }
+                    onChange={ this.onChange }
+                    onKeyDown={ this._onKeyDown }
+                    placeholder={ _t('Filter room names') }
+                />
+                { clearButton }
             </div>
         );
     },

src/components/structures/TagPanel.js

@@ -23,6 +23,7 @@ import GroupActions from '../../actions/GroupActions';
 
 import sdk from '../../index';
 import dis from '../../dispatcher';
+import Modal from '../../Modal';
 import { _t } from '../../languageHandler';
 
 import { Droppable } from 'react-beautiful-dnd';
@@ -47,6 +48,8 @@ const TagPanel = React.createClass({
         this.context.matrixClient.on("Group.myMembership", this._onGroupMyMembership);
         this.context.matrixClient.on("sync", this._onClientSync);
 
+        this._dispatcherRef = dis.register(this._onAction);
+
         this._tagOrderStoreToken = TagOrderStore.addListener(() => {
             if (this.unmounted) {
                 return;
@@ -67,6 +70,9 @@ const TagPanel = React.createClass({
         if (this._filterStoreToken) {
             this._filterStoreToken.remove();
         }
+        if (this._dispatcherRef) {
+            dis.unregister(this._dispatcherRef);
+        }
     },
 
     _onGroupMyMembership() {
@@ -100,13 +106,21 @@ const TagPanel = React.createClass({
         dis.dispatch({action: 'deselect_tags'});
     },
 
+    _onAction(payload) {
+        if (payload.action === "show_redesign_feedback_dialog") {
+            const RedesignFeedbackDialog =
+                sdk.getComponent("views.dialogs.RedesignFeedbackDialog");
+            Modal.createDialog(RedesignFeedbackDialog);
+        }
+    },
+
     render() {
         const GroupsButton = sdk.getComponent('elements.GroupsButton');
         const DNDTagTile = sdk.getComponent('elements.DNDTagTile');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const TintableSvg = sdk.getComponent('elements.TintableSvg');
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
-
+        const ActionButton = sdk.getComponent("elements.ActionButton");
 
         const tags = this.state.orderedTags.map((tag, index) => {
             return <DNDTagTile
@@ -162,7 +176,10 @@ const TagPanel = React.createClass({
             </GeminiScrollbarWrapper>
             <div className="mx_TagPanel_divider" />
             <div className="mx_TagPanel_groupsButton">
-                <GroupsButton tooltip={true} />
+                <GroupsButton />
+                <ActionButton
+                    className="mx_TagPanel_report" action="show_redesign_feedback_dialog"
+                    label={_t("Report bugs & give feedback")} tooltip={true} />
             </div>
         </div>;
     },

src/components/structures/TimelinePanel.js

@@ -33,9 +33,13 @@ const ObjectUtils = require('../../ObjectUtils');
 const Modal = require("../../Modal");
 const UserActivity = require("../../UserActivity");
 import { KeyCode } from '../../Keyboard';
+import Timer from '../../utils/Timer';
 
 const PAGINATE_SIZE = 20;
 const INITIAL_SIZE = 20;
+const READ_MARKER_INVIEW_THRESHOLD_MS = 1 * 1000;
+const READ_MARKER_OUTOFVIEW_THRESHOLD_MS = 30 * 1000;
+const READ_RECEIPT_INTERVAL_MS = 500;
 
 const DEBUG = false;
 
@@ -188,6 +192,14 @@ var TimelinePanel = React.createClass({
         this.lastRRSentEventId = undefined;
         this.lastRMSentEventId = undefined;
 
+        if (this.props.manageReadReceipts) {
+            this.updateReadReceiptOnUserActivity();
+        }
+        if (this.props.manageReadMarkers) {
+            this.updateReadMarkerOnUserActivity();
+        }
+
+
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
         MatrixClientPeg.get().on("Room.timelineReset", this.onRoomTimelineReset);
@@ -254,6 +266,14 @@ var TimelinePanel = React.createClass({
         //
         // (We could use isMounted, but facebook have deprecated that.)
         this.unmounted = true;
+        if (this._readReceiptActivityTimer) {
+            this._readReceiptActivityTimer.abort();
+            this._readReceiptActivityTimer = null;
+        }
+        if (this._readMarkerActivityTimer) {
+            this._readMarkerActivityTimer.abort();
+            this._readMarkerActivityTimer = null;
+        }
 
         dis.unregister(this.dispatcherRef);
 
@@ -362,30 +382,25 @@ var TimelinePanel = React.createClass({
         }
 
         if (this.props.manageReadMarkers) {
+            const rmPosition = this.getReadMarkerPosition();
             // we hide the read marker when it first comes onto the screen, but if
             // it goes back off the top of the screen (presumably because the user
             // clicks on the 'jump to bottom' button), we need to re-enable it.
-            if (this.getReadMarkerPosition() < 0) {
+            if (rmPosition < 0) {
                 this.setState({readMarkerVisible: true});
             }
+
+            // if read marker position goes between 0 and -1/1,
+            // (and user is active), switch timeout
+            const timeout = this._readMarkerTimeout(rmPosition);
+            // NO-OP when timeout already has set to the given value
+            this._readMarkerActivityTimer.changeTimeout(timeout);
         }
     },
 
     onAction: function(payload) {
-        switch (payload.action) {
-            case 'user_activity':
-            case 'user_activity_end':
-                // we could treat user_activity_end differently and not
-                // send receipts for messages that have arrived between
-                // the actual user activity and the time they stopped
-                // being active, but let's see if this is actually
-                // necessary.
-                this.sendReadReceipt();
-                this.updateReadMarker();
-                break;
-            case 'ignore_state_changed':
-                this.forceUpdate();
-                break;
+        if (payload.action === 'ignore_state_changed') {
+            this.forceUpdate();
         }
     },
 
@@ -531,6 +546,38 @@ var TimelinePanel = React.createClass({
         this.setState({clientSyncState: state});
     },
 
+    _readMarkerTimeout(readMarkerPosition) {
+        return readMarkerPosition === 0 ?
+            READ_MARKER_INVIEW_THRESHOLD_MS :
+            READ_MARKER_OUTOFVIEW_THRESHOLD_MS;
+    },
+
+    updateReadMarkerOnUserActivity: async function() {
+        const initialTimeout = this._readMarkerTimeout(this.getReadMarkerPosition());
+        this._readMarkerActivityTimer = new Timer(initialTimeout);
+
+        while (this._readMarkerActivityTimer) { //unset on unmount
+            UserActivity.timeWhileActive(this._readMarkerActivityTimer);
+            try {
+                await this._readMarkerActivityTimer.finished();
+            } catch(e) { continue; /* aborted */ }
+            // outside of try/catch to not swallow errors
+            this.updateReadMarker();
+        }
+    },
+
+    updateReadReceiptOnUserActivity: async function() {
+        this._readReceiptActivityTimer = new Timer(READ_RECEIPT_INTERVAL_MS);
+        while (this._readReceiptActivityTimer) { //unset on unmount
+            UserActivity.timeWhileActive(this._readReceiptActivityTimer);
+            try {
+                await this._readReceiptActivityTimer.finished();
+            } catch(e) { continue; /* aborted */ }
+            // outside of try/catch to not swallow errors
+            this.sendReadReceipt();
+        }
+    },
+
     sendReadReceipt: function() {
         if (!this.refs.messagePanel) return;
         if (!this.props.manageReadReceipts) return;
@@ -634,10 +681,11 @@ var TimelinePanel = React.createClass({
     // of the screen, so move the marker down to the bottom of the screen.
     updateReadMarker: function() {
         if (!this.props.manageReadMarkers) return;
-        if (this.getReadMarkerPosition() !== 0) {
+        if (this.getReadMarkerPosition() === 1) {
+            // the read marker is at an event below the viewport,
+            // we don't want to rewind it.
             return;
         }
-
         // move the RM to *after* the message at the bottom of the screen. This
         // avoids a problem whereby we never advance the RM if there is a huge
         // message which doesn't fit on the screen.
@@ -654,7 +702,6 @@ var TimelinePanel = React.createClass({
         if (lastDisplayedIndex === null) {
             return;
         }
-
         const lastDisplayedEvent = this.state.events[lastDisplayedIndex];
         this._setReadMarker(lastDisplayedEvent.getId(),
                             lastDisplayedEvent.getTs());
@@ -749,7 +796,6 @@ var TimelinePanel = React.createClass({
         this._loadTimeline(this.state.readMarkerEventId, 0, 1/3);
     },
 
-
     /* update the read-up-to marker to match the read receipt
      */
     forgetReadMarker: function() {
@@ -822,15 +868,12 @@ var TimelinePanel = React.createClass({
 
     canJumpToReadMarker: function() {
         // 1. Do not show jump bar if neither the RM nor the RR are set.
-        // 2. Only show jump bar if RR !== RM. If they are the same, there are only fully
-        // read messages and unread messages. We already have a badge count and the bottom
-        // bar to jump to "live" when we have unread messages.
         // 3. We want to show the bar if the read-marker is off the top of the screen.
         // 4. Also, if pos === null, the event might not be paginated - show the unread bar
         const pos = this.getReadMarkerPosition();
-        return this.state.readMarkerEventId !== null && // 1.
-            this.state.readMarkerEventId !== this._getCurrentReadReceipt() && // 2.
+        const ret = this.state.readMarkerEventId !== null && // 1.
             (pos < 0 || pos === null); // 3., 4.
+        return ret;
     },
 
     /**
@@ -917,7 +960,6 @@ var TimelinePanel = React.createClass({
                 }
 
                 this.sendReadReceipt();
-                this.updateReadMarker();
             });
         };
 
@@ -1154,6 +1196,7 @@ var TimelinePanel = React.createClass({
         );
         return (
             <MessagePanel ref="messagePanel"
+                          room={this.props.timelineSet.room}
                           hidden={this.props.hidden}
                           backPaginating={this.state.backPaginating}
                           forwardPaginating={forwardPaginating}

src/components/structures/TopLeftMenuButton.js

@@ -0,0 +1,115 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as ContextualMenu from './ContextualMenu';
+import {TopLeftMenu} from '../views/context_menus/TopLeftMenu';
+import AccessibleButton from '../views/elements/AccessibleButton';
+import BaseAvatar from '../views/avatars/BaseAvatar';
+import MatrixClientPeg from '../../MatrixClientPeg';
+import Avatar from '../../Avatar';
+
+const AVATAR_SIZE = 28;
+
+export default class TopLeftMenuButton extends React.Component {
+    static propTypes = {
+        collapsed: PropTypes.bool.isRequired,
+    };
+
+    static displayName = 'TopLeftMenuButton';
+
+    constructor() {
+        super();
+        this.state = {
+            menuDisplayed: false,
+            profileInfo: null,
+        };
+
+        this.onToggleMenu = this.onToggleMenu.bind(this);
+    }
+
+    async _getProfileInfo() {
+        const cli = MatrixClientPeg.get();
+        const userId = cli.getUserId();
+        const profileInfo = await cli.getProfileInfo(userId);
+        const avatarUrl = Avatar.avatarUrlForUser(
+            {avatarUrl: profileInfo.avatar_url},
+            AVATAR_SIZE, AVATAR_SIZE, "crop");
+
+        return {
+            userId,
+            name: profileInfo.displayname,
+            avatarUrl,
+        };
+    }
+
+    async componentDidMount() {
+        try {
+            const profileInfo = await this._getProfileInfo();
+            this.setState({profileInfo});
+        } catch (ex) {
+            console.log("could not fetch profile");
+            console.error(ex);
+        }
+    }
+
+    render() {
+        const fallbackUserId = MatrixClientPeg.get().getUserId();
+        const profileInfo = this.state.profileInfo;
+        const name = profileInfo ? profileInfo.name : fallbackUserId;
+        let nameElement;
+        if (!this.props.collapsed) {
+            nameElement = <div className="mx_TopLeftMenuButton_name">
+                { name }
+            </div>;
+        }
+
+        return (
+            <AccessibleButton className="mx_TopLeftMenuButton" onClick={this.onToggleMenu}>
+                <BaseAvatar
+                    idName={fallbackUserId}
+                    name={name}
+                    url={profileInfo && profileInfo.avatarUrl}
+                    width={AVATAR_SIZE}
+                    height={AVATAR_SIZE}
+                    resizeMethod="crop"
+                />
+                { nameElement }
+                <img className="mx_TopLeftMenuButton_chevron" src="img/topleft-chevron.svg" width="11" height="6" />
+            </AccessibleButton>
+        );
+    }
+
+    onToggleMenu(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const elementRect = e.currentTarget.getBoundingClientRect();
+        const x = elementRect.left;
+        const y = elementRect.top + elementRect.height;
+
+        ContextualMenu.createMenu(TopLeftMenu, {
+            chevronFace: "none",
+            left: x,
+            top: y,
+            onFinished: () => {
+                this.setState({ menuDisplayed: false });
+            },
+        });
+        this.setState({ menuDisplayed: true });
+    }
+}

src/components/structures/UserSettings.js

@@ -128,6 +128,7 @@ const CRYPTO_SETTINGS = [
 const THEMES = [
     { label: _td('Light theme'), value: 'light' },
     { label: _td('Dark theme'), value: 'dark' },
+    { label: _td('2018 theme'), value: 'dharma' },
     { label: _td('Status.im theme'), value: 'status' },
 ];
 
@@ -383,32 +384,8 @@ module.exports = React.createClass({
     },
 
     onLogoutClicked: function(ev) {
-        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-        Modal.createTrackedDialog('Logout E2E Export', '', QuestionDialog, {
-            title: _t("Sign out"),
-            description:
-                <div>
-             { _t("For security, logging out will delete any end-to-end " +
-                  "encryption keys from this browser. If you want to be able " +
-                  "to decrypt your conversation history from future Riot sessions, " +
-                  "please export your room keys for safe-keeping.") }
-                </div>,
-            button: _t("Sign out"),
-            extraButtons: [
-                <button key="export" className="mx_Dialog_primary"
-                        onClick={this._onExportE2eKeysClicked}>
-                   { _t("Export E2E room keys") }
-                </button>,
-            ],
-            onFinished: (confirmed) => {
-                if (confirmed) {
-                    dis.dispatch({action: 'logout'});
-                    if (this.props.onFinished) {
-                        this.props.onFinished();
-                    }
-                }
-            },
-        });
+        const LogoutDialog = sdk.getComponent("dialogs.LogoutDialog");
+        Modal.createTrackedDialog('Logout E2E Export', '', LogoutDialog);
     },
 
     onPasswordChangeError: function(err) {

src/components/views/context_menus/MessageContextMenu.js

@@ -333,7 +333,7 @@ module.exports = React.createClass({
         }
 
         return (
-            <div>
+            <div className="mx_MessageContextMenu">
                 { resendButton }
                 { redactButton }
                 { cancelButton }

src/components/views/context_menus/RoomTileContextMenu.js

@@ -243,7 +243,7 @@ module.exports = React.createClass({
         });
 
         return (
-            <div>
+            <div className="mx_RoomTileContextMenu">
                 <div className="mx_RoomTileContextMenu_notif_picker" >
                     <img src="img/notif-slider.svg" width="20" height="107" />
                 </div>

src/components/views/context_menus/TopLeftMenu.js

@@ -0,0 +1,54 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import dis from '../../../dispatcher';
+import { _t } from '../../../languageHandler';
+import LogoutDialog from "../dialogs/LogoutDialog";
+import Modal from "../../../Modal";
+
+export class TopLeftMenu extends React.Component {
+    constructor() {
+        super();
+        this.openSettings = this.openSettings.bind(this);
+        this.signOut = this.signOut.bind(this);
+    }
+
+    render() {
+        return <div className="mx_TopLeftMenu">
+            <ul className="mx_TopLeftMenu_section">
+                <li onClick={this.openSettings}>{_t("Settings")}</li>
+            </ul>
+            <ul className="mx_TopLeftMenu_section">
+                <li onClick={this.signOut}>{_t("Sign out")}</li>
+            </ul>
+        </div>;
+    }
+
+    openSettings() {
+        dis.dispatch({action: 'view_user_settings'});
+        this.closeMenu();
+    }
+
+    signOut() {
+        Modal.createTrackedDialog('Logout E2E Export', '', LogoutDialog);
+        this.closeMenu();
+    }
+
+    closeMenu() {
+        if (this.props.onFinished) this.props.onFinished();
+    }
+}

src/components/views/dialogs/LogoutDialog.js

@@ -0,0 +1,62 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import QuestionDialog from './QuestionDialog';
+import Modal from '../../../Modal';
+import dis from '../../../dispatcher';
+import { _t } from '../../../languageHandler';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+
+export default (props) => {
+    const description = _t("For security, logging out will delete any end-to-end " +
+                  "encryption keys from this browser. If you want to be able " +
+                  "to decrypt your conversation history from future Riot sessions, " +
+                  "please export your room keys for safe-keeping.");
+
+    const onExportE2eKeysClicked = () => {
+        Modal.createTrackedDialogAsync('Export E2E Keys', '',
+            import('../../../async-components/views/dialogs/ExportE2eKeysDialog'),
+            {
+                matrixClient: MatrixClientPeg.get(),
+            },
+        );
+    };
+
+    const onFinished = (confirmed) => {
+        if (confirmed) {
+            dis.dispatch({action: 'logout'});
+        }
+        // close dialog
+        if (props.onFinished) {
+            props.onFinished();
+        }
+    };
+
+    return (<QuestionDialog
+        hasCancelButton={true}
+        title={_t("Sign out")}
+        description={<div>{description}</div>}
+        button={_t("Sign out")}
+        extraButtons={[
+            (<button key="export" className="mx_Dialog_primary"
+                    onClick={onExportE2eKeysClicked}>
+               { _t("Export E2E room keys") }
+            </button>),
+        ]}
+        onFinished={onFinished}
+    />);
+};

src/components/views/dialogs/RedesignFeedbackDialog.js

@@ -0,0 +1,51 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import QuestionDialog from './QuestionDialog';
+import { _t } from '../../../languageHandler';
+
+export default (props) => {
+    const existingIssuesUrl = "https://github.com/vector-im/riot-web/issues" +
+        "?q=is%3Aopen+is%3Aissue+label%3Aredesign+sort%3Areactions-%2B1-desc";
+    const newIssueUrl = "https://github.com/vector-im/riot-web/issues/new" +
+        "?assignees=&labels=redesign&template=redesign_issue.md&title=";
+
+    const description1 =
+        _t("Thanks for testing the Riot Redesign. " +
+            "If you run into any bugs or visual issues, " +
+            "please let us know on GitHub.");
+    const description2 = _t("To help avoid duplicate issues, " +
+        "please <existingIssuesLink>view existing issues</existingIssuesLink> " +
+        "first (and add a +1) or <newIssueLink>create a new issue</newIssueLink> " +
+        "if you can't find it.", {},
+        {
+            existingIssuesLink: (sub) => {
+                return <a target="_blank" rel="noreferrer noopener" href={existingIssuesUrl}>{ sub }</a>;
+            },
+            newIssueLink: (sub) => {
+                return <a target="_blank" rel="noreferrer noopener" href={newIssueUrl}>{ sub }</a>;
+            },
+        });
+
+    return (<QuestionDialog
+        hasCancelButton={false}
+        title={_t("Report bugs & give feedback")}
+        description={<div><p>{description1}</p><p>{description2}</p></div>}
+        button={_t("Go back")}
+        onFinished={props.onFinished}
+    />);
+};

src/components/views/elements/ActionButton.js

@@ -30,7 +30,8 @@ export default React.createClass({
         action: PropTypes.string.isRequired,
         mouseOverAction: PropTypes.string,
         label: PropTypes.string.isRequired,
-        iconPath: PropTypes.string.isRequired,
+        iconPath: PropTypes.string,
+        className: PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -72,14 +73,23 @@ export default React.createClass({
             tooltip = <RoomTooltip className="mx_RoleButton_tooltip" label={this.props.label} />;
         }
 
+        const icon = this.props.iconPath ?
+                (<TintableSvg src={this.props.iconPath} width={this.props.size} height={this.props.size} />) :
+                undefined;
+
+        const classNames = ["mx_RoleButton"];
+        if (this.props.className) {
+            classNames.push(this.props.className);
+        }
+
         return (
-            <AccessibleButton className="mx_RoleButton"
+            <AccessibleButton className={classNames.join(" ")}
                 onClick={this._onClick}
                 onMouseEnter={this._onMouseEnter}
                 onMouseLeave={this._onMouseLeave}
                 aria-label={this.props.label}
             >
-                <TintableSvg src={this.props.iconPath} width={this.props.size} height={this.props.size} />
+                { icon }
                 { tooltip }
             </AccessibleButton>
         );

src/components/views/elements/GroupsButton.js

@@ -22,18 +22,16 @@ import { _t } from '../../../languageHandler';
 const GroupsButton = function(props) {
     const ActionButton = sdk.getComponent('elements.ActionButton');
     return (
-        <ActionButton action="view_my_groups"
+        <ActionButton className="mx_GroupsButton" action="view_my_groups"
             label={_t("Communities")}
-            iconPath="img/icons-groups.svg"
             size={props.size}
-            tooltip={props.tooltip}
+            tooltip={true}
         />
     );
 };
 
 GroupsButton.propTypes = {
     size: PropTypes.string,
-    tooltip: PropTypes.bool,
 };
 
 export default GroupsButton;

src/components/views/elements/ManageIntegsButton.js

@@ -91,7 +91,7 @@ export default class ManageIntegsButton extends React.Component {
 
             integrationsButton = (
                 <AccessibleButton className={integrationsButtonClasses} onClick={this.onManageIntegrations} title={_t('Manage Integrations')}>
-                    <TintableSvg src="img/icons-apps.svg" width="35" height="35" />
+                    <TintableSvg src="img/feather-icons/grid.svg" width="20" height="20" />
                     { integrationsWarningTriangle }
                     { integrationsErrorPopup }
                 </AccessibleButton>

src/components/views/elements/ResizeHandle.js

@@ -0,0 +1,27 @@
+
+import React from 'react'; // eslint-disable-line no-unused-vars
+import PropTypes from 'prop-types';
+
+//see src/resizer for the actual resizing code, this is just the DOM for the resize handle
+const ResizeHandle = (props) => {
+    const classNames = ['mx_ResizeHandle'];
+    if (props.vertical) {
+        classNames.push('mx_ResizeHandle_vertical');
+    } else {
+        classNames.push('mx_ResizeHandle_horizontal');
+    }
+    if (props.reverse) {
+        classNames.push('mx_ResizeHandle_reverse');
+    }
+    return (
+        <div className={classNames.join(' ')} data-id={props.id}><div /></div>
+    );
+};
+
+ResizeHandle.propTypes = {
+    vertical: PropTypes.bool,
+    reverse: PropTypes.bool,
+    id: PropTypes.string,
+};
+
+export default ResizeHandle;

src/components/views/elements/TagTile.js

@@ -157,7 +157,7 @@ export default React.createClass({
         const RoomTooltip = sdk.getComponent('rooms.RoomTooltip');
         const profile = this.state.profile || {};
         const name = profile.name || this.props.tag;
-        const avatarHeight = 35;
+        const avatarHeight = 40;
 
         const httpUrl = profile.avatarUrl ? this.context.matrixClient.mxcUrlToHttp(
             profile.avatarUrl, avatarHeight, avatarHeight, "crop",

src/components/views/groups/GroupMemberList.js

@@ -17,8 +17,13 @@ limitations under the License.
 import React from 'react';
 import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
+import dis from '../../../dispatcher';
 import GroupStore from '../../../stores/GroupStore';
 import PropTypes from 'prop-types';
+import { showGroupInviteDialog } from '../../../GroupAddressPicker';
+import AccessibleButton from '../elements/AccessibleButton';
+import TintableSvg from '../elements/TintableSvg';
+import RightPanel from '../../structures/RightPanel';
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 
@@ -154,6 +159,16 @@ export default React.createClass({
         </TruncatedList>;
     },
 
+    onInviteToGroupButtonClick() {
+        showGroupInviteDialog(this.props.groupId).then(() => {
+            dis.dispatch({
+                action: 'view_right_panel_phase',
+                phase: RightPanel.Phase.GroupMemberList,
+                groupId: this.props.groupId,
+            });
+        });
+    },
+
     render: function() {
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
         if (this.state.fetching || this.state.fetchingInvitedMembers) {
@@ -164,11 +179,9 @@ export default React.createClass({
         }
 
         const inputBox = (
-            <form autoComplete="off">
-                <input className="mx_GroupMemberList_query" id="mx_GroupMemberList_query" type="text"
-                        onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
-                        placeholder={_t('Filter community members')} />
-            </form>
+            <input className="mx_GroupMemberList_query mx_textinput" id="mx_GroupMemberList_query" type="text"
+                    onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
+                    placeholder={_t('Filter community members')} autoComplete="off" />
         );
 
         const joined = this.state.members ? <div className="mx_MemberList_joined">
@@ -192,13 +205,29 @@ export default React.createClass({
                     )
                 }
             </div> : <div />;
+
+        let inviteButton;
+        if (GroupStore.isUserPrivileged(this.props.groupId)) {
+            inviteButton = (
+            <AccessibleButton
+                className="mx_RightPanel_invite"
+                onClick={this.onInviteToGroupButtonClick}
+            >
+                <div className="mx_RightPanel_icon" >
+                    <TintableSvg src="img/icon-invite-people.svg" width="18" height="14" />
+                </div>
+                <div className="mx_RightPanel_message">{ _t('Invite to this community') }</div>
+            </AccessibleButton>);
+        }
+
         return (
             <div className="mx_MemberList">
-                { inputBox }
+                { inviteButton }
                 <GeminiScrollbarWrapper autoshow={true}>
                     { joined }
                     { invited }
                 </GeminiScrollbarWrapper>
+                { inputBox }
             </div>
         );
     },

src/components/views/groups/GroupRoomList.js

@@ -18,6 +18,9 @@ import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
 import GroupStore from '../../../stores/GroupStore';
 import PropTypes from 'prop-types';
+import { showGroupAddRoomDialog } from '../../../GroupAddressPicker';
+import AccessibleButton from '../elements/AccessibleButton';
+import TintableSvg from '../elements/TintableSvg';
 
 const INITIAL_LOAD_NUM_ROOMS = 30;
 
@@ -90,6 +93,12 @@ export default React.createClass({
         this.setState({ searchQuery: ev.target.value });
     },
 
+    onAddRoomToGroupButtonClick() {
+        showGroupAddRoomDialog(this.props.groupId).then(() => {
+            this.forceUpdate();
+        });
+    },
+
     makeGroupRoomTiles: function(query) {
         const GroupRoomTile = sdk.getComponent("groups.GroupRoomTile");
         query = (query || "").toLowerCase();
@@ -120,25 +129,38 @@ export default React.createClass({
             return null;
         }
 
+        let inviteButton;
+        if (GroupStore.isUserPrivileged(this.props.groupId)) {
+            inviteButton = (
+                <AccessibleButton
+                    className="mx_RightPanel_invite"
+                    onClick={this.onAddRoomToGroupButtonClick}
+                >
+                    <div className="mx_RightPanel_icon" >
+                        <TintableSvg src="img/icons-room-add.svg" width="18" height="14" />
+                    </div>
+                    <div className="mx_RightPanel_message">{ _t('Add rooms to this community') }</div>
+                </AccessibleButton>
+            );
+        }
         const inputBox = (
-            <form autoComplete="off">
-                <input className="mx_GroupRoomList_query" id="mx_GroupRoomList_query" type="text"
-                        onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
-                        placeholder={_t('Filter community rooms')} />
-            </form>
+            <input className="mx_GroupRoomList_query mx_textinput" id="mx_GroupRoomList_query" type="text"
+                    onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
+                    placeholder={_t('Filter community rooms')} autoComplete="off" />
         );
 
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
         const TruncatedList = sdk.getComponent("elements.TruncatedList");
         return (
             <div className="mx_GroupRoomList">
-                { inputBox }
+                { inviteButton }
                 <GeminiScrollbarWrapper autoshow={true} className="mx_GroupRoomList_joined mx_GroupRoomList_outerWrapper">
                     <TruncatedList className="mx_GroupRoomList_wrapper" truncateAt={this.state.truncateAt}
                             createOverflowElement={this._createOverflowTile}>
                         { this.makeGroupRoomTiles(this.state.searchQuery) }
                     </TruncatedList>
                 </GeminiScrollbarWrapper>
+                { inputBox }
             </div>
         );
     },

src/components/views/messages/DateSeparator.js

@@ -56,6 +56,6 @@ export default class DateSeparator extends React.Component {
     }
 
     render() {
-        return <h2 className="mx_DateSeparator">{ this.getLabel() }</h2>;
+        return <h2 className="mx_DateSeparator"><hr /><date>{ this.getLabel() }</date><hr /></h2>;
     }
 }

src/components/views/messages/SenderProfile.js

@@ -23,6 +23,7 @@ import sdk from '../../../index';
 import Flair from '../elements/Flair.js';
 import FlairStore from '../../../stores/FlairStore';
 import { _t } from '../../../languageHandler';
+import {hashCode} from '../../../utils/FormattingUtils';
 
 export default React.createClass({
     displayName: 'SenderProfile',
@@ -96,6 +97,7 @@ export default React.createClass({
     render() {
         const EmojiText = sdk.getComponent('elements.EmojiText');
         const {mxEvent} = this.props;
+        const colorNumber = hashCode(mxEvent.getSender()) % 8;
         const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
         const {msgtype} = mxEvent.getContent();
 
@@ -119,7 +121,7 @@ export default React.createClass({
 
         // Name + flair
         const nameFlair = <span>
-            <span className="mx_SenderProfile_name">
+            <span className={`mx_SenderProfile_name mx_SenderProfile_color${colorNumber}`}>
                 { nameElem }
             </span>
             { flair }

src/components/views/right_panel/GroupHeaderButtons.js

@@ -0,0 +1,80 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+Copyright 2017 New Vector Ltd
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { _t } from '../../../languageHandler';
+import dis from '../../../dispatcher';
+import HeaderButton from './HeaderButton';
+import HeaderButtons from './HeaderButtons';
+import RightPanel from '../../structures/RightPanel';
+
+export default class GroupHeaderButtons extends HeaderButtons {
+    constructor(props) {
+        super(props, RightPanel.Phase.GroupMemberList);
+    }
+
+    onAction(payload) {
+        super.onAction(payload);
+
+        if (payload.action === "view_user") {
+            dis.dispatch({
+                action: 'show_right_panel',
+            });
+            if (payload.member) {
+                this.setPhase(RightPanel.Phase.RoomMemberInfo, {member: payload.member});
+            } else {
+                this.setPhase(RightPanel.Phase.GroupMemberList);
+            }
+        } else if (payload.action === "view_group") {
+            this.setPhase(RightPanel.Phase.GroupMemberList);
+        } else if (payload.action === "view_group_room") {
+            this.setPhase(RightPanel.Phase.GroupRoomInfo, {groupRoomId: payload.groupRoomId, groupId: payload.groupId});
+        } else if (payload.action === "view_group_room_list") {
+            this.setPhase(RightPanel.Phase.GroupRoomList);
+        } else if (payload.action === "view_group_member_list") {
+            this.setPhase(RightPanel.Phase.GroupMemberList);
+        } else if (payload.action === "view_group_user") {
+            this.setPhase(RightPanel.Phase.GroupMemberInfo, {member: payload.member});
+        }
+    }
+
+    renderButtons() {
+        const groupPhases = [
+            RightPanel.Phase.GroupMemberInfo,
+            RightPanel.Phase.GroupMemberList,
+        ];
+        const roomPhases = [
+            RightPanel.Phase.GroupRoomList,
+            RightPanel.Phase.GroupRoomInfo,
+        ];
+
+        return [
+            <HeaderButton key="_groupMembersButton" title={_t('Members')} iconSrc="img/icons-people.svg"
+                isHighlighted={this.isPhase(groupPhases)}
+                clickPhase={RightPanel.Phase.GroupMemberList}
+                analytics={['Right Panel', 'Group Member List Button', 'click']}
+            />,
+            <HeaderButton key="_roomsButton" title={_t('Rooms')} iconSrc="img/icons-room-nobg.svg"
+                isHighlighted={this.isPhase(roomPhases)}
+                clickPhase={RightPanel.Phase.GroupRoomList}
+                analytics={['Right Panel', 'Group Room List Button', 'click']}
+            />,
+        ];
+    }
+}

src/components/views/right_panel/HeaderButton.js

@@ -0,0 +1,75 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+Copyright 2017 New Vector Ltd
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import dis from '../../../dispatcher';
+import Analytics from '../../../Analytics';
+import AccessibleButton from '../elements/AccessibleButton';
+import TintableSvg from '../elements/TintableSvg';
+
+export default class HeaderButton extends React.Component {
+    constructor() {
+        super();
+        this.onClick = this.onClick.bind(this);
+    }
+
+    onClick(ev) {
+        Analytics.trackEvent(...this.props.analytics);
+        dis.dispatch({
+            action: 'view_right_panel_phase',
+            phase: this.props.clickPhase,
+            fromHeader: true,
+        });
+    }
+
+    render() {
+        const classes = classNames({
+            mx_RightPanel_headerButton: true,
+            mx_RightPanel_headerButton_highlight: this.props.isHighlighted,
+        });
+
+        return <AccessibleButton
+            aria-label={this.props.title}
+            aria-expanded={this.props.isHighlighted}
+            title={this.props.title}
+            className={classes}
+            onClick={this.onClick} >
+                <TintableSvg src={this.props.iconSrc} width="20" height="20" />
+            </AccessibleButton>;
+    }
+}
+
+HeaderButton.propTypes = {
+    // Whether this button is highlighted
+    isHighlighted: PropTypes.bool.isRequired,
+    // The phase to swap to when the button is clicked
+    clickPhase: PropTypes.string.isRequired,
+    // The source file of the icon to display
+    iconSrc: PropTypes.string.isRequired,
+
+    // The badge to display above the icon
+    badge: PropTypes.node,
+    // The parameters to track the click event
+    analytics: PropTypes.arrayOf(PropTypes.string).isRequired,
+
+    // Button title
+    title: PropTypes.string.isRequired,
+};

src/components/views/right_panel/HeaderButtons.js

@@ -0,0 +1,100 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+Copyright 2017 New Vector Ltd
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import dis from '../../../dispatcher';
+
+export default class HeaderButtons extends React.Component {
+    constructor(props, initialPhase) {
+        super(props);
+
+        this.state = {
+            phase: props.collapsedRhs ? null : initialPhase,
+            isUserPrivilegedInGroup: null,
+        };
+        this.onAction = this.onAction.bind(this);
+    }
+
+    componentWillMount() {
+        this.dispatcherRef = dis.register(this.onAction);
+    }
+
+    componentWillUnmount() {
+        dis.unregister(this.dispatcherRef);
+    }
+
+    setPhase(phase, extras) {
+        // TODO: delay?
+        dis.dispatch(Object.assign({
+            action: 'view_right_panel_phase',
+            phase: phase,
+        }, extras));
+    }
+
+    isPhase(phases) {
+        if (this.props.collapsedRhs) {
+            return false;
+        }
+        if (Array.isArray(phases)) {
+            return phases.includes(this.state.phase);
+        } else {
+            return phases === this.state.phase;
+        }
+    }
+
+    onAction(payload) {
+        if (payload.action === "view_right_panel_phase") {
+            // only actions coming from header buttons should collapse the right panel
+            if (this.state.phase === payload.phase && payload.fromHeader) {
+                dis.dispatch({
+                    action: 'hide_right_panel',
+                });
+                this.setState({
+                    phase: null,
+                });
+            } else {
+                if (this.props.collapsedRhs && payload.fromHeader) {
+                    dis.dispatch({
+                        action: 'show_right_panel',
+                    });
+                    // emit payload again as the RightPanel didn't exist up
+                    // till show_right_panel, just without the fromHeader flag
+                    // as that would hide the right panel again
+                    dis.dispatch(Object.assign({}, payload, {fromHeader: false}));
+
+                }
+                this.setState({
+                    phase: payload.phase,
+                });
+            }
+        }
+    }
+
+    render() {
+        // inline style as this will be swapped around in future commits
+        return <div style={{display: 'flex'}}>
+            { this.renderButtons() }
+        </div>;
+    }
+}
+
+HeaderButtons.propTypes = {
+    collapsedRhs: PropTypes.bool,
+};

src/components/views/right_panel/RoomHeaderButtons.js

@@ -0,0 +1,72 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+Copyright 2017 New Vector Ltd
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { _t } from '../../../languageHandler';
+import dis from '../../../dispatcher';
+import HeaderButton from './HeaderButton';
+import HeaderButtons from './HeaderButtons';
+import RightPanel from '../../structures/RightPanel';
+
+export default class RoomHeaderButtons extends HeaderButtons {
+    constructor(props) {
+        super(props, RightPanel.Phase.RoomMemberList);
+    }
+
+    onAction(payload) {
+        super.onAction(payload);
+        if (payload.action === "view_user") {
+            dis.dispatch({
+                action: 'show_right_panel',
+            });
+            if (payload.member) {
+                this.setPhase(RightPanel.Phase.RoomMemberInfo, {member: payload.member});
+            } else {
+                this.setPhase(RightPanel.Phase.RoomMemberList);
+            }
+        } else if (payload.action === "view_room") {
+            this.setPhase(RightPanel.Phase.RoomMemberList);
+        }
+    }
+
+    renderButtons() {
+        const membersPhases = [
+            RightPanel.Phase.RoomMemberList,
+            RightPanel.Phase.RoomMemberInfo,
+        ];
+
+        return [
+            <HeaderButton key="_membersButton" title={_t('Members')} iconSrc="img/feather-icons/user.svg"
+                isHighlighted={this.isPhase(membersPhases)}
+                clickPhase={RightPanel.Phase.RoomMemberList}
+                analytics={['Right Panel', 'Member List Button', 'click']}
+            />,
+            <HeaderButton key="_filesButton" title={_t('Files')} iconSrc="img/feather-icons/files.svg"
+                isHighlighted={this.isPhase(RightPanel.Phase.FilePanel)}
+                clickPhase={RightPanel.Phase.FilePanel}
+                analytics={['Right Panel', 'File List Button', 'click']}
+            />,
+            <HeaderButton key="_notifsButton" title={_t('Notifications')} iconSrc="img/feather-icons/notifications.svg"
+                isHighlighted={this.isPhase(RightPanel.Phase.NotificationPanel)}
+                clickPhase={RightPanel.Phase.NotificationPanel}
+                analytics={['Right Panel', 'Notification List Button', 'click']}
+            />,
+        ];
+    }
+}

src/components/views/rooms/AppsDrawer.js

@@ -190,6 +190,10 @@ module.exports = React.createClass({
             />);
         });
 
+        if (apps.length == 0) {
+            return <div></div>;
+        }
+
         let addWidget;
         if (this.props.showApps &&
             this._canUserModify()

src/components/views/rooms/AuxPanel.js

@@ -23,6 +23,7 @@ import dis from "../../../dispatcher";
 import ObjectUtils from '../../../ObjectUtils';
 import AppsDrawer from './AppsDrawer';
 import { _t } from '../../../languageHandler';
+import classNames from 'classnames';
 
 
 module.exports = React.createClass({
@@ -51,6 +52,7 @@ module.exports = React.createClass({
         // a callback which is called when the content of the aux panel changes
         // content in a way that is likely to make it change size.
         onResize: PropTypes.func,
+        fullHeight: PropTypes.bool,
     },
 
     defaultProps: {
@@ -143,8 +145,17 @@ module.exports = React.createClass({
             hide={this.props.hideAppsDrawer}
         />;
 
+        const classes = classNames({
+            "mx_RoomView_auxPanel": true,
+            "mx_RoomView_auxPanel_fullHeight": this.props.fullHeight,
+        });
+        const style = {};
+        if (!this.props.fullHeight) {
+            style.maxHeight = this.props.maxHeight;
+        }
+
         return (
-            <div className="mx_RoomView_auxPanel" style={{maxHeight: this.props.maxHeight}} >
+            <div className={classes} style={style} >
                 { appsDrawer }
                 { fileDropTarget }
                 { callView }

src/components/views/rooms/DNDRoomTile.js

@@ -1,65 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import { Draggable } from 'react-beautiful-dnd';
-import RoomTile from '../../../components/views/rooms/RoomTile';
-
-import classNames from 'classnames';
-
-export default class DNDRoomTile extends React.PureComponent {
-    constructor() {
-        super();
-        this.getClassName = this.getClassName.bind(this);
-    }
-
-    getClassName(isDragging) {
-        return classNames({
-            "mx_DNDRoomTile": true,
-            "mx_DNDRoomTile_dragging": isDragging,
-        });
-    }
-
-    render() {
-        const props = this.props;
-
-        return <div>
-            <Draggable
-                key={props.room.roomId}
-                draggableId={props.tagName + '_' + props.room.roomId}
-                index={props.index}
-                type="draggable-RoomTile"
-            >
-                { (provided, snapshot) => {
-                    return (
-                        <div>
-                            <div
-                                ref={provided.innerRef}
-                                {...provided.draggableProps}
-                                {...provided.dragHandleProps}
-                            >
-                                <div className={this.getClassName(snapshot.isDragging)}>
-                                    <RoomTile {...props} />
-                                </div>
-                            </div>
-                            { provided.placeholder }
-                        </div>
-                    );
-                } }
-            </Draggable>
-        </div>;
-    }
-}

src/components/views/rooms/EntityTile.js

@@ -135,7 +135,6 @@ const EntityTile = React.createClass({
             }
             nameEl = (
                 <div className="mx_EntityTile_details">
-                    <img className="mx_EntityTile_chevron" src="img/member_chevron.png" width="8" height="12" />
                     <EmojiText element="div" className={nameClasses} dir="auto">
                         { name }
                     </EmojiText>

src/components/views/rooms/MemberInfo.js

@@ -947,38 +947,49 @@ module.exports = withMatrixClient(React.createClass({
             </div>;
         }
 
+        const avatarUrl = this.props.member.getMxcAvatarUrl();
+        let avatarElement;
+        if (avatarUrl) {
+            const httpUrl = this.props.matrixClient.mxcUrlToHttp(avatarUrl, 800, 800);
+            avatarElement = <div className="mx_MemberInfo_avatar">
+                <img src={httpUrl} />
+            </div>
+        }
+
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
-        const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
         const EmojiText = sdk.getComponent('elements.EmojiText');
+
         return (
             <div className="mx_MemberInfo">
-                <GeminiScrollbarWrapper autoshow={true}>
-                    <AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel}>
-                        <img src="img/cancel.svg" width="18" height="18" className="mx_filterFlipColor" alt={_t('Close')} />
-                    </AccessibleButton>
-                    <div className="mx_MemberInfo_avatar">
-                        <MemberAvatar onClick={this.onMemberAvatarClick} member={this.props.member} width={48} height={48} />
+                    <div className="mx_MemberInfo_name">
+                        <AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel}>
+                            <img src="img/minimise.svg" width="10" height="16" className="mx_filterFlipColor" alt={_t('Close')} />
+                        </AccessibleButton>
+                        <EmojiText element="h2">{ memberName }</EmojiText>
                     </div>
+                    { avatarElement }
+                    <div className="mx_MemberInfo_container">
 
-                    <EmojiText element="h2">{ memberName }</EmojiText>
-
-                    <div className="mx_MemberInfo_profile">
-                        <div className="mx_MemberInfo_profileField">
-                            { this.props.member.userId }
+                        <div className="mx_MemberInfo_profile">
+                            <div className="mx_MemberInfo_profileField">
+                                { this.props.member.userId }
+                            </div>
+                            { roomMemberDetails }
                         </div>
-                        { roomMemberDetails }
                     </div>
+                    <GeminiScrollbarWrapper autoshow={true} className="mx_MemberInfo_scrollContainer">
+                        <div className="mx_MemberInfo_container">
+                            { this._renderUserOptions() }
 
-                    { this._renderUserOptions() }
+                            { adminTools }
 
-                    { adminTools }
+                            { startChat }
 
-                    { startChat }
+                            { this._renderDevices() }
 
-                    { this._renderDevices() }
-
-                    { spinner }
-                </GeminiScrollbarWrapper>
+                            { spinner }
+                        </div>
+                    </GeminiScrollbarWrapper>
             </div>
         );
     },

src/components/views/rooms/MemberList.js

@@ -19,6 +19,7 @@ limitations under the License.
 import React from 'react';
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
+import dis from '../../../dispatcher';
 const MatrixClientPeg = require("../../../MatrixClientPeg");
 const sdk = require('../../../index');
 const rate_limited_func = require('../../../ratelimitedfunc');
@@ -420,42 +421,59 @@ module.exports = React.createClass({
         const TruncatedList = sdk.getComponent("elements.TruncatedList");
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
 
-        let invitedSection = null;
-        if (this._getChildCountInvited() > 0) {
-            invitedSection = (
-                <div className="mx_MemberList_invited">
-                    <h2>{ _t("Invited") }</h2>
-                    <div className="mx_MemberList_wrapper">
-                        <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAtInvited}
-                                createOverflowElement={this._createOverflowTileInvited}
-                                getChildren={this._getChildrenInvited}
-                                getChildCount={this._getChildCountInvited}
-                        />
-                    </div>
-                </div>
-            );
+        const cli = MatrixClientPeg.get();
+        const room = cli.getRoom(this.props.roomId);
+        let inviteButton;
+        if (room && room.getMyMembership() === 'join') {
+            const TintableSvg = sdk.getComponent("elements.TintableSvg");
+            const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
+            inviteButton =
+                <AccessibleButton className="mx_MemberList_invite" onClick={this.onInviteButtonClick}>
+                    <span>{ _t('Invite to this room') }</span>
+                </AccessibleButton>;
         }
 
-        const inputBox = (
-            <form autoComplete="off">
-                <input className="mx_MemberList_query" id="mx_MemberList_query" type="text"
-                        onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
-                        placeholder={_t('Filter room members')} />
-            </form>
-        );
+        let invitedHeader;
+        let invitedSection;
+        if (this._getChildCountInvited() > 0) {
+            invitedHeader = <h2>{ _t("Invited") }</h2>;
+            invitedSection = <TruncatedList className="mx_MemberList_section mx_MemberList_invited" truncateAt={this.state.truncateAtInvited}
+                        createOverflowElement={this._createOverflowTileInvited}
+                        getChildren={this._getChildrenInvited}
+                        getChildCount={this._getChildCountInvited}
+                />;
+        }
 
         return (
             <div className="mx_MemberList">
-                { inputBox }
-                <GeminiScrollbarWrapper autoshow={true} className="mx_MemberList_joined">
-                    <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAtJoined}
+                { inviteButton }
+                <GeminiScrollbarWrapper autoshow={true}>
+                    <div className="mx_MemberList_wrapper">
+                        <TruncatedList className="mx_MemberList_section mx_MemberList_joined" truncateAt={this.state.truncateAtJoined}
                             createOverflowElement={this._createOverflowTileJoined}
                             getChildren={this._getChildrenJoined}
-                            getChildCount={this._getChildCountJoined}
-                    />
-                    { invitedSection }
+                            getChildCount={this._getChildCountJoined} />
+                        { invitedHeader }
+                        { invitedSection }
+                    </div>
                 </GeminiScrollbarWrapper>
+                <input className="mx_MemberList_query mx_textinput_icon mx_textinput_search" id="mx_MemberList_query" type="text"
+                        onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
+                        placeholder={_t('Filter room members')} />
             </div>
         );
     },
+
+    onInviteButtonClick: function() {
+        if (MatrixClientPeg.get().isGuest()) {
+            dis.dispatch({action: 'require_registration'});
+            return;
+        }
+
+        // call AddressPickerDialog
+        dis.dispatch({
+            action: 'view_invite',
+            roomId: this.props.roomId,
+        });
+    },
 });

src/components/views/rooms/MessageComposer.js

@@ -333,16 +333,16 @@ export default class MessageComposer extends React.Component {
         if (this.props.callState && this.props.callState !== 'ended') {
             hangupButton =
                 <AccessibleButton key="controls_hangup" className="mx_MessageComposer_hangup" onClick={this.onHangupClick}>
-                    <img src="img/hangup.svg" alt={_t('Hangup')} title={_t('Hangup')} width="25" height="26" />
+                    <img src="img/hangup.svg" alt={_t('Hangup')} title={_t('Hangup')} width="25" height="25" />
                 </AccessibleButton>;
         } else {
             callButton =
                 <AccessibleButton key="controls_call" className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick} title={_t('Voice call')}>
-                    <TintableSvg src="img/icon-call.svg" width="35" height="35" />
+                    <TintableSvg src="img/feather-icons/phone.svg" width="20" height="20" />
                 </AccessibleButton>;
             videoCallButton =
                 <AccessibleButton key="controls_videocall" className="mx_MessageComposer_videocall" onClick={this.onCallClick} title={_t('Video call')}>
-                    <TintableSvg src="img/icons-video.svg" width="35" height="35" />
+                    <TintableSvg src="img/feather-icons/video.svg" width="20" height="20" />
                 </AccessibleButton>;
         }
 
@@ -384,7 +384,7 @@ export default class MessageComposer extends React.Component {
             const uploadButton = (
                 <AccessibleButton key="controls_upload" className="mx_MessageComposer_upload"
                         onClick={this.onUploadClick} title={_t('Upload file')}>
-                    <TintableSvg src="img/icons-upload.svg" width="35" height="35" />
+                    <TintableSvg src="img/feather-icons/paperclip.svg" width="20" height="20" />
                     <input ref="uploadInput" type="file"
                         style={uploadInputStyle}
                         multiple

src/components/views/rooms/RoomHeader.js

@@ -23,7 +23,6 @@ import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import Modal from "../../../Modal";
-import dis from "../../../dispatcher";
 import RateLimitedFunc from '../../../ratelimitedfunc';
 
 import * as linkify from 'linkifyjs';
@@ -33,6 +32,7 @@ import AccessibleButton from '../elements/AccessibleButton';
 import ManageIntegsButton from '../elements/ManageIntegsButton';
 import {CancelButton} from './SimpleRoomHeader';
 import SettingsStore from "../../../settings/SettingsStore";
+import RoomHeaderButtons from '../right_panel/RoomHeaderButtons';
 
 linkifyMatrix(linkify);
 
@@ -145,10 +145,6 @@ module.exports = React.createClass({
         MatrixClientPeg.get().sendStateEvent(this.props.room.roomId, 'm.room.avatar', {url: null}, '');
     },
 
-    onShowRhsClick: function(ev) {
-        dis.dispatch({ action: 'show_right_panel' });
-    },
-
     onShareRoomClick: function(ev) {
         const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
         Modal.createTrackedDialog('share room dialog', '', ShareDialog, {
@@ -302,18 +298,17 @@ module.exports = React.createClass({
                     topic = ev.getContent().topic;
                 }
             }
-            if (topic) {
-                topicElement =
-                    <div className="mx_RoomHeader_topic" ref="topic" title={topic} dir="auto">{ topic }</div>;
-            }
+            topicElement =
+                <div className="mx_RoomHeader_topic" ref="topic" title={topic} dir="auto">{ topic }</div>;
         }
 
         let roomAvatar = null;
+        const avatarSize = 28;
         if (canSetRoomAvatar) {
             roomAvatar = (
                 <div className="mx_RoomHeader_avatarPicker">
                     <div onClick={this.onAvatarPickerClick}>
-                        <ChangeAvatar ref="changeAvatar" room={this.props.room} showUploadSection={false} width={48} height={48} />
+                        <ChangeAvatar ref="changeAvatar" room={this.props.room} showUploadSection={false} width={avatarSize} height={avatarSize} />
                     </div>
                     <div className="mx_RoomHeader_avatarPicker_edit">
                         <label htmlFor="avatarInput" ref="file_label">
@@ -334,7 +329,7 @@ module.exports = React.createClass({
             );
         } else if (this.props.room || (this.props.oobData && this.props.oobData.name)) {
             roomAvatar = (
-                <RoomAvatar room={this.props.room} width={48} height={48} oobData={this.props.oobData}
+                <RoomAvatar room={this.props.room} width={avatarSize} height={avatarSize} oobData={this.props.oobData}
                     viewAvatarOnClick={true} />
             );
         }
@@ -342,7 +337,7 @@ module.exports = React.createClass({
         if (this.props.onSettingsClick) {
             settingsButton =
                 <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSettingsClick} title={_t("Settings")}>
-                    <TintableSvg src="img/icons-settings-room.svg" width="16" height="16" />
+                    <TintableSvg src="img/feather-icons/settings.svg" width="20" height="20" />
                 </AccessibleButton>;
         }
 
@@ -382,7 +377,7 @@ module.exports = React.createClass({
         if (this.props.onSearchClick && this.props.inRoom) {
             searchButton =
                 <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title={_t("Search")}>
-                    <TintableSvg src="img/icons-search.svg" width="35" height="35" />
+                    <TintableSvg src="img/feather-icons/search.svg" width="20" height="20" />
                 </AccessibleButton>;
         }
 
@@ -390,15 +385,7 @@ module.exports = React.createClass({
         if (this.props.inRoom) {
             shareRoomButton =
                 <AccessibleButton className="mx_RoomHeader_button" onClick={this.onShareRoomClick} title={_t('Share room')}>
-                    <TintableSvg src="img/icons-share.svg" width="16" height="16" />
-                </AccessibleButton>;
-        }
-
-        let rightPanelButtons;
-        if (this.props.collapsedRhs) {
-            rightPanelButtons =
-                <AccessibleButton className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title={_t('Show panel')}>
-                    <TintableSvg src="img/maximise.svg" width="10" height="16" />
+                    <TintableSvg src="img/feather-icons/share.svg" width="20" height="20" />
                 </AccessibleButton>;
         }
 
@@ -412,33 +399,27 @@ module.exports = React.createClass({
 
         if (!this.props.editing) {
             rightRow =
-                <div className="mx_RoomHeader_rightRow">
+                <div className="mx_RoomHeader_buttons">
                     { settingsButton }
                     { pinnedEventsButton }
                     { shareRoomButton }
                     { manageIntegsButton }
                     { forgetButton }
                     { searchButton }
-                    { rightPanelButtons }
                 </div>;
         }
 
         return (
-            <div className={"mx_RoomHeader " + (this.props.editing ? "mx_RoomHeader_editing" : "")}>
+            <div className={"mx_RoomHeader light-panel " + (this.props.editing ? "mx_RoomHeader_editing" : "")}>
                 <div className="mx_RoomHeader_wrapper">
-                    <div className="mx_RoomHeader_leftRow">
-                        <div className="mx_RoomHeader_avatar">
-                            { roomAvatar }
-                        </div>
-                        <div className="mx_RoomHeader_info">
-                            { name }
-                            { topicElement }
-                        </div>
-                    </div>
+                    <div className="mx_RoomHeader_avatar">{ roomAvatar }</div>
+                    { name }
+                    { topicElement }
                     { spinner }
                     { saveButton }
                     { cancelButton }
                     { rightRow }
+                    <RoomHeaderButtons collapsedRhs={this.props.collapsedRhs} />
                 </div>
             </div>
         );

src/components/views/rooms/RoomList.js

@@ -33,7 +33,10 @@ const Receipt = require('../../../utils/Receipt');
 import TagOrderStore from '../../../stores/TagOrderStore';
 import RoomListStore from '../../../stores/RoomListStore';
 import GroupStore from '../../../stores/GroupStore';
+import RoomSubList from '../../structures/RoomSubList';
+import ResizeHandle from '../elements/ResizeHandle';
 
+import {Resizer, RoomDistributor, RoomSizer} from '../../../resizer'
 const HIDE_CONFERENCE_CHANS = true;
 const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
 
@@ -67,6 +70,15 @@ module.exports = React.createClass({
     },
 
     getInitialState: function() {
+
+        this._subListRefs = {
+            // key => RoomSubList ref
+        };
+
+        const sizesJson = window.localStorage.getItem("mx_roomlist_sizes");
+        const collapsedJson = window.localStorage.getItem("mx_roomlist_collapsed");
+        this.subListSizes = sizesJson ? JSON.parse(sizesJson) : {};
+        this.collapsedState = collapsedJson ? JSON.parse(collapsedJson) : {};
         return {
             isLoadingLeftRooms: false,
             totalRoomCount: null,
@@ -132,18 +144,50 @@ module.exports = React.createClass({
         this._delayedRefreshRoomListLoopCount = 0;
     },
 
+    _onSubListResize: function(newSize, id) {
+        if (!id) {
+            return;
+        }
+        if (typeof newSize === "string") {
+            newSize = Number.MAX_SAFE_INTEGER;
+        }
+        this.subListSizes[id] = newSize;
+        window.localStorage.setItem("mx_roomlist_sizes", JSON.stringify(this.subListSizes));
+        // update overflow indicators
+        this._checkSubListsOverflow();
+    },
+
     componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
-        // Initialise the stickyHeaders when the component is created
-        this._updateStickyHeaders(true);
+        const cfg = {
+            onResized: this._onSubListResize,
+        };
+        this.resizer = new Resizer(this.resizeContainer, RoomDistributor, cfg, RoomSizer);
+        this.resizer.setClassNames({
+            handle: "mx_ResizeHandle",
+            vertical: "mx_ResizeHandle_vertical",
+            reverse: "mx_ResizeHandle_reverse"
+        });
 
+        // load stored sizes
+        Object.keys(this.subListSizes).forEach((key) => {
+            this._restoreSubListSize(key);
+        });
+        this._checkSubListsOverflow();
+
+        this.resizer.attach();
         this.mounted = true;
     },
 
-    componentDidUpdate: function() {
-        // Reinitialise the stickyHeaders when the component is updated
-        this._updateStickyHeaders(true);
+    componentDidUpdate: function(prevProps) {
         this._repositionIncomingCallBox(undefined, false);
+        if (this.props.searchFilter !== prevProps.searchFilter) {
+            // restore sizes
+            Object.keys(this.subListSizes).forEach((key) => {
+                this._restoreSubListSize(key);
+            });
+            this._checkSubListsOverflow();
+        }
     },
 
     onAction: function(payload) {
@@ -212,10 +256,6 @@ module.exports = React.createClass({
         if (!isHidden) {
             const self = this;
             this.setState({ isLoadingLeftRooms: true });
-
-            // Try scrolling to position
-            this._updateStickyHeaders(true, scrollToPosition);
-
             // we don't care about the response since it comes down via "Room"
             // events.
             MatrixClientPeg.get().syncLeftRooms().catch(function(err) {
@@ -227,11 +267,6 @@ module.exports = React.createClass({
         }
     },
 
-    onSubListHeaderClick: function(isHidden, scrollToPosition) {
-        // The scroll area has expanded or contracted, so re-calculate sticky headers positions
-        this._updateStickyHeaders(true, scrollToPosition);
-    },
-
     onRoomReceipt: function(receiptEvent, room) {
         // because if we read a notification, it will affect notification count
         // only bother updating if there's a receipt from us
@@ -326,6 +361,11 @@ module.exports = React.createClass({
             // Do this here so as to not render every time the selected tags
             // themselves change.
             selectedTags: TagOrderStore.getSelectedTags(),
+        }, () => {
+            // we don't need to restore any size here, do we?
+            // i guess we could have triggered a new group to appear
+            // that already an explicit size the last time it appeared ...
+            this._checkSubListsOverflow();
         });
 
         // this._lastRefreshRoomListTs = Date.now();
@@ -401,7 +441,6 @@ module.exports = React.createClass({
     _whenScrolling: function(e) {
         this._hideTooltip(e);
         this._repositionIncomingCallBox(e, false);
-        this._updateStickyHeaders(false);
     },
 
     _hideTooltip: function(e) {
@@ -435,169 +474,6 @@ module.exports = React.createClass({
         }
     },
 
-    // Doing the sticky headers as raw DOM, for speed, as it gets very stuttery if done
-    // properly through React
-    _initAndPositionStickyHeaders: function(initialise, scrollToPosition) {
-        const scrollArea = this._getScrollNode();
-        if (!scrollArea) return;
-        // Use the offset of the top of the scroll area from the window
-        // as this is used to calculate the CSS fixed top position for the stickies
-        const scrollAreaOffset = scrollArea.getBoundingClientRect().top + window.pageYOffset;
-        // Use the offset of the top of the componet from the window
-        // as this is used to calculate the CSS fixed top position for the stickies
-        const scrollAreaHeight = ReactDOM.findDOMNode(this).getBoundingClientRect().height;
-
-        if (initialise) {
-            // Get a collection of sticky header containers references
-            this.stickies = document.getElementsByClassName("mx_RoomSubList_labelContainer");
-
-            if (!this.stickies.length) return;
-
-            // Make sure there is sufficient space to do sticky headers: 120px plus all the sticky headers
-            this.scrollAreaSufficient = (120 + (this.stickies[0].getBoundingClientRect().height * this.stickies.length)) < scrollAreaHeight;
-
-            // Initialise the sticky headers
-            if (typeof this.stickies === "object" && this.stickies.length > 0) {
-                // Initialise the sticky headers
-                Array.prototype.forEach.call(this.stickies, function(sticky, i) {
-                    // Save the positions of all the stickies within scroll area.
-                    // These positions are relative to the LHS Panel top
-                    sticky.dataset.originalPosition = sticky.offsetTop - scrollArea.offsetTop;
-
-                    // Save and set the sticky heights
-                    const originalHeight = sticky.getBoundingClientRect().height;
-                    sticky.dataset.originalHeight = originalHeight;
-                    sticky.style.height = originalHeight;
-
-                    return sticky;
-                });
-            }
-        }
-
-        if (!this.stickies) return;
-
-        const self = this;
-        let scrollStuckOffset = 0;
-        // Scroll to the passed in position, i.e. a header was clicked and in a scroll to state
-        // rather than a collapsable one (see RoomSubList.isCollapsableOnClick method for details)
-        if (scrollToPosition !== undefined) {
-            scrollArea.scrollTop = scrollToPosition;
-        }
-        // Stick headers to top and bottom, or free them
-        Array.prototype.forEach.call(this.stickies, function(sticky, i, stickyWrappers) {
-            const stickyPosition = sticky.dataset.originalPosition;
-            const stickyHeight = sticky.dataset.originalHeight;
-            const stickyHeader = sticky.childNodes[0];
-            const topStuckHeight = stickyHeight * i;
-            const bottomStuckHeight = stickyHeight * (stickyWrappers.length - i);
-
-            if (self.scrollAreaSufficient && stickyPosition < (scrollArea.scrollTop + topStuckHeight)) {
-                // Top stickies
-                sticky.dataset.stuck = "top";
-                stickyHeader.classList.add("mx_RoomSubList_fixed");
-                stickyHeader.style.top = scrollAreaOffset + topStuckHeight + "px";
-                // If stuck at top adjust the scroll back down to take account of all the stuck headers
-                if (scrollToPosition !== undefined && stickyPosition === scrollToPosition) {
-                    scrollStuckOffset = topStuckHeight;
-                }
-            } else if (self.scrollAreaSufficient && stickyPosition > ((scrollArea.scrollTop + scrollAreaHeight) - bottomStuckHeight)) {
-                /// Bottom stickies
-                sticky.dataset.stuck = "bottom";
-                stickyHeader.classList.add("mx_RoomSubList_fixed");
-                stickyHeader.style.top = (scrollAreaOffset + scrollAreaHeight) - bottomStuckHeight + "px";
-            } else {
-                // Not sticky
-                sticky.dataset.stuck = "none";
-                stickyHeader.classList.remove("mx_RoomSubList_fixed");
-                stickyHeader.style.top = null;
-            }
-        });
-        // Adjust the scroll to take account of top stuck headers
-        if (scrollToPosition !== undefined) {
-            scrollArea.scrollTop -= scrollStuckOffset;
-        }
-    },
-
-    _updateStickyHeaders: function(initialise, scrollToPosition) {
-        const self = this;
-
-        if (initialise) {
-            // Useing setTimeout to ensure that the code is run after the painting
-            // of the newly rendered object as using requestAnimationFrame caused
-            // artefacts to appear on screen briefly
-            window.setTimeout(function() {
-                self._initAndPositionStickyHeaders(initialise, scrollToPosition);
-            });
-        } else {
-            this._initAndPositionStickyHeaders(initialise, scrollToPosition);
-        }
-    },
-
-    onShowMoreRooms: function() {
-        // kick gemini in the balls to get it to wake up
-        // XXX: uuuuuuugh.
-        if (!this._gemScroll) return;
-        this._gemScroll.forceUpdate();
-    },
-
-    _getEmptyContent: function(section) {
-        if (this.state.selectedTags.length > 0) {
-            return null;
-        }
-
-        const RoomDropTarget = sdk.getComponent('rooms.RoomDropTarget');
-
-        if (this.props.collapsed) {
-            return <RoomDropTarget label="" />;
-        }
-
-        const StartChatButton = sdk.getComponent('elements.StartChatButton');
-        const RoomDirectoryButton = sdk.getComponent('elements.RoomDirectoryButton');
-        const CreateRoomButton = sdk.getComponent('elements.CreateRoomButton');
-
-        let tip = null;
-
-        switch (section) {
-            case 'im.vector.fake.direct':
-                tip = <div className="mx_RoomList_emptySubListTip">
-                    { _t(
-                        "Press <StartChatButton> to start a chat with someone",
-                        {},
-                        { 'StartChatButton': <StartChatButton size="16" callout={true} /> },
-                    ) }
-                </div>;
-                break;
-            case 'im.vector.fake.recent':
-                tip = <div className="mx_RoomList_emptySubListTip">
-                    { _t(
-                        "You're not in any rooms yet! Press <CreateRoomButton> to make a room or"+
-                        " <RoomDirectoryButton> to browse the directory",
-                        {},
-                        {
-                            'CreateRoomButton': <CreateRoomButton size="16" callout={true} />,
-                            'RoomDirectoryButton': <RoomDirectoryButton size="16" callout={true} />,
-                        },
-                    ) }
-                </div>;
-                break;
-        }
-
-        if (tip) {
-            return <div className="mx_RoomList_emptySubListTip_container">
-                { tip }
-            </div>;
-        }
-
-        // We don't want to display drop targets if there are no room tiles to drag'n'drop
-        if (this.state.totalRoomCount === 0) {
-            return null;
-        }
-
-        const labelText = phraseForSection(section);
-
-        return <RoomDropTarget label={labelText} />;
-    },
-
     _getHeaderItems: function(section) {
         const StartChatButton = sdk.getComponent('elements.StartChatButton');
         const RoomDirectoryButton = sdk.getComponent('elements.RoomDirectoryButton');
@@ -632,161 +508,194 @@ module.exports = React.createClass({
         return ret;
     },
 
-    _collectGemini(gemScroll) {
-        this._gemScroll = gemScroll;
+    _applySearchFilter: function(list, filter) {
+        if (filter === "") return list;
+        const lcFilter = filter.toLowerCase();
+        // case insensitive if room name includes filter,
+        // or if starts with `#` and one of room's aliases starts with filter
+        return list.filter((room) => (room.name && room.name.toLowerCase().includes(lcFilter)) ||
+            (filter[0] === '#' && room.getAliases().some((alias) => alias.toLowerCase().startsWith(lcFilter))));
+    },
+
+    _handleCollapsedState: function(key, collapsed) {
+        // persist collapsed state
+        this.collapsedState[key] = collapsed;
+        window.localStorage.setItem("mx_roomlist_collapsed", JSON.stringify(this.collapsedState));
+        // load the persisted size configuration of the expanded sub list
+        if (!collapsed) {
+            this._restoreSubListSize(key);
+        }
+        // check overflow, as sub lists sizes have changed
+        // important this happens after calling resize above
+        this._checkSubListsOverflow();
+    },
+
+    _restoreSubListSize(key) {
+        const size = this.subListSizes[key];
+        const handle = this.resizer.forHandleWithId(key);
+        if (handle) {
+            handle.resize(size);
+        }
+    },
+
+    // check overflow for scroll indicator gradient
+    _checkSubListsOverflow() {
+        Object.values(this._subListRefs).forEach(l => l.checkOverflow());
+    },
+
+    _subListRef: function(key, ref) {
+        if (!ref) {
+            delete this._subListRefs[key];
+        } else {
+            this._subListRefs[key] = ref;
+        }
+    },
+
+    _mapSubListProps: function(subListsProps) {
+        const defaultProps = {
+            collapsed: this.props.collapsed,
+            isFiltered: !!this.props.searchFilter,
+            incomingCall: this.state.incomingCall,
+        };
+
+        subListsProps.forEach((p) => {
+            p.list = this._applySearchFilter(p.list, this.props.searchFilter);
+        });
+
+        subListsProps = subListsProps.filter((props => {
+            const len = props.list.length + (props.extraTiles ? props.extraTiles.length : 0);
+            return len !== 0 || (props.onAddRoom && !this.props.searchFilter);
+        }));
+
+        return subListsProps.reduce((components, props, i) => {
+            props = Object.assign({}, defaultProps, props);
+            const isLast = i === subListsProps.length - 1;
+            const {key, label, onHeaderClick, ... otherProps} = props;
+            const chosenKey = key || label;
+            const onSubListHeaderClick = (collapsed) => {
+                this._handleCollapsedState(chosenKey, collapsed);
+                if (onHeaderClick) {
+                    onHeaderClick(collapsed);
+                }
+            };
+            const startAsHidden = props.startAsHidden || this.collapsedState[chosenKey];
+
+            let subList = (<RoomSubList
+                ref={this._subListRef.bind(this, chosenKey)}
+                startAsHidden={startAsHidden}
+                onHeaderClick={onSubListHeaderClick}
+                key={chosenKey}
+                label={label}
+                {...otherProps} />);
+
+            if (!isLast) {
+                return components.concat(
+                    subList,
+                    <ResizeHandle key={chosenKey+"-resizer"} vertical={true} id={chosenKey} />
+                );
+            } else {
+                return components.concat(subList);
+            }
+        }, []);
+    },
+
+    _collectResizeContainer: function(el) {
+        this.resizeContainer = el;
     },
 
     render: function() {
-        const RoomSubList = sdk.getComponent('structures.RoomSubList');
-        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
-
-        // XXX: we can't detect device-level (localStorage) settings onChange as the SettingsStore does not notify
-        // so checking on every render is the sanest thing at this time.
-        const showEmpty = SettingsStore.getValue('RoomSubList.showEmpty');
-
         const incomingCallIfTaggedAs = (tagName) => {
             if (!this.state.incomingCall) return null;
             if (this.state.incomingCallTag !== tagName) return null;
             return this.state.incomingCall;
         };
 
-        const self = this;
+        let subLists = [
+            {
+                list: [],
+                extraTiles: this._makeGroupInviteTiles(this.props.searchFilter),
+                label: _t('Community Invites'),
+                order: "recent",
+                isInvite: true,
+            },
+            {
+                list: this.state.lists['im.vector.fake.invite'],
+                label: _t('Invites'),
+                order: "recent",
+                incomingCall: incomingCallIfTaggedAs('im.vector.fake.invite'),
+                isInvite: true,
+            },
+            {
+                list: this.state.lists['m.favourite'],
+                label: _t('Favourites'),
+                tagName: "m.favourite",
+                order: "manual",
+                incomingCall: incomingCallIfTaggedAs('m.favourite'),
+            },
+            {
+                list: this.state.lists['im.vector.fake.direct'],
+                label: _t('People'),
+                tagName: "im.vector.fake.direct",
+                headerItems: this._getHeaderItems('im.vector.fake.direct'),
+                order: "recent",
+                incomingCall: incomingCallIfTaggedAs('im.vector.fake.direct'),
+                onAddRoom: () => {dis.dispatch({action: 'view_create_chat'})},
+            },
+            {
+                list: this.state.lists['im.vector.fake.recent'],
+                label: _t('Rooms'),
+                headerItems: this._getHeaderItems('im.vector.fake.recent'),
+                order: "recent",
+                incomingCall: incomingCallIfTaggedAs('im.vector.fake.recent'),
+                onAddRoom: () => {dis.dispatch({action: 'view_create_room'})},
+            },
+        ];
+        const tagSubLists = Object.keys(this.state.lists)
+            .filter((tagName) => {
+                return !tagName.match(STANDARD_TAGS_REGEX);
+            }).map((tagName) => {
+                return {
+                    list: this.state.lists[tagName],
+                    key: tagName,
+                    label: labelForTagName(tagName),
+                    tagName: tagName,
+                    order: "manual",
+                    incomingCall: incomingCallIfTaggedAs(tagName),
+                };
+            });
+        subLists = subLists.concat(tagSubLists);
+        subLists = subLists.concat([
+            {
+                list: this.state.lists['m.lowpriority'],
+                label: _t('Low priority'),
+                tagName: "m.lowpriority",
+                order: "recent",
+                incomingCall: incomingCallIfTaggedAs('m.lowpriority'),
+            },
+            {
+                list: this.state.lists['im.vector.fake.archived'],
+                label: _t('Historical'),
+                order: "recent",
+                incomingCall: incomingCallIfTaggedAs('im.vector.fake.archived'),
+                startAsHidden: true,
+                showSpinner: this.state.isLoadingLeftRooms,
+                onHeaderClick: this.onArchivedHeaderClick,
+            },
+            {
+                list: this.state.lists['m.server_notice'],
+                label: _t('System Alerts'),
+                tagName: "m.lowpriority",
+                order: "recent",
+                incomingCall: incomingCallIfTaggedAs('m.server_notice'),
+            },
+        ]);
+
+        const subListComponents = this._mapSubListProps(subLists);
+
         return (
-            <GeminiScrollbarWrapper className="mx_RoomList_scrollbar"
-                autoshow={true} onScroll={self._whenScrolling} onResize={self._whenScrolling} wrappedRef={this._collectGemini}>
-            <div className="mx_RoomList">
-                <RoomSubList list={[]}
-                             extraTiles={this._makeGroupInviteTiles(self.props.searchFilter)}
-                             label={_t('Community Invites')}
-                             editable={false}
-                             order="recent"
-                             isInvite={true}
-                             collapsed={self.props.collapsed}
-                             searchFilter={self.props.searchFilter}
-                             onHeaderClick={self.onSubListHeaderClick}
-                             onShowMoreRooms={self.onShowMoreRooms}
-                             showEmpty={showEmpty}
-                />
-
-                <RoomSubList list={self.state.lists['im.vector.fake.invite']}
-                             label={_t('Invites')}
-                             editable={false}
-                             order="recent"
-                             isInvite={true}
-                             incomingCall={incomingCallIfTaggedAs('im.vector.fake.invite')}
-                             collapsed={self.props.collapsed}
-                             searchFilter={self.props.searchFilter}
-                             onHeaderClick={self.onSubListHeaderClick}
-                             onShowMoreRooms={self.onShowMoreRooms}
-                             showEmpty={showEmpty}
-                />
-
-                <RoomSubList list={self.state.lists['m.favourite']}
-                             label={_t('Favourites')}
-                             tagName="m.favourite"
-                             emptyContent={this._getEmptyContent('m.favourite')}
-                             editable={true}
-                             order="manual"
-                             incomingCall={incomingCallIfTaggedAs('m.favourite')}
-                             collapsed={self.props.collapsed}
-                             searchFilter={self.props.searchFilter}
-                             onHeaderClick={self.onSubListHeaderClick}
-                             onShowMoreRooms={self.onShowMoreRooms}
-                             showEmpty={showEmpty} />
-
-                <RoomSubList list={self.state.lists['im.vector.fake.direct']}
-                             label={_t('People')}
-                             tagName="im.vector.fake.direct"
-                             emptyContent={this._getEmptyContent('im.vector.fake.direct')}
-                             headerItems={this._getHeaderItems('im.vector.fake.direct')}
-                             editable={true}
-                             order="recent"
-                             incomingCall={incomingCallIfTaggedAs('im.vector.fake.direct')}
-                             collapsed={self.props.collapsed}
-                             alwaysShowHeader={true}
-                             searchFilter={self.props.searchFilter}
-                             onHeaderClick={self.onSubListHeaderClick}
-                             onShowMoreRooms={self.onShowMoreRooms}
-                             showEmpty={showEmpty} />
-
-                <RoomSubList list={self.state.lists['im.vector.fake.recent']}
-                             label={_t('Rooms')}
-                             editable={true}
-                             emptyContent={this._getEmptyContent('im.vector.fake.recent')}
-                             headerItems={this._getHeaderItems('im.vector.fake.recent')}
-                             order="recent"
-                             incomingCall={incomingCallIfTaggedAs('im.vector.fake.recent')}
-                             collapsed={self.props.collapsed}
-                             searchFilter={self.props.searchFilter}
-                             onHeaderClick={self.onSubListHeaderClick}
-                             onShowMoreRooms={self.onShowMoreRooms}
-                             showEmpty={showEmpty} />
-
-                { Object.keys(self.state.lists).map((tagName) => {
-                    if (!tagName.match(STANDARD_TAGS_REGEX)) {
-                        return <RoomSubList list={self.state.lists[tagName]}
-                             key={tagName}
-                             label={labelForTagName(tagName)}
-                             tagName={tagName}
-                             emptyContent={this._getEmptyContent(tagName)}
-                             editable={true}
-                             order="manual"
-                             incomingCall={incomingCallIfTaggedAs(tagName)}
-                             collapsed={self.props.collapsed}
-                             searchFilter={self.props.searchFilter}
-                             onHeaderClick={self.onSubListHeaderClick}
-                             onShowMoreRooms={self.onShowMoreRooms}
-                                            showEmpty={showEmpty} />;
-                    }
-                }) }
-
-                <RoomSubList list={self.state.lists['m.lowpriority']}
-                             label={_t('Low priority')}
-                             tagName="m.lowpriority"
-                             emptyContent={this._getEmptyContent('m.lowpriority')}
-                             editable={true}
-                             order="recent"
-                             incomingCall={incomingCallIfTaggedAs('m.lowpriority')}
-                             collapsed={self.props.collapsed}
-                             searchFilter={self.props.searchFilter}
-                             onHeaderClick={self.onSubListHeaderClick}
-                             onShowMoreRooms={self.onShowMoreRooms}
-                             showEmpty={showEmpty} />
-
-                <RoomSubList list={self.state.lists['im.vector.fake.archived']}
-                             emptyContent={self.props.collapsed ? null :
-                                 <div className="mx_RoomList_emptySubListTip_container">
-                                     <div className="mx_RoomList_emptySubListTip">
-                                         { _t('You have no historical rooms') }
-                                     </div>
-                                 </div>
-                             }
-                             label={_t('Historical')}
-                             editable={false}
-                             order="recent"
-                             collapsed={self.props.collapsed}
-                             alwaysShowHeader={true}
-                             startAsHidden={true}
-                             showSpinner={self.state.isLoadingLeftRooms}
-                             onHeaderClick={self.onArchivedHeaderClick}
-                             incomingCall={incomingCallIfTaggedAs('im.vector.fake.archived')}
-                             searchFilter={self.props.searchFilter}
-                             onShowMoreRooms={self.onShowMoreRooms}
-                             showEmpty={showEmpty} />
-
-                <RoomSubList list={self.state.lists['m.server_notice']}
-                             label={_t('System Alerts')}
-                             tagName="m.lowpriority"
-                             editable={false}
-                             order="recent"
-                             incomingCall={incomingCallIfTaggedAs('m.server_notice')}
-                             collapsed={self.props.collapsed}
-                             searchFilter={self.props.searchFilter}
-                             onHeaderClick={self.onSubListHeaderClick}
-                             onShowMoreRooms={self.onShowMoreRooms}
-                             showEmpty={false} />
+            <div ref={this._collectResizeContainer} className="mx_RoomList">
+                { subListComponents }
             </div>
-            </GeminiScrollbarWrapper>
         );
     },
-});
+});

src/components/views/rooms/RoomTile.js

@@ -221,7 +221,7 @@ module.exports = React.createClass({
         this.setState( { badgeHover: false } );
     },
 
-    onBadgeClicked: function(e) {
+    onOpenMenu: function(e) {
         // Prevent the RoomTile onClick event firing as well
         e.stopPropagation();
         // Only allow non-guests to access the context menu
@@ -289,19 +289,14 @@ module.exports = React.createClass({
         if (name == undefined || name == null) name = '';
         name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
 
-        let badgeContent;
 
-        if (this.state.badgeHover || this.state.menuDisplayed) {
-            badgeContent = "\u00B7\u00B7\u00B7";
-        } else if (badges) {
+        let badge;
+        if (badges) {
             const limitedCount = FormattingUtils.formatCount(notificationCount);
-            badgeContent = notificationCount ? limitedCount : '!';
-        } else {
-            badgeContent = '\u200B';
+            const badgeContent = notificationCount ? limitedCount : '!';
+            badge = <div className={badgeClasses}>{ badgeContent }</div>;
         }
 
-        const badge = <div className={badgeClasses} onClick={this.onBadgeClicked}>{ badgeContent }</div>;
-
         const EmojiText = sdk.getComponent('elements.EmojiText');
         let label;
         let subtextLabel;
@@ -333,6 +328,11 @@ module.exports = React.createClass({
         //    incomingCallBox = <IncomingCallBox incomingCall={ this.props.incomingCall }/>;
         //}
 
+        let contextMenuButton;
+        if (!MatrixClientPeg.get().isGuest()) {
+            contextMenuButton = <AccessibleButton className="mx_RoomTile_menuButton" onClick={this.onOpenMenu} />;
+        }
+
         const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
 
         let dmIndicator;
@@ -356,6 +356,7 @@ module.exports = React.createClass({
             <div className="mx_RoomTile_nameContainer">
                 { label }
                 { subtextLabel }
+                { contextMenuButton }
                 { badge }
             </div>
             { /* { incomingCallBox } */ }

src/components/views/rooms/Stickerpicker.js

@@ -351,7 +351,7 @@ export default class Stickerpicker extends React.Component {
                     onClick={this._onHideStickersClick}
                     ref='target'
                     title={_t("Hide Stickers")}>
-                    <TintableSvg src="img/icons-hide-stickers.svg" width="35" height="35" />
+                    <TintableSvg src="img/feather-icons/face.svg" width="20" height="20" />
                 </AccessibleButton>;
         } else {
             // Show show-stickers button
@@ -362,7 +362,7 @@ export default class Stickerpicker extends React.Component {
                     className="mx_MessageComposer_stickers"
                     onClick={this._onShowStickersClick}
                     title={_t("Show Stickers")}>
-                    <TintableSvg src="img/icons-show-stickers.svg" width="35" height="35" />
+                    <TintableSvg src="img/feather-icons/face.svg" width="20" height="20" />
                 </AccessibleButton>;
         }
         return <div>

src/components/views/rooms/TopUnreadMessagesBar.js

@@ -21,6 +21,8 @@ const React = require('react');
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import AccessibleButton from '../elements/AccessibleButton';
+import {formatCount} from '../../../utils/FormattingUtils';
+
 const sdk = require('../../../index');
 
 module.exports = React.createClass({
@@ -28,28 +30,15 @@ module.exports = React.createClass({
 
     propTypes: {
         onScrollUpClick: PropTypes.func,
-        onCloseClick: PropTypes.func,
     },
 
     render: function() {
         return (
             <div className="mx_TopUnreadMessagesBar">
                 <AccessibleButton className="mx_TopUnreadMessagesBar_scrollUp"
-                        onClick={this.props.onScrollUpClick}>
-                    <img src="img/scrollto.svg" width="24" height="24"
-                        // No point on setting up non empty alt on this image
-                        // as it only complements the text which follows it.
-                        alt=""
-                        title={_t('Scroll to unread messages')}
-                        // In order not to use this title attribute for accessible name
-                        // calculation of the parent button set the role presentation
-                        role="presentation" />
-                    { _t("Jump to first unread message.") }
+                    title={_t('Jump to first unread message.')}
+                    onClick={this.props.onScrollUpClick}>
                 </AccessibleButton>
-                <AccessibleButton element='img' className="mx_TopUnreadMessagesBar_close mx_filterFlipColor"
-                    src="img/cancel.svg" width="18" height="18"
-                    alt={_t("Close")} title={_t("Close")}
-                    onClick={this.props.onCloseClick} />
             </div>
         );
     },

src/components/views/rooms/WhoIsTypingTile.js

@@ -0,0 +1,130 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017, 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import WhoIsTyping from '../../../WhoIsTyping';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import MemberAvatar from '../avatars/MemberAvatar';
+
+module.exports = React.createClass({
+    displayName: 'WhoIsTypingTile',
+
+    propTypes: {
+        // the room this statusbar is representing.
+        room: PropTypes.object.isRequired,
+        onVisible: PropTypes.func,
+        // Number of names to display in typing indication. E.g. set to 3, will
+        // result in "X, Y, Z and 100 others are typing."
+        whoIsTypingLimit: PropTypes.number,
+    },
+
+    getDefaultProps: function() {
+        return {
+            whoIsTypingLimit: 3,
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            usersTyping: WhoIsTyping.usersTypingApartFromMe(this.props.room),
+        };
+    },
+
+    componentWillMount: function() {
+        MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
+    },
+
+    componentDidUpdate: function(_, prevState) {
+        if (this.props.onVisible &&
+            !prevState.usersTyping.length &&
+            this.state.usersTyping.length
+        ) {
+            this.props.onVisible();
+        }
+    },
+
+    componentWillUnmount: function() {
+        // we may have entirely lost our client as we're logging out before clicking login on the guest bar...
+        const client = MatrixClientPeg.get();
+        if (client) {
+            client.removeListener("RoomMember.typing", this.onRoomMemberTyping);
+        }
+    },
+
+    onRoomMemberTyping: function(ev, member) {
+        this.setState({
+            usersTyping: WhoIsTyping.usersTypingApartFromMeAndIgnored(this.props.room),
+        });
+    },
+
+    _renderTypingIndicatorAvatars: function(limit) {
+        let users = this.state.usersTyping;
+
+        let othersCount = 0;
+        if (users.length > limit) {
+            othersCount = users.length - limit + 1;
+            users = users.slice(0, limit - 1);
+        }
+
+        const avatars = users.map((u) => {
+            return (
+                <MemberAvatar
+                    key={u.userId}
+                    member={u}
+                    width={24}
+                    height={24}
+                    resizeMethod="crop"
+                />
+            );
+        });
+
+        if (othersCount > 0) {
+            avatars.push(
+                <span className="mx_WhoIsTypingTile_remainingAvatarPlaceholder" key="others">
+                    +{ othersCount }
+                </span>,
+            );
+        }
+
+        return avatars;
+    },
+
+    render: function() {
+        const typingString = WhoIsTyping.whoIsTypingString(
+            this.state.usersTyping,
+            this.props.whoIsTypingLimit,
+        );
+        if (!typingString) {
+            return (<div className="mx_WhoIsTypingTile_empty" />);
+        }
+
+        const EmojiText = sdk.getComponent('elements.EmojiText');
+
+        return (
+            <li className="mx_WhoIsTypingTile">
+                <div className="mx_WhoIsTypingTile_avatars">
+                    { this._renderTypingIndicatorAvatars(this.props.whoIsTypingLimit) }
+                </div>
+                <div className="mx_WhoIsTypingTile_label">
+                    <EmojiText>{ typingString }</EmojiText>
+                </div>
+            </li>
+        );
+    },
+});

src/i18n/strings/en_EN.json

@@ -211,6 +211,15 @@
     "%(widgetName)s widget modified by %(senderName)s": "%(widgetName)s widget modified by %(senderName)s",
     "%(widgetName)s widget added by %(senderName)s": "%(widgetName)s widget added by %(senderName)s",
     "%(widgetName)s widget removed by %(senderName)s": "%(widgetName)s widget removed by %(senderName)s",
+    "%(displayName)s is typing …": "%(displayName)s is typing …",
+    "%(names)s and %(count)s others are typing …|other": "%(names)s and %(count)s others are typing …",
+    "%(names)s and %(count)s others are typing …|one": "%(names)s and one other is typing …",
+    "%(names)s and %(lastPerson)s are typing …": "%(names)s and %(lastPerson)s are typing …",
+    "Failure to create room": "Failure to create room",
+    "Server may be unavailable, overloaded, or you hit a bug.": "Server may be unavailable, overloaded, or you hit a bug.",
+    "Send anyway": "Send anyway",
+    "Send": "Send",
+    "Unnamed Room": "Unnamed Room",
     "%(displayName)s is typing": "%(displayName)s is typing",
     "%(names)s and %(count)s others are typing|other": "%(names)s and %(count)s others are typing",
     "%(names)s and %(count)s others are typing|one": "%(names)s and one other is typing",
@@ -647,7 +656,6 @@
     "Stickerpack": "Stickerpack",
     "Hide Stickers": "Hide Stickers",
     "Show Stickers": "Show Stickers",
-    "Scroll to unread messages": "Scroll to unread messages",
     "Jump to first unread message.": "Jump to first unread message.",
     "Invalid alias format": "Invalid alias format",
     "'%(alias)s' is not a valid format for an alias": "'%(alias)s' is not a valid format for an alias",
@@ -1222,6 +1230,7 @@
     "Uploading %(filename)s and %(count)s others|one": "Uploading %(filename)s and %(count)s other",
     "Light theme": "Light theme",
     "Dark theme": "Dark theme",
+    "2018 theme": "2018 theme",
     "Status.im theme": "Status.im theme",
     "Can't load user settings": "Can't load user settings",
     "Server may be unavailable or overloaded": "Server may be unavailable or overloaded",
@@ -1416,5 +1425,9 @@
     "Go to Settings": "Go to Settings",
     "Failed to set direct chat tag": "Failed to set direct chat tag",
     "Failed to remove tag %(tagName)s from room": "Failed to remove tag %(tagName)s from room",
-    "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room"
+    "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room",
+    "Report bugs & give feedback": "Report bugs & give feedback",
+    "Thanks for testing the Riot Redesign. If you run into any bugs or visual issues, please let us know on GitHub.": "Thanks for testing the Riot Redesign. If you run into any bugs or visual issues, please let us know on GitHub.",
+    "To help avoid duplicate issues, please <existingIssuesLink>view existing issues</existingIssuesLink> first (and add a +1) or <newIssueLink>create a new issue</newIssueLink> if you can't find it.": "To help avoid duplicate issues, please <existingIssuesLink>view existing issues</existingIssuesLink> first (and add a +1) or <newIssueLink>create a new issue</newIssueLink> if you can't find it.",
+    "Go back": "Go back"
 }

src/resizer/distributors.js

@@ -0,0 +1,82 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/**
+distributors translate a moving cursor into
+CSS/DOM changes by calling the sizer
+
+they have two methods:
+    `resize` receives then new item size
+    `resizeFromContainerOffset` receives resize handle location
+        within the container bounding box. For internal use.
+        This method usually ends up calling `resize` once the start offset is subtracted.
+the offset from the container edge of where
+the mouse cursor is.
+*/
+class FixedDistributor {
+    constructor(sizer, item, id, config) {
+        this.sizer = sizer;
+        this.item = item;
+        this.id = id;
+        this.beforeOffset = sizer.getItemOffset(this.item);
+        this.onResized = config && config.onResized;
+    }
+
+    resize(itemSize) {
+        this.sizer.setItemSize(this.item, itemSize);
+        if (this.onResized) {
+            this.onResized(itemSize, this.id, this.item);
+        }
+        return itemSize;
+    }
+
+    resizeFromContainerOffset(offset) {
+        this.resize(offset - this.beforeOffset);
+    }
+}
+
+
+class CollapseDistributor extends FixedDistributor {
+    constructor(sizer, item, id, config) {
+        super(sizer, item, id, config);
+        this.toggleSize = config && config.toggleSize;
+        this.onCollapsed = config && config.onCollapsed;
+        this.isCollapsed = false;
+    }
+
+    resize(newSize) {
+        const isCollapsedSize = newSize < this.toggleSize;
+        if (isCollapsedSize && !this.isCollapsed) {
+            this.isCollapsed = true;
+            if (this.onCollapsed) {
+                this.onCollapsed(true, this.item);
+            }
+        } else if (!isCollapsedSize && this.isCollapsed) {
+            if (this.onCollapsed) {
+                this.onCollapsed(false, this.item);
+            }
+            this.isCollapsed = false;
+        }
+        if (!isCollapsedSize) {
+            super.resize(newSize);
+        }
+    }
+}
+
+module.exports = {
+    FixedDistributor,
+    CollapseDistributor,
+};

src/resizer/index.js

@@ -0,0 +1,30 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {Sizer, FlexSizer} from "./sizer";
+import {FixedDistributor, CollapseDistributor} from "./distributors";
+import {Resizer} from "./resizer";
+import {RoomSizer, RoomDistributor} from "./room";
+
+module.exports = {
+    Resizer,
+    Sizer,
+    FlexSizer,
+    FixedDistributor,
+    CollapseDistributor,
+    RoomSizer,
+    RoomDistributor,
+};

src/resizer/resizer.js

@@ -0,0 +1,153 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {Sizer} from "./sizer";
+
+/*
+classNames:
+    // class on resize-handle
+    handle: string
+    // class on resize-handle
+    reverse: string
+    // class on resize-handle
+    vertical: string
+    // class on container
+    resizing: string
+*/
+
+export class Resizer {
+    constructor(container, distributorCtor, distributorCfg, sizerCtor = Sizer) {
+        this.container = container;
+        this.distributorCtor = distributorCtor;
+        this.distributorCfg = distributorCfg;
+        this.sizerCtor = sizerCtor;
+        this.classNames = {
+            handle: "resizer-handle",
+            reverse: "resizer-reverse",
+            vertical: "resizer-vertical",
+            resizing: "resizer-resizing",
+        };
+        this._onMouseDown = this._onMouseDown.bind(this);
+    }
+
+    setClassNames(classNames) {
+        this.classNames = classNames;
+    }
+
+    attach() {
+        this.container.addEventListener("mousedown", this._onMouseDown, false);
+    }
+
+    detach() {
+        this.container.removeEventListener("mousedown", this._onMouseDown, false);
+    }
+
+    /**
+    Gives the distributor for a specific resize handle, as if you would have started
+    to drag that handle. Can be used to manipulate the size of an item programmatically.
+    @param {number} handleIndex the index of the resize handle in the container
+    @return {Distributor} a new distributor for the given handle
+    */
+    forHandleAt(handleIndex) {
+        const handles = this._getResizeHandles();
+        const handle = handles[handleIndex];
+        if (handle) {
+            const {distributor} = this._createSizerAndDistributor(handle);
+            return distributor;
+        }
+    }
+
+    forHandleWithId(id) {
+        const handles = this._getResizeHandles();
+        const handle = handles.find((h) => h.getAttribute("data-id") === id);
+        if (handle) {
+            const {distributor} = this._createSizerAndDistributor(handle);
+            return distributor;
+        }
+    }
+
+    _isResizeHandle(el) {
+        return el && el.classList.contains(this.classNames.handle);
+    }
+
+    _onMouseDown(event) {
+        // use closest in case the resize handle contains
+        // child dom nodes that can be the target
+        const resizeHandle = event.target && event.target.closest(`.${this.classNames.handle}`);
+        if (!resizeHandle || resizeHandle.parentElement !== this.container) {
+            return;
+        }
+        // prevent starting a drag operation
+        event.preventDefault();
+
+        // mark as currently resizing
+        if (this.classNames.resizing) {
+            this.container.classList.add(this.classNames.resizing);
+        }
+
+        const {sizer, distributor} = this._createSizerAndDistributor(resizeHandle);
+
+        const onMouseMove = (event) => {
+            const offset = sizer.offsetFromEvent(event);
+            distributor.resizeFromContainerOffset(offset);
+        };
+
+        const body = document.body;
+        const onMouseUp = (event) => {
+            if (this.classNames.resizing) {
+                this.container.classList.remove(this.classNames.resizing);
+            }
+            body.removeEventListener("mouseup", onMouseUp, false);
+            body.removeEventListener("mousemove", onMouseMove, false);
+        };
+        body.addEventListener("mouseup", onMouseUp, false);
+        body.addEventListener("mousemove", onMouseMove, false);
+    }
+
+    _createSizerAndDistributor(resizeHandle) {
+        const vertical = resizeHandle.classList.contains(this.classNames.vertical);
+        const reverse = resizeHandle.classList.contains(this.classNames.reverse);
+
+        // eslint-disable-next-line new-cap
+        const sizer = new this.sizerCtor(this.container, vertical, reverse);
+
+        const items = this._getResizableItems();
+        const prevItem = resizeHandle.previousElementSibling;
+        // if reverse, resize the item after the handle instead of before, so + 1
+        const itemIndex = items.indexOf(prevItem) + (reverse ? 1 : 0);
+        const item = items[itemIndex];
+        const id = resizeHandle.getAttribute("data-id");
+        // eslint-disable-next-line new-cap
+        const distributor = new this.distributorCtor(
+            sizer, item, id, this.distributorCfg,
+            items, this.container);
+        return {sizer, distributor};
+    }
+
+    _getResizableItems() {
+        return Array.from(this.container.children).filter(el => {
+            return !this._isResizeHandle(el) && (
+                this._isResizeHandle(el.previousElementSibling) ||
+                this._isResizeHandle(el.nextElementSibling));
+        });
+    }
+
+    _getResizeHandles() {
+        return Array.from(this.container.children).filter(el => {
+            return this._isResizeHandle(el);
+        });
+    }
+}

src/resizer/room.js

@@ -0,0 +1,60 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {Sizer} from "./sizer";
+import {FixedDistributor} from "./distributors";
+
+class RoomSizer extends Sizer {
+    setItemSize(item, size) {
+        const isString = typeof size === "string";
+        const cl = item.classList;
+        if (isString) {
+            if (size === "resized-all") {
+                cl.add("resized-all");
+                cl.remove("resized-sized");
+                item.style.maxHeight = null;
+            }
+        } else {
+            cl.add("resized-sized");
+            cl.remove("resized-all");
+            item.style.maxHeight = `${Math.round(size)}px`;
+        }
+    }
+}
+
+class RoomDistributor extends FixedDistributor {
+    resize(itemSize) {
+        const scrollItem = this.item.querySelector(".mx_RoomSubList_scroll");
+        if (!scrollItem) {
+            return; //FIXME: happens when starting the page on a community url, taking the safe way out for now
+        }
+        const fixedHeight = this.item.offsetHeight - scrollItem.offsetHeight;
+        if (itemSize > (fixedHeight + scrollItem.scrollHeight)) {
+            super.resize("resized-all");
+        } else {
+            super.resize(itemSize);
+        }
+    }
+
+    resizeFromContainerOffset(offset) {
+        return this.resize(offset - this.sizer.getItemOffset(this.item));
+    }
+}
+
+module.exports = {
+    RoomSizer,
+    RoomDistributor,
+};

src/resizer/sizer.js

@@ -0,0 +1,107 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/**
+implements DOM/CSS operations for resizing.
+The sizer determines what CSS mechanism is used for sizing items, like flexbox, ...
+*/
+class Sizer {
+    constructor(container, vertical, reverse) {
+        this.container = container;
+        this.reverse = reverse;
+        this.vertical = vertical;
+    }
+
+    getItemPercentage(item) {
+        /*
+        const flexGrow = window.getComputedStyle(item).flexGrow;
+        if (flexGrow === "") {
+            return null;
+        }
+        return parseInt(flexGrow) / 1000;
+        */
+        const style = window.getComputedStyle(item);
+        const sizeStr = this.vertical ? style.height : style.width;
+        const size = parseInt(sizeStr, 10);
+        return size / this.getTotalSize();
+    }
+
+    setItemPercentage(item, percent) {
+        item.style.flexGrow = Math.round(percent * 1000);
+    }
+
+    /**
+        @param {Element} item the dom element being resized
+        @return {number} how far the edge of the item is from the edge of the container
+    */
+    getItemOffset(item) {
+        const offset = (this.vertical ? item.offsetTop : item.offsetLeft) - this._getOffset();
+        if (this.reverse) {
+            return this.getTotalSize() - (offset + this.getItemSize(item));
+        } else {
+            return offset;
+        }
+    }
+
+    /**
+        @param {Element} item the dom element being resized
+        @return {number} the width/height of an item in the container
+    */
+    getItemSize(item) {
+        return this.vertical ? item.offsetHeight : item.offsetWidth;
+    }
+
+    /** @return {number} the width/height of the container */
+    getTotalSize() {
+        return this.vertical ? this.container.offsetHeight : this.container.offsetWidth;
+    }
+
+    /** @return {number} container offset to offsetParent */
+    _getOffset() {
+        return this.vertical ? this.container.offsetTop : this.container.offsetLeft;
+    }
+
+    setItemSize(item, size) {
+        if (this.vertical) {
+            item.style.height = `${Math.round(size)}px`;
+        } else {
+            item.style.width = `${Math.round(size)}px`;
+        }
+    }
+
+    /**
+        @param {MouseEvent} event the mouse event
+        @return {number} the distance between the cursor and the edge of the container,
+            along the applicable axis (vertical or horizontal)
+    */
+    offsetFromEvent(event) {
+        const pos = this.vertical ? event.pageY : event.pageX;
+        if (this.reverse) {
+            return (this._getOffset() + this.getTotalSize()) - pos;
+        } else {
+            return pos - this._getOffset();
+        }
+    }
+}
+
+class FlexSizer extends Sizer {
+    setItemSize(item, size) {
+        item.style.flexGrow = `0`;
+        item.style.flexBasis = `${Math.round(size)}px`;
+    }
+}
+
+module.exports = {Sizer, FlexSizer};

src/settings/Settings.js

@@ -206,8 +206,8 @@ export const SETTINGS = {
         default: false,
     },
     "theme": {
-        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
-        default: "light",
+        supportedLevels: ['config'],
+        default: "dharma",
     },
     "webRtcForceTURN": {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,

src/settings/handlers/ConfigSettingsHandler.js

@@ -27,7 +27,7 @@ export default class ConfigSettingsHandler extends SettingsHandler {
 
         // Special case themes
         if (settingName === "theme") {
-            return config["default_theme"];
+            return "dharma"; // config["default_theme"];
         }
 
         const settingsConfig = config["settingDefaults"];

src/stores/RoomListStore.js

@@ -224,9 +224,9 @@ class RoomListStore extends Store {
                     }
                 }
 
-                // ignore any m. tag names we don't know about
+                // ignore tags we don't know about
                 tagNames = tagNames.filter((t) => {
-                    return !t.startsWith('m.') || lists[t] !== undefined;
+                    return lists[t] !== undefined;
                 });
 
                 if (tagNames.length) {

src/utils/FormattingUtils.js

@@ -37,3 +37,24 @@ export function formatCount(count) {
 export function formatCryptoKey(key) {
     return key.match(/.{1,4}/g).join(" ");
 }
+/**
+ * calculates a numeric hash for a given string
+ *
+ * @param {string} str string to hash
+ *
+ * @return {number}
+ */
+export function hashCode(str) {
+    let hash = 0;
+    let i;
+    let chr;
+    if (str.length === 0) {
+        return hash;
+    }
+    for (i = 0; i < str.length; i++) {
+        chr = str.charCodeAt(i);
+        hash = ((hash << 5) - hash) + chr;
+        hash |= 0;
+    }
+    return Math.abs(hash);
+}

src/utils/Timer.js

@@ -0,0 +1,123 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/**
+A countdown timer, exposing a promise api.
+A timer starts in a non-started state,
+and needs to be started by calling `start()`` on it first.
+
+Timers can be `abort()`-ed which makes the promise reject prematurely.
+
+Once a timer is finished or aborted, it can't be started again
+(because the promise should not be replaced). Instead, create
+a new one through `clone()` or `cloneIfRun()`.
+*/
+export default class Timer {
+
+    constructor(timeout) {
+        this._timeout = timeout;
+        this._onTimeout = this._onTimeout.bind(this);
+        this._setNotStarted();
+    }
+
+    _setNotStarted() {
+        this._timerHandle = null;
+        this._startTs = null;
+        this._promise = new Promise((resolve, reject) => {
+            this._resolve = resolve;
+            this._reject = reject;
+        }).finally(() => {
+            this._timerHandle = null;
+        });
+    }
+
+    _onTimeout() {
+        const now = Date.now();
+        const elapsed = now - this._startTs;
+        if (elapsed >= this._timeout) {
+            this._resolve();
+            this._setNotStarted();
+        } else {
+            const delta = this._timeout - elapsed;
+            this._timerHandle = setTimeout(this._onTimeout, delta);
+        }
+    }
+
+    changeTimeout(timeout) {
+        if (timeout === this._timeout) {
+            return;
+        }
+        const isSmallerTimeout = timeout < this._timeout;
+        this._timeout = timeout;
+        if (this.isRunning() && isSmallerTimeout) {
+            clearTimeout(this._timerHandle);
+            this._onTimeout();
+        }
+    }
+
+    /**
+     * if not started before, starts the timer.
+     */
+    start() {
+        if (!this.isRunning()) {
+            this._startTs = Date.now();
+            this._timerHandle = setTimeout(this._onTimeout, this._timeout);
+        }
+        return this;
+    }
+
+    /**
+     * (re)start the timer. If it's running, reset the timeout. If not, start it.
+     */
+    restart() {
+        if (this.isRunning()) {
+            // don't clearTimeout here as this method
+            // can be called in fast succession,
+            // instead just take note and compare
+            // when the already running timeout expires
+            this._startTs = Date.now();
+            return this;
+        } else {
+            return this.start();
+        }
+    }
+
+    /**
+     * if the timer is running, abort it,
+     * and reject the promise for this timer.
+     */
+    abort() {
+        if (this.isRunning()) {
+            clearTimeout(this._timerHandle);
+            this._reject(new Error("Timer was aborted."));
+            this._setNotStarted();
+        }
+        return this;
+    }
+
+    /**
+     *promise that will resolve when the timer elapses,
+     *or is rejected when abort is called
+     *@return {Promise}
+     */
+    finished() {
+        return this._promise;
+    }
+
+    isRunning() {
+        return this._timerHandle !== null;
+    }
+}