diff --git a/.eslintignore.errorfiles b/.eslintignore.errorfiles index 42818244b3..430546d281 100644 --- a/.eslintignore.errorfiles +++ b/.eslintignore.errorfiles @@ -2,9 +2,7 @@ src/autocomplete/AutocompleteProvider.js src/autocomplete/Autocompleter.js -src/autocomplete/EmojiProvider.js src/autocomplete/UserProvider.js -src/CallHandler.js src/component-index.js src/components/structures/BottomLeftMenu.js src/components/structures/CompatibilityPage.js @@ -13,27 +11,22 @@ src/components/structures/HomePage.js src/components/structures/LeftPanel.js src/components/structures/LoggedInView.js src/components/structures/login/ForgotPassword.js -src/components/structures/login/Login.js -src/components/structures/login/Registration.js src/components/structures/LoginBox.js src/components/structures/MessagePanel.js src/components/structures/NotificationPanel.js src/components/structures/RoomDirectory.js src/components/structures/RoomStatusBar.js -src/components/structures/RoomSubList.js src/components/structures/RoomView.js src/components/structures/ScrollPanel.js src/components/structures/SearchBox.js src/components/structures/TimelinePanel.js src/components/structures/UploadBar.js +src/components/structures/UserSettings.js src/components/structures/ViewSource.js src/components/views/avatars/BaseAvatar.js -src/components/views/avatars/GroupAvatar.js src/components/views/avatars/MemberAvatar.js src/components/views/create_room/RoomAlias.js -src/components/views/dialogs/BugReportDialog.js src/components/views/dialogs/ChangelogDialog.js -src/components/views/dialogs/ChatCreateOrReuseDialog.js src/components/views/dialogs/DeactivateAccountDialog.js src/components/views/dialogs/SetPasswordDialog.js src/components/views/dialogs/UnknownDeviceDialog.js @@ -41,12 +34,12 @@ src/components/views/directory/NetworkDropdown.js src/components/views/elements/AddressSelector.js src/components/views/elements/DeviceVerifyButtons.js src/components/views/elements/DirectorySearchBox.js -src/components/views/elements/EditableText.js src/components/views/elements/ImageView.js src/components/views/elements/InlineSpinner.js src/components/views/elements/MemberEventListSummary.js src/components/views/elements/Spinner.js src/components/views/elements/TintableSvg.js +src/components/views/elements/UserInfo.js src/components/views/elements/UserSelector.js src/components/views/globals/MatrixToolbar.js src/components/views/globals/NewVersionBar.js @@ -65,7 +58,6 @@ src/components/views/room_settings/UrlPreviewSettings.js src/components/views/rooms/Autocomplete.js src/components/views/rooms/AuxPanel.js src/components/views/rooms/EntityTile.js -src/components/views/rooms/EventTile.js src/components/views/rooms/LinkPreviewWidget.js src/components/views/rooms/MemberDeviceInfo.js src/components/views/rooms/MemberInfo.js @@ -73,12 +65,11 @@ src/components/views/rooms/MemberList.js src/components/views/rooms/MemberTile.js src/components/views/rooms/MessageComposer.js src/components/views/rooms/MessageComposerInput.js +src/components/views/rooms/PinnedEventTile.js src/components/views/rooms/RoomDropTarget.js src/components/views/rooms/RoomList.js src/components/views/rooms/RoomPreviewBar.js src/components/views/rooms/RoomSettings.js -src/components/views/rooms/RoomTile.js -src/components/views/rooms/RoomTooltip.js src/components/views/rooms/SearchableEntityList.js src/components/views/rooms/SearchBar.js src/components/views/rooms/SearchResultTile.js @@ -86,12 +77,12 @@ src/components/views/rooms/TopUnreadMessagesBar.js src/components/views/rooms/UserTile.js src/components/views/settings/AddPhoneNumber.js src/components/views/settings/ChangeAvatar.js -src/components/views/settings/ChangeDisplayName.js src/components/views/settings/ChangePassword.js src/components/views/settings/DevicesPanel.js src/components/views/settings/IntegrationsManager.js src/components/views/settings/Notifications.js src/ContentMessages.js +src/GroupAddressPicker.js src/HtmlUtils.js src/ImageUtils.js src/languageHandler.js @@ -135,6 +126,7 @@ test/components/structures/TimelinePanel-test.js test/components/views/dialogs/InteractiveAuthDialog-test.js test/components/views/login/RegistrationForm-test.js test/components/views/rooms/MessageComposerInput-test.js +test/components/views/rooms/RoomSettings-test.js test/mock-clock.js test/notifications/ContentRules-test.js test/notifications/PushRuleVectorState-test.js diff --git a/CHANGELOG.md b/CHANGELOG.md index b161a9d908..8483e2a0a2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,187 @@ +Changes in [0.12.8](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.8) (2018-06-29) +===================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.8-rc.2...v0.12.8) + + * Revert "affix copyButton so that it doesn't get scrolled horizontally" + [\#2013](https://github.com/matrix-org/matrix-react-sdk/pull/2013) + * don't fire share dialog when clicking timestamp of event + [\#2017](https://github.com/matrix-org/matrix-react-sdk/pull/2017) + * when the user switches room, close room settings + [\#2019](https://github.com/matrix-org/matrix-react-sdk/pull/2019) + +Changes in [0.12.8-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.8-rc.2) (2018-06-22) +=============================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.8-rc.1...v0.12.8-rc.2) + + * slash got consumed in the consolidation + [\#1998](https://github.com/matrix-org/matrix-react-sdk/pull/1998) + +Changes in [0.12.8-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.8-rc.1) (2018-06-21) +=============================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.7...v0.12.8-rc.1) + + * Update from Weblate. + [\#1997](https://github.com/matrix-org/matrix-react-sdk/pull/1997) + * refactor, consolidate and improve SlashCommands + [\#1988](https://github.com/matrix-org/matrix-react-sdk/pull/1988) + * Take replies out of labs! + [\#1996](https://github.com/matrix-org/matrix-react-sdk/pull/1996) + * re-merge reset PR + [\#1987](https://github.com/matrix-org/matrix-react-sdk/pull/1987) + * once command has a space, strict match instead of fuzzy match + [\#1985](https://github.com/matrix-org/matrix-react-sdk/pull/1985) + * Fix matrix.to URL RegExp + [\#1986](https://github.com/matrix-org/matrix-react-sdk/pull/1986) + * Fix blank sticker picker + [\#1984](https://github.com/matrix-org/matrix-react-sdk/pull/1984) + * fix e2ee file/media stuff + [\#1972](https://github.com/matrix-org/matrix-react-sdk/pull/1972) + * right click for room tile context menu + [\#1978](https://github.com/matrix-org/matrix-react-sdk/pull/1978) + * only show m.room.message in FilePanel + [\#1983](https://github.com/matrix-org/matrix-react-sdk/pull/1983) + * improve command provider + [\#1981](https://github.com/matrix-org/matrix-react-sdk/pull/1981) + * affix copyButton so that it doesn't get scrolled horizontally + [\#1980](https://github.com/matrix-org/matrix-react-sdk/pull/1980) + * split continuation if there is a gap in conversation + [\#1979](https://github.com/matrix-org/matrix-react-sdk/pull/1979) + * fix a bunch of instances of react console spam + [\#1973](https://github.com/matrix-org/matrix-react-sdk/pull/1973) + * Track decryption success/failure rate with piwik + [\#1949](https://github.com/matrix-org/matrix-react-sdk/pull/1949) + * route matrix.to/#/+... links internally (not just group ids) + [\#1975](https://github.com/matrix-org/matrix-react-sdk/pull/1975) + * implement `hitting enter after Ctrl-K should switch to the first result` + [\#1976](https://github.com/matrix-org/matrix-react-sdk/pull/1976) + * Remove tag panel feature flag + [\#1970](https://github.com/matrix-org/matrix-react-sdk/pull/1970) + * QuestionDialog pass hasCancelButton to DialogButtons + [\#1968](https://github.com/matrix-org/matrix-react-sdk/pull/1968) + * check type before msgtype in the case of `m.sticker` with msgtype + [\#1965](https://github.com/matrix-org/matrix-react-sdk/pull/1965) + * apply roomlist searchFilter to aliases if it begins with a `#` + [\#1957](https://github.com/matrix-org/matrix-react-sdk/pull/1957) + * Share Dialog + [\#1948](https://github.com/matrix-org/matrix-react-sdk/pull/1948) + * make RoomTooltip generic and add ContextMenu&Tooltip to GroupInviteTile + [\#1950](https://github.com/matrix-org/matrix-react-sdk/pull/1950) + * Fix widgets re-appearing after being deleted + [\#1958](https://github.com/matrix-org/matrix-react-sdk/pull/1958) + * Fix crash on unspecified thumbnail info, and handle gracefully + [\#1967](https://github.com/matrix-org/matrix-react-sdk/pull/1967) + * fix styling of clearButton when its not there + [\#1964](https://github.com/matrix-org/matrix-react-sdk/pull/1964) + * Implement slightly magical CSS soln. to thumbnail sizing + [\#1912](https://github.com/matrix-org/matrix-react-sdk/pull/1912) + * Select audio output for WebRTC + [\#1932](https://github.com/matrix-org/matrix-react-sdk/pull/1932) + * move css rule to be more generic; remove overriden rule + [\#1962](https://github.com/matrix-org/matrix-react-sdk/pull/1962) + * improve tag panel accessibility and remove a no-op dispatch + [\#1960](https://github.com/matrix-org/matrix-react-sdk/pull/1960) + * Revert "Fix exception when opening dev tools" + [\#1963](https://github.com/matrix-org/matrix-react-sdk/pull/1963) + * fix message appears unencrypted while encrypting and not_sent + [\#1959](https://github.com/matrix-org/matrix-react-sdk/pull/1959) + * Fix exception when opening dev tools + [\#1961](https://github.com/matrix-org/matrix-react-sdk/pull/1961) + * show redacted stickers like other redacted messages + [\#1956](https://github.com/matrix-org/matrix-react-sdk/pull/1956) + * add mx_filterFlipColor to mx_MemberInfo_cancel img + [\#1951](https://github.com/matrix-org/matrix-react-sdk/pull/1951) + * don't set the displayname on registration as Synapse now does it + [\#1953](https://github.com/matrix-org/matrix-react-sdk/pull/1953) + * allow CreateRoom to scale properly horizontally + [\#1955](https://github.com/matrix-org/matrix-react-sdk/pull/1955) + * Keep context menus that extend downwards vertically on screen + [\#1952](https://github.com/matrix-org/matrix-react-sdk/pull/1952) + * re-run checkIfAlone if a member change occurred in the active room + [\#1947](https://github.com/matrix-org/matrix-react-sdk/pull/1947) + * Persist pinned message open-ness between room switches + [\#1935](https://github.com/matrix-org/matrix-react-sdk/pull/1935) + * Pinned message cosmetic improvements + [\#1933](https://github.com/matrix-org/matrix-react-sdk/pull/1933) + * Update sinon to 5.0.7 + [\#1916](https://github.com/matrix-org/matrix-react-sdk/pull/1916) + * re-run checkIfAlone if a member change occurred in the active room + [\#1946](https://github.com/matrix-org/matrix-react-sdk/pull/1946) + * Replace "Login as guest" with "Try the app first" on login page + [\#1937](https://github.com/matrix-org/matrix-react-sdk/pull/1937) + * kill stream when using gUM for permission to device labels to turn off + camera + [\#1931](https://github.com/matrix-org/matrix-react-sdk/pull/1931) + +Changes in [0.12.7](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.7) (2018-06-12) +===================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.7-rc.1...v0.12.7) + + * No changes since rc.1 + +Changes in [0.12.7-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.7-rc.1) (2018-06-06) +=============================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.6...v0.12.7-rc.1) + + * Update from Weblate. + [\#1944](https://github.com/matrix-org/matrix-react-sdk/pull/1944) + * Import react as React in src/components/views/elements/DNDTagTile.js + [\#1943](https://github.com/matrix-org/matrix-react-sdk/pull/1943) + * Fix click on faded left/right/middle panel -> close settings + [\#1940](https://github.com/matrix-org/matrix-react-sdk/pull/1940) + * Add null-guard to support browsers that don't support performance + [\#1942](https://github.com/matrix-org/matrix-react-sdk/pull/1942) + * Support third party integration managers in AppPermission + [\#1455](https://github.com/matrix-org/matrix-react-sdk/pull/1455) + * Update pinned messages in real time + [\#1934](https://github.com/matrix-org/matrix-react-sdk/pull/1934) + * Expose at-room power level setting + [\#1938](https://github.com/matrix-org/matrix-react-sdk/pull/1938) + +Changes in [0.12.6](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.6) (2018-05-25) +===================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.6-rc.1...v0.12.6) + + * No changes since v0.12.6-rc.1 + +Changes in [0.12.6-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.6-rc.1) (2018-05-24) +=============================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.5...v0.12.6-rc.1) + + * Add a "reload widget" button. + [\#1920](https://github.com/matrix-org/matrix-react-sdk/pull/1920) + * Make devTools styling more consistent and easier to edit event data. + [\#1923](https://github.com/matrix-org/matrix-react-sdk/pull/1923) + * Update from Weblate. + [\#1930](https://github.com/matrix-org/matrix-react-sdk/pull/1930) + * Cookie bar update + [\#1929](https://github.com/matrix-org/matrix-react-sdk/pull/1929) + * Message for leaving server notices room + [\#1928](https://github.com/matrix-org/matrix-react-sdk/pull/1928) + * More thorough check of IM URL validity. + [\#1927](https://github.com/matrix-org/matrix-react-sdk/pull/1927) + * Add usage data link to cookie bar + [\#1926](https://github.com/matrix-org/matrix-react-sdk/pull/1926) + * Change wording and appearance of Deactivate Account dialog + [\#1925](https://github.com/matrix-org/matrix-react-sdk/pull/1925) + * fix membership list ordering when presence is disabled. + [\#1924](https://github.com/matrix-org/matrix-react-sdk/pull/1924) + * Implement erasure option upon deactivation + [\#1922](https://github.com/matrix-org/matrix-react-sdk/pull/1922) + * Add cookie warning to widget warning (AppPermission) + [\#1921](https://github.com/matrix-org/matrix-react-sdk/pull/1921) + * Terms and Conditions dialog + [\#1919](https://github.com/matrix-org/matrix-react-sdk/pull/1919) + * improve privileged section users in room settings + [\#1902](https://github.com/matrix-org/matrix-react-sdk/pull/1902) + * Space between sentences in 'leave room' warning + [\#1918](https://github.com/matrix-org/matrix-react-sdk/pull/1918) + * Specify valid address types to "Start a chat" dialog + [\#1908](https://github.com/matrix-org/matrix-react-sdk/pull/1908) + * Implement opt-in analytics with cookie bar + [\#1906](https://github.com/matrix-org/matrix-react-sdk/pull/1906) + * Fix vector-im/riot-web#6523 Emoji rendering destroys paragraphs + [\#1910](https://github.com/matrix-org/matrix-react-sdk/pull/1910) + Changes in [0.12.5](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.5) (2018-05-17) ===================================================================================================== [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.4...v0.12.5) diff --git a/package-lock.json b/package-lock.json index f183f1635d..048fba30e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,9 +1,18 @@ { "name": "matrix-react-sdk", - "version": "0.12.2", + "version": "0.12.7", "lockfileVersion": 1, "requires": true, "dependencies": { + "@sinonjs/formatio": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz", + "integrity": "sha512-ls6CAMA6/5gG+O/IdsBcblvnd8qcO/l1TYoNeAzp3wcISOxlPXQEus0mLcdwazEkWjaBdaJ3TaxmNgCLWwvWzg==", + "dev": true, + "requires": { + "samsam": "1.3.0" + } + }, "accepts": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.3.tgz", @@ -44,14 +53,14 @@ "dev": true }, "ajv": { - "version": "5.2.3", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.2.3.tgz", - "integrity": "sha1-wG9Zh3jETGsWGrr+NGa4GtGBTtI=", + "version": "5.5.2", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz", + "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=", "requires": { "co": "4.6.0", - "fast-deep-equal": "1.0.0", - "json-schema-traverse": "0.3.1", - "json-stable-stringify": "1.0.1" + "fast-deep-equal": "1.1.0", + "fast-json-stable-stringify": "2.0.0", + "json-schema-traverse": "0.3.1" } }, "ajv-keywords": { @@ -238,9 +247,9 @@ "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=" }, "aws4": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz", - "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=" + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.7.0.tgz", + "integrity": "sha512-32NDda82rhwD9/JBCCkB+MRYDp0oSvlo2IL6rQWA10PQi7tDUM3eqMSltXmY+Oyl/7N3P3qNtAlv7X0d9bI28w==" }, "babel-cli": { "version": "6.26.0", @@ -1200,11 +1209,6 @@ "type-is": "1.6.15" } }, - "boom": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/boom/-/boom-4.3.1.tgz", - "integrity": "sha1-T4owBctKfjiJ90kDD9JbluAdLjE=" - }, "brace-expansion": { "version": "1.1.8", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz", @@ -1440,9 +1444,9 @@ } }, "combined-stream": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz", - "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=", + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz", + "integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=", "requires": { "delayed-stream": "1.0.0" } @@ -1580,21 +1584,6 @@ "object-assign": "4.1.1" } }, - "cryptiles": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-3.1.2.tgz", - "integrity": "sha1-qJ+7Ig9c4l7FboxKqKT9e1sNKf4=", - "requires": { - "boom": "5.2.0" - }, - "dependencies": { - "boom": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/boom/-/boom-5.2.0.tgz", - "integrity": "sha512-Z5BTk6ZRe4tXXQlkqftmsAUANpXmuwlsF5Oov8ThoMbQRzdGTA1ngYRW160GexgOgjsFOKJz0LYhoNi+2AMBUw==" - } - } - }, "crypto-browserify": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.3.0.tgz", @@ -1713,6 +1702,12 @@ "integrity": "sha1-gGZJMmzqp8qjMG112YXqJ0i6kTw=", "dev": true }, + "diff": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz", + "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==", + "dev": true + }, "doctrine": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.0.0.tgz", @@ -2393,9 +2388,14 @@ "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=" }, "fast-deep-equal": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz", - "integrity": "sha1-liVqO8l1WV6zbYLpkp0GDYk0Of8=" + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz", + "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=" + }, + "fast-json-stable-stringify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz", + "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=" }, "fast-levenshtein": { "version": "2.0.6", @@ -2616,24 +2616,15 @@ "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=" }, "form-data": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.1.tgz", - "integrity": "sha1-b7lPvXGIUwbXPRXMSX/kzE7NRL8=", + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.2.tgz", + "integrity": "sha1-SXBJi+YEwgwAXU9cI67NIda0kJk=", "requires": { "asynckit": "0.4.0", - "combined-stream": "1.0.5", + "combined-stream": "1.0.6", "mime-types": "2.1.17" } }, - "formatio": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/formatio/-/formatio-1.1.1.tgz", - "integrity": "sha1-XtPM1jZVEJc4NGXZlhmRAOhhYek=", - "dev": true, - "requires": { - "samsam": "1.1.2" - } - }, "fs-access": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/fs-access/-/fs-access-1.0.1.tgz", @@ -3679,7 +3670,7 @@ "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.0.3.tgz", "integrity": "sha1-ukAsJmGU8VlW7xXg/PJCmT9qff0=", "requires": { - "ajv": "5.2.3", + "ajv": "5.5.2", "har-schema": "2.0.0" } }, @@ -3730,16 +3721,6 @@ "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=", "dev": true }, - "hawk": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/hawk/-/hawk-6.0.2.tgz", - "integrity": "sha512-miowhl2+U7Qle4vdLqDdPt9m09K6yZhkLDTWGoUiUzrQCn+mHHSmfJgAyGaLRZbPmTqfFFjRV1QWCW0VWUJBbQ==", - "requires": { - "boom": "4.3.1", - "cryptiles": "3.1.2", - "sntp": "2.0.2" - } - }, "he": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz", @@ -3808,7 +3789,7 @@ "requires": { "assert-plus": "1.0.0", "jsprim": "1.4.1", - "sshpk": "1.13.1" + "sshpk": "1.14.2" } }, "https-browserify": { @@ -4221,6 +4202,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz", "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=", + "dev": true, "requires": { "jsonify": "0.0.0" } @@ -4245,7 +4227,8 @@ "jsonify": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz", - "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=" + "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=", + "dev": true }, "jsonpointer": { "version": "4.0.1", @@ -4273,6 +4256,12 @@ "array-includes": "3.0.3" } }, + "just-extend": { + "version": "1.1.27", + "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-1.1.27.tgz", + "integrity": "sha512-mJVp13Ix6gFo3SBAy9U/kL+oeZqzlYYYLQBwXVBlVzIsZwBqGREnOro24oC/8s8aox+rJhtZ2DiQof++IrkA+g==", + "dev": true + }, "karma": { "version": "1.7.1", "resolved": "https://registry.npmjs.org/karma/-/karma-1.7.1.tgz", @@ -4454,13 +4443,45 @@ } }, "linkifyjs": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-2.1.5.tgz", - "integrity": "sha512-8FqxPXQDLjI2nNHlM7eGewxE6DHvMbtiW0AiXzm0s4RkTwVZYRDTeVXkiRxLHTd4CuRBQY/JPtvtqJWdS7gHyA==", + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-2.1.6.tgz", + "integrity": "sha512-nA94bEM9rmt7Iu4OEIYSKpW+Dy6fhlBTjk2Bg9bFuxHQYcy+lWq2EleHb0rp/ev8oBO82vLHZctM5YlSR5DTzw==", "requires": { - "jquery": "3.2.1", - "react": "15.6.2", - "react-dom": "15.6.2" + "jquery": "3.3.1", + "react": "16.4.1", + "react-dom": "16.4.1" + }, + "dependencies": { + "jquery": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz", + "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==", + "optional": true + }, + "react": { + "version": "16.4.1", + "resolved": "https://registry.npmjs.org/react/-/react-16.4.1.tgz", + "integrity": "sha512-3GEs0giKp6E0Oh/Y9ZC60CmYgUPnp7voH9fbjWsvXtYFb4EWtgQub0ADSq0sJR0BbHc4FThLLtzlcFaFXIorwg==", + "optional": true, + "requires": { + "fbjs": "0.8.16", + "loose-envify": "1.3.1", + "object-assign": "4.1.1", + "prop-types": "15.6.0" + } + }, + "react-dom": { + "version": "16.4.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.4.1.tgz", + "integrity": "sha512-1Gin+wghF/7gl4Cqcvr1DxFX2Osz7ugxSwl6gBqCMpdrxHjIFUS7GYxrFftZ9Ln44FHw0JxCFD9YtZsrbR5/4A==", + "optional": true, + "requires": { + "fbjs": "0.8.16", + "loose-envify": "1.3.1", + "object-assign": "4.1.1", + "prop-types": "15.6.0" + } + } } }, "loader-utils": { @@ -4491,6 +4512,12 @@ "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=", "dev": true }, + "lodash.get": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz", + "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=", + "dev": true + }, "lodash.pickby": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/lodash.pickby/-/lodash.pickby-4.6.0.tgz", @@ -4534,10 +4561,9 @@ } }, "lolex": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/lolex/-/lolex-1.3.2.tgz", - "integrity": "sha1-fD2mL/yzDw9agKJWbKJORdigHzE=", - "dev": true + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/lolex/-/lolex-2.7.0.tgz", + "integrity": "sha512-uJkH2e0BVfU5KOJUevbTOtpDduooSarH5PopO+LfM/vZf8Z9sJzODqKev804JYM2i++ktJfUmC1le4LwFQ1VMg==" }, "longest": { "version": "1.0.1", @@ -4560,16 +4586,16 @@ "dev": true }, "matrix-js-sdk": { - "version": "0.10.1", - "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-0.10.1.tgz", - "integrity": "sha512-BLo+Okn2o///TyWBKtjFXvhlD32vGfr10eTE51hHx/jwaXO82VyGMzMi+IDPS4SDYUbvXI7PpamECeh9TXnV2w==", + "version": "0.10.4", + "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-0.10.4.tgz", + "integrity": "sha512-jmO08eml0mr+us2Xs9F9UD2U6gX/MVD20QEqrEt3p+cuZ043OEWCg6Ko8mR65P/JteqjXMz+TXOMmfcxLwCLFA==", "requires": { "another-json": "0.2.0", "babel-runtime": "6.26.0", "bluebird": "3.5.1", "browser-request": "0.3.3", "content-type": "1.0.4", - "request": "2.83.0" + "request": "2.87.0" } }, "matrix-mock-request": { @@ -4790,6 +4816,27 @@ "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=", "dev": true }, + "nise": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/nise/-/nise-1.3.3.tgz", + "integrity": "sha512-v1J/FLUB9PfGqZLGDBhQqODkbLotP0WtLo9R4EJY2PPu5f5Xg4o0rA8FDlmrjFSv9vBBKcfnOSpfYYuu5RTHqg==", + "dev": true, + "requires": { + "@sinonjs/formatio": "2.0.0", + "just-extend": "1.1.27", + "lolex": "2.6.0", + "path-to-regexp": "1.7.0", + "text-encoding": "0.6.4" + }, + "dependencies": { + "lolex": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/lolex/-/lolex-2.6.0.tgz", + "integrity": "sha512-e1UtIo1pbrIqEXib/yMjHciyqkng5lc0rrIbytgjmRgDR9+2ceNIAcwOWSgylRjoEP9VdVguCSRwnNmlbnOUwA==", + "dev": true + } + } + }, "node-fetch": { "version": "1.7.3", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", @@ -5093,6 +5140,23 @@ "integrity": "sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME=", "dev": true }, + "path-to-regexp": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz", + "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=", + "dev": true, + "requires": { + "isarray": "0.0.1" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", + "dev": true + } + } + }, "pbkdf2-compat": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz", @@ -5215,6 +5279,19 @@ "integrity": "sha1-ZZ3p8s+NzCehSBJ28gU3cnI4LnM=", "dev": true }, + "qr.js": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz", + "integrity": "sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=" + }, + "qrcode-react": { + "version": "0.1.16", + "resolved": "https://registry.npmjs.org/qrcode-react/-/qrcode-react-0.1.16.tgz", + "integrity": "sha512-FK+QCfFqCQMSxUE1byzglERJQkwKqXYvYMCS+/Ad2zACJOfoHkHHtRqsQQPji7lfb1y1qCXLvL+3eP1hAfg8Ng==", + "requires": { + "qr.js": "0.0.0" + } + }, "qs": { "version": "6.5.1", "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz", @@ -5557,19 +5634,18 @@ } }, "request": { - "version": "2.83.0", - "resolved": "https://registry.npmjs.org/request/-/request-2.83.0.tgz", - "integrity": "sha512-lR3gD69osqm6EYLk9wB/G1W/laGWjzH90t1vEa2xuxHD5KUrSzp9pUSfTm+YC5Nxt2T8nMPEvKlhbQayU7bgFw==", + "version": "2.87.0", + "resolved": "https://registry.npmjs.org/request/-/request-2.87.0.tgz", + "integrity": "sha512-fcogkm7Az5bsS6Sl0sibkbhcKsnyon/jV1kF3ajGmF0c8HrttdKTPRT9hieOaQHA5HEq6r8OyWOo/o781C1tNw==", "requires": { "aws-sign2": "0.7.0", - "aws4": "1.6.0", + "aws4": "1.7.0", "caseless": "0.12.0", - "combined-stream": "1.0.5", + "combined-stream": "1.0.6", "extend": "3.0.1", "forever-agent": "0.6.1", - "form-data": "2.3.1", + "form-data": "2.3.2", "har-validator": "5.0.3", - "hawk": "6.0.2", "http-signature": "1.2.0", "is-typedarray": "1.0.0", "isstream": "0.1.2", @@ -5579,10 +5655,9 @@ "performance-now": "2.1.0", "qs": "6.5.1", "safe-buffer": "5.1.1", - "stringstream": "0.0.5", - "tough-cookie": "2.3.3", + "tough-cookie": "2.3.4", "tunnel-agent": "0.6.0", - "uuid": "3.1.0" + "uuid": "3.3.0" } }, "require-json": { @@ -5697,10 +5772,15 @@ "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==" }, + "safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" + }, "samsam": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/samsam/-/samsam-1.1.2.tgz", - "integrity": "sha1-vsEf3IOp/aBjQBIQ5AF2wwJNFWc=", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/samsam/-/samsam-1.3.0.tgz", + "integrity": "sha512-1HwIYD/8UlOtFS3QO3w7ey+SdSDFE4HRNLZoZRYVQefrOY3l17epswImeB1ijgJFQJodIaHcwkp3r/myBjFVbg==", "dev": true }, "sanitize-html": { @@ -5770,15 +5850,41 @@ } }, "sinon": { - "version": "1.17.7", - "resolved": "https://registry.npmjs.org/sinon/-/sinon-1.17.7.tgz", - "integrity": "sha1-RUKk9JugxFwF6y6d2dID4rjv4L8=", + "version": "5.0.7", + "resolved": "https://registry.npmjs.org/sinon/-/sinon-5.0.7.tgz", + "integrity": "sha512-GvNLrwpvLZ8jIMZBUhHGUZDq5wlUdceJWyHvZDmqBxnjazpxY1L0FNbGBX6VpcOEoQ8Q4XMWFzm2myJMvx+VjA==", "dev": true, "requires": { - "formatio": "1.1.1", - "lolex": "1.3.2", - "samsam": "1.1.2", - "util": "0.10.3" + "@sinonjs/formatio": "2.0.0", + "diff": "3.5.0", + "lodash.get": "4.4.2", + "lolex": "2.6.0", + "nise": "1.3.3", + "supports-color": "5.4.0", + "type-detect": "4.0.8" + }, + "dependencies": { + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "dev": true + }, + "lolex": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/lolex/-/lolex-2.6.0.tgz", + "integrity": "sha512-e1UtIo1pbrIqEXib/yMjHciyqkng5lc0rrIbytgjmRgDR9+2ceNIAcwOWSgylRjoEP9VdVguCSRwnNmlbnOUwA==", + "dev": true + }, + "supports-color": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz", + "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", + "dev": true, + "requires": { + "has-flag": "3.0.0" + } + } } }, "slash": { @@ -5793,11 +5899,6 @@ "integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=", "dev": true }, - "sntp": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/sntp/-/sntp-2.0.2.tgz", - "integrity": "sha1-UGQRDwr4X3z9t9a2ekACjOUrSys=" - }, "socket.io": { "version": "1.7.3", "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-1.7.3.tgz", @@ -5995,9 +6096,9 @@ "integrity": "sha1-Nr54Mgr+WAH2zqPueLblqrlA6gw=" }, "sshpk": { - "version": "1.13.1", - "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.13.1.tgz", - "integrity": "sha1-US322mKHFEMW3EwY/hzx2UBzm+M=", + "version": "1.14.2", + "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.14.2.tgz", + "integrity": "sha1-xvxhZIo9nE52T9P8306hBeSSupg=", "requires": { "asn1": "0.2.3", "assert-plus": "1.0.0", @@ -6006,6 +6107,7 @@ "ecc-jsbn": "0.1.1", "getpass": "0.1.7", "jsbn": "0.1.1", + "safer-buffer": "2.1.2", "tweetnacl": "0.14.5" } }, @@ -6062,11 +6164,6 @@ "safe-buffer": "5.1.1" } }, - "stringstream": { - "version": "0.0.5", - "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz", - "integrity": "sha1-TkhM1N5aC7vuGORjB3EKioFiGHg=" - }, "strip-ansi": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", @@ -6167,6 +6264,12 @@ "integrity": "sha1-KcNXB8K3DlDQdIK10gLo7URtr9Q=", "dev": true }, + "text-encoding": { + "version": "0.6.4", + "resolved": "https://registry.npmjs.org/text-encoding/-/text-encoding-0.6.4.tgz", + "integrity": "sha1-45mpgiV6J22uQou5KEXLcb3CbRk=", + "dev": true + }, "text-encoding-utf-8": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/text-encoding-utf-8/-/text-encoding-utf-8-1.0.1.tgz", @@ -6233,9 +6336,9 @@ "dev": true }, "tough-cookie": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.3.tgz", - "integrity": "sha1-C2GKVWW23qkL80JdBNVe3EdadWE=", + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz", + "integrity": "sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==", "requires": { "punycode": "1.4.1" } @@ -6281,6 +6384,12 @@ "prelude-ls": "1.1.2" } }, + "type-detect": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz", + "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==", + "dev": true + }, "type-is": { "version": "1.6.15", "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.15.tgz", @@ -6401,9 +6510,9 @@ "dev": true }, "uuid": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz", - "integrity": "sha512-DIWtzUkw04M4k3bf1IcpS2tngXEL26YUD2M0tMDUpnUrz2hgzUBlD55a4FjdLGPvfHxS6uluGWvaVEqgBcVa+g==" + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.0.tgz", + "integrity": "sha512-ijO9N2xY/YaOqQ5yz5c4sy2ZjWmA6AR6zASb/gdpeKZ8+948CxwfMW9RrKVk5may6ev8c0/Xguu32e2Llelpqw==" }, "v8flags": { "version": "2.1.1", diff --git a/package.json b/package.json index a65b6e2640..d639a4e51c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "matrix-react-sdk", - "version": "0.12.5", + "version": "0.12.8", "description": "SDK for matrix.org using React", "author": "matrix.org", "repository": { @@ -70,13 +70,14 @@ "glob": "^5.0.14", "highlight.js": "^9.0.0", "isomorphic-fetch": "^2.2.1", - "linkifyjs": "^2.1.3", + "linkifyjs": "^2.1.6", "lodash": "^4.13.1", "lolex": "2.3.2", - "matrix-js-sdk": "0.10.2", + "matrix-js-sdk": "0.10.5", "optimist": "^0.6.1", "pako": "^1.0.5", "prop-types": "^15.5.8", + "qrcode-react": "^0.1.16", "querystring": "^0.2.0", "react": "^15.6.0", "react-addons-css-transition-group": "15.3.2", @@ -135,7 +136,7 @@ "react-addons-test-utils": "^15.4.0", "require-json": "0.0.1", "rimraf": "^2.4.3", - "sinon": "^1.17.3", + "sinon": "^5.0.7", "source-map-loader": "^0.2.3", "walk": "^2.3.9", "webpack": "^1.12.14" diff --git a/res/css/_components.scss b/res/css/_components.scss index 50e8eb11d1..173939e143 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -34,6 +34,7 @@ @import "./views/dialogs/_ConfirmUserActionDialog.scss"; @import "./views/dialogs/_CreateGroupDialog.scss"; @import "./views/dialogs/_CreateRoomDialog.scss"; +@import "./views/dialogs/_DeactivateAccountDialog.scss"; @import "./views/dialogs/_DevtoolsDialog.scss"; @import "./views/dialogs/_EncryptedEventDialog.scss"; @import "./views/dialogs/_GroupAddressPicker.scss"; @@ -41,6 +42,7 @@ @import "./views/dialogs/_SetEmailDialog.scss"; @import "./views/dialogs/_SetMxIdDialog.scss"; @import "./views/dialogs/_SetPasswordDialog.scss"; +@import "./views/dialogs/_ShareDialog.scss"; @import "./views/dialogs/_UnknownDeviceDialog.scss"; @import "./views/directory/_NetworkDropdown.scss"; @import "./views/elements/_AccessibleButton.scss"; diff --git a/res/css/structures/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss index a0191b92cf..7474c3d107 100644 --- a/res/css/structures/_ContextualMenu.scss +++ b/res/css/structures/_ContextualMenu.scss @@ -16,7 +16,7 @@ limitations under the License. .mx_ContextualMenu_wrapper { position: fixed; - z-index: 2000; + z-index: 5000; } .mx_ContextualMenu_background { @@ -26,7 +26,7 @@ limitations under the License. width: 100%; height: 100%; opacity: 1.0; - z-index: 2000; + z-index: 5000; } .mx_ContextualMenu { @@ -37,7 +37,7 @@ limitations under the License. position: absolute; padding: 6px; font-size: 14px; - z-index: 2001; + z-index: 5001; } .mx_ContextualMenu.mx_ContextualMenu_right { diff --git a/res/css/structures/_RoomStatusBar.scss b/res/css/structures/_RoomStatusBar.scss index ca7431eac2..2a9cc9f6c7 100644 --- a/res/css/structures/_RoomStatusBar.scss +++ b/res/css/structures/_RoomStatusBar.scss @@ -113,6 +113,8 @@ limitations under the License. } .mx_RoomStatusBar_connectionLostBar { + display: flex; + margin-top: 19px; min-height: 58px; } @@ -132,6 +134,7 @@ limitations under the License. color: $primary-fg-color; font-size: 13px; opacity: 0.5; + padding-bottom: 20px; } .mx_RoomStatusBar_resend_link { diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index a2863460ad..6798f75a14 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -91,6 +91,10 @@ limitations under the License. background-color: $accent-color; } +.mx_RoomSubList_label .mx_RoomSubList_badge:hover { + filter: brightness($focus-brightness); +} + /* .collapsed .mx_RoomSubList_badge { display: none; diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss index ab1d4feac3..415aafd924 100644 --- a/res/css/structures/_TagPanel.scss +++ b/res/css/structures/_TagPanel.scss @@ -17,7 +17,6 @@ limitations under the License. .mx_TagPanel { flex: 0 0 60px; background-color: $tertiary-accent-color; - cursor: pointer; display: flex; flex-direction: column; @@ -25,7 +24,11 @@ limitations under the License. justify-content: space-between; } -.mx_TagPanel .mx_TagPanel_clearButton { +.mx_TagPanel_items_selected { + cursor: pointer; +} + +.mx_TagPanel .mx_TagPanel_clearButton_container { /* Constant height within flex mx_TagPanel */ height: 70px; width: 60px; diff --git a/res/css/views/dialogs/_CreateRoomDialog.scss b/res/css/views/dialogs/_CreateRoomDialog.scss index 888f147d21..05d5bfcebf 100644 --- a/res/css/views/dialogs/_CreateRoomDialog.scss +++ b/res/css/views/dialogs/_CreateRoomDialog.scss @@ -23,6 +23,10 @@ limitations under the License. padding-bottom: 12px; } +.mx_CreateRoomDialog_input_container { + padding-right: 20px; +} + .mx_CreateRoomDialog_input { font-size: 15px; border-radius: 3px; @@ -30,4 +34,5 @@ limitations under the License. padding: 9px; color: $primary-fg-color; background-color: $primary-bg-color; + width: 100%; } diff --git a/res/css/views/dialogs/_DeactivateAccountDialog.scss b/res/css/views/dialogs/_DeactivateAccountDialog.scss new file mode 100644 index 0000000000..dc76da5b15 --- /dev/null +++ b/res/css/views/dialogs/_DeactivateAccountDialog.scss @@ -0,0 +1,23 @@ +/* +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. +*/ + +.mx_DeactivateAccountDialog .mx_Dialog_content { + margin-bottom: 30px; +} + +.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section { + margin-top: 60px; +} diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss index 8918373ecf..a4a868bd11 100644 --- a/res/css/views/dialogs/_DevtoolsDialog.scss +++ b/res/css/views/dialogs/_DevtoolsDialog.scss @@ -14,8 +14,13 @@ See the License for the specific language governing permissions and limitations under the License. */ +.mx_DevTools_content { + margin: 10px 0; +} + .mx_DevTools_RoomStateExplorer_button, .mx_DevTools_RoomStateExplorer_query { margin-bottom: 10px; + width: 100%; } .mx_DevTools_label_left { @@ -38,7 +43,6 @@ limitations under the License. .mx_DevTools_inputLabelCell { - padding-bottom: 21px; display: table-cell; font-weight: bold; padding-right: 24px; @@ -46,7 +50,6 @@ limitations under the License. .mx_DevTools_inputCell { display: table-cell; - padding-bottom: 21px; width: 240px; } @@ -62,6 +65,14 @@ limitations under the License. font-size: 16px; } +.mx_DevTools_textarea { + font-size: 12px; + max-width: 624px; + min-height: 250px; + padding: 10px; + width: 100%; +} + .mx_DevTools_tgl { display: none; diff --git a/res/css/views/dialogs/_ShareDialog.scss b/res/css/views/dialogs/_ShareDialog.scss new file mode 100644 index 0000000000..116bef8dfd --- /dev/null +++ b/res/css/views/dialogs/_ShareDialog.scss @@ -0,0 +1,89 @@ +/* +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. +*/ + +.mx_ShareDialog { + // this is to center the content + padding-right: 58px; +} + +.mx_ShareDialog hr { + margin-top: 25px; + margin-bottom: 25px; + border-color: $light-fg-color; +} + +.mx_ShareDialog_content { + margin: 10px 0; +} + +.mx_ShareDialog_matrixto { + display: flex; + justify-content: space-between; + border-radius: 5px; + border: solid 1px $light-fg-color; + margin-bottom: 10px; + margin-top: 30px; + padding: 10px; +} + +.mx_ShareDialog_matrixto a { + text-decoration: none; +} + +.mx_ShareDialog_matrixto_link { + flex-shrink: 1; + overflow: hidden; + text-overflow: ellipsis; +} + +.mx_ShareDialog_matrixto_copy { + flex-shrink: 0; + cursor: pointer; + margin-left: 20px; + display: inherit; +} +.mx_ShareDialog_matrixto_copy > div { + background-image: url($copy-button-url); + margin-left: 5px; + width: 20px; + height: 20px; +} + +.mx_ShareDialog_split { + display: flex; + flex-wrap: wrap; +} + +.mx_ShareDialog_qrcode_container { + float: left; + background-color: #ffffff; + padding: 5px; // makes qr code more readable in dark theme + border-radius: 5px; + height: 256px; + width: 256px; + margin-right: 64px; +} + +.mx_ShareDialog_social_container { + display: inline-block; + width: 299px; +} + +.mx_ShareDialog_social_icon { + display: inline-grid; + margin-right: 10px; + margin-bottom: 10px; +} diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss index 5c390af30a..cea4b7897d 100644 --- a/res/css/views/elements/_RichText.scss +++ b/res/css/views/elements/_RichText.scss @@ -4,6 +4,7 @@ .mx_UserPill, .mx_RoomPill, +.mx_GroupPill, .mx_AtRoomPill { border-radius: 16px; display: inline-block; @@ -13,7 +14,8 @@ } .mx_EventTile_body .mx_UserPill, -.mx_EventTile_body .mx_RoomPill { +.mx_EventTile_body .mx_RoomPill, +.mx_EventTile_body .mx_GroupPill { cursor: pointer; } @@ -39,14 +41,25 @@ /* More specific to override `.markdown-body a` color */ .mx_EventTile_content .markdown-body a.mx_RoomPill, -.mx_RoomPill { +.mx_EventTile_content .markdown-body a.mx_GroupPill, +.mx_RoomPill, +.mx_GroupPill { color: $accent-fg-color; background-color: $rte-room-pill-color; padding-right: 5px; } +/* More specific to override `.markdown-body a` color */ +.mx_EventTile_content .markdown-body a.mx_GroupPill, +.mx_GroupPill { + color: $accent-fg-color; + background-color: $rte-group-pill-color; + padding-right: 5px; +} + .mx_UserPill .mx_BaseAvatar, .mx_RoomPill .mx_BaseAvatar, +.mx_GroupPill .mx_BaseAvatar, .mx_AtRoomPill .mx_BaseAvatar { position: relative; left: -3px; diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss index 1c809f0743..4c763c5991 100644 --- a/res/css/views/messages/_MImageBody.scss +++ b/res/css/views/messages/_MImageBody.scss @@ -20,5 +20,29 @@ limitations under the License. } .mx_MImageBody_thumbnail { - max-width: 100%; -} \ No newline at end of file + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; +} + +.mx_MImageBody_thumbnail_container { + // Prevent the padding-bottom (added inline in MImageBody.js) from + // affecting elements below the container. + overflow: hidden; + + // Make sure the _thumbnail is positioned relative to the _container + position: relative; +} + +.mx_MImageBody_thumbnail_spinner { + position: absolute; + left: 50%; + top: 50%; +} + +// Inner img and TintableSvg should be centered around 0, 0 +.mx_MImageBody_thumbnail_spinner > * { + transform: translate(-50%, -50%); +} diff --git a/res/css/views/messages/_MStickerBody.scss b/res/css/views/messages/_MStickerBody.scss index 3e6bbe5aa4..e4977bcc34 100644 --- a/res/css/views/messages/_MStickerBody.scss +++ b/res/css/views/messages/_MStickerBody.scss @@ -14,33 +14,11 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_MStickerBody { - display: block; - margin-right: 34px; - min-height: 110px; - padding: 20px 0; +.mx_MStickerBody_wrapper { + padding: 20px 0px; } -.mx_MStickerBody_image_container { - display: inline-block; - position: relative; -} - -.mx_MStickerBody_image { - max-width: 100%; - opacity: 0; -} - -.mx_MStickerBody_image_visible { - opacity: 1; -} - -.mx_MStickerBody_placeholder { - position: absolute; - opacity: 1; -} - -.mx_MStickerBody_placeholder_invisible { - transition: 500ms; - opacity: 0; +.mx_MStickerBody_tooltip { + position: absolute; + top: 50%; } diff --git a/res/css/views/messages/_MTextBody.scss b/res/css/views/messages/_MTextBody.scss index fcf397fd2d..93a89ad1b7 100644 --- a/res/css/views/messages/_MTextBody.scss +++ b/res/css/views/messages/_MTextBody.scss @@ -17,8 +17,3 @@ limitations under the License. .mx_MTextBody { white-space: pre-wrap; } - -.mx_MTextBody pre{ - overflow-y: auto; - max-height: 30vh; -} diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 67c8b8b2d8..c727182369 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -391,6 +391,7 @@ limitations under the License. .mx_EventTile_content .markdown-body pre { overflow-x: overlay; overflow-y: visible; + max-height: 30vh; } .mx_EventTile_content .markdown-body code { @@ -399,6 +400,12 @@ limitations under the License. color: #333; } +.mx_EventTile_pre_container { + // For correct positioning of _copyButton (See TextualBody) + position: relative; +} + +// Inserted adjacent to 
 blocks, (See TextualBody)
 .mx_EventTile_copyButton {
     position: absolute;
     display: inline-block;
@@ -412,7 +419,6 @@ limitations under the License.
 }
 
 .mx_EventTile_body pre {
-    position: relative;
     border: 1px solid transparent;
 }
 
@@ -421,7 +427,7 @@ limitations under the License.
     border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
 }
 
-.mx_EventTile_body pre:hover .mx_EventTile_copyButton
+.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton
 {
     visibility: visible;
 }
diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss
index 3eb445d239..e84240a705 100644
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@@ -70,6 +70,7 @@ limitations under the License.
     flex: 1;
     display: flex;
     flex-direction: column;
+    cursor: text;
 }
 
 .mx_MessageComposer_input {
diff --git a/res/css/views/rooms/_PinnedEventTile.scss b/res/css/views/rooms/_PinnedEventTile.scss
index ca790ef8f0..f7417272b6 100644
--- a/res/css/views/rooms/_PinnedEventTile.scss
+++ b/res/css/views/rooms/_PinnedEventTile.scss
@@ -25,26 +25,29 @@ limitations under the License.
     background-color: $event-selected-color;
 }
 
-.mx_PinnedEventTile .mx_PinnedEventTile_sender {
+.mx_PinnedEventTile .mx_PinnedEventTile_sender,
+.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
     color: #868686;
     font-size: 0.8em;
     vertical-align: top;
-    display: block;
+    display: inline-block;
     padding-bottom: 3px;
 }
 
-.mx_PinnedEventTile .mx_EventTile_content {
-    margin-left: 50px;
-    position: relative;
-    top: 0;
-    left: 0;
+.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
+    padding-left: 15px;
+    display: none;
 }
 
-.mx_PinnedEventTile .mx_BaseAvatar {
+.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar {
     float: left;
     margin-right: 10px;
 }
 
+.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp {
+    display: inline-block;
+}
+
 .mx_PinnedEventTile:hover .mx_PinnedEventTile_actions {
     display: block;
 }
@@ -63,5 +66,12 @@ limitations under the License.
 
 .mx_PinnedEventTile_gotoButton {
     display: inline-block;
-    font-size: 0.8em;
+    font-size: 0.7em; // Smaller text to avoid conflicting with the layout
 }
+
+.mx_PinnedEventTile_message {
+    margin-left: 50px;
+    position: relative;
+    top: 0;
+    left: 0;
+}
\ No newline at end of file
diff --git a/res/img/button-refresh.svg b/res/img/button-refresh.svg
new file mode 100644
index 0000000000..b4990a2147
--- /dev/null
+++ b/res/img/button-refresh.svg
@@ -0,0 +1,12 @@
+
+
+
+
+
+
diff --git a/res/img/e2e-encrypting.svg b/res/img/e2e-encrypting.svg
new file mode 100644
index 0000000000..469611cc8d
--- /dev/null
+++ b/res/img/e2e-encrypting.svg
@@ -0,0 +1,12 @@
+
+
+
+48BF5D32-306C-4B20-88EB-24B1F743CAC9
+Created with sketchtool.
+
+
+    
+        
+    
+
+
diff --git a/res/img/e2e-not_sent.svg b/res/img/e2e-not_sent.svg
new file mode 100644
index 0000000000..fca79ae547
--- /dev/null
+++ b/res/img/e2e-not_sent.svg
@@ -0,0 +1,12 @@
+
+
+
+48BF5D32-306C-4B20-88EB-24B1F743CAC9
+Created with sketchtool.
+
+
+    
+        
+    
+
+
diff --git a/res/img/icons-share.svg b/res/img/icons-share.svg
new file mode 100644
index 0000000000..b27616d5d5
--- /dev/null
+++ b/res/img/icons-share.svg
@@ -0,0 +1,6 @@
+
+
+
+	
+
+
diff --git a/res/img/matrix-m.svg b/res/img/matrix-m.svg
new file mode 100644
index 0000000000..ccb1df0fc5
--- /dev/null
+++ b/res/img/matrix-m.svg
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
diff --git a/res/img/social/email-1.png b/res/img/social/email-1.png
new file mode 100644
index 0000000000..193cb659da
Binary files /dev/null and b/res/img/social/email-1.png differ
diff --git a/res/img/social/facebook.png b/res/img/social/facebook.png
new file mode 100644
index 0000000000..457ef761a1
Binary files /dev/null and b/res/img/social/facebook.png differ
diff --git a/res/img/social/linkedin.png b/res/img/social/linkedin.png
new file mode 100644
index 0000000000..4c92adb56b
Binary files /dev/null and b/res/img/social/linkedin.png differ
diff --git a/res/img/social/reddit.png b/res/img/social/reddit.png
new file mode 100644
index 0000000000..1310168470
Binary files /dev/null and b/res/img/social/reddit.png differ
diff --git a/res/img/social/twitter-2.png b/res/img/social/twitter-2.png
new file mode 100644
index 0000000000..9f6e7c602b
Binary files /dev/null and b/res/img/social/twitter-2.png differ
diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss
index 5d5f5d7c90..55c761e8d9 100644
--- a/res/themes/light/css/_base.scss
+++ b/res/themes/light/css/_base.scss
@@ -97,6 +97,7 @@ $voip-accept-color: #80f480;
 $rte-bg-color: #e9e9e9;
 $rte-code-bg-color: rgba(0, 0, 0, 0.04);
 $rte-room-pill-color: #aaa;
+$rte-group-pill-color: #aaa;
 
 // ********************
 
diff --git a/src/Analytics.js b/src/Analytics.js
index ec8234eb83..d85d635b28 100644
--- a/src/Analytics.js
+++ b/src/Analytics.js
@@ -39,9 +39,17 @@ function getRedactedHash(hash) {
     return hash.replace(hashRegex, "#/$1");
 }
 
-// Return the current origin and hash separated with a `/`. This does not include query parameters.
+// Return the current origin, path and hash separated with a `/`. This does
+// not include query parameters.
 function getRedactedUrl() {
-    const { origin, pathname, hash } = window.location;
+    const { origin, hash } = window.location;
+    let { pathname } = window.location;
+
+    // Redact paths which could contain unexpected PII
+    if (origin.startsWith('file://')) {
+        pathname = "//";
+    }
+
     return origin + pathname + getRedactedHash(hash);
 }
 
@@ -49,34 +57,42 @@ const customVariables = {
     'App Platform': {
         id: 1,
         expl: _td('The platform you\'re on'),
+        example: 'Electron Platform',
     },
     'App Version': {
         id: 2,
         expl: _td('The version of Riot.im'),
+        example: '15.0.0',
     },
     'User Type': {
         id: 3,
         expl: _td('Whether or not you\'re logged in (we don\'t record your user name)'),
+        example: 'Logged In',
     },
     'Chosen Language': {
         id: 4,
         expl: _td('Your language of choice'),
+        example: 'en',
     },
     'Instance': {
         id: 5,
         expl: _td('Which officially provided instance you are using, if any'),
+        example: 'app',
     },
     'RTE: Uses Richtext Mode': {
         id: 6,
         expl: _td('Whether or not you\'re using the Richtext mode of the Rich Text Editor'),
+        example: 'off',
     },
     'Homeserver URL': {
         id: 7,
         expl: _td('Your homeserver\'s URL'),
+        example: 'https://matrix.org',
     },
     'Identity Server URL': {
         id: 8,
         expl: _td('Your identity server\'s URL'),
+        example: 'https://vector.im',
     },
 };
 
@@ -183,9 +199,9 @@ class Analytics {
         this._paq.push(['trackPageView']);
     }
 
-    trackEvent(category, action, name) {
+    trackEvent(category, action, name, value) {
         if (this.disabled) return;
-        this._paq.push(['trackEvent', category, action, name]);
+        this._paq.push(['trackEvent', category, action, name, value]);
     }
 
     logout() {
@@ -218,8 +234,19 @@ class Analytics {
     }
 
     showDetailsModal() {
-        const Tracker = window.Piwik.getAsyncTracker();
-        const rows = Object.values(customVariables).map((v) => Tracker.getCustomVariable(v.id)).filter(Boolean);
+        let rows = [];
+        if (window.Piwik) {
+            const Tracker = window.Piwik.getAsyncTracker();
+            rows = Object.values(customVariables).map((v) => Tracker.getCustomVariable(v.id)).filter(Boolean);
+        } else {
+            // Piwik may not have been enabled, so show example values
+            rows = Object.keys(customVariables).map(
+                (k) => [
+                    k,
+                    _t('e.g. %(exampleValue)s', { exampleValue: customVariables[k].example }),
+                ],
+            );
+        }
 
         const resolution = `${window.screen.width}x${window.screen.height}`;
         const otherVariables = [
@@ -247,7 +274,7 @@ class Analytics {
                 
                     { rows.map((row) => 
-                        
+                        { row[1] !== undefined &&  }
                     ) }
                     { otherVariables.map((item, index) =>
                         
diff --git a/src/CallHandler.js b/src/CallHandler.js
index fd56d7f1b1..7403483e36 100644
--- a/src/CallHandler.js
+++ b/src/CallHandler.js
@@ -1,6 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 New Vector 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.
@@ -60,6 +60,8 @@ import { _t } from './languageHandler';
 import Matrix from 'matrix-js-sdk';
 import dis from './dispatcher';
 import { showUnknownDeviceDialogForCalls } from './cryptodevices';
+import SettingsStore from "./settings/SettingsStore";
+import WidgetUtils from './utils/WidgetUtils';
 
 global.mxCalls = {
     //room_id: MatrixCall
@@ -123,7 +125,7 @@ function _setCallListeners(call) {
                 description: _t(
                     "There are unknown devices in this room: "+
                     "if you proceed without verifying them, it will be "+
-                    "possible for someone to eavesdrop on your call."
+                    "possible for someone to eavesdrop on your call.",
                 ),
                 button: _t('Review Devices'),
                 onFinished: function(confirmed) {
@@ -246,66 +248,58 @@ function _onAction(payload) {
 
     switch (payload.action) {
         case 'place_call':
-            if (module.exports.getAnyActiveCall()) {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createTrackedDialog('Call Handler', 'Existing Call', ErrorDialog, {
-                    title: _t('Existing Call'),
-                    description: _t('You are already in a call.'),
-                });
-                return; // don't allow >1 call to be placed.
-            }
+            {
+                if (module.exports.getAnyActiveCall()) {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createTrackedDialog('Call Handler', 'Existing Call', ErrorDialog, {
+                        title: _t('Existing Call'),
+                        description: _t('You are already in a call.'),
+                    });
+                    return; // don't allow >1 call to be placed.
+                }
 
-            // if the runtime env doesn't do VoIP, whine.
-            if (!MatrixClientPeg.get().supportsVoip()) {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createTrackedDialog('Call Handler', 'VoIP is unsupported', ErrorDialog, {
-                    title: _t('VoIP is unsupported'),
-                    description: _t('You cannot place VoIP calls in this browser.'),
-                });
-                return;
-            }
+                // if the runtime env doesn't do VoIP, whine.
+                if (!MatrixClientPeg.get().supportsVoip()) {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createTrackedDialog('Call Handler', 'VoIP is unsupported', ErrorDialog, {
+                        title: _t('VoIP is unsupported'),
+                        description: _t('You cannot place VoIP calls in this browser.'),
+                    });
+                    return;
+                }
 
-            var room = MatrixClientPeg.get().getRoom(payload.room_id);
-            if (!room) {
-                console.error("Room %s does not exist.", payload.room_id);
-                return;
-            }
+                const room = MatrixClientPeg.get().getRoom(payload.room_id);
+                if (!room) {
+                    console.error("Room %s does not exist.", payload.room_id);
+                    return;
+                }
 
-            var members = room.getJoinedMembers();
-            if (members.length <= 1) {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createTrackedDialog('Call Handler', 'Cannot place call with self', ErrorDialog, {
-                    description: _t('You cannot place a call with yourself.'),
-                });
-                return;
-            } else if (members.length === 2) {
-                console.log("Place %s call in %s", payload.type, payload.room_id);
-                const call = Matrix.createNewMatrixCall(MatrixClientPeg.get(), payload.room_id);
-                placeCall(call);
-            } else { // > 2
-                dis.dispatch({
-                    action: "place_conference_call",
-                    room_id: payload.room_id,
-                    type: payload.type,
-                    remote_element: payload.remote_element,
-                    local_element: payload.local_element,
-                });
+                const members = room.getJoinedMembers();
+                if (members.length <= 1) {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createTrackedDialog('Call Handler', 'Cannot place call with self', ErrorDialog, {
+                        description: _t('You cannot place a call with yourself.'),
+                    });
+                    return;
+                } else if (members.length === 2) {
+                    console.log("Place %s call in %s", payload.type, payload.room_id);
+                    const call = Matrix.createNewMatrixCall(MatrixClientPeg.get(), payload.room_id);
+                    placeCall(call);
+                } else { // > 2
+                    dis.dispatch({
+                        action: "place_conference_call",
+                        room_id: payload.room_id,
+                        type: payload.type,
+                        remote_element: payload.remote_element,
+                        local_element: payload.local_element,
+                    });
+                }
             }
             break;
         case 'place_conference_call':
             console.log("Place conference call in %s", payload.room_id);
-            if (!ConferenceHandler) {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createTrackedDialog('Call Handler', 'Conference call unsupported client', ErrorDialog, {
-                    description: _t('Conference calls are not supported in this client'),
-                });
-            } else if (!MatrixClientPeg.get().supportsVoip()) {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createTrackedDialog('Call Handler', 'VoIP is unsupported', ErrorDialog, {
-                    title: _t('VoIP is unsupported'),
-                    description: _t('You cannot place VoIP calls in this browser.'),
-                });
-            } else if (MatrixClientPeg.get().isRoomEncrypted(payload.room_id)) {
+
+            if (MatrixClientPeg.get().isRoomEncrypted(payload.room_id)) {
                 // Conference calls are implemented by sending the media to central
                 // server which combines the audio from all the participants together
                 // into a single stream. This is incompatible with end-to-end encryption
@@ -316,47 +310,75 @@ function _onAction(payload) {
                 Modal.createTrackedDialog('Call Handler', 'Conference calls unsupported e2e', ErrorDialog, {
                     description: _t('Conference calls are not supported in encrypted rooms'),
                 });
+                return;
+            }
+
+            if (SettingsStore.isFeatureEnabled('feature_jitsi')) {
+                _startCallApp(payload.room_id, payload.type);
             } else {
-                const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-                Modal.createTrackedDialog('Call Handler', 'Conference calling in development', QuestionDialog, {
-                    title: _t('Warning!'),
-                    description: _t('Conference calling is in development and may not be reliable.'),
-                    onFinished: (confirm)=>{
-                        if (confirm) {
-                            ConferenceHandler.createNewMatrixCall(
-                                MatrixClientPeg.get(), payload.room_id,
-                            ).done(function(call) {
-                                placeCall(call);
-                            }, function(err) {
-                                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                                console.error("Conference call failed: " + err);
-                                Modal.createTrackedDialog('Call Handler', 'Failed to set up conference call', ErrorDialog, {
-                                    title: _t('Failed to set up conference call'),
-                                    description: _t('Conference call failed.') + ' ' + ((err && err.message) ? err.message : ''),
+                if (!ConferenceHandler) {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createTrackedDialog('Call Handler', 'Conference call unsupported client', ErrorDialog, {
+                        description: _t('Conference calls are not supported in this client'),
+                    });
+                } else if (!MatrixClientPeg.get().supportsVoip()) {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createTrackedDialog('Call Handler', 'VoIP is unsupported', ErrorDialog, {
+                        title: _t('VoIP is unsupported'),
+                        description: _t('You cannot place VoIP calls in this browser.'),
+                    });
+                } else {
+                    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+                    Modal.createTrackedDialog('Call Handler', 'Conference calling in development', QuestionDialog, {
+                        title: _t('Warning!'),
+                        description: _t('Conference calling is in development and may not be reliable.'),
+                        onFinished: (confirm)=>{
+                            if (confirm) {
+                                ConferenceHandler.createNewMatrixCall(
+                                    MatrixClientPeg.get(), payload.room_id,
+                                ).done(function(call) {
+                                    placeCall(call);
+                                }, function(err) {
+                                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                                    console.error("Conference call failed: " + err);
+                                    Modal.createTrackedDialog(
+                                        'Call Handler',
+                                        'Failed to set up conference call',
+                                        ErrorDialog,
+                                        {
+                                            title: _t('Failed to set up conference call'),
+                                            description: (
+                                                _t('Conference call failed.') +
+                                                ' ' + ((err && err.message) ? err.message : '')
+                                            ),
+                                        },
+                                    );
                                 });
-                            });
-                        }
-                    },
-                });
+                            }
+                        },
+                    });
+                }
             }
             break;
         case 'incoming_call':
-            if (module.exports.getAnyActiveCall()) {
-                // ignore multiple incoming calls. in future, we may want a line-1/line-2 setup.
-                // we avoid rejecting with "busy" in case the user wants to answer it on a different device.
-                // in future we could signal a "local busy" as a warning to the caller.
-                // see https://github.com/vector-im/vector-web/issues/1964
-                return;
-            }
+            {
+                if (module.exports.getAnyActiveCall()) {
+                    // ignore multiple incoming calls. in future, we may want a line-1/line-2 setup.
+                    // we avoid rejecting with "busy" in case the user wants to answer it on a different device.
+                    // in future we could signal a "local busy" as a warning to the caller.
+                    // see https://github.com/vector-im/vector-web/issues/1964
+                    return;
+                }
 
-            // if the runtime env doesn't do VoIP, stop here.
-            if (!MatrixClientPeg.get().supportsVoip()) {
-                return;
-            }
+                // if the runtime env doesn't do VoIP, stop here.
+                if (!MatrixClientPeg.get().supportsVoip()) {
+                    return;
+                }
 
-            var call = payload.call;
-            _setCallListeners(call);
-            _setCallState(call, call.roomId, "ringing");
+                const call = payload.call;
+                _setCallListeners(call);
+                _setCallState(call, call.roomId, "ringing");
+            }
             break;
         case 'hangup':
             if (!calls[payload.room_id]) {
@@ -378,6 +400,71 @@ function _onAction(payload) {
             break;
     }
 }
+
+function _startCallApp(roomId, type) {
+    dis.dispatch({
+        action: 'appsDrawer',
+        show: true,
+    });
+
+    const room = MatrixClientPeg.get().getRoom(roomId);
+    if (!room) {
+        console.error("Attempted to start conference call widget in unknown room: " + roomId);
+        return;
+    }
+
+    const currentJitsiWidgets = WidgetUtils.getRoomWidgets(room).filter((ev) => {
+        return ev.getContent().type === 'jitsi';
+    });
+    if (currentJitsiWidgets.length > 0) {
+        console.warn(
+            "Refusing to start conference call widget in " + roomId +
+            " a conference call widget is already present",
+        );
+        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+
+        Modal.createTrackedDialog('Already have Jitsi Widget', '', ErrorDialog, {
+            title: _t('Call in Progress'),
+            description: _t('A call is already in progress!'),
+        });
+        return;
+    }
+
+    // This inherits its poor naming from the field of the same name that goes into
+    // the event. It's just a random string to make the Jitsi URLs unique.
+    const widgetSessionId = Math.random().toString(36).substring(2);
+    const confId = room.roomId.replace(/[^A-Za-z0-9]/g, '') + widgetSessionId;
+    // NB. we can't just encodeURICompoent all of these because the $ signs need to be there
+    // (but currently the only thing that needs encoding is the confId)
+    const queryString = [
+        'confId='+encodeURIComponent(confId),
+        'isAudioConf='+(type === 'voice' ? 'true' : 'false'),
+        'displayName=$matrix_display_name',
+        'avatarUrl=$matrix_avatar_url',
+        'email=$matrix_user_id',
+    ].join('&');
+    const widgetUrl = (
+        'https://scalar.vector.im/api/widgets' +
+        '/jitsi.html?' +
+        queryString
+    );
+
+    const widgetData = { widgetSessionId };
+
+    const widgetId = (
+        'jitsi_' +
+        MatrixClientPeg.get().credentials.userId +
+        '_' +
+        Date.now()
+    );
+
+    WidgetUtils.setRoomWidget(roomId, widgetId, 'jitsi', widgetUrl, 'Jitsi', widgetData).then(() => {
+        console.log('Jitsi widget added');
+    }).catch((e) => {
+        console.error(e);
+    });
+}
+
 // FIXME: Nasty way of making sure we only register
 // with the dispatcher once
 if (!global.mxCallHandler) {
diff --git a/src/CallMediaHandler.js b/src/CallMediaHandler.js
index cdc5c61921..2330f86b99 100644
--- a/src/CallMediaHandler.js
+++ b/src/CallMediaHandler.js
@@ -22,34 +22,44 @@ export default {
         // Only needed for Electron atm, though should work in modern browsers
         // once permission has been granted to the webapp
         return navigator.mediaDevices.enumerateDevices().then(function(devices) {
-            const audioIn = [];
-            const videoIn = [];
+            const audiooutput = [];
+            const audioinput = [];
+            const videoinput = [];
 
             if (devices.some((device) => !device.label)) return false;
 
             devices.forEach((device) => {
                 switch (device.kind) {
-                    case 'audioinput': audioIn.push(device); break;
-                    case 'videoinput': videoIn.push(device); break;
+                    case 'audiooutput': audiooutput.push(device); break;
+                    case 'audioinput': audioinput.push(device); break;
+                    case 'videoinput': videoinput.push(device); break;
                 }
             });
 
             // console.log("Loaded WebRTC Devices", mediaDevices);
             return {
-                audioinput: audioIn,
-                videoinput: videoIn,
+                audiooutput,
+                audioinput,
+                videoinput,
             };
         }, (error) => { console.log('Unable to refresh WebRTC Devices: ', error); });
     },
 
     loadDevices: function() {
+        const audioOutDeviceId = SettingsStore.getValue("webrtc_audiooutput");
         const audioDeviceId = SettingsStore.getValue("webrtc_audioinput");
         const videoDeviceId = SettingsStore.getValue("webrtc_videoinput");
 
+        Matrix.setMatrixCallAudioOutput(audioOutDeviceId);
         Matrix.setMatrixCallAudioInput(audioDeviceId);
         Matrix.setMatrixCallVideoInput(videoDeviceId);
     },
 
+    setAudioOutput: function(deviceId) {
+        SettingsStore.setValue("webrtc_audiooutput", null, SettingLevel.DEVICE, deviceId);
+        Matrix.setMatrixCallAudioOutput(deviceId);
+    },
+
     setAudioInput: function(deviceId) {
         SettingsStore.setValue("webrtc_audioinput", null, SettingLevel.DEVICE, deviceId);
         Matrix.setMatrixCallAudioInput(deviceId);
diff --git a/src/ContentMessages.js b/src/ContentMessages.js
index 7fe625f8b9..fd21977108 100644
--- a/src/ContentMessages.js
+++ b/src/ContentMessages.js
@@ -243,6 +243,7 @@ function uploadFile(matrixClient, roomId, file, progressHandler) {
             const blob = new Blob([encryptResult.data]);
             return matrixClient.uploadContent(blob, {
                 progressHandler: progressHandler,
+                includeFilename: false,
             }).then(function(url) {
                 // If the attachment is encrypted then bundle the URL along
                 // with the information needed to decrypt the attachment and
diff --git a/src/DecryptionFailureTracker.js b/src/DecryptionFailureTracker.js
new file mode 100644
index 0000000000..b02a5e937b
--- /dev/null
+++ b/src/DecryptionFailureTracker.js
@@ -0,0 +1,202 @@
+/*
+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.
+*/
+
+export class DecryptionFailure {
+    constructor(failedEventId, errorCode) {
+        this.failedEventId = failedEventId;
+        this.errorCode = errorCode;
+        this.ts = Date.now();
+    }
+}
+
+export class DecryptionFailureTracker {
+    // Array of items of type DecryptionFailure. Every `CHECK_INTERVAL_MS`, this list
+    // is checked for failures that happened > `GRACE_PERIOD_MS` ago. Those that did
+    // are accumulated in `failureCounts`.
+    failures = [];
+
+    // A histogram of the number of failures that will be tracked at the next tracking
+    // interval, split by failure error code.
+    failureCounts = {
+        // [errorCode]: 42
+    };
+
+    // Event IDs of failures that were tracked previously
+    trackedEventHashMap = {
+        // [eventId]: true
+    };
+
+    // Set to an interval ID when `start` is called
+    checkInterval = null;
+    trackInterval = null;
+
+    // Spread the load on `Analytics` by tracking at a low frequency, `TRACK_INTERVAL_MS`.
+    static TRACK_INTERVAL_MS = 60000;
+
+    // Call `checkFailures` every `CHECK_INTERVAL_MS`.
+    static CHECK_INTERVAL_MS = 5000;
+
+    // Give events a chance to be decrypted by waiting `GRACE_PERIOD_MS` before counting
+    // the failure in `failureCounts`.
+    static GRACE_PERIOD_MS = 60000;
+
+    /**
+     * Create a new DecryptionFailureTracker.
+     *
+     * Call `eventDecrypted(event, err)` on this instance when an event is decrypted.
+     *
+     * Call `start()` to start the tracker, and `stop()` to stop tracking.
+     *
+     * @param {function} fn The tracking function, which will be called when failures
+     * are tracked. The function should have a signature `(count, trackedErrorCode) => {...}`,
+     * where `count` is the number of failures and `errorCode` matches the `.code` of
+     * provided DecryptionError errors (by default, unless `errorCodeMapFn` is specified.
+     * @param {function?} errorCodeMapFn The function used to map error codes to the
+     * trackedErrorCode. If not provided, the `.code` of errors will be used.
+     */
+    constructor(fn, errorCodeMapFn) {
+        if (!fn || typeof fn !== 'function') {
+            throw new Error('DecryptionFailureTracker requires tracking function');
+        }
+
+        if (errorCodeMapFn && typeof errorCodeMapFn !== 'function') {
+            throw new Error('DecryptionFailureTracker second constructor argument should be a function');
+        }
+
+        this._trackDecryptionFailure = fn;
+        this._mapErrorCode = errorCodeMapFn;
+    }
+
+    // loadTrackedEventHashMap() {
+    //     this.trackedEventHashMap = JSON.parse(localStorage.getItem('mx-decryption-failure-event-id-hashes')) || {};
+    // }
+
+    // saveTrackedEventHashMap() {
+    //     localStorage.setItem('mx-decryption-failure-event-id-hashes', JSON.stringify(this.trackedEventHashMap));
+    // }
+
+    eventDecrypted(e, err) {
+        if (err) {
+            this.addDecryptionFailure(new DecryptionFailure(e.getId(), err.code));
+        } else {
+            // Could be an event in the failures, remove it
+            this.removeDecryptionFailuresForEvent(e);
+        }
+    }
+
+    addDecryptionFailure(failure) {
+        this.failures.push(failure);
+    }
+
+    removeDecryptionFailuresForEvent(e) {
+        this.failures = this.failures.filter((f) => f.failedEventId !== e.getId());
+    }
+
+    /**
+     * Start checking for and tracking failures.
+     */
+    start() {
+        this.checkInterval = setInterval(
+            () => this.checkFailures(Date.now()),
+            DecryptionFailureTracker.CHECK_INTERVAL_MS,
+        );
+
+        this.trackInterval = setInterval(
+            () => this.trackFailures(),
+            DecryptionFailureTracker.TRACK_INTERVAL_MS,
+        );
+    }
+
+    /**
+     * Clear state and stop checking for and tracking failures.
+     */
+    stop() {
+        clearInterval(this.checkInterval);
+        clearInterval(this.trackInterval);
+
+        this.failures = [];
+        this.failureCounts = {};
+    }
+
+    /**
+     * Mark failures that occured before nowTs - GRACE_PERIOD_MS as failures that should be
+     * tracked. Only mark one failure per event ID.
+     * @param {number} nowTs the timestamp that represents the time now.
+     */
+    checkFailures(nowTs) {
+        const failuresGivenGrace = [];
+        const failuresNotReady = [];
+        while (this.failures.length > 0) {
+            const f = this.failures.shift();
+            if (nowTs > f.ts + DecryptionFailureTracker.GRACE_PERIOD_MS) {
+                failuresGivenGrace.push(f);
+            } else {
+                failuresNotReady.push(f);
+            }
+        }
+        this.failures = failuresNotReady;
+
+        // Only track one failure per event
+        const dedupedFailuresMap = failuresGivenGrace.reduce(
+            (map, failure) => {
+                if (!this.trackedEventHashMap[failure.failedEventId]) {
+                    return map.set(failure.failedEventId, failure);
+                } else {
+                    return map;
+                }
+            },
+            // Use a map to preseve key ordering
+            new Map(),
+        );
+
+        const trackedEventIds = [...dedupedFailuresMap.keys()];
+
+        this.trackedEventHashMap = trackedEventIds.reduce(
+            (result, eventId) => ({...result, [eventId]: true}),
+            this.trackedEventHashMap,
+        );
+
+        // Commented out for now for expediency, we need to consider unbound nature of storing
+        // this in localStorage
+        // this.saveTrackedEventHashMap();
+
+        const dedupedFailures = dedupedFailuresMap.values();
+
+        this._aggregateFailures(dedupedFailures);
+    }
+
+    _aggregateFailures(failures) {
+        for (const failure of failures) {
+            const errorCode = failure.errorCode;
+            this.failureCounts[errorCode] = (this.failureCounts[errorCode] || 0) + 1;
+        }
+    }
+
+    /**
+     * If there are failures that should be tracked, call the given trackDecryptionFailure
+     * function with the number of failures that should be tracked.
+     */
+    trackFailures() {
+        for (const errorCode of Object.keys(this.failureCounts)) {
+            if (this.failureCounts[errorCode] > 0) {
+                const trackedErrorCode = this._mapErrorCode ? this._mapErrorCode(errorCode) : errorCode;
+
+                this._trackDecryptionFailure(this.failureCounts[errorCode], trackedErrorCode);
+                this.failureCounts[errorCode] = 0;
+            }
+        }
+    }
+}
diff --git a/src/GroupAddressPicker.js b/src/GroupAddressPicker.js
index 91380b6eed..532ee23c25 100644
--- a/src/GroupAddressPicker.js
+++ b/src/GroupAddressPicker.js
@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import React from 'react';
 import Modal from './Modal';
 import sdk from './';
 import MultiInviter from './utils/MultiInviter';
diff --git a/src/HtmlUtils.js b/src/HtmlUtils.js
index 607686d46d..ccfecb8081 100644
--- a/src/HtmlUtils.js
+++ b/src/HtmlUtils.js
@@ -217,10 +217,17 @@ const sanitizeHtmlParams = {
                     m = attribs.href.match(linkifyMatrix.MATRIXTO_URL_PATTERN);
                     if (m) {
                         const entity = m[1];
-                        if (entity[0] === '@') {
-                            attribs.href = '#/user/' + entity;
-                        } else if (entity[0] === '#' || entity[0] === '!') {
-                            attribs.href = '#/room/' + entity;
+                        switch (entity[0]) {
+                            case '@':
+                                attribs.href = '#/user/' + entity;
+                                break;
+                            case '+':
+                                attribs.href = '#/group/' + entity;
+                                break;
+                            case '#':
+                            case '!':
+                                attribs.href = '#/room/' + entity;
+                                break;
                         }
                         delete attribs.target;
                     }
diff --git a/src/Modal.js b/src/Modal.js
index 2565d5c73b..06a96824a7 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -81,7 +81,11 @@ class ModalManager {
     constructor() {
         this._counter = 0;
 
-        /** list of the modals we have stacked up, with the most recent at [0] */
+        // The modal to prioritise over all others. If this is set, only show
+        // this modal. Remove all other modals from the stack when this modal
+        // is closed.
+        this._priorityModal = null;
+        // A list of the modals we have stacked up, with the most recent at [0]
         this._modals = [
             /* {
                elem: React component for this dialog
@@ -105,18 +109,18 @@ class ModalManager {
         return container;
     }
 
-    createTrackedDialog(analyticsAction, analyticsInfo, Element, props, className) {
+    createTrackedDialog(analyticsAction, analyticsInfo, ...rest) {
         Analytics.trackEvent('Modal', analyticsAction, analyticsInfo);
-        return this.createDialog(Element, props, className);
+        return this.createDialog(...rest);
     }
 
-    createDialog(Element, props, className) {
-        return this.createDialogAsync((cb) => {cb(Element);}, props, className);
+    createDialog(Element, ...rest) {
+        return this.createDialogAsync((cb) => {cb(Element);}, ...rest);
     }
 
-    createTrackedDialogAsync(analyticsAction, analyticsInfo, loader, props, className) {
+    createTrackedDialogAsync(analyticsAction, analyticsInfo, ...rest) {
         Analytics.trackEvent('Modal', analyticsAction, analyticsInfo);
-        return this.createDialogAsync(loader, props, className);
+        return this.createDialogAsync(...rest);
     }
 
     /**
@@ -137,8 +141,13 @@ class ModalManager {
      *    component. (We will also pass an 'onFinished' property.)
      *
      * @param {String} className   CSS class to apply to the modal wrapper
+     *
+     * @param {boolean} isPriorityModal if true, this modal will be displayed regardless
+     *                                  of other modals that are currently in the stack.
+     *                                  Also, when closed, all modals will be removed
+     *                                  from the stack.
      */
-    createDialogAsync(loader, props, className) {
+    createDialogAsync(loader, props, className, isPriorityModal) {
         const self = this;
         const modal = {};
 
@@ -151,6 +160,14 @@ class ModalManager {
             if (i >= 0) {
                 self._modals.splice(i, 1);
             }
+
+            if (self._priorityModal === modal) {
+                self._priorityModal = null;
+
+                // XXX: This is destructive
+                self._modals = [];
+            }
+
             self._reRender();
         };
 
@@ -167,7 +184,12 @@ class ModalManager {
         modal.onFinished = props ? props.onFinished : null;
         modal.className = className;
 
-        this._modals.unshift(modal);
+        if (isPriorityModal) {
+            // XXX: This is destructive
+            this._priorityModal = modal;
+        } else {
+            this._modals.unshift(modal);
+        }
 
         this._reRender();
         return {close: closeDialog};
@@ -188,7 +210,7 @@ class ModalManager {
     }
 
     _reRender() {
-        if (this._modals.length == 0) {
+        if (this._modals.length == 0 && !this._priorityModal) {
             // If there is no modal to render, make all of Riot available
             // to screen reader users again
             dis.dispatch({
@@ -205,7 +227,7 @@ class ModalManager {
             action: 'aria_hide_main_app',
         });
 
-        const modal = this._modals[0];
+        const modal = this._priorityModal ? this._priorityModal : this._modals[0];
         const dialog = (
             

                 

diff --git a/src/Notifier.js b/src/Notifier.js
index b823c4df05..80e8be1084 100644
--- a/src/Notifier.js
+++ b/src/Notifier.js
@@ -170,15 +170,15 @@ const Notifier = {
                     value: true,
                 });
             });
-            // clear the notifications_hidden flag, so that if notifications are
-            // disabled again in the future, we will show the banner again.
-            this.setToolbarHidden(true);
         } else {
             dis.dispatch({
                 action: "notifier_enabled",
                 value: false,
             });
         }
+        // set the notifications_hidden flag, as the user has knowingly interacted
+        // with the setting we shouldn't nag them any further
+        this.setToolbarHidden(true);
     },
 
     isEnabled: function() {
diff --git a/src/ScalarMessaging.js b/src/ScalarMessaging.js
index 9457e6ccfb..3325044b84 100644
--- a/src/ScalarMessaging.js
+++ b/src/ScalarMessaging.js
@@ -1,6 +1,7 @@
 /*
 Copyright 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations 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.
@@ -231,11 +232,12 @@ Example:
 }
 */
 
-const SdkConfig = require('./SdkConfig');
-const MatrixClientPeg = require("./MatrixClientPeg");
-const MatrixEvent = require("matrix-js-sdk").MatrixEvent;
-const dis = require("./dispatcher");
-const Widgets = require('./utils/widgets');
+import SdkConfig from './SdkConfig';
+import MatrixClientPeg from './MatrixClientPeg';
+import { MatrixEvent } from 'matrix-js-sdk';
+import dis from './dispatcher';
+import WidgetUtils from './utils/WidgetUtils';
+import RoomViewStore from './stores/RoomViewStore';
 import { _t } from './languageHandler';
 
 function sendResponse(event, res) {
@@ -286,51 +288,6 @@ function inviteUser(event, roomId, userId) {
     });
 }
 
-/**
- * Returns a promise that resolves when a widget with the given
- * ID has been added as a user widget (ie. the accountData event
- * arrives) or rejects after a timeout
- *
- * @param {string} widgetId The ID of the widget to wait for
- * @param {boolean} add True to wait for the widget to be added,
- *     false to wait for it to be deleted.
- * @returns {Promise} that resolves when the widget is available
- */
-function waitForUserWidget(widgetId, add) {
-    return new Promise((resolve, reject) => {
-        const currentAccountDataEvent = MatrixClientPeg.get().getAccountData('m.widgets');
-
-        // Tests an account data event, returning true if it's in the state
-        // we're waiting for it to be in
-        function eventInIntendedState(ev) {
-            if (!ev || !currentAccountDataEvent.getContent()) return false;
-            if (add) {
-                return ev.getContent()[widgetId] !== undefined;
-            } else {
-                return ev.getContent()[widgetId] === undefined;
-            }
-        }
-
-        if (eventInIntendedState(currentAccountDataEvent)) {
-            resolve();
-            return;
-        }
-
-        function onAccountData(ev) {
-            if (eventInIntendedState(currentAccountDataEvent)) {
-                MatrixClientPeg.get().removeListener('accountData', onAccountData);
-                clearTimeout(timerId);
-                resolve();
-            }
-        }
-        const timerId = setTimeout(() => {
-            MatrixClientPeg.get().removeListener('accountData', onAccountData);
-            reject(new Error("Timed out waiting for widget ID " + widgetId + " to appear"));
-        }, 10000);
-        MatrixClientPeg.get().on('accountData', onAccountData);
-    });
-}
-
 function setWidget(event, roomId) {
     const widgetId = event.data.widget_id;
     const widgetType = event.data.type;
@@ -339,12 +296,6 @@ function setWidget(event, roomId) {
     const widgetData = event.data.data; // optional
     const userWidget = event.data.userWidget;
 
-    const client = MatrixClientPeg.get();
-    if (!client) {
-        sendError(event, _t('You need to be logged in.'));
-        return;
-    }
-
     // both adding/removing widgets need these checks
     if (!widgetId || widgetUrl === undefined) {
         sendError(event, _t("Unable to create widget."), new Error("Missing required widget fields."));
@@ -371,42 +322,8 @@ function setWidget(event, roomId) {
         }
     }
 
-    let content = {
-        type: widgetType,
-        url: widgetUrl,
-        name: widgetName,
-        data: widgetData,
-    };
-
     if (userWidget) {
-        const client = MatrixClientPeg.get();
-        const userWidgets = Widgets.getUserWidgets();
-
-        // Delete existing widget with ID
-        try {
-            delete userWidgets[widgetId];
-        } catch (e) {
-            console.error(`$widgetId is non-configurable`);
-        }
-
-        // Add new widget / update
-        if (widgetUrl !== null) {
-            userWidgets[widgetId] = {
-                content: content,
-                sender: client.getUserId(),
-                state_key: widgetId,
-                type: 'm.widget',
-                id: widgetId,
-            };
-        }
-
-        // This starts listening for when the echo comes back from the server
-        // since the widget won't appear added until this happens. If we don't
-        // wait for this, the action will complete but if the user is fast enough,
-        // the widget still won't actually be there.
-        client.setAccountData('m.widgets', userWidgets).then(() => {
-            return waitForUserWidget(widgetId, widgetUrl !== null);
-        }).then(() => {
+        WidgetUtils.setUserWidget(widgetId, widgetType, widgetUrl, widgetName, widgetData).then(() => {
             sendResponse(event, {
                 success: true,
             });
@@ -419,15 +336,7 @@ function setWidget(event, roomId) {
         if (!roomId) {
             sendError(event, _t('Missing roomId.'), null);
         }
-
-        if (widgetUrl === null) { // widget is being deleted
-            content = {};
-        }
-        // TODO - Room widgets need to be moved to 'm.widget' state events
-        // https://docs.google.com/document/d/1uPF7XWY_dXTKVKV7jZQ2KmsI19wn9-kFRgQ1tFQP7wQ/edit?usp=sharing
-        client.sendStateEvent(roomId, "im.vector.modular.widgets", content, widgetId).done(() => {
-            // XXX: We should probably wait for the echo of the state event to come back from the server,
-            // as we do with user widgets.
+        WidgetUtils.setRoomWidget(roomId, widgetId, widgetType, widgetUrl, widgetName, widgetData).then(() => {
             sendResponse(event, {
                 success: true,
             });
@@ -451,21 +360,13 @@ function getWidgets(event, roomId) {
             sendError(event, _t('This room is not recognised.'));
             return;
         }
-        // TODO - Room widgets need to be moved to 'm.widget' state events
-        // https://docs.google.com/document/d/1uPF7XWY_dXTKVKV7jZQ2KmsI19wn9-kFRgQ1tFQP7wQ/edit?usp=sharing
-        const stateEvents = room.currentState.getStateEvents("im.vector.modular.widgets");
-        // Only return widgets which have required fields
-        if (room) {
-            stateEvents.forEach((ev) => {
-                if (ev.getContent().type && ev.getContent().url) {
-                    widgetStateEvents.push(ev.event); // return the raw event
-                }
-            });
-        }
+        // XXX: This gets the raw event object (I think because we can't
+        // send the MatrixEvent over postMessage?)
+        widgetStateEvents = WidgetUtils.getRoomWidgets(room).map((ev) => ev.event);
     }
 
     // Add user widgets (not linked to a specific room)
-    const userWidgets = Widgets.getUserWidgetsArray();
+    const userWidgets = WidgetUtils.getUserWidgetsArray();
     widgetStateEvents = widgetStateEvents.concat(userWidgets);
 
     sendResponse(event, widgetStateEvents);
@@ -637,19 +538,6 @@ function returnStateEvent(event, roomId, eventType, stateKey) {
     sendResponse(event, stateEvent.getContent());
 }
 
-let currentRoomId = null;
-let currentRoomAlias = null;
-
-// Listen for when a room is viewed
-dis.register(onAction);
-function onAction(payload) {
-    if (payload.action !== "view_room") {
-        return;
-    }
-    currentRoomId = payload.room_id;
-    currentRoomAlias = payload.room_alias;
-}
-
 const onMessage = function(event) {
     if (!event.origin) { // stupid chrome
         event.origin = event.originalEvent.origin;
@@ -700,80 +588,63 @@ const onMessage = function(event) {
             return;
         }
     }
-    let promise = Promise.resolve(currentRoomId);
-    if (!currentRoomId) {
-        if (!currentRoomAlias) {
-            sendError(event, _t('Must be viewing a room'));
-            return;
-        }
-        // no room ID but there is an alias, look it up.
-        console.log("Looking up alias " + currentRoomAlias);
-        promise = MatrixClientPeg.get().getRoomIdForAlias(currentRoomAlias).then((res) => {
-            return res.room_id;
-        });
+
+    if (roomId !== RoomViewStore.getRoomId()) {
+        sendError(event, _t('Room %(roomId)s not visible', {roomId: roomId}));
+        return;
     }
 
-    promise.then((viewingRoomId) => {
-        if (roomId !== viewingRoomId) {
-            sendError(event, _t('Room %(roomId)s not visible', {roomId: roomId}));
-            return;
-        }
+    // Get and set room-based widgets
+    if (event.data.action === "get_widgets") {
+        getWidgets(event, roomId);
+        return;
+    } else if (event.data.action === "set_widget") {
+        setWidget(event, roomId);
+        return;
+    }
 
-        // Get and set room-based widgets
-        if (event.data.action === "get_widgets") {
-            getWidgets(event, roomId);
-            return;
-        } else if (event.data.action === "set_widget") {
-            setWidget(event, roomId);
-            return;
-        }
+    // These APIs don't require userId
+    if (event.data.action === "join_rules_state") {
+        getJoinRules(event, roomId);
+        return;
+    } else if (event.data.action === "set_plumbing_state") {
+        setPlumbingState(event, roomId, event.data.status);
+        return;
+    } else if (event.data.action === "get_membership_count") {
+        getMembershipCount(event, roomId);
+        return;
+    } else if (event.data.action === "get_room_enc_state") {
+        getRoomEncState(event, roomId);
+        return;
+    } else if (event.data.action === "can_send_event") {
+        canSendEvent(event, roomId);
+        return;
+    }
 
-        // These APIs don't require userId
-        if (event.data.action === "join_rules_state") {
-            getJoinRules(event, roomId);
-            return;
-        } else if (event.data.action === "set_plumbing_state") {
-            setPlumbingState(event, roomId, event.data.status);
-            return;
-        } else if (event.data.action === "get_membership_count") {
-            getMembershipCount(event, roomId);
-            return;
-        } else if (event.data.action === "get_room_enc_state") {
-            getRoomEncState(event, roomId);
-            return;
-        } else if (event.data.action === "can_send_event") {
-            canSendEvent(event, roomId);
-            return;
-        }
-
-        if (!userId) {
-            sendError(event, _t('Missing user_id in request'));
-            return;
-        }
-        switch (event.data.action) {
-            case "membership_state":
-                getMembershipState(event, roomId, userId);
-                break;
-            case "invite":
-                inviteUser(event, roomId, userId);
-                break;
-            case "bot_options":
-                botOptions(event, roomId, userId);
-                break;
-            case "set_bot_options":
-                setBotOptions(event, roomId, userId);
-                break;
-            case "set_bot_power":
-                setBotPower(event, roomId, userId, event.data.level);
-                break;
-            default:
-                console.warn("Unhandled postMessage event with action '" + event.data.action +"'");
-                break;
-        }
-    }, (err) => {
-        console.error(err);
-        sendError(event, _t('Failed to lookup current room') + '.');
-    });
+    if (!userId) {
+        sendError(event, _t('Missing user_id in request'));
+        return;
+    }
+    switch (event.data.action) {
+        case "membership_state":
+            getMembershipState(event, roomId, userId);
+            break;
+        case "invite":
+            inviteUser(event, roomId, userId);
+            break;
+        case "bot_options":
+            botOptions(event, roomId, userId);
+            break;
+        case "set_bot_options":
+            setBotOptions(event, roomId, userId);
+            break;
+        case "set_bot_power":
+            setBotPower(event, roomId, userId, event.data.level);
+            break;
+        default:
+            console.warn("Unhandled postMessage event with action '" + event.data.action +"'");
+            break;
+    }
 };
 
 let listenerCount = 0;
diff --git a/src/SlashCommands.js b/src/SlashCommands.js
index 7f32c1e25a..5711d14ffc 100644
--- a/src/SlashCommands.js
+++ b/src/SlashCommands.js
@@ -14,28 +14,31 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import MatrixClientPeg from "./MatrixClientPeg";
-import dis from "./dispatcher";
-import Tinter from "./Tinter";
+
+import React from 'react';
+import MatrixClientPeg from './MatrixClientPeg';
+import dis from './dispatcher';
+import Tinter from './Tinter';
 import sdk from './index';
-import { _t } from './languageHandler';
+import {_t, _td} from './languageHandler';
 import Modal from './Modal';
-import SettingsStore, {SettingLevel} from "./settings/SettingsStore";
+import SettingsStore, {SettingLevel} from './settings/SettingsStore';
 
 
 class Command {
-    constructor(name, paramArgs, runFn) {
-        this.name = name;
-        this.paramArgs = paramArgs;
+    constructor({name, args='', description, runFn}) {
+        this.command = '/' + name;
+        this.args = args;
+        this.description = description;
         this.runFn = runFn;
     }
 
     getCommand() {
-        return "/" + this.name;
+        return this.command;
     }
 
     getCommandWithArgs() {
-        return this.getCommand() + " " + this.paramArgs;
+        return this.getCommand() + " " + this.args;
     }
 
     run(roomId, args) {
@@ -47,16 +50,12 @@ class Command {
     }
 }
 
-function reject(msg) {
-    return {
-        error: msg,
-    };
+function reject(error) {
+    return {error};
 }
 
 function success(promise) {
-    return {
-        promise: promise,
-    };
+    return {promise};
 }
 
 /* Disable the "unexpected this" error for these commands - all of the run
@@ -65,352 +64,408 @@ function success(promise) {
 
 /* eslint-disable babel/no-invalid-this */
 
-const commands = {
-    ddg: new Command("ddg", "", function(roomId, args) {
-        const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
-        // TODO Don't explain this away, actually show a search UI here.
-        Modal.createTrackedDialog('Slash Commands', '/ddg is not a command', ErrorDialog, {
-            title: _t('/ddg is not a command'),
-            description: _t('To use it, just wait for autocomplete results to load and tab through them.'),
-        });
-        return success();
+export const CommandMap = {
+    ddg: new Command({
+        name: 'ddg',
+        args: '',
+        description: _td('Searches DuckDuckGo for results'),
+        runFn: function(roomId, args) {
+            const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
+            // TODO Don't explain this away, actually show a search UI here.
+            Modal.createTrackedDialog('Slash Commands', '/ddg is not a command', ErrorDialog, {
+                title: _t('/ddg is not a command'),
+                description: _t('To use it, just wait for autocomplete results to load and tab through them.'),
+            });
+            return success();
+        },
     }),
 
-    // Change your nickname
-    nick: new Command("nick", "", function(roomId, args) {
-        if (args) {
-            return success(
-                MatrixClientPeg.get().setDisplayName(args),
-            );
-        }
-        return reject(this.getUsage());
-    }),
-
-    // Changes the colorscheme of your current room
-    tint: new Command("tint", " []", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}))( +(#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})))?$/);
-            if (matches) {
-                Tinter.tint(matches[1], matches[4]);
-                const colorScheme = {};
-                colorScheme.primary_color = matches[1];
-                if (matches[4]) {
-                    colorScheme.secondary_color = matches[4];
-                } else {
-                    colorScheme.secondary_color = colorScheme.primary_color;
-                }
-                return success(
-                    SettingsStore.setValue("roomColor", roomId, SettingLevel.ROOM_ACCOUNT, colorScheme),
-                );
+    nick: new Command({
+        name: 'nick',
+        args: '',
+        description: _td('Changes your display nickname'),
+        runFn: function(roomId, args) {
+            if (args) {
+                return success(MatrixClientPeg.get().setDisplayName(args));
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
     }),
 
-    // Change the room topic
-    topic: new Command("topic", "", function(roomId, args) {
-        if (args) {
-            return success(
-                MatrixClientPeg.get().setRoomTopic(roomId, args),
-            );
-        }
-        return reject(this.getUsage());
-    }),
-
-    // Invite a user
-    invite: new Command("invite", "", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+)$/);
-            if (matches) {
-                return success(
-                    MatrixClientPeg.get().invite(roomId, matches[1]),
-                );
-            }
-        }
-        return reject(this.getUsage());
-    }),
-
-    // Join a room
-    join: new Command("join", "#alias:domain", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+)$/);
-            if (matches) {
-                let roomAlias = matches[1];
-                if (roomAlias[0] !== '#') {
-                    return reject(this.getUsage());
-                }
-                if (!roomAlias.match(/:/)) {
-                    roomAlias += ':' + MatrixClientPeg.get().getDomain();
-                }
-
-                dis.dispatch({
-                    action: 'view_room',
-                    room_alias: roomAlias,
-                    auto_join: true,
-                });
-
-                return success();
-            }
-        }
-        return reject(this.getUsage());
-    }),
-
-    part: new Command("part", "[#alias:domain]", function(roomId, args) {
-        let targetRoomId;
-        if (args) {
-            const matches = args.match(/^(\S+)$/);
-            if (matches) {
-                let roomAlias = matches[1];
-                if (roomAlias[0] !== '#') {
-                    return reject(this.getUsage());
-                }
-                if (!roomAlias.match(/:/)) {
-                    roomAlias += ':' + MatrixClientPeg.get().getDomain();
-                }
-
-                // Try to find a room with this alias
-                const rooms = MatrixClientPeg.get().getRooms();
-                for (let i = 0; i < rooms.length; i++) {
-                    const aliasEvents = rooms[i].currentState.getStateEvents(
-                        "m.room.aliases",
-                    );
-                    for (let j = 0; j < aliasEvents.length; j++) {
-                        const aliases = aliasEvents[j].getContent().aliases || [];
-                        for (let k = 0; k < aliases.length; k++) {
-                            if (aliases[k] === roomAlias) {
-                                targetRoomId = rooms[i].roomId;
-                                break;
-                            }
-                        }
-                        if (targetRoomId) { break; }
+    tint: new Command({
+        name: 'tint',
+        args: ' []',
+        description: _td('Changes colour scheme of current room'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(#([\da-fA-F]{3}|[\da-fA-F]{6}))( +(#([\da-fA-F]{3}|[\da-fA-F]{6})))?$/);
+                if (matches) {
+                    Tinter.tint(matches[1], matches[4]);
+                    const colorScheme = {};
+                    colorScheme.primary_color = matches[1];
+                    if (matches[4]) {
+                        colorScheme.secondary_color = matches[4];
+                    } else {
+                        colorScheme.secondary_color = colorScheme.primary_color;
                     }
-                    if (targetRoomId) { break; }
-                }
-                if (!targetRoomId) {
-                    return reject(_t("Unrecognised room alias:") + ' ' + roomAlias);
+                    return success(
+                        SettingsStore.setValue('roomColor', roomId, SettingLevel.ROOM_ACCOUNT, colorScheme),
+                    );
                 }
             }
-        }
-        if (!targetRoomId) targetRoomId = roomId;
-        return success(
-            MatrixClientPeg.get().leave(targetRoomId).then(
-                function() {
-                    dis.dispatch({action: 'view_next_room'});
-                },
-            ),
-        );
+            return reject(this.getUsage());
+        },
     }),
 
-    // Kick a user from the room with an optional reason
-    kick: new Command("kick", " []", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+?)( +(.*))?$/);
-            if (matches) {
-                return success(
-                    MatrixClientPeg.get().kick(roomId, matches[1], matches[3]),
-                );
+    topic: new Command({
+        name: 'topic',
+        args: '',
+        description: _td('Sets the room topic'),
+        runFn: function(roomId, args) {
+            if (args) {
+                return success(MatrixClientPeg.get().setRoomTopic(roomId, args));
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
+    }),
+
+    invite: new Command({
+        name: 'invite',
+        args: '',
+        description: _td('Invites user with given id to current room'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+)$/);
+                if (matches) {
+                    return success(MatrixClientPeg.get().invite(roomId, matches[1]));
+                }
+            }
+            return reject(this.getUsage());
+        },
+    }),
+
+    join: new Command({
+        name: 'join',
+        args: '',
+        description: _td('Joins room with given alias'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+)$/);
+                if (matches) {
+                    let roomAlias = matches[1];
+                    if (roomAlias[0] !== '#') return reject(this.getUsage());
+
+                    if (!roomAlias.includes(':')) {
+                        roomAlias += ':' + MatrixClientPeg.get().getDomain();
+                    }
+
+                    dis.dispatch({
+                        action: 'view_room',
+                        room_alias: roomAlias,
+                        auto_join: true,
+                    });
+
+                    return success();
+                }
+            }
+            return reject(this.getUsage());
+        },
+    }),
+
+    part: new Command({
+        name: 'part',
+        args: '[]',
+        description: _td('Leave room'),
+        runFn: function(roomId, args) {
+            const cli = MatrixClientPeg.get();
+
+            let targetRoomId;
+            if (args) {
+                const matches = args.match(/^(\S+)$/);
+                if (matches) {
+                    let roomAlias = matches[1];
+                    if (roomAlias[0] !== '#') return reject(this.getUsage());
+
+                    if (!roomAlias.includes(':')) {
+                        roomAlias += ':' + cli.getDomain();
+                    }
+
+                    // Try to find a room with this alias
+                    const rooms = cli.getRooms();
+                    for (let i = 0; i < rooms.length; i++) {
+                        const aliasEvents = rooms[i].currentState.getStateEvents('m.room.aliases');
+                        for (let j = 0; j < aliasEvents.length; j++) {
+                            const aliases = aliasEvents[j].getContent().aliases || [];
+                            for (let k = 0; k < aliases.length; k++) {
+                                if (aliases[k] === roomAlias) {
+                                    targetRoomId = rooms[i].roomId;
+                                    break;
+                                }
+                            }
+                            if (targetRoomId) break;
+                        }
+                        if (targetRoomId) break;
+                    }
+                    if (!targetRoomId) return reject(_t('Unrecognised room alias:') + ' ' + roomAlias);
+                }
+            }
+
+            if (!targetRoomId) targetRoomId = roomId;
+            return success(
+                cli.leave(targetRoomId).then(function() {
+                    dis.dispatch({action: 'view_next_room'});
+                }),
+            );
+        },
+    }),
+
+    kick: new Command({
+        name: 'kick',
+        args: ' [reason]',
+        description: _td('Kicks user with given id'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+?)( +(.*))?$/);
+                if (matches) {
+                    return success(MatrixClientPeg.get().kick(roomId, matches[1], matches[3]));
+                }
+            }
+            return reject(this.getUsage());
+        },
     }),
 
     // Ban a user from the room with an optional reason
-    ban: new Command("ban", " []", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+?)( +(.*))?$/);
-            if (matches) {
-                return success(
-                    MatrixClientPeg.get().ban(roomId, matches[1], matches[3]),
-                );
+    ban: new Command({
+        name: 'ban',
+        args: ' [reason]',
+        description: _td('Bans user with given id'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+?)( +(.*))?$/);
+                if (matches) {
+                    return success(MatrixClientPeg.get().ban(roomId, matches[1], matches[3]));
+                }
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
     }),
 
-    // Unban a user from the room
-    unban: new Command("unban", "", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+)$/);
-            if (matches) {
-                // Reset the user membership to "leave" to unban him
-                return success(
-                    MatrixClientPeg.get().unban(roomId, matches[1]),
-                );
+    // Unban a user from ythe room
+    unban: new Command({
+        name: 'unban',
+        args: '',
+        description: _td('Unbans user with given id'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+)$/);
+                if (matches) {
+                    // Reset the user membership to "leave" to unban him
+                    return success(MatrixClientPeg.get().unban(roomId, matches[1]));
+                }
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
     }),
 
-    ignore: new Command("ignore", "", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+)$/);
-            if (matches) {
-                const userId = matches[1];
-                const ignoredUsers = MatrixClientPeg.get().getIgnoredUsers();
-                ignoredUsers.push(userId); // de-duped internally in the js-sdk
-                return success(
-                    MatrixClientPeg.get().setIgnoredUsers(ignoredUsers).then(() => {
-                        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-                        Modal.createTrackedDialog('Slash Commands', 'User ignored', QuestionDialog, {
-                            title: _t("Ignored user"),
-                            description: (
-                                

-                                    
{ _t("You are now ignoring %(userId)s", {userId: userId}) }

-                                

-                            ),
-                            hasCancelButton: false,
-                        });
-                    }),
-                );
+    ignore: new Command({
+        name: 'ignore',
+        args: '',
+        description: _td('Ignores a user, hiding their messages from you'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const cli = MatrixClientPeg.get();
+
+                const matches = args.match(/^(\S+)$/);
+                if (matches) {
+                    const userId = matches[1];
+                    const ignoredUsers = cli.getIgnoredUsers();
+                    ignoredUsers.push(userId); // de-duped internally in the js-sdk
+                    return success(
+                        cli.setIgnoredUsers(ignoredUsers).then(() => {
+                            const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
+                            Modal.createTrackedDialog('Slash Commands', 'User ignored', QuestionDialog, {
+                                title: _t('Ignored user'),
+                                description: 

+                                    
{ _t('You are now ignoring %(userId)s', {userId}) }

+                                
,
+                                hasCancelButton: false,
+                            });
+                        }),
+                    );
+                }
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
     }),
 
-    unignore: new Command("unignore", "", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+)$/);
-            if (matches) {
-                const userId = matches[1];
-                const ignoredUsers = MatrixClientPeg.get().getIgnoredUsers();
-                const index = ignoredUsers.indexOf(userId);
-                if (index !== -1) ignoredUsers.splice(index, 1);
-                return success(
-                    MatrixClientPeg.get().setIgnoredUsers(ignoredUsers).then(() => {
-                        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-                        Modal.createTrackedDialog('Slash Commands', 'User unignored', QuestionDialog, {
-                            title: _t("Unignored user"),
-                            description: (
-                                

-                                    
{ _t("You are no longer ignoring %(userId)s", {userId: userId}) }

-                                

-                            ),
-                            hasCancelButton: false,
-                        });
-                    }),
-                );
+    unignore: new Command({
+        name: 'unignore',
+        args: '',
+        description: _td('Stops ignoring a user, showing their messages going forward'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const cli = MatrixClientPeg.get();
+
+                const matches = args.match(/^(\S+)$/);
+                if (matches) {
+                    const userId = matches[1];
+                    const ignoredUsers = cli.getIgnoredUsers();
+                    const index = ignoredUsers.indexOf(userId);
+                    if (index !== -1) ignoredUsers.splice(index, 1);
+                    return success(
+                        cli.setIgnoredUsers(ignoredUsers).then(() => {
+                            const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
+                            Modal.createTrackedDialog('Slash Commands', 'User unignored', QuestionDialog, {
+                                title: _t('Unignored user'),
+                                description: 

+                                    
{ _t('You are no longer ignoring %(userId)s', {userId}) }

+                                
,
+                                hasCancelButton: false,
+                            });
+                        }),
+                    );
+                }
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
     }),
 
     // Define the power level of a user
-    op: new Command("op", " []", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+?)( +(-?\d+))?$/);
-            let powerLevel = 50; // default power level for op
-            if (matches) {
-                const userId = matches[1];
-                if (matches.length === 4 && undefined !== matches[3]) {
-                    powerLevel = parseInt(matches[3]);
-                }
-                if (!isNaN(powerLevel)) {
-                    const room = MatrixClientPeg.get().getRoom(roomId);
-                    if (!room) {
-                        return reject("Bad room ID: " + roomId);
+    op: new Command({
+        name: 'op',
+        args: ' []',
+        description: _td('Define the power level of a user'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+?)( +(-?\d+))?$/);
+                let powerLevel = 50; // default power level for op
+                if (matches) {
+                    const userId = matches[1];
+                    if (matches.length === 4 && undefined !== matches[3]) {
+                        powerLevel = parseInt(matches[3]);
+                    }
+                    if (!isNaN(powerLevel)) {
+                        const cli = MatrixClientPeg.get();
+                        const room = cli.getRoom(roomId);
+                        if (!room) return reject('Bad room ID: ' + roomId);
+
+                        const powerLevelEvent = room.currentState.getStateEvents('m.room.power_levels', '');
+                        return success(cli.setPowerLevel(roomId, userId, powerLevel, powerLevelEvent));
                     }
-                    const powerLevelEvent = room.currentState.getStateEvents(
-                        "m.room.power_levels", "",
-                    );
-                    return success(
-                        MatrixClientPeg.get().setPowerLevel(
-                            roomId, userId, powerLevel, powerLevelEvent,
-                        ),
-                    );
                 }
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
     }),
 
     // Reset the power level of a user
-    deop: new Command("deop", "", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+)$/);
-            if (matches) {
-                const room = MatrixClientPeg.get().getRoom(roomId);
-                if (!room) {
-                    return reject("Bad room ID: " + roomId);
-                }
+    deop: new Command({
+        name: 'deop',
+        args: '',
+        description: _td('Deops user with given id'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+)$/);
+                if (matches) {
+                    const cli = MatrixClientPeg.get();
+                    const room = cli.getRoom(roomId);
+                    if (!room) return reject('Bad room ID: ' + roomId);
 
-                const powerLevelEvent = room.currentState.getStateEvents(
-                    "m.room.power_levels", "",
-                );
-                return success(
-                    MatrixClientPeg.get().setPowerLevel(
-                        roomId, args, undefined, powerLevelEvent,
-                    ),
-                );
+                    const powerLevelEvent = room.currentState.getStateEvents('m.room.power_levels', '');
+                    return success(cli.setPowerLevel(roomId, args, undefined, powerLevelEvent));
+                }
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
     }),
 
-    // Open developer tools
-    devtools: new Command("devtools", "", function(roomId) {
-        const DevtoolsDialog = sdk.getComponent("dialogs.DevtoolsDialog");
-        Modal.createDialog(DevtoolsDialog, { roomId });
-        return success();
+    devtools: new Command({
+        name: 'devtools',
+        description: _td('Opens the Developer Tools dialog'),
+        runFn: function(roomId) {
+            const DevtoolsDialog = sdk.getComponent('dialogs.DevtoolsDialog');
+            Modal.createDialog(DevtoolsDialog, {roomId});
+            return success();
+        },
     }),
 
     // Verify a user, device, and pubkey tuple
-    verify: new Command("verify", "  ", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+) +(\S+) +(\S+)$/);
-            if (matches) {
-                const userId = matches[1];
-                const deviceId = matches[2];
-                const fingerprint = matches[3];
+    verify: new Command({
+        name: 'verify',
+        args: '  ',
+        description: _td('Verifies a user, device, and pubkey tuple'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+) +(\S+) +(\S+)$/);
+                if (matches) {
+                    const cli = MatrixClientPeg.get();
 
-                return success(
-                    // Promise.resolve to handle transition from static result to promise; can be removed
-                    // in future
-                    Promise.resolve(MatrixClientPeg.get().getStoredDevice(userId, deviceId)).then((device) => {
-                        if (!device) {
-                            throw new Error(_t(`Unknown (user, device) pair:`) + ` (${userId}, ${deviceId})`);
-                        }
+                    const userId = matches[1];
+                    const deviceId = matches[2];
+                    const fingerprint = matches[3];
 
-                        if (device.isVerified()) {
-                            if (device.getFingerprint() === fingerprint) {
-                                throw new Error(_t(`Device already verified!`));
-                            } else {
-                                throw new Error(_t(`WARNING: Device already verified, but keys do NOT MATCH!`));
+                    return success(
+                        // Promise.resolve to handle transition from static result to promise; can be removed
+                        // in future
+                        Promise.resolve(cli.getStoredDevice(userId, deviceId)).then((device) => {
+                            if (!device) {
+                                throw new Error(_t('Unknown (user, device) pair:') + ` (${userId}, ${deviceId})`);
                             }
-                        }
 
-                        if (device.getFingerprint() !== fingerprint) {
-                            const fprint = device.getFingerprint();
-                            throw new Error(
-                                _t('WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and device' +
-                                   ' %(deviceId)s is "%(fprint)s" which does not match the provided key' +
-                                   ' "%(fingerprint)s". This could mean your communications are being intercepted!',
-                                   {deviceId: deviceId, fprint: fprint, userId: userId, fingerprint: fingerprint}));
-                        }
+                            if (device.isVerified()) {
+                                if (device.getFingerprint() === fingerprint) {
+                                    throw new Error(_t('Device already verified!'));
+                                } else {
+                                    throw new Error(_t('WARNING: Device already verified, but keys do NOT MATCH!'));
+                                }
+                            }
 
-                        return MatrixClientPeg.get().setDeviceVerified(userId, deviceId, true);
-                    }).then(() => {
-                        // Tell the user we verified everything
-                        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-                        Modal.createTrackedDialog('Slash Commands', 'Verified key', QuestionDialog, {
-                            title: _t("Verified key"),
-                            description: (
-                                

-                                  

-                                    {
-                                        _t("The signing key you provided matches the signing key you received " +
-                                           "from %(userId)s's device %(deviceId)s. Device marked as verified.",
-                                           {userId: userId, deviceId: deviceId})
-                                    }
-                                  

-                                

-                            ),
-                            hasCancelButton: false,
-                        });
-                    }),
-                );
+                            if (device.getFingerprint() !== fingerprint) {
+                                const fprint = device.getFingerprint();
+                                throw new Error(
+                                    _t('WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and device' +
+                                        ' %(deviceId)s is "%(fprint)s" which does not match the provided key ' +
+                                        '"%(fingerprint)s". This could mean your communications are being intercepted!',
+                                        {
+                                            fprint,
+                                            userId,
+                                            deviceId,
+                                            fingerprint,
+                                        }));
+                            }
+
+                            return cli.setDeviceVerified(userId, deviceId, true);
+                        }).then(() => {
+                            // Tell the user we verified everything
+                            const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
+                            Modal.createTrackedDialog('Slash Commands', 'Verified key', QuestionDialog, {
+                                title: _t('Verified key'),
+                                description: 

+                                    

+                                        {
+                                            _t('The signing key you provided matches the signing key you received ' +
+                                                'from %(userId)s\'s device %(deviceId)s. Device marked as verified.',
+                                                {userId, deviceId})
+                                        }
+                                    

+                                
,
+                                hasCancelButton: false,
+                            });
+                        }),
+                    );
+                }
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
+    }),
+
+    // Command definitions for autocompletion ONLY:
+
+    // /me is special because its not handled by SlashCommands.js and is instead done inside the Composer classes
+    me: new Command({
+        name: 'me',
+        args: '',
+        description: _td('Displays action'),
     }),
 };
 /* eslint-enable babel/no-invalid-this */
@@ -421,50 +476,40 @@ const aliases = {
     j: "join",
 };
 
-module.exports = {
-    /**
-     * Process the given text for /commands and perform them.
-     * @param {string} roomId The room in which the command was performed.
-     * @param {string} input The raw text input by the user.
-     * @return {Object|null} An object with the property 'error' if there was an error
-     * processing the command, or 'promise' if a request was sent out.
-     * Returns null if the input didn't match a command.
-     */
-    processInput: function(roomId, input) {
-        // trim any trailing whitespace, as it can confuse the parser for
-        // IRC-style commands
-        input = input.replace(/\s+$/, "");
-        if (input[0] === "/") {
-            const bits = input.match(/^(\S+?)( +((.|\n)*))?$/);
-            let cmd;
-            let args;
-            if (bits) {
-                cmd = bits[1].substring(1).toLowerCase();
-                args = bits[3];
-            } else {
-                cmd = input;
-            }
-            if (cmd === "me") return null;
-            if (aliases[cmd]) {
-                cmd = aliases[cmd];
-            }
-            if (commands[cmd]) {
-                return commands[cmd].run(roomId, args);
-            } else {
-                return reject(_t("Unrecognised command:") + ' ' + input);
-            }
-        }
-        return null; // not a command
-    },
 
-    getCommandList: function() {
-        // Return all the commands plus /me and /markdown which aren't handled like normal commands
-        const cmds = Object.keys(commands).sort().map(function(cmdKey) {
-            return commands[cmdKey];
-        });
-        cmds.push(new Command("me", "", function() {}));
-        cmds.push(new Command("markdown", "", function() {}));
+/**
+ * Process the given text for /commands and perform them.
+ * @param {string} roomId The room in which the command was performed.
+ * @param {string} input The raw text input by the user.
+ * @return {Object|null} An object with the property 'error' if there was an error
+ * processing the command, or 'promise' if a request was sent out.
+ * Returns null if the input didn't match a command.
+ */
+export function processCommandInput(roomId, input) {
+    // trim any trailing whitespace, as it can confuse the parser for
+    // IRC-style commands
+    input = input.replace(/\s+$/, '');
+    if (input[0] !== '/') return null; // not a command
 
-        return cmds;
-    },
-};
+    const bits = input.match(/^(\S+?)( +((.|\n)*))?$/);
+    let cmd;
+    let args;
+    if (bits) {
+        cmd = bits[1].substring(1).toLowerCase();
+        args = bits[3];
+    } else {
+        cmd = input;
+    }
+
+    if (aliases[cmd]) {
+        cmd = aliases[cmd];
+    }
+    if (CommandMap[cmd]) {
+        // if it has no runFn then its an ignored/nop command (autocomplete only) e.g `/me`
+        if (!CommandMap[cmd].runFn) return null;
+
+        return CommandMap[cmd].run(roomId, args);
+    } else {
+        return reject(_t('Unrecognised command:') + ' ' + input);
+    }
+}
diff --git a/src/TextForEvent.js b/src/TextForEvent.js
index 712150af4d..15c67526d9 100644
--- a/src/TextForEvent.js
+++ b/src/TextForEvent.js
@@ -129,6 +129,64 @@ function textForRoomNameEvent(ev) {
     });
 }
 
+function textForServerACLEvent(ev) {
+    const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
+    const prevContent = ev.getPrevContent();
+    const changes = [];
+    const current = ev.getContent();
+    const prev = {
+        deny: Array.isArray(prevContent.deny) ? prevContent.deny : [],
+        allow: Array.isArray(prevContent.allow) ? prevContent.allow : [],
+        allow_ip_literals: !(prevContent.allow_ip_literals === false),
+    };
+    let text = "";
+    if (prev.deny.length === 0 && prev.allow.length === 0) {
+        text = `${senderDisplayName} set server ACLs for this room: `;
+    } else {
+        text = `${senderDisplayName} changed the server ACLs for this room: `;
+    }
+
+    if (!Array.isArray(current.allow)) {
+        current.allow = [];
+    }
+    /* If we know for sure everyone is banned, don't bother showing the diff view */
+    if (current.allow.length === 0) {
+        return text + "🎉 All servers are banned from participating! This room can no longer be used.";
+    }
+
+    if (!Array.isArray(current.deny)) {
+        current.deny = [];
+    }
+
+    const bannedServers = current.deny.filter((srv) => typeof(srv) === 'string' && !prev.deny.includes(srv));
+    const unbannedServers = prev.deny.filter((srv) => typeof(srv) === 'string' && !current.deny.includes(srv));
+    const allowedServers = current.allow.filter((srv) => typeof(srv) === 'string' && !prev.allow.includes(srv));
+    const unallowedServers = prev.allow.filter((srv) => typeof(srv) === 'string' && !current.allow.includes(srv));
+
+    if (bannedServers.length > 0) {
+        changes.push(`Servers matching ${bannedServers.join(", ")} are now banned.`);
+    }
+
+    if (unbannedServers.length > 0) {
+        changes.push(`Servers matching ${unbannedServers.join(", ")} were removed from the ban list.`);
+    }
+
+    if (allowedServers.length > 0) {
+        changes.push(`Servers matching ${allowedServers.join(", ")} are now allowed.`);
+    }
+
+    if (unallowedServers.length > 0) {
+        changes.push(`Servers matching ${unallowedServers.join(", ")} were removed from the allowed list.`);
+    }
+
+    if (prev.allow_ip_literals !== current.allow_ip_literals) {
+        const allowban = current.allow_ip_literals ? "allowed" : "banned";
+        changes.push(`Participating from a server using an IP literal hostname is now ${allowban}.`);
+    }
+
+    return text + changes.join(" ");
+}
+
 function textForMessageEvent(ev) {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
     let message = senderDisplayName + ': ' + ev.getContent().body;
@@ -309,6 +367,7 @@ const stateHandlers = {
     'm.room.encryption': textForEncryptionEvent,
     'm.room.power_levels': textForPowerEvent,
     'm.room.pinned_events': textForPinnedEvent,
+    'm.room.server_acl': textForServerACLEvent,
 
     'im.vector.modular.widgets': textForWidgetEvent,
 };
diff --git a/src/WidgetUtils.js b/src/WidgetUtils.js
deleted file mode 100644
index 5f45a8c58c..0000000000
--- a/src/WidgetUtils.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
-Copyright 2017 Vector Creations 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 MatrixClientPeg from './MatrixClientPeg';
-
-export default class WidgetUtils {
-    /* Returns true if user is able to send state events to modify widgets in this room
-     * (Does not apply to non-room-based / user widgets)
-     * @param roomId -- The ID of the room to check
-     * @return Boolean -- true if the user can modify widgets in this room
-     * @throws Error -- specifies the error reason
-     */
-    static canUserModifyWidgets(roomId) {
-        if (!roomId) {
-            console.warn('No room ID specified');
-            return false;
-        }
-
-        const client = MatrixClientPeg.get();
-        if (!client) {
-            console.warn('User must be be logged in');
-            return false;
-        }
-
-        const room = client.getRoom(roomId);
-        if (!room) {
-            console.warn(`Room ID ${roomId} is not recognised`);
-            return false;
-        }
-
-        const me = client.credentials.userId;
-        if (!me) {
-            console.warn('Failed to get user ID');
-            return false;
-        }
-
-        const member = room.getMember(me);
-        if (!member || member.membership !== "join") {
-            console.warn(`User ${me} is not in room ${roomId}`);
-            return false;
-        }
-
-        return room.currentState.maySendStateEvent('im.vector.modular.widgets', me);
-    }
-}
diff --git a/src/autocomplete/AutocompleteProvider.js b/src/autocomplete/AutocompleteProvider.js
index 2d3bad14c5..f9fb61d3a3 100644
--- a/src/autocomplete/AutocompleteProvider.js
+++ b/src/autocomplete/AutocompleteProvider.js
@@ -1,7 +1,7 @@
 /*
 Copyright 2016 Aviral Dasgupta
 Copyright 2017 Vector Creations Ltd
-Copyright 2017 New Vector 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.
@@ -57,14 +57,14 @@ export default class AutocompleteProvider {
 
         let match;
         while ((match = commandRegex.exec(query)) != null) {
-            let matchStart = match.index,
-                matchEnd = matchStart + match[0].length;
-            if (selection.start <= matchEnd && selection.end >= matchStart) {
+            const start = match.index;
+            const end = start + match[0].length;
+            if (selection.start <= end && selection.end >= start) {
                 return {
                     command: match,
                     range: {
-                        start: matchStart,
-                        end: matchEnd,
+                        start,
+                        end,
                     },
                 };
             }
diff --git a/src/autocomplete/Autocompleter.js b/src/autocomplete/Autocompleter.js
index db3ba5a7e1..b3c20a713c 100644
--- a/src/autocomplete/Autocompleter.js
+++ b/src/autocomplete/Autocompleter.js
@@ -1,6 +1,6 @@
 /*
 Copyright 2016 Aviral Dasgupta
-Copyright 2017 New Vector 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.
@@ -18,7 +18,9 @@ limitations under the License.
 // @flow
 
 import type {Component} from 'react';
+import {Room} from 'matrix-js-sdk';
 import CommandProvider from './CommandProvider';
+import CommunityProvider from './CommunityProvider';
 import DuckDuckGoProvider from './DuckDuckGoProvider';
 import RoomProvider from './RoomProvider';
 import UserProvider from './UserProvider';
@@ -48,6 +50,7 @@ const PROVIDERS = [
     EmojiProvider,
     NotifProvider,
     CommandProvider,
+    CommunityProvider,
     DuckDuckGoProvider,
 ];
 
@@ -55,7 +58,7 @@ const PROVIDERS = [
 const PROVIDER_COMPLETION_TIMEOUT = 3000;
 
 export default class Autocompleter {
-    constructor(room) {
+    constructor(room: Room) {
         this.room = room;
         this.providers = PROVIDERS.map((p) => {
             return new p(room);
diff --git a/src/autocomplete/CommandProvider.js b/src/autocomplete/CommandProvider.js
index d56cefb021..0377ff3395 100644
--- a/src/autocomplete/CommandProvider.js
+++ b/src/autocomplete/CommandProvider.js
@@ -2,6 +2,7 @@
 Copyright 2016 Aviral Dasgupta
 Copyright 2017 Vector Creations Ltd
 Copyright 2017 New Vector Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,104 +18,16 @@ limitations under the License.
 */
 
 import React from 'react';
-import { _t, _td } from '../languageHandler';
+import {_t} from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
 import FuzzyMatcher from './FuzzyMatcher';
 import {TextualCompletion} from './Components';
-import type {SelectionRange} from './Autocompleter';
+import type {Completion, SelectionRange} from "./Autocompleter";
+import {CommandMap} from '../SlashCommands';
 
-// TODO merge this with the factory mechanics of SlashCommands?
-// Warning: Since the description string will be translated in _t(result.description), all these strings below must be in i18n/strings/en_EN.json file
-const COMMANDS = [
-    {
-        command: '/me',
-        args: '',
-        description: _td('Displays action'),
-    },
-    {
-        command: '/ban',
-        args: ' [reason]',
-        description: _td('Bans user with given id'),
-    },
-    {
-        command: '/unban',
-        args: '',
-        description: _td('Unbans user with given id'),
-    },
-    {
-        command: '/op',
-        args: ' []',
-        description: _td('Define the power level of a user'),
-    },
-    {
-        command: '/deop',
-        args: '',
-        description: _td('Deops user with given id'),
-    },
-    {
-        command: '/invite',
-        args: '',
-        description: _td('Invites user with given id to current room'),
-    },
-    {
-        command: '/join',
-        args: '',
-        description: _td('Joins room with given alias'),
-    },
-    {
-        command: '/part',
-        args: '[]',
-        description: _td('Leave room'),
-    },
-    {
-        command: '/topic',
-        args: '',
-        description: _td('Sets the room topic'),
-    },
-    {
-        command: '/kick',
-        args: ' [reason]',
-        description: _td('Kicks user with given id'),
-    },
-    {
-        command: '/nick',
-        args: '',
-        description: _td('Changes your display nickname'),
-    },
-    {
-        command: '/ddg',
-        args: '',
-        description: _td('Searches DuckDuckGo for results'),
-    },
-    {
-        command: '/tint',
-        args: ' []',
-        description: _td('Changes colour scheme of current room'),
-    },
-    {
-        command: '/verify',
-        args: '  ',
-        description: _td('Verifies a user, device, and pubkey tuple'),
-    },
-    {
-        command: '/ignore',
-        args: '',
-        description: _td('Ignores a user, hiding their messages from you'),
-    },
-    {
-        command: '/unignore',
-        args: '',
-        description: _td('Stops ignoring a user, showing their messages going forward'),
-    },
-    {
-        command: '/devtools',
-        args: '',
-        description: _td('Opens the Developer Tools dialog'),
-    },
-    // Omitting `/markdown` as it only seems to apply to OldComposer
-];
+const COMMANDS = Object.values(CommandMap);
 
-const COMMAND_RE = /(^\/\w*)/g;
+const COMMAND_RE = /(^\/\w*)(?: .*)?/g;
 
 export default class CommandProvider extends AutocompleteProvider {
     constructor() {
@@ -124,30 +37,37 @@ export default class CommandProvider extends AutocompleteProvider {
         });
     }
 
-    async getCompletions(query: string, selection: SelectionRange) {
-        let completions = [];
-        if (!selection.beginning) return completions;
+    async getCompletions(query: string, selection: SelectionRange, force?: boolean): Array {
         const {command, range} = this.getCurrentCommand(query, selection);
-        if (command) {
-            let results;
-            if (command[0] == '/') {
-                results = COMMANDS;
-            } else {
-                results = this.matcher.match(command[0]);
+        if (!command) return [];
+
+        let matches = [];
+        // check if the full match differs from the first word (i.e. returns false if the command has args)
+        if (command[0] !== command[1]) { 
+            // The input looks like a command with arguments, perform exact match
+            const name = command[1].substr(1); // strip leading `/`
+            if (CommandMap[name]) {
+                matches = [CommandMap[name]];
+            }
+        } else {
+            if (query === '/') {
+                // If they have just entered `/` show everything
+                matches = COMMANDS;
+            } else {
+                // otherwise fuzzy match against all of the fields
+                matches = this.matcher.match(command[1]);
             }
-            completions = results.map((result) => {
-                return {
-                    completion: result.command + ' ',
-                    component: (),
-                    range,
-                };
-            });
         }
-        return completions;
+
+        return matches.map((result) => ({
+            // If the command is the same as the one they entered, we don't want to discard their arguments
+            completion: result.command === command[1] ? command[0] : (result.command + ' '),
+            component: ,
+            range,
+        }));
     }
 
     getName() {
diff --git a/src/autocomplete/CommunityProvider.js b/src/autocomplete/CommunityProvider.js
new file mode 100644
index 0000000000..6bcf1a02fd
--- /dev/null
+++ b/src/autocomplete/CommunityProvider.js
@@ -0,0 +1,111 @@
+/*
+Copyright 2018 New Vector Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
+
+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 AutocompleteProvider from './AutocompleteProvider';
+import MatrixClientPeg from '../MatrixClientPeg';
+import FuzzyMatcher from './FuzzyMatcher';
+import {PillCompletion} from './Components';
+import sdk from '../index';
+import _sortBy from 'lodash/sortBy';
+import {makeGroupPermalink} from "../matrix-to";
+import type {Completion, SelectionRange} from "./Autocompleter";
+import FlairStore from "../stores/FlairStore";
+
+const COMMUNITY_REGEX = /\B\+\S*/g;
+
+function score(query, space) {
+    const index = space.indexOf(query);
+    if (index === -1) {
+        return Infinity;
+    } else {
+        return index;
+    }
+}
+
+export default class CommunityProvider extends AutocompleteProvider {
+    constructor() {
+        super(COMMUNITY_REGEX);
+        this.matcher = new FuzzyMatcher([], {
+            keys: ['groupId', 'name', 'shortDescription'],
+        });
+    }
+
+    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false): Array {
+        const BaseAvatar = sdk.getComponent('views.avatars.BaseAvatar');
+
+        // Disable autocompletions when composing commands because of various issues
+        // (see https://github.com/vector-im/riot-web/issues/4762)
+        if (/^(\/join|\/leave)/.test(query)) {
+            return [];
+        }
+
+        const cli = MatrixClientPeg.get();
+        let completions = [];
+        const {command, range} = this.getCurrentCommand(query, selection, force);
+        if (command) {
+            const joinedGroups = cli.getGroups().filter(({myMembership}) => myMembership === 'join');
+
+            const groups = (await Promise.all(joinedGroups.map(async ({groupId}) => {
+                try {
+                    return FlairStore.getGroupProfileCached(cli, groupId);
+                } catch (e) { // if FlairStore failed, fall back to just groupId
+                    return Promise.resolve({
+                        name: '',
+                        groupId,
+                        avatarUrl: '',
+                        shortDescription: '',
+                    });
+                }
+            })));
+
+            this.matcher.setObjects(groups);
+
+            const matchedString = command[0];
+            completions = this.matcher.match(matchedString);
+            completions = _sortBy(completions, [
+                (c) => score(matchedString, c.groupId),
+                (c) => c.groupId.length,
+            ]).map(({avatarUrl, groupId, name}) => ({
+                completion: groupId,
+                suffix: ' ',
+                href: makeGroupPermalink(groupId),
+                component: (
+                    
+                    } title={name} description={groupId} />
+                ),
+                range,
+            }))
+            .slice(0, 4);
+        }
+        return completions;
+    }
+
+    getName() {
+        return '💬 ' + _t('Communities');
+    }
+
+    renderCompletions(completions: [React.Component]): ?React.Component {
+        return 

+            { completions }
+        
;
+    }
+}
diff --git a/src/autocomplete/DuckDuckGoProvider.js b/src/autocomplete/DuckDuckGoProvider.js
index 236ab49b62..e25ef16428 100644
--- a/src/autocomplete/DuckDuckGoProvider.js
+++ b/src/autocomplete/DuckDuckGoProvider.js
@@ -1,7 +1,7 @@
 /*
 Copyright 2016 Aviral Dasgupta
 Copyright 2017 Vector Creations Ltd
-Copyright 2017 New Vector 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.
@@ -22,7 +22,7 @@ import AutocompleteProvider from './AutocompleteProvider';
 import 'whatwg-fetch';
 
 import {TextualCompletion} from './Components';
-import type {SelectionRange} from './Autocompleter';
+import type {SelectionRange} from "./Autocompleter";
 
 const DDG_REGEX = /\/ddg\s+(.+)$/g;
 const REFERRER = 'vector';
@@ -37,7 +37,7 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
          + `&format=json&no_redirect=1&no_html=1&t=${encodeURIComponent(REFERRER)}`;
     }
 
-    async getCompletions(query: string, selection: SelectionRange) {
+    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false) {
         const {command, range} = this.getCurrentCommand(query, selection);
         if (!query || !command) {
             return [];
diff --git a/src/autocomplete/EmojiProvider.js b/src/autocomplete/EmojiProvider.js
index f4e576ea0f..81f6144fd3 100644
--- a/src/autocomplete/EmojiProvider.js
+++ b/src/autocomplete/EmojiProvider.js
@@ -1,7 +1,7 @@
 /*
 Copyright 2016 Aviral Dasgupta
 Copyright 2017 Vector Creations Ltd
-Copyright 2017 New Vector 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.
@@ -19,11 +19,11 @@ limitations under the License.
 import React from 'react';
 import { _t } from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
-import {emojioneList, shortnameToImage, shortnameToUnicode, asciiRegexp, unicodeRegexp} from 'emojione';
+import {shortnameToUnicode, asciiRegexp, unicodeRegexp} from 'emojione';
 import FuzzyMatcher from './FuzzyMatcher';
 import sdk from '../index';
 import {PillCompletion} from './Components';
-import type {SelectionRange, Completion} from './Autocompleter';
+import type {Completion, SelectionRange} from './Autocompleter';
 import _uniq from 'lodash/uniq';
 import _sortBy from 'lodash/sortBy';
 import SettingsStore from "../settings/SettingsStore";
@@ -95,7 +95,7 @@ export default class EmojiProvider extends AutocompleteProvider {
         });
     }
 
-    async getCompletions(query: string, selection: SelectionRange) {
+    async getCompletions(query: string, selection: SelectionRange, force?: boolean): Array {
         if (SettingsStore.getValue("MessageComposerInput.dontSuggestEmoji")) {
             return []; // don't give any suggestions if the user doesn't want them
         }
diff --git a/src/autocomplete/NotifProvider.js b/src/autocomplete/NotifProvider.js
index a426528567..432388c255 100644
--- a/src/autocomplete/NotifProvider.js
+++ b/src/autocomplete/NotifProvider.js
@@ -20,7 +20,7 @@ import { _t } from '../languageHandler';
 import MatrixClientPeg from '../MatrixClientPeg';
 import {PillCompletion} from './Components';
 import sdk from '../index';
-import type {SelectionRange} from './Autocompleter';
+import type {Completion, SelectionRange} from "./Autocompleter";
 
 const AT_ROOM_REGEX = /@\S*/g;
 
@@ -30,7 +30,7 @@ export default class NotifProvider extends AutocompleteProvider {
         this.room = room;
     }
 
-    async getCompletions(query: string, selection: SelectionRange, force = false) {
+    async getCompletions(query: string, selection: SelectionRange, force?:boolean = false): Array {
         const RoomAvatar = sdk.getComponent('views.avatars.RoomAvatar');
 
         const client = MatrixClientPeg.get();
diff --git a/src/autocomplete/QueryMatcher.js b/src/autocomplete/QueryMatcher.js
index 762b285685..9d4d4d0598 100644
--- a/src/autocomplete/QueryMatcher.js
+++ b/src/autocomplete/QueryMatcher.js
@@ -1,6 +1,7 @@
 //@flow
 /*
 Copyright 2017 Aviral Dasgupta
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -27,6 +28,10 @@ class KeyMap {
     priorityMap = new Map();
 }
 
+function stripDiacritics(str: string): string {
+    return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+}
+
 export default class QueryMatcher {
     /**
      * @param {object[]} objects the objects to perform a match on
@@ -46,10 +51,11 @@ export default class QueryMatcher {
         objects.forEach((object, i) => {
             const keyValues = _at(object, keys);
             for (const keyValue of keyValues) {
-                if (!map.hasOwnProperty(keyValue)) {
-                    map[keyValue] = [];
+                const key = stripDiacritics(keyValue).toLowerCase();
+                if (!map.hasOwnProperty(key)) {
+                    map[key] = [];
                 }
-                map[keyValue].push(object);
+                map[key].push(object);
             }
             keyMap.priorityMap.set(object, i);
         });
@@ -82,7 +88,7 @@ export default class QueryMatcher {
     }
 
     match(query: String): Array {
-        query = query.toLowerCase();
+        query = stripDiacritics(query).toLowerCase();
         if (this.options.shouldMatchWordsOnly) {
             query = query.replace(/[^\w]/g, '');
         }
@@ -91,7 +97,7 @@ export default class QueryMatcher {
         }
         const results = [];
         this.keyMap.keys.forEach((key) => {
-            let resultKey = key.toLowerCase();
+            let resultKey = key;
             if (this.options.shouldMatchWordsOnly) {
                 resultKey = resultKey.replace(/[^\w]/g, '');
             }
diff --git a/src/autocomplete/RoomProvider.js b/src/autocomplete/RoomProvider.js
index 139ac87041..38e2ab8373 100644
--- a/src/autocomplete/RoomProvider.js
+++ b/src/autocomplete/RoomProvider.js
@@ -1,7 +1,8 @@
 /*
 Copyright 2016 Aviral Dasgupta
 Copyright 2017 Vector Creations Ltd
-Copyright 2017 New Vector Ltd
+Copyright 2017, 2018 New Vector Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -26,9 +27,9 @@ import {getDisplayAliasForRoom} from '../Rooms';
 import sdk from '../index';
 import _sortBy from 'lodash/sortBy';
 import {makeRoomPermalink} from "../matrix-to";
-import type {SelectionRange} from './Autocompleter';
+import type {Completion, SelectionRange} from "./Autocompleter";
 
-const ROOM_REGEX = /(?=#)(\S*)/g;
+const ROOM_REGEX = /\B#\S*/g;
 
 function score(query, space) {
     const index = space.indexOf(query);
@@ -47,7 +48,7 @@ export default class RoomProvider extends AutocompleteProvider {
         });
     }
 
-    async getCompletions(query: string, selection: SelectionRange, force = false) {
+    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false): Array {
         const RoomAvatar = sdk.getComponent('views.avatars.RoomAvatar');
 
         const client = MatrixClientPeg.get();
diff --git a/src/autocomplete/UserProvider.js b/src/autocomplete/UserProvider.js
index c25dad8877..156aac2eb8 100644
--- a/src/autocomplete/UserProvider.js
+++ b/src/autocomplete/UserProvider.js
@@ -2,7 +2,8 @@
 /*
 Copyright 2016 Aviral Dasgupta
 Copyright 2017 Vector Creations Ltd
-Copyright 2017 New Vector Ltd
+Copyright 2017, 2018 New Vector Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -23,15 +24,14 @@ import AutocompleteProvider from './AutocompleteProvider';
 import {PillCompletion} from './Components';
 import sdk from '../index';
 import FuzzyMatcher from './FuzzyMatcher';
-import _pull from 'lodash/pull';
 import _sortBy from 'lodash/sortBy';
 import MatrixClientPeg from '../MatrixClientPeg';
 
-import type {Room, RoomMember} from 'matrix-js-sdk';
-import type {SelectionRange} from './Autocompleter';
+import type {MatrixEvent, Room, RoomMember, RoomState} from 'matrix-js-sdk';
 import {makeUserPermalink} from "../matrix-to";
+import type {Completion, SelectionRange} from "./Autocompleter";
 
-const USER_REGEX = /@\S*/g;
+const USER_REGEX = /\B@\S*/g;
 
 // used when you hit 'tab' - we allow some separator chars at the beginning
 // to allow you to tab-complete /mat into /(matthew)
@@ -47,7 +47,7 @@ export default class UserProvider extends AutocompleteProvider {
         this.matcher = new FuzzyMatcher([], {
             keys: ['name', 'userId'],
             shouldMatchPrefix: true,
-            shouldMatchWordsOnly: false
+            shouldMatchWordsOnly: false,
         });
 
         this._onRoomTimelineBound = this._onRoomTimeline.bind(this);
@@ -64,7 +64,7 @@ export default class UserProvider extends AutocompleteProvider {
         }
     }
 
-    _onRoomTimeline(ev, room, toStartOfTimeline, removed, data) {
+    _onRoomTimeline(ev: MatrixEvent, room: Room, toStartOfTimeline: boolean, removed: boolean, data: Object) {
         if (!room) return;
         if (removed) return;
         if (room.roomId !== this.room.roomId) return;
@@ -80,7 +80,7 @@ export default class UserProvider extends AutocompleteProvider {
         this.onUserSpoke(ev.sender);
     }
 
-    _onRoomStateMember(ev, state, member) {
+    _onRoomStateMember(ev: MatrixEvent, state: RoomState, member: RoomMember) {
         // ignore members in other rooms
         if (member.roomId !== this.room.roomId) {
             return;
@@ -90,7 +90,7 @@ export default class UserProvider extends AutocompleteProvider {
         this.users = null;
     }
 
-    async getCompletions(query: string, selection: SelectionRange, force = false) {
+    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false): Array {
         const MemberAvatar = sdk.getComponent('views.avatars.MemberAvatar');
 
         // lazy-load user list into matcher
@@ -126,7 +126,7 @@ export default class UserProvider extends AutocompleteProvider {
         return completions;
     }
 
-    getName() {
+    getName(): string {
         return '👥 ' + _t('Users');
     }
 
@@ -139,13 +139,9 @@ export default class UserProvider extends AutocompleteProvider {
         }
 
         const currentUserId = MatrixClientPeg.get().credentials.userId;
-        this.users = this.room.getJoinedMembers().filter((member) => {
-            if (member.userId !== currentUserId) return true;
-        });
+        this.users = this.room.getJoinedMembers().filter(({userId}) => userId !== currentUserId);
 
-        this.users = _sortBy(this.users, (member) =>
-            1E20 - lastSpoken[member.userId] || 1E20,
-        );
+        this.users = _sortBy(this.users, (member) => 1E20 - lastSpoken[member.userId] || 1E20);
 
         this.matcher.setObjects(this.users);
     }
diff --git a/src/components/structures/ContextualMenu.js b/src/components/structures/ContextualMenu.js
index daac294d12..adc8dfd11c 100644
--- a/src/components/structures/ContextualMenu.js
+++ b/src/components/structures/ContextualMenu.js
@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket 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.
@@ -15,12 +16,10 @@ limitations under the License.
 */
 
 
-'use strict';
-
-const classNames = require('classnames');
-const React = require('react');
-const ReactDOM = require('react-dom');
+import React from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 // Shamelessly ripped off Modal.js.  There's probably a better way
 // of doing reusable widgets like dialog boxes & menus where we go and
@@ -61,6 +60,54 @@ export default class ContextualMenu extends React.Component {
         // If true, insert an invisible screen-sized element behind the
         // menu that when clicked will close it.
         hasBackground: PropTypes.bool,
+
+        // The component to render as the context menu
+        elementClass: PropTypes.element.isRequired,
+        // on resize callback
+        windowResize: PropTypes.func,
+        // method to close menu
+        closeMenu: PropTypes.func,
+    };
+
+    constructor() {
+        super();
+        this.state = {
+            contextMenuRect: null,
+        };
+
+        this.onContextMenu = this.onContextMenu.bind(this);
+        this.collectContextMenuRect = this.collectContextMenuRect.bind(this);
+    }
+
+    collectContextMenuRect(element) {
+        // We don't need to clean up when unmounting, so ignore
+        if (!element) return;
+
+        this.setState({
+            contextMenuRect: element.getBoundingClientRect(),
+        });
+    }
+
+    onContextMenu(e) {
+        if (this.props.closeMenu) {
+            this.props.closeMenu();
+
+            e.preventDefault();
+            const x = e.clientX;
+            const y = e.clientY;
+
+            // XXX: This isn't pretty but the only way to allow opening a different context menu on right click whilst
+            // a context menu and its click-guard are up without completely rewriting how the context menus work.
+            setImmediate(() => {
+                const clickEvent = document.createEvent('MouseEvents');
+                clickEvent.initMouseEvent(
+                    'contextmenu', true, true, window, 0,
+                    0, 0, x, y, false, false,
+                    false, false, 0, null,
+                );
+                document.elementFromPoint(x, y).dispatchEvent(clickEvent);
+            });
+        }
     }
 
     render() {
@@ -83,6 +130,9 @@ export default class ContextualMenu extends React.Component {
             chevronFace = 'right';
         }
 
+        const contextMenuRect = this.state.contextMenuRect || null;
+        const padding = 10;
+
         const chevronOffset = {};
         if (props.chevronFace) {
             chevronFace = props.chevronFace;
@@ -90,7 +140,19 @@ export default class ContextualMenu extends React.Component {
         if (chevronFace === 'top' || chevronFace === 'bottom') {
             chevronOffset.left = props.chevronOffset;
         } else {
-            chevronOffset.top = props.chevronOffset;
+            const target = position.top;
+
+            // By default, no adjustment is made
+            let adjusted = target;
+
+            // If we know the dimensions of the context menu, adjust its position
+            // such that it does not leave the (padded) window.
+            if (contextMenuRect) {
+                adjusted = Math.min(position.top, document.body.clientHeight - contextMenuRect.height - padding);
+            }
+
+            position.top = adjusted;
+            chevronOffset.top = Math.max(props.chevronOffset, props.chevronOffset + target - adjusted);
         }
 
         // To override the default chevron colour, if it's been set
@@ -112,7 +174,7 @@ export default class ContextualMenu extends React.Component {
             `;
         }
 
-        const chevron = 
;
+        const chevron = 
;
         const className = 'mx_ContextualMenu_wrapper';
 
         const menuClasses = classNames({
@@ -154,17 +216,17 @@ export default class ContextualMenu extends React.Component {
         // FIXME: If a menu uses getDefaultProps it clobbers the onFinished
         // property set here so you can't close the menu from a button click!
         return 

-            

+            

                 { chevron }
                 
             

-            { props.hasBackground && 
 }
+            { props.hasBackground && 
 }
             
         
;
     }
 }
 
-export function createMenu(ElementClass, props) {
+export function createMenu(ElementClass, props, hasBackground=true) {
     const closeMenu = function(...args) {
         ReactDOM.unmountComponentAtNode(getOrCreateContainer());
 
@@ -175,8 +237,8 @@ export function createMenu(ElementClass, props) {
 
     // We only reference closeMenu once per call to createMenu
     const menu = 
                     

                         { _t('Only people who have been invited') }
@@ -1051,7 +1071,7 @@ export default React.createClass({
                     
                     

                         { _t('Everyone') }
@@ -1114,10 +1134,6 @@ export default React.createClass({
             let avatarNode;
             let nameNode;
             let shortDescNode;
-            const bodyNodes = [
-                this._getMembershipSection(),
-                this._getGroupSection(),
-            ];
             const rightButtons = [];
             if (this.state.editing && this.state.isUserPrivileged) {
                 let avatarImage;
@@ -1194,6 +1210,7 @@ export default React.createClass({
                     shortDescNode = { summary.profile.short_description };
                 }
             }
+
             if (this.state.editing) {
                 rightButtons.push(
                     ,
                     );
                 }
+                rightButtons.push(
+                    
+                        
+                    ,
+                );
                 if (this.props.collapsedRhs) {
                     rightButtons.push(
                         
                     

                     
-                        { bodyNodes }
+                        { this._getMembershipSection() }
+                        { this._getGroupSection() }
                     
                 

             );
diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index 5acceb1009..ebe5d7f507 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -82,17 +82,26 @@ var LeftPanel = React.createClass({
 
     _onKeyDown: function(ev) {
         if (!this.focusedElement) return;
-        let handled = false;
+        let handled = true;
 
         switch (ev.keyCode) {
+            case KeyCode.TAB:
+                this._onMoveFocus(ev.shiftKey);
+                break;
             case KeyCode.UP:
                 this._onMoveFocus(true);
-                handled = true;
                 break;
             case KeyCode.DOWN:
                 this._onMoveFocus(false);
-                handled = true;
                 break;
+            case KeyCode.ENTER:
+                this._onMoveFocus(false);
+                if (this.focusedElement) {
+                    this.focusedElement.click();
+                }
+                break;
+            default:
+                handled = false;
         }
 
         if (handled) {
@@ -102,37 +111,33 @@ var LeftPanel = React.createClass({
     },
 
     _onMoveFocus: function(up) {
-        var element = this.focusedElement;
+        let element = this.focusedElement;
 
         // unclear why this isn't needed
         // var descending = (up == this.focusDirection) ? this.focusDescending : !this.focusDescending;
         // this.focusDirection = up;
 
-        var descending = false; // are we currently descending or ascending through the DOM tree?
-        var classes;
+        let descending = false; // are we currently descending or ascending through the DOM tree?
+        let classes;
 
         do {
-            var child = up ? element.lastElementChild : element.firstElementChild;
-            var sibling = up ? element.previousElementSibling : element.nextElementSibling;
+            const child = up ? element.lastElementChild : element.firstElementChild;
+            const sibling = up ? element.previousElementSibling : element.nextElementSibling;
 
             if (descending) {
                 if (child) {
                     element = child;
-                }
-                else if (sibling) {
+                } else if (sibling) {
                     element = sibling;
-                }
-                else {
+                } else {
                     descending = false;
                     element = element.parentElement;
                 }
-            }
-            else {
+            } else {
                 if (sibling) {
                     element = sibling;
                     descending = true;
-                }
-                else {
+                } else {
                     element = element.parentElement;
                 }
             }
@@ -144,8 +149,7 @@ var LeftPanel = React.createClass({
                     descending = true;
                 }
             }
-
-        } while(element && !(
+        } while (element && !(
             classes.contains("mx_RoomTile") ||
             classes.contains("mx_SearchBox_search") ||
             classes.contains("mx_RoomSubList_ellipsis")));
diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js
index 2dd5a75c47..5dca359f32 100644
--- a/src/components/structures/LoggedInView.js
+++ b/src/components/structures/LoggedInView.js
@@ -255,6 +255,22 @@ const LoggedInView = React.createClass({
         ), true);
     },
 
+    _onClick: function(ev) {
+        // When the panels are disabled, clicking on them results in a mouse event
+        // which bubbles to certain elements in the tree. When this happens, close
+        // any settings page that is currently open (user/room/group).
+        if (this.props.leftDisabled &&
+            this.props.rightDisabled &&
+            (
+                ev.target.className === 'mx_MatrixChat' ||
+                ev.target.className === 'mx_MatrixChat_middlePanel' ||
+                ev.target.className === 'mx_RoomView'
+            )
+        ) {
+            dis.dispatch({ action: 'close_settings' });
+        }
+    },
+
     render: function() {
         const LeftPanel = sdk.getComponent('structures.LeftPanel');
         const RightPanel = sdk.getComponent('structures.RightPanel');
@@ -295,7 +311,7 @@ const LoggedInView = React.createClass({
 
             case PageTypes.UserSettings:
                 page_element = 
+            

                 { topBar }
                 
                     

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 051b9ed10b..e0bbf50d5a 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -23,6 +23,7 @@ import PropTypes from 'prop-types';
 import Matrix from "matrix-js-sdk";
 
 import Analytics from "../../Analytics";
+import { DecryptionFailureTracker } from "../../DecryptionFailureTracker";
 import MatrixClientPeg from "../../MatrixClientPeg";
 import PlatformPeg from "../../PlatformPeg";
 import SdkConfig from "../../SdkConfig";
@@ -398,6 +399,9 @@ export default React.createClass({
     },
 
     startPageChangeTimer() {
+        // Tor doesn't support performance
+        if (!performance || !performance.mark) return null;
+
         // This shouldn't happen because componentWillUpdate and componentDidUpdate
         // are used.
         if (this._pageChanging) {
@@ -409,6 +413,9 @@ export default React.createClass({
     },
 
     stopPageChangeTimer() {
+        // Tor doesn't support performance
+        if (!performance || !performance.mark) return null;
+
         if (!this._pageChanging) {
             console.warn('MatrixChat.stopPageChangeTimer: timer not started');
             return;
@@ -560,6 +567,27 @@ export default React.createClass({
                 this._setPage(PageTypes.UserSettings);
                 this.notifyNewScreen('settings');
                 break;
+            case 'close_settings':
+                this.setState({
+                    leftDisabled: false,
+                    rightDisabled: false,
+                    middleDisabled: false,
+                });
+                if (this.state.page_type === PageTypes.UserSettings) {
+                    // We do this to get setPage and notifyNewScreen
+                    if (this.state.currentRoomId) {
+                        this._viewRoom({
+                            room_id: this.state.currentRoomId,
+                        });
+                    } else if (this.state.currentGroupId) {
+                        this._viewGroup({
+                            group_id: this.state.currentGroupId,
+                        });
+                    } else {
+                        this._viewHome();
+                    }
+                }
+                break;
             case 'view_create_room':
                 this._createRoom();
                 break;
@@ -577,19 +605,10 @@ export default React.createClass({
                 this.notifyNewScreen('groups');
                 break;
             case 'view_group':
-                {
-                    const groupId = payload.group_id;
-                    this.setState({
-                        currentGroupId: groupId,
-                        currentGroupIsNew: payload.group_is_new,
-                    });
-                    this._setPage(PageTypes.GroupView);
-                    this.notifyNewScreen('group/' + groupId);
-                }
+                this._viewGroup(payload);
                 break;
             case 'view_home_page':
-                this._setPage(PageTypes.HomePage);
-                this.notifyNewScreen('home');
+                this._viewHome();
                 break;
             case 'view_set_mxid':
                 this._setMxId(payload);
@@ -632,7 +651,8 @@ export default React.createClass({
                     middleDisabled: payload.middleDisabled || false,
                     rightDisabled: payload.rightDisabled || payload.sideDisabled || false,
                 });
-                break; }
+                break;
+            }
             case 'set_theme':
                 this._onSetTheme(payload.value);
                 break;
@@ -781,7 +801,6 @@ export default React.createClass({
     // @param {string=} roomInfo.room_id ID of the room to join. One of room_id or room_alias must be given.
     // @param {string=} roomInfo.room_alias Alias of the room to join. One of room_id or room_alias must be given.
     // @param {boolean=} roomInfo.auto_join If true, automatically attempt to join the room if not already a member.
-    // @param {boolean=} roomInfo.show_settings Makes RoomView show the room settings dialog.
     // @param {string=} roomInfo.event_id ID of the event in this room to show: this will cause a switch to the
     //                                    context of that particular event.
     // @param {boolean=} roomInfo.highlighted If true, add event_id to the hash of the URL
@@ -848,6 +867,21 @@ export default React.createClass({
         });
     },
 
+    _viewGroup: function(payload) {
+        const groupId = payload.group_id;
+        this.setState({
+            currentGroupId: groupId,
+            currentGroupIsNew: payload.group_is_new,
+        });
+        this._setPage(PageTypes.GroupView);
+        this.notifyNewScreen('group/' + groupId);
+    },
+
+    _viewHome: function() {
+        this._setPage(PageTypes.HomePage);
+        this.notifyNewScreen('home');
+    },
+
     _setMxId: function(payload) {
         const SetMxIdDialog = sdk.getComponent('views.dialogs.SetMxIdDialog');
         const close = Modal.createTrackedDialog('Set MXID', '', SetMxIdDialog, {
@@ -957,6 +991,7 @@ export default React.createClass({
             if (rule !== "public") {
                 warnings.push((
                     
+                        {' '/* Whitespace, otherwise the sentences get smashed together */ }
                         { _t("This room is not public. You will not be able to rejoin without an invite.") }
                     
                 ));
@@ -995,10 +1030,20 @@ export default React.createClass({
                     }, (err) => {
                         modal.close();
                         console.error("Failed to leave room " + roomId + " " + err);
+                        let title = _t("Failed to leave room");
+                        let message = _t("Server may be unavailable, overloaded, or you hit a bug.");
+                        if (err.errcode == 'M_CANNOT_LEAVE_SERVER_NOTICE_ROOM') {
+                            title = _t("Can't leave Server Notices room");
+                            message = _t(
+                                "This room is used for important messages from the Homeserver, " +
+                                "so you cannot leave it.",
+                            );
+                        } else if (err && err.message) {
+                            message = err.message;
+                        }
                         Modal.createTrackedDialog('Failed to leave room', '', ErrorDialog, {
-                            title: _t("Failed to leave room"),
-                            description: (err && err.message ? err.message :
-                                _t("Server may be unavailable, overloaded, or you hit a bug.")),
+                            title: title,
+                            description: message,
                         });
                     });
                 }
@@ -1099,11 +1144,6 @@ export default React.createClass({
         } else if (this._is_registered) {
             this._is_registered = false;
 
-            // Set the display name = user ID localpart
-            MatrixClientPeg.get().setDisplayName(
-                MatrixClientPeg.get().getUserIdLocalpart(),
-            );
-
             if (this.props.config.welcomeUserId && getCurrentLanguage().startsWith("en")) {
                 createRoom({
                     dmUserId: this.props.config.welcomeUserId,
@@ -1231,6 +1271,28 @@ export default React.createClass({
                 action: 'logout',
             });
         });
+        cli.on('no_consent', function(message, consentUri) {
+            const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+            Modal.createTrackedDialog('No Consent Dialog', '', QuestionDialog, {
+                title: _t('Terms and Conditions'),
+                description: 

+                    
 { _t(
+                            'To continue using the %(homeserverDomain)s homeserver ' +
+                            'you must review and agree to our terms and conditions.',
+                            { homeserverDomain: cli.getDomain() },
+                        ) }
+                    

+                
,
+                button: _t('Review terms and conditions'),
+                cancelButton: _t('Dismiss'),
+                onFinished: (confirmed) => {
+                    if (confirmed) {
+                        window.open(consentUri, '_blank');
+                    }
+                },
+            }, null, true);
+        });
+
         cli.on("accountData", function(ev) {
             if (ev.getType() === 'im.vector.web.settings') {
                 if (ev.getContent() && ev.getContent().theme) {
@@ -1242,6 +1304,32 @@ export default React.createClass({
             }
         });
 
+        const dft = new DecryptionFailureTracker((total, errorCode) => {
+            Analytics.trackEvent('E2E', 'Decryption failure', errorCode, total);
+        }, (errorCode) => {
+            // Map JS-SDK error codes to tracker codes for aggregation
+            switch (errorCode) {
+                case 'MEGOLM_UNKNOWN_INBOUND_SESSION_ID':
+                    return 'olm_keys_not_sent_error';
+                case 'OLM_UNKNOWN_MESSAGE_INDEX':
+                    return 'olm_index_error';
+                case undefined:
+                    return 'unexpected_error';
+                default:
+                    return 'unspecified_error';
+            }
+        });
+
+        // Shelved for later date when we have time to think about persisting history of
+        // tracked events across sessions.
+        // dft.loadTrackedEventHashMap();
+
+        dft.start();
+
+        // When logging out, stop tracking failures and destroy state
+        cli.on("Session.logged_out", () => dft.stop());
+        cli.on("Event.decrypted", (e, err) => dft.eventDecrypted(e, err));
+
         const krh = new KeyRequestHandler(cli);
         cli.on("crypto.roomKeyRequest", (req) => {
             krh.handleKeyRequest(req);
@@ -1573,19 +1661,8 @@ export default React.createClass({
         this._setPageSubtitle(subtitle);
     },
 
-    onUserSettingsClose: function() {
-        // XXX: use browser history instead to find the previous room?
-        // or maintain a this.state.pageHistory in _setPage()?
-        if (this.state.currentRoomId) {
-            dis.dispatch({
-                action: 'view_room',
-                room_id: this.state.currentRoomId,
-            });
-        } else {
-            dis.dispatch({
-                action: 'view_home_page',
-            });
-        }
+    onCloseAllSettings() {
+        dis.dispatch({ action: 'close_settings' });
     },
 
     onServerConfigChange(config) {
@@ -1644,7 +1721,7 @@ export default React.createClass({
                 return (
                    ;
         }
diff --git a/src/components/structures/MyGroups.js b/src/components/structures/MyGroups.js
index 7a93cfb886..edb50fcedb 100644
--- a/src/components/structures/MyGroups.js
+++ b/src/components/structures/MyGroups.js
@@ -70,7 +70,7 @@ export default withMatrixClient(React.createClass({
         if (this.state.groups) {
             const groupNodes = [];
             this.state.groups.forEach((g) => {
-                groupNodes.push();
+                groupNodes.push();
             });
             contentHeader = groupNodes.length > 0 ? 
{ _t('Your Communities') }
 : 
;
             content = groupNodes.length > 0 ?
@@ -124,7 +124,7 @@ export default withMatrixClient(React.createClass({
                         ) }
                     

                 

-                

+                {/*

                     
                         
                     
@@ -140,7 +140,7 @@ export default withMatrixClient(React.createClass({
                             { 'i': (sub) => { sub } })
                         }
                     

-                

+                
*/}
             

             

                 { contentHeader }
diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index 8034923158..9aa77e695a 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@@ -25,6 +25,7 @@ import MatrixClientPeg from '../../MatrixClientPeg';
 import MemberAvatar from '../views/avatars/MemberAvatar';
 import Resend from '../../Resend';
 import * as cryptodevices from '../../cryptodevices';
+import dis from '../../dispatcher';
 
 const STATUS_BAR_HIDDEN = 0;
 const STATUS_BAR_EXPANDED = 1;
@@ -157,10 +158,12 @@ module.exports = React.createClass({
 
     _onResendAllClick: function() {
         Resend.resendUnsentEvents(this.props.room);
+        dis.dispatch({action: 'focus_composer'});
     },
 
     _onCancelAllClick: function() {
         Resend.cancelUnsentEvents(this.props.room);
+        dis.dispatch({action: 'focus_composer'});
     },
 
     _onShowDevicesClick: function() {
@@ -305,7 +308,26 @@ module.exports = React.createClass({
                 },
             );
         } else {
-            if (
+            let consentError = null;
+            for (const m of unsentMessages) {
+                if (m.error && m.error.errcode === 'M_CONSENT_NOT_GIVEN') {
+                    consentError = m.error;
+                    break;
+                }
+            }
+            if (consentError) {
+                title = _t(
+                    "You can't send any messages until you review and agree to " +
+                    "our terms and conditions.",
+                    {},
+                    {
+                        'consentLink': (sub) =>
+                            
+                                { sub }
+                            ,
+                    },
+                );
+            } else if (
                 unsentMessages.length === 1 &&
                 unsentMessages[0].error &&
                 unsentMessages[0].error.data &&
@@ -329,11 +351,13 @@ module.exports = React.createClass({
 
         return 

             {_t("Warning")}
-            

-                { title }
-            

-            

-                { content }
+            

+                

+                    { title }
+                

+                

+                    { content }
+                

             

         
;
     },
@@ -350,11 +374,13 @@ module.exports = React.createClass({
             return (
                 

                     /!\ 
-                    

-                        { _t('Connectivity to the server has been lost.') }
-                    

-                    

-                        { _t('Sent messages will be stored until your connection has returned.') }
+                    

+                        

+                            { _t('Connectivity to the server has been lost.') }
+                        

+                        

+                            { _t('Sent messages will be stored until your connection has returned.') }
+                        

                     

                 

             );
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index fb82ee067b..d798070659 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -1,6 +1,7 @@
 /*
-Copyright 2017 Vector Creations Ltd
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations 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.
@@ -15,56 +16,53 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
-var React = require('react');
-var ReactDOM = require('react-dom');
-var classNames = require('classnames');
-var sdk = require('../../index');
+import React from 'react';
+import classNames from 'classnames';
+import sdk from '../../index';
 import { Droppable } from 'react-beautiful-dnd';
 import { _t } from '../../languageHandler';
-var dis = require('../../dispatcher');
-var Unread = require('../../Unread');
-var MatrixClientPeg = require('../../MatrixClientPeg');
-var RoomNotifs = require('../../RoomNotifs');
-var FormattingUtils = require('../../utils/FormattingUtils');
-var AccessibleButton = require('../../components/views/elements/AccessibleButton');
-import Modal from '../../Modal';
+import dis from '../../dispatcher';
+import Unread from '../../Unread';
+import * as RoomNotifs from '../../RoomNotifs';
+import * as FormattingUtils from '../../utils/FormattingUtils';
 import { KeyCode } from '../../Keyboard';
+import { Group } from 'matrix-js-sdk';
+import PropTypes from 'prop-types';
 
 
 // turn this on for drop & drag console debugging galore
-var debug = false;
+const debug = false;
 
 const TRUNCATE_AT = 10;
 
-var RoomSubList = React.createClass({
+const RoomSubList = React.createClass({
     displayName: 'RoomSubList',
 
     debug: debug,
 
     propTypes: {
-        list: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
-        label: React.PropTypes.string.isRequired,
-        tagName: React.PropTypes.string,
-        editable: React.PropTypes.bool,
+        list: PropTypes.arrayOf(PropTypes.object).isRequired,
+        label: PropTypes.string.isRequired,
+        tagName: PropTypes.string,
+        editable: PropTypes.bool,
 
-        order: React.PropTypes.string.isRequired,
+        order: PropTypes.string.isRequired,
 
         // passed through to RoomTile and used to highlight room with `!` regardless of notifications count
-        isInvite: React.PropTypes.bool,
+        isInvite: PropTypes.bool,
 
-        startAsHidden: React.PropTypes.bool,
-        showSpinner: React.PropTypes.bool, // true to show a spinner if 0 elements when expanded
-        collapsed: React.PropTypes.bool.isRequired, // is LeftPanel collapsed?
-        onHeaderClick: React.PropTypes.func,
-        alwaysShowHeader: React.PropTypes.bool,
-        incomingCall: React.PropTypes.object,
-        onShowMoreRooms: React.PropTypes.func,
-        searchFilter: React.PropTypes.string,
-        emptyContent: React.PropTypes.node, // content shown if the list is empty
-        headerItems: React.PropTypes.node, // content shown in the sublist header
-        extraTiles: React.PropTypes.arrayOf(React.PropTypes.node), // extra elements added beneath tiles
+        startAsHidden: PropTypes.bool,
+        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
+        headerItems: PropTypes.node, // content shown in the sublist header
+        extraTiles: PropTypes.arrayOf(PropTypes.node), // extra elements added beneath tiles
+        showEmpty: PropTypes.bool,
     },
 
     getInitialState: function() {
@@ -77,10 +75,13 @@ var RoomSubList = React.createClass({
 
     getDefaultProps: function() {
         return {
-            onHeaderClick: function() {}, // NOP
-            onShowMoreRooms: function() {}, // NOP
+            onHeaderClick: function() {
+            }, // NOP
+            onShowMoreRooms: function() {
+            }, // NOP
             extraTiles: [],
             isInvite: false,
+            showEmpty: true,
         };
     },
 
@@ -105,15 +106,17 @@ var RoomSubList = React.createClass({
 
     applySearchFilter: function(list, filter) {
         if (filter === "") return list;
-        return list.filter((room) => {
-            return room.name && room.name.toLowerCase().indexOf(filter.toLowerCase()) >= 0
-        });
+        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() {
-        var stuck = this.refs.header.dataset.stuck;
+        const stuck = this.refs.header.dataset.stuck;
         if (this.state.hidden || stuck === undefined || stuck === "none") {
             return true;
         } else {
@@ -139,12 +142,12 @@ var RoomSubList = React.createClass({
     onClick: function(ev) {
         if (this.isCollapsableOnClick()) {
             // The header isCollapsable, so the click is to be interpreted as collapse and truncation logic
-            var isHidden = !this.state.hidden;
-            this.setState({ hidden : isHidden });
+            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.setState({truncateAt: TRUNCATE_AT});
             }
 
             this.props.onShowMoreRooms();
@@ -159,7 +162,7 @@ var RoomSubList = React.createClass({
         dis.dispatch({
             action: 'view_room',
             room_id: roomId,
-            clear_search: (ev && (ev.keyCode == KeyCode.ENTER || ev.keyCode == KeyCode.SPACE)),
+            clear_search: (ev && (ev.keyCode === KeyCode.ENTER || ev.keyCode === KeyCode.SPACE)),
         });
     },
 
@@ -169,17 +172,17 @@ var RoomSubList = React.createClass({
     },
 
     _shouldShowMentionBadge: function(roomNotifState) {
-        return roomNotifState != RoomNotifs.MUTE;
+        return roomNotifState !== RoomNotifs.MUTE;
     },
 
     /**
      * Total up all the notification counts from the rooms
      *
-     * @param {Number} If supplied will only total notifications for rooms outside the truncation number
+     * @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) {
-        var self = this;
+        const self = this;
 
         if (this.props.isInvite) {
             return [0, true];
@@ -187,9 +190,9 @@ var RoomSubList = React.createClass({
 
         return this.props.list.reduce(function(result, room, index) {
             if (truncateAt === undefined || index >= truncateAt) {
-                var roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
-                var highlight = room.getUnreadNotificationCount('highlight') > 0;
-                var 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);
@@ -238,38 +241,83 @@ var RoomSubList = React.createClass({
         });
     },
 
+    _onNotifBadgeClick: function(e) {
+        // prevent the roomsublist collapsing
+        e.preventDefault();
+        e.stopPropagation();
+        // find first room which has notifications and switch to it
+        for (const room of this.state.sortedList) {
+            const roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
+            const highlight = room.getUnreadNotificationCount('highlight') > 0;
+            const notificationCount = room.getUnreadNotificationCount();
+
+            const notifBadges = notificationCount > 0 && this._shouldShowNotifBadge(roomNotifState);
+            const mentionBadges = highlight && this._shouldShowMentionBadge(roomNotifState);
+
+            if (notifBadges || mentionBadges) {
+                dis.dispatch({
+                    action: 'view_room',
+                    room_id: room.roomId,
+                });
+                return;
+            }
+        }
+    },
+
+    _onInviteBadgeClick: function(e) {
+        // prevent the roomsublist collapsing
+        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) {
+            dis.dispatch({
+                action: 'view_room',
+                room_id: this.state.sortedList[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
+            // XXX: this is a horrible special case because Group Invite sublist is a hack
+            if (this.props.extraTiles[0].props && this.props.extraTiles[0].props.group instanceof Group) {
+                dis.dispatch({
+                    action: 'view_group',
+                    group_id: this.props.extraTiles[0].props.group.groupId,
+                });
+            }
+        }
+    },
+
     _getHeaderJsx: function() {
-        var TintableSvg = sdk.getComponent("elements.TintableSvg");
+        const subListNotifications = this.roomNotificationCount();
+        const subListNotifCount = subListNotifications[0];
+        const subListNotifHighlight = subListNotifications[1];
 
-        var subListNotifications = this.roomNotificationCount();
-        var subListNotifCount = subListNotifications[0];
-        var subListNotifHighlight = subListNotifications[1];
+        const totalTiles = this.props.list.length + (this.props.extraTiles || []).length;
+        const roomCount = totalTiles > 0 ? totalTiles : '';
 
-        var totalTiles = this.props.list.length + (this.props.extraTiles || []).length;
-        var roomCount = totalTiles > 0 ? totalTiles : '';
-
-        var chevronClasses = classNames({
+        const chevronClasses = classNames({
             'mx_RoomSubList_chevron': true,
             'mx_RoomSubList_chevronRight': this.state.hidden,
             'mx_RoomSubList_chevronDown': !this.state.hidden,
         });
 
-        var badgeClasses = classNames({
+        const badgeClasses = classNames({
             'mx_RoomSubList_badge': true,
             'mx_RoomSubList_badgeHighlight': subListNotifHighlight,
         });
 
-        var badge;
+        let badge;
         if (subListNotifCount > 0) {
-            badge = 
{ FormattingUtils.formatCount(subListNotifCount) }
;
+            badge = 

+                { FormattingUtils.formatCount(subListNotifCount) }
+            
;
         } else if (this.props.isInvite) {
             // no notifications but highlight anyway because this is an invite badge
-            badge = 
!
;
+            badge = 
!
;
         }
 
         // When collapsed, allow a long hover on the header to show user
         // the full tag name and room count
-        var title;
+        let title;
         if (this.props.collapsed) {
             title = this.props.label;
             if (roomCount !== '') {
@@ -277,63 +325,66 @@ var RoomSubList = React.createClass({
             }
         }
 
-        var incomingCall;
+        let incomingCall;
         if (this.props.incomingCall) {
-            var self = this;
+            const self = this;
             // Check if the incoming call is for this section
-            var incomingCallRoom = this.props.list.filter(function(room) {
+            const incomingCallRoom = this.props.list.filter(function(room) {
                 return self.props.incomingCall.roomId === room.roomId;
             });
 
             if (incomingCallRoom.length === 1) {
-                var IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
-                incomingCall = ;
+                const IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
+                incomingCall =
+                    ;
             }
         }
 
-        var tabindex = this.props.searchFilter === "" ? "0" : "-1";
+        const tabindex = this.props.searchFilter === "" ? "0" : "-1";
 
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return (
-            

-                
-                    { this.props.collapsed ? '' : this.props.label }
-                    
{ roomCount }

-                    

-                    { badge }
-                    { incomingCall }
+            

+                
+                    {this.props.collapsed ? '' : this.props.label}
+                    
{roomCount}

+                    

+                    {badge}
+                    {incomingCall}
                 
             

         );
     },
 
     _createOverflowTile: function(overflowCount, totalCount) {
-        var content = 
;
+        let content = 
;
 
-        var overflowNotifications = this.roomNotificationCount(TRUNCATE_AT);
-        var overflowNotifCount = overflowNotifications[0];
-        var overflowNotifHighlight = overflowNotifications[1];
+        const overflowNotifications = this.roomNotificationCount(TRUNCATE_AT);
+        const overflowNotifCount = overflowNotifications[0];
+        const overflowNotifHighlight = overflowNotifications[1];
         if (overflowNotifCount && !this.props.collapsed) {
             content = FormattingUtils.formatCount(overflowNotifCount);
         }
 
-        var badgeClasses = classNames({
+        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 (
             
-                

-                
{ _t("more") }

-                
{ content }

+                

+                
{_t("more")}

+                
{content}

             
         );
     },
 
     _showFullMemberList: function() {
         this.setState({
-            truncateAt: -1
+            truncateAt: -1,
         });
 
         this.props.onShowMoreRooms();
@@ -341,37 +392,51 @@ var RoomSubList = React.createClass({
     },
 
     render: function() {
-        var connectDropTarget = this.props.connectDropTarget;
-        var TruncatedList = sdk.getComponent('elements.TruncatedList');
-
-        var label = this.props.collapsed ? null : this.props.label;
+        const TruncatedList = sdk.getComponent('elements.TruncatedList');
 
         let content;
-        if (this.state.sortedList.length === 0 && !this.props.searchFilter && this.props.extraTiles.length === 0) {
-            content = this.props.emptyContent;
+
+        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;
+            } else {
+                content = this.makeRoomTiles();
+                content.push(...this.props.extraTiles);
+            }
         } else {
-            content = this.makeRoomTiles();
-            content.push(...this.props.extraTiles);
+            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) {
-            var subList;
-            var classes = "mx_RoomSubList";
+            let subList;
+            const classes = "mx_RoomSubList";
 
             if (!this.state.hidden) {
-                subList = 
-                                { content }
-                          ;
-            }
-            else {
-                subList = 
-                          ;
+                subList = 
+                    {content}
+                ;
+            } else {
+                subList = 
+                ;
             }
 
             const subListContent = 

-                { this._getHeaderJsx() }
-                { subList }
+                {this._getHeaderJsx()}
+                {subList}
             
;
 
             return this.props.editable ?
@@ -379,23 +444,26 @@ var RoomSubList = React.createClass({
                     droppableId={"room-sub-list-droppable_" + this.props.tagName}
                     type="draggable-RoomTile"
                 >
-                    { (provided, snapshot) => (
+                    {(provided, snapshot) => (
                         

-                            { subListContent }
+                            {subListContent}
                         

-                    ) }
+                    )}
                  : subListContent;
-        }
-        else {
-            var Loader = sdk.getComponent("elements.Spinner");
+        } else {
+            const Loader = sdk.getComponent("elements.Spinner");
+            if (this.props.showSpinner) {
+                content = ;
+            }
+
             return (
                 

-                    { this.props.alwaysShowHeader ? this._getHeaderJsx() : undefined }
-                    { (this.props.showSpinner && !this.state.hidden) ?  : undefined }
+                    {this.props.alwaysShowHeader ? this._getHeaderJsx() : undefined}
+                    { this.state.hidden ? undefined : content }
                 

             );
         }
-    }
+    },
 });
 
 module.exports = RoomSubList;
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index c5f6a75cc5..98d700e0a0 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations 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.
@@ -44,7 +45,8 @@ import { KeyCode, isOnlyCtrlOrCmdKeyEvent } from '../../Keyboard';
 
 import RoomViewStore from '../../stores/RoomViewStore';
 import RoomScrollStateStore from '../../stores/RoomScrollStateStore';
-import SettingsStore from "../../settings/SettingsStore";
+import SettingsStore, {SettingLevel} from "../../settings/SettingsStore";
+import WidgetUtils from '../../utils/WidgetUtils';
 
 const DEBUG = false;
 let debuglog = function() {};
@@ -115,6 +117,7 @@ module.exports = React.createClass({
             showApps: false,
             isAlone: false,
             isPeeking: false,
+            showingPinned: false,
 
             // error object, as from the matrix client/server API
             // If we failed to load information about the room,
@@ -182,6 +185,8 @@ module.exports = React.createClass({
             isInitialEventHighlighted: RoomViewStore.isInitialEventHighlighted(),
             forwardingEvent: RoomViewStore.getForwardingEvent(),
             shouldPeek: RoomViewStore.shouldPeek(),
+            showingPinned: SettingsStore.getValue("PinnedEvents.isOpen", RoomViewStore.getRoomId()),
+            editingRoomSettings: RoomViewStore.isEditingSettings(),
         };
 
         // Temporary logging to diagnose https://github.com/vector-im/riot-web/issues/4307
@@ -314,14 +319,7 @@ module.exports = React.createClass({
             return false;
         }
 
-        const appsStateEvents = room.currentState.getStateEvents('im.vector.modular.widgets');
-        // any valid widget = show apps
-        for (let i = 0; i < appsStateEvents.length; i++) {
-            if (appsStateEvents[i].getContent().type && appsStateEvents[i].getContent().url) {
-                return true;
-            }
-        }
-        return false;
+        return WidgetUtils.getRoomWidgets(room).length > 0;
     },
 
     componentDidMount: function() {
@@ -615,9 +613,11 @@ module.exports = React.createClass({
         }
     },
 
-    _updatePreviewUrlVisibility: function(room) {
+    _updatePreviewUrlVisibility: function({roomId}) {
+        // URL Previews in E2EE rooms can be a privacy leak so use a different setting which is per-room explicit
+        const key = MatrixClientPeg.get().isRoomEncrypted(roomId) ? 'urlPreviewsEnabled_e2ee' : 'urlPreviewsEnabled';
         this.setState({
-            showUrlPreview: SettingsStore.getValue("urlPreviewsEnabled", room.roomId),
+            showUrlPreview: SettingsStore.getValue(key, roomId),
         });
     },
 
@@ -642,19 +642,23 @@ module.exports = React.createClass({
     },
 
     onAccountData: function(event) {
-        if (event.getType() === "org.matrix.preview_urls" && this.state.room) {
+        const type = event.getType();
+        if ((type === "org.matrix.preview_urls" || type === "im.vector.web.settings") && this.state.room) {
+            // non-e2ee url previews are stored in legacy event type `org.matrix.room.preview_urls`
             this._updatePreviewUrlVisibility(this.state.room);
         }
     },
 
     onRoomAccountData: function(event, room) {
         if (room.roomId == this.state.roomId) {
-            if (event.getType() === "org.matrix.room.color_scheme") {
+            const type = event.getType();
+            if (type === "org.matrix.room.color_scheme") {
                 const color_scheme = event.getContent();
                 // XXX: we should validate the event
                 console.log("Tinter.tint from onRoomAccountData");
                 Tinter.tint(color_scheme.primary_color, color_scheme.secondary_color);
-            } else if (event.getType() === "org.matrix.room.preview_urls") {
+            } else if (type === "org.matrix.room.preview_urls" || type === "im.vector.web.settings") {
+                // non-e2ee url previews are stored in legacy event type `org.matrix.room.preview_urls`
                 this._updatePreviewUrlVisibility(room);
             }
         }
@@ -672,6 +676,7 @@ module.exports = React.createClass({
         }
 
         this._updateRoomMembers();
+        this._checkIfAlone(this.state.room);
     },
 
     onRoomMemberMembership: function(ev, member, oldMembership) {
@@ -909,6 +914,8 @@ module.exports = React.createClass({
     },
 
     uploadFile: async function(file) {
+        dis.dispatch({action: 'focus_composer'});
+
         if (MatrixClientPeg.get().isGuest()) {
             dis.dispatch({action: 'view_set_mxid'});
             return;
@@ -1135,11 +1142,14 @@ module.exports = React.createClass({
     },
 
     onPinnedClick: function() {
-        this.setState({showingPinned: !this.state.showingPinned, searching: false});
+        const nowShowingPinned = !this.state.showingPinned;
+        const roomId = this.state.room.roomId;
+        this.setState({showingPinned: nowShowingPinned, searching: false});
+        SettingsStore.setValue("PinnedEvents.isOpen", roomId, SettingLevel.ROOM_DEVICE, nowShowingPinned);
     },
 
     onSettingsClick: function() {
-        this.showSettings(true);
+        dis.dispatch({ action: 'open_room_settings' });
     },
 
     onSettingsSaveClick: function() {
@@ -1172,24 +1182,20 @@ module.exports = React.createClass({
                 });
                 // still editing room settings
             } else {
-                this.setState({
-                    editingRoomSettings: false,
-                });
+                dis.dispatch({ action: 'close_settings' });
             }
         }).finally(() => {
             this.setState({
                 uploadingRoomSettings: false,
-                editingRoomSettings: false,
             });
+            dis.dispatch({ action: 'close_settings' });
         }).done();
     },
 
     onCancelClick: function() {
         console.log("updateTint from onCancelClick");
         this.updateTint();
-        this.setState({
-            editingRoomSettings: false,
-        });
+        dis.dispatch({ action: 'close_settings' });
         if (this.state.forwardingEvent) {
             dis.dispatch({
                 action: 'forward_event',
@@ -1406,13 +1412,6 @@ module.exports = React.createClass({
         });*/
     },
 
-    showSettings: function(show) {
-        // XXX: this is a bit naughty; we should be doing this via props
-        if (show) {
-            this.setState({editingRoomSettings: true});
-        }
-    },
-
     /**
      * called by the parent component when PageUp/Down/etc is pressed.
      *
diff --git a/src/components/structures/TagPanel.js b/src/components/structures/TagPanel.js
index 0b6dc9fc75..652211595b 100644
--- a/src/components/structures/TagPanel.js
+++ b/src/components/structures/TagPanel.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2017 New Vector 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.
@@ -26,6 +26,7 @@ import dis from '../../dispatcher';
 import { _t } from '../../languageHandler';
 
 import { Droppable } from 'react-beautiful-dnd';
+import classNames from 'classnames';
 
 const TagPanel = React.createClass({
     displayName: 'TagPanel',
@@ -84,7 +85,10 @@ const TagPanel = React.createClass({
     },
 
     onMouseDown(e) {
-        dis.dispatch({action: 'deselect_tags'});
+        // only dispatch if its not a no-op
+        if (this.state.selectedTags.length > 0) {
+            dis.dispatch({action: 'deselect_tags'});
+        }
     },
 
     onCreateGroupClick(ev) {
@@ -113,17 +117,26 @@ const TagPanel = React.createClass({
             />;
         });
 
-        const clearButton = this.state.selectedTags.length > 0 ?
-             :
-            
;
+        const itemsSelected = this.state.selectedTags.length > 0;
 
-        return 

-            
+        let clearButton;
+        if (itemsSelected) {
+            clearButton = 
+                
+            ;
+        }
+
+        const classes = classNames('mx_TagPanel', {
+            mx_TagPanel_items_selected: itemsSelected,
+        });
+
+        return 

+            

                 { clearButton }
-            
+            

             

              track.stop());
+        }
+
         Promise.resolve().then(() => {
             return CallMediaHandler.getDevices();
         }).then((mediaDevices) => {
@@ -292,6 +299,7 @@ module.exports = React.createClass({
             if (this._unmounted) return;
             this.setState({
                 mediaDevices,
+                activeAudioOutput: SettingsStore.getValueAt(SettingLevel.DEVICE, 'webrtc_audiooutput'),
                 activeAudioInput: SettingsStore.getValueAt(SettingLevel.DEVICE, 'webrtc_audioinput'),
                 activeVideoInput: SettingsStore.getValueAt(SettingLevel.DEVICE, 'webrtc_videoinput'),
             });
@@ -422,7 +430,6 @@ module.exports = React.createClass({
                 "push notifications on other devices until you log back in to them",
             ) + ".",
         });
-        dis.dispatch({action: 'password_changed'});
     },
 
     _onAddEmailEditFinished: function(value, shouldSubmit) {
@@ -970,6 +977,11 @@ module.exports = React.createClass({
         return devices.map((device) => { device.label });
     },
 
+    _setAudioOutput: function(deviceId) {
+        this.setState({activeAudioOutput: deviceId});
+        CallMediaHandler.setAudioOutput(deviceId);
+    },
+
     _setAudioInput: function(deviceId) {
         this.setState({activeAudioInput: deviceId});
         CallMediaHandler.setAudioInput(deviceId);
@@ -1010,6 +1022,7 @@ module.exports = React.createClass({
 
         const Dropdown = sdk.getComponent('elements.Dropdown');
 
+        let speakerDropdown = 
{ _t('No Audio Outputs detected') }
;
         let microphoneDropdown = 
{ _t('No Microphones detected') }
;
         let webcamDropdown = 
{ _t('No Webcams detected') }
;
 
@@ -1018,6 +1031,26 @@ module.exports = React.createClass({
             label: _t('Default Device'),
         };
 
+        const audioOutputs = this.state.mediaDevices.audiooutput.slice(0);
+        if (audioOutputs.length > 0) {
+            let defaultOutput = '';
+            if (!audioOutputs.some((input) => input.deviceId === 'default')) {
+                audioOutputs.unshift(defaultOption);
+            } else {
+                defaultOutput = 'default';
+            }
+
+            speakerDropdown = 

+                
{ _t('Audio Output') }

+                
+                    { this._mapWebRtcDevicesToSpans(audioOutputs) }
+                
+            
;
+        }
+
         const audioInputs = this.state.mediaDevices.audioinput.slice(0);
         if (audioInputs.length > 0) {
             let defaultInput = '';
@@ -1059,8 +1092,9 @@ module.exports = React.createClass({
         }
 
         return 

-                { microphoneDropdown }
-                { webcamDropdown }
+            { speakerDropdown }
+            { microphoneDropdown }
+            { webcamDropdown }
         
;
     },
 
@@ -1074,6 +1108,14 @@ module.exports = React.createClass({
         
;
     },
 
+    onSelfShareClick: function() {
+        const cli = MatrixClientPeg.get();
+        const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
+        Modal.createTrackedDialog('share self dialog', '', ShareDialog, {
+            target: cli.getUser(this._me),
+        });
+    },
+
     _showSpoiler: function(event) {
         const target = event.target;
         target.innerHTML = target.getAttribute('data-spoiler');
@@ -1295,10 +1337,13 @@ module.exports = React.createClass({
 
                 

                     

-                        { _t("Logged in as:") } { this._me }
+                        { _t("Logged in as:") + ' ' }
+                        
+                            { this._me }
+                        
                     

                     

-                        { _t('Access Token:') }
+                        { _t('Access Token:') + ' ' }
                         
diff --git a/src/components/structures/login/ForgotPassword.js b/src/components/structures/login/ForgotPassword.js
index ca50b9db6e..7e0cd5da8e 100644
--- a/src/components/structures/login/ForgotPassword.js
+++ b/src/components/structures/login/ForgotPassword.js
@@ -1,6 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 New Vector 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.
@@ -15,8 +15,6 @@ 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';
@@ -45,6 +43,8 @@ module.exports = React.createClass({
             enteredHomeserverUrl: this.props.customHsUrl || this.props.defaultHsUrl,
             enteredIdentityServerUrl: this.props.customIsUrl || this.props.defaultIsUrl,
             progress: null,
+            password: null,
+            password2: null,
         };
     },
 
@@ -103,7 +103,7 @@ module.exports = React.createClass({
                     
,
                 button: _t('Continue'),
                 extraButtons: [
-                    ,
@@ -169,7 +169,8 @@ module.exports = React.createClass({
         } else if (this.state.progress === "sent_email") {
             resetPasswordJsx = (
                 

-                    { _t("An email has been sent to %(emailAddress)s. Once you've followed the link it contains, click below.", { emailAddress: this.state.email }) }
+                    { _t("An email has been sent to %(emailAddress)s. Once you've followed the link it contains, " +
+                        "click below.", { emailAddress: this.state.email }) }
                     

                     
@@ -179,14 +180,15 @@ module.exports = React.createClass({
             resetPasswordJsx = (
                 

                     
{ _t('Your password has been reset') }.

-                    
{ _t('You have been logged out of all devices and will no longer receive push notifications. To re-enable notifications, sign in again on each device') }.

+                    
{ _t('You have been logged out of all devices and will no longer receive push notifications. ' +
+                        'To re-enable notifications, sign in again on each device') }.

                     
                 

             );
         } else {
             let serverConfigSection;
-            if (!SdkConfig.get().disable_custom_urls) {
+            if (!SdkConfig.get()['disable_custom_urls']) {
                 serverConfigSection = (
                     
                 

@@ -233,6 +237,7 @@ module.exports = React.createClass({
                     
                         { _t('Create an account') }
                     
+                    
                     
                 

             

diff --git a/src/components/structures/login/LanguageSelector.js b/src/components/structures/login/LanguageSelector.js
new file mode 100644
index 0000000000..965d8334d9
--- /dev/null
+++ b/src/components/structures/login/LanguageSelector.js
@@ -0,0 +1,38 @@
+/*
+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 SdkConfig from "../../../SdkConfig";
+import {getCurrentLanguage} from "../../../languageHandler";
+import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
+import PlatformPeg from "../../../PlatformPeg";
+import sdk from '../../../index';
+import React from 'react';
+
+function onChange(newLang) {
+    if (getCurrentLanguage() !== newLang) {
+        SettingsStore.setValue("language", null, SettingLevel.DEVICE, newLang);
+        PlatformPeg.get().reload();
+    }
+}
+
+export default function LanguageSelector() {
+    if (SdkConfig.get()['disable_login_language_selector']) return 
;
+
+    const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
+    return 

+        
+    
;
+}
diff --git a/src/components/structures/login/Login.js b/src/components/structures/login/Login.js
index 7f4aa0325a..43264e7003 100644
--- a/src/components/structures/login/Login.js
+++ b/src/components/structures/login/Login.js
@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations 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.
@@ -20,15 +21,13 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-import * as languageHandler from '../../../languageHandler';
 import sdk from '../../../index';
 import Login from '../../../Login';
-import PlatformPeg from '../../../PlatformPeg';
 import SdkConfig from '../../../SdkConfig';
-import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
+import SettingsStore from "../../../settings/SettingsStore";
 
 // For validating phone numbers without country codes
-const PHONE_NUMBER_REGEX = /^[0-9\(\)\-\s]*$/;
+const PHONE_NUMBER_REGEX = /^[0-9()\-\s]*$/;
 
 /**
  * A wire component which glues together login UI components and Login logic
@@ -94,6 +93,13 @@ module.exports = React.createClass({
         this._unmounted = true;
     },
 
+    onPasswordLoginError: function(errorText) {
+        this.setState({
+            errorText,
+            loginIncorrect: Boolean(errorText),
+        });
+    },
+
     onPasswordLogin: function(username, phoneCountry, phoneNumber, password) {
         this.setState({
             busy: true,
@@ -113,10 +119,10 @@ module.exports = React.createClass({
 
             // Some error strings only apply for logging in
             const usingEmail = username.indexOf("@") > 0;
-            if (error.httpStatus == 400 && usingEmail) {
+            if (error.httpStatus === 400 && usingEmail) {
                 errorText = _t('This Home Server does not support login using email address.');
             } else if (error.httpStatus === 401 || error.httpStatus === 403) {
-                if (SdkConfig.get().disable_custom_urls) {
+                if (SdkConfig.get()['disable_custom_urls']) {
                     errorText = (
                         

                             
{ _t('Incorrect username and/or password.') }

@@ -143,7 +149,7 @@ module.exports = React.createClass({
                 // but the login API gives a 403 https://matrix.org/jira/browse/SYN-744
                 // mentions this (although the bug is for UI auth which is not this)
                 // We treat both as an incorrect password
-                loginIncorrect: error.httpStatus === 401 || error.httpStatus == 403,
+                loginIncorrect: error.httpStatus === 401 || error.httpStatus === 403,
             });
         }).finally(() => {
             if (this._unmounted) {
@@ -231,7 +237,7 @@ module.exports = React.createClass({
         hsUrl = hsUrl || this.state.enteredHomeserverUrl;
         isUrl = isUrl || this.state.enteredIdentityServerUrl;
 
-        const fallbackHsUrl = hsUrl == this.props.defaultHsUrl ? this.props.fallbackHsUrl : null;
+        const fallbackHsUrl = hsUrl === this.props.defaultHsUrl ? this.props.fallbackHsUrl : null;
 
         const loginLogic = new Login(hsUrl, isUrl, fallbackHsUrl, {
             defaultDeviceDisplayName: this.props.defaultDeviceDisplayName,
@@ -310,19 +316,27 @@ module.exports = React.createClass({
                  !this.state.enteredHomeserverUrl.startsWith("http"))
             ) {
                 errorText = 
-                    {
-                        _t("Can't connect to homeserver via HTTP when an HTTPS URL is in your browser bar. " +
-                            "Either use HTTPS or enable unsafe scripts.",
-                            {},
-                            { 'a': (sub) => { return { sub }; } },
+                    { _t("Can't connect to homeserver via HTTP when an HTTPS URL is in your browser bar. " +
+                        "Either use HTTPS or enable unsafe scripts.", {},
+                        {
+                            'a': (sub) => {
+                                return 
+                                    { sub }
+                                ;
+                            },
+                        },
                     ) }
                 ;
             } else {
                 errorText = 
-                    {
-                        _t("Can't connect to homeserver - please check your connectivity, ensure your homeserver's SSL certificate is trusted, and that a browser extension is not blocking requests.",
-                            {},
-                            { 'a': (sub) => { return { sub }; } },
+                    { _t("Can't connect to homeserver - please check your connectivity, ensure your " +
+                        "homeserver's SSL certificate is trusted, and that a browser extension " +
+                        "is not blocking requests.", {},
+                        {
+                            'a': (sub) => {
+                                return { sub };
+                            },
+                        },
                     ) }
                 ;
             }
@@ -350,6 +364,7 @@ module.exports = React.createClass({
         return (
             
-            
-        
;
-    },
-
     render: function() {
         const Loader = sdk.getComponent("elements.Spinner");
         const LoginPage = sdk.getComponent("login.LoginPage");
@@ -399,25 +397,14 @@ module.exports = React.createClass({
         if (this.props.enableGuest) {
             loginAsGuestJsx =
                 
-                    { _t('Login as guest') }
+                    { _t('Try the app first') }
                 ;
         }
 
-        let returnToAppJsx;
-        /*
-        // with the advent of ILAG I don't think we need this any more
-        if (this.props.onCancelClick) {
-            returnToAppJsx =
-                
-                    { _t('Return to app') }
-                ;
-        }
-        */
-
         let serverConfig;
         let header;
 
-        if (!SdkConfig.get().disable_custom_urls) {
+        if (!SdkConfig.get()['disable_custom_urls']) {
             serverConfig = 
                 

@@ -460,8 +449,7 @@ module.exports = React.createClass({
                             { _t('Create an account') }
                         
                         { loginAsGuestJsx }
-                        { returnToAppJsx }
-                        { !SdkConfig.get().disable_login_language_selector ? this._renderLanguageSetting() : '' }
+                        
                         
                     

                 

diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
index 62a3ee4f68..462063406f 100644
--- a/src/components/structures/login/Registration.js
+++ b/src/components/structures/login/Registration.js
@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations 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.
@@ -22,7 +23,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import sdk from '../../../index';
-import ServerConfig from '../../views/login/ServerConfig';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import RegistrationForm from '../../views/login/RegistrationForm';
 import RtsClient from '../../../RtsClient';
@@ -62,6 +62,12 @@ module.exports = React.createClass({
         onLoginClick: PropTypes.func.isRequired,
         onCancelClick: PropTypes.func,
         onServerConfigChange: PropTypes.func.isRequired,
+
+        rtsClient: PropTypes.shape({
+            getTeamsConfig: PropTypes.func.isRequired,
+            trackReferral: PropTypes.func.isRequired,
+            getTeam: PropTypes.func.isRequired,
+        }),
     },
 
     getInitialState: function() {
@@ -133,7 +139,7 @@ module.exports = React.createClass({
             newState.isUrl = config.isUrl;
         }
         this.props.onServerConfigChange(config);
-        this.setState(newState, function() {
+        this.setState(newState, () => {
             this._replaceClient();
         });
     },
@@ -159,11 +165,11 @@ module.exports = React.createClass({
             let msg = response.message || response.toString();
             // can we give a better error message?
             if (response.required_stages && response.required_stages.indexOf('m.login.msisdn') > -1) {
-                let msisdn_available = false;
+                let msisdnAvailable = false;
                 for (const flow of response.available_flows) {
-                    msisdn_available |= flow.stages.indexOf('m.login.msisdn') > -1;
+                    msisdnAvailable |= flow.stages.indexOf('m.login.msisdn') > -1;
                 }
-                if (!msisdn_available) {
+                if (!msisdnAvailable) {
                     msg = _t('This server does not support authentication with a phone number.');
                 }
             }
@@ -242,7 +248,7 @@ module.exports = React.createClass({
         return matrixClient.getPushers().then((resp)=>{
             const pushers = resp.pushers;
             for (let i = 0; i < pushers.length; ++i) {
-                if (pushers[i].kind == 'email') {
+                if (pushers[i].kind === 'email') {
                     const emailPusher = pushers[i];
                     emailPusher.data = { brand: this.props.brand };
                     matrixClient.setPusher(emailPusher).done(() => {
@@ -267,7 +273,7 @@ module.exports = React.createClass({
                 errMsg = _t('Passwords don\'t match.');
                 break;
             case "RegistrationForm.ERR_PASSWORD_LENGTH":
-                errMsg = _t('Password too short (min %(MIN_PASSWORD_LENGTH)s).', {MIN_PASSWORD_LENGTH: MIN_PASSWORD_LENGTH});
+                errMsg = _t('Password too short (min %(MIN_PASSWORD_LENGTH)s).', {MIN_PASSWORD_LENGTH});
                 break;
             case "RegistrationForm.ERR_EMAIL_INVALID":
                 errMsg = _t('This doesn\'t look like a valid email address.');
@@ -353,7 +359,7 @@ module.exports = React.createClass({
             registerBody = ;
         } else {
             let serverConfigSection;
-            if (!SdkConfig.get().disable_custom_urls) {
+            if (!SdkConfig.get()['disable_custom_urls']) {
                 serverConfigSection = (
                     
-                    { _t('Return to app') }
-                
-            );
-        }
-        */
-
         let header;
         let errorText;
         // FIXME: remove hardcoded Status team tweaks at some point
@@ -418,6 +412,8 @@ module.exports = React.createClass({
             );
         }
 
+        const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
+
         return (
             
                 

@@ -431,7 +427,7 @@ module.exports = React.createClass({
                     { registerBody }
                     { signIn }
                     { errorText }
-                    { returnToAppJsx }
+                    
                     
                 

             
diff --git a/src/components/views/context_menus/GroupInviteTileContextMenu.js b/src/components/views/context_menus/GroupInviteTileContextMenu.js
new file mode 100644
index 0000000000..e30acca16d
--- /dev/null
+++ b/src/components/views/context_menus/GroupInviteTileContextMenu.js
@@ -0,0 +1,87 @@
+/*
+Copyright 2018 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import Modal from '../../../Modal';
+import {Group} from 'matrix-js-sdk';
+import GroupStore from "../../../stores/GroupStore";
+
+export default class GroupInviteTileContextMenu extends React.Component {
+    static propTypes = {
+        group: PropTypes.instanceOf(Group).isRequired,
+        /* callback called when the menu is dismissed */
+        onFinished: PropTypes.func,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+
+        this._onClickReject = this._onClickReject.bind(this);
+    }
+
+    componentWillMount() {
+        this._unmounted = false;
+    }
+
+    componentWillUnmount() {
+        this._unmounted = true;
+    }
+
+    _onClickReject() {
+        const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
+        Modal.createTrackedDialog('Reject community invite', '', QuestionDialog, {
+            title: _t('Reject invitation'),
+            description: _t('Are you sure you want to reject the invitation?'),
+            onFinished: async (shouldLeave) => {
+                if (!shouldLeave) return;
+
+                // FIXME: controller shouldn't be loading a view :(
+                const Loader = sdk.getComponent("elements.Spinner");
+                const modal = Modal.createDialog(Loader, null, 'mx_Dialog_spinner');
+
+                try {
+                    await GroupStore.leaveGroup(this.props.group.groupId);
+                } catch (e) {
+                    console.error("Error rejecting community invite: ", e);
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createTrackedDialog('Error rejecting invite', '', ErrorDialog, {
+                        title: _t("Error"),
+                        description: _t("Unable to reject invite"),
+                    });
+                } finally {
+                    modal.close();
+                }
+            },
+        });
+
+        // Close the context menu
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        }
+    }
+
+    render() {
+        return 

+            

+                
+                { _t('Reject') }
+            

+        
;
+    }
+}
diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index 22c6f2aa70..be718050c1 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -15,10 +15,9 @@ 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 {EventStatus} from 'matrix-js-sdk';
 
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher';
@@ -184,6 +183,15 @@ module.exports = React.createClass({
         this.closeMenu();
     },
 
+    onPermalinkClick: function(e: Event) {
+        e.preventDefault();
+        const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
+        Modal.createTrackedDialog('share room message dialog', '', ShareDialog, {
+            target: this.props.mxEvent,
+        });
+        this.closeMenu();
+    },
+
     onReplyClick: function() {
         dis.dispatch({
             action: 'reply_to_event',
@@ -211,7 +219,10 @@ module.exports = React.createClass({
         let replyButton;
         let collapseReplyThread;
 
-        if (eventStatus === 'not_sent') {
+        // status is SENT before remote-echo, null after
+        const isSent = !eventStatus || eventStatus === EventStatus.SENT;
+
+        if (eventStatus === EventStatus.NOT_SENT) {
             resendButton = (
                 

                     { _t('Resend') }
@@ -219,7 +230,7 @@ module.exports = React.createClass({
             );
         }
 
-        if (!eventStatus && this.state.canRedact) {
+        if (isSent && this.state.canRedact) {
             redactButton = (
                 

                     { _t('Remove') }
@@ -227,7 +238,7 @@ module.exports = React.createClass({
             );
         }
 
-        if (eventStatus === "queued" || eventStatus === "not_sent") {
+        if (eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT) {
             cancelButton = (
                 

                     { _t('Cancel Sending') }
@@ -235,7 +246,7 @@ module.exports = React.createClass({
             );
         }
 
-        if (!eventStatus && this.props.mxEvent.getType() === 'm.room.message') {
+        if (isSent && this.props.mxEvent.getType() === 'm.room.message') {
             const content = this.props.mxEvent.getContent();
             if (content.msgtype && content.msgtype !== 'm.bad.encrypted' && content.hasOwnProperty('body')) {
                 forwardButton = (
@@ -244,13 +255,11 @@ module.exports = React.createClass({
                     

                 );
 
-                if (SettingsStore.isFeatureEnabled("feature_rich_quoting")) {
-                    replyButton = (
-                        

-                            { _t('Reply') }
-                        

-                    );
-                }
+                replyButton = (
+                    

+                        { _t('Reply') }
+                    

+                );
 
                 if (this.state.canPin) {
                     pinButton = (
@@ -290,7 +299,7 @@ module.exports = React.createClass({
         const permalinkButton = (
             

                 { _t('Permalink') }
+                  target="_blank" rel="noopener" onClick={this.onPermalinkClick}>{ _t('Share Message') }
             

         );
 
diff --git a/src/components/views/dialogs/AddressPickerDialog.js b/src/components/views/dialogs/AddressPickerDialog.js
index 0d0b7456b5..abc52f7b1d 100644
--- a/src/components/views/dialogs/AddressPickerDialog.js
+++ b/src/components/views/dialogs/AddressPickerDialog.js
@@ -1,6 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 New Vector 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.
@@ -17,7 +17,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { _t } from '../../../languageHandler';
+import { _t, _td } from '../../../languageHandler';
 import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import Promise from 'bluebird';
@@ -27,6 +27,13 @@ import GroupStore from '../../../stores/GroupStore';
 const TRUNCATE_QUERY_LIST = 40;
 const QUERY_USER_DIRECTORY_DEBOUNCE_MS = 200;
 
+const addressTypeName = {
+    'mx-user-id': _td("Matrix ID"),
+    'mx-room-id': _td("Matrix Room ID"),
+    'email': _td("email address"),
+};
+
+
 module.exports = React.createClass({
     displayName: "AddressPickerDialog",
 
@@ -66,7 +73,7 @@ module.exports = React.createClass({
 
             // List of UserAddressType objects representing
             // the list of addresses we're going to invite
-            userList: [],
+            selectedList: [],
 
             // Whether a search is ongoing
             busy: false,
@@ -76,10 +83,9 @@ module.exports = React.createClass({
             serverSupportsUserDirectory: true,
             // The query being searched for
             query: "",
-            // List of UserAddressType objects representing
-            // the set of auto-completion results for the current search
-            // query.
-            queryList: [],
+            // List of UserAddressType objects representing the set of
+            // auto-completion results for the current search query.
+            suggestedList: [],
         };
     },
 
@@ -91,14 +97,14 @@ module.exports = React.createClass({
     },
 
     onButtonClick: function() {
-        let userList = this.state.userList.slice();
+        let selectedList = this.state.selectedList.slice();
         // Check the text input field to see if user has an unconverted address
-        // If there is and it's valid add it to the local userList
+        // If there is and it's valid add it to the local selectedList
         if (this.refs.textinput.value !== '') {
-            userList = this._addInputToList();
-            if (userList === null) return;
+            selectedList = this._addInputToList();
+            if (selectedList === null) return;
         }
-        this.props.onFinished(true, userList);
+        this.props.onFinished(true, selectedList);
     },
 
     onCancel: function() {
@@ -118,18 +124,18 @@ module.exports = React.createClass({
             e.stopPropagation();
             e.preventDefault();
             if (this.addressSelector) this.addressSelector.moveSelectionDown();
-        } else if (this.state.queryList.length > 0 && (e.keyCode === 188 || e.keyCode === 13 || e.keyCode === 9)) { // comma or enter or tab
+        } else if (this.state.suggestedList.length > 0 && (e.keyCode === 188 || e.keyCode === 13 || e.keyCode === 9)) { // comma or enter or tab
             e.stopPropagation();
             e.preventDefault();
             if (this.addressSelector) this.addressSelector.chooseSelection();
-        } else if (this.refs.textinput.value.length === 0 && this.state.userList.length && e.keyCode === 8) { // backspace
+        } else if (this.refs.textinput.value.length === 0 && this.state.selectedList.length && e.keyCode === 8) { // backspace
             e.stopPropagation();
             e.preventDefault();
-            this.onDismissed(this.state.userList.length - 1)();
+            this.onDismissed(this.state.selectedList.length - 1)();
         } else if (e.keyCode === 13) { // enter
             e.stopPropagation();
             e.preventDefault();
-            if (this.refs.textinput.value == '') {
+            if (this.refs.textinput.value === '') {
                 // if there's nothing in the input box, submit the form
                 this.onButtonClick();
             } else {
@@ -148,7 +154,7 @@ module.exports = React.createClass({
             clearTimeout(this.queryChangedDebouncer);
         }
         // Only do search if there is something to search
-        if (query.length > 0 && query != '@' && query.length >= 2) {
+        if (query.length > 0 && query !== '@' && query.length >= 2) {
             this.queryChangedDebouncer = setTimeout(() => {
                 if (this.props.pickerType === 'user') {
                     if (this.props.groupId) {
@@ -170,7 +176,7 @@ module.exports = React.createClass({
             }, QUERY_USER_DIRECTORY_DEBOUNCE_MS);
         } else {
             this.setState({
-                queryList: [],
+                suggestedList: [],
                 query: "",
                 searchError: null,
             });
@@ -179,11 +185,11 @@ module.exports = React.createClass({
 
     onDismissed: function(index) {
         return () => {
-            const userList = this.state.userList.slice();
-            userList.splice(index, 1);
+            const selectedList = this.state.selectedList.slice();
+            selectedList.splice(index, 1);
             this.setState({
-                userList: userList,
-                queryList: [],
+                selectedList,
+                suggestedList: [],
                 query: "",
             });
             if (this._cancelThreepidLookup) this._cancelThreepidLookup();
@@ -197,11 +203,11 @@ module.exports = React.createClass({
     },
 
     onSelected: function(index) {
-        const userList = this.state.userList.slice();
-        userList.push(this.state.queryList[index]);
+        const selectedList = this.state.selectedList.slice();
+        selectedList.push(this.state.suggestedList[index]);
         this.setState({
-            userList: userList,
-            queryList: [],
+            selectedList,
+            suggestedList: [],
             query: "",
         });
         if (this._cancelThreepidLookup) this._cancelThreepidLookup();
@@ -379,10 +385,10 @@ module.exports = React.createClass({
     },
 
     _processResults: function(results, query) {
-        const queryList = [];
+        const suggestedList = [];
         results.forEach((result) => {
             if (result.room_id) {
-                queryList.push({
+                suggestedList.push({
                     addressType: 'mx-room-id',
                     address: result.room_id,
                     displayName: result.name,
@@ -399,7 +405,7 @@ module.exports = React.createClass({
 
             // Return objects, structure of which is defined
             // by UserAddressType
-            queryList.push({
+            suggestedList.push({
                 addressType: 'mx-user-id',
                 address: result.user_id,
                 displayName: result.display_name,
@@ -413,18 +419,18 @@ module.exports = React.createClass({
         // a perfectly valid address if there are close matches.
         const addrType = getAddressType(query);
         if (this.props.validAddressTypes.includes(addrType)) {
-            queryList.unshift({
+            suggestedList.unshift({
                 addressType: addrType,
                 address: query,
                 isKnown: false,
             });
             if (this._cancelThreepidLookup) this._cancelThreepidLookup();
-            if (addrType == 'email') {
+            if (addrType === 'email') {
                 this._lookupThreepid(addrType, query).done();
             }
         }
         this.setState({
-            queryList,
+            suggestedList,
             error: false,
         }, () => {
             if (this.addressSelector) this.addressSelector.moveSelectionTop();
@@ -442,14 +448,14 @@ module.exports = React.createClass({
         if (!this.props.validAddressTypes.includes(addrType)) {
             this.setState({ error: true });
             return null;
-        } else if (addrType == 'mx-user-id') {
+        } else if (addrType === 'mx-user-id') {
             const user = MatrixClientPeg.get().getUser(addrObj.address);
             if (user) {
                 addrObj.displayName = user.displayName;
                 addrObj.avatarMxc = user.avatarUrl;
                 addrObj.isKnown = true;
             }
-        } else if (addrType == 'mx-room-id') {
+        } else if (addrType === 'mx-room-id') {
             const room = MatrixClientPeg.get().getRoom(addrObj.address);
             if (room) {
                 addrObj.displayName = room.name;
@@ -458,15 +464,15 @@ module.exports = React.createClass({
             }
         }
 
-        const userList = this.state.userList.slice();
-        userList.push(addrObj);
+        const selectedList = this.state.selectedList.slice();
+        selectedList.push(addrObj);
         this.setState({
-            userList: userList,
-            queryList: [],
+            selectedList,
+            suggestedList: [],
             query: "",
         });
         if (this._cancelThreepidLookup) this._cancelThreepidLookup();
-        return userList;
+        return selectedList;
     },
 
     _lookupThreepid: function(medium, address) {
@@ -492,7 +498,7 @@ module.exports = React.createClass({
             if (res === null) return null;
             if (cancelled) return null;
             this.setState({
-                queryList: [{
+                suggestedList: [{
                     // a UserAddressType
                     addressType: medium,
                     address: address,
@@ -510,15 +516,27 @@ module.exports = React.createClass({
         const AddressSelector = sdk.getComponent("elements.AddressSelector");
         this.scrollElement = null;
 
+        // map addressType => set of addresses to avoid O(n*m) operation
+        const selectedAddresses = {};
+        this.state.selectedList.forEach(({address, addressType}) => {
+            if (!selectedAddresses[addressType]) selectedAddresses[addressType] = new Set();
+            selectedAddresses[addressType].add(address);
+        });
+
+        // Filter out any addresses in the above already selected addresses (matching both type and address)
+        const filteredSuggestedList = this.state.suggestedList.filter(({address, addressType}) => {
+            return !(selectedAddresses[addressType] && selectedAddresses[addressType].has(address));
+        });
+
         const query = [];
         // create the invite list
-        if (this.state.userList.length > 0) {
+        if (this.state.selectedList.length > 0) {
             const AddressTile = sdk.getComponent("elements.AddressTile");
-            for (let i = 0; i < this.state.userList.length; i++) {
+            for (let i = 0; i < this.state.selectedList.length; i++) {
                 query.push(
                     ,
@@ -528,7 +546,7 @@ module.exports = React.createClass({
 
         // Add the query at the end
         query.push(
-            

                         { _t(customVariables[row[0]].expl) }{ row[1] }{ row[1] }